Hugging Face's logo

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

App Files Community
ChetanSaifsAi commited on
Commit
c3105ca
·
verified ·
1 Parent(s): 038580b

link update

Browse files
Files changed (1) hide show
  1. index.html +100 -100
index.html CHANGED
@@ -1,101 +1,101 @@
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>
 
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" target="_blank" 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" target="_blank" class="footer-link">Learn More</a>
96
+ </div>
97
+ </footer>
98
+ </div>
99
+ <script src="app.js"></script>
100
+ </body>
101
  </html>