Hugging Face's logo

Spaces:
codexxx
/
pocket-tts-web
Running

App Files Community
codexxx commited on
Commit
6fbae64
·
verified ·
1 Parent(s): 016b5f9

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +185 -186
index.html CHANGED
@@ -1,193 +1,192 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Pocket TTS - Neural Voice Cloning in Your Browser</title>
8
- <link rel="stylesheet" href="style.css">
9
- <link rel="preconnect" href="https://fonts.googleapis.com">
10
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
- <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&family=Nunito:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
12
- <!-- ONNX Runtime Web (loaded by worker, kept here for potential main thread usage) -->
13
- <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.20.0/dist/ort.min.js"></script>
14
- </head>
15
-
16
- <body>
17
- <!-- Ambient Background Effects -->
18
- <div class="ambient-layer">
19
- <div class="orb orb--primary"></div>
20
- <div class="orb orb--secondary"></div>
21
- <div class="orb orb--tertiary"></div>
22
- <div class="grid-overlay"></div>
23
- </div>
24
-
25
- <div class="app-shell">
26
- <!-- Hero Header -->
27
- <header class="hero">
28
- <div class="hero__brand">
29
- <div class="logo">
30
- <svg class="logo__icon" viewBox="0 0 32 32" fill="none">
31
- <path d="M16 4C16 4 8 8 8 16C8 24 16 28 16 28" stroke="url(#logoGrad)" stroke-width="2.5" stroke-linecap="round"/>
32
- <path d="M16 4C16 4 24 8 24 16C24 24 16 28 16 28" stroke="url(#logoGrad)" stroke-width="2.5" stroke-linecap="round"/>
33
- <path d="M12 10V22" stroke="url(#logoGrad)" stroke-width="2.5" stroke-linecap="round"/>
34
- <path d="M16 8V24" stroke="url(#logoGrad)" stroke-width="2.5" stroke-linecap="round"/>
35
- <path d="M20 10V22" stroke="url(#logoGrad)" stroke-width="2.5" stroke-linecap="round"/>
36
- <defs>
37
- <linearGradient id="logoGrad" x1="8" y1="4" x2="24" y2="28" gradientUnits="userSpaceOnUse">
38
- <stop stop-color="#3eb489"/>
39
- <stop offset="0.5" stop-color="#00d4aa"/>
40
- <stop offset="1" stop-color="#7fffd4"/>
41
- </linearGradient>
42
- </defs>
43
- </svg>
44
- <span class="logo__text">Pocket TTS</span>
45
- </div>
46
- <div class="hero__badge">
47
- <span class="badge">ONNX Runtime</span>
48
- </div>
49
- </div>
50
- <p class="hero__tagline">Real-time neural text-to-speech with voice cloning, running entirely in your browser</p>
51
- </header>
52
-
53
- <main class="main">
54
- <!-- Input Section -->
55
- <section class="input-section">
56
- <!-- Voice Selection -->
57
- <div class="voice-section">
58
- <div class="voice-selector">
59
- <label for="voice-select" class="voice-selector__label">Voice</label>
60
- <select id="voice-select" class="voice-selector__dropdown">
61
- <option value="">Loading voices...</option>
62
- </select>
63
- </div>
64
- <div class="voice-upload">
65
- <button id="voice-upload-btn" class="btn btn--outline btn--small">
66
- <svg class="btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
67
- <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
68
- <polyline points="17 8 12 3 7 8"/>
69
- <line x1="12" y1="3" x2="12" y2="15"/>
70
- </svg>
71
- <span>Upload Voice</span>
72
- </button>
73
- <input type="file" id="voice-upload" accept="audio/*" hidden>
74
- <span id="voice-upload-status" class="voice-upload-status"></span>
75
- </div>
76
- </div>
77
-
78
- <div class="textarea-wrap">
79
- <textarea
80
- id="text-input"
81
- placeholder="Type or paste text to synthesize..."
82
- aria-label="Text to synthesize"
83
- ></textarea>
84
  <div class="textarea-meta">
85
  <span class="char-count"><span id="char-count">0</span> chars</span>
86
  </div>
