File size: 13,148 Bytes
23613e6 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 | <!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');
// Manejar la subida de imágenes
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;
// Resetear resultados
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);
}
});
// Simular el análisis (en un caso real, aquí harías una llamada a tu API de Colab)
analyzeBtn.addEventListener('click', function() {
if (!imageUpload.files[0]) return;
// Mostrar estado de carga
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";
// Simular tiempo de análisis (2 segundos)
setTimeout(function() {
// Simular decisión aleatoria (en un caso real, esto vendría de tu IA)
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";
}
// Restaurar botón
analyzeBtn.disabled = false;
analyzeBtn.innerHTML = '<i class="fas fa-brain mr-2"></i> Analizar Imagen';
}, 2000);
});
// Manejar arrastrar y soltar
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> |