css fixes, keyboard settings

app.py

@@ -69,6 +69,7 @@ def generate_and_export_soundfont(text, steps=20, instrument_name=None):
         "F#7",
         "C8",
     ]
+
     wav_files = []
     for i in range(audio.shape[0]):
         wav_path = f"{output_dir}/{pitches[i]}.wav"
@@ -150,12 +151,10 @@ with demo:
         )
 
     html = """
-    <div id="custom-player"
-    style="width: 100%; height: 600px; border: 1px solid #f8f9fa; border-radius: 5px; margin-top: 10px;"
-    ></div>
+    <div id="keyboard-container"></div>
     """
 
-    gr.HTML(html, min_height=1000, max_height=1000)
+    gr.HTML(html)
 
     gr.Markdown("## Download Soundfont Package here:")
     with gr.Row():

custom.css

@@ -1,54 +1,58 @@
-/* CSS Variables */
 :root {
     --keyboard-bg: #fafafa;
     --inactive-key-bg: #e0e0e0;
     --border-color: #e5e5e5;
     --slider-track: #393a39;
     --slider-thumb: #000000;
+    --key-ratio: 1;
 }
 
-/* Base styles */
-html, body, #root, .wrapper, main, .main-container {
-    min-height: 100vh;
-    margin: 0;
-    padding: 0;
+#keyboard-container {
     width: 100%;
-    max-width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0.25rem;
+    background: var(--keyboard-bg);
+    border: 2px solid var(--border-color);
+    border-radius: 4px;
+    user-select: none;
+    box-sizing: border-box;
+    color: #000000;  /* Add this - sets a default dark color for all text */
 }
 
-body {
-    font-family: 'Roboto', sans-serif;
-    font-size: 1rem;
-    line-height: 1.5;
-    overflow-x: hidden;
-    transition: background-color 0.2s ease;
+/* Make all text elements inside use the inherited color */
+#keyboard-container .key-label,
+#keyboard-container .note-label,
+#keyboard-container .slider-label,
+#keyboard-container span,
+#keyboard-container h3,
+#keyboard-container summary {
+    color: black;
 }
 
