css fix lightmode/darkmode

app.py

@@ -18,16 +18,15 @@ decoder_path = "erl-j/soundfont-generator-assets/decoder.pt"
 model_path = "erl-j/soundfont-generator-assets/synth_lfm_modern_bfloat16.pt"
 # Download models from Hugging Face Hub
 decoder_path = hf_hub_download("erl-j/soundfont-generator-assets", "decoder.pt")
-model_path = hf_hub_download("erl-j/soundfont-generator-assets", "synth_lfm_modern_bfloat16.pt")
+model_path = hf_hub_download(
+    "erl-j/soundfont-generator-assets", "synth_lfm_modern_bfloat16.pt"
+)
 
 # Load models once at startup
 device = "cuda"
 decoder = torch.load(decoder_path, map_location=device).half().eval()
-model = (
-    torch.load(model_path, map_location=device)
-    .half()
-    .eval()
-)
+model = torch.load(model_path, map_location=device).half().eval()
+
 
 @spaces.GPU
 def generate_and_export_soundfont(text, steps=20, instrument_name=None):
@@ -104,24 +103,25 @@ def generate_and_export_soundfont(text, steps=20, instrument_name=None):
         f"Generation took {total_time:.2f}s\nFiles saved in {output_dir}",
         zip_path,
         wav_files,
-    )   
+    )
+
 
 custom_js = open("custom.js").read()
 custom_css = open("custom.css").read()
 
-demo = gr.Blocks(title="Erl-j's Soundfont Generator",
-                 theme = gr.themes.Default(
-                     primary_hue="green",
-                     font=[gr.themes.GoogleFont("Inconsolata"), "Arial", "sans-serif"]
-                     ),
-                  js=custom_js,
-                 css = custom_css)
-
-with demo:  
-    hero_html = open("hero.html").read()
- 
-    gr.HTML(hero_html)
-    
+demo = gr.Blocks(
+    title="Erl-j's Soundfont Generator",
+    theme=gr.themes.Default(
+        primary_hue="green",
+        font=[gr.themes.GoogleFont("Inconsolata"), "Arial", "sans-serif"],
+    ),
+    js=custom_js,
+    css=custom_css,
+)
+
+with demo:
+    gr.Markdown(open("intro.md").read())
+
     with gr.Row():
         steps = gr.Slider(
             minimum=1, maximum=50, value=20, step=1, label="Generation steps"
@@ -134,7 +134,6 @@ with demo:
             lines=2,
         )
 
-
     with gr.Row():
         generate_btn = gr.Button("Generate Soundfont", variant="primary")
 
@@ -143,11 +142,16 @@ with demo:
         status_output = gr.Textbox(label="Status", lines=2, visible=False)
 
     with gr.Row():
-        wav_files = gr.File(label="Individual WAV Files", file_count="multiple", visible=False, elem_id="individual-wav-files")
+        wav_files = gr.File(
+            label="Individual WAV Files",
+            file_count="multiple",
+            visible=False,
+            elem_id="individual-wav-files",
+        )
 
     html = """
     <div id="custom-player"
-    style="width: 100%; height: 600px; background-color: "white"; border: 1px solid #f8f9fa; border-radius: 5px; margin-top: 10px;"
+    style="width: 100%; height: 600px; border: 1px solid #f8f9fa; border-radius: 5px; margin-top: 10px;"
     ></div>
     """
 
@@ -155,7 +159,12 @@ with demo:
 
     gr.Markdown("## Download Soundfont Package here:")
     with gr.Row():
-        sf = gr.File(label="Download SFZ Soundfont Package", type="filepath", visible=True, elem_id="sfz")
+        sf = gr.File(
+            label="Download SFZ Soundfont Package",
+            type="filepath",
+            visible=True,
+            elem_id="sfz",
+        )
 
     gr.Markdown("""
     # About            

custom.css

@@ -1,43 +1,14 @@
 /* CSS Variables */
 :root {
-    /* Light mode */
-    --background-color: #f5f5f5;
-    --container-background: #fafafa;
-    --key-background: white;
-    --key-hover-background: #f5f5f5;
+    --keyboard-bg: #fafafa;
+    --inactive-key-bg: #e0e0e0;
     --border-color: #e5e5e5;
-    --text-primary: #333;
-    --text-secondary: #666;
     --slider-track: #393a39;
     --slider-thumb: #000000;
-    --button-background: #015131;
-    --button-hover: #002114;
-    --button-text: white;
-    --keyboard-bg: #fafafa;
-    --inactive-key-bg: #e0e0e0;
-}
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        --background-color: #121212;
-        --container-background: #1e1e1e;
-        --key-background: #2d2d2d;
-        --key-hover-background: #3d3d3d;
-        --border-color: #404040;
-        --text-primary: #e0e0e0;
-        --text-secondary: #a0a0a0;
-        --slider-track: #666666;
-        --slider-thumb: #015131;
-        --button-background: #015131;
-        --button-hover: #026b41;
-        --keyboard-bg: #1e1e1e;
-        --inactive-key-bg: #2d2d2d;
-    }
 }
 
 /* Base styles */
 html, body, #root, .wrapper, main, .main-container {
-    background-color: var(--background-color);
     min-height: 100vh;
     margin: 0;
     padding: 0;
@@ -49,12 +20,10 @@ body {
     font-family: 'Roboto', sans-serif;
     font-size: 1rem;
     line-height: 1.5;
-    color: var(--text-primary);
     overflow-x: hidden;
     transition: background-color 0.2s ease;
 }
 
-
 /* Keyboard layout */
 .keyboard-container {
     width: 100%;
@@ -63,6 +32,7 @@ body {
     border: 1px solid var(--border-color);
     border-radius: 4px;
     user-select: none;
+    color: #333;
 }
 
 .keyboard-row {
@@ -79,9 +49,8 @@ body {
     min-width: 40px;
     flex: none;
     padding: 0.5rem;
-    border: 1px solid var(--border-color);
+    border: 2px solid var(--border-color);
     border-radius: 4px;
-    background: var(--key-background);
     cursor: pointer;
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
@@ -91,7 +60,6 @@ body {
 }
 
 .key:hover {
-    background: var(--key-hover-background);
     transform: translateY(-1px);
 }
 
@@ -107,13 +75,13 @@ body {
 .key-label {
     font-size: 0.875rem;
     font-weight: 500;
-    color: var(--text-primary);
+    color: #333;
 }
 
 .note-label {
     font-size: 0.75rem;
-    color: var(--text-secondary);
     margin-top: 0.25rem;
+    color: #666;
 }
 
 /* Controls section */
@@ -143,7 +111,7 @@ h3 {
     display: block;
     margin-bottom: 0.5em;
     font-size: 0.9em;
-    color: var(--text-primary);
+    color: #333;
 }
 
 h3 {
@@ -152,17 +120,6 @@ h3 {
     font-weight: 500;
 }
 
-.slider-value,
-.master-value,
-.release-value,
-.reverb-mix-value,
-.root-value,
-.column-value,
-.row-value {
-    color: var(--text-secondary);
-    font-weight: 500;
-}
-
 /* Range inputs */
 input[type="range"] {
     width: 100%;
@@ -229,4 +186,14 @@ input[type="range"]::-moz-range-track {
         width: 28px;
         height: 28px;
     }
-}
+}
+
+
+.release-value,
+.reverb-mix-value,
+.master-value,
+.root-value,
+.column-value,
+.row-value {
+    color: black;
+}   

custom.js

@@ -371,4 +371,4 @@ function previewPlayer() {
         document.body.appendChild(container);
     }
     new KeyboardPlayer('custom-player');
-}
+}

hero.html

@@ -1,18 +0,0 @@
-<div>
-    <h1>Erl-j's Soundfont Generator</h1>
-    Generate soundfonts from text descriptions using latent flow matching. You can then download the complete SFZ
-    soundfont
-    package to use the instrument locally.
-    <h2>Instructions</h2>
-    1. Enter a text prompt to describe the audio you want to generate. For example, *"hard bass"* or *"dark analog lead
-    flute flute flute soft"*.
-    <br>
-    2. Adjust the number of generation steps to tradeoff between quality and speed (kindof).
-    <br>
-    3. Click the "Generate Soundfont" button to generate the audio and soundfont.
-    <br>
-    4. Preview the generated instrument with the keyboard.
-    <br>
-    5. Export the soundfont by clicking the "Download SFZ Soundfont Package" button. You can then use the soundfont in a
-    SFZ-compatible sampler. See [this list](https://sfzformat.com/software/players/) for a list of SFZ players.
-</div>

intro.md

@@ -0,0 +1,15 @@
+# Erl-j's Soundfont Generator
+
+Generate soundfonts from text descriptions using latent flow matching. You can then download the complete SFZ soundfont package to use the instrument locally.
+
+## Instructions
+
+1. Enter a text prompt to describe the audio you want to generate. For example, *"hard bass"* or *"dark analog lead flute flute flute soft"*.
+
+2. Adjust the number of generation steps to tradeoff between quality and speed (kindof).
+
+3. Click the "Generate Soundfont" button to generate the audio and soundfont.
+
+4. Preview the generated instrument with the keyboard.
+
+5. Export the soundfont by clicking the "Download SFZ Soundfont Package" button. You can then use the soundfont in a SFZ-compatible sampler. See [this list](https://sfzformat.com/software/players/) for a list of SFZ players.