| <!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 En001-English</title> |
| </head> |
| <body> |
| <h1>Match-TTS Onnx En001-English(Faster GPU Version)</h1> |
| <div>this example using Quantized version(lowquality and slow) because of Github Page 100MB limitation</div> |
| <p><a href = "https://huggingface.co/Akjava/matcha_tts_common_voice_01_en_001">common_voice_01_en_001</a> - my trained model.you can create too!</p> |
| <br> |
| <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') { |
| 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 = load_startTime - performance.now() |
| loaded_model_name = model_name |
| |
| let cmudictReady = loadCmudict(cmudict,'./dictionaries/cmudict-0.7b') |
| await cmudictReady |
| |
| |
| update_infer_bench2() |
| }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, ""); |
| |
| |
| 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(2)} ms`; |
| document.getElementById('result2').innerText=text |
| } |
| |
| function update_infer_bench2(){ |
| const avg = total_infer_time/count_infer |
| const text = `Infer Count ${count_infer} avg infer-time ${avg.toFixed(2)} ms`; |
| 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 |
| |
| document.getElementById('tempature_label').textContent = value |
| } |
| function update_range3(){ |
| const value = document.getElementById('speed').value |
| |
| document.getElementById('speed_label').textContent = value |
| } |
| |
| window.onload = async function(){ |
| |
| 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")) |
| </script> |
| <div id="result1"></div> |
| <br> |
| <div id="buttons"></div> |
| <br> |
| <div id="result2"></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 id="footer"> |
| <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> |
|
|