-/* Keyboard layout */
-.keyboard-container {
+.keyboard {
     width: 100%;
-    padding: 1.5rem;
-    background: var(--keyboard-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    user-select: none;
-    color: #333;
+    padding: 0.25rem 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
 }
 
 .keyboard-row {
     display: flex;
-    gap: 0.25rem;
-    margin-bottom: 0.25rem;
+    gap: 0.125rem;
+    margin-bottom: 0.125rem;
     width: 100%;
+    justify-content: center;
+    box-sizing: border-box;
 }
 
-/* Key styles */
 .key {
-    width: calc((100% - 2.75rem) / 12);
-    aspect-ratio: 1;
-    min-width: 40px;
-    flex: none;
-    padding: 0.5rem;
+    /* Smaller base size with viewport-based scaling */
+    width: clamp(1.5rem, min(4vw + 0.75rem, 3rem), 3rem);
+    height: clamp(1.5rem, min(4vw + 0.75rem, 3rem), 3rem);
+    padding: 0.125rem;
     border: 2px solid var(--border-color);
     border-radius: 4px;
     cursor: pointer;
@@ -57,143 +61,198 @@ body {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-}
-
-.key:hover {
-    transform: translateY(-1px);
-}
-
-.key:active {
-    transform: translateY(0);
-}
-
-.key.inactive,
-.key:disabled {
-    background: var(--inactive-key-bg);
+    touch-action: none;
+    background: white;
+    flex-shrink: 0;
+    box-sizing: border-box;
 }
 
 .key-label {
-    font-size: 0.875rem;
+    font-size: clamp(0.5rem, min(1.5vw + 0.4rem, 0.875rem), 0.875rem);
     font-weight: 500;
     color: #333;
 }
 
 .note-label {
-    font-size: 0.75rem;
-    margin-top: 0.25rem;
+    font-size: clamp(0.4rem, min(1.25vw + 0.3rem, 0.75rem), 0.75rem);
     color: #666;
 }
 
+/* Additional reduction for very small screens */
+@media (max-width: 360px) {
+    .keyboard-row {
+        gap: 0.1rem;
+    }
+    
+    .key {
+        width: clamp(1.25rem, 3.5vw + 0.5rem, 1.75rem);
+        height: clamp(1.25rem, 3.5vw + 0.5rem, 1.75rem);
+        padding: 0.1rem;
+    }
+
+    .key-label {
+        font-size: clamp(0.4rem, 1.25vw + 0.35rem, 0.5rem);
+    }
+
+    .note-label {
+        font-size: clamp(0.35rem, 1vw + 0.3rem, 0.45rem);
+    }
+}
+
+/* Larger screens */
+@media (min-width: 768px) {
+    .keyboard-row {
+        gap: 0.25rem;
+        margin-bottom: 0.25rem;
+    }
+
+    .key {
+        padding: 0.25rem;
+    }
+}
+
 /* Controls section */
 .controls-section {
-    margin: 1em 0;
-    padding: 1em;
+    margin: 0.5rem 0;
+    width: 100%;
+    box-sizing: border-box;
 }
 
-.controls-row {
-    display: flex;
-    gap: 1em;
-    margin: 1em 0;
+.controls-section details {
+    background: white;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    padding: 0.5rem;
 }
 
-.control-group {
-    margin: 1em 0;
+.controls-section summary {
+    cursor: pointer;
+    padding: 0.5rem;
 }
 
-.control-group.half-width {
-    flex: 1;
+.controls-section summary h3 {
+    display: inline;
     margin: 0;
 }
 
-/* Labels and values */
-.slider-label,
-h3 {
-    display: block;
-    margin-bottom: 0.5em;
-    font-size: 0.9em;
-    color: #333;
+.controls-row {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
 }
 
-h3 {
-    margin-top: 0;
-    font-size: 1rem;
-    font-weight: 500;
+.control-group {
+    margin: 0.5rem 0;
 }
 
-/* Range inputs */
-input[type="range"] {
+.control-group.half-width {
+    flex: 1;
+}
+
+/* Slider styles */
+.control-slider {
     width: 100%;
-    height: 24px;
+    height: 44px;
+    padding: 14px 0;
     background: transparent;
-    border-radius: 2px;
+    -webkit-appearance: none;
     appearance: none;
-    cursor: pointer;
-    margin: 0.5em 0;
-    padding: 10px 0;
 }
 
-input[type="range"]::-webkit-slider-thumb {
-    appearance: none;
-    width: 16px;
-    height: 16px;
+.control-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 28px;
+    height: 28px;
     background: var(--slider-thumb);
     border-radius: 50%;
     cursor: pointer;
-    margin-top: -6px;
+    margin-top: -14px;
 }
 
-input[type="range"]::-webkit-slider-runnable-track {
-    background: var(--slider-track);
+.control-slider::-webkit-slider-runnable-track {
+    width: 100%;
     height: 4px;
-    border-radius: 2px;
-}
-
-input[type="range"]::-moz-range-thumb {
-    width: 16px;
-    height: 16px;
-    background: var(--slider-thumb);
-    border: none;
-    border-radius: 50%;
-    cursor: pointer;
-}
-
-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%;
-    }
-    
+
+/* Media Queries */
+@media (min-width: 768px) {
     .key {
-        min-width: 35px;
+        width: 3.5rem;
+        height: 3.5rem;
     }
     
     .key-label {
-        font-size: 0.75rem;
+        font-size: 1rem;
     }
     
-    input[type="range"] {
-        height: 32px;
-        padding: 14px 0;
+    .note-label {
+        font-size: 0.75rem;
     }
     
-    input[type="range"]::-webkit-slider-thumb {
-        width: 28px;
-        height: 28px;
+    .controls-row {
+        flex-direction: row;
     }
 }
 
+@media (min-width: 1024px) {
+    .key {
+        width: 4rem;
+        height: 4rem;
+    }
+}
 
-.release-value,
-.reverb-mix-value,
-.master-value,
-.root-value,
-.column-value,
-.row-value {
-    color: black;
-}   
+/* Ensure proper box-sizing everywhere */
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
+.loader {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 10px 20px;
+    border-radius: 20px;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    transition: all 0.3s ease;
+    z-index: 1000;
+}
+
+.loader.active {
+    background-color: #03ae5e;
+    border: 1px solid #00ff22;
+    color: #00ffae;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.loader.inactive {
+    background-color: #e8f5e9;
+    border: 1px solid #81c784;
+    color: #2e7d32;
+}
+
+.loader-emoji {
+    font-size: 16px;
+    animation: bounce 1s infinite;
+}
+
+.loader.active .loader-emoji {
+    animation: spin 1s infinite linear;
+}
+
+@keyframes bounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-3px); }
+}
+
+
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}

custom.js

@@ -6,8 +6,6 @@ function previewPlayer() {
             this.loadToneJS().then(() => this.init());
             this.setupWavFileObserver();
 
-
-            // Add click handlers for activation/deactivation
             this.container.addEventListener('click', (e) => {
                 e.stopPropagation();
                 if (!this.keyboardEnabled) {
@@ -21,13 +19,30 @@ function previewPlayer() {
                 }
             });
 
-            // disable keyboard
             this.disableKeyboard();
         }
 
+        initializeProperties() {
+            this.sampler = null;
+            this.keyboardEnabled = true;
+            this.layout = null;
+            this.rootPitch = 36;
+            this.columnOffset = -12;
+            this.rowOffset = 4;
+            this.activeNotes = new Map();
+            this.reverb = null;
+            this.masterGain = null;
+            this.releaseTime = 1;
+            this.noteNames = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
+            this.majorScale = [0, 2, 4, 5, 7, 9, 11];
+            this.isLoading = false;
+        }
+
         enableKeyboard() {
+            if (this.isLoading) return;
             this.keyboardEnabled = true;
             this.container.style.opacity = '1';
+            this.setLoaderState('inactive');
         }
 
         disableKeyboard() {
@@ -35,48 +50,18 @@ function previewPlayer() {
             this.container.style.opacity = '0.5';
         }
 
+        setLoaderState(state) {
+            const loader = this.container.querySelector('.loader');
+            loader.className = `loader ${state}`;
+            loader.style.display = state === 'active' ? 'flex' : 'none';
 
-
-        setupWavFileObserver() {
-            const observer = new MutationObserver((mutations) => {
-                const hasDownloadLinkChanges = mutations.some(mutation =>
-                    mutation.type === 'childList' &&
-                    mutation.target.classList.contains('download-link')
-                );
-
-                if (hasDownloadLinkChanges) {
-                    this.initializeSampler();
-                    this.enableKeyboard();
-                    // scroll so middle of keyboard is in centre of viewport
-                    const keyboardTop = this.container.querySelector('.keyboard').getBoundingClientRect().top;
-                    window.scrollTo(0, keyboardTop - window.innerHeight / 2, { behavior: 'smooth' });
-                }
-            });
-
-            const wavFilesContainer = document.getElementById('individual-wav-files');
-            if (wavFilesContainer) {
-                observer.observe(wavFilesContainer, {
-                    childList: true,
-                    subtree: true
-                });
+            if (state === 'active') {
+                loader.innerHTML = 'Loading samples... <span class="loader-emoji">🎹</span>';
+            } else {
+                loader.innerHTML = 'Ready <span class="loader-emoji">✨</span>';
             }
         }
 
-        initializeProperties() {
-            this.sampler = null;
-            this.keyboardEnabled = true;
-            this.layout = null;
-            this.rootPitch = 60;
-            this.columnOffset = 2;
-            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];
-        }
-
         async loadToneJS() {
             if (window.Tone) return;
             const script = document.createElement('script');
@@ -98,11 +83,11 @@ function previewPlayer() {
 
         createUI() {
             this.container.innerHTML = `
-                <div class="keyboard-container">
-                   <div class="controls-section">
-                        <h3>Master & Effects</h3>
+                <div class="controls-section">
+                    <details>
+                        <summary><h3>Master & Effects</h3></summary>
                         <div class="control-group">
-                            <label class="slider-label">Release: <span class="release-value">0.1s</span></label>
+                            <label class="slider-label">Release: <span class="release-value">1s</span></label>
                             <input type="range" class="control-slider release-slider" min="0" max="3" step="0.1" value="0.1">
                         </div>
                         <div class="controls-row">
@@ -115,25 +100,30 @@ function previewPlayer() {
                                 <input type="range" class="control-slider master-slider" min="0" max="200" value="100">
                             </div>
                         </div>
-                    </div>
-                    <div class="keyboard"></div>
-                    <div class="controls-section">
-                        <h3>Keyboard Mapping</h3>
+                    </details>
+                </div>
+                <div class="keyboard"></div>
+                <div class="controls-section">
+                    <details>
+                        <summary><h3>Keyboard Mapping</h3></summary>
                         <div class="control-group">
                             <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="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">
+                                <label class="slider-label">Column Offset: <span class="column-value">-12</span> keys</label>
+                                <input type="range" class="control-slider column-slider" min="-20" max="20" 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>
+                    </details>
+                </div>
+                <div class="loader inactive">
+                    Ready <span class="loader-emoji">🦦</span>
                 </div>
             `;
             this.cacheElements();
@@ -160,7 +150,7 @@ function previewPlayer() {
                     [key, this.container.querySelector(selector)]
                 )
             );
-        };
+        }
 
         setupEventListeners() {
             const handlers = {
@@ -203,41 +193,96 @@ function previewPlayer() {
             document.addEventListener('keyup', e => this.handleKeyEvent(e, false));
         }
 
-        initializeEffects() {
-            this.masterGain = new Tone.Gain(1).toDestination();
-            this.reverb = new Tone.Reverb({
-                decay: 1.5,
-                wet: 0.5,
-                preDelay: 0.01
-            }).connect(this.masterGain);
+        setupWavFileObserver() {
+            const observer = new MutationObserver((mutations) => {
+                const hasDownloadLinkChanges = mutations.some(mutation =>
+                    mutation.type === 'childList' &&
+                    mutation.target.classList.contains('download-link')
+                );
+
+                if (hasDownloadLinkChanges) {
+                    this.initializeSampler();
+                    this.enableKeyboard();
+                    const keyboardTop = this.container.querySelector('.keyboard').getBoundingClientRect().top;
+                    window.scrollTo(0, keyboardTop - window.innerHeight / 2, { behavior: 'smooth' });
+                }
+            });
+
+            const wavFilesContainer = document.getElementById('individual-wav-files');
+            if (wavFilesContainer) {
+                observer.observe(wavFilesContainer, {
+                    childList: true,
+                    subtree: true
+                });
+            }
         }
+
         async initializeSampler() {
-            const availableNotes = ['C1', 'F#1', 'C2', 'F#2', 'C3', 'F#3', 'C4', 'F#4', 'C5', 'F#5'];
-            const urls = Object.fromEntries(
-                availableNotes
-                    .map(note => [note, document.querySelector(`a[href*="${note}.wav"]`)?.href])
-                    .filter(([, url]) => url)
-            );
+            this.isLoading = true;
+            this.setLoaderState('active');
+            this.container.querySelectorAll('.key').forEach(key => key.style.opacity = '0.5');
+
+            const requiredNotes = ['C1', 'F#1', 'C2', 'F#2', 'C3', 'F#3', 'C4', 'F#4', 'C5', 'F#5'];
+            const urls = {};
+            let allNotesFound = true;
+
+            for (const note of requiredNotes) {
+                // Look for download links with the note name in them
+                const downloadLink = document.querySelector(`.download-link[href*="${note}.wav"], .download-link[href*="${note.replace('#', '')}.wav"]`);
+                if (downloadLink?.href) {
+                    urls[note] = downloadLink.href;
+                } else {
+                    console.log(`Could not find sample for note: ${note}`);
+                    allNotesFound = false;
+                    break;
+                }
+            }
 
-            if (!Object.keys(urls).length) {
+            if (!allNotesFound) {
                 this.handleSamplerError();
                 return;
             }
 
-            this.sampler = new Tone.Sampler({
-                urls,
-                onload: () => this.handleSamplerLoad(),
-            }).connect(this.reverb);
+            if (this.sampler) {
+                this.sampler.dispose();
+            }
+
+            try {
+                this.sampler = new Tone.Sampler({
+                    urls,
+                    onload: () => this.handleSamplerLoad(),
+                    onerror: (error) => {
+                        console.error('Sampler loading error:', error);
+                        this.handleSamplerError();
+                    }
+                }).connect(this.reverb);
+            } catch (error) {
+                console.error('Sampler initialization error:', error);
+                this.handleSamplerError();
+            }
+        }
+
+        handleSamplerLoad() {
+            console.log('All samples loaded successfully');
+            this.isLoading = false;
+            this.container.querySelectorAll('.key').forEach(key => key.style.opacity = '1');
+            this.setLoaderState('inactive');
+            this.enableKeyboard();
         }
 
         handleSamplerError() {
             console.log('No WAV files found');
-
+            this.isLoading = false;
+            this.setLoaderState('inactive');
         }
 
-        handleSamplerLoad() {
-            console.log('Sampler loaded');
-            this.container.querySelectorAll('.key').forEach(key => key.style.opacity = '1');
+        initializeEffects() {
+            this.masterGain = new Tone.Gain(1).toDestination();
+            this.reverb = new Tone.Reverb({
+                decay: 1.5,
+                wet: 0.5,
+                preDelay: 0.01
+            }).connect(this.masterGain);
         }
 
         detectKeyboardLayout() {
@@ -364,11 +409,11 @@ function previewPlayer() {
         }
     }
 
-    let container = document.getElementById('custom-player');
+    let container = document.getElementById('keyboard-container');
     if (!container) {
         container = document.createElement('div');
-        container.id = 'custom-player';
+        container.id = 'keyboard-container';
         document.body.appendChild(container);
     }
-    new KeyboardPlayer('custom-player');
-}
+    new KeyboardPlayer('keyboard-container');
+}