Hugging Face's logo

Spaces:
longk1943
/
vits-simple-api
Running

App Files Community
longk1943 commited on
Commit
9d0f6ce
·
verified ·
1 Parent(s): ff46cf4

Upload templates_index.htmlbak

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