summaryrefslogtreecommitdiffstats
path: root/ui/index.html
diff options
context:
space:
mode:
authoryum <yum.food.vr@gmail.com>2025-07-23 22:39:45 -0700
committeryum <yum.food.vr@gmail.com>2025-07-23 22:39:45 -0700
commitf6b93a20d754579008076e85f5c0a97e1bcbc258 (patch)
tree7288699d6f22e76c4f30636a37e94265b3ef7708 /ui/index.html
parentf3782c200c9a2ec2b77708da67b4127a38465ad1 (diff)
parent043a447133695bfd2285a534b941db972873a692 (diff)
Import FastTextPager repo
Diffstat (limited to 'ui/index.html')
-rw-r--r--ui/index.html349
1 files changed, 349 insertions, 0 deletions
diff --git a/ui/index.html b/ui/index.html
new file mode 100644
index 0000000..70eaa68
--- /dev/null
+++ b/ui/index.html
@@ -0,0 +1,349 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
+ <title>TaSTT</title>
+ <link rel="stylesheet" href="output.css">
+</head>
+<body class="bg-gray-100">
+ <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 relative flex flex-col overflow-hidden rounded-lg">
+ <!-- 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">
+ <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">
+ <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>
+ <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>
+ <label for="button_hand" class="form-label">
+ VR Hand
+ </label>
+ <select id="button_hand" class="form-input">
+ <option value="left">Left</option>
+ <option value="right">Right</option>
+ </select>
+ </div>
+ <div>
+ <label for="button_type" class="form-label">
+ VR Button
+ </label>
+ <select id="button_type" class="form-input">
+ <option value="a">A</option>
+ <option value="b">B</option>
+ <option value="thumbstick">Thumbstick</option>
+ </select>
+ </div>
+ <div class="col-span-2">
+ <label for="keybind" class="form-label">
+ Keyboard Binding
+ </label>
+ <input type="text" id="keybind" value="f24" class="form-input" placeholder="f24">
+ </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">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_speech_duration_ms" class="form-label">Min Speech Duration (ms)</label>
+ <input type="number" id="min_speech_duration_ms" min="0" value="100" 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="user_prompt" class="form-label">
+ 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 class="grid grid-cols-2 gap-4 mt-4">
+ <div>
+ <label for="beam_size" class="form-label">
+ Beam size
+ <span class="text-gray-500 text-xs block mt-1"
+ title="Number of beams for beam search. Higher values may improve accuracy but increase compute time.">
+ (Search width)
+ </span>
+ </label>
+ <input type="number" id="beam_size" min="1" max="20" value="5" class="form-input">
+ </div>
+ <div>
+ <label for="best_of" class="form-label">
+ Best of
+ <span class="text-gray-500 text-xs block mt-1"
+ title="Number of candidates to generate when sampling. The best one will be selected.">
+ (Sampling candidates)
+ </span>
+ </label>
+ <input type="number" id="best_of" min="1" max="20" value="5" 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>
+ <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>
+ <label for="enable_segment_logging" class="checkbox-label">
+ <input type="checkbox" id="enable_segment_logging" class="mr-2">
+ <span class="checkbox-text">Log Segment Metadata</span>
+ </label>
+ </div>
+ </section>
+
+ <!-- Text Filters -->
+ <section class="config-section">
+ <h2 class="section-title">Text Filters</h2>
+ <div class="space-y-3">
+ <label for="enable_lowercase_filter" class="checkbox-label">
+ <input type="checkbox" id="enable_lowercase_filter" class="mr-2">
+ <span class="checkbox-text">Convert to lowercase</span>
+ </label>
+ <label for="enable_uppercase_filter" class="checkbox-label">
+ <input type="checkbox" id="enable_uppercase_filter" class="mr-2">
+ <span class="checkbox-text">Convert to uppercase</span>
+ </label>
+ <label for="enable_profanity_filter" class="checkbox-label">
+ <input type="checkbox" id="enable_profanity_filter" class="mr-2">
+ <span class="checkbox-text">Filter profanity</span>
+ </label>
+ <label for="remove_trailing_period" class="checkbox-label">
+ <input type="checkbox" id="remove_trailing_period" class="mr-2">
+ <span class="checkbox-text">Remove trailing period</span>
+ </label>
+ </div>
+ </section>
+
+ <!-- Input Settings -->
+ <section class="config-section">
+ <h2 class="section-title">Input Settings</h2>
+ <div class="space-y-4">
+ <label for="reset_on_toggle" class="checkbox-label">
+ <input type="checkbox" id="reset_on_toggle" class="mr-2">
+ <span class="checkbox-text">Reset transcript on toggle</span>
+ </label>
+ <div>
+ <label for="volume" class="form-label">
+ Local Beep Volume
+ <span id="volume-display" class="text-gray-500 text-sm ml-2">30%</span>
+ </label>
+ <input type="range" id="volume" min="0" max="100" step="10" value="30" class="form-input w-full">
+ </div>
+ </div>
+ </section>
+
+ <!-- Display Settings -->
+ <section class="config-section">
+ <h2 class="section-title">Custom Chatbox Settings</h2>
+ <div class="mb-4">
+ <label for="use_builtin" class="checkbox-label">
+ <input type="checkbox" id="use_builtin" class="mr-2">
+ <span class="checkbox-text">Use built-in VRChat chatbox</span>
+ </label>
+ </div>
+ <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>
+ <button type="button" id="reset-config" class="btn btn-blue w-full">
+ Reset Config to Defaults
+ </button>
+ </div>
+ </section>
+
+ <!-- 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>
+
+ <!-- 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">
+ 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 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>
+
+ <script src="config-schema.js"></script>
+ <script src="renderer.js"></script>
+</body>
+</html>
+
generated by cgit v1.2.3 (git 2.39.1) at 2026-06-22 14:20:36 +0000