Spaces:

Akjava
/

matcha-tts_vctk-onnx

Running

File size: 9,126 Bytes

<!doctype html>
<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>Matcha-TTS VCTK-Onnx Demo</h1>
      <p><a href="https://huggingface.co/Akjava/matcha-tts_vctk-onnx" target="link">Model Page</a></p>
      <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){
          // Create Button
  const button = document.createElement('button');
  const spk = number
  // Set Button Text
  button.textContent = "#"+spk.toString()+" "+word;
  button.style ="margin:4px;"
  
  // add click event
  button.onclick = () => tts(word, spk);
  
  
  // add button to 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><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>Spaces</b><br>
     <a href="/spaces/Akjava/matcha-tts_vctk-onnx" style="font-size: 9px" target="link">Match-TTS VCTK-ONNX</a> | 
     <a href="/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>
          
        </div>
	</body>
</html>