| <!DOCTYPE html> |
| <html lang="es"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Identificador Día/Noche</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .file-upload { |
| position: relative; |
| overflow: hidden; |
| display: inline-block; |
| } |
| .file-upload-input { |
| position: absolute; |
| left: 0; |
| top: 0; |
| opacity: 0; |
| width: 100%; |
| height: 100%; |
| cursor: pointer; |
| } |
| .preview-container { |
| transition: all 0.3s ease; |
| } |
| .result-day { |
| background: linear-gradient(135deg, #87CEEB 0%, #E0F7FA 100%); |
| } |
| .result-night { |
| background: linear-gradient(135deg, #0F2027 0%, #203A43 50%, #2C5364 100%); |
| color: white; |
| } |
| .glow { |
| box-shadow: 0 0 15px rgba(255, 255, 255, 0.7); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 min-h-screen"> |
| <div class="container mx-auto px-4 py-8"> |
| <div class="max-w-3xl mx-auto"> |
| <header class="text-center mb-10"> |
| <h1 class="text-4xl font-bold text-gray-800 mb-2">Identificador Día/Noche</h1> |
| <p class="text-lg text-gray-600">Sube una foto y nuestro sistema determinará si fue tomada de día o de noche</p> |
| </header> |
|
|
| <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8"> |
| <div class="p-6 md:p-8"> |
| <div class="text-center mb-6"> |
| <div class="file-upload mx-auto w-full max-w-md"> |
| <label for="image-upload" class="cursor-pointer"> |
| <div class="border-2 border-dashed border-gray-300 rounded-xl p-8 hover:border-blue-500 transition-colors duration-300"> |
| <div class="flex flex-col items-center justify-center"> |
| <i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-3"></i> |
| <h3 class="text-lg font-medium text-gray-700">Arrastra y suelta tu imagen aquí</h3> |
| <p class="text-sm text-gray-500 mt-1">o haz clic para seleccionar</p> |
| <p class="text-xs text-gray-400 mt-2">Formatos soportados: JPG, PNG</p> |
| </div> |
| </div> |
| <input id="image-upload" type="file" accept="image/*" class="file-upload-input"> |
| </label> |
| </div> |
| </div> |
|
|
| <div id="preview-section" class="preview-container hidden mb-6"> |
| <div class="flex flex-col md:flex-row gap-6"> |
| <div class="flex-1"> |
| <h3 class="text-lg font-medium text-gray-700 mb-3">Previsualización</h3> |
| <div class="border rounded-lg overflow-hidden"> |
| <img id="image-preview" src="#" alt="Previsualización" class="w-full h-auto max-h-80 object-contain mx-auto"> |
| </div> |
| </div> |
| <div class="flex-1"> |
| <h3 class="text-lg font-medium text-gray-700 mb-3">Resultado</h3> |
| <div id="result-container" class="rounded-lg p-6 h-full flex flex-col items-center justify-center text-center"> |
| <div id="result-icon" class="text-5xl mb-4"> |
| <i class="fas fa-question-circle text-gray-400"></i> |
| </div> |
| <h4 id="result-text" class="text-xl font-semibold mb-2">Esperando análisis...</h4> |
| <p id="result-description" class="text-sm opacity-80">Sube una imagen para comenzar el análisis</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="text-center"> |
| <button id="analyze-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-8 rounded-lg shadow-md transition-all duration-300 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none" disabled> |
| <i class="fas fa-brain mr-2"></i> Analizar Imagen |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white rounded-xl shadow-lg overflow-hidden p-6 mb-8"> |
| <h2 class="text-xl font-bold text-gray-800 mb-4">¿Cómo funciona?</h2> |
| <div class="grid md:grid-cols-3 gap-4"> |
| <div class="bg-blue-50 p-4 rounded-lg"> |
| <div class="text-blue-600 text-2xl mb-2"> |
| <i class="fas fa-upload"></i> |
| </div> |
| <h3 class="font-medium mb-1">1. Sube tu imagen</h3> |
| <p class="text-sm text-gray-600">Selecciona una foto desde tu dispositivo o arrástrala al área designada.</p> |
| </div> |
| <div class="bg-purple-50 p-4 rounded-lg"> |
| <div class="text-purple-600 text-2xl mb-2"> |
| <i class="fas fa-cogs"></i> |
| </div> |
| <h3 class="font-medium mb-1">2. Procesamiento</h3> |
| <p class="text-sm text-gray-600">Nuestro sistema analiza los patrones de luz y color en la imagen.</p> |
| </div> |
| <div class="bg-green-50 p-4 rounded-lg"> |
| <div class="text-green-600 text-2xl mb-2"> |
| <i class="fas fa-lightbulb"></i> |
| </div> |
| <h3 class="font-medium mb-1">3. Resultados</h3> |
| <p class="text-sm text-gray-600">Recibe una determinación precisa de si la foto fue tomada de día o de noche.</p> |
| </div> |
| </div> |
| </div> |
|
|
| <footer class="text-center text-gray-500 text-sm"> |
| <p>© 2023 Identificador Día/Noche. Este es un proyecto de demostración.</p> |
| <p class="mt-1">La IA real debería ser implementada en Google Colab para procesamiento avanzado.</p> |
| </footer> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const imageUpload = document.getElementById('image-upload'); |
| const imagePreview = document.getElementById('image-preview'); |
| const previewSection = document.getElementById('preview-section'); |
| const analyzeBtn = document.getElementById('analyze-btn'); |
| const resultContainer = document.getElementById('result-container'); |
| const resultIcon = document.getElementById('result-icon'); |
| const resultText = document.getElementById('result-text'); |
| const resultDescription = document.getElementById('result-description'); |
| |
| |
| imageUpload.addEventListener('change', function(e) { |
| if (e.target.files.length > 0) { |
| const file = e.target.files[0]; |
| const reader = new FileReader(); |
| |
| reader.onload = function(event) { |
| imagePreview.src = event.target.result; |
| previewSection.classList.remove('hidden'); |
| analyzeBtn.disabled = false; |
| |
| |
| resultContainer.className = "rounded-lg p-6 h-full flex flex-col items-center justify-center text-center"; |
| resultIcon.innerHTML = '<i class="fas fa-question-circle text-gray-400"></i>'; |
| resultText.textContent = "Esperando análisis..."; |
| resultDescription.textContent = "Haz clic en 'Analizar Imagen' para comenzar"; |
| }; |
| |
| reader.readAsDataURL(file); |
| } |
| }); |
| |
| |
| analyzeBtn.addEventListener('click', function() { |
| if (!imageUpload.files[0]) return; |
| |
| |
| analyzeBtn.disabled = true; |
| analyzeBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Analizando...'; |
| |
| resultIcon.innerHTML = '<i class="fas fa-spinner fa-spin text-blue-500"></i>'; |
| resultText.textContent = "Analizando imagen..."; |
| resultDescription.textContent = "Estamos procesando tu foto, por favor espera"; |
| |
| |
| setTimeout(function() { |
| |
| const isDaytime = Math.random() > 0.5; |
| |
| if (isDaytime) { |
| resultContainer.className = "rounded-lg p-6 h-full flex flex-col items-center justify-center text-center result-day"; |
| resultIcon.innerHTML = '<i class="fas fa-sun text-yellow-500 glow"></i>'; |
| resultText.textContent = "¡Es de día!"; |
| resultDescription.textContent = "La imagen muestra características típicas de luz diurna"; |
| } else { |
| resultContainer.className = "rounded-lg p-6 h-full flex flex-col items-center justify-center text-center result-night"; |
| resultIcon.innerHTML = '<i class="fas fa-moon text-white glow"></i>'; |
| resultText.textContent = "¡Es de noche!"; |
| resultDescription.textContent = "La imagen muestra características típicas de luz nocturna"; |
| } |
| |
| |
| analyzeBtn.disabled = false; |
| analyzeBtn.innerHTML = '<i class="fas fa-brain mr-2"></i> Analizar Imagen'; |
| }, 2000); |
| }); |
| |
| |
| const dropArea = document.querySelector('.file-upload'); |
| |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
| dropArea.addEventListener(eventName, preventDefaults, false); |
| }); |
| |
| function preventDefaults(e) { |
| e.preventDefault(); |
| e.stopPropagation(); |
| } |
| |
| ['dragenter', 'dragover'].forEach(eventName => { |
| dropArea.addEventListener(eventName, highlight, false); |
| }); |
| |
| ['dragleave', 'drop'].forEach(eventName => { |
| dropArea.addEventListener(eventName, unhighlight, false); |
| }); |
| |
| function highlight() { |
| dropArea.querySelector('label div').classList.add('border-blue-500', 'bg-blue-50'); |
| } |
| |
| function unhighlight() { |
| dropArea.querySelector('label div').classList.remove('border-blue-500', 'bg-blue-50'); |
| } |
| |
| dropArea.addEventListener('drop', handleDrop, false); |
| |
| function handleDrop(e) { |
| const dt = e.dataTransfer; |
| const files = dt.files; |
| |
| if (files.length > 0 && files[0].type.match('image.*')) { |
| imageUpload.files = files; |
| const event = new Event('change'); |
| imageUpload.dispatchEvent(event); |
| } |
| } |
| }); |
| </script> |
| <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=rivoredor/html" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
