-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
480 lines (461 loc) · 31.4 KB
/
Copy pathindex.html
File metadata and controls
480 lines (461 loc) · 31.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VibeVoice</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/lamejs@1.2.1/lame.min.js"></script>
<script src="https://unpkg.com/wavesurfer.js@7"></script>
<script src="https://unpkg.com/wavesurfer.js@7/dist/plugins/regions.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'cream': '#FAF8F5',
'cream-dark': '#F5F0E8',
'warm-gray': '#E8E4DD',
'charcoal': '#2D3748',
'accent': '#E07A5F',
'accent-dark': '#C96A52',
'text-primary': '#2D3748',
'text-secondary': '#4A5568',
'text-muted': '#718096',
'border-color': '#E2DED6',
}
}
}
}
</script>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<div class="h-screen flex flex-col">
<!-- 顶部栏 -->
<header class="h-14 bg-white border-b border-warm-gray flex items-center justify-between px-4 flex-shrink-0">
<div class="flex items-center gap-3">
<span class="text-xl">🎙️</span>
<span class="font-bold text-lg text-charcoal">VibeVoice</span>
</div>
<div class="flex items-center gap-2">
<button onclick="toggleLanguage()" class="px-3 py-1.5 text-sm text-charcoal/60 hover:text-charcoal transition-colors">
<span id="lang-toggle">EN</span>
</button>
<button onclick="showPage('api')" class="px-3 py-1.5 text-sm text-charcoal/60 hover:text-charcoal transition-colors" data-i18n="nav.api">
API 文档
</button>
</div>
</header>
<!-- 主内容区 -->
<div class="flex-1 flex overflow-hidden">
<!-- 左侧边栏：项目管理 -->
<aside class="w-56 bg-cream-dark border-r border-warm-gray flex flex-col flex-shrink-0">
<div class="p-3 flex items-center justify-between">
<span class="text-sm font-medium text-charcoal/70" data-i18n="sidebar.projects">项目</span>
<button onclick="createProject()" class="text-charcoal/40 hover:text-accent text-lg leading-none" title="新建项目">＋</button>
</div>
<div id="project-list" class="flex-1 overflow-y-auto scrollbar-thin px-2 pb-3">
<!-- 项目树 -->
</div>
<!-- 底部版本信息 -->
<div class="mt-auto p-3 border-t border-warm-gray text-xs text-charcoal/40">
VibeVoice v1.0
</div>
</aside>
<!-- 中间内容区 -->
<main class="flex-1 flex flex-col bg-cream overflow-hidden">
<!-- 文本输入区 -->
<div class="flex-1 p-6 flex flex-col min-h-0">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2">
<h2 class="text-lg font-semibold text-charcoal" data-i18n="main.title">文字转语音</h2>
<span id="char-count" class="text-sm" style="color:#a0aec0">0 <span data-i18n="stats.chars">字</span></span>
</div>
<div id="status-message" class="text-sm text-charcoal/60"></div>
</div>
<textarea
id="text-input"
class="input-field flex-1"
data-i18n-placeholder="main.placeholder"
placeholder="在此输入要转换的文本..."
oninput="updateCharCount()"
></textarea>
<!-- 生成进度视图 (生成时显示) -->
<div id="progress-view" class="hidden input-field flex-1 text-base" style="line-height:1.8;min-height:0"></div>
<!-- 操作栏 -->
<div id="action-bar" class="flex items-center justify-end mt-4">
<!-- 句子视图工具栏（句子视图时替代生成按钮） -->
<div id="sentence-toolbar" class="hidden" style="display:none;align-items:center;gap:12px;width:100%">
<button id="preview-back-btn" onclick="exitPreviewMode()" class="sentence-new-btn" style="display:none">
← <span data-i18n="btn.backToInput">返回编辑</span>
</button>
<button id="analyze-btn" onclick="analyzeCharacters()" class="sentence-new-btn analyze-btn-style" style="display:none">
✨ <span data-i18n="btn.analyzeCharacters">智能分析</span>
</button>
<button id="toolbar-regen-all" onclick="regenerateAll()" class="sentence-new-btn">
<span data-i18n="btn.regenAll">重新生成</span>
</button>
<div id="toolbar-pace" style="margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12px;color:#718096">
<span id="st-pace-label"></span>
<span id="st-pace-value" style="min-width:28px;text-align:center;font-variant-numeric:tabular-nums"></span>
<input type="range" id="st-pace-range" min="0" max="2" step="0.1"
style="width:100px;accent-color:#E07A5F"
oninput="pausePaceMultiplier=parseFloat(this.value); document.getElementById('st-pace-value').textContent=this.value==='0'?t('label.paceOff'):parseFloat(this.value).toFixed(1)+'x'; rebuildAudioAndSubtitles()"
onchange="saveSession()">
</div>
</div>
<button id="regen-back-btn" onclick="backToResults()" class="sentence-new-btn" style="display:none;margin-right:auto">
← <span data-i18n="btn.backToResults">返回结果</span>
</button>
<button id="generate-btn" onclick="enterPreviewMode()" class="btn-primary">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polygon points="5 3 19 12 5 21 5 3"></polygon>
</svg>
<span data-i18n="btn.previewSentences">分句预览</span>
</button>
</div>
</div>
<!-- 音频播放器 -->
<div id="player-section" class="hidden border-t border-warm-gray p-4 bg-cream-dark">
<div class="audio-player">
<button id="play-btn" class="play-btn" onclick="togglePlay()">
<svg id="play-icon" width="20" height="20" viewBox="0 0 24 24">
<polygon points="5 3 19 12 5 21 5 3"></polygon>
</svg>
</button>
<div class="flex-1">
<div id="waveform" class="waveform-container"></div>
<div class="flex justify-between mt-1 text-xs text-charcoal/50">
<span id="current-time">0:00</span>
<span id="duration">0:00</span>
</div>
</div>
<div class="relative ml-4">
<button id="download-btn" onclick="toggleDownloadMenu()" class="p-3 bg-accent hover:bg-accent-dark text-white rounded-lg transition-colors flex items-center gap-1" title="下载">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 9l6 6 6-6"></path>
</svg>
</button>
<div id="download-menu" class="hidden absolute right-0 bottom-full mb-2 bg-white rounded-lg shadow-lg border border-warm-gray overflow-hidden z-10">
<button onclick="downloadAudio('wav')" class="w-full px-4 py-2 text-left text-sm hover:bg-cream font-medium">WAV</button>
<button onclick="downloadAudio('mp3')" class="w-full px-4 py-2 text-left text-sm hover:bg-cream font-medium border-t border-warm-gray">MP3</button>
<button onclick="downloadSubtitle('srt')" class="w-full px-4 py-2 text-left text-sm hover:bg-cream font-medium border-t border-warm-gray">SRT</button>
<button onclick="downloadSubtitle('vtt')" class="w-full px-4 py-2 text-left text-sm hover:bg-cream font-medium border-t border-warm-gray">VTT</button>
</div>
</div>
</div>
<audio id="audio-element" class="hidden"></audio>
</div>
</main>
<!-- 右侧配置面板 -->
<aside class="w-80 bg-white border-l border-warm-gray flex flex-col flex-shrink-0">
<!-- Mode tab bar -->
<div class="flex border-b border-warm-gray flex-shrink-0">
<button class="mode-tab active" data-mode="preset" onclick="switchMode('preset')">
<span data-i18n="tab.preset">预设</span>
</button>
<button class="mode-tab" data-mode="clone" onclick="switchMode('clone')">
<span data-i18n="tab.library">声音库</span>
</button>
<button class="mode-tab" data-mode="design" onclick="switchMode('design')">
<span data-i18n="tab.design">设计</span>
</button>
</div>
<div class="flex-1 overflow-y-auto scrollbar-thin p-4 space-y-5">
<!-- 预设说话人配置 -->
<div id="config-preset" class="space-y-4">
<div>
<label class="block text-sm text-charcoal/70 mb-2" data-i18n="config.speaker">说话人</label>
<select id="speaker" class="input-field">
<option value="vivian">Vivian (中文女)</option>
<option value="uncle_fu">Uncle Fu (中文男)</option>
<option value="aiden">Aiden (英文男)</option>
<option value="serena">Serena (英文女)</option>
<option value="ono_anna">Ono Anna (日语女)</option>
<option value="sohee">Sohee (韩语女)</option>
<option value="dylan">Dylan (男)</option>
<option value="eric">Eric (男)</option>
<option value="ryan">Ryan (男)</option>
</select>
</div>
<div>
<label class="block text-sm text-charcoal/70 mb-2" data-i18n="config.language">语言</label>
<select id="language-preset" class="input-field">
<option value="Chinese">中文</option>
<option value="English">English</option>
<option value="Japanese">日本語</option>
<option value="Korean">한국어</option>
<option value="German">Deutsch</option>
<option value="French">Français</option>
<option value="Russian">Русский</option>
<option value="Portuguese">Português</option>
<option value="Spanish">Español</option>
<option value="Italian">Italiano</option>
</select>
</div>
<div>
<label class="block text-sm text-charcoal/70 mb-2" data-i18n="config.instruct">情感指令 <span class="text-charcoal/50">(可选)</span></label>
<input type="text" id="instruct" class="input-field" data-i18n-placeholder="config.instructPlaceholder" placeholder="如：用开心的语气说">
</div>
</div>
<!-- 语音克隆配置 -->
<div id="config-clone" class="hidden space-y-4">
<div>
<label class="block text-sm text-charcoal/70 mb-2" data-i18n="config.language">语言</label>
<select id="language-clone" class="input-field">
<option value="Chinese">中文</option>
<option value="English">English</option>
<option value="Japanese">日本語</option>
<option value="Korean">한국어</option>
<option value="German">Deutsch</option>
<option value="French">Français</option>
<option value="Russian">Русский</option>
<option value="Portuguese">Português</option>
<option value="Spanish">Español</option>
<option value="Italian">Italiano</option>
</select>
</div>
<!-- 声音库列表 -->
<div>
<div class="flex items-center justify-between">
<span class="text-sm font-medium text-charcoal/70" data-i18n="clone.voiceLibrary">声音库</span>
<button onclick="loadSavedVoices()" class="text-charcoal/40 hover:text-charcoal text-sm">↻</button>
</div>
<div id="voice-list" class="space-y-2 mt-2">
<!-- 声音列表 -->
</div>
</div>
<!-- 新建克隆声音（折叠） -->
<details id="clone-new-section">
<summary class="cursor-pointer text-sm font-medium text-charcoal/70 select-none py-1">
＋ <span data-i18n="clone.newVoice">新建克隆声音</span>
</summary>
<div class="space-y-4 mt-3">
<!-- 音频来源 -->
<div>
<label class="block text-sm text-charcoal/70 mb-2" data-i18n="config.refAudio">参考音频</label>
<div class="space-y-2">
<!-- 录音按钮 -->
<button id="record-btn" onclick="toggleRecording()" class="w-full flex items-center justify-center gap-2 py-3 bg-cream-dark border border-warm-gray rounded-lg hover:bg-warm-gray transition-colors">
<span id="record-icon">🎙️</span>
<span id="record-text" data-i18n="btn.record">录音</span>
<span id="record-timer" class="hidden text-accent font-mono">00:00</span>
</button>
<!-- 上传按钮 -->
<label class="w-full flex items-center justify-center gap-2 py-3 bg-cream-dark border border-warm-gray rounded-lg hover:bg-warm-gray transition-colors cursor-pointer">
<span>📁</span>
<span data-i18n="btn.upload">上传文件</span>
<input type="file" id="audio-file" accept="audio/*,video/*" class="hidden" onchange="handleFileSelect(this)">
</label>
</div>
<!-- 音频预览 -->
<div id="audio-preview-section" class="hidden mt-3 p-3 bg-cream-dark rounded-lg">
<div class="flex items-center justify-between">
<span class="text-sm text-charcoal/70" data-i18n="config.preview">音频预览</span>
<button onclick="clearAudio()" class="text-charcoal/50 hover:text-red-600 text-sm">✕</button>
</div>
<audio id="audio-preview" controls class="w-full mt-2 h-8"></audio>
</div>
</div>
<div>
<label class="block text-sm text-charcoal/70 mb-2">
<span data-i18n="config.refText">参考文本</span>
<span class="text-charcoal/50" data-i18n="config.refTextHint">(可选，提高质量)</span>
</label>
<textarea id="ref-text" class="input-field h-20" data-i18n-placeholder="config.refTextPlaceholder" placeholder="参考音频的文字内容"></textarea>
</div>
<!-- 保存声音 -->
<div id="save-voice-section" class="hidden pt-4 border-t border-warm-gray">
<label class="block text-sm text-charcoal/70 mb-2" data-i18n="config.saveName">保存到声音库</label>
<div class="flex gap-2">
<input type="text" id="voice-name" class="input-field flex-1" data-i18n-placeholder="config.saveNamePlaceholder" placeholder="声音名称">
<button onclick="saveVoice()" class="px-4 py-2 bg-cream-dark border border-warm-gray rounded-lg hover:bg-warm-gray transition-colors text-sm" data-i18n="btn.save">保存</button>
</div>
</div>
</div>
</details>
<!-- 新建设计声音（折叠） -->
<details id="design-new-section">
<summary class="cursor-pointer text-sm font-medium text-charcoal/70 select-none py-1">
＋ <span data-i18n="design.newVoice">新建设计声音</span>
</summary>
<div class="space-y-4 mt-3">
<div>
<label class="block text-sm text-charcoal/70 mb-2" data-i18n="config.voiceDesc">声音描述 <span class="text-red-500">*</span></label>
<textarea id="voice-desc" class="input-field h-20" data-i18n-placeholder="config.voiceDescPlaceholder" placeholder="描述你想要的声音，如：低沉沙哑的中年男声"></textarea>
</div>
<div>
<label class="block text-sm text-charcoal/70 mb-2" data-i18n="design.previewText">试听文本 <span class="text-red-500">*</span></label>
<textarea id="design-preview-text" class="input-field h-16" data-i18n-placeholder="design.previewTextPlaceholder" placeholder="输入一段话让声音朗读..."></textarea>
</div>
<div>
<label class="block text-sm text-charcoal/70 mb-2" data-i18n="config.language">语言</label>
<select id="language-design" class="input-field">
<option value="Chinese">中文</option>
<option value="English">English</option>
<option value="Japanese">日本語</option>
<option value="Korean">한국어</option>
<option value="German">Deutsch</option>
<option value="French">Français</option>
<option value="Russian">Русский</option>
<option value="Portuguese">Português</option>
<option value="Spanish">Español</option>
<option value="Italian">Italiano</option>
</select>
</div>
<!-- 预览按钮 -->
<button id="design-preview-btn" onclick="previewDesignVoice()" class="w-full py-2.5 bg-cream-dark border border-warm-gray rounded-lg hover:bg-warm-gray transition-colors text-sm font-medium">
<span data-i18n="design.preview">生成预览</span>
</button>
<!-- 预览播放 -->
<div id="design-preview-section" class="hidden p-3 bg-cream-dark rounded-lg">
<div class="flex items-center justify-between">
<span class="text-sm text-charcoal/70" data-i18n="config.preview">音频预览</span>
<button onclick="clearDesignPreview()" class="text-charcoal/50 hover:text-red-600 text-sm">✕</button>
</div>
<audio id="design-preview-audio" controls class="w-full mt-2 h-8"></audio>
</div>
<!-- 保存设计声音 -->
<div id="design-save-section" class="hidden pt-4 border-t border-warm-gray">
<label class="block text-sm text-charcoal/70 mb-2" data-i18n="config.saveName">保存到声音库</label>
<div class="flex gap-2">
<input type="text" id="design-voice-name" class="input-field flex-1" data-i18n-placeholder="config.saveNamePlaceholder" placeholder="声音名称">
<button onclick="saveDesignVoice()" class="px-4 py-2 bg-cream-dark border border-warm-gray rounded-lg hover:bg-warm-gray transition-colors text-sm" data-i18n="btn.save">保存</button>
</div>
</div>
</div>
</details>
</div>
<!-- 声音设计生成配置 -->
<div id="config-design" class="hidden space-y-4">
<div>
<label class="block text-sm text-charcoal/70 mb-2" data-i18n="config.voiceDesc">声音描述 <span class="text-red-500">*</span></label>
<textarea id="voice-desc-gen" class="input-field h-20" data-i18n-placeholder="config.voiceDescPlaceholder" placeholder="描述你想要的声音，如：低沉沙哑的中年男声"></textarea>
</div>
<div>
<label class="block text-sm text-charcoal/70 mb-2" data-i18n="config.language">语言</label>
<select id="language-design-gen" class="input-field">
<option value="Chinese">中文</option>
<option value="English">English</option>
<option value="Japanese">日本語</option>
<option value="Korean">한국어</option>
<option value="German">Deutsch</option>
<option value="French">Français</option>
<option value="Russian">Русский</option>
<option value="Portuguese">Português</option>
<option value="Spanish">Español</option>
<option value="Italian">Italiano</option>
</select>
</div>
</div>
</div>
</aside>
</div>
</div>
<!-- API 文档页面 (覆盖层) -->
<div id="api-overlay" class="hidden fixed inset-0 bg-cream/95 z-50 overflow-y-auto">
<div class="max-w-4xl mx-auto p-8">
<div class="flex items-center justify-between mb-8">
<h1 class="text-2xl font-bold text-charcoal" data-i18n="api.title">API 文档</h1>
<button onclick="showPage('main')" class="text-charcoal/50 hover:text-charcoal text-2xl">×</button>
</div>
<div class="space-y-6">
<!-- 预设说话人 API -->
<div class="bg-white rounded-xl p-6 border border-warm-gray">
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2 text-charcoal">
<span>🎤</span>
<span data-i18n="api.presetTTS">预设说话人 TTS</span>
</h3>
<div class="space-y-3">
<div class="flex items-center gap-2">
<span class="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded">GET</span>
<code class="text-sm">/tts</code>
</div>
<pre class="bg-charcoal rounded-lg p-4 overflow-x-auto text-sm text-green-400"><code>curl "http://localhost:8001/tts?text=你好世界&speaker=vivian&language=Chinese" -o output.wav</code></pre>
</div>
</div>
<!-- 语音克隆 API -->
<div class="bg-white rounded-xl p-6 border border-warm-gray">
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2 text-charcoal">
<span>🎭</span>
<span data-i18n="api.cloneTTS">语音克隆</span>
</h3>
<div class="space-y-3">
<div class="flex items-center gap-2">
<span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded">POST</span>
<code class="text-sm">/clone</code>
</div>
<pre class="bg-charcoal rounded-lg p-4 overflow-x-auto text-sm text-green-400"><code>curl -X POST "http://localhost:8001/clone" \
-F "audio=@reference.wav" \
-F "text=你好世界" \
-F "language=Chinese" \
-o output.wav</code></pre>
</div>
</div>
<!-- 声音设计 API -->
<div class="bg-white rounded-xl p-6 border border-warm-gray">
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2 text-charcoal">
<span>✨</span>
<span data-i18n="api.designTTS">声音设计</span>
</h3>
<div class="space-y-3">
<div class="flex items-center gap-2">
<span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded">POST</span>
<code class="text-sm">/design</code>
</div>
<pre class="bg-charcoal rounded-lg p-4 overflow-x-auto text-sm text-green-400"><code>curl -X POST "http://localhost:8001/design" \
-F "text=你好世界" \
-F "language=Chinese" \
-F "instruct=低沉沙哑的中年男声" \
-o output.wav</code></pre>
</div>
</div>
<!-- 声音库 API -->
<div class="bg-white rounded-xl p-6 border border-warm-gray">
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2 text-charcoal">
<span>📚</span>
<span data-i18n="api.voiceLibrary">声音库管理</span>
</h3>
<div class="space-y-4">
<div>
<div class="flex items-center gap-2 mb-2">
<span class="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded">GET</span>
<code class="text-sm text-charcoal">/voices</code>
<span class="text-charcoal/50 text-sm">- 获取已保存的声音列表</span>
</div>
</div>
<div>
<div class="flex items-center gap-2 mb-2">
<span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded">POST</span>
<code class="text-sm text-charcoal">/voices/save</code>
<span class="text-charcoal/50 text-sm">- 保存声音</span>
</div>
</div>
<div>
<div class="flex items-center gap-2 mb-2">
<span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded">POST</span>
<code class="text-sm text-charcoal">/voices/{voice_id}/tts</code>
<span class="text-charcoal/50 text-sm">- 使用已保存声音生成</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script defer src="/static/js/i18n.js"></script>
<script defer src="/static/js/state.js"></script>
<script defer src="/static/js/audio.js"></script>
<script defer src="/static/js/editor.js"></script>
<script defer src="/static/js/voice.js"></script>
<script defer src="/static/js/generation.js"></script>
<script defer src="/static/js/shortcuts.js"></script>
<script defer src="/static/js/main.js"></script>
</body>
</html>