Hugging Face's logo

Spaces:
Niansuh
/
elve
Running

App Files Community
Niansuh commited on
Commit
6bd1186
·
verified ·
1 Parent(s): 8662041

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +120 -13
templates/index.html CHANGED
@@ -1,21 +1,128 @@
1
  <!DOCTYPE html>
2
- <html>
3
  <head>
4
- <title>Text to Speech</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5
  </head>
6
  <body>
7
- <h1>Text to Speech Converter</h1>
8
- <form method="post">
9
- <textarea name="text" rows="5" cols="50" placeholder="Enter text here"></textarea><br>
10
- <select name="voice">
 
 
 
 
 
 
 
 
 
 
 
11
  {% for voice in voices %}
12
- <option value="{{ voice }}">{{ voice }}</option>
 
 
 
 
 
 
 
 
 
 
 
13
  {% endfor %}
14
- </select><br>
15
- <input type="submit" value="Generate Audio">
16
- </form>
17
- {% if error %}
18
- <p style="color: red;">Error: {{ error }}</p>
19
- {% endif %}
20
  </body>
21
  </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>Text to Speech Converter</title>
7
+ <style>
8
+ body {
9
+ font-family: 'Arial', sans-serif;
10
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
11
+ margin: 0;
12
+ padding: 20px;
13
+ min-height: 100vh;
14
+ }
15
+ .container {
16
+ max-width: 800px;
17
+ margin: 0 auto;
18
+ background: white;
19
+ padding: 30px;
20
+ border-radius: 15px;
21
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
22
+ }
23
+ h1 {
24
+ color: #333;
25
+ text-align: center;
26
+ margin-bottom: 30px;
27
+ }
28
+ .form-group {
29
+ margin-bottom: 20px;
30
+ }
31
+ textarea {
32
+ width: 100%;
33
+ padding: 15px;
34
+ border: 2px solid #ddd;
35
+ border-radius: 8px;
36
+ resize: vertical;
37
+ font-size: 16px;
38
+ }
39
+ select {
40
+ width: 100%;
41
+ padding: 12px;
42
+ border: 2px solid #ddd;
43
+ border-radius: 8px;
44
+ font-size: 16px;
45
+ margin-top: 10px;
46
+ }
47
+ button {
48
+ background: #4CAF50;
49
+ color: white;
50
+ padding: 12px 24px;
51
+ border: none;
52
+ border-radius: 8px;
53
+ cursor: pointer;
54
+ font-size: 16px;
55
+ transition: background 0.3s;
56
+ }
57
+ button:hover {
58
+ background: #45a049;
59
+ }
60
+ .voice-grid {
61
+ display: grid;
62
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
63
+ gap: 20px;
64
+ margin-top: 30px;
65
+ }
66
+ .voice-card {
67
+ background: #f9f9f9;
68
+ padding: 15px;
69
+ border-radius: 10px;
70
+ text-align: center;
71
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
72
+ }
73
+ .voice-card audio {
74
+ width: 100%;
75
+ margin-top: 10px;
76
+ }
77
+ .voice-card button {
78
+ margin-top: 10px;
79
+ background: #2196F3;
80
+ }
81
+ .voice-card button:hover {
82
+ background: #1976D2;
83
+ }
84
+ .error {
85
+ color: #d32f2f;
86
+ text-align: center;
87
+ margin-top: 20px;
88
+ }
89
+ </style>
90
  </head>
91
  <body>
92
+ <div class="container">
93
+ <h1>Text to Speech Converter</h1>
94
+ <form method="post">
95
+ <div class="form-group">
96
+ <textarea name="text" rows="5" placeholder="Enter your text here..."></textarea>
97
+ <select name="voice">
98
+ {% for voice in voices %}
99
+ <option value="{{ voice }}">{{ voice }}</option>
100
+ {% endfor %}
101
+ </select>
102
+ </div>
103
+ <button type="submit" name="generate">Generate & Download</button>
104
+ </form>
105
+
106
+ <div class="voice-grid">
107
  {% for voice in voices %}
108
+ <div class="voice-card">
109
+ <h3>{{ voice }}</h3>
110
+ <audio controls>
111
+ <source src="{{ url_for('preview', voice=voice) }}" type="audio/mpeg">
112
+ Your browser does not support the audio element.
113
+ </audio>
114
+ <form method="post" style="margin-top: 10px;">
115
+ <input type="hidden" name="text" value="Hello, this is a sample of my voice.">
116
+ <input type="hidden" name="voice" value="{{ voice }}">
117
+ <button type="submit" name="generate">Download Sample</button>
118
+ </form>
119
+ </div>
120
  {% endfor %}
121
+ </div>
122
+
123
+ {% if error %}
124
+ <p class="error">Error: {{ error }}</p>
125
+ {% endif %}
126
+ </div>
127
  </body>
128
  </html>