File size: 2,048 Bytes
57c87d3 | 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 | <!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clasificador de Vehículos 🚗✈️🚢</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<div class="container">
<h1>🚗 ✈️ 🚢</h1>
<h1>Clasificador de Vehículos</h1>
<p class="subtitle">Sube una imagen y descubre si es un coche, un avión o un barco</p>
<!-- Zona de subida -->
<div class="upload-area" id="uploadArea">
<div class="upload-icon">📷</div>
<p>Arrastra y suelta una imagen aquí o <span>haz clic para seleccionar</span></p>
<input type="file" id="fileInput" accept="image/*">
</div>
<!-- Vista previa -->
<div class="preview-section" id="previewSection">
<img id="previewImage" class="preview-image" src="" alt="Vista previa">
</div>
<!-- Botón predecir -->
<button class="btn-predict" id="predictBtn" disabled>
<span class="spinner" id="spinner"></span>
<span id="btnText">🔍 Analizar imagen</span>
</button>
<!-- Resultado -->
<div class="result-section" id="resultSection">
<div class="result-header">
<span class="result-icon" id="resultIcon"></span>
<span class="result-prediction" id="resultPrediction"></span>
</div>
<div class="confidence-bar-container">
<div class="confidence-bar" id="confidenceBar"></div>
</div>
<p class="confidence-text">
Confianza: <strong id="confidenceValue">0%</strong>
</p>
<div class="probabilities" id="probabilitiesList"></div>
<button class="upload-another" id="uploadAnotherBtn">🔄 Subir otra imagen</button>
</div>
</div>
<script src="/static/app.js"></script>
</body>
</html> |