Hugging Face's logo

Spaces:
HirCoir
/
Piper-TTS-Spanish
Running

App Files Community
4
HirCoir commited on
Commit
b9d9359
•
1 Parent(s): 7912953

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +285 -0
index.html ADDED
@@ -0,0 +1,285 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Convertidor de Texto a Audio</title>
7
+ <style>
8
+ body {
9
+ background-color: #222;
10
+ color: #eee;
11
+ font-family: Arial, sans-serif;
12
+ text-align: center;
13
+ margin: 0;
14
+ padding: 0;
15
+ }
16
+ h1 {
17
+ margin-top: 50px;
18
+ }
19
+ form {
20
+ margin-top: 20px;
21
+ display: flex;
22
+ flex-direction: column;
23
+ align-items: center;
24
+ }
25
+ label, select, textarea, button {
26
+ margin: 5px;
27
+ font-size: 16px;
28
+ color: #eee;
29
+ }
30
+ textarea {
31
+ background-color: #333;
32
+ color: #eee;
33
+ border: 1px solid #666;
34
+ border-radius: 5px;
35
+ padding: 10px;
36
+ width: 80%;
37
+ height: 100px;
38
+ }
39
+ select {
40
+ background-color: #333;
41
+ color: #eee;
42
+ border: 1px solid #666;
43
+ border-radius: 5px;
44
+ padding: 5px;
45
+ width: 80%;
46
+ height: 30px;
47
+ }
48
+ button {
49
+ background-color: #007bff;
50
+ color: #eee;
51
+ border: none;
52
+ border-radius: 5px;
53
+ padding: 10px 20px;
54
+ cursor: pointer;
55
+ transition: background-color 0.3s ease;
56
+ }
57
+ button:hover {
58
+ background-color: #0056b3;
59
+ }
60
+ #audio-container {
61
+ margin-top: 20px;
62
+ }
63
+
64
+
65
+
66
+
67
+
68
+
69
+ .animated-button {
70
+ position: relative;
71
+ display: flex;
72
+ align-items: center;
73
+ gap: 4px;
74
+ padding: 16px 36px;
75
+ border: 4px solid;
76
+ border-color: transparent;
77
+ font-size: 16px;
78
+ background-color: inherit;
79
+ border-radius: 100px;
80
+ font-weight: 600;
81
+ color: greenyellow;
82
+ box-shadow: 0 0 0 2px greenyellow;
83
+ cursor: pointer;
84
+ overflow: hidden;
85
+ transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
86
+ }
87
+
88
+ .animated-button svg {
89
+ position: absolute;
90
+ width: 24px;
91
+ fill: greenyellow;
92
+ z-index: 9;
93
+ transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
94
+ }
95
+
96
+ .animated-button .arr-1 {
97
+ right: 16px;
98
+ }
99
+
100
+ .animated-button .arr-2 {
101
+ left: -25%;
102
+ }
103
+
104
+ .animated-button .circle {
105
+ position: absolute;
106
+ top: 50%;
107
+ left: 50%;
108
+ transform: translate(-50%, -50%);
109
+ width: 20px;
110
+ height: 20px;
111
+ background-color: rgb(208, 162, 246);
112
+ border-radius: 50%;
113
+ opacity: 0;
114
+ transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
115
+ }
116
+
117
+ .animated-button .text {
118
+ position: relative;
119
+ z-index: 1;
120
+ transform: translateX(-12px);
121
+ transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
122
+ }
123
+
124
+ .animated-button:hover {
125
+ box-shadow: 0 0 0 12px transparent;
126
+ color: #212121;
127
+ border-radius: 12px;
128
+ }
129
+
130
+ .animated-button:hover .arr-1 {
131
+ right: -25%;
132
+ }
133
+
134
+ .animated-button:hover .arr-2 {
135
+ left: 16px;
136
+ }
137
+
138
+ .animated-button:hover .text {
139
+ transform: translateX(12px);
140
+ }
141
+
142
+ .animated-button:hover svg {
143
+ fill: #212121;
144
+ }
145
+
146
+ .animated-button:active {
147
+ scale: 0.95;
148
+ box-shadow: 0 0 0 4px rgb(47, 196, 255);
149
+ }
150
+
151
+ .animated-button:hover .circle {
152
+ width: 220px;
153
+ height: 220px;
154
+ opacity: 1;
155
+ }
156
+ * {
157
+ outline:none;
158
+ border:none;
159
+ margin:0px;
160
+ padding:0px;
161
+ font-family:Courier, monospace;
162
+ }
163
+ body {
164
+ background:#333 url(https://static.tumblr.com/maopbtg/a5emgtoju/inflicted.png) repeat;
165
+ }
166
+ #paper {
167
+ color:#FFF;
168
+ font-size:20px;
169
+ }
170
+ #text {
171
+ width:500px;
172
+ overflow:hidden;
173
+ background-color:#FFF;
174
+ color:#222;
175
+ font-family:Courier, monospace;
176
+ font-weight:normal;
177
+ font-size:24px;
178
+ resize:none;
179
+ line-height:40px;
180
+ padding-left:100px;
181
+ padding-right:100px;
182
+ padding-top:45px;
183
+ padding-bottom:34px;
184
+ background-image:url(https://static.tumblr.com/maopbtg/E9Bmgtoht/lines.png), url(https://static.tumblr.com/maopbtg/nBUmgtogx/paper.png);
185
+ background-repeat:repeat-y, repeat;
186
+ -webkit-border-radius:12px;
187
+ border-radius:12px;
188
+ -webkit-box-shadow: 0px 2px 14px #000;
189
+ box-shadow: 0px 2px 14px #000;
190
+ border-top:1px solid #FFF;
191
+ border-bottom:1px solid #FFF;
192
+ }
193
+ #button {
194
+ cursor:pointer;
195
+ margin-top:20px;
196
+ float:right;
197
+ height:40px;
198
+ padding-left:24px;
199
+ padding-right:24px;
200
+ font-family:Arial, Helvetica, sans-serif;
201
+ font-weight:bold;
202
+ font-size:20px;
203
+ color:#FFF;
204
+ text-shadow: 0px -1px 0px #000000;
205
+ -webkit-border-radius:8px;
206
+ border-radius:8px;
207
+ border-top:1px solid #FFF;
208
+ -webkit-box-shadow: 0px 2px 14px #000;
209
+ box-shadow: 0px 2px 14px #000;
210
+ background-color: #62add6;
211
+ background-image:url(https://static.tumblr.com/maopbtg/ZHLmgtok7/button.png);
212
+ background-repeat:repeat-x;
213
+ }
214
+ #button:active {
215
+ zoom: 1;
216
+ filter: alpha(opacity=80);
217
+ opacity: 0.8;
218
+ }
219
+ #button:focus {
220
+ zoom: 1;
221
+ filter: alpha(opacity=80);
222
+ opacity: 0.8;
223
+ }
224
+ #wrapper {
225
+ width:700px;
226
+ height:auto;
227
+ margin-left:auto;
228
+ margin-right:auto;
229
+ margin-top:24px;
230
+ margin-bottom:100px;
231
+ }
232
+
233
+ </style>
234
+ </head>
235
+ <body>
236
+ <h1>Convertidor de Texto a Audio</h1>
237
+ <form action="/convert" method="post">
238
+ <label for="model">Selecciona el modelo ONNX:</label><br>
239
+ <select id="model" name="model">
240
+ {% for model in model_options %}
241
+ <option value="{{ model }}">{{ model }}</option>
242
+ {% endfor %}
243
+ </select><br>
244
+ <label for="text">Texto:</label><br>
245
+ <div id="wrapper">
246
+ <textarea placeholder="Enter something funny." id="text" name="text" rows="4"></textarea>
247
+ </div>
248
+ <button class="animated-button">
249
+ <svg viewBox="0 0 24 24" class="arr-2" xmlns="http://www.w3.org/2000/svg">
250
+ <path
251
+ d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z"
252
+ ></path>
253
+ </svg>
254
+ <span class="text">Generar audio</span>
255
+ <span class="circle"></span>
256
+ <svg viewBox="0 0 24 24" class="arr-1" xmlns="http://www.w3.org/2000/svg">
257
+ <path
258
+ d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z"
259
+ ></path>
260
+ </svg>
261
+ </button>
262
+
263
+ </form>
264
+ <div id="audio-container"></div>
265
+
266
+ <script>
267
+ document.querySelector('form').addEventListener('submit', async function (e) {
268
+ e.preventDefault();
269
+ const formData = new FormData(e.target);
270
+ const response = await fetch('/convert', {
271
+ method: 'POST',
272
+ body: formData
273
+ });
274
+ const data = await response.json();
275
+ const audioContent = data.audio_base64;
276
+ const audioElement = document.createElement('audio');
277
+ audioElement.src = 'data:audio/wav;base64,' + audioContent;
278
+ audioElement.controls = true;
279
+ audioElement.autoplay = true; // Autoreproducción del audio
280
+ document.getElementById('audio-container').innerHTML = '';
281
+ document.getElementById('audio-container').appendChild(audioElement);
282
+ });
283
+ </script>
284
+ </body>
285
+ </html>