|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"/> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
|
<title>vits-simple-api</title> |
|
|
|
<link rel="stylesheet" href="/static/css/bootstrap.min.css"/> |
|
</head> |
|
<body> |
|
<main style="margin: 0 auto; width: 1024px"> |
|
<h1> |
|
<a href="https://github.com/Artrajz/vits-simple-api" target="_blank" |
|
style="text-decoration: none; color: black"> vits-simple-api </a> |
|
</h1> |
|
|
|
<div> |
|
<label>文档:</label> |
|
<a href="https://github.com/Artrajz/vits-simple-api" target="_blank" |
|
style="text-decoration: none; color: black"> https://github.com/Artrajz/vits-simple-api </a> |
|
</div> |
|
<div> |
|
<label>返回speakers(json):</label> |
|
<a id="speakersLink" href="https://artrajz-vits-simple-api.hf.space/voice/speakers" target="_blank" |
|
style="text-decoration: none; color: black"> |
|
https://artrajz-vits-simple-api.hf.space/voice/speakers |
|
</a> |
|
</div> |
|
<div> |
|
<label>简单调用api:</label> |
|
<a id="vitsLink" href="https://artrajz-vits-simple-api.hf.space/voice/vits?text=你好,こんにちは&id=164" |
|
style="text-decoration: none; color: black"> |
|
https://artrajz-vits-simple-api.hf.space/voice/vits?text=你好,こんにちは&id=164 |
|
</a> |
|
</div> |
|
|
|
|
|
<div> |
|
<form> |
|
<div class="form-group"> |
|
<label>text</label> |
|
<textarea class="form-control" id="inputText" rows="3" oninput="updateLink()">你好,こんにちは</textarea> |
|
</div> |
|
<div class="form-group"> |
|
<label>id</label> |
|
<select class="form-control" id="inputId" oninput="updateLink()"> |
|
{% for speaker in speakers["VITS"] %} |
|
{% if speaker["name"] == "雷电将军(雷神)" %} |
|
<option value="{{ speaker["id"] }}" selected>{{ speaker["id"] }} | {{ speaker["name"] }} |
|
| {{ speaker["lang"] }}</option> |
|
{% else %} |
|
<option value="{{ speaker["id"] }}">{{ speaker["id"] }} | {{ speaker["name"] }} |
|
| {{ speaker["lang"] }}</option> |
|
{% endif %} |
|
{% endfor %} |
|
</select> |
|
</div> |
|
</form> |
|
</div> |
|
<p> |
|
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" |
|
aria-expanded="false" aria-controls="collapseExample"> |
|
Advanced |
|
</button> |
|
{% if speakers_count == 0 %} |
|
<div style="color: red;">未加载任何模型</div> |
|
{% endif %} |
|
</p> |
|
<div class="collapse" id="collapseExample"> |
|
<div class="card card-body"> |
|
<form> |
|
<div class="form-group"> |
|
<label>format</label> |
|
<select class="form-control" id="inputFormat" oninput="updateLink()"> |
|
<option></option> |
|
<option>wav</option> |
|
<option>mp3</option> |
|
<option>ogg</option> |
|
<option>silk</option> |
|
</select> |
|
</div> |
|
<div class="form-group"> |
|
<label>lang</label> |
|
<input type="text" class="form-control" id="inputLang" oninput="updateLink()" value="" |
|
placeholder="auto"/> |
|
</div> |
|
<div class="form-group"> |
|
<label>length</label> |
|
<input type="text" class="form-control" id="inputLength" oninput="updateLink()" value="" |
|
placeholder="1"/> |
|
</div> |
|
<div class="form-group"> |
|
<label>noise</label> |
|
<input type="text" class="form-control" id="inputNoise" oninput="updateLink()" value="" |
|
placeholder="0.33"/> |
|
</div> |
|
<div class="form-group"> |
|
<label>noisew</label> |
|
<input type="text" class="form-control" id="inputNoisew" oninput="updateLink()" value="" |
|
placeholder="0.4"/> |
|
</div> |
|
<div class="form-group"> |
|
<label>max</label> |
|
<input type="text" class="form-control" id="inputMax" oninput="updateLink()" value="" |
|
placeholder="50"/> |
|
</div> |
|
</form> |
|
</div> |
|
</div> |
|
|
|
<div style="display: flex; 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;"> |
|
<button type="button" class="btn btn-outline-secondary" id="getAudio" style="margin-right: 10px">播放器生成</button> |
|
<audio id="audioPlayer" controls> |
|
<source src="" type="audio/mp3"/> |
|
Your browser does not support the audio element. |
|
</audio> |
|
<div class="form-group form-check"> |
|
<input type="checkbox" id="streaming" onchange="updateLink()"> |
|
<label class="form-check-label">流式响应</label> |
|
</div> |
|
</div> |
|
<div>自动识别语言:可识别的语言根据不同speaker而不同,方言无法自动识别</div> |
|
<div>方言模型需要手动指定语言,比如粤语Cantonese要指定参数lang=gd</div> |
|
<br/> |
|
|
|
<h2>所有模型均为网络搜集,感谢模型原作者的付出!</h2> |
|
<p> |
|
Nene_Nanami_Rong_Tang: |
|
<a href="https://github.com/CjangCjengh/TTSModels" rel="noreferrer" target="_blank">CjangCjengh/TTSModels</a> |
|
</p> |
|
<p> |
|
louise: |
|
<a href="https://github.com/CjangCjengh/TTSModels" rel="noreferrer" target="_blank">CjangCjengh/TTSModels</a> |
|
</p> |
|
<p> |
|
Cantonese: |
|
<a href="https://github.com/CjangCjengh/TTSModels" rel="noreferrer" target="_blank">CjangCjengh/TTSModels</a> |
|
</p> |
|
<p> |
|
shanghainese: |
|
<a href="https://github.com/CjangCjengh/TTSModels" rel="noreferrer" target="_blank">CjangCjengh/TTSModels</a> |
|
</p> |
|
<p> |
|
w2v2-vits: |
|
<a href="https://github.com/CjangCjengh/TTSModels" rel="noreferrer" target="_blank">CjangCjengh/TTSModels</a> |
|
</p> |
|
<p> |
|
vctk: |
|
<a href="https://github.com/jaywalnut310/vits" rel="noreferrer" target="_blank">jaywalnut310/vits</a> |
|
</p> |
|
<p> |
|
Bishojo Mangekyo: |
|
<a href="https://github.com/Francis-Komizu/VITS" rel="noreferrer" target="_blank">Francis-Komizu/VITS</a> |
|
</p> |
|
<p> |
|
genshin: |
|
<a href="https://huggingface.co/spaces/zomehwh/vits-uma-genshin-honkai" rel="noreferrer" target="_blank">zomehwh/vits-uma-genshin-honkai</a> |
|
</p> |
|
<p> |
|
paimon: |
|
<a href="https://github.com/zixiiu/Digital_Life_Server" rel="noreferrer" target="_blank">zixiiu/Digital_Life_Server</a> |
|
</p> |
|
<p> |
|
vits_chinese: |
|
<a href="https://github.com/PlayVoice/vits_chinese" rel="noreferrer" target="_blank">PlayVoice/vits_chinese</a> |
|
</p> |
|
|
|
</main> |
|
|
|
<script src="/static/js/jquery.slim.min.js"></script> |
|
<script src="/static/js/bootstrap.bundle.min.js"></script> |
|
|
|
<script> |
|
function getProtocol() { |
|
return 'https:' == location.protocol ? "https://" : "http://"; |
|
} |
|
|
|
function getUrl() { |
|
var url = window.location.host; |
|
return url; |
|
} |
|
|
|
var baseUrl = getProtocol() + getUrl(); |
|
|
|
setBaseUrl(); |
|
|
|
function setBaseUrl() { |
|
var text = document.getElementById("inputText").value; |
|
var id = document.getElementById("inputId").value; |
|
|
|
var vitsLink = document.getElementById("vitsLink"); |
|
var speakersLink = document.getElementById("speakersLink"); |
|
|
|
var vitsUrl = baseUrl + "/voice/vits?text=" + text + "&id=" + id; |
|
var speakersUrl = baseUrl + "/voice/speakers"; |
|
|
|
vitsLink.href = vitsUrl; |
|
vitsLink.textContent = vitsUrl; |
|
|
|
speakersLink.href = speakersUrl; |
|
speakersLink.textContent = speakersUrl; |
|
} |
|
|
|
function getLink() { |
|
var text = document.getElementById("inputText").value; |
|
var id = document.getElementById("inputId").value; |
|
var format = document.getElementById("inputFormat").value; |
|
var lang = document.getElementById("inputLang").value; |
|
var length = document.getElementById("inputLength").value; |
|
var noise = document.getElementById("inputNoise").value; |
|
var noisew = document.getElementById("inputNoisew").value; |
|
var max = document.getElementById("inputMax").value; |
|
var streaming = document.getElementById('streaming'); |
|
|
|
var url = baseUrl + "/voice/vits?text=" + text + "&id=" + id; |
|
if (format != "") { |
|
url += "&format=" + format; |
|
} |
|
if (lang != "") { |
|
url += "&lang=" + lang; |
|
} |
|
if (length != "") { |
|
url += "&length=" + length; |
|
} |
|
if (noise != "") { |
|
url += "&noise=" + noise; |
|
} |
|
if (noisew != "") { |
|
url += "&noisew=" + noisew; |
|
} |
|
if (max != "") { |
|
url += "&max=" + max; |
|
} |
|
if (streaming.checked) { |
|
url += '&streaming=true'; |
|
} |
|
return url; |
|
} |
|
|
|
function updateLink() { |
|
var url = getLink(); |
|
var link = document.getElementById("vitsLink"); |
|
link.href = url; |
|
link.textContent = url; |
|
} |
|
|
|
function setAudioSource() { |
|
var url = getLink(); |
|
var audioPlayer = document.getElementById("audioPlayer"); |
|
audioPlayer.src = url; |
|
audioPlayer.play(); |
|
} |
|
|
|
var button = document.getElementById("getAudio"); |
|
button.addEventListener("click", function () { |
|
setAudioSource(); |
|
}); |
|
</script> |
|
</body> |
|
</html> |
|
|