Hugging Face's logo

Spaces:
Rubentnoda
/
anycoder-3afcd704
Running

App Files Community
Rubentnoda commited on
Commit
1c9a0fb
路
verified 路
1 Parent(s): 196f698

Upload index.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +302 -21
index.html CHANGED
@@ -1,29 +1,310 @@
1
  <!DOCTYPE html>
2
- <html lang="en">
3
 
4
  <head>
5
- <meta charset="UTF-8" />
6
- <link rel="stylesheet" href="style.css" />
7
-
8
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
- <title>Transformers.js - Object Detection</title>
 
10
  </head>
11
 
12
- <body>
13
- <h1>Object Detection w/ 馃 Transformers.js</h1>
14
- <label id="container" for="upload">
15
- <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
16
- <path fill="#000"
17
- d="M3.5 24.3a3 3 0 0 1-1.9-.8c-.5-.5-.8-1.2-.8-1.9V2.9c0-.7.3-1.3.8-1.9.6-.5 1.2-.7 2-.7h18.6c.7 0 1.3.2 1.9.7.5.6.7 1.2.7 2v18.6c0 .7-.2 1.4-.7 1.9a3 3 0 0 1-2 .8H3.6Zm0-2.7h18.7V2.9H3.5v18.7Zm2.7-2.7h13.3c.3 0 .5 0 .6-.3v-.7l-3.7-5a.6.6 0 0 0-.6-.2c-.2 0-.4 0-.5.3l-3.5 4.6-2.4-3.3a.6.6 0 0 0-.6-.3c-.2 0-.4.1-.5.3l-2.7 3.6c-.1.2-.2.4 0 .7.1.2.3.3.6.3Z">
18
- </path>
19
- </svg>
20
- Click to upload image
21
- <label id="example">(or try example)</label>
22
- </label>
23
- <label id="status">Loading model...</label>
24
- <input id="upload" type="file" accept="image/*" />
25
-
26
- <script src="index.js" type="module"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
27
  </body>
28
 
29
  </html>
 
1
  <!DOCTYPE html>
2
+ <html lang="es">
3
 
4
  <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Control Multimedia AI - Transformers.js</title>
8
+ <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
9
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
10
+ <link href="style.css" rel="stylesheet">
11
  </head>
12
 
