From e1b3f638a1ea448de9691f69eb62ebf4c3944c9f Mon Sep 17 00:00:00 2001
From: yum <yum.food.vr@gmail.com>
Date: Fri, 30 May 2025 02:50:55 -0700
Subject: More polish

- Filters actually get applied now, huge accuracy boost
- Use silero-vad python library instead of rolling our own
- Expose prompt parameter
- Auto setup venv on launch
- Clean up python output
- Auto acquire all dependencies on launch
- Add icon
---
 ui/index.html | 336 +++++++++++++++++++++++++++++++++-------------------------
 1 file changed, 193 insertions(+), 143 deletions(-)

(limited to 'ui/index.html')

diff --git a/ui/index.html b/ui/index.html
index b06e56b..90f78c1 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -10,179 +10,229 @@
     <div class="container-fluid px-6 py-6 h-screen flex flex-col">
         <div class="flex flex-1 gap-6 overflow-hidden">
             <!-- Left Panel: Configuration Form -->
-            <div class="max-w-96 overflow-y-auto">
-                <form id="config-form" class="space-y-6 pr-3">
-                    <!-- Basic settings (Always Visible) -->
-                    <section class="config-section">
-                        <div class="grid grid-cols-2 gap-4">
-                            <div>
-                                <label for="model" class="form-label">Model</label>
-                                <select id="model" class="form-input">
-                                    <option value="tiny">tiny</option>
-                                    <option value="base">base</option>
-                                    <option value="small">small</option>
-                                    <option value="medium">medium</option>
-                                    <option value="large">large</option>
-                                    <option value="turbo">turbo</option>
-                                </select>
-                            </div>
-                            <div>
-                                <label for="language" class="form-label">Language</label>
-                                <select id="language" class="form-input">
-                                    <option value="english">English</option>
-                                    <option value="spanish">Spanish</option>
-                                    <option value="french">French</option>
-                                    <option value="german">German</option>
-                                    <option value="italian">Italian</option>
-                                    <option value="portuguese">Portuguese</option>
-                                    <option value="russian">Russian</option>
-                                    <option value="chinese">Chinese</option>
-                                    <option value="japanese">Japanese</option>
-                                    <option value="korean">Korean</option>
-                                </select>
-                            </div>
-                            <div class="col-span-2">
-                                <label for="microphone" class="form-label">Microphone</label>
-                                <select id="microphone" class="form-input">
-                                    <option value="">Loading microphones...</option>
-                                </select>
-                            </div>
-                        </div>
-                    </section>
-
-                    <!-- Advanced settings toggle -->
-                    <button type="button" id="toggle-advanced" class="flex items-center gap-2 text-gray-600 hover:text-gray-800 font-medium">
-                        <svg id="chevron" class="w-5 h-5 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
-                        </svg>
-                        Advanced Settings
-                    </button>
-
-                    <!-- Advanced settings (initially hidden) -->
-                    <div id="advanced-settings" class="hidden space-y-6">
-                        <!-- Compute Settings -->
+            <div class="max-w-96 relative flex flex-col">
+                <!-- Loading Overlay -->
+                <div id="loading-overlay" class="absolute inset-0 bg-white bg-opacity-75 backdrop-blur-sm z-50 hidden flex items-center justify-center rounded-lg">
+                    <div class="text-center p-6">
+                        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+                        <p class="text-gray-700 font-medium"></p>
+                    </div>
+                </div>
+                
+                <!-- Scrollable form container -->
+                <div class="overflow-y-auto flex-1">
+                    <form id="config-form" class="space-y-6 pr-3">
+                        <!-- Basic settings (Always Visible) -->
                         <section class="config-section">
-                            <h2 class="section-title">Compute Settings</h2>
                             <div class="grid grid-cols-2 gap-4">
                                 <div>
-                                    <label for="compute_type" class="form-label">Compute Type</label>
-                                    <select id="compute_type" class="form-input">
-                                        <option value="int8">int8</option>
-                                        <option value="float16">float16</option>
-                                        <option value="float32">float32</option>
+                                    <label for="model" class="form-label">Model</label>
+                                    <select id="model" class="form-input">
+                                        <option value="tiny">tiny</option>
+                                        <option value="base">base</option>
+                                        <option value="small">small</option>
+                                        <option value="medium">medium</option>
+                                        <option value="large">large</option>
+                                        <option value="turbo">turbo</option>
                                     </select>
                                 </div>
                                 <div>
