Hugging Face's logo

Spaces:
Cyprinus-carpio
/
vits-api
Running

App Files Community
Cyprinus-carpio commited on
Commit
682f618
·
verified ·
1 Parent(s): ff46cf4

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +33 -82
templates/index.html CHANGED
@@ -3,7 +3,7 @@
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>
@@ -11,10 +11,7 @@
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
 
@@ -30,7 +27,7 @@
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>
@@ -61,13 +58,13 @@
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>
@@ -75,19 +72,19 @@
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>
@@ -99,11 +96,10 @@
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()">
@@ -117,7 +113,7 @@
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>
@@ -160,13 +156,13 @@
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>
@@ -174,19 +170,19 @@
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>
@@ -197,7 +193,7 @@
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"/>
@@ -210,7 +206,7 @@
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>
@@ -241,13 +237,13 @@
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>
@@ -255,19 +251,19 @@
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>
@@ -276,7 +272,7 @@
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"/>
@@ -289,7 +285,7 @@
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"/>
@@ -301,68 +297,23 @@
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/>
@@ -477,15 +428,15 @@
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();
 
3
  <head>
4
  <meta charset="UTF-8"/>
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
+ <title>VITS API</title>
7
  <link rel="stylesheet" href="/static/css/style.css">
8
  <link rel="stylesheet" href="/static/css/bootstrap.min.css"/>
9
  </head>
 
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">VITS API</h1>
 
 
 
15
  </div>
16
 
17
 
 
27
  <div class="form-group">
28
  <label>text</label>
29
  <textarea class="form-control" id="input_text1" rows="3"
30
+ oninput="updateLink()">你好，こんにちは。。</textarea>
31
  </div>
32
  <div class="form-group">
33
  <label>id</label>
 
58
  </div>
59
  <div class="col-md-4 form-group">
60
  <label data-toggle="tooltip" data-placement="top"
61
+ title="自动识别语言（可识别的语言根据不同角色而不同，方言无法自动识别。方言模型需要手动指定语言，比如 Cantonese 要指定参数 lang=gd）">lang</label>
62
  <input type="text" class="form-control" id="input_lang1" oninput="updateLink()" value=""
63
  placeholder="auto"/>
64
  </div>
65
  <div class="col-md-4 form-group">
66
  <label data-toggle="tooltip" data-placement="top"
67
+ title="调节语音长度（值越大语速越慢）">length</label>
68
  <input type="number" class="form-control" id="input_length1" oninput="updateLink()" value=""
69
  placeholder="1" min="0" step="0.001"/>
70
  </div>
 
72
  <div class="row">
73
  <div class="col-md-4 form-group">
74
  <label data-toggle="tooltip" data-placement="top"
75
+ title="样本噪声（控制合成的随机性）">noise</label>
76
  <input type="number" class="form-control" id="input_noise1" oninput="updateLink()" value=""
77
  placeholder="0.33" min="0" step="0.001"/>
78
  </div>
79
  <div class="col-md-4 form-group">
80
  <label data-toggle="tooltip" data-placement="top"
81
+ title="随机时长预测器噪声（控制音素发音长度）">noisew</label>
82
  <input type="number" class="form-control" id="input_noisew1" oninput="updateLink()" value=""
83
  placeholder="0.4" min="0" step="0.001"/>
84
  </div>
85
  <div class="col-md-4 form-group">
86
  <label data-toggle="tooltip" data-placement="top"
87
+ title="按标点符号分段（加起来大于 max 时为一段文本，max 小于等于 0 表示不分段）">max</label>
88
  <input type="number" class="form-control" id="input_max1" oninput="updateLink()" value=""
89
  placeholder="50" step="1"/>
90
  </div>
 
96
  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;">
97
  <button type="button" class="btn btn-outline-secondary" onclick="setAudioSource()"
98
  style="margin-right: 10px">
99
+ 生成
100
  </button>
101
  <audio id="audioPlayer1" controls>
102
  <source src="" type="audio/mp3"/>
 
103
  </audio>
104
  <div class="form-group form-check">
105
  <input type="checkbox" id="streaming1" onchange="updateLink()">
 
113
  <div class="form-group">
114
  <label>text</label>
115
  <textarea class="form-control" id="input_text2" rows="3"
116
+ oninput="updateLink()">你好，こんにちは。</textarea>
117
  </div>
118
  <div class="form-group">
119
  <label>id</label>
 
156
  </div>
157
  <div class="col-md-4 form-group">
158
  <label data-toggle="tooltip" data-placement="top"
159
+ title="自动识别语言（可识别的语言根据不同角色而不同，方言无法自动识别。方言模型需要手动指定语言，比如 Cantonese 要指定参数 lang=gd）">lang</label>
160
  <input type="text" class="form-control" id="input_lang2" oninput="updateLink()" value=""
161
  placeholder="auto"/>
162
  </div>
163
  <div class="col-md-4 form-group">
164
  <label data-toggle="tooltip" data-placement="top"
165
+ title="调节语音长度（值越大语速越慢）">length</label>
166
  <input type="number" class="form-control" id="input_length2" oninput="updateLink()" value=""
167
  placeholder="1" min="0" step="0.001"/>
168
  </div>
 
170
  <div class="row">
171
  <div class="col-md-4 form-group">
172
  <label data-toggle="tooltip" data-placement="top"
173
+ title="样本噪声（控制合成的随机性）">noise</label>
174
  <input type="number" class="form-control" id="input_noise2" oninput="updateLink()" value=""
175
  placeholder="0.33" min="0" step="0.001"/>