87
- </div>
88
-
89
- <!-- Sample Texts -->
90
- <div class="sample-texts">
91
- <span class="sample-texts__label">Try:</span>
92
- <button class="sample-btn" data-text="Hello, welcome to Pocket TTS. This is a demonstration of real-time voice cloning running entirely in your browser.">Demo greeting</button>
93
- <button class="sample-btn" data-text="I completely understand how frustrating this must be for you. Let me take care of this right away and make sure we get it resolved.">Empathetic support</button>
94
- <button class="sample-btn" data-text="Wow, congratulations! That's absolutely fantastic news! I'm so thrilled for you!">Excited</button>
95
- <button class="sample-btn" data-text="I'm really sorry to hear about your loss. Please know that we're here for you, and take all the time you need.">Compassionate</button>
96
- <button class="sample-btn" data-text="Great question! I'd be happy to walk you through this step by step. First, let's start with the basics.">Helpful guide</button>
97
- </div>
98
-
99
- <div class="controls">
100
- <button id="generate-btn" class="btn btn--primary">
101
- <svg class="btn__icon" viewBox="0 0 24 24" fill="currentColor">
102
- <polygon points="5,3 19,12 5,21"/>
103
- </svg>
104
- <span class="btn__text">Generate Audio</span>
105
- <div class="btn__loader" id="btn-loader"></div>
106
- </button>
107
- <button id="stop-btn" class="btn btn--secondary" disabled>
108
- <svg class="btn__icon" viewBox="0 0 24 24" fill="currentColor">
109
- <rect x="6" y="6" width="12" height="12" rx="1"/>
110
- </svg>
111
- <span class="btn__text">Stop</span>
112
- </button>
113
- </div>
114
- </section>
115
-
116
- <!-- Output Section: Visualizer + Metrics -->
117
- <section class="output-section">
118
- <div class="visualizer-panel">
119
- <div class="visualizer-panel__header">
120
- <span class="visualizer-panel__title">Audio Output</span>
121
- <div class="status-indicator" id="status-indicator">
122
- <span class="status-dot"></span>
123
- <span class="status-text" id="stat-status">Idle</span>
124
- </div>
125
- </div>
126
- <div class="visualizer-container">
127
- <canvas id="visualizer-waveform"></canvas>
128
- <canvas id="visualizer-bars" class="visualizer-bars"></canvas>
129
- </div>
130
- </div>
131
-
132
- <div class="metrics-panel">
133
- <h3 class="metrics-panel__title">Performance</h3>
134
-
135
- <div class="metric">
136
- <div class="metric__header">
137
- <span class="metric__label">Time to First Byte</span>
138
- <button class="metric__info" aria-label="TTFB explanation" data-tooltip="Time from request until first audio chunk is received">
139
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
140
- <circle cx="12" cy="12" r="10"/>
141
- <path d="M12 16v-4M12 8h.01"/>
142
- </svg>
143
- </button>
144
- </div>
145
- <div class="metric__value">
146
- <span class="metric__number" id="stat-ttfb">--</span>
147
- <span class="metric__unit">ms</span>
148
- </div>
149
- <div class="metric__bar">
150
- <div class="metric__bar-fill" id="ttfb-bar"></div>
151
- </div>
152
- </div>
153
-
154
- <div class="metric metric--highlight">
155
- <div class="metric__header">
156
- <span class="metric__label">Real-Time Factor</span>
157
- <button class="metric__info" aria-label="RTFx explanation" data-tooltip="Audio duration divided by processing time. Values above 1x mean faster than real-time playback.">
158
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
159
- <circle cx="12" cy="12" r="10"/>
160
- <path d="M12 16v-4M12 8h.01"/>
161
- </svg>
162
- </button>
163
- </div>
164
- <div class="metric__value">
165
- <span class="metric__number metric__number--large" id="stat-rtfx">--</span>
166
- <span class="metric__unit">x</span>
167
- </div>
168
  <div class="metric__context" id="rtfx-context">&gt;1x = faster than real-time</div>
169
  <div class="metric__note" id="edge-opt-note" style="display: none;">(edge optimization applied)</div>
170
  <div class="metric__note" id="full-gen-note" style="display: none;">(waiting for full generation first)</div>
171
  </div>
