Hugging Face's logo

Spaces:
ChetanSaifsAi
/
text-to-speech-template
Running

App Files Community
ChetanSaifsAi commited on
Commit
5254344
·
verified ·
1 Parent(s): ab923f6

updated

Browse files
Files changed (3) hide show
  1. app.js +64 -0
  2. index.html +101 -19
  3. style.css +283 -28
app.js ADDED
@@ -0,0 +1,64 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ new Vue({
2
+ el: '#app',
3
+ data: {
4
+ textInput: '',
5
+ selectedVoice: 'female',
6
+ selectedLanguage: 'en-US',
7
+ characterCount: 0,
8
+ isProcessing: false,
9
+ maxCharacters: 500
10
+ },
11
+ methods: {
12
+ updateCharacterCount() {
13
+ this.characterCount = this.textInput.length;
14
+ if (this.characterCount > this.maxCharacters) {
15
+ this.textInput = this.textInput.substring(0, this.maxCharacters);
16
+ this.characterCount = this.maxCharacters;
17
+ }
18
+ },
19
+ convertToSpeech() {
20
+ if (!this.textInput || this.isProcessing) return;
21
+
22
+ this.isProcessing = true;
23
+
24
+ // Using the Web Speech API for demonstration
25
+ const utterance = new SpeechSynthesisUtterance(this.textInput);
26
+ utterance.lang = this.selectedLanguage;
27
+
28
+ // Select voice based on gender preference
29
+ const voices = speechSynthesis.getVoices();
30
+ const preferredVoice = voices.find(voice =>
31
+ voice.lang === this.selectedLanguage &&
32
+ voice.name.toLowerCase().includes(this.selectedVoice)
33
+ ) || voices.find(voice => voice.lang === this.selectedLanguage) || voices[0];
34
+
35
+ utterance.voice = preferredVoice;
36
+
37
+ utterance.onend = () => {
38
+ this.isProcessing = false;
39
+ };
40
+
41
+ utterance.onerror = () => {
42
+ this.isProcessing = false;
43
+ alert('An error occurred while converting text to speech. Please try again.');
44
+ };
45
+
46
+ // Cancel any ongoing speech
47
+ speechSynthesis.cancel();
48
+
49
+ // Start speaking
50
+ speechSynthesis.speak(utterance);
51
+ }
52
+ },
53
+ mounted() {
54
+ // Force voice list loading
55
+ speechSynthesis.getVoices();
56
+
57
+ // Handle dynamic voice loading in Chrome
58
+ if ('onvoiceschanged' in speechSynthesis) {
59
+ speechSynthesis.onvoiceschanged = () => {
60
+ speechSynthesis.getVoices();
61
+ };
62
+ }
63
+ }
64
+ });
index.html CHANGED
@@ -1,19 +1,101 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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.0">
6
+ <title>AI Text-to-Speech Demo | Saifs.ai</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <!-- SEO Meta Tags -->
11
+ <meta name="description" content="Experience the power of AI Text-to-Speech technology with our interactive demo. Convert text to natural-sounding speech instantly.">
12
+ <meta name="keywords" content="AI text to speech, TTS, voice synthesis, speech generation, Saifs.ai">
13
+ <meta name="author" content="Saifs.ai">
14
+ <meta property="og:title" content="AI Text-to-Speech Demo | Saifs.ai">
15
+ <meta property="og:description" content="Transform text into natural speech with our AI-powered text-to-speech technology.">
16
+ <meta property="og:url" content="https://saifs.ai/ai-text-to-speech">
17
+ </head>
18
+ <body>
19
+ <div id="app">
20
+ <header>
21
+ <nav>
22
+ <div class="logo">Saifs.ai TTS</div>
23
+ <a href="https://saifs.ai/ai-text-to-speech" class="cta-button">Visit Saifs.ai</a>
24
+ </nav>
25
+ </header>
26
+
27
+ <main>
28
+ <section class="hero">
29
+ <h1>Experience the Future of <span class="highlight">AI Voice Technology</span></h1>
30
+ <p class="subtitle">Transform your text into natural-sounding speech instantly</p>
31
+ </section>
32
+
33
+ <section class="tts-demo">
34
+ <div class="container">
35
+ <div class="input-section">
36
+ <textarea
37
+ v-model="textInput"
38
+ placeholder="Enter your text here..."
39
+ @input="updateCharacterCount"
40
+ ></textarea>
41
+ <div class="char-count">{{ characterCount }}/500 characters</div>
42
+ </div>
43
+ <div class="controls">
44
+ <div class="voice-settings">
45
+ <select v-model="selectedVoice">
46
+ <option value="female">Female Voice</option>
47
+ <option value="male">Male Voice</option>
48
+ </select>
49
+ <select v-model="selectedLanguage">
50
+ <option value="en-US">English (US)</option>
51
+ <option value="en-GB">English (UK)</option>
52
+ </select>
53
+ </div>
54
+ <button
55
+ @click="convertToSpeech"
56
+ :disabled="!textInput || isProcessing"
57
+ :class="{ 'processing': isProcessing }"
58
+ >
59
+ {{ isProcessing ? 'Converting...' : 'Convert to Speech' }}
60
+ </button>
61
+ </div>
62
+ </div>
63
+ </section>
64
+
65
+ <section class="features">
66
+ <h2>Why Choose Our AI Text-to-Speech?</h2>
67
+ <div class="feature-grid">
68
+ <div class="feature-card">
69
+ <div class="icon">🎯</div>
70
+ <h3>High Accuracy</h3>
71
+ <p>Natural and human-like voice synthesis</p>
72
+ </div>
73
+ <div class="feature-card">
74
+ <div class="icon">⚡</div>
75
+ <h3>Fast Processing</h3>
76
+ <p>Real-time text to speech conversion</p>
77
+ </div>
78
+ <div class="feature-card">
79
+ <div class="icon">🌐</div>
80
+ <h3>Multiple Languages</h3>
81
+ <p>Support for various languages and accents</p>
82
+ </div>
83
+ <div class="feature-card">
84
+ <div class="icon">📱</div>
85
+ <h3>Cross-Platform</h3>
86
+ <p>Works on all devices and browsers</p>
87
+ </div>
88
+ </div>
89
+ </section>
90
+ </main>
91
+
92
+ <footer>
93
+ <div class="footer-content">
94
+ <p>© 2024 Saifs.ai - AI Text-to-Speech Technology</p>
95
+ <a href="https://saifs.ai/ai-text-to-speech" class="footer-link">Learn More</a>
96
+ </div>
97
+ </footer>
98
+ </div>
99
+ <script src="app.js"></script>
100
+ </body>
101
+ </html>
style.css CHANGED
@@ -1,28 +1,283 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
- }
5
-
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
- }
10
-
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
- }
17
-
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
- }
25
-
26
- .card p:last-child {
27
- margin-bottom: 0;
28
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ :root {
2
+ --primary-color: #4A90E2;
3
+ --secondary-color: #2C3E50;
4
+ --accent-color: #E74C3C;
5
+ --background-color: #F5F7FA;
6
+ --text-color: #333333;
7
+ --border-radius: 8px;
8
+ }
9
+
10
+ * {
11
+ margin: 0;
12
+ padding: 0;
13
+ box-sizing: border-box;
14
+ }
15
+
16
+ body {
17
+ font-family: 'Poppins', sans-serif;
18
+ background-color: var(--background-color);
19
+ color: var(--text-color);
20
+ line-height: 1.6;
21
+ }
22
+
23
+ #app {
24
+ min-height: 100vh;
25
+ display: flex;
26
+ flex-direction: column;
27
+ }
28
+
29
+ /* Header Styles */
30
+ header {
31
+ background-color: white;
32
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
33
+ padding: 1rem 2rem;
34
+ }
35
+
36
+ nav {
37
+ display: flex;
38
+ justify-content: space-between;
39
+ align-items: center;
40
+ max-width: 1200px;
41
+ margin: 0 auto;
42
+ }
43
+
44
+ .logo {
45
+ font-size: 1.5rem;
46
+ font-weight: 700;
47
+ color: var(--primary-color);
48
+ }
49
+
50
+ .cta-button {
51
+ background-color: var(--primary-color);
52
+ color: white;
53
+ padding: 0.5rem 1.5rem;
54
+ border-radius: var(--border-radius);
55
+ text-decoration: none;
56
+ transition: background-color 0.3s ease;
57
+ }
58
+
59
+ .cta-button:hover {
60
+ background-color: #357ABD;
61
+ }
62
+
63
+ /* Hero Section */
64
+ .hero {
65
+ text-align: center;
66
+ padding: 4rem 2rem;
67
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
68
+ color: white;
69
+ }
70
+
71
+ .hero h1 {
72
+ font-size: 2.5rem;
73
+ margin-bottom: 1rem;
74
+ }
75
+
76
+ .highlight {
77
+ color: #FFD700;
78
+ }
79
+
80
+ .subtitle {
81
+ font-size: 1.2rem;
82
+ opacity: 0.9;
83
+ }
84
+
85
+ /* TTS Demo Section */
86
+ .tts-demo {
87
+ padding: 3rem 2rem;
88
+ }
89
+
90
+ .container {
91
+ max-width: 800px;
92
+ margin: 0 auto;
93
+ background: white;
94
+ padding: 2rem;
95
+ border-radius: var(--border-radius);
96
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
97
+ }
98
+
99
+ .input-section {
100
+ margin-bottom: 1.5rem;
101
+ }
102
+
103
+ textarea {
104
+ width: 100%;
105
+ height: 150px;
106
+ padding: 1rem;
107
+ border: 2px solid #E0E0E0;
108
+ border-radius: var(--border-radius);
109
+ resize: vertical;
110
+ font-family: inherit;
111
+ font-size: 1rem;
112
+ transition: border-color 0.3s ease;
113
+ }
114
+
115
+ textarea:focus {
116
+ outline: none;
117
+ border-color: var(--primary-color);
118
+ }
119
+
120
+ .char-count {
121
+ text-align: right;
122
+ color: #666;
123
+ font-size: 0.9rem;
124
+ margin-top: 0.5rem;
125
+ }
126
+
127
+ .controls {
128
+ display: flex;
129
+ flex-direction: column;
130
+ gap: 1rem;
131
+ }
132
+
133
+ .voice-settings {
134
+ display: flex;
135
+ gap: 1rem;
136
+ }
137
+
138
+ select {
139
+ padding: 0.5rem;
140
+ border: 2px solid #E0E0E0;
141
+ border-radius: var(--border-radius);
142
+ font-family: inherit;
143
+ flex: 1;
144
+ }
145
+
146
+ button {
147
+ background-color: var(--primary-color);
148
+ color: white;
149
+ padding: 1rem;
150
+ border: none;
151
+ border-radius: var(--border-radius);
152
+ cursor: pointer;
153
+ font-size: 1rem;
154
+ font-weight: 500;
155
+ transition: background-color 0.3s ease;
156
+ }
157
+
158
+ button:hover:not(:disabled) {
159
+ background-color: #357ABD;
160
+ }
161
+
162
+ button:disabled {
163
+ background-color: #CCCCCC;
164
+ cursor: not-allowed;
165
+ }
166
+
167
+ button.processing {
168
+ position: relative;
169
+ overflow: hidden;
170
+ }
171
+
172
+ button.processing::after {
173
+ content: '';
174
+ position: absolute;
175
+ top: 0;
176
+ left: -100%;
177
+ width: 100%;
178
+ height: 100%;
179
+ background: linear-gradient(
180
+ 90deg,
181
+ transparent,
182
+ rgba(255, 255, 255, 0.2),
183
+ transparent
184
+ );
185
+ animation: loading 1.5s infinite;
186
+ }
187
+
188
+ /* Features Section */
189
+ .features {
190
+ padding: 4rem 2rem;
191
+ background-color: white;
192
+ }
193
+
194
+ .features h2 {
195
+ text-align: center;
196
+ margin-bottom: 3rem;
197
+ color: var(--secondary-color);
198
+ }
199
+
200
+ .feature-grid {
201
+ display: grid;
202
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
203
+ gap: 2rem;
204
+ max-width: 1200px;
205
+ margin: 0 auto;
206
+ }
207
+
208
+ .feature-card {
209
+ text-align: center;
210
+ padding: 2rem;
211
+ background-color: white;
212
+ border-radius: var(--border-radius);
213
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
214
+ transition: transform 0.3s ease;
215
+ }
216
+
217
+ .feature-card:hover {
218
+ transform: translateY(-5px);
219
+ }
220
+
221
+ .icon {
222
+ font-size: 2.5rem;
223
+ margin-bottom: 1rem;
224
+ }
225
+
226
+ .feature-card h3 {
227
+ color: var(--secondary-color);
228
+ margin-bottom: 0.5rem;
229
+ }
230
+
231
+ /* Footer */
232
+ footer {
233
+ background-color: var(--secondary-color);
234
+ color: white;
235
+ padding: 2rem;
236
+ margin-top: auto;
237
+ }
238
+
239
+ .footer-content {
240
+ max-width: 1200px;
241
+ margin: 0 auto;
242
+ display: flex;
243
+ justify-content: space-between;
244
+ align-items: center;
245
+ }
246
+
247
+ .footer-link {
248
+ color: white;
249
+ text-decoration: none;
250
+ opacity: 0.8;
251
+ transition: opacity 0.3s ease;
252
+ }
253
+
254
+ .footer-link:hover {
255
+ opacity: 1;
256
+ }
257
+
258
+ /* Animations */
259
+ @keyframes loading {
260
+ 0% {
261
+ left: -100%;
262
+ }
263
+ 100% {
264
+ left: 100%;
265
+ }
266
+ }
267
+
268
+ /* Responsive Design */
269
+ @media (max-width: 768px) {
270
+ .hero h1 {
271
+ font-size: 2rem;
272
+ }
273
+
274
+ .voice-settings {
275
+ flex-direction: column;
276
+ }
277
+
278
+ .footer-content {
279
+ flex-direction: column;
280
+ text-align: center;
281
+ gap: 1rem;
282
+ }
283
+ }