summaryrefslogtreecommitdiffstats
path: root/ui/index.html
diff options
context:
space:
mode:
authoryum <yum.food.vr@gmail.com>2025-05-29 17:23:09 -0700
committeryum <yum.food.vr@gmail.com>2025-05-29 17:23:09 -0700
commit82a5b3805b2a54faea501ee362419330664c277a (patch)
tree235ac6540d1a25e4fcf4107c1ea93f69e43b563b /ui/index.html
parent1ede199387c072a85e8757a6aaec04d2c7cdeba4 (diff)
Begin roughing out STT UI
HEAVILY VIBE CODED!
Diffstat (limited to 'ui/index.html')
-rw-r--r--ui/index.html189
1 files changed, 178 insertions, 11 deletions
diff --git a/ui/index.html b/ui/index.html
index 240e6ca..14cc354 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -3,18 +3,185 @@
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
- <title>Hello World!</title>
- <link rel="stylesheet" href="build/output.css"> </head>
-<body>
- <div class="container mx-auto mt-10 p-5 bg-gray-100 rounded shadow-lg">
- <h1 class="text-4xl font-bold text-blue-600 text-center">
- Hello World!
- </h1>
- <p class="text-center text-gray-700 mt-2">
- Welcome to your Electron app with Tailwind CSS!
- </p>
+ <title>TaSTT</title>
+ <link rel="stylesheet" href="build/output.css">
+</head>
+<body class="bg-gray-100">
+ <div class="container-fluid px-6 py-6 h-screen flex flex-col">
+ <h1 class="text-3xl font-bold text-gray-800 mb-8">TaSTT</h1>
+
+ <div class="flex flex-1 gap-6 overflow-hidden">
+ <!-- Left panel: configuration form -->
+ <div class="w-1/2 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 -->
+ <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>
+ </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">
+ </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>
+
+ <!-- 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>
+
+ <!-- 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>
+ </div>
+ </section>
+
+ <!-- Display Settings -->
+ <section class="config-section">
+ <h2 class="section-title">Display 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>
+ </div>
+
+ <!-- Action Buttons -->
+ <div class="flex justify-between pb-6">
+ <button type="button" id="setup-venv" class="btn btn-blue">
+ Set up virtual environment
+ </button>
+ </div>
+ </form>
+
+ <!-- Status Message -->
+ <div id="status-message" class="mt-6 p-4 rounded-md hidden"></div>
+ </div>
+
+ <!-- Right Panel: Python Console -->
+ <div class="w-1/2 flex flex-col bg-gray-900 rounded-lg overflow-hidden">
+ <div class="bg-gray-800 px-4 py-2 flex justify-between items-center">
+ <h2 class="text-white font-semibold">Python Output</h2>
+ <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>
+ </div>
+ </div>
</div>
- </body>
+ <script src="renderer.js"></script>
+</body>
</html>
generated by cgit v1.2.3 (git 2.39.1) at 2026-06-01 04:03:49 +0000