harusamadesu's picture
Duplicate from Artrajz/vits-simple-api
26f34b3
raw
history blame
10.1 kB
<!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 style="display: flex; justify-content: center; align-items: center"> -->
<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>