Hugging Face's logo

Spaces:
SFalcon97
/
nebula-notes-2-0
Running

App Files Community
SFalcon97 commited on
Commit
e514e28
·
verified ·
1 Parent(s): 3b23d16

Toma de base este HTML y úsalo para crear un convertidor de SSML a texto plano y viceversa. Además, añade la opción de conversor de formato JSON y CSV con el mismo enfoque a texto plano. SI es neceario utilizar claves API de algún LLM, deja comentarios en el código como "INSERTA TU CLAVE API AQUÍ" para que la cambie después. - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +792 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Nebula Notes 2 0
3
- emoji: 📊
4
- colorFrom: purple
5
  colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: nebula-notes-2-0
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
  colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,792 @@
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="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Nébula Notes - Convertidor de Formatos</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <div id="hidden-copy" style="position: absolute; left: -9999px; opacity: 0;"></div>
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ nebula: {
16
+ primary: '#6d28d9',
17
+ secondary: '#8b5cf6',
18
+ dark: '#4c1d95',
19
+ light: '#a78bfa',
20
+ }
21
+ },
22
+ fontFamily: {
23
+ sans: ['Inter', 'sans-serif'],
24
+ },
25
+ boxShadow: {
26
+ '3d': '0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2)',
27
+ '3d-hover': '0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2)',
28
+ 'inner-3d': 'inset 0 4px 6px -1px rgba(0, 0, 0, 0.3), inset 0 2px 4px -2px rgba(0, 0, 0, 0.2)'
29
+ },
30
+ transformOrigin: {
31
+ '3d': '50% 50%'
32
+ },
33
+ perspective: {
34
+ '3d': '1000px'
35
+ }
36
+ }
37
+ }
38
+ }
39
+ </script>
40
+ <style>
41
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
42
+
43
+ body {
44
+ font-family: 'Inter', sans-serif;
45
+ background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 50%, #8b5cf6 100%);
46
+ min-height: 100vh;
47
+ background-attachment: fixed;
48
+ }
49
+
50
+ .markdown-preview {
51
+ transition: all 0.3s ease;
52
+ }
53
+
54
+ .markdown-preview h1 {
55
+ font-size: 1.8rem;
56
+ font-weight: bold;
57
+ margin: 1.5rem 0 1rem 0;
58
+ color: #ffffff;
59
+ border-bottom: 2px solid #4b5563;
60
+ padding-bottom: 0.5rem;
61
+ }
62
+
63
+ .markdown-preview h2 {
64
+ font-size: 1.5rem;
65
+ font-weight: bold;
66
+ margin: 1.3rem 0 0.8rem 0;
67
+ color: #d1d5db;
68
+ }
69
+
70
+ .markdown-preview h3 {
71
+ font-size: 1.25rem;
72
+ font-weight: bold;
73
+ margin: 1.1rem 0 0.6rem 0;
74
+ color: #d1d5db;
75
+ }
76
+
77
+ .markdown-preview p {
78
+ margin: 0.8rem 0;
79
+ line-height: 1.6;
80
+ color: #e5e7eb;
81
+ }
82
+
83
+ .markdown-preview ul, .markdown-preview ol {
84
+ margin: 0.8rem 0;
85
+ padding-left: 2rem;
86
+ }
87
+
88
+ .markdown-preview ul {
89
+ list-style-type: disc;
90
+ }
91
+
92
+ .markdown-preview ol {
93
+ list-style-type: decimal;
94
+ }
95
+
96
+ .markdown-preview li {
97
+ margin: 0.3rem 0;
98
+ }
99
+
100
+ .markdown-preview blockquote {
101
+ border-left: 4px solid #a78bfa;
102
+ padding-left: 1rem;
103
+ margin: 1rem 0;
104
+ color: #f3e8ff;
105
+ font-style: italic;
106
+ }
107
+
108
+ .markdown-preview code {
109
+ background-color: rgba(255, 255, 255, 0.1);
110
+ padding: 0.2rem 0.4rem;
111
+ border-radius: 0.25rem;
112
+ font-family: monospace;
113
+ color: #c4b5fd;
114
+ }
115
+
116
+ .markdown-preview pre {
117
+ background-color: #1e293b;
118
+ color: #f8fafc;
119
+ padding: 1rem;
120
+ border-radius: 0.5rem;
121
+ overflow-x: auto;
122
+ margin: 1rem 0;
123
+ }
124
+
125
+ .markdown-preview pre code {
126
+ background-color: transparent;
127
+ padding: 0;
128
+ color: inherit;
129
+ }
130
+
131
+ .markdown-preview a {
132
+ color: #e9d5ff;
133
+ text-decoration: underline;
134
+ }
135
+
136
+ .markdown-preview a:hover {
137
+ color: #ffffff;
138
+ }
139
+
140
+ .markdown-preview hr {
141
+ border: none;
142
+ border-top: 1px solid #e5e7eb;
143
+ margin: 1.5rem 0;
144
+ }
145
+
146
+ .markdown-preview strong {
147
+ font-weight: bold;
148
+ }
149
+
150
+ .markdown-preview em {
151
+ font-style: italic;
152
+ }
153
+
154
+ .card-3d {
155
+ transition: all 0.3s ease;
156
+ box-shadow: 0 0 10px rgba(139, 92, 246, 0.2);
157
+ }
158
+
159
+ .card-3d:hover {
160
+ box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
161
+ }
162
+
163
+ .btn-3d {
164
+ transition: all 0.3s ease;
165
+ transform-style: preserve-3d;
166
+ }
167
+
168
+ .btn-3d:hover {
169
+ transform: translateY(-2px);
170
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
171
+ }
172
+
173
+ .btn-3d:active {
174
+ transform: translateY(1px);
175
+ box-shadow: inset 0 4px 6px -1px rgba(0, 0, 0, 0.3), inset 0 2px 4px -2px rgba(0, 0, 0, 0.2);
176
+ }
177
+
178
+ .floating {
179
+ animation: floating 6s ease-in-out infinite;
180
+ }
181
+
182
+ @keyframes floating {
183
+ 0% { transform: translateY(0px) rotateX(0deg); }
184
+ 50% { transform: translateY(-10px) rotateX(5deg); }
185
+ 100% { transform: translateY(0px) rotateX(0deg); }
186
+ }
187
+
188
+ .bg-nebula {
189
+ background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%);
190
+ }
191
+
192
+ .text-nebula {
193
+ background: linear-gradient(135deg, #a78bfa 0%, #c4b5fd 100%);
194
+ -webkit-background-clip: text;
195
+ background-clip: text;
196
+ color: transparent;
197
+ text-shadow: 0 0 10px rgba(199, 210, 254, 0.5), 0 0 20px rgba(199, 210, 254, 0.3);
198
+ }
199
+
200
+ .glow {
201
+ box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
202
+ }
203
+
204
+ .glow:hover {
205
+ box-shadow: 0 0 25px rgba(139, 92, 246, 0.7);
206
+ }
207
+ </style>
208
+ </head>
209
+ <body class="py-8 px-4 sm:px-6 lg:px-8">
210
+ <div class="max-w-6xl mx-auto">
211
+ <!-- Header -->
212
+ <header class="text-center mb-12">
213
+ <div class="inline-block transform transition-all duration-500 hover:scale-105">
214
+ <h1 class="text-4xl sm:text-5xl font-bold mb-2 text-nebula floating glow">Nébula Notes</h1>
215
+ <div class="h-1 w-24 mx-auto bg-gradient-to-r from-purple-500 to-purple-300 rounded-full mb-4"></div>
216
+ </div>
217
+ <p class="text-lg text-purple-200 max-w-2xl mx-auto">Convierte entre múltiples formatos: Markdown, SSML, JSON, CSV y texto plano</p>
218
+
219
+ <!-- Navigation Tabs -->
220
+ <div class="flex justify-center space-x-4 mt-8">
221
+ <button id="tab-markdown" class="px-6 py-3 bg-purple-600 text-white rounded-lg font-medium transition-all hover:bg-purple-700 tab-btn active-tab">
222
+ Markdown
223
+ </button>
224
+ <button id="tab-ssml" class="px-6 py-3 bg-gray-700 text-white rounded-lg font-medium transition-all hover:bg-gray-600 tab-btn">
225
+ SSML
226
+ </button>
227
+ <button id="tab-json" class="px-6 py-3 bg-gray-700 text-white rounded-lg font-medium transition-all hover:bg-gray-600 tab-btn">
228
+ JSON
229
+ </button>
230
+ <button id="tab-csv" class="px-6 py-3 bg-gray-700 text-white rounded-lg font-medium transition-all hover:bg-gray-600 tab-btn">
231
+ CSV
232
+ </button>
233
+ </div>
234
+ </header>
235
+
236
+ <!-- Main Content -->
237
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
238
+ <!-- Markdown Input -->
239
+ <div id="markdown-section" class="card-3d bg-black rounded-xl p-6 shadow-3d glow tab-content">
240
+ <div class="flex items-center justify-between mb-4">
241
+ <h2 class="text-xl font-semibold text-white">
242
+ <i class="fas fa-code mr-2 text-purple-600"></i> Markdown
243
+ </h2>
244
+ <button id="clear-btn" class="btn-3d px-3 py-1 text-sm bg-purple-600 hover:bg-purple-700 text-white rounded-md transition-all glow">
245
+ <i class="fas fa-trash-alt mr-1"></i> Limpiar
246
+ </button>
247
+ </div>
248
+ <textarea id="markdown-input" class="w-full h-96 p-4 border border-gray-700 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none bg-gray-900 text-white" placeholder="Escribe tu Markdown aquí...">## **Esto es una Prueba**
249
+ **_Copia y Pega en un segundo_**</textarea>
250
+ </div>
251
+
252
+ <!-- HTML Output -->
253
+ <div id="markdown-output" class="card-3d bg-black rounded-xl p-6 shadow-3d tab-content">
254
+ <div class="flex items-center justify-between mb-4">
255
+ <h2 class="text-xl font-semibold text-white">
256
+ <i class="fas fa-eye mr-2 text-purple-600"></i> Vista Previa
257
+ </h2>
258
+ <button id="copy-btn" class="btn-3d px-3 py-1 text-sm bg-purple-600 hover:bg-purple-700 text-white rounded-md transition-all glow">
259
+ <i class="fas fa-copy mr-1"></i> Copiar
260
+ </button>
261
+ </div>
262
+ <div id="html-output" class="markdown-preview w-full h-96 p-4 border border-gray-700 rounded-lg overflow-y-auto bg-gray-900 text-white"></div>
263
+ </div>
264
+
265
+ <!-- SSML Section -->
266
+ <div id="ssml-section" class="card-3d bg-black rounded-xl p-6 shadow-3d glow tab-content hidden">
267
+ <div class="flex items-center justify-between mb-4">
268
+ <h2 class="text-xl font-semibold text-white">
269
+ <i class="fas fa-volume-up mr-2 text-purple-600"></i> SSML
270
+ </h2>
271
+ <button id="ssml-clear-btn" class="btn-3d px-3 py-1 text-sm bg-purple-600 hover:bg-purple-700 text-white rounded-md transition-all glow">
272
+ <i class="fas fa-trash-alt mr-1"></i> Limpiar
273
+ </button>
274
+ </div>
275
+ <textarea id="ssml-input" class="w-full h-96 p-4 border border-gray-700 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none bg-gray-900 text-white" placeholder="Escribe tu SSML aquí..."><speak>
276
+ Esto es un ejemplo de texto con SSML.
277
+ <emphasis level="strong">Texto importante</emphasis>.
278
+ <break time="500ms"/>
279
+ </speak></textarea>
280
+ </div>
281
+
282
+ <!-- SSML Output -->
283
+ <div id="ssml-output" class="card-3d bg-black rounded-xl p-6 shadow-3d tab-content hidden">
284
+ <div class="flex items-center justify-between mb-4">
285
+ <h2 class="text-xl font-semibold text-white">
286
+ <i class="fas fa-text-width mr-2 text-purple-600"></i> Texto Plano
287
+ </h2>
288
+ <button id="ssml-copy-btn" class="btn-3d px-3 py-1 text-sm bg-purple-600 hover:bg-purple-700 text-white rounded-md transition-all glow">
289
+ <i class="fas fa-copy mr-1"></i> Copiar
290
+ </button>
291
+ </div>
292
+ <textarea id="ssml-text-output" class="w-full h-96 p-4 border border-gray-700 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none bg-gray-900 text-white" placeholder="Texto convertido aparecerá aquí..." readonly></textarea>
293
+ <div class="mt-4">
294
+ <button id="convert-to-ssml" class="btn-3d px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-md transition-all glow w-full">
295
+ <i class="fas fa-exchange-alt mr-2"></i> Convertir Texto a SSML
296
+ </button>
297
+ </div>
298
+ </div>
299
+
300
+ <!-- JSON Section -->
301
+ <div id="json-section" class="card-3d bg-black rounded-xl p-6 shadow-3d glow tab-content hidden">
302
+ <div class="flex items-center justify-between mb-4">
303
+ <h2 class="text-xl font-semibold text-white">
304
+ <i class="fas fa-brackets-curly mr-2 text-purple-600"></i> JSON
305
+ </h2>
306
+ <button id="json-clear-btn" class="btn-3d px-3 py-1 text-sm bg-purple-600 hover:bg-purple-700 text-white rounded-md transition-all glow">
307
+ <i class="fas fa-trash-alt mr-1"></i> Limpiar
308
+ </button>
309
+ </div>
310
+ <textarea id="json-input" class="w-full h-96 p-4 border border-gray-700 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none bg-gray-900 text-white" placeholder="Escribe tu JSON aquí...">{
311
+ "nombre": "Ejemplo",
312
+ "edad": 25,
313
+ "ciudad": "Madrid"
314
+ }</textarea>
315
+ </div>
316
+
317
+ <!-- JSON Output -->
318
+ <div id="json-output" class="card-3d bg-black rounded-xl p-6 shadow-3d tab-content hidden">
319
+ <div class="flex items-center justify-between mb-4">
320
+ <h2 class="text-xl font-semibold text-white">
321
+ <i class="fas fa-text-width mr-2 text-purple-600"></i> Texto Plano
322
+ </h2>
323
+ <button id="json-copy-btn" class="btn-3d px-3 py-1 text-sm bg-purple-600 hover:bg-purple-700 text-white rounded-md transition-all glow">
324
+ <i class="fas fa-copy mr-1"></i> Copiar
325
+ </button>
326
+ </div>
327
+ <textarea id="json-text-output" class="w-full h-96 p-4 border border-gray-700 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none bg-gray-900 text-white" placeholder="Texto convertido aparecerá aquí..." readonly></textarea>
328
+ <div class="mt-4">
329
+ <button id="convert-to-json" class="btn-3d px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-md transition-all glow w-full">
330
+ <i class="fas fa-exchange-alt mr-2"></i> Convertir Texto a JSON
331
+ </button>
332
+ </div>
333
+ </div>
334
+
335
+ <!-- CSV Section -->
336
+ <div id="csv-section" class="card-3d bg-black rounded-xl p-6 shadow-3d glow tab-content hidden">
337
+ <div class="flex items-center justify-between mb-4">
338
+ <h2 class="text-xl font-semibold text-white">
339
+ <i class="fas fa-table mr-2 text-purple-600"></i> CSV
340
+ </h2>
341
+ <button id="csv-clear-btn" class="btn-3d px-3 py-1 text-sm bg-purple-600 hover:bg-purple-700 text-white rounded-md transition-all glow">
342
+ <i class="fas fa-trash-alt mr-1"></i> Limpiar
343
+ </button>
344
+ </div>
345
+ <textarea id="csv-input" class="w-full h-96 p-4 border border-gray-700 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none bg-gray-900 text-white" placeholder="Escribe tu CSV aquí...">nombre,edad,ciudad
346
+ Juan,25,Madrid
347
+ María,30,Barcelona
348
+ Carlos,22,Valencia</textarea>
349
+ </div>
350
+
351
+ <!-- CSV Output -->
352
+ <div id="csv-output" class="card-3d bg-black rounded-xl p-6 shadow-3d tab-content hidden">
353
+ <div class="flex items-center justify-between mb-4">
354
+ <h2 class="text-xl font-semibold text-white">
355
+ <i class="fas fa-text-width mr-2 text-purple-600"></i> Texto Plano
356
+ </h2>
357
+ <button id="csv-copy-btn" class="btn-3d px-3 py-1 text-sm bg-purple-600 hover:bg-purple-700 text-white rounded-md transition-all glow">
358
+ <i class="fas fa-copy mr-1"></i> Copiar
359
+ </button>
360
+ </div>
361
+ <textarea id="csv-text-output" class="w-full h-96 p-4 border border-gray-700 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none bg-gray-900 text-white" placeholder="Texto convertido aparecerá aquí..." readonly></textarea>
362
+ <div class="mt-4">
363
+ <button id="convert-to-csv" class="btn-3d px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-md transition-all glow w-full">
364
+ <i class="fas fa-exchange-alt mr-2"></i> Convertir Texto a CSV
365
+ </button>
366
+ </div>
367
+ </div>
368
+ </div>
369
+
370
+ <!-- Quick Reference -->
371
+ <div class="card-3d bg-black rounded-xl p-6 mb-12">
372
+ <h2 class="text-xl font-semibold text-white mb-4">
373
+ <i class="fas fa-lightbulb mr-2 text-purple-600"></i> Referencias Rápidas
374
+ </h2>
375
+
376
+ <!-- Markdown Reference -->
377
+ <div id="markdown-ref" class="reference-section">
378
+ <h3 class="font-medium text-white mb-3 text-lg">Markdown</h3>
379
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
380
+ <div class="bg-gray-900 p-4 rounded-lg">
381
+ <h4 class="font-medium text-white mb-2">Encabezados</h4>
382
+ <pre class="text-sm bg-gray-800 p-2 rounded text-white"># H1
383
+ ## H2
384
+ ### H3</pre>
385
+ </div>
386
+ <div class="bg-gray-900 p-4 rounded-lg">
387
+ <h4 class="font-medium text-white mb-2">Énfasis</h4>
388
+ <pre class="text-sm bg-gray-800 p-2 rounded text-white">*cursiva*
389
+ **negrita**
390
+ ~~tachado~~</pre>
391
+ </div>
392
+ <div class="bg-gray-900 p-4 rounded-lg">
393
+ <h4 class="font-medium text-white mb-2">Listas</h4>
394
+ <pre class="text-sm bg-gray-800 p-2 rounded text-white">- Item 1
395
+ - Item 2
396
+ - Subitem</pre>
397
+ </div>
398
+ <div class="bg-gray-900 p-4 rounded-lg">
399
+ <h4 class="font-medium text-white mb-2">Código</h4>
400
+ <pre class="text-sm bg-gray-800 p-2 rounded text-white">`código en línea`
401
+ ```javascript
402
+ bloque de código
403
+ ```</pre>
404
+ </div>
405
+ </div>
406
+ </div>
407
+
408
+ <!-- SSML Reference -->
409
+ <div id="ssml-ref" class="reference-section hidden">
410
+ <h3 class="font-medium text-white mb-3 text-lg">SSML</h3>
411
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
412
+ <div class="bg-gray-900 p-4 rounded-lg">
413
+ <h4 class="font-medium text-white mb-2">Elementos Básicos</h4>
414
+ <pre class="text-sm bg-gray-800 p-2 rounded text-white"><speak>texto</speak>
415
+ <emphasis level="strong">
416
+ <break time="500ms"></pre>
417
+ </div>
418
+ <div class="bg-gray-900 p-4 rounded-lg">
419
+ <h4 class="font-medium text-white mb-2">Prosodia</h4>
420
+ <pre class="text-sm bg-gray-800 p-2 rounded text-white"><prosody rate="fast">
421
+ <prosody pitch="high">
422
+ <prosody volume="loud"></pre>
423
+ </div>
424
+ <div class="bg-gray-900 p-4 rounded-lg">
425
+ <h4 class="font-medium text-white mb-2">Fonética</h4>
426
+ <pre class="text-sm bg-gray-800 p-2 rounded text-white"><phoneme alphabet="ipa">
427
+ <say-as interpret-as="spell-out">
428
+ <sub alias="alias"></pre>
429
+ </div>
430
+ </div>
431
+ </div>
432
+
433
+ <!-- JSON Reference -->
434
+ <div id="json-ref" class="reference-section hidden">
435
+ <h3 class="font-medium text-white mb-3 text-lg">JSON</h3>
436
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
437
+ <div class="bg-gray-900 p-4 rounded-lg">
438
+ <h4 class="font-medium text-white mb-2">Estructura Básica</h4>
439
+ <pre class="text-sm bg-gray-800 p-2 rounded text-white">{
440
+ "clave": "valor",
441
+ "numero": 123,
442
+ "booleano": true
443
+ }</pre>
444
+ </div>
445
+ <div class="bg-gray-900 p-4 rounded-lg">
446
+ <h4 class="font-medium text-white mb-2">Arrays</h4>
447
+ <pre class="text-sm bg-gray-800 p-2 rounded text-white">{
448
+ "array": [
449
+ "item1",
450
+ "item2"
451
+ ]
452
+ }</pre>
453
+ </div>
454
+ <div class="bg-gray-900 p-4 rounded-lg">
455
+ <h4 class="font-medium text-white mb-2">Objetos Anidados</h4>
456
+ <pre class="text-sm bg-gray-800 p-2 rounded text-white">{
457
+ "persona": {
458
+ "nombre": "Juan",
459
+ "edad": 25
460
+ }
461
+ }</pre>
462
+ </div>
463
+ </div>
464
+ </div>
465
+
466
+ <!-- CSV Reference -->
467
+ <div id="csv-ref" class="reference-section hidden">
468
+ <h3 class="font-medium text-white mb-3 text-lg">CSV</h3>
469
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
470
+ <div class="bg-gray-900 p-4 rounded-lg">
471
+ <h4 class="font-medium text-white mb-2">Estructura Básica</h4>
472
+ <pre class="text-sm bg-gray-800 p-2 rounded text-white">nombre,edad,ciudad
473
+ Juan,25,Madrid
474
+ María,30,Barcelona</pre>
475
+ </div>
476
+ <div class="bg-gray-900 p-4 rounded-lg">
477
+ <h4 class="font-medium text-white mb-2">Valores con Comas</h4>
478
+ <pre class="text-sm bg-gray-800 p-2 rounded text-white">nombre,descripcion
479
+ Juan,"Valor con, comas"</pre>
480
+ </div>
481
+ <div class="bg-gray-900 p-4 rounded-lg">
482
+ <h4 class="font-medium text-white mb-2">Valores con Comillas</h4>
483
+ <pre class="text-sm bg-gray-800 p-2 rounded text-white">nombre,mensaje
484
+ Juan,"Dijo ""hola"""</pre>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </div>
489
+
490
+ <!-- Footer -->
491
+ <footer class="text-center text-gray-500 text-sm">
492
+ <p>© 2023 Nébula Notes - Transforma tus ideas en texto enriquecido</p>
493
+ <div class="flex justify-center space-x-4 mt-2">
494
+ <a href="#" class="text-purple-600 hover:text-purple-800"><i class="fab fa-github"></i></a>
495
+ <a href="#" class="text-purple-600 hover:text-purple-800"><i class="fab fa-twitter"></i></a>
496
+ <a href="#" class="text-purple-600 hover:text-purple-800"><i class="fab fa-discord"></i></a>
497
+ </div>
498
+ </footer>
499
+ </div>
500
+
501
+ <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
502
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
503
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css">
504
+ <script>
505
+ document.addEventListener('DOMContentLoaded', function() {
506
+ // Elements
507
+ const markdownInput = document.getElementById('markdown-input');
508
+ const htmlOutput = document.getElementById('html-output');
509
+ const copyBtn = document.getElementById('copy-btn');
510
+ const clearBtn = document.getElementById('clear-btn');
511
+
512
+ // SSML Elements
513
+ const ssmlInput = document.getElementById('ssml-input');
514
+ const ssmlTextOutput = document.getElementById('ssml-text-output');
515
+ const ssmlCopyBtn = document.getElementById('ssml-copy-btn');
516
+ const ssmlClearBtn = document.getElementById('ssml-clear-btn');
517
+ const convertToSsmlBtn = document.getElementById('convert-to-ssml');
518
+
519
+ // JSON Elements
520
+ const jsonInput = document.getElementById('json-input');
521
+ const jsonTextOutput = document.getElementById('json-text-output');
522
+ const jsonCopyBtn = document.getElementById('json-copy-btn');
523
+ const jsonClearBtn = document.getElementById('json-clear-btn');
524
+ const convertToJsonBtn = document.getElementById('convert-to-json');
525
+
526
+ // CSV Elements
527
+ const csvInput = document.getElementById('csv-input');
528
+ const csvTextOutput = document.getElementById('csv-text-output');
529
+ const csvCopyBtn = document.getElementById('csv-copy-btn');
530
+ const csvClearBtn = document.getElementById('csv-clear-btn');
531
+ const convertToCsvBtn = document.getElementById('convert-to-csv');
532
+
533
+ // Tab Elements
534
+ const tabBtns = document.querySelectorAll('.tab-btn');
535
+ const tabContents = document.querySelectorAll('.tab-content');
536
+ const referenceSections = document.querySelectorAll('.reference-section');
537
+
538
+ // Configuración de marked
539
+ marked.setOptions({
540
+ breaks: true,
541
+ gfm: true,
542
+ pedantic: false,
543
+ sanitize: false,
544
+ smartLists: true,
545
+ smartypants: false,
546
+ highlight: function(code, lang) {
547
+ const language = hljs.getLanguage(lang) ? lang : 'plaintext';
548
+ return hljs.highlight(code, { language }).value;
549
+ }
550
+ });
551
+
552
+ // Tab Navigation
553
+ tabBtns.forEach(btn => {
554
+ btn.addEventListener('click', function() {
555
+ const tabId = this.id.replace('tab-', '');
556
+
557
+ // Update active tab
558
+ tabBtns.forEach(b => b.classList.remove('active-tab', 'bg-purple-600'));
559
+ tabBtns.forEach(b => b.classList.add('bg-gray-700'));
560
+ this.classList.add('active-tab', 'bg-purple-600');
561
+ this.classList.remove('bg-gray-700');
562
+
563
+ // Show/hide content
564
+ tabContents.forEach(content => content.classList.add('hidden'));
565
+ document.getElementById(`${tabId}-section`).classList.remove('hidden');
566
+ document.getElementById(`${tabId}-output`).classList.remove('hidden');
567
+
568
+ // Show/hide references
569
+ referenceSections.forEach(ref => ref.classList.add('hidden'));
570
+ document.getElementById(`${tabId}-ref`).classList.remove('hidden');
571
+
572
+ // Auto-convert when switching tabs
573
+ if (tabId === 'ssml') {
574
+ convertSsmlToText();
575
+ } else if (tabId === 'json') {
576
+ convertJsonToText();
577
+ } else if (tabId === 'csv') {
578
+ convertCsvToText();
579
+ } else if (tabId === 'markdown') {
580
+ renderMarkdown();
581
+ }
582
+ });
583
+ });
584
+
585
+ // Función para renderizar Markdown
586
+ function renderMarkdown() {
587
+ const markdownText = markdownInput.value;
588
+ htmlOutput.innerHTML = marked.parse(markdownText);
589
+
590
+ // Agregar resaltado de sintaxis a los bloques de código
591
+ document.querySelectorAll('pre code').forEach((block) => {
592
+ hljs.highlightElement(block);
593
+ });
594
+ }
595
+
596
+ // Función para convertir SSML a texto plano
597
+ function convertSsmlToText() {
598
+ const ssmlText = ssmlInput.value;
599
+ // Simple SSML to text conversion (remove XML tags)
600
+ const plainText = ssmlText
601
+ .replace(/<speak>|<\/speak>/gi, '')
602
+ .replace(/<[^>]*>/g, '')
603
+ .replace(/\s+/g, ' ')
604
+ .trim();
605
+ ssmlTextOutput.value = plainText;
606
+ }
607
+
608
+ // Función para convertir texto plano a SSML
609
+ function convertTextToSsml() {
610
+ const plainText = ssmlTextOutput.value;
611
+ // Simple text to SSML conversion
612
+ const ssmlText = `<speak>\n ${plainText.replace(/\n/g, '\n ')}\n</speak>`;
613
+ ssmlInput.value = ssmlText;
614
+ }
615
+
616
+ // Función para convertir JSON a texto plano
617
+ function convertJsonToText() {
618
+ const jsonText = jsonInput.value;
619
+ try {
620
+ const jsonObj = JSON.parse(jsonText);
621
+ // Convert JSON object to readable text
622
+ let plainText = '';
623
+ for (const [key, value] of Object.entries(jsonObj)) {
624
+ plainText += `${key}: ${value}\n`;
625
+ }
626
+ jsonTextOutput.value = plainText.trim();
627
+ } catch (error) {
628
+ jsonTextOutput.value = 'Error: JSON inválido. Por favor, verifica el formato.';
629
+ }
630
+ }
631
+
632
+ // Función para convertir texto plano a JSON
633
+ function convertTextToJson() {
634
+ const plainText = jsonTextOutput.value;
635
+ try {
636
+ // Simple text to JSON conversion (key: value format)
637
+ const lines = plainText.split('\n');
638
+ const jsonObj = {};
639
+ lines.forEach(line => {
640
+ const [key, ...valueParts] = line.split(':');
641
+ if (key && valueParts.length > 0) {
642
+ const value = valueParts.join(':').trim();
643
+ jsonObj[key.trim()] = isNaN(value) ? value : Number(value);
644
+ }
645
+ });
646
+ jsonInput.value = JSON.stringify(jsonObj, null, 2);
647
+ } catch (error) {
648
+ alert('Error al convertir texto a JSON. Asegúrate de usar el formato "clave: valor".');
649
+ }
650
+ }
651
+
652
+ // Función para convertir CSV a texto plano
653
+ function convertCsvToText() {
654
+ const csvText = csvInput.value;
655
+ const lines = csvText.split('\n');
656
+ let plainText = '';
657
+
658
+ if (lines.length > 0) {
659
+ const headers = lines[0].split(',');
660
+ for (let i = 1; i < lines.length; i++) {
661
+ if (lines[i].trim()) {
662
+ const values = lines[i].split(',');
663
+ headers.forEach((header, index) => {
664
+ if (values[index]) {
665
+ plainText += `${header.trim()}: ${values[index].trim()}\n`;
666
+ }
667
+ });
668
+ plainText += '\n';
669
+ }
670
+ }
671
+ }
672
+ csvTextOutput.value = plainText.trim();
673
+ }
674
+
675
+ // Función para convertir texto plano a CSV
676
+ function convertTextToCsv() {
677
+ const plainText = csvTextOutput.value;
678
+ // Simple text to CSV conversion (assumes key: value format)
679
+ const sections = plainText.split('\n\n');
680
+ let csvLines = [];
681
+ let headers = new Set();
682
+
683
+ sections.forEach(section => {
684
+ const lines = section.split('\n');
685
+ const row = {};
686
+ lines.forEach(line => {
687
+ const [key, ...valueParts] = line.split(':');
688
+ if (key && valueParts.length > 0) {
689
+ const value = valueParts.join(':').trim();
690
+ row[key.trim()] = value;
691
+ headers.add(key.trim());
692
+ }
693
+ });
694
+ if (Object.keys(row).length > 0) {
695
+ csvLines.push(row);
696
+ }
697
+ });
698
+
699
+ if (csvLines.length > 0) {
700
+ const headerArray = Array.from(headers);
701
+ let csvText = headerArray.join(',') + '\n';
702
+ csvLines.forEach(row => {
703
+ const line = headerArray.map(header => row[header] || '').join(',');
704
+ csvText += line + '\n';
705
+ });
706
+ csvInput.value = csvText;
707
+ }
708
+ }
709
+
710
+ // Event Listeners
711
+ markdownInput.addEventListener('input', renderMarkdown);
712
+ ssmlInput.addEventListener('input', convertSsmlToText);
713
+ jsonInput.addEventListener('input', convertJsonToText);
714
+ csvInput.addEventListener('input', convertCsvToText);
715
+
716
+ convertToSsmlBtn.addEventListener('click', convertTextToSsml);
717
+ convertToJsonBtn.addEventListener('click', convertTextToJson);
718
+ convertToCsvBtn.addEventListener('click', convertTextToCsv);
719
+
720
+ // Copy functions
721
+ function setupCopyButton(button, textArea, originalText) {
722
+ button.addEventListener('click', function() {
723
+ textArea.select();
724
+ try {
725
+ navigator.clipboard.writeText(textArea.value).then(() => {
726
+ button.innerHTML = '<i class="fas fa-check mr-1"></i> ¡Copiado!';
727
+ button.classList.remove('bg-purple-600', 'hover:bg-purple-700');
728
+ button.classList.add('bg-green-500', 'hover:bg-green-600');
729
+
730
+ setTimeout(() => {
731
+ button.innerHTML = originalText;
732
+ button.classList.remove('bg-green-500', 'hover:bg-green-600');
733
+ button.classList.add('bg-purple-600', 'hover:bg-purple-700');
734
+ }, 2000);
735
+ });
736
+ } catch (err) {
737
+ alert('Error al copiar el contenido');
738
+ }
739
+ });
740
+ }
741
+
742
+ // Clear functions
743
+ function setupClearButton(button, textArea, originalText) {
744
+ button.addEventListener('click', function() {
745
+ if (confirm('¿Estás seguro de que quieres limpiar?')) {
746
+ textArea.value = '';
747
+ button.innerHTML = '<i class="fas fa-check mr-1"></i> ¡Limpiado!';
748
+ button.classList.remove('bg-purple-600', 'hover:bg-purple-700');
749
+ button.classList.add('bg-green-500', 'hover:bg-green-600');
750
+
751
+ setTimeout(() => {
752
+ button.innerHTML = originalText;
753
+ button.classList.remove('bg-green-500', 'hover:bg-green-600');
754
+ button.classList.add('bg-purple-600', 'hover:bg-purple-700');
755
+ }, 2000);
756
+ }
757
+ });
758
+ }
759
+
760
+ // Setup copy and clear buttons
761
+ setupCopyButton(copyBtn, htmlOutput, '<i class="fas fa-copy mr-1"></i> Copiar');
762
+ setupClearButton(clearBtn, markdownInput, '<i class="fas fa-trash-alt mr-1"></i> Limpiar');
763
+
764
+ setupCopyButton(ssmlCopyBtn, ssmlTextOutput, '<i class="fas fa-copy mr-1"></i> Copiar');
765
+ setupClearButton(ssmlClearBtn, ssmlInput, '<i class="fas fa-trash-alt mr-1"></i> Limpiar');
766
+
767
+ setupCopyButton(jsonCopyBtn, jsonTextOutput, '<i class="fas fa-copy mr-1"></i> Copiar');
768
+ setupClearButton(jsonClearBtn, jsonInput, '<i class="fas fa-trash-alt mr-1"></i> Limpiar');
769
+
770
+ setupCopyButton(csvCopyBtn, csvTextOutput, '<i class="fas fa-copy mr-1"></i> Copiar');
771
+ setupClearButton(csvClearBtn, csvInput, '<i class="fas fa-trash-alt mr-1"></i> Limpiar');
772
+
773
+ // Renderizar al cargar la página
774
+ markdownInput.value = `## **Esto es una Prueba**
775
+ **_Copia y Pega en un segundo_**`;
776
+ setTimeout(renderMarkdown, 100);
777
+ convertSsmlToText();
778
+ convertJsonToText();
779
+ convertCsvToText();
780
+ });
781
+
782
+ // Polyfill para el resaltado de sintaxis si hljs no está disponible
783
+ if (typeof hljs === 'undefined') {
784
+ var hljs = {
785
+ getLanguage: () => false,
786
+ highlight: (code) => ({ value: code }),
787
+ highlightElement: () => {}
788
+ };
789
+ }
790
+ </script>
791
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=SFalcon97/n-bula-notes-md-rich-text" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
792
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ Toma de base este HTML y úsalo para crear un convertidor de SSML a texto plano y viceversa. Además, añade la opción de conversor de formato JSON y CSV con el mismo enfoque a texto plano. SI es neceario utilizar claves API de algún LLM, deja comentarios en el código como "INSERTA TU CLAVE API AQUÍ" para que la cambie después.
2
+ Toma de base este HTML y úsalo para crear un convertidor de SSML a texto plano y viceversa. Además, añade la opción de conversor de formato JSON y CSV con el mismo enfoque a texto plano. SI es neceario utilizar claves API de algún LLM, deja comentarios en el código como "INSERTA TU CLAVE API AQUÍ" para que la cambie después.