Artrajz's picture
Upload 2 files
881cc0a
raw
history blame
7.45 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="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/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 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="dynamicLink" 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()">
<option value="164"></option>
{% for speaker in speakers["VITS"] %}
{% if speaker["id"] == 164 %}
<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>
</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>
<div>自动识别语言:可识别的语言根据不同speaker而不同,方言无法自动识别</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>
</main>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
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 url = "https://artrajz-vits-simple-api.hf.space/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;
}
return url;
}
function updateLink() {
var url = getLink();
var link = document.getElementById("dynamicLink");
link.href = url;
link.textContent = url;
}
function setAudioSource() {
var url = getLink();
var audioPlayer = document.getElementById("audioPlayer");
audioPlayer.src = url;
}
var button = document.getElementById("getAudio");
button.addEventListener("click", function () {
setAudioSource();
});
</script>
</body>
</html>