Spaces:

Akjava
/

matcha-tts_vctk-onnx

Running

File size: 8,305 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>

          <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
          main()
        }
        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 = word_text.trim().split("\n")
          let number = 1
        for (let word of words){
          // ボタンを作成
  const button = document.createElement('button');
  const spk = number
  // ボタンテキストを設定
  button.textContent = "#"+spk.toString()+" "+word;
  
  // ボタンにクリックイベントを追加
  button.onclick = () => tts(word, spk);
  
  // ラベルを作成（オプション）
  //const label = document.createElement('span');
  //label.className = 'button-label';
  //label.textContent = 'Label1'; // ラベルテキストは固定値としている
  
  // ボタンとラベルをDOMに追加
  container.appendChild(button);
          
        }
          number +=1
          
        }
        
    
    </script>
    <div id="buttons">
       
    </div>
    <input type="text" id="textInput"  value ="Hello." 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 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>