diff options
Diffstat (limited to 'ui/index.html')
| -rw-r--r-- | ui/index.html | 336 |
1 files changed, 193 insertions, 143 deletions
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> |