Hugging Face's logo

Spaces:
longk1943
/
vits-simple-api
Running

App Files Community
longk1943 commited on
Commit
c3e2569
·
verified ·
1 Parent(s): 707e27d

Upload index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +562 -0
templates/index.html ADDED
@@ -0,0 +1,562 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8"/>
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
+ <title>vits-simple-api</title>
7
+ <link rel="stylesheet" href="/static/css/style.css">
8
+ <link rel="stylesheet" href="/static/css/bootstrap.min.css"/>
9
+ <style>
10
+ body {
11
+ background-image: url('https://ik.imagekit.io/no2sviql0/59b3b8296260ae4db2217ee08d3d8bc.webp');
12
+ background-position: center;
13
+ background-size: cover;
14
+ background-attachment: fixed;
15
+ background-repeat: no-repeat;
16
+ font-family: "LXGW WenKai Screen", sans-serif !important;
17
+ font-size: 23px;
18
+ }
19
+ </style>
20
+ </head>
21
+ <body>
22
+ <main class="main-container">
23
+ <div class="container flex flex-wrap mx-auto">
24
+ <div class="text-center d-flex align-items-center w-100" style="height: 100px;" id="component-1">
25
+ <h1 class="w-100">
26
+ <a href="https://github.com/Artrajz/vits-simple-api" target="_blank"
27
+ style="text-decoration: none; color: black"> vits-simple-api </a>
28
+ </h1>
29
+ </div>
30
+
31
+
32
+ <div class="tabs w-100 border-b-2" id="component-2">
33
+ <button class="tab-button px-4 pb-2 pt-2 active " onclick="showContent(0)">VITS</button>
34
+ <button class="tab-button px-4 pb-2 pt-2" onclick="showContent(1)">W2V2-VITS</button>
35
+ <button class="tab-button px-4 pb-2 pt-2" onclick="showContent(2)">Bert-VITS2</button>
36
+ </div>
37
+
38
+ <div class="content w-100 border-lr-2 border-b-2" id="component-3">
39
+ <div class="content-pane active w-100 flex-wrap">
40
+ <form class="w-100">
41
+ <div class="form-group">
42
+ <label>text</label>
43
+ <textarea class="form-control" id="input_text1" rows="3"
44
+ oninput="updateLink()">你好,こんにちは</textarea>
45
+ </div>
46
+ <div class="form-group">
47
+ <label>id</label>
48
+ <select class="form-control" id="input_id1" oninput="updateLink()">
49
+ {% for speaker in speakers["VITS"] %}
50
+ <option value="{{ speaker["id"] }}">{{ speaker["id"] }} | {{ speaker["name"] }}
51
+ | {{ speaker["lang"] }}</option>
52
+ {% endfor %}
53
+ {% if vits_speakers_count <=0 %}
54
+ <option value="" disabled selected hidden>未加载模型</option>
55
+ {% endif %}
56
+ </select>
57
+ </div>
58
+ </form>
59
+ <form class="w-100">
60
+ <div class="row">
61
+ <div class="col-md-4 form-group">
62
+ <label data-toggle="tooltip" data-placement="top"
63
+ title="默认为wav">format</label>
64
+ <select class="form-control" id="input_format1" oninput="updateLink()">
65
+ <option></option>
66
+ <option>wav</option>
67
+ <option>mp3</option>
68
+ <option>ogg</option>
69
+ <option>silk</option>
70
+ <option>flac</option>
71
+ </select>
72
+ </div>
73
+ <div class="col-md-4 form-group">
74
+ <label data-toggle="tooltip" data-placement="top"
75
+ title="自动识别语言auto：可识别的语言根据不同speaker而不同，方言无法自动识别。方言模型需要手动指定语言，比如粤语Cantonese要指定参数lang=gd">lang</label>
76
+ <input type="text" class="form-control" id="input_lang1" oninput="updateLink()" value=""
77
+ placeholder="auto"/>
78
+ </div>
79
+ <div class="col-md-4 form-group">
80
+ <label data-toggle="tooltip" data-placement="top"
81
+ title="调节语音长度，相当于调节语速，该数值越大语速越慢。">length</label>
82
+ <input type="number" class="form-control" id="input_length1" oninput="updateLink()" value=""
83
+ placeholder="1" min="0" step="0.001"/>
84
+ </div>
85
+ </div>
86
+ <div class="row">
87
+ <div class="col-md-4 form-group">
88
+ <label data-toggle="tooltip" data-placement="top"
89
+ title="样本噪声，控制合成的随机性。">noise</label>
90
+ <input type="number" class="form-control" id="input_noise1" oninput="updateLink()" value=""
91
+ placeholder="0.33" min="0" step="0.001"/>
92
+ </div>
93
+ <div class="col-md-4 form-group">
94
+ <label data-toggle="tooltip" data-placement="top"
95
+ title="随机时长预测器噪声，控制音素发音长度。">noisew</label>
96
+ <input type="number" class="form-control" id="input_noisew1" oninput="updateLink()" value=""
97
+ placeholder="0.4" min="0" step="0.001"/>
98
+ </div>
99
+ <div class="col-md-4 form-group">
100
+ <label data-toggle="tooltip" data-placement="top"
101
+ title="按标点符号分段，加起来大于max时为一段文本。max<=0表示不分段。">max</label>
102
+ <input type="number" class="form-control" id="input_max1" oninput="updateLink()" value=""
103
+ placeholder="50" step="1"/>
104
+ </div>
105
+ </div>
106
+ </form>
107
+
108
+
109
+ <div class="flex flex-wrap w-100"
110
+ style="justify-content: center; align-items: center; height: 80px; margin-top: 20px; margin-bottom: 20px; border: 1px solid rgba(0,0,0,.125); border-radius: 0.25rem;">
111
+ <button type="button" class="btn btn-outline-secondary" onclick="setAudioSource()"
112
+ style="margin-right: 10px">
113
+ 播放器生成
114
+ </button>
115
+ <audio id="audioPlayer1" controls>
116
+ <source src="" type="audio/mp3"/>
117
+ Your browser does not support the audio element.
118
+ </audio>
119
+ <div class="form-group form-check">
120
+ <input type="checkbox" id="streaming1" onchange="updateLink()">
121
+ <label class="form-check-label" data-toggle="tooltip" data-placement="top"
122
+ title="按照max分段推理文本，推理好一段即输出，无需等待所有文本都推理完毕">流式响应</label>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ <div class="content-pane w-100 flex-wrap">
127
+ <form class="w-100">
128
+ <div class="form-group">
129
+ <label>text</label>
130
+ <textarea class="form-control" id="input_text2" rows="3"
131
+ oninput="updateLink()">你好,こんにちは</textarea>
132
+ </div>
133
+ <div class="form-group">
134
+ <label>id</label>
135
+ <select class="form-control" id="input_id2" oninput="updateLink()">
136
+ {% for speaker in speakers["W2V2-VITS"] %}
137
+ <option value="{{ speaker["id"] }}">{{ speaker["id"] }} | {{ speaker["name"] }}
138
+ | {{ speaker["lang"] }}</option>
139
+ {% endfor %}
140
+ {% if w2v2_speakers_count <=0 %}
141
+ <option value="" disabled selected hidden>未加载模型</option>
142
+ {% endif %}
143
+ </select>
144
+ </div>
145
+ <div class="form-group mb-3">
146
+ <label data-toggle="tooltip" data-placement="top"
147
+ title="情感嵌入，{% if w2v2_emotion_count > 0 %}
148
+ 可输入范围是0-{{ w2v2_emotion_count-1 }}
149
+ {% else %}
150
+ 未加载emotion
151
+ {% endif %}">emotion</label>
152
+ <input type="number" class="form-control" min="0" max="{{ w2v2_emotion_count-1 }}" step="1"
153
+ id="emotion" value="0" oninput="updateLink()">
154
+ </div>
155
+ </form>
156
+
157
+
158
+ <form class="w-100">
159
+ <div class="row">
160
+ <div class="col-md-4 form-group">
161
+ <label data-toggle="tooltip" data-placement="top"
162
+ title="默认为wav">format</label>
163
+ <select class="form-control" id="input_format2" oninput="updateLink()">
164
+ <option></option>
165
+ <option>wav</option>
166
+ <option>mp3</option>
167
+ <option>ogg</option>
168
+ <option>silk</option>
169
+ <option>flac</option>
170
+ </select>
171
+ </div>
172
+ <div class="col-md-4 form-group">
173
+ <label data-toggle="tooltip" data-placement="top"
174
+ title="自动识别语言auto：可识别的语言根据不同speaker而不同，方言无法自动识别。方言模型需要手动指定语言，比如粤语Cantonese要指定参数lang=gd">lang</label>
175
+ <input type="text" class="form-control" id="input_lang2" oninput="updateLink()" value=""
176
+ placeholder="auto"/>
177
+ </div>
178
+ <div class="col-md-4 form-group">
179
+ <label data-toggle="tooltip" data-placement="top"
180
+ title="调节语音长度，相当于调节语速，该数值越大语速越慢。">length</label>
181
+ <input type="number" class="form-control" id="input_length2" oninput="updateLink()" value=""
182
+ placeholder="1" min="0" step="0.001"/>
183
+ </div>
184
+ </div>
185
+ <div class="row">
186
+ <div class="col-md-4 form-group">
187
+ <label data-toggle="tooltip" data-placement="top"
188
+ title="样本噪声，控制合成的随机性。">noise</label>
189
+ <input type="number" class="form-control" id="input_noise2" oninput="updateLink()" value=""
190
+ placeholder="0.33" min="0" step="0.001"/>
191
+ </div>
192
+ <div class="col-md-4 form-group">
193
+ <label data-toggle="tooltip" data-placement="top"
194
+ title="随机时长预测器噪声，控制音素发音长度。">noisew</label>
195
+ <input type="number" class="form-control" id="input_noisew2" oninput="updateLink()" value=""
196
+ placeholder="0.4" min="0" step="0.001"/>
197
+ </div>
198
+ <div class="col-md-4 form-group">
199
+ <label data-toggle="tooltip" data-placement="top"
200
+ title="按标点符号分段，加起来大于max时为一段文本。max<=0表示不分段。">max</label>
201
+ <input type="number" class="form-control" id="input_max2" oninput="updateLink()" value=""
202
+ placeholder="50" step="1"/>
203
+ </div>
204
+ </div>
205
+ </form>
206
+
207
+ <div class="flex flex-wrap w-100"
208
+ style="justify-content: center; align-items: center; height: 80px; margin-top: 20px; margin-bottom: 20px; border: 1px solid rgba(0,0,0,.125); border-radius: 0.25rem;">
209
+ <button type="button" class="btn btn-outline-secondary" onclick="setAudioSource()"
210
+ style="margin-right: 10px">
211
+ 播放器生成
212
+ </button>
213
+ <audio id="audioPlayer2" controls>
214
+ <source src="" type="audio/mp3"/>
215
+ Your browser does not support the audio element.
216
+ </audio>
217
+ </div>
218
+ </div>
219
+ <div class="content-pane w-100 flex-wrap">
220
+ <form class="w-100">
221
+ <div class="form-group">
222
+ <label>text</label>
223
+ <textarea class="form-control" id="input_text3" rows="3"
224
+ oninput="updateLink()">你好</textarea>
225
+ </div>
226
+ <div class="form-group">
227
+ <label>id</label>
228
+ <select class="form-control" id="input_id3" oninput="updateLink()">
229
+ {% for speaker in speakers["BERT-VITS2"] %}
230
+ <option value="{{ speaker["id"] }}">{{ speaker["id"] }} | {{ speaker["name"] }}
231
+ | {{ speaker["lang"] }}</option>
232
+ {% endfor %}
233
+ {% if bert_vits2_speakers_count <=0 %}
234
+ <option value="" disabled selected hidden>未加载模型</option>
235
+ {% endif %}
236
+ </select>
237
+ </div>
238
+ </form>
239
+ <form class="w-100">
240
+ <div class="row">
241
+ <div class="col-md-4 form-group">
242
+ <label data-toggle="tooltip" data-placement="top"
243
+ title="默认为wav">format</label>
244
+ <select class="form-control" id="input_format3" oninput="updateLink()">
245
+ <option></option>
246
+ <option>wav</option>
247
+ <option>mp3</option>
248
+ <option>ogg</option>
249
+ <option>silk</option>
250
+ <option>flac</option>
251
+ </select>
252
+ </div>
253
+ <div class="col-md-4 form-group">
254
+ <label data-toggle="tooltip" data-placement="top"
255
+ title="自动识别语言auto：可识别的语言根据不同speaker而不同，方言无法自动识别。方言模型需要手动指定语言，比如粤语Cantonese要指定参数lang=gd">lang</label>
256
+ <input type="text" class="form-control" id="input_lang3" oninput="updateLink()" value=""
257
+ placeholder="auto"/>
258
+ </div>
259
+ <div class="col-md-4 form-group">
260
+ <label data-toggle="tooltip" data-placement="top"
261
+ title="调节语音长度，相当于调节语速，该数值越大语速越慢。">length</label>
262
+ <input type="number" class="form-control" id="input_length3" oninput="updateLink()" value=""
263
+ placeholder="1" min="0" step="0.001"/>
264
+ </div>
265
+ </div>
266
+ <div class="row">
267
+ <div class="col-md-4 form-group">
268
+ <label data-toggle="tooltip" data-placement="top"
269
+ title="样本噪声，控制合成的随机性。">noise</label>
270
+ <input type="number" class="form-control" id="input_noise3" oninput="updateLink()" value=""
271
+ placeholder="0.5" min="0" step="0.001"/>
272
+ </div>
273
+ <div class="col-md-4 form-group">
274
+ <label data-toggle="tooltip" data-placement="top"
275
+ title="随机时长预测器噪声，控制音素发音长度。">noisew</label>
276
+ <input type="number" class="form-control" id="input_noisew3" oninput="updateLink()" value=""
277
+ placeholder="0.6" min="0" step="0.001"/>
278
+ </div>
279
+ <div class="col-md-4 form-group">
280
+ <label data-toggle="tooltip" data-placement="top"
281
+ title="按标点符号分段，加起来大于max时为一段文本。max<=0表示不分段。">max</label>
282
+ <input type="number" class="form-control" id="input_max3" oninput="updateLink()" value=""
283
+ placeholder="50" step="1"/>
284
+ </div>
285
+
286
+ </div>
287
+ <div class="row">
288
+ <div class="col-md-4 form-group">
289
+ <label data-toggle="tooltip" data-placement="top"
290
+ title="SDP/DP混合比：SDP在合成时的占比，理论上此比率越高，合成的语音语调方差越大。">sdp_radio</label>
291
+ <input type="number" class="form-control" id="input_sdp_ratio" oninput="updateLink()"
292
+ value=""
293
+ placeholder="0.2" step="0.01" min="0" max="1"/>
294
+ </div>
295
+ </div>
296
+ </form>
297
+
298
+
299
+ <div class="flex flex-wrap w-100"
300
+ style="justify-content: center; align-items: center; height: 80px; margin-top: 20px; margin-bottom: 20px; border: 1px solid rgba(0,0,0,.125); border-radius: 0.25rem;">
301
+ <button type="button" class="btn btn-outline-secondary" onclick="setAudioSource()"
302
+ style="margin-right: 10px">
303
+ 播放器生成
304
+ </button>
305
+ <audio id="audioPlayer3" controls>
306
+ <source src="" type="audio/mp3"/>
307
+ Your browser does not support the audio element.
308
+ </audio>
309
+ </div>
310
+ </div>
311
+ </div>
312
+
313
+ <div class="mt-2">
314
+ {% if speakers_count == 0 %}
315
+ <div style="color: red;">未加载任何模型</div>
316
+ {% endif %}
317
+ <div>
318
+ <label>返回speakers(json)：</label>
319
+ <a id="speakers_link" href="https://artrajz-vits-simple-api.hf.space/voice/speakers" target="_blank"
320
+ style="text-decoration: none; color: black">
321
+ https://artrajz-vits-simple-api.hf.space/voice/speakers
322
+ </a>
323
+ </div>
324
+ <div>
325
+ <label>API调用：</label>
326
+ <a id="vits_link" href="https://artrajz-vits-simple-api.hf.space/voice/vits?text=你好,こんにちは&id=164"
327
+ style="text-decoration: none; color: black">
328
+ https://artrajz-vits-simple-api.hf.space/voice/vits?text=你好,こんにちは&id=164
329
+ </a>
330
+ </div>
331
+ </div>
332
+ <div>
333
+ <h2>所有模型均为有版权！请严格遵循模型原作者使用协议！禁止商用！</h2>
334
+
335
+
336
+ <p>
337
+ Nene_Nanami_Rong_Tang:
338
+ <a href="https://github.com/CjangCjengh/TTSModels" rel="noreferrer" target="_blank">CjangCjengh/TTSModels</a>
339
+ </p>
340
+ <p>
341
+ louise:
342
+ <a href="https://github.com/CjangCjengh/TTSModels" rel="noreferrer" target="_blank">CjangCjengh/TTSModels</a>
343
+ </p>
344
+ <p>
345
+ Cantonese:
346
+ <a href="https://github.com/CjangCjengh/TTSModels" rel="noreferrer" target="_blank">CjangCjengh/TTSModels</a>
347
+ </p>
348
+ <p>
349
+ shanghainese:
350
+ <a href="https://github.com/CjangCjengh/TTSModels" rel="noreferrer" target="_blank">CjangCjengh/TTSModels</a>
351
+ </p>
352
+ <p>
353
+ w2v2-vits:
354
+ <a href="https://github.com/CjangCjengh/TTSModels" rel="noreferrer" target="_blank">CjangCjengh/TTSModels</a>
355
+ </p>
356
+ <p>
357
+ vctk:
358
+ <a href="https://github.com/jaywalnut310/vits" rel="noreferrer" target="_blank">jaywalnut310/vits</a>
359
+ </p>
360
+ <p>
361
+ Bishojo Mangekyo:
362
+ <a href="https://github.com/Francis-Komizu/VITS" rel="noreferrer" target="_blank">Francis-Komizu/VITS</a>
363
+ </p>
364
+ <p>
365
+ genshin:
366
+ <a href="https://huggingface.co/spaces/zomehwh/vits-uma-genshin-honkai" rel="noreferrer" target="_blank">zomehwh/vits-uma-genshin-honkai</a>
367
+ </p>
368
+ <p>
369
+ paimon:
370
+ <a href="https://github.com/zixiiu/Digital_Life_Server" rel="noreferrer" target="_blank">zixiiu/Digital_Life_Server</a>
371
+ </p>
372
+ <p>
373
+ vits_chinese:
374
+ <a href="https://github.com/PlayVoice/vits_chinese" rel="noreferrer" target="_blank">PlayVoice/vits_chinese</a>
375
+ </p>
376
+ </div>
377
+ </div>
378
+
379
+ <br/>
380
+
381
+ </main>
382
+
383
+ <script src="/static/js/jquery.slim.min.js"></script>
384
+ <script src="/static/js/bootstrap.bundle.min.js"></script>
385
+ <script>
386
+ (function() {
387
+ const link = document.createElement("link");
388
+ link.rel = "stylesheet";
389
+ link.type = "text/css";
390
+ link.href = "https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.7.0/lxgwwenkaiscreen.css";
391
+
392
+ link.onload = () => console.log('Font loaded successfully.');
393
+ link.onerror = () => console.error('Failed to load the font.');
394
+
395
+ document.head.appendChild(link);
396
+ })();
397
+ </script>
398
+
399
+ <script>
400
+ $(function () {
401
+ $('[data-toggle="tooltip"]').tooltip()
402
+ })
403
+
404
+ function getProtocol() {
405
+ return 'https:' == location.protocol ? "https://" : "http://";
406
+ }
407
+
408
+ function getUrl() {
409
+ var url = window.location.host;
410
+ return url;
411
+ }
412
+
413
+ var baseUrl = getProtocol() + getUrl();
414
+ var model_type = 1;
415
+ var vits_status = false;
416
+ var w2v2_status = false;
417
+ var bert_vits2_status = false;
418
+ {% if vits_speakers_count > 0 %}
419
+ vits_status = true;
420
+ {% endif %}
421
+ {% if w2v2_speakers_count > 0 %}
422
+ w2v2_status = true;
423
+ {% endif %}
424
+ {% if bert_vits2_speakers_count > 0 %}
425
+ bert_vits2_status = true;
426
+ {% endif %}
427
+
428
+ setBaseUrl();
429
+
430
+ function setBaseUrl() {
431
+ var text = document.getElementById("input_text" + model_type).value;
432
+ var id = document.getElementById("input_id" + model_type).value;
433
+
434
+ var vits_link = document.getElementById("vits_link");
435
+ var speakers_link = document.getElementById("speakers_link");
436
+
437
+ var vits_url = baseUrl + "/voice/vits?text=" + text + "&id=" + id;
438
+ var speakers_url = baseUrl + "/voice/speakers";
439
+
440
+ vits_link.href = vits_url;
441
+ vits_link.textContent = vits_url;
442
+
443
+ speakers_link.href = speakers_url;
444
+ speakers_link.textContent = speakers_url;
445
+ }
446
+
447
+
448
+
449
+
450
+ function getLink() {
451
+ var text = document.getElementById("input_text" + model_type).value;
452
+ var id = document.getElementById("input_id" + model_type).value;
453
+ var format = document.getElementById("input_format" + model_type).value;
454
+ var lang = document.getElementById("input_lang" + model_type).value;
455
+ var length = document.getElementById("input_length" + model_type).value;
456
+ var noise = document.getElementById("input_noise" + model_type).value;
457
+ var noisew = document.getElementById("input_noisew" + model_type).value;
458
+ var max = document.getElementById("input_max" + model_type).value;
459
+
460
+ if (model_type == 1) {
461
+ var url = baseUrl + "/voice/vits?text=" + text + "&id=" + id;
462
+ var streaming = document.getElementById('streaming' + model_type);
463
+ } else if (model_type == 2) {
464
+ var emotion = document.getElementById('emotion').value;
465
+ var url = baseUrl + "/voice/w2v2-vits?text=" + text + "&id=" + id + "&emotion=" + emotion;
466
+ } else if (model_type == 3) {
467
+ var sdp_ratio = document.getElementById("input_sdp_ratio").value;
468
+ var url = baseUrl + "/voice/bert-vits2?text=" + text + "&id=" + id;
469
+ }
470
+ if (format != "") {
471
+ url += "&format=" + format;
472
+ }
473
+ if (lang != "") {
474
+ url += "&lang=" + lang;
475
+ }
476
+ if (length != "") {
477
+ url += "&length=" + length;
478
+ }
479
+ if (noise != "") {
480
+ url += "&noise=" + noise;
481
+ }
482
+ if (noisew != "") {
483
+ url += "&noisew=" + noisew;
484
+ }
485
+ if (max != "") {
486
+ url += "&max=" + max;
487
+ }
488
+ if (model_type == 1 && streaming.checked) {
489
+ url += '&streaming=true';
490
+ }
491
+ if (model_type == 3 && sdp_ratio != "") {
492
+ url += "&sdp_ratio=" + sdp_ratio;
493
+ }
494
+
495
+ return url;
496
+ }
497
+
498
+ function updateLink() {
499
+ var url = getLink();
500
+ var link = document.getElementById("vits_link");
501
+ link.href = url;
502
+ link.textContent = url;
503
+ }
504
+
505
+ function setAudioSource() {
506
+ if (model_type == 1 && !vits_status) {
507
+ alert("未加载VITS模型");
508
+ return;
509
+ }
510
+ if (model_type == 2 && !w2v2_status) {
511
+ alert("未加载W2V2-VITS模型");
512
+ return;
513
+ }
514
+ if (model_type == 3 && !bert_vits2_status) {
515
+ alert("未加载Bert-VITS2模型");
516
+ return;
517
+ }
518
+ var url = getLink();
519
+
520
+ // Add a timestamp parameter to prevent browser caching
521
+ var timestamp = new Date().getTime();
522
+ url += '&t=' + timestamp;
523
+
524
+ var audioPlayer = document.getElementById("audioPlayer" + model_type);
525
+ audioPlayer.src = url;
526
+ audioPlayer.play();
527
+ }
528
+
529
+ function showContent(index) {
530
+ const panes = document.querySelectorAll(".content-pane");
531
+ const buttons = document.querySelectorAll(".tab-button");
532
+ model_type = index + 1;
533
+
534
+ for (let i = 0; i < panes.length; i++) {
535
+ if (i === index) {
536
+ panes[i].classList.add("active");
537
+ buttons[i].classList.add("active");
538
+
539
+ } else {
540
+ panes[i].classList.remove("active");
541
+ buttons[i].classList.remove("active");
542
+ }
543
+ }
544
+ updateLink();
545
+ }
546
+
547
+ document.querySelectorAll('.slider-group').forEach(function (group) {
548
+ group.addEventListener("input", function (event) {
549
+ if (event.target.matches('.slider')) {
550
+ let value = event.target.value;
551
+ group.querySelector('.slider-input').value = value;
552
+ group.querySelector('.slider-value').textContent = value;
553
+ } else if (event.target.matches('.slider-input')) {
554
+ let value = event.target.value;
555
+ group.querySelector('.slider').value = value;
556
+ group.querySelector('.slider-value').textContent = value;
557
+ }
558
+ });
559
+ });
560
+ </script>
561
+ </body>
562
+ </html>