13
+ <body class="bg-gray-50">
14
+ <!-- Header -->
15
+ <header class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white shadow-lg">
16
+ <div class="container mx-auto px-4 py-6">
17
+ <div class="flex items-center justify-between">
18
+ <div>
19
+ <h1 class="text-3xl font-bold flex items-center gap-3">
20
+ <i class="fas fa-tv"></i>
21
+ Control Multimedia AI
22
+ </h1>
23
+ <p class="mt-2 text-purple-100">Sistema inteligente con an谩lisis de contenido usando Transformers.js</p>
24
+ <div class="mt-3 flex gap-2">
25
+ <span class="bg-white/20 px-3 py-1 rounded-full text-sm">
26
+ <i class="fas fa-brain"></i> AI Powered
27
+ </span>
28
+ <span class="bg-white/20 px-3 py-1 rounded-full text-sm">
29
+ <i class="fas fa-microchip"></i> Transformers.js
30
+ </span>
31
+ <span class="bg-white/20 px-3 py-1 rounded-full text-sm">
32
+ <i class="fas fa-globe"></i> Browser Native
33
+ </span>
34
+ </div>
35
+ </div>
36
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
37
+ class="bg-white/10 hover:bg-white/20 px-4 py-2 rounded-lg transition-all duration-200 font-semibold">
38
+ Built with anycoder
39
+ </a>
40
+ </div>
41
+ </div>
42
+ </header>
43
+
44
+ <!-- Main Content -->
45
+ <main class="container mx-auto px-4 py-8">
46
+ <!-- Loading Screen -->
47
+ <div id="loadingScreen" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
48
+ <div class="bg-white rounded-xl p-8 max-w-md w-full mx-4">
49
+ <div class="text-center">
50
+ <div class="mb-4">
51
+ <div
52
+ class="inline-block animate-spin rounded-full h-12 w-12 border-4 border-purple-600 border-t-transparent">
53
+ </div>
54
+ </div>
55
+ <h3 class="text-xl font-bold mb-2">Cargando Modelos AI</h3>
56
+ <p class="text-gray-600 mb-4">Inicializando Transformers.js...</p>
57
+ <div class="w-full bg-gray-200 rounded-full h-2">
58
+ <div id="loadingProgress" class="bg-purple-600 h-2 rounded-full transition-all duration-300"
59
+ style="width: 0%"></div>
60
+ </div>
61
+ <p id="loadingStatus" class="text-sm text-gray-500 mt-2">Descargando modelos...</p>
62
+ </div>
63
+ </div>
64
+ </div>
65
+
66
+ <!-- Device Status Section -->
67
+ <section class="mb-8">
68
+ <h2 class="text-2xl font-bold mb-4 flex items-center gap-2">
69
+ <i class="fas fa-desktop text-purple-600"></i>
70
+ Estado de Dispositivos
71
+ </h2>
72
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4" id="devicesContainer">
73
+ <!-- Devices will be populated here -->
74
+ </div>
75
+ </section>
76
+
77
+ <!-- Main Control Panel -->
78
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
79
+ <!-- Left Column - Video Control -->
80
+ <div class="lg:col-span-2 space-y-6">
81
+ <!-- Video Input -->
82
+ <section class="bg-white rounded-xl shadow-lg p-6">
83
+ <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
84
+ <i class="fas fa-video text-purple-600"></i>
85
+ Control de Video
86
+ </h3>
87
+ <div class="space-y-4">
88
+ <div>
89
+ <label class="block text-sm font-medium text-gray-700 mb-2">URL del Video</label>
90
+ <div class="flex gap-2">
91
+ <input type="url" id="videoUrl" placeholder="https://www.youtube.com/watch?v=..."
92
+ class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
93
+ <button onclick="loadVideo()" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-lg transition-colors">
94
+ <i class="fas fa-download mr-2"></i>Cargar
95
+ </button>
96
+ </div>
97
+ </div>
98
+ <div class="flex gap-2">
99
+ <button onclick="loadSampleVideo('youtube')" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm transition-colors">
100
+ <i class="fab fa-youtube mr-1"></i> YouTube
101
+ </button>
102
+ <button onclick="loadSampleVideo('vimeo')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm transition-colors">
103
+ <i class="fab fa-vimeo-v mr-1"></i> Vimeo
104
+ </button>
105
+ <button onclick="loadSampleVideo('direct')" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm transition-colors">
106
+ <i class="fas fa-link mr-1"></i> Directo
107
+ </button>
108
+ </div>
109
+ </div>
110
+ </section>
111
+
112
+ <!-- Playback Controls -->
113
+ <section class="bg-white rounded-xl shadow-lg p-6">
114
+ <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
115
+ <i class="fas fa-play-circle text-purple-600"></i>
116
+ Controles de Reproducci贸n
117
+ </h3>
118
+ <div class="space-y-4">
119
+ <!-- Progress Bar -->
120
+ <div>
121
+ <div class="flex justify-between text-sm text-gray-600 mb-2">
122
+ <span id="currentTime">00:00</span>
123
+ <span id="duration">03:45</span>
124
+ </div>
125
+ <div class="w-full bg-gray-200 rounded-full h-3">
126
+ <div id="progressBar" class="bg-purple-600 h-3 rounded-full transition-all duration-300"
127
+ style="width: 0%"></div>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Control Buttons -->
132
+ <div class="flex justify-center gap-2">
133
+ <button onclick="rewind()" class="bg-gray-600 hover:bg-gray-700 text-white p-3 rounded-lg transition-colors">
134
+ <i class="fas fa-backward"></i>
135
+ </button>
136
+ <button onclick="playAll()" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg transition-colors">
137
+ <i class="fas fa-play mr-2"></i>Reproducir
138
+ </button>
139
+ <button onclick="pauseAll()" class="bg-yellow-600 hover:bg-yellow-700 text-white px-6 py-3 rounded-lg transition-colors">
140
+ <i class="fas fa-pause mr-2"></i>Pausar
141
+ </button>
142
+ <button onclick="stopAll()" class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg transition-colors">
143
+ <i class="fas fa-stop mr-2"></i>Detener
144
+ </button>
145
+ <button onclick="forward()" class="bg-gray-600 hover:bg-gray-700 text-white p-3 rounded-lg transition-colors">
146
+ <i class="fas fa-forward"></i>
147
+ </button>
148
+ </div>
149
+ </div>
150
+ </section>
151
+
152
+ <!-- AI Content Analysis -->
153
+ <section class="bg-white rounded-xl shadow-lg p-6">
154
+ <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
155
+ <i class="fas fa-brain text-purple-600"></i>
156
+ An谩lisis de Contenido AI
157
+ </h3>
158
+ <div class="space-y-4">
159
+ <button onclick="analyzeContent()" class="w-full bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white px-4 py-3 rounded-lg transition-all">
160
+ <i class="fas fa-magic mr-2"></i>Analizar Contenido con AI
161
+ </button>
162
+ <div id="aiAnalysis" class="hidden">
163
+ <div class="bg-purple-50 border border-purple-200 rounded-lg p-4">
164
+ <h4 class="font-semibold text-purple-900 mb-2">An谩lisis del Contenido</h4>
165
+ <div id="analysisResults" class="text-sm text-gray-700 space-y-2">
166
+ <!-- Analysis results will appear here -->
167
+ </div>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </section>
172
+
173
+ <!-- Playlist -->
174
+ <section class="bg-white rounded-xl shadow-lg p-6">
175
+ <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
176
+ <i class="fas fa-list text-purple-600"></i>
177
+ Playlist
178
+ </h3>
179
+ <div class="space-y-4">
180
+ <div class="flex gap-2">
181
+ <input type="url" id="playlistUrl" placeholder="Agregar URL a playlist"
182
+ class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500">
183
+ <input type="text" id="playlistTitle" placeholder="T铆tulo (opcional)"
184
+ class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500">
185
+ <button onclick="addToPlaylist()" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition-colors">
186
+ <i class="fas fa-plus"></i>
187
+ </button>
188
+ </div>
189
+ <div id="playlistContainer" class="space-y-2 max-h-64 overflow-y-auto">
190
+ <!-- Playlist items will appear here -->
191
+ </div>
192
+ </div>
193
+ </section>
194
+ </div>
195
+
196
+ <!-- Right Column - Individual Controls -->
197
+ <div class="space-y-6">
198
+ <!-- Volume Control -->
199
+ <section class="bg-white rounded-xl shadow-lg p-6">
200
+ <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
201
+ <i class="fas fa-volume-up text-purple-600"></i>
202
+ Volumen Maestro
203
+ </h3>
204
+ <div class="space-y-4">
205
+ <div>
206
+ <input type="range" id="volumeSlider" min="0" max="100" value="50"
207
+ class="w-full" onchange="changeVolume(this.value)">
208
+ <div class="flex justify-between text-sm text-gray-600 mt-2">
209
+ <span>0%</span>
210
+ <span id="volumePercentage" class="font-bold">50%</span>
211
+ <span>100%</span>
212
+ </div>
213
+ </div>
214
+ <div class="flex gap-2">
215
+ <button onclick="muteAll()" class="flex-1 bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg transition-colors">
216
+ <i class="fas fa-volume-mute mr-2"></i>Silenciar
217
+ </button>
218
+ <button onclick="setVolume(100)" class="flex-1 bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition-colors">
219
+ <i class="fas fa-volume-up mr-2"></i>M谩ximo
220
+ </button>
221
+ </div>
222
+ </div>
223
+ </section>
224
+
225
+ <!-- Individual Device Controls -->
226
+ <section class="bg-white rounded-xl shadow-lg p-6">
227
+ <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
228
+ <i class="fas fa-sliders-h text-purple-600"></i>
229
+ Controles Individuales
230
+ </h3>
231
+ <div id="individualControls" class="space-y-4">
232
+ <!-- Individual controls will be populated here -->
233
+ </div>
234
+ </section>
235
+
236
+ <!-- Quick Actions -->
237
+ <section class="bg-white rounded-xl shadow-lg p-6">
238
+ <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
239
+ <i class="fas fa-bolt text-purple-600"></i>
240
+ Acciones R谩pidas
241
+ </h3>
242
+ <div class="grid grid-cols-2 gap-2">
243
+ <button onclick="discoverDevices()" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm transition-colors">
244
+ <i class="fas fa-search mr-1"></i>Descubrir
245
+ </button>
246
+ <button onclick="refreshStatus()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm transition-colors">
247
+ <i class="fas fa-sync mr-1"></i>Actualizar
248
+ </button>
249
+ <button onclick="playAll()" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm transition-colors">
250
+ <i class="fas fa-play mr-1"></i>Reproducir Todo
251
+ </button>
252
+ <button onclick="stopAll()" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm transition-colors">
253
+ <i class="fas fa-stop mr-1"></i>Detener Todo
254
+ </button>
255
+ </div>
256
+ </section>
257
+
258
+ <!-- Status Messages -->
259
+ <section class="bg-white rounded-xl shadow-lg p-6">
260
+ <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
261
+ <i class="fas fa-info-circle text-purple-600"></i>
262
+ Estado del Sistema
263
+ </h3>
264
+ <div class="space-y-2">
265
+ <div class="flex justify-between">
266
+ <span class="text-gray-600">Estado:</span>
267
+ <span id="systemStatus" class="font-semibold text-green-600">Listo</span>
268
+ </div>
269
+ <div class="flex justify-between">
270
+ <span class="text-gray-600">Modelo AI:</span>
271
+ <span id="aiModelStatus" class="font-semibold text-blue-600">Cargando...</span>
272
+ </div>
273
+ <div id="statusMessage" class="mt-3 p-3 bg-gray-100 rounded-lg text-sm text-gray-700">
274
+ Esperando acci贸n...
275
+ </div>
276
+ </div>
277
+ </section>
278
+ </div>
279
+ </div>
280
+ </main>
281
+
282
+ <!-- Footer -->
283
+ <footer class="bg-gray-800 text-white mt-12 py-8">
284
+ <div class="container mx-auto px-4 text-center">
285
+ <div class="flex justify-center gap-4 mb-4">
286
+ <span class="bg-purple-600 px-3 py-1 rounded-full text-sm">
287
+ <i class="fas fa-brain"></i> Transformers.js
288
+ </span>
289
+ <span class="bg-indigo-600 px-3 py-1 rounded-full text-sm">
290
+ <i class="fas fa-microchip"></i> WebML
291
+ </span>
292
+ <span class="bg-blue-600 px-3 py-1 rounded-full text-sm">
293
+ <i class="fas fa-globe"></i> Browser Native
294
+ </span>
295
+ </div>
296
+ <p class="text-gray-400">
297
+ Sistema de control multimedia con an谩lisis de contenido AI
298
+ </p>
299
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
300
+ class="inline-block mt-3 text-purple-400 hover:text-purple-300 transition-colors">
301
+ Built with anycoder
302
+ </a>
303
+ </div>
304
+ </footer>
305
+
306
+ <script src="https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.1/dist/transformers.min.js"></script>
307
+ <script src="index.js"></script>
308
  </body>
309
 
310
  </html>