<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8">
<title>Match-TTS Onnx Benchmarks</title>
</head>
<body>
<h1>Match-TTS Onnx Benchmarks</h1>
<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.webgpu.min.js" ></script>
<script type="module">
import { MatchaTTSRaw } from "./js-esm/matcha_tts_raw.js";
import { webWavPlay } from "./js-esm/web_wav_play.js";
import { arpa_to_ipa } from "./js-esm/arpa_to_ipa.js";
import { loadCmudict } from "./js-esm/cmudict_loader.js";
import { env,textToArpa} from "./js-esm/text_to_arpa.js";
env.allowLocalModels = true;
env.localModelPath = "./models/";
env.backends.onnx.logLevel = "error";
let matcha_tts_raw
let cmudict ={}
let speaking = false
let total_infer_time=0
let count_infer=0
let loaded_model_name
let load_time
async function main(model_name) {
if (typeof model_name !== 'string') {//via button click
model_name ="en001_ep6399_univ_simplify"
}
console.log(model_name)
if (speaking){
console.log("speaking return")
}
speaking = true
console.log("main called")
if(!matcha_tts_raw){
const load_startTime = performance.now();
matcha_tts_raw = new MatchaTTSRaw()
console.time("load model");
const model_path = `./models/matcha-tts/${model_name}.onnx`
console.log(model_path)
await matcha_tts_raw.load_model(model_path,{ executionProviders: ['webgpu','wasm'] });
console.timeEnd("load model");
load_time = (performance.now() - load_startTime)/1000 //sec
loaded_model_name = model_name
let cmudictReady = loadCmudict(cmudict,'./dictionaries/cmudict-0.7b')
await cmudictReady
update_infer_bench1()
}else{
console.log("session exist skip load model")
}
const startTime = performance.now();
const text = document.getElementById('textInput').value
console.log("### textToArpa call")
const arpa_text = await textToArpa(cmudict,text)
console.log("### arpa returned")
const ipa_text = arpa_to_ipa(arpa_text).replace(/\s/g, "");
//console.log(ipa_text)
const spks = 0
const speed = document.getElementById('speed').value
const tempature = document.getElementById('temperature').value
console.time("infer");
const result = await matcha_tts_raw.infer(ipa_text, tempature, speed,spks);
if (result!=null){
console.timeEnd("infer");
const endTime = performance.now();
const infer_time = endTime-startTime
total_infer_time+=infer_time
count_infer += 1
update_infer_bench2()
webWavPlay(result)
}
speaking = false
}
function update_infer_bench1(){
const text = `${loaded_model_name} load time ${load_time.toFixed(1)} sec`;
document.getElementById('result1').innerText=text
}
function update_infer_bench2(){
const avg = (total_infer_time/count_infer)/1000
const text = `Infer Count ${count_infer} avg infer-time ${avg.toFixed(1)} sec`;
document.getElementById('result2').innerText=text
}
function update_range(){
const value = document.getElementById('spks').value
let formattedNumber = value.toString().padStart(3, '0');
document.getElementById('spks_label').textContent = formattedNumber
}
function update_range2(){
const value = document.getElementById('temperature').value
//let formattedNumber = value.toString().padStart(3, '0');
document.getElementById('tempature_label').textContent = value//formattedNumber
}
function update_range3(){
const value = document.getElementById('speed').value
//let formattedNumber = value.toString().padStart(3, '0');
document.getElementById('speed_label').textContent = value//sformattedNumber
}
window.onload = async function(){
//document.getElementById('textInput').onchange = main;
document.getElementById('myButton').onclick = main;
document.getElementById('temperature').onchange = update_range2
document.getElementById('speed').onchange = update_range3
}
function loadModel(model_name){
total_infer_time=0
count_infer=0
matcha_tts_raw=null
main(model_name)
}
function create_button(label, model_name) {
// ボタンの作成
const button = document.createElement('button');
button.style ="margin:4px;"
button.textContent = label;
// クリックイベントハンドラの設定
button.onclick = function() {
loadModel(model_name);
};
return button
}
document.getElementById('buttons').appendChild(create_button("ljspeech","ljspeech_sim"))
document.getElementById('buttons').appendChild(create_button("ljspeech-quantized","ljspeech_sim_q8"))
document.getElementById('buttons').appendChild(create_button("vctk","vctk_univ_simplify"))
document.getElementById('buttons').appendChild(create_button("vctk-quantized","vctk_univ_simplify_q8"))
document.getElementById('buttons').appendChild(create_button("en001","en001_ep6399_univ_simplify"))
document.getElementById('buttons').appendChild(create_button("en001-quantized","en001_ep6399_univ_simplify_q8"))
document.getElementById('buttons').appendChild(document.createElement('br'))
document.getElementById('buttons').appendChild(create_button("en001-t2-step01","en001_6399_T2_step01"))
document.getElementById('buttons').appendChild(create_button("en001-t2-step05","en001_6399_T2_step05"))
document.getElementById('buttons').appendChild(create_button("en001-t2-step10","en001_6399_T2_step10"))
//document.getElementById('buttons').appendChild(create_button("en001-t2-step20","en001_6399_T2_step20"))
document.getElementById('buttons').appendChild(document.createElement('br'))
document.getElementById('buttons').appendChild(create_button("en001-univ-step01","en001_6399_univ_step01"))
document.getElementById('buttons').appendChild(create_button("en001-univ-step05","en001_6399_univ_step05"))
document.getElementById('buttons').appendChild(create_button("en001-univ-step10","en001_6399_univ_step10"))
//document.getElementById('buttons').appendChild(create_button("en001-univ-step20","en001_6399_univ_step20"))
</script>
<div id="result1">Click button to load a model</div>
<div id="buttons"></div>
<br>
<div id="result2">en001-T2 and en001-univ are experimental</div>
<br><br>
<input type="text" id="textInput" value ="Hello Huggingface." placeholder="Enter some text here...">
<button id="myButton">Text To Speak</button><br>
<label for ="temperature" style="width: 110px;display: inline-block;">Temperature</label>
<input type="range" id="temperature" min="0" max="1.0" value="0.5" step="0.1"/>
<label for ="temperature" id="tempature_label">0.5</label><br>
<label for ="speed" style="width: 110px;display: inline-block;">Speed</label>
<input type="range" id="speed" min="0.1" max="2.0" value="1.0" step="0.1"/>
<label for ="speed" id="speed_label">1.0</label>
<br>
<br>
<div>almost load time 15 sec,short text TTS time 2 sec(my 2070super-gpu)</div><br>
<div>Quantized version is too slow and exist just for Github Page 100MB limitation so far</div><br>
<div>Multispeaker(vctk) is little bit slow than singlespeaker.default timesteps is 5(smallest 1 is 300msec fast,but audio become low quality)</div>
<br>
<div id="footer">
<b>Spaces</b><br>
<a href="https://huggingface.co/spaces/Akjava/matcha-tts_vctk-onnx" style="font-size: 9px" target="link">Match-TTS VCTK-ONNX</a> |
<a href="https://huggingface.co/spaces/Akjava/matcha-tts-onnx-benchmarks" style="font-size: 9px" target="link">Match-TTS ONNX-Benchmark</a> |
<br><br>
<b>Credits</b><br>
<a href="https://github.com/akjava/Matcha-TTS-Japanese" style="font-size: 9px" target="link">Matcha-TTS-Japanese</a> |
<a href = "http://www.udialogue.org/download/cstr-vctk-corpus.html" style="font-size: 9px" target="link">CSTR VCTK Corpus</a> |
<a href = "https://github.com/cmusphinx/cmudict" style="font-size: 9px" target="link">CMUDict</a> |
<a href = "https://huggingface.co/docs/transformers.js/index" style="font-size: 9px" target="link">Transformer.js</a> |
<a href = "https://huggingface.co/cisco-ai/mini-bart-g2p" style="font-size: 9px" target="link">mini-bart-g2p</a> |
<a href = "https://onnxruntime.ai/docs/get-started/with-javascript/web.html" style="font-size: 9px" target="link">ONNXRuntime-Web</a> |
<a href = "https://github.com/akjava/English-To-IPA-Collections" style="font-size: 9px" target="link">English-To-IPA-Collections</a> |
<a href ="https://huggingface.co/papers/2309.03199" style="font-size: 9px" target="link">Matcha-TTS Paper</a>
</div>
</body>
</html>