-                                    <label for="gpu_idx" class="form-label">GPU Index</label>
-                                    <input type="number" id="gpu_idx" min="0" value="0" class="form-input">
+                                    <label for="language" class="form-label">Language</label>
+                                    <select id="language" class="form-input">
+                                        <option value="english">English</option>
+                                        <option value="spanish">Spanish</option>
+                                        <option value="french">French</option>
+                                        <option value="german">German</option>
+                                        <option value="italian">Italian</option>
+                                        <option value="portuguese">Portuguese</option>
+                                        <option value="russian">Russian</option>
+                                        <option value="chinese">Chinese</option>
+                                        <option value="japanese">Japanese</option>
+                                        <option value="korean">Korean</option>
+                                    </select>
                                 </div>
                                 <div class="col-span-2">
-                                    <label for="use_cpu" class="checkbox-label">
-                                        <input type="checkbox" id="use_cpu" class="mr-2">
-                                        <span class="checkbox-text">Use CPU</span>
-                                    </label>
+                                    <label for="microphone" class="form-label">Microphone</label>
+                                    <div class="flex gap-2">
+                                        <select id="microphone" class="form-input flex-1">
+                                            <option value="">Loading microphones...</option>
+                                        </select>
+                                        <button type="button" id="refresh-microphones" class="btn btn-gray px-3 py-2 flex items-center" title="Refresh microphone list">
+                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+                                            </svg>
+                                        </button>
+                                    </div>
                                 </div>
                             </div>
                         </section>
 
-                        <!-- Audio Settings -->
-                        <section class="config-section">
-                            <h2 class="section-title">Audio Settings</h2>
-                            <div class="grid grid-cols-2 gap-4">
-                                <div>
-                                    <label for="max_speech_duration_s" class="form-label">Max Speech Duration (seconds)</label>
-                                    <input type="number" id="max_speech_duration_s" min="1" value="10" class="form-input">
+                        <!-- Advanced settings toggle -->
+                        <button type="button" id="toggle-advanced" class="flex items-center gap-2 text-gray-600 hover:text-gray-800 font-medium">
+                            <svg id="chevron" class="w-5 h-5 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+                            </svg>
+                            Advanced Settings
+                        </button>
+
+                        <!-- Advanced settings (initially hidden) -->
+                        <div id="advanced-settings" class="hidden space-y-6">
+                            <!-- Compute Settings -->
+                            <section class="config-section">
+                                <h2 class="section-title">Compute Settings</h2>
+                                <div class="grid grid-cols-2 gap-4">
+                                    <div>
+                                        <label for="compute_type" class="form-label">Compute Type</label>
+                                        <select id="compute_type" class="form-input">
+                                            <option value="int8">int8</option>
+                                            <option value="float16">float16</option>
+                                            <option value="float32">float32</option>
+                                        </select>
+                                    </div>
+                                    <div>
+                                        <label for="gpu_idx" class="form-label">GPU Index</label>
+                                        <input type="number" id="gpu_idx" min="0" value="0" class="form-input">
+                                    </div>
+                                    <div class="col-span-2">
+                                        <label for="use_cpu" class="checkbox-label">
+                                            <input type="checkbox" id="use_cpu" class="mr-2">
+                                            <span class="checkbox-text">Use CPU</span>
+                                        </label>
+                                    </div>
                                 </div>
-                                <div>
-                                    <label for="min_silence_duration_ms" class="form-label">Min Silence Duration (ms)</label>
-                                    <input type="number" id="min_silence_duration_ms" min="0" value="250" class="form-input">
+                            </section>
+
+                            <!-- Audio Settings -->
+                            <section class="config-section">
+                                <h2 class="section-title">Voice Activity Detection</h2>
+                                <div class="grid grid-cols-2 gap-4">
+                                    <div>
+                                        <label for="max_speech_duration_s" class="form-label">Max Speech Duration (seconds)</label>
+                                        <input type="number" id="max_speech_duration_s" min="1" value="10" class="form-input">
+                                    </div>
+                                    <div>
+                                        <label for="min_silence_duration_ms" class="form-label">Min Silence Duration (ms)</label>
+                                        <input type="number" id="min_silence_duration_ms" min="0" value="250" class="form-input">
+                                    </div>
+                                    <div>
+                                        <label for="reset_after_silence_s" class="form-label">Reset After Silence (seconds)</label>
+                                        <input type="number" id="reset_after_silence_s" min="1" value="15" class="form-input">
+                                    </div>
                                 </div>
