Proyecto_OCR / static /index.html
dfernandezl12's picture
Upload 6 files
cad8d60 verified
Raw
History Blame Contribute Delete
2.66 kB
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VisionAI | OCR & LLM Assistant</title>
<link rel="stylesheet" href="/static/style.css?v=1.1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<div class="app-container">
<!-- Sidebar: Control de Imagen -->
<aside class="sidebar">
<div class="logo">
<i class="fa-solid fa-eye"></i>
<span>VisionAI</span>
</div>
<div class="upload-box" id="dropZone">
<input type="file" id="imageInput" accept="image/*" hidden>
<label for="imageInput" class="upload-label">
<i class="fa-solid fa-cloud-arrow-up"></i>
<span>Sube una imagen o arrastra</span>
<small>PNG, JPG hasta 10MB</small>
</label>
</div>
<div id="previewWrapper" class="hidden">
<div class="preview-card">
<img id="imagePreview" src="" alt="Preview">
<div id="ocrBadge" class="badge">Procesando...</div>
</div>
<div class="ocr-text-container">
<label>Texto extraído:</label>
<div id="extractedText">Sube una imagen para ver el texto...</div>
</div>
</div>
</aside>
<!-- Main: Chat Interface -->
<main class="chat-area">
<div class="chat-header">
<h2>Asistente de Documentos</h2>
<button id="btnLimpiar" class="btn-icon" title="Limpiar chat">
<i class="fa-solid fa-trash-can"></i>
</button>
</div>
<div id="chatLog" class="chat-log">
<div class="message system">
¡Bienvenido! Sube una imagen con texto para empezar a hacerme preguntas sobre ella.
</div>
</div>
<div class="input-container">
<div class="input-wrapper">
<input type="text" id="pregunta" placeholder="Escribe tu duda aquí..." disabled>
<button id="btnEnviar" disabled>
<i class="fa-solid fa-paper-plane"></i>
</button>
</div>
</div>
</main>
</div>
<script src="/static/app.js"></script>
</body>
</html>