| <!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>
|
|
|
|
|
| <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>
|
|
|
|
|
| <div class="preview-section" id="previewSection">
|
| <img id="previewImage" class="preview-image" src="" alt="Vista previa">
|
| </div>
|
|
|
|
|
| <button class="btn-predict" id="predictBtn" disabled>
|
| <span class="spinner" id="spinner"></span>
|
| <span id="btnText">🔍 Analizar imagen</span>
|
| </button>
|
|
|
|
|
| <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> |
