Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Control Multimedia AI - Transformers.js</title> | |
| <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> | |
| <link href="style.css" rel="stylesheet"> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header --> | |
| <header class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h1 class="text-3xl font-bold flex items-center gap-3"> | |
| <i class="fas fa-tv"></i> | |
| Control Multimedia AI | |
| </h1> | |
| <p class="mt-2 text-purple-100">Sistema inteligente con análisis de contenido usando Transformers.js</p> | |
| <div class="mt-3 flex gap-2"> | |
| <span class="bg-white/20 px-3 py-1 rounded-full text-sm"> | |
| <i class="fas fa-brain"></i> AI Powered | |
| </span> | |
| <span class="bg-white/20 px-3 py-1 rounded-full text-sm"> | |
| <i class="fas fa-microchip"></i> Transformers.js | |
| </span> | |
| <span class="bg-white/20 px-3 py-1 rounded-full text-sm"> | |
| <i class="fas fa-globe"></i> Browser Native | |
| </span> | |
| </div> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" | |
| class="bg-white/10 hover:bg-white/20 px-4 py-2 rounded-lg transition-all duration-200 font-semibold"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Loading Screen --> | |
| <div id="loadingScreen" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50"> | |
| <div class="bg-white rounded-xl p-8 max-w-md w-full mx-4"> | |
| <div class="text-center"> | |
| <div class="mb-4"> | |
| <div | |
| class="inline-block animate-spin rounded-full h-12 w-12 border-4 border-purple-600 border-t-transparent"> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Cargando Modelos AI</h3> | |
| <p class="text-gray-600 mb-4">Inicializando Transformers.js...</p> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div id="loadingProgress" class="bg-purple-600 h-2 rounded-full transition-all duration-300" | |
| style="width: 0%"></div> | |
| </div> | |
| <p id="loadingStatus" class="text-sm text-gray-500 mt-2">Descargando modelos...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Device Status Section --> | |
| <section class="mb-8"> | |
| <h2 class="text-2xl font-bold mb-4 flex items-center gap-2"> | |
| <i class="fas fa-desktop text-purple-600"></i> | |
| Estado de Dispositivos | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4" id="devicesContainer"> | |
| <!-- Devices will be populated here --> | |
| </div> | |
| </section> | |
| <!-- Main Control Panel --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Left Column - Video Control --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Video Input --> | |
| <section class="bg-white rounded-xl shadow-lg p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center gap-2"> | |
| <i class="fas fa-video text-purple-600"></i> | |
| Control de Video | |
| </h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">URL del Video</label> | |
| <div class="flex gap-2"> | |
| <input type="url" id="videoUrl" placeholder="https://www.youtube.com/watch?v=..." | |
| class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"> | |
| <button onclick="loadVideo()" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-lg transition-colors"> | |
| <i class="fas fa-download mr-2"></i>Cargar | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex gap-2"> | |
| <button onclick="loadSampleVideo('youtube')" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm transition-colors"> | |
| <i class="fab fa-youtube mr-1"></i> YouTube | |
| </button> | |
| <button onclick="loadSampleVideo('vimeo')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm transition-colors"> | |
| <i class="fab fa-vimeo-v mr-1"></i> Vimeo | |
| </button> | |
| <button onclick="loadSampleVideo('direct')" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm transition-colors"> | |
| <i class="fas fa-link mr-1"></i> Directo | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Playback Controls --> | |
| <section class="bg-white rounded-xl shadow-lg p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center gap-2"> | |
| <i class="fas fa-play-circle text-purple-600"></i> | |
| Controles de Reproducción | |
| </h3> | |
| <div class="space-y-4"> | |
| <!-- Progress Bar --> | |
| <div> | |
| <div class="flex justify-between text-sm text-gray-600 mb-2"> | |
| <span id="currentTime">00:00</span> | |
| <span id="duration">03:45</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-3"> | |
| <div id="progressBar" class="bg-purple-600 h-3 rounded-full transition-all duration-300" | |
| style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <!-- Control Buttons --> | |
| <div class="flex justify-center gap-2"> | |
| <button onclick="rewind()" class="bg-gray-600 hover:bg-gray-700 text-white p-3 rounded-lg transition-colors"> | |
| <i class="fas fa-backward"></i> | |
| </button> | |
| <button onclick="playAll()" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg transition-colors"> | |
| <i class="fas fa-play mr-2"></i>Reproducir | |
| </button> | |
| <button onclick="pauseAll()" class="bg-yellow-600 hover:bg-yellow-700 text-white px-6 py-3 rounded-lg transition-colors"> | |
| <i class="fas fa-pause mr-2"></i>Pausar | |
| </button> | |
| <button onclick="stopAll()" class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg transition-colors"> | |
| <i class="fas fa-stop mr-2"></i>Detener | |
| </button> | |
| <button onclick="forward()" class="bg-gray-600 hover:bg-gray-700 text-white p-3 rounded-lg transition-colors"> | |
| <i class="fas fa-forward"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AI Content Analysis --> | |
| <section class="bg-white rounded-xl shadow-lg p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center gap-2"> | |
| <i class="fas fa-brain text-purple-600"></i> | |
| Análisis de Contenido AI | |
| </h3> | |
| <div class="space-y-4"> | |
| <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"> | |
| <i class="fas fa-magic mr-2"></i>Analizar Contenido con AI | |
| </button> | |
| <div id="aiAnalysis" class="hidden"> | |
| <div class="bg-purple-50 border border-purple-200 rounded-lg p-4"> | |
| <h4 class="font-semibold text-purple-900 mb-2">Análisis del Contenido</h4> | |
| <div id="analysisResults" class="text-sm text-gray-700 space-y-2"> | |
| <!-- Analysis results will appear here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Playlist --> | |
| <section class="bg-white rounded-xl shadow-lg p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center gap-2"> | |
| <i class="fas fa-list text-purple-600"></i> | |
| Playlist | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="flex gap-2"> | |
| <input type="url" id="playlistUrl" placeholder="Agregar URL a playlist" | |
| class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"> | |
| <input type="text" id="playlistTitle" placeholder="Título (opcional)" | |
| class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"> | |
| <button onclick="addToPlaylist()" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition-colors"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| <div id="playlistContainer" class="space-y-2 max-h-64 overflow-y-auto"> | |
| <!-- Playlist items will appear here --> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Right Column - Individual Controls --> | |
| <div class="space-y-6"> | |
| <!-- Volume Control --> | |
| <section class="bg-white rounded-xl shadow-lg p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center gap-2"> | |
| <i class="fas fa-volume-up text-purple-600"></i> | |
| Volumen Maestro | |
| </h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <input type="range" id="volumeSlider" min="0" max="100" value="50" | |
| class="w-full" onchange="changeVolume(this.value)"> | |
| <div class="flex justify-between text-sm text-gray-600 mt-2"> | |
| <span>0%</span> | |
| <span id="volumePercentage" class="font-bold">50%</span> | |
| <span>100%</span> | |
| </div> | |
| </div> | |
| <div class="flex gap-2"> | |
| <button onclick="muteAll()" class="flex-1 bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg transition-colors"> | |
| <i class="fas fa-volume-mute mr-2"></i>Silenciar | |
| </button> | |
| <button onclick="setVolume(100)" class="flex-1 bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition-colors"> | |
| <i class="fas fa-volume-up mr-2"></i>Máximo | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Individual Device Controls --> | |
| <section class="bg-white rounded-xl shadow-lg p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center gap-2"> | |
| <i class="fas fa-sliders-h text-purple-600"></i> | |
| Controles Individuales | |
| </h3> | |
| <div id="individualControls" class="space-y-4"> | |
| <!-- Individual controls will be populated here --> | |
| </div> | |
| </section> | |
| <!-- Quick Actions --> | |
| <section class="bg-white rounded-xl shadow-lg p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center gap-2"> | |
| <i class="fas fa-bolt text-purple-600"></i> | |
| Acciones Rápidas | |
| </h3> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button onclick="discoverDevices()" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm transition-colors"> | |
| <i class="fas fa-search mr-1"></i>Descubrir | |
| </button> | |
| <button onclick="refreshStatus()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm transition-colors"> | |
| <i class="fas fa-sync mr-1"></i>Actualizar | |
| </button> | |
| <button onclick="playAll()" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm transition-colors"> | |
| <i class="fas fa-play mr-1"></i>Reproducir Todo | |
| </button> | |
| <button onclick="stopAll()" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm transition-colors"> | |
| <i class="fas fa-stop mr-1"></i>Detener Todo | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Status Messages --> | |
| <section class="bg-white rounded-xl shadow-lg p-6"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center gap-2"> | |
| <i class="fas fa-info-circle text-purple-600"></i> | |
| Estado del Sistema | |
| </h3> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Estado:</span> | |
| <span id="systemStatus" class="font-semibold text-green-600">Listo</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Modelo AI:</span> | |
| <span id="aiModelStatus" class="font-semibold text-blue-600">Cargando...</span> | |
| </div> | |
| <div id="statusMessage" class="mt-3 p-3 bg-gray-100 rounded-lg text-sm text-gray-700"> | |
| Esperando acción... | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white mt-12 py-8"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <div class="flex justify-center gap-4 mb-4"> | |
| <span class="bg-purple-600 px-3 py-1 rounded-full text-sm"> | |
| <i class="fas fa-brain"></i> Transformers.js | |
| </span> | |
| <span class="bg-indigo-600 px-3 py-1 rounded-full text-sm"> | |
| <i class="fas fa-microchip"></i> WebML | |
| </span> | |
| <span class="bg-blue-600 px-3 py-1 rounded-full text-sm"> | |
| <i class="fas fa-globe"></i> Browser Native | |
| </span> | |
| </div> | |
| <p class="text-gray-400"> | |
| Sistema de control multimedia con análisis de contenido AI | |
| </p> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" | |
| class="inline-block mt-3 text-purple-400 hover:text-purple-300 transition-colors"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </footer> | |
| <script src="https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.1/dist/transformers.min.js"></script> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |