fix lightmode/darkmode issue amongst other things

app.py

@@ -109,23 +109,19 @@ def generate_and_export_soundfont(text, steps=20, instrument_name=None):
 custom_js = open("custom.js").read()
 custom_css = open("custom.css").read()
 
-demo = gr.Blocks(title="Erl-j's sound font generator", js=custom_js,
+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("""
-    # 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.
-    """)
-
-
-
+with demo:  
+    hero_html = open("hero.html").read()
+ 
+    gr.HTML(hero_html)
+    
     with gr.Row():
         steps = gr.Slider(
             minimum=1, maximum=50, value=20, step=1, label="Generation steps"
@@ -137,6 +133,7 @@ with demo:
             placeholder="Enter text description (e.g. 'hard bass', 'sparkly bells')",
             lines=2,
         )
+        
 
     with gr.Row():
         generate_btn = gr.Button("Generate Soundfont", variant="primary")
@@ -150,11 +147,11 @@ with demo:
 
     html = """
     <div id="custom-player"
-    style="width: 100%; height: 600px; background-color: "red"; border: 1px solid #f8f9fa; border-radius: 5px; margin-top: 10px;"
+    style="width: 100%; height: 600px; background-color: "white"; border: 1px solid #f8f9fa; border-radius: 5px; margin-top: 10px;"
     ></div>
     """
 
-    gr.HTML(html, min_height=800, max_height=800)
+    gr.HTML(html, min_height=1000, max_height=1000)
 
     gr.Markdown("## Download Soundfont Package here:")
     with gr.Row():

custom.css

@@ -1,12 +1,66 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
+/* CSS Variables */
+:root {
+    /* Light mode */
+    --background-color: #f5f5f5;
+    --container-background: #fafafa;
+    --key-background: white;
+    --key-hover-background: #f5f5f5;
+    --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;
+    width: 100%;
+    max-width: 100%;
+}
+
+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%;
     padding: 1.5rem;
-    background: #fafafa;
-    border: 1px solid #e5e5e5;
+    background: var(--keyboard-bg);
+    border: 1px solid var(--border-color);
     border-radius: 4px;
-    font-family: 'Roboto', sans-serif;
     user-select: none;
 }
 
@@ -17,26 +71,26 @@
     width: 100%;
 }
 
+/* Key styles */
 .key {
     width: calc((100% - 2.75rem) / 12);
     aspect-ratio: 1;
     min-width: 40px;
     flex: none;
-    border: 1px solid #e5e5e5;
+    padding: 0.5rem;
+    border: 1px 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;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    cursor: pointer;
-    background: white;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    user-select: none;
-    padding: 0.5rem;
 }
 
 .key:hover {
-    background: #f5f5f5;
+    background: var(--key-hover-background);
     transform: translateY(-1px);
 }
 
@@ -44,160 +98,134 @@
     transform: translateY(0);
 }
 
+.key.inactive,
+.key:disabled {
+    background: var(--inactive-key-bg);
+}
+
 .key-label {
     font-size: 0.875rem;
     font-weight: 500;
-    color: #333;
-    user-select: none;
+    color: var(--text-primary);
 }
 
 .note-label {
     font-size: 0.75rem;
-    color: #666;
+    color: var(--text-secondary);
     margin-top: 0.25rem;
-    user-select: none;
 }
 
-.controls {
+/* Controls section */
+.controls-section {
+    margin: 1em 0;
+    padding: 1em;
+}
+
+.controls-row {
     display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-    margin-bottom: 1.5rem;
-}
-
-.effects-controls {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-    gap: 1rem;
-    margin-bottom: 1.5rem;
-    padding: 1rem;
-    background: #fafafa;
-    border-radius: 4px;
+    gap: 1em;
+    margin: 1em 0;
 }
 
 .control-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
+    margin: 1em 0;
 }
 
-.control-group label {
-    font-size: 0.75rem;
-    color: #666;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    user-select: none;
+.control-group.half-width {
+    flex: 1;
+    margin: 0;
+}
+
+/* Labels and values */
+.slider-label,
+h3 {
+    display: block;
+    margin-bottom: 0.5em;
+    font-size: 0.9em;
+    color: var(--text-primary);
 }
 
+h3 {
+    margin-top: 0;
+    font-size: 1rem;
+    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%;
-    height: 24px;  /* Increased height for better touch target */
-    background: transparent;  /* Remove default background */
+    height: 24px;
+    background: transparent;
     border-radius: 2px;
     appearance: none;
     cursor: pointer;
-    margin: 0;
-    padding: 10px 0;  /* Add padding for better touch area */
+    margin: 0.5em 0;
+    padding: 10px 0;
 }
 
 input[type="range"]::-webkit-slider-thumb {
     appearance: none;
-    width: 24px;  /* Increased size */
-    height: 24px;  /* Increased size */
-    background: #000000;
+    width: 16px;
+    height: 16px;
+    background: var(--slider-thumb);
     border-radius: 50%;
     cursor: pointer;
-    transition: background 0.2s;
-    margin-top: -10px;  /* Center thumb vertically */
-    user-select: none;
+    margin-top: -6px;
 }
 
 input[type="range"]::-webkit-slider-runnable-track {
-    background: #393a39;
+    background: var(--slider-track);
     height: 4px;
     border-radius: 2px;
-    user-select: none;
 }
 
-select {
-    padding: 0.5rem;
-    border-radius: 4px;
-    border: 1px solid #e5e5e5;
-    background: white;
-    font-family: 'Roboto', sans-serif;
-    font-size: 0.875rem;
-    user-select: none;
-    cursor: pointer;
-}
-
-.button-group {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.button-group button {
-    width: 2rem;
-    height: 2rem;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid #e5e5e5;
-    border-radius: 4px;
-    background: white;
-    cursor: pointer;
-    transition: all 0.2s;
-    user-select: none;
-}
-
-.button-group button:hover {
-    background: #f5f5f5;
-}
-
-button {
-    padding: 0.5rem 1rem;
+input[type="range"]::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    background: var(--slider-thumb);
     border: none;
-    border-radius: 4px;
-    background: #015131;
-    color: white;
-    font-family: 'Roboto', sans-serif;
-    font-size: 0.875rem;
+    border-radius: 50%;
     cursor: pointer;
-    transition: all 0.2s;
-    user-select: none;
-}
-
-button:hover {
-    background: #002114;
 }
 
-body {
-    font-family: 'Roboto', sans-serif;
-    font-size: 1rem;
-    line-height: 1.5;
-    color: #333;
-    background: #f5f5f5;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
+input[type="range"]::-moz-range-track {
+    background: var(--slider-track);
+    height: 4px;
+    border-radius: 2px;
 }
 
+/* Mobile styles */
 @media (max-width: 768px) {
-    .control-group { min-width: 100%; }
-    .key { min-width: 35px; }
-    .key-label { font-size: 0.75rem; }
+    .control-group {
+        min-width: 100%;
+    }
+    
+    .key {
+        min-width: 35px;
+    }
+    
+    .key-label {
+        font-size: 0.75rem;
+    }
     
     input[type="range"] {
-        height: 32px;  /* Even larger touch target on mobile */
+        height: 32px;
         padding: 14px 0;
     }
     
     input[type="range"]::-webkit-slider-thumb {
-        width: 28px;  /* Larger thumb on mobile */
+        width: 28px;
         height: 28px;
     }
 }

custom.js

@@ -5,7 +5,7 @@ function previewPlayer() {
             this.initializeProperties();
             this.loadToneJS().then(() => this.init());
             this.setupWavFileObserver();
-        
+
 
             // Add click handlers for activation/deactivation
             this.container.addEventListener('click', (e) => {
@@ -71,6 +71,7 @@ function previewPlayer() {
             this.rowOffset = 4;
             this.activeNotes = new Map();
             this.reverb = null;
+            this.masterGain = null;
             this.releaseTime = 0.1;
             this.noteNames = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
             this.majorScale = [0, 2, 4, 5, 7, 9, 11];
@@ -98,32 +99,39 @@ function previewPlayer() {
         createUI() {
             this.container.innerHTML = `
                 <div class="keyboard-container">
-                    <div class="effects-controls">
-                        <h3>Release & Reverb</h3>
-                        <div class="effect-slider">
-                            <label>Release: <span class="release-value">0.1s</span></label>
-                            <input type="range" class="release-slider" min="0" max="3" step="0.1" value="0.1">
+                   <div class="controls-section">
+                        <h3>Master & Effects</h3>
+                        <div class="control-group">
+                            <label class="slider-label">Release: <span class="release-value">0.1s</span></label>
+                            <input type="range" class="control-slider release-slider" min="0" max="3" step="0.1" value="0.1">
                         </div>
-                        <div class="effect-slider">
-                            <label>Reverb: <span class="reverb-value">50%</span></label>
-                            <input type="range" class="reverb-slider" min="0" max="100" value="50">
+                        <div class="controls-row">
+                            <div class="control-group half-width">
+                                <label class="slider-label">Reverb Mix: <span class="reverb-mix-value">20%</span></label>
+                                <input type="range" class="control-slider reverb-mix-slider" min="0" max="100" value="20">
+                            </div>
+                            <div class="control-group half-width">
+                                <label class="slider-label">Master: <span class="master-value">100%</span></label>
+                                <input type="range" class="control-slider master-slider" min="0" max="200" value="100">
+                            </div>
                         </div>
                     </div>
                     <div class="keyboard"></div>
-                    <br>
-                      <div class="mapping-controls">
+                    <div class="controls-section">
                         <h3>Keyboard Mapping</h3>
                         <div class="control-group">
-                            <label>Root Pitch: <span class="root-value">C4</span></label>
-                            <input type="range" class="root-slider" min="24" max="84" value="60">
+                            <label class="slider-label">Root Pitch: <span class="root-value">C4</span></label>
+                            <input type="range" class="control-slider root-slider" min="24" max="84" value="60">
                         </div>
-                        <div class="control-group">
-                            <label>Column Offset: <span class="column-value">2</span> keys from left</label>
-                            <input type="range" class="column-slider" min="0" max="6" value="2">
-                        </div>
-                        <div class="control-group">
-                            <label>Row Offset: <span class="row-value">4</span> scale degree(s)</label>
-                            <input type="range" class="row-slider" min="1" max="20" value="4">
+                        <div class="controls-row">
+                            <div class="control-group half-width">
+                                <label class="slider-label">Column Offset: <span class="column-value">2</span> keys</label>
+                                <input type="range" class="control-slider column-slider" min="0" max="6" value="2">
+                            </div>
+                            <div class="control-group half-width">
+                                <label class="slider-label">Row Offset: <span class="row-value">4</span> degrees</label>
+                                <input type="range" class="control-slider row-slider" min="1" max="20" value="4">
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -134,6 +142,8 @@ function previewPlayer() {
         cacheElements() {
             const selectors = {
                 keyboard: '.keyboard',
+                masterSlider: '.master-slider',
+                masterValue: '.master-value',
                 rootSlider: '.root-slider',
                 rootValue: '.root-value',
                 columnSlider: '.column-slider',
@@ -142,26 +152,31 @@ function previewPlayer() {
                 rowValue: '.row-value',
                 releaseSlider: '.release-slider',
                 releaseValue: '.release-value',
-                reverbSlider: '.reverb-slider',
-                reverbValue: '.reverb-value'
+                reverbMixSlider: '.reverb-mix-slider',
+                reverbMixValue: '.reverb-mix-value'
             };
             this.elements = Object.fromEntries(
                 Object.entries(selectors).map(([key, selector]) =>
                     [key, this.container.querySelector(selector)]
                 )
             );
-        }
+        };
 
         setupEventListeners() {
             const handlers = {
+                masterSlider: e => {
+                    const gain = parseInt(e.target.value) / 100;
+                    this.masterGain.gain.value = gain;
+                    this.elements.masterValue.textContent = `${e.target.value}%`;
+                },
                 releaseSlider: e => {
                     this.releaseTime = parseFloat(e.target.value);
                     this.elements.releaseValue.textContent = `${this.releaseTime}s`;
                 },
-                reverbSlider: e => {
+                reverbMixSlider: e => {
                     const wetness = parseInt(e.target.value) / 100;
                     this.reverb.wet.value = wetness;
-                    this.elements.reverbValue.textContent = `${e.target.value}%`;
+                    this.elements.reverbMixValue.textContent = `${e.target.value}%`;
                 },
                 rootSlider: e => {
                     this.rootPitch = parseInt(e.target.value);
@@ -189,9 +204,13 @@ function previewPlayer() {
         }
 
         initializeEffects() {
-            this.reverb = new Tone.Reverb({ decay: 1.5, wet: 0.5 }).toDestination();
+            this.masterGain = new Tone.Gain(1).toDestination();
+            this.reverb = new Tone.Reverb({
+                decay: 1.5,
+                wet: 0.5,
+                preDelay: 0.01
+            }).connect(this.masterGain);
         }
-
         async initializeSampler() {
             const availableNotes = ['C1', 'F#1', 'C2', 'F#2', 'C3', 'F#3', 'C4', 'F#4', 'C5', 'F#5'];
             const urls = Object.fromEntries(
@@ -213,7 +232,7 @@ function previewPlayer() {
 
         handleSamplerError() {
             console.log('No WAV files found');
-            
+
         }
 
         handleSamplerLoad() {

hero.html

@@ -0,0 +1,18 @@
+<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>