Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width" /> | |
| <title>Match TTS VCTK ONNX</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <div> | |
| <h1><a href="https://huggingface.co/Akjava/matcha-tts_vctk-onnx">Matcha-TTS VCTK-Onnx Demo</a></h1> | |
| <p>Initially take a long time to load model.browser's phonemized is poor than trained data.sometime strange speak would happen</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 = "fatal"; | |
| let matcha_tts_raw | |
| let cmudict ={} | |
| let speaking = false | |
| async function main() { | |
| if (speaking){ | |
| console.log("speaking return") | |
| } | |
| speaking = true | |
| console.log("main called") | |
| if(!matcha_tts_raw){ | |
| matcha_tts_raw = new MatchaTTSRaw() | |
| console.time("load model"); | |
| await matcha_tts_raw.load_model('./models/matcha-tts/vctk_univ_simplify.onnx',{ executionProviders: ['webgpu','wasm'] }); | |
| console.timeEnd("load model"); | |
| let cmudictReady = loadCmudict(cmudict,'./dictionaries/cmudict-0.7b') | |
| await cmudictReady | |
| }else{ | |
| console.log("session exist skip load model") | |
| } | |
| const text = document.getElementById('textInput').value | |
| const arpa_text = await textToArpa(cmudict,text) | |
| const ipa_text = arpa_to_ipa(arpa_text).replace(/\s/g, ""); | |
| console.log(ipa_text) | |
| const spks = document.getElementById('spks').value | |
| 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); | |
| console.timeEnd("infer"); | |
| if (result!=null){ | |
| webWavPlay(result) | |
| } | |
| speaking = false | |
| } | |
| 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 | |
| } | |
| function tts(text,spk){ | |
| document.getElementById('textInput').value = text | |
| document.getElementById('spks').value = spk | |
| let formattedNumber = spk.toString().padStart(3, '0'); | |
| document.getElementById('spks_label').textContent = formattedNumber | |
| main() | |
| } | |
| function shuffleArray(array) { | |
| return array.slice().sort(() => Math.random() - 0.5); | |
| } | |
| window.onload = async function(){ | |
| document.getElementById('textInput').onchange = main; | |
| document.getElementById('myButton').onclick = main; | |
| document.getElementById('spks').onchange = update_range | |
| document.getElementById('temperature').onchange = update_range2 | |
| document.getElementById('speed').onchange = update_range3 | |
| const word_text = ` | |
| Maybe. | |
| Perhaps. | |
| Probably. | |
| Actually. | |
| Basically. | |
| Generally. | |
| Usually. | |
| Obviously. | |
| Seriously. | |
| Honestly. | |
| Come here. | |
| Go there. | |
| Sit down. | |
| Stand up. | |
| Please wait. | |
| Hurry up. | |
| Be careful. | |
| Be quiet. | |
| Listen to me. | |
| Look at this. | |
| It's raining. | |
| It's sunny. | |
| It's cold. | |
| It's hot. | |
| It's late. | |
| It's early. | |
| It's easy. | |
| It's difficult. | |
| It's important. | |
| It's interesting. | |
| I'm excited! | |
| I'm nervous. | |
| I'm tired. | |
| I'm hungry. | |
| I'm thirsty. | |
| I'm bored. | |
| I'm happy. | |
| I'm sad. | |
| I'm angry. | |
| I'm scared. | |
| No problem. | |
| You're welcome. | |
| My pleasure. | |
| Of course. | |
| Sure thing. | |
| No worries. | |
| It's okay. | |
| Don't mention it. | |
| Any time. | |
| See you later! | |
| See you soon! | |
| Take care! | |
| Have a good one! | |
| Good night! | |
| Bye! | |
| Farewell! | |
| Any questions? | |
| Is everything clear? | |
| Do you need anything else? | |
| Can I help you with anything? | |
| What do you think? | |
| I'm not sure about that. | |
| I don't think so. | |
| I disagree. | |
| I see things differently. | |
| That's not how I see it. | |
| Exactly! | |
| I agree. | |
| That's right. | |
| You're right. | |
| I think so too. | |
| I see your point. | |
| You got this! | |
| Hang in there! | |
| Don't give up! | |
| You can do it! | |
| Keep trying! | |
| I believe in you! | |
| Got it. | |
| Okay. | |
| I understand. | |
| Makes sense. | |
| No problem. | |
| You're welcome. | |
| My pleasure. | |
| Sure. | |
| Of course. | |
| Certainly. | |
| Absolutely. | |
| Definitely. | |
| Wow! | |
| Really? | |
| No way! | |
| Are you serious? | |
| You're kidding! | |
| That's incredible! | |
| Unbelievable! | |
| That's great! | |
| That's awesome! | |
| That's amazing! | |
| I'm so happy! | |
| This is fantastic! | |
| Wonderful! | |
| Excellent! | |
| I'm sorry. | |
| My bad. | |
| Excuse me. | |
| I apologize. | |
| Forgive me. | |
| Thank you! | |
| Thanks! | |
| Thank you so much! | |
| I really appreciate it. | |
| You're a lifesaver! | |
| I owe you one. | |
| Hello huggingface! | |
| Good morning/afternoon/evening! | |
| How are you? | |
| How's it going? | |
| What's up? | |
| Long time no see! | |
| Nice to meet you! | |
| Good to see you! | |
| ` | |
| const container = document.getElementById("buttons") | |
| const words = shuffleArray(word_text.trim().split("\n")) | |
| let number = 0 | |
| for (let word of words){ | |
| // ボタンを作成 | |
| const button = document.createElement('button'); | |
| const spk = number | |
| // ボタンテキストを設定 | |
| button.textContent = "#"+spk.toString()+" "+word; | |
| button.style ="margin:4px;" | |
| // ボタンにクリックイベントを追加 | |
| button.onclick = () => tts(word, spk); | |
| // ラベルを作成（オプション） | |
| //const label = document.createElement('span'); | |
| //label.className = 'button-label'; | |
| //label.textContent = 'Label1'; // ラベルテキストは固定値としている | |
| // ボタンとラベルをDOMに追加 | |
| container.appendChild(button); | |
| number +=1 | |
| if (number>108){ | |
| break | |
| } | |
| } | |
| } | |
| </script> | |
| <div id="buttons"> | |
| </div> | |
| <br> | |
| <input type="text" id="textInput" value ="Hello.Huggingface" style="width: 200px;" placeholder="Enter some text here..."> | |
| <button id="myButton">Text To Speak</button><br> | |
| <label for ="spks" style="width: 110px;display: inline-block;">Speaker ID</label> | |
| <input type="range" id="spks" min="0" max="107" value="0" /> | |
| <label for ="spks" id="spks_label">000</label><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> <a href="https://huggingface.co/datasets/CSTR-Edinburgh/vctk">Dataset:CSTR-Edinburgh/vctk</a></div> | |
| <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> | |
| </div> | |
| </body> | |
| </html> | |