Hugging Face's logo

Spaces:
WSYBYT
/
wsybytt
Configuration error

App Files Community
masbudjj commited on
Commit
4ae25fe
·
verified ·
1 Parent(s): 7b97cc2

Delete index.html

Browse files
Files changed (1) hide show
  1. index.html +0 -205
index.html DELETED
@@ -1,205 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width,initial-scale=1" />
6
- <title>IndexTTS-like WebUI (Client-side, Transformers.js)</title>
7
- <link rel="stylesheet" href="assets/style.css" />
8
- </head>
9
- <body>
10
- <h1>IndexTTS-like WebUI (Client-side, Transformers.js)</h1>
11
- <p class="muted">
12
- Runs fully in your browser (no server). First run will download ONNX weights.
13
- </p>
14
-
15
- <div class="row">
16
- <!-- Left: language + emotion/advanced -->
17
- <div class="col">
18
- <fieldset>
19
- <legend>Language</legend>
20
- <select id="lang">
21
- <option value="en" selected>en</option>
22
- <option value="zh">zh</option>
23
- </select>
24
- <button id="switchLang">Switch</button>
25
- </fieldset>
26
-
27
- <fieldset>
28
- <legend>Emotion Control</legend>
29
- <label><input type="radio" name="emoMode" value="speaker" checked> From Speaker</label>
30
- <label><input type="radio" name="emoMode" value="ref"> Reference Audio</label>
31
- <label><input type="radio" name="emoMode" value="vector"> Custom Emotion Vector</label>
32
- <label><input type="radio" name="emoMode" value="text"> Text Description</label>
33
-
34
- <div id="emoRef" class="hidden">
35
- <label>Emotion Weight: <span id="emoWeightVal">0.50</span></label>
36
- <input id="emoWeight" type="range" min="0" max="1" step="0.01" value="0.5">
37
- <label>Upload Emotion Audio</label>
38
- <input id="emoAudio" type="file" accept="audio/*">
39
- </div>
40
-
41
- <div id="emoVec" class="hidden">
42
- <div class="grid">
43
- <div>
44
- <label>Joy</label><input data-vec="0" type="range" min="0" max="1" step="0.05" value="0">
45
- <label>Anger</label><input data-vec="1" type="range" min="0" max="1" step="0.05" value="0">
46
- <label>Sadness</label><input data-vec="2" type="range" min="0" max="1" step="0.05" value="0">
47
- <label>Fear</label><input data-vec="3" type="range" min="0" max="1" step="0.05" value="0">
48
- </div>
49
- <div>
50
- <label>Love</label><input data-vec="4" type="range" min="0" max="1" step="0.05" value="0">
51
- <label>Disgust</label><input data-vec="5" type="range" min="0" max="1" step="0.05" value="0">
52
- <label>Surprise</label><input data-vec="6" type="range" min="0" max="1" step="0.05" value="0">
53
- <label>Anticipation</label><input data-vec="7" type="range" min="0" max="1" step="0.05" value="0">
54
- </div>
55
- </div>
56
- </div>
57
-
58
- <div id="emoText" class="hidden">
59
- <label>Emotion Text (optional)</label>
60
- <input id="emoTextInput" type="text" placeholder="calm, warm, gentle…">
61
- <label><input id="emoRandom" type="checkbox"> Randomize Emotion</label>
62
- </div>
63
- </fieldset>
64
-
65
- <fieldset>
66
- <legend>Advanced</legend>
67
- <label><input id="doSample" type="checkbox" checked> do_sample</label>
68
- <label>top_p <span id="toppVal">0.80</span></label><input id="topp" type="range" min="0.01" max="1" step="0.01" value="0.8">
69
- <label>top_k (0 auto) <span id="topkVal">0</span></label><input id="topk" type="range" min="0" max="50" step="1" value="0">
70
- <label>temperature <span id="tempVal">0.70</span></label><input id="temp" type="range" min="0.1" max="1.5" step="0.05" value="0.7">
71
- <label>length_penalty <span id="lpVal">1.00</span></label><input id="lp" type="range" min="0.1" max="2" step="0.05" value="1.0">
72
- <label>num_beams <span id="beamsVal">1</span></label><input id="beams" type="range" min="1" max="8" step="1" value="1">
73
- <label>repetition_penalty <span id="rpVal">1.00</span></label><input id="rp" type="range" min="0.8" max="2" step="0.05" value="1.0">
74
- <label>max_mel_tokens <span id="mmtVal">2048</span></label><input id="mmt" type="range" min="256" max="4096" step="64" value="2048">
75
- </fieldset>
76
- </div>
77
-
78
- <!-- Middle: prompt/text/output -->
79
- <div class="col">
80
- <fieldset>
81
- <legend>Upload Speaker Prompt</legend>
82
- <input id="spkPrompt" type="file" accept="audio/*">
83
- </fieldset>
84
-
85
- <fieldset>
86
- <legend>Text</legend>
87
- <textarea id="txt" placeholder="Enter target text">Hello from Transformers.js!</textarea>
88
- <div class="muted"><span id="est">Estimated words: 4</span></div>
89
- <label>Max text tokens per segment <span id="segVal">120</span></label>
90
- <input id="seg" type="range" min="64" max="512" step="8" value="120">
91
- <div class="muted">Model Version: <span id="modelVer">1.0*</span></div>
92
- </fieldset>
93
-
94
- <fieldset>
95
- <legend>Synthesis</legend>
96
- <label>Speed (×) <span id="spdVal">1.00</span></label>
97
- <input id="spd" type="range" min="0.5" max="2" step="0.05" value="1.0">
98
- <div>
99
- <label><input type="radio" name="fmt" value="MP3" checked> MP3</label>
100
- <label><input type="radio" name="fmt" value="WAV"> WAV</label>
101
- </div>
102
- <label><input id="lowram" type="checkbox" checked> Low RAM mode</label>
103
- <label><input id="autocast" type="checkbox" checked> Autocast FP16</label>
104
- <p>
105
- <button id="go">Generate</button>
106
- <button id="free">Free RAM</button>
107
- <span id="status" class="chip">idle</span>
108
- </p>
109
- <audio id="player" controls></audio>
110
- <p><a id="download" class="hidden" download>Download</a></p>
111
- </fieldset>
112
- </div>
113
-
114
- <!-- Right: tips -->
115
- <div class="col">
116
- <fieldset>
117
- <legend>Notes</legend>
118
- <p class="muted">
119
- This HTML mirrors your Python UI, but some controls are placeholders until the chosen JS model exposes equivalent features.
120
- </p>
121
- <p>Status:
122
- <span id="backend" class="chip">loading libs…</span>
123
- <span id="model" class="chip">no model</span>
124
- </p>
125
- <p class="mono" id="log"></p>
126
- </fieldset>
127
- </div>
128
- </div>
129
-
130
- <script type="module">
131
- import * as transformers from "https://cdn.jsdelivr.net/npm/@huggingface/transformers/dist/transformers.min.js";
132
-
133
- const $ = (q)=>document.querySelector(q);
134
- const $$ = (q)=>document.querySelectorAll(q);
135
- const log = (s)=>{ const el=$("#log"); el.textContent = (el.textContent+"\n"+s).trim(); };
136
- const bindVal = (id, lbl)=> {
137
- const el = document.getElementById(id), t = document.getElementById(lbl);
138
- const f = ()=> t.textContent = (id==="beams"||id==="mmt"||id==="topk") ? el.value : parseFloat(el.value).toFixed( (id==="seg")?0:2 );
139
- el.addEventListener("input", f); f();
140
- };
141
- ["topp","topk","temp","lp","beams","rp","mmt","seg","spd"].forEach(k=>bindVal(k, {topp:"toppVal",topk:"topkVal",temp:"tempVal",lp:"lpVal",beams:"beamsVal",rp:"rpVal",mmt:"mmtVal",seg:"segVal",spd:"spdVal"}[k]));
142
-
143
- $("#txt").addEventListener("input", ()=>{
144
- const n = $("#txt").value.trim().split(/\s+/).filter(Boolean).length;
145
- $("#est").textContent = "Estimated words: " + n;
146
- });
147
-
148
- const updateEmo = ()=>{
149
- const v = document.querySelector('input[name="emoMode"]:checked').value;
150
- $("#emoRef").classList.toggle("hidden", v!=="ref");
151
- $("#emoVec").classList.toggle("hidden", v!=="vector");
152
- $("#emoText").classList.toggle("hidden", v!=="text");
153
- };
154
- $$('input[name="emoMode"]').forEach(r=>r.addEventListener("change", updateEmo)); updateEmo();
155
-
156
- $("#switchLang").addEventListener("click", ()=> log("Language set to: "+$("#lang").value));
157
-
158
- $("#free").addEventListener("click", ()=>{
159
- window.__lastAudioBuffer = null;
160
- $("#player").removeAttribute("src");
161
- $("#download").classList.add("hidden");
162
- log("Freed local references.");
163
- });
164
-
165
- $("#backend").textContent = "configuring…";
166
- await transformers.env.set("wasm.wasmPaths", "https://cdn.jsdelivr.net/npm/@xenova/wasm/");
167
- if (navigator.gpu) { $("#backend").textContent = "WebGPU ready"; } else { $("#backend").textContent = "WASM fallback"; }
168
-
169
- $("#model").textContent = "loading model…";
170
- // Default model (JS-compatible). Change this ID to your preferred model.
171
- const MODEL_ID = "Xenova/speecht5_tts";
172
- const tts = await transformers.pipeline("text-to-speech", MODEL_ID);
173
- $("#model").textContent = MODEL_ID;
174
-
175
- $("#go").addEventListener("click", async ()=>{
176
- const text = $("#txt").value.trim();
177
- if (!text) { alert("Text is empty"); return; }
178
-
179
- const btn = $("#go");
180
- const status = $("#status");
181
- btn.disabled = true; status.textContent = "generating…";
182
-
183
- try {
184
- const out = await tts(text); // { audio: Float32Array, sampling_rate }
185
- const wav = await transformers.utils.encodeAudioWAV(out.audio, out.sampling_rate);
186
- const blob = new Blob([wav], { type: "audio/wav" });
187
- const url = URL.createObjectURL(blob);
188
-
189
- const player = $("#player");
190
- player.src = url;
191
- player.playbackRate = parseFloat($("#spd").value);
192
-
193
- const a = $("#download");
194
- a.href = url; a.download = "tts.wav"; a.classList.remove("hidden");
195
-
196
- status.textContent = "done";
197
- } catch (e) {
198
- console.error(e); status.textContent = "error"; log("Error: " + (e?.message || e));
199
- } finally {
200
- btn.disabled = false;
201
- }
202
- });
203
- </script>
204
- </body>
205
- </html>