+                            </section>
+
+                            <!-- Transcription Settings -->
+                            <section class="config-section">
+                                <h2 class="section-title">Transcription Settings</h2>
                                 <div>
-                                    <label for="reset_after_silence_s" class="form-label">Reset After Silence (seconds)</label>
-                                    <input type="number" id="reset_after_silence_s" min="1" value="15" class="form-input">
+                                    <label for="user_prompt" class="form-label">
+                                        Custom Prompt
+                                        <span class="text-gray-500 text-xs block mt-1"
+                                              title="Whisper is given this prompt before transcribing. It helps guide the transcription style. For example, you could improve the spelling of your friends' names with: 'My friends' names are Saoirse, Azariah, and Caoimhe.'">
+                                            (Hover for details)
+                                        </span>
+                                    </label>
+                                    <textarea id="user_prompt" 
+                                              class="form-input h-20 resize-none" 
+                                              placeholder="My friends' names are Saoirse, Azariah, and Caoimhe."></textarea>
                                 </div>
-                            </div>
-                        </section>
-
-                        <!-- Performance Settings -->
-                        <section class="config-section">
-                            <h2 class="section-title">Performance Settings</h2>
-                            <div>
-                                <label for="transcription_loop_delay_ms" class="form-label">Transcription Loop Delay (ms)</label>
-                                <input type="number" id="transcription_loop_delay_ms" min="0" value="100" class="form-input">
-                            </div>
-                        </section>
+                            </section>
 
-                        <!-- Debug/Preview Settings -->
-                        <section class="config-section">
-                            <h2 class="section-title">Debug/Preview Settings</h2>
-                            <div class="space-y-3">
-                                <label for="enable_debug_mode" class="checkbox-label">
-                                    <input type="checkbox" id="enable_debug_mode" class="mr-2">
-                                    <span class="checkbox-text">Enable Debug Mode</span>
-                                </label>
-                                <label for="enable_previews" class="checkbox-label">
-                                    <input type="checkbox" id="enable_previews" checked class="mr-2">
-                                    <span class="checkbox-text">Enable Previews</span>
-                                </label>
-                                <label for="save_audio" class="checkbox-label">
-                                    <input type="checkbox" id="save_audio" class="mr-2">
-                                    <span class="checkbox-text">Save Audio Segments</span>
-                                </label>
-                            </div>
-                        </section>
-
-                        <!-- Display Settings -->
-                        <section class="config-section">
-                            <h2 class="section-title">Display Settings</h2>
-                            <div class="grid grid-cols-2 gap-4">
+                            <!-- Performance Settings -->
+                            <section class="config-section">
+                                <h2 class="section-title">Performance Settings</h2>
                                 <div>
-                                    <label for="block_width" class="form-label">Block Width</label>
-                                    <input type="number" id="block_width" min="1" value="2" class="form-input">
+                                    <label for="transcription_loop_delay_ms" class="form-label">Transcription Loop Delay (ms)</label>
+                                    <input type="number" id="transcription_loop_delay_ms" min="0" value="100" class="form-input">
                                 </div>
-                                <div>
-                                    <label for="num_blocks" class="form-label">Number of Blocks</label>
-                                    <input type="number" id="num_blocks" min="1" value="40" class="form-input">
+                            </section>
+
+                            <!-- Debug/Preview Settings -->
+                            <section class="config-section">
+                                <h2 class="section-title">Debug/Preview Settings</h2>
+                                <div class="space-y-3">
+                                    <label for="enable_debug_mode" class="checkbox-label">
+                                        <input type="checkbox" id="enable_debug_mode" class="mr-2">
+                                        <span class="checkbox-text">Enable Debug Mode</span>
+                                    </label>
+                                    <label for="enable_previews" class="checkbox-label">
+                                        <input type="checkbox" id="enable_previews" checked class="mr-2">
+                                        <span class="checkbox-text">Enable Previews</span>
+                                    </label>
+                                    <label for="save_audio" class="checkbox-label">
+                                        <input type="checkbox" id="save_audio" class="mr-2">
+                                        <span class="checkbox-text">Save Audio Segments</span>
+                                    </label>
                                 </div>
