yum-slop/TaSTT
Free self-hosted STT for VRChat.
git clone https://git.yummers.dev/yum-slop/TaSTT
bce0853
master
1<!DOCTYPE html > 2< html > 3< head > 4< meta charset ="UTF-8 "> 5< meta http-equiv ="Content-Security-Policy "content ="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline' "> 6< title > TaSTT</ title > 7< link rel ="stylesheet "href ="output.css "> 8</ head > 9< body class ="bg-gray-100 "> 10< div class ="container-fluid px-6 py-6 h-screen flex flex-col "> 11< div class ="flex flex-1 gap-6 overflow-hidden "> 12<!-- Left Panel: Configuration Form --> 13< div class ="max-w-96 relative flex flex-col overflow-hidden rounded-lg "> 14<!-- Loading Overlay --> 15< div id ="loading-overlay "class ="absolute inset-0 bg-white bg-opacity-75 backdrop-blur-sm z-50 hidden flex items-center justify-center "> 16< div class ="text-center p-6 "> 17< div class ="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4 "></ div > 18< p class ="text-gray-700 font-medium "></ p > 19</ div > 20</ div > 21 22<!-- Scrollable form container --> 23< div class ="overflow-y-auto flex-1 "> 24< form id ="config-form "class ="space-y-6 pr-3 "> 25<!-- Basic settings (Always Visible) --> 26< section class ="config-section "> 27< div class ="grid grid-cols-2 gap-4 "> 28< div > 29< label for ="model "class ="form-label "> Model</ label > 30< select id ="model "class ="form-input "> 31< option value ="tiny "> tiny</ option > 32< option value ="base "> base</ option > 33< option value ="small "> small</ option > 34< option value ="medium "> medium</ option > 35< option value ="distil-large-v3.5 "> distilled large 3.5</ option > 36< option value ="large "> large</ option > 37</ select > 38</ div > 39< div > 40< label for ="language "class ="form-label "> Language</ label > 41< select id ="language "class ="form-input "> 42< option value ="english "> English</ option > 43< option value ="spanish "> Spanish</ option > 44< option value ="french "> French</ option > 45< option value ="german "> German</ option > 46< option value ="italian "> Italian</ option > 47< option value ="portuguese "> Portuguese</ option > 48< option value ="russian "> Russian</ option > 49< option value ="chinese "> Chinese</ option > 50< option value ="japanese "> Japanese</ option > 51< option value ="korean "> Korean</ option > 52</ select > 53</ div > 54< div class ="col-span-2 "> 55< label for ="microphone "class ="form-label "> Microphone</ label > 56< div class ="flex gap-2 "> 57< select id ="microphone "class ="form-input flex-1 "> 58< option value =""> Loading microphones...</ option > 59</ select > 60< button type ="button "id ="refresh-microphones "class ="btn btn-gray px-3 py-2 flex items-center "title ="Refresh microphone list "> 61< svg class ="w-4 h-4 "fill ="none "stroke ="currentColor "viewBox ="0 0 24 24 "> 62< 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 "/> 63</ svg > 64</ button > 65</ div > 66</ div > 67< div > 68< label for ="button_hand "class ="form-label "> 69 VR Hand 70</ label > 71< select id ="button_hand "class ="form-input "> 72< option value ="left "> Left</ option > 73< option value ="right "> Right</ option > 74</ select > 75</ div > 76< div > 77< label for ="button_type "class ="form-label "> 78 VR Button 79</ label > 80< select id ="button_type "class ="form-input "> 81< option value ="a "> A</ option > 82< option value ="b "> B</ option > 83< option value ="thumbstick "> Thumbstick</ option > 84</ select > 85</ div > 86< div class ="col-span-2 "> 87< label for ="keybind "class ="form-label "> 88 Keyboard Binding 89</ label > 90< input type ="text "id ="keybind "value ="f24 "class ="form-input "placeholder ="f24 "> 91</ div > 92</ div > 93</ section > 94 95<!-- Advanced settings toggle --> 96< button type ="button "id ="toggle-advanced "class ="flex items-center gap-2 text-gray-600 hover:text-gray-800 font-medium "> 97< svg id ="chevron "class ="w-5 h-5 transform transition-transform duration-200 "fill ="none "stroke ="currentColor "viewBox ="0 0 24 24 "> 98< path stroke-linecap ="round "stroke-linejoin ="round "stroke-width ="2 "d ="M9 5l7 7-7 7 "/> 99</ svg > 100 Advanced Settings 101</ button > 102 103<!-- Advanced settings (initially hidden) --> 104< div id ="advanced-settings "class ="hidden space-y-6 "> 105<!-- Compute Settings --> 106< section class ="config-section "> 107< h2 class ="section-title "> Compute Settings</ h2 > 108< div class ="grid grid-cols-2 gap-4 "> 109< div > 110< label for ="compute_type "class ="form-label "> Compute Type</ label > 111< select id ="compute_type "class ="form-input "> 112< option value ="int8 "> int8</ option > 113< option value ="float16 "> float16</ option > 114< option value ="float32 "> float32</ option > 115</ select > 116</ div > 117< div > 118< label for ="gpu_idx "class ="form-label "> GPU Index</ label > 119< input type ="number "id ="gpu_idx "min ="0 "value ="0 "class ="form-input "> 120</ div > 121< div class ="col-span-2 "> 122< label for ="use_cpu "class ="checkbox-label "> 123< input type ="checkbox "id ="use_cpu "class ="mr-2 "> 124< span class ="checkbox-text "> Use CPU</ span > 125</ label > 126</ div > 127</ div > 128</ section > 129 130<!-- Audio Settings --> 131< section class ="config-section "> 132< h2 class ="section-title "> Voice Activity Detection</ h2 > 133< div class ="grid grid-cols-2 gap-4 "> 134< div > 135< label for ="max_speech_duration_s "class ="form-label "> Max Speech Duration (seconds)</ label > 136< input type ="number "id ="max_speech_duration_s "min ="1 "value ="10 "class ="form-input "> 137</ div > 138< div > 139< label for ="min_speech_duration_ms "class ="form-label "> Min Speech Duration (ms)</ label > 140< input type ="number "id ="min_speech_duration_ms "min ="0 "value ="100 "class ="form-input "> 141</ div > 142< div > 143< label for ="min_silence_duration_ms "class ="form-label "> Min Silence Duration (ms)</ label > 144< input type ="number "id ="min_silence_duration_ms "min ="0 "value ="250 "class ="form-input "> 145</ div > 146< div > 147< label for ="reset_after_silence_s "class ="form-label "> Reset After Silence (seconds)</ label > 148< input type ="number "id ="reset_after_silence_s "min ="1 "value ="15 "class ="form-input "> 149</ div > 150</ div > 151</ section > 152 153<!-- Transcription Settings --> 154< section class ="config-section "> 155< h2 class ="section-title "> Transcription Settings</ h2 > 156< div > 157< label for ="user_prompt "class ="form-label "> 158 Prompt 159< span class ="text-gray-500 text-xs block mt-1 " 160title ="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.' "> 161 (Hover for details) 162</ span > 163</ label > 164< textarea id ="user_prompt " 165class ="form-input h-20 resize-none " 166placeholder ="My friends' names are Saoirse, Azariah, and Caoimhe. "></ textarea > 167</ div > 168< div class ="grid grid-cols-2 gap-4 mt-4 "> 169< div > 170< label for ="beam_size "class ="form-label "> 171 Beam size 172< span class ="text-gray-500 text-xs block mt-1 " 173title ="Number of beams for beam search. Higher values may improve accuracy but increase compute time. "> 174 (Search width) 175</ span > 176</ label > 177< input type ="number "id ="beam_size "min ="1 "max ="20 "value ="5 "class ="form-input "> 178</ div > 179< div > 180< label for ="best_of "class ="form-label "> 181 Best of 182< span class ="text-gray-500 text-xs block mt-1 " 183title ="Number of candidates to generate when sampling. The best one will be selected. "> 184 (Sampling candidates) 185</ span > 186</ label > 187< input type ="number "id ="best_of "min ="1 "max ="20 "value ="5 "class ="form-input "> 188</ div > 189</ div > 190</ section > 191 192<!-- Performance Settings --> 193< section class ="config-section "> 194< h2 class ="section-title "> Performance Settings</ h2 > 195< div > 196< label for ="transcription_loop_delay_ms "class ="form-label "> Transcription Loop Delay (ms)</ label > 197< input type ="number "id ="transcription_loop_delay_ms "min ="0 "value ="100 "class ="form-input "> 198</ div > 199</ section > 200 201<!-- Debug/Preview Settings --> 202< section class ="config-section "> 203< h2 class ="section-title "> Debug/Preview Settings</ h2 > 204< div class ="space-y-3 "> 205< label for ="enable_debug_mode "class ="checkbox-label "> 206< input type ="checkbox "id ="enable_debug_mode "class ="mr-2 "> 207< span class ="checkbox-text "> Enable Debug Mode</ span > 208</ label > 209< label for ="enable_previews "class ="checkbox-label "> 210< input type ="checkbox "id ="enable_previews "checked class ="mr-2 "> 211< span class ="checkbox-text "> Enable Previews</ span > 212</ label > 213< label for ="save_audio "class ="checkbox-label "> 214< input type ="checkbox "id ="save_audio "class ="mr-2 "> 215< span class ="checkbox-text "> Save Audio Segments</ span > 216</ label > 217< label for ="enable_segment_logging "class ="checkbox-label "> 218< input type ="checkbox "id ="enable_segment_logging "class ="mr-2 "> 219< span class ="checkbox-text "> Log Segment Metadata</ span > 220</ label > 221</ div > 222</ section > 223 224<!-- Text Filters --> 225< section class ="config-section "> 226< h2 class ="section-title "> Text Filters</ h2 > 227< div class ="space-y-3 "> 228< label for ="enable_lowercase_filter "class ="checkbox-label "> 229< input type ="checkbox "id ="enable_lowercase_filter "class ="mr-2 "> 230< span class ="checkbox-text "> Convert to lowercase</ span > 231</ label > 232< label for ="enable_uppercase_filter "class ="checkbox-label "> 233< input type ="checkbox "id ="enable_uppercase_filter "class ="mr-2 "> 234< span class ="checkbox-text "> Convert to uppercase</ span > 235</ label > 236< label for ="enable_profanity_filter "class ="checkbox-label "> 237< input type ="checkbox "id ="enable_profanity_filter "class ="mr-2 "> 238< span class ="checkbox-text "> Filter profanity</ span > 239</ label > 240< label for ="remove_trailing_period "class ="checkbox-label "> 241< input type ="checkbox "id ="remove_trailing_period "class ="mr-2 "> 242< span class ="checkbox-text "> Remove trailing period</ span > 243</ label > 244</ div > 245</ section > 246 247<!-- Input Settings --> 248< section class ="config-section "> 249< h2 class ="section-title "> Input Settings</ h2 > 250< div class ="space-y-4 "> 251< label for ="reset_on_toggle "class ="checkbox-label "> 252< input type ="checkbox "id ="reset_on_toggle "class ="mr-2 "> 253< span class ="checkbox-text "> Reset transcript on toggle</ span > 254</ label > 255< div > 256< label for ="volume "class ="form-label "> 257 Local Beep Volume 258< span id ="volume-display "class ="text-gray-500 text-sm ml-2 "> 30%</ span > 259</ label > 260< input type ="range "id ="volume "min ="0 "max ="100 "step ="10 "value ="30 "class ="form-input w-full "> 261</ div > 262</ div > 263</ section > 264 265<!-- Display Settings --> 266< section class ="config-section "> 267< h2 class ="section-title "> Custom Chatbox Settings</ h2 > 268< div class ="mb-4 "> 269< label for ="use_builtin "class ="checkbox-label "> 270< input type ="checkbox "id ="use_builtin "class ="mr-2 "> 271< span class ="checkbox-text "> Use built-in VRChat chatbox</ span > 272</ label > 273</ div > 274< div class ="grid grid-cols-2 gap-4 "> 275< div > 276< label for ="block_width "class ="form-label "> Block Width</ label > 277< input type ="number "id ="block_width "min ="1 "value ="2 "class ="form-input "> 278</ div > 279< div > 280< label for ="num_blocks "class ="form-label "> Number of Blocks</ label > 281< input type ="number "id ="num_blocks "min ="1 "value ="40 "class ="form-input "> 282</ div > 283< div > 284< label for ="rows "class ="form-label "> Rows</ label > 285< input type ="number "id ="rows "min ="1 "value ="10 "class ="form-input "> 286</ div > 287< div > 288< label for ="cols "class ="form-label "> Columns</ label > 289< input type ="number "id ="cols "min ="1 "value ="24 "class ="form-input "> 290</ div > 291</ div > 292</ section > 293 294<!-- Configuration Settings --> 295< section class ="config-section "> 296< h2 class ="section-title "> Configuration</ h2 > 297< div > 298< button type ="button "id ="reset-config "class ="btn btn-blue w-full "> 299 Reset Config to Defaults 300</ button > 301</ div > 302</ section > 303 304<!-- Virtual Environment Settings --> 305< section class ="config-section "> 306< h2 class ="section-title "> Virtual Environment</ h2 > 307< div class ="flex space-x-3 "> 308< button type ="button "id ="setup-venv "class ="btn btn-blue flex-1 "> 309 Setup venv 310</ button > 311< button type ="button "id ="reset-venv "class ="btn btn-blue flex-1 "> 312 Reset venv 313</ button > 314</ div > 315</ section > 316</ div > 317 318<!-- Action Buttons --> 319< div class ="pb-6 "> 320< div class ="flex space-x-3 "> 321< button type ="button "id ="start-process "class ="btn btn-green flex-1 "> 322 Start 323</ button > 324< button type ="button "id ="stop-process "class ="btn btn-red flex-1 "> 325 Stop 326</ button > 327</ div > 328</ div > 329</ form > 330 331<!-- Status Message --> 332< div id ="status-message "class ="mt-6 p-4 rounded-md hidden "></ div > 333</ div > 334</ div > 335 336<!-- Right Panel: Python Console --> 337< div class ="flex-1 flex flex-col bg-gray-900 rounded-lg overflow-hidden "> 338< div id ="python-console "class ="flex-1 overflow-y-auto p-4 font-mono text-sm "> 339< div id ="console-content "class ="text-gray-300 whitespace-pre-wrap "></ div > 340</ div > 341</ div > 342</ div > 343</ div > 344 345< script src ="config-schema.js "></ script > 346< script src ="renderer.js "></ script > 347</ body > 348</ html > 349