172
-
173
- <div class="metric metric--status">
174
- <span class="metric__label">Model</span>
175
- <div class="model-status" id="model-status">
176
- <span class="model-status__dot"></span>
177
- <span class="model-status__text">Not loaded</span>
178
- </div>
179
- </div>
180
- </div>
181
- </section>
182
- </main>
183
-
184
- <footer class="footer">
185
- <p><a href="https://github.com/kyutai-labs/pocket-tts" target="_blank" rel="noopener">Pocket TTS</a> by <a href="https://kyutai.org" target="_blank" rel="noopener">Kyutai</a>. This is an unofficial demo.</p>
186
- <p class="footer__disclaimer">Do not use for voice cloning without consent, misinformation, fraud, or any harmful/illegal purpose. All liability disclaimed.</p>
187
- </footer>
188
- </div>
189
-
190
- <script type="module" src="onnx-streaming.js?v=1"></script>
191
- </body>
192
-
193
- </html>
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Orbit E-Studio — Private Voice Studio in Your Browser</title>
8
+ <link rel="stylesheet" href="style.css">
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&family=Nunito:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
12
+ <!-- Runtime Web (loaded by worker, kept here for potential main thread usage) -->
13
+ <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.20.0/dist/ort.min.js"></script>
14
+ </head>
15
+
16
+ <body>
17
+ <!-- Ambient Background Effects -->
18
+ <div class="ambient-layer">
19
+ <div class="orb orb--primary"></div>
20
+ <div class="orb orb--secondary"></div>
21
+ <div class="orb orb--tertiary"></div>
22
+ <div class="grid-overlay"></div>
23
+ </div>
24
+
25
+ <div class="app-shell">
26
+ <!-- Hero Header -->
27
+ <header class="hero">
28
+ <div class="hero__brand">
29
+ <div class="logo">
30
+ <svg class="logo__icon" viewBox="0 0 32 32" fill="none">
31
+ <path d="M16 4C16 4 8 8 8 16C8 24 16 28 16 28" stroke="url(#logoGrad)" stroke-width="2.5" stroke-linecap="round" />
32
+ <path d="M16 4C16 4 24 8 24 16C24 24 16 28 16 28" stroke="url(#logoGrad)" stroke-width="2.5" stroke-linecap="round" />
33
+ <path d="M12 10V22" stroke="url(#logoGrad)" stroke-width="2.5" stroke-linecap="round" />
34
+ <path d="M16 8V24" stroke="url(#logoGrad)" stroke-width="2.5" stroke-linecap="round" />
35
+ <path d="M20 10V22" stroke="url(#logoGrad)" stroke-width="2.5" stroke-linecap="round" />
36
+ <defs>
37
+ <linearGradient id="logoGrad" x1="8" y1="4" x2="24" y2="28" gradientUnits="userSpaceOnUse">
38
+ <stop stop-color="#3eb489" />
39
+ <stop offset="0.5" stop-color="#00d4aa" />
40
+ <stop offset="1" stop-color="#7fffd4" />
41
+ </linearGradient>
42
+ </defs>
43
+ </svg>
44
+ <span class="logo__text">Orbit E-Studio</span>
45
+ </div>
46
+ <div class="hero__badge">
47
+ <span class="badge">Orbit Engine</span>
48
+ </div>
49
+ </div>
50
+ <p class="hero__tagline">Real-time text-to-speech with personal voice presets — running entirely in your browser</p>
51
+ </header>
52
+
53
+ <main class="main">
54
+ <!-- Input Section -->
55
+ <section class="input-section">
56
+ <!-- Voice Selection -->
57
+ <div class="voice-section">
58
+ <div class="voice-selector">
59
+ <label for="voice-select" class="voice-selector__label">Voice</label>
60
+ <select id="voice-select" class="voice-selector__dropdown">
61
+ <option value="">Loading voices...</option>
62
+ </select>
63
+ </div>
64
+ <div class="voice-upload">
65
+ <button id="voice-upload-btn" class="btn btn--outline btn--small">
66
+ <svg class="btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
67
+ <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
68
+ <polyline points="17 8 12 3 7 8" />
69
+ <line x1="12" y1="3" x2="12" y2="15" />
70
+ </svg>
71
+ <span>Upload Voice</span>
72
+ </button>
73
+ <input type="file" id="voice-upload" accept="audio/*" hidden>
74
+ <span id="voice-upload-status" class="voice-upload-status"></span>
75
+ </div>
76
+ </div>
77
+
78
+ <div class="textarea-wrap">
79
+ <textarea id="text-input" placeholder="Type or paste text to generate audio..." aria-label="Text to synthesize"></textarea>
 
 
 
 
80
  <div class="textarea-meta">
81
  <span class="char-count"><span id="char-count">0</span> chars</span>
82
  </div>
83
+ </div>
84
+
85
+ <!-- Sample Texts -->
86
+ <div class="sample-texts">
87
+ <span class="sample-texts__label">Try:</span>
88
+ <button class="sample-btn" data-text="Hello, welcome to Orbit E-Studio. This is a demonstration of real-time speech generation running entirely in your browser.">Demo greeting</button>
89
+ <button class="sample-btn" data-text="I completely understand how frustrating this must be for you. Let me take care of this right away and make sure we get it resolved.">Empathetic support</button>
90
+ <button class="sample-btn" data-text="Wow, congratulations! That's absolutely fantastic news! I'm so thrilled for you!">Excited</button>
91
+ <button class="sample-btn" data-text="I'm really sorry to hear about your loss. Please know that we're here for you, and take all the time you need.">Compassionate</button>
92
+ <button class="sample-btn" data-text="Good question. Let’s go step by step—start with the basics, then build from there.">Helpful guide</button>
93
+ </div>
94
+
95
+ <div class="controls">
96
+ <button id="generate-btn" class="btn btn--primary">
97
+ <svg class="btn__icon" viewBox="0 0 24 24" fill="currentColor">
98
+ <polygon points="5,3 19,12 5,21" />
99
+ </svg>
100
+ <span class="btn__text">Generate Audio</span>
101
+ <div class="btn__loader" id="btn-loader"></div>
102
+ </button>
103
+ <button id="stop-btn" class="btn btn--secondary" disabled>
104
+ <svg class="btn__icon" viewBox="0 0 24 24" fill="currentColor">
105
+ <rect x="6" y="6" width="12" height="12" rx="1" />
106
+ </svg>
107
+ <span class="btn__text">Stop</span>
108
+ </button>
109
+ </div>
110
+ </section>
111
+
112
+ <!-- Output Section: Visualizer + Metrics -->
113
+ <section class="output-section">
114
+ <div class="visualizer-panel">
115
+ <div class="visualizer-panel__header">
116
+ <span class="visualizer-panel__title">Audio Output</span>
117
+ <div class="status-indicator" id="status-indicator">
118
+ <span class="status-dot"></span>
119
+ <span class="status-text" id="stat-status">Idle</span>
120
+ </div>
121
+ </div>
122
+ <div class="visualizer-container">
123
+ <canvas id="visualizer-waveform"></canvas>
124
+ <canvas id="visualizer-bars" class="visualizer-bars"></canvas>
125
+ </div>
126
+ </div>
127
+
128
+ <div class="metrics-panel">
129
+ <h3 class="metrics-panel__title">Performance</h3>
130
+
131
+ <div class="metric">
132
+ <div class="metric__header">
133
+ <span class="metric__label">Time to First Byte</span>
134
+ <button class="metric__info" aria-label="TTFB explanation" data-tooltip="Time from request until first audio chunk is received">
135
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
136
+ <circle cx="12" cy="12" r="10" />
137
+ <path d="M12 16v-4M12 8h.01" />
138
+ </svg>
139
+ </button>
140
+ </div>
141
+ <div class="metric__value">
142
+ <span class="metric__number" id="stat-ttfb">--</span>
143
+ <span class="metric__unit">ms</span>
144
+ </div>
145
+ <div class="metric__bar">
146
+ <div class="metric__bar-fill" id="ttfb-bar"></div>
147
+ </div>
148
+ </div>
149
+
150
+ <div class="metric metric--highlight">
151
+ <div class="metric__header">
152
+ <span class="metric__label">Real-Time Factor</span>
153
+ <button class="metric__info" aria-label="RTFx explanation" data-tooltip="Audio duration divided by processing time. Values above 1x mean faster than real-time playback.">
154
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
155
+ <circle cx="12" cy="12" r="10" />
156
+ <path d="M12 16v-4M12 8h.01" />
157
+ </svg>
158
+ </button>
159
+ </div>
160
+ <div class="metric__value">
161
+ <span class="metric__number metric__number--large" id="stat-rtfx">--</span>
162
+ <span class="metric__unit">x</span>
163
+ </div>
164
  <div class="metric__context" id="rtfx-context">&gt;1x = faster than real-time</div>
165
  <div class="metric__note" id="edge-opt-note" style="display: none;">(edge optimization applied)</div>
166
  <div class="metric__note" id="full-gen-note" style="display: none;">(waiting for full generation first)</div>
167
  </div>
168
+
169
+ <div class="metric metric--status">
170
+ <span class="metric__label">Engine</span>
171
+ <div class="model-status" id="model-status">
172
+ <span class="model-status__dot"></span>
173
+ <span class="model-status__text">Not ready</span>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </section>
178
+ </main>
179
+
180
+ <footer class="footer">
181
+ <p>
182
+ <a href="#" rel="nofollow noopener" onclick="event.preventDefault(); return false;">Orbit E-Studio</a>
183
+ <span> — Private Voice Studio</span>
184
+ </p>
185
+ <p class="footer__disclaimer">Do not use without consent, or for fraud, misinformation, or any harmful/illegal purpose.</p>
186
+ </footer>
187
+ </div>
188
+
189
+ <script type="module" src="onnx-streaming.js?v=1"></script>
190
+ </body>
191
+
192
+ </html>