Hugging Face's logo

Spaces:
Akjava
/
matcha-tts_vctk-onnx
Running

App Files Community
Akjava commited on
Commit
47da464
•
1 Parent(s): e7f83e3

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +108 -2
index.html CHANGED
@@ -9,10 +9,116 @@
9
  <body>
10
  <div>
11
 
 
 
12
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13
 
14
- <p> <a href ="https://huggingface.co/datasets/CSTR-Edinburgh/vctk">VCTK Dataset are cc-by-4.0
15
- </a> </p>
16
  </div>
17
  </body>
18
  </html>
 
9
  <body>
10
  <div>
11
 
12
+ <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.webgpu.min.js" ></script>
13
+
14
 
15
+ <script type="module">
16
+ import { MatchaTTSRaw } from "./js-esm/matcha_tts_raw.js";
17
+ import { webWavPlay } from "./js-esm/web_wav_play.js";
18
+ import { arpa_to_ipa } from "./js-esm/arpa_to_ipa.js";
19
+ import { loadCmudict } from "./js-esm/cmudict_loader.js";
20
+ import { env,textToArpa} from "./js-esm/text_to_arpa.js";
21
+
22
+ env.allowLocalModels = true;
23
+ env.localModelPath = "./models/";
24
+ env.backends.onnx.logLevel = "fatal";
25
+
26
+ let matcha_tts_raw
27
+ let cmudict ={}
28
+ let speaking = false
29
+ async function main() {
30
+ if (speaking){
31
+ console.log("speaking return")
32
+ }
33
+ speaking = true
34
+ console.log("main called")
35
+ if(!matcha_tts_raw){
36
+ matcha_tts_raw = new MatchaTTSRaw()
37
+ console.time("load model");
38
+ await matcha_tts_raw.load_model('./models/matcha-tts/vctk_univ_simplify_q8.onnx',{ executionProviders: ['webgpu','wasm'] });
39
+
40
+ console.timeEnd("load model");
41
+
42
+ let cmudictReady = loadCmudict(cmudict,'./dictionaries/cmudict-0.7b')
43
+ await cmudictReady
44
+
45
+ }else{
46
+ console.log("session exist skip load model")
47
+ }
48
+ const text = document.getElementById('textInput').value
49
+ const arpa_text = await textToArpa(cmudict,text)
50
+ const ipa_text = arpa_to_ipa(arpa_text).replace(/\s/g, "");
51
+ console.log(ipa_text)
52
+
53
+ const spks = document.getElementById('spks').value
54
+ const speed = document.getElementById('speed').value
55
+ const tempature = document.getElementById('temperature').value
56
+
57
+ console.time("infer");
58
+ const result = await matcha_tts_raw.infer(ipa_text, tempature, speed,spks);
59
+ console.timeEnd("infer");
60
+ if (result!=null){
61
+ webWavPlay(result)
62
+
63
+ }
64
+
65
+ speaking = false
66
+ }
67
+ function update_range(){
68
+ const value = document.getElementById('spks').value
69
+ let formattedNumber = value.toString().padStart(3, '0');
70
+ document.getElementById('spks_label').textContent = formattedNumber
71
+ }
72
+ function update_range2(){
73
+ const value = document.getElementById('temperature').value
74
+ //let formattedNumber = value.toString().padStart(3, '0');
75
+ document.getElementById('tempature_label').textContent = value//formattedNumber
76
+ }
77
+ function update_range3(){
78
+ const value = document.getElementById('speed').value
79
+ //let formattedNumber = value.toString().padStart(3, '0');
80
+ document.getElementById('speed_label').textContent = value//sformattedNumber
81
+ }
82
+
83
+ window.onload = async function(){
84
+ document.getElementById('textInput').onchange = main;
85
+ document.getElementById('myButton').onclick = main;
86
+ document.getElementById('spks').onchange = update_range
87
+ document.getElementById('temperature').onchange = update_range2
88
+ document.getElementById('speed').onchange = update_range3
89
+ }
90
+
91
+
92
+ </script>
93
+
94
+ <input type="text" id="textInput" value ="Hello." placeholder="Enter some text here...">
95
+
96
+ <button id="myButton">Text To Speak</button><br>
97
+ <label for ="spks" style="width: 110px;display: inline-block;">Speaker ID</label>
98
+ <input type="range" id="spks" min="0" max="107" value="0" />
99
+ <label for ="spks" id="spks_label">000</label><br>
100
+
101
+ <label for ="temperature" style="width: 110px;display: inline-block;">Temperature</label>
102
+ <input type="range" id="temperature" min="0" max="1.0" value="0.5" step="0.1"/>
103
+ <label for ="temperature" id="tempature_label">0.5</label><br>
104
+
105
+ <label for ="speed" style="width: 110px;display: inline-block;">Speed</label>
106
+ <input type="range" id="speed" min="0.1" max="2.0" value="1.0" step="0.1"/>
107
+ <label for ="speed" id="speed_label">1.0</label>
108
+ <br>
109
+ <br>
110
+ <div id="footer">
111
+ <b>Credits</b><br>
112
+ <a href="https://github.com/akjava/Matcha-TTS-Japanese" style="font-size: 9px" target="link">Matcha-TTS-Japanese</a> |
113
+ <a href = "http://www.udialogue.org/download/cstr-vctk-corpus.html" style="font-size: 9px" target="link">CSTR VCTK Corpus</a> |
114
+ <a href = "https://github.com/cmusphinx/cmudict" style="font-size: 9px" target="link">CMUDict</a> |
115
+ <a href = "https://huggingface.co/docs/transformers.js/index" style="font-size: 9px" target="link">Transformer.js</a> |
116
+ <a href = "https://huggingface.co/cisco-ai/mini-bart-g2p" style="font-size: 9px" target="link">mini-bart-g2p</a> |
117
+ <a href = "https://onnxruntime.ai/docs/get-started/with-javascript/web.html" style="font-size: 9px" target="link">ONNXRuntime-Web</a> |
118
+ <a href = "https://github.com/akjava/English-To-IPA-Collections" style="font-size: 9px" target="link">English-To-IPA-Collections</a> |
119
+ <a href ="https://huggingface.co/papers/2309.03199" style="font-size: 9px" target="link">Matcha-TTS Paper</a>
120
+ </div>
121
 
 
 
122
  </div>
123
  </body>
124
  </html>