176
  </div>
177
  <div class="col-md-4 form-group">
178
  <label data-toggle="tooltip" data-placement="top"
179
+ title="随机时长预测器噪声（控制音素发音长度）">noisew</label>
180
  <input type="number" class="form-control" id="input_noisew2" oninput="updateLink()" value=""
181
  placeholder="0.4" min="0" step="0.001"/>
182
  </div>
183
  <div class="col-md-4 form-group">
184
  <label data-toggle="tooltip" data-placement="top"
185
+ title="按标点符号分段（加起来大于 max 时为一段文本，max 小于等于 0 表示不分段）">max</label>
186
  <input type="number" class="form-control" id="input_max2" oninput="updateLink()" value=""
187
  placeholder="50" step="1"/>
188
  </div>
 
193
  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;">
194
  <button type="button" class="btn btn-outline-secondary" onclick="setAudioSource()"
195
  style="margin-right: 10px">
196
+ 生成
197
  </button>
198
  <audio id="audioPlayer2" controls>
199
  <source src="" type="audio/mp3"/>
 
206
  <div class="form-group">
207
  <label>text</label>
208
  <textarea class="form-control" id="input_text3" rows="3"
209
+ oninput="updateLink()">你好，こんにちは。</textarea>
210
  </div>
211
  <div class="form-group">
212
  <label>id</label>
 
237
  </div>
238
  <div class="col-md-4 form-group">
239
  <label data-toggle="tooltip" data-placement="top"
240
+ title="自动识别语言（可识别的语言根据不同角色而不同，方言无法自动识别。方言模型需要手动指定语言，比如 Cantonese 要指定参数 lang=gd）">lang</label>
241
  <input type="text" class="form-control" id="input_lang3" oninput="updateLink()" value=""
242
  placeholder="auto"/>
243
  </div>
244
  <div class="col-md-4 form-group">
245
  <label data-toggle="tooltip" data-placement="top"
246
+ title="调节语音长度（值越大语速越慢）">length</label>
247
  <input type="number" class="form-control" id="input_length3" oninput="updateLink()" value=""
248
  placeholder="1" min="0" step="0.001"/>
249
  </div>
 
251
  <div class="row">
252
  <div class="col-md-4 form-group">
253
  <label data-toggle="tooltip" data-placement="top"
254
+ title="样本噪声（控制合成的随机性）">noise</label>
255
  <input type="number" class="form-control" id="input_noise3" oninput="updateLink()" value=""
256
  placeholder="0.5" min="0" step="0.001"/>
257
  </div>
258
  <div class="col-md-4 form-group">
259
  <label data-toggle="tooltip" data-placement="top"
260
+ title="随机时长预测器噪声（控制音素发音长度）">noisew</label>
261
  <input type="number" class="form-control" id="input_noisew3" oninput="updateLink()" value=""
262
  placeholder="0.6" min="0" step="0.001"/>
263
  </div>
264
  <div class="col-md-4 form-group">
265
  <label data-toggle="tooltip" data-placement="top"
266
+ title="按标点符号分段（加起来大于 max 时为一段文本，max 小于等于 0 表示不分段）">max</label>
267
  <input type="number" class="form-control" id="input_max3" oninput="updateLink()" value=""
268
  placeholder="50" step="1"/>
269
  </div>
 
272
  <div class="row">
273
  <div class="col-md-4 form-group">
274
  <label data-toggle="tooltip" data-placement="top"
275
+ title="SDP/DP 混合比（SDP 在合成时的占比，理论上此比率越高，合成的语音语调方差越大）">sdp_radio</label>
276
  <input type="number" class="form-control" id="input_sdp_ratio" oninput="updateLink()"
277
  value=""
278
  placeholder="0.2" step="0.01" min="0" max="1"/>
 
285
  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;">
286
  <button type="button" class="btn btn-outline-secondary" onclick="setAudioSource()"
287
  style="margin-right: 10px">
288
+ 生成
289
  </button>
290
  <audio id="audioPlayer3" controls>
291
  <source src="" type="audio/mp3"/>
 
297
 
298
  <div class="mt-2">
299
  {% if speakers_count == 0 %}
300
+ <div style="color: red;">未加载模型</div>
301
  {% endif %}
302
  <div>
303
+ <label>返回角色信息</label>
304
  <a id="speakers_link" href="https://artrajz-vits-simple-api.hf.space/voice/speakers" target="_blank"
305
  style="text-decoration: none; color: black">
306
+ https://cyprinus-carpio-vits-api.hf.space/voice/speakers
307
  </a>
308
  </div>
309
  <div>
310
+ <label>API 调用</label>
311
+ <a id="vits_link" href="https://artrajz-vits-simple-api.hf.space/voice/vits?text=你好，こんにちは。&id=164"
312
  style="text-decoration: none; color: black">
313
+ https://cyprinus-carpio-vits-api.hf.space/voice/vits?text=你好，こんにちは。&id=164
314
  </a>
315
  </div>
316
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
317
  </div>
318
 
319
  <br/>
 
428
 
429
  function setAudioSource() {
430
  if (model_type == 1 && !vits_status) {
431
+ alert("未加载 VITS 模型");
432
  return;
433
  }
434
  if (model_type == 2 && !w2v2_status) {
435
+ alert("未加载 W2V2-VITS 模型");
436
  return;
437
  }
438
  if (model_type == 3 && !bert_vits2_status) {
439
+ alert("未加载 Bert-VITS2 模型");
440
  return;
441
  }
442
  var url = getLink();