-                                <div>
-                                    <label for="rows" class="form-label">Rows</label>
-                                    <input type="number" id="rows" min="1" value="10" class="form-input">
+                            </section>
+
+                            <!-- Display Settings -->
+                            <section class="config-section">
+                                <h2 class="section-title">Custom Chatbox Settings</h2>
+                                <div class="grid grid-cols-2 gap-4">
+                                    <div>
+                                        <label for="block_width" class="form-label">Block Width</label>
+                                        <input type="number" id="block_width" min="1" value="2" class="form-input">
+                                    </div>
+                                    <div>
+                                        <label for="num_blocks" class="form-label">Number of Blocks</label>
+                                        <input type="number" id="num_blocks" min="1" value="40" class="form-input">
+                                    </div>
+                                    <div>
+                                        <label for="rows" class="form-label">Rows</label>
+                                        <input type="number" id="rows" min="1" value="10" class="form-input">
+                                    </div>
+                                    <div>
+                                        <label for="cols" class="form-label">Columns</label>
+                                        <input type="number" id="cols" min="1" value="24" class="form-input">
+                                    </div>
                                 </div>
+                            </section>
+
+                            <!-- Configuration Settings -->
+                            <section class="config-section">
+                                <h2 class="section-title">Configuration</h2>
                                 <div>
-                                    <label for="cols" class="form-label">Columns</label>
-                                    <input type="number" id="cols" min="1" value="24" class="form-input">
+                                    <button type="button" id="reset-config" class="btn btn-blue w-full">
+                                        Reset Config to Defaults
+                                    </button>
                                 </div>
-                            </div>
-                        </section>
-                    </div>
+                            </section>
 
-                    <!-- Action Buttons -->
-                    <div class="flex justify-between pb-6">
-                        <div class="space-x-3">
-                            <button type="button" id="setup-venv" class="btn btn-blue">
-                                Set up virtual environment
-                            </button>
-                            <button type="button" id="start-process" class="btn btn-green">
-                                Start
-                            </button>
-                            <button type="button" id="stop-process" class="btn btn-red" disabled>
-                                Stop
-                            </button>
+                            <!-- Virtual Environment Settings -->
+                            <section class="config-section">
+                                <h2 class="section-title">Virtual Environment</h2>
+                                <div class="flex space-x-3">
+                                    <button type="button" id="setup-venv" class="btn btn-blue flex-1">
+                                        Setup venv
+                                    </button>
+                                    <button type="button" id="reset-venv" class="btn btn-blue flex-1">
+                                        Reset venv
+                                    </button>
+                                </div>
+                            </section>
                         </div>
-                    </div>
-                </form>
 
-                <!-- Status Message -->
-                <div id="status-message" class="mt-6 p-4 rounded-md hidden"></div>
+                        <!-- Action Buttons -->
+                        <div class="pb-6">
+                            <div class="flex space-x-3">
+                                <button type="button" id="start-process" class="btn btn-green flex-1">
+                                    Start
+                                </button>
+                                <button type="button" id="stop-process" class="btn btn-red flex-1" disabled>
+                                    Stop
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+                    
+                    <!-- Status Message -->
+                    <div id="status-message" class="mt-6 p-4 rounded-md hidden"></div>
+                </div>
             </div>
 
             <!-- Right Panel: Python Console -->
             <div class="flex-1 flex flex-col bg-gray-900 rounded-lg overflow-hidden">
-                <div class="bg-gray-800 px-4 py-2 flex justify-between items-center">
-                    <button id="clear-console" class="text-gray-400 hover:text-white text-sm">
-                        Clear
-                    </button>
-                </div>
                 <div id="python-console" class="flex-1 overflow-y-auto p-4 font-mono text-sm">
                     <div id="console-content" class="text-gray-300 whitespace-pre-wrap"></div>
                 </div>
-- 
cgit v1.2.3