Hugging Face's logo

Spaces:
longk1943
/
vits-simple-api
Running

App Files Community
longk1943 commited on
Commit
707e27d
•
1 Parent(s): 06bdd39

Delete templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +0 -556
templates/index.html DELETED
@@ -1,556 +0,0 @@
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/default.png');
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
-
386
- <script>
387
- $(function () {
388
- $('[data-toggle="tooltip"]').tooltip()
389
- })
390
-
391
- function getProtocol() {
392
- return 'https:' == location.protocol ? "https://" : "http://";
393
- }
394
-
395
- function getUrl() {
396
- var url = window.location.host;
397
- return url;
398
- }
399
-
400
- var baseUrl = getProtocol() + getUrl();
401
- var model_type = 1;
402
- var vits_status = false;
403
- var w2v2_status = false;
404
- var bert_vits2_status = false;
405
- {% if vits_speakers_count > 0 %}
406
- vits_status = true;
407
- {% endif %}
408
- {% if w2v2_speakers_count > 0 %}
409
- w2v2_status = true;
410
- {% endif %}
411
- {% if bert_vits2_speakers_count > 0 %}
412
- bert_vits2_status = true;
413
- {% endif %}
414
-
415
- setBaseUrl();
416
-
417
- function setBaseUrl() {
418
- var text = document.getElementById("input_text" + model_type).value;
419
- var id = document.getElementById("input_id" + model_type).value;
420
-
421
- var vits_link = document.getElementById("vits_link");
422
- var speakers_link = document.getElementById("speakers_link");
423
-
424
- var vits_url = baseUrl + "/voice/vits?text=" + text + "&id=" + id;
425
- var speakers_url = baseUrl + "/voice/speakers";
426
-
427
- vits_link.href = vits_url;
428
- vits_link.textContent = vits_url;
429
-
430
- speakers_link.href = speakers_url;
431
- speakers_link.textContent = speakers_url;
432
- }
433
-
434
-
435
- function changeFont() {
436
- const link = document.createElement("link");
437
- link.rel = "stylesheet";
438
- link.type = "text/css";
439
- link.href = "https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.7.0/lxgwwenkaiscreen.css";
440
- document.head.append(link);
441
- };
442
- changeFont();
443
-
444
- function getLink() {
445
- var text = document.getElementById("input_text" + model_type).value;
446
- var id = document.getElementById("input_id" + model_type).value;
447
- var format = document.getElementById("input_format" + model_type).value;
448
- var lang = document.getElementById("input_lang" + model_type).value;
449
- var length = document.getElementById("input_length" + model_type).value;
450
- var noise = document.getElementById("input_noise" + model_type).value;
451
- var noisew = document.getElementById("input_noisew" + model_type).value;
452
- var max = document.getElementById("input_max" + model_type).value;
453
-
454
- if (model_type == 1) {
455
- var url = baseUrl + "/voice/vits?text=" + text + "&id=" + id;
456
- var streaming = document.getElementById('streaming' + model_type);
457
- } else if (model_type == 2) {
458
- var emotion = document.getElementById('emotion').value;
459
- var url = baseUrl + "/voice/w2v2-vits?text=" + text + "&id=" + id + "&emotion=" + emotion;
460
- } else if (model_type == 3) {
461
- var sdp_ratio = document.getElementById("input_sdp_ratio").value;
462
- var url = baseUrl + "/voice/bert-vits2?text=" + text + "&id=" + id;
463
- }
464
- if (format != "") {
465
- url += "&format=" + format;
466
- }
467
- if (lang != "") {
468
- url += "&lang=" + lang;
469
- }
470
- if (length != "") {
471
- url += "&length=" + length;
472
- }
473
- if (noise != "") {
474
- url += "&noise=" + noise;
475
- }
476
- if (noisew != "") {
477
- url += "&noisew=" + noisew;
478
- }
479
- if (max != "") {
480
- url += "&max=" + max;
481
- }
482
- if (model_type == 1 && streaming.checked) {
483
- url += '&streaming=true';
484
- }
485
- if (model_type == 3 && sdp_ratio != "") {
486
- url += "&sdp_ratio=" + sdp_ratio;
487
- }
488
-
489
- return url;
490
- }
491
-
492
- function updateLink() {
493
- var url = getLink();
494
- var link = document.getElementById("vits_link");
495
- link.href = url;
496
- link.textContent = url;
497
- }
498
-
499
- function setAudioSource() {
500
- if (model_type == 1 && !vits_status) {
501
- alert("未加载VITS模型");
502
- return;
503
- }
504
- if (model_type == 2 && !w2v2_status) {
505
- alert("未加载W2V2-VITS模型");
506
- return;
507
- }
508
- if (model_type == 3 && !bert_vits2_status) {
509
- alert("未加载Bert-VITS2模型");
510
- return;
511
- }
512
- var url = getLink();
513
-
514
- // Add a timestamp parameter to prevent browser caching
515
- var timestamp = new Date().getTime();
516
- url += '&t=' + timestamp;
517
-
518
- var audioPlayer = document.getElementById("audioPlayer" + model_type);
519
- audioPlayer.src = url;
520
- audioPlayer.play();
521
- }
522
-
523
- function showContent(index) {
524
- const panes = document.querySelectorAll(".content-pane");
525
- const buttons = document.querySelectorAll(".tab-button");
526
- model_type = index + 1;
527
-
528
- for (let i = 0; i < panes.length; i++) {
529
- if (i === index) {
530
- panes[i].classList.add("active");
531
- buttons[i].classList.add("active");
532
-
533
- } else {
534
- panes[i].classList.remove("active");
535
- buttons[i].classList.remove("active");
536
- }
537
- }
538
- updateLink();
539
- }
540
-
541
- document.querySelectorAll('.slider-group').forEach(function (group) {
542
- group.addEventListener("input", function (event) {
543
- if (event.target.matches('.slider')) {
544
- let value = event.target.value;
545
- group.querySelector('.slider-input').value = value;
546
- group.querySelector('.slider-value').textContent = value;
547
- } else if (event.target.matches('.slider-input')) {
548
- let value = event.target.value;
549
- group.querySelector('.slider').value = value;
550
- group.querySelector('.slider-value').textContent = value;
551
- }
552
- });
553
- });
554
- </script>
555
- </body>
556
- </html>