Upload 6 files

Dockerfile.dockerfile

@@ -0,0 +1,27 @@
+FROM python:3.10
+
+WORKDIR /app
+
+# Instalar tesseract en el sistema
+RUN apt-get update && apt-get install -y \
+    tesseract-ocr \
+    && rm -rf /var/lib/apt/lists/*
+
+# Instalar dependencias para OpenCV
+RUN apt-get update && apt-get install -y \
+    libgl1 \
+    libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/*    
+
+# Copiar e instalar las dependencias de Python
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copiar el código del proyecto
+COPY . .
+
+# Exponer el puerto que usa Hugging Face Spaces
+EXPOSE 7860
+
+# Comando para arrancar la aplicación con Uvicorn
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

main.py

@@ -0,0 +1,187 @@
+from unittest import result
+
+from fastapi import FastAPI, File, UploadFile, HTTPException
+from google import genai
+from httpcore import request
+from google.genai import types
+from dotenv import load_dotenv
+from pydantic import BaseModel
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
+from transformers import pipeline
+import cv2
+from paddleocr import PaddleOCR
+import numpy as np
+import time
+import os
+
+MODEL_ID = "models/gemini-2.5-flash"
+MODEL_FALLBACK = "models/gemini-3.1-flash-lite-preview"
+modelo_local = pipeline("text2text-generation", model="google/flan-t5-small")
+
+load_dotenv()
+
+api_key = os.environ.get("GEMINI_API_KEY")
+
+client = genai.Client(api_key=api_key)
+
+
+config = types.GenerateContentConfig(
+    temperature=0,
+)
+
+class ChatRequest(BaseModel):
+    pregunta: str
+    contexto: str = ""
+    historial: list[str] = []
+
+class ChatResponse(BaseModel):
+    respuesta: str
+    historial: list[str] = []
+
+class OCRResponse(BaseModel):
+	texto: str
+
+app = FastAPI(title="OCR API", version="1.0.0")
+ocr = PaddleOCR(use_angle_cls=True, lang="es")
+
+try:
+    local_model = pipeline("text2text-generation", model="google/flan-t5-small")
+except Exception as e:
+    print(f"Aviso: No se pudo cargar el modelo local: {e}")
+    local_model = None
+
+#@app.get("/")
+#def home():
+    #return FileResponse("static/index.html")
+
+
+
+@app.post("/api/chat", response_model=ChatResponse)
+def prompt(request: ChatRequest):
+    max_reintentos = 2
+    segundos_espera = 10
+    e = "Error desconocido"
+
+    try:
+        pregunta = request.pregunta
+        historial = request.historial
+        texto_ocr = request.contexto  # <--- Tomamos el texto enviado por el frontend
+
+        texto_prompt = f"""
+                Eres un asistente que responde preguntas usando SOLO información del documento.
+
+                REGLAS IMPORTANTES:
+                - No copies el documento completo.
+                - No repitas texto largo del documento.
+                - Extrae SOLO la información necesaria.
+                - Si la respuesta no está en el documento, di: "No aparece en el documento".
+                - Responde de forma breve y directa.
+
+                DOCUMENTO:
+                \"\"\"{texto_ocr}\"\"\"  <--- Cambiado: ahora usa el OCR
+
+                HISTORIAL:
+                {historial}
+
+                PREGUNTA:
+                {pregunta}
+
+                RESPUESTA:
+                """
+
+        for intento in range(max_reintentos):
+            try:
+                response = client.models.generate_content(
+                        model=MODEL_ID,
+                        contents=texto_prompt,
+                        config=config
+                )
+                return ChatResponse(respuesta=response.text)
+            except Exception as ex:
+                print(f"{intento+1} - Error Gemini 2.5: {ex}")
+                e = ex
+                time.sleep(segundos_espera)
+                
+        try:
+            response = client.models.generate_content(
+                model=MODEL_FALLBACK,
+                contents=texto_prompt,
+                config=config
+            )
+            return ChatResponse(respuesta=response.text)
+        except Exception as e_fallback:
+            print(f"Error en Gemini 1.5 Fallback: {e_fallback}")
+            try:
+            # Simplificamos el prompt para el modelo local pequeño
+                res_local = modelo_local(f"question: {pregunta} context: {texto_ocr}", max_new_tokens=50)
+                return ChatResponse(respuesta=res_local[0]['generated_text'])
+            except Exception as e_final:
+                raise HTTPException(status_code=500, detail="Error en todos los modelos (incluyendo local)")
+
+    except Exception as e:
+        if isinstance(e, HTTPException): raise e
+        raise HTTPException(status_code=500, detail=str(e))
+
+    except Exception as e:
+        if isinstance(e, HTTPException): raise e
+        raise HTTPException(status_code=500, detail=str(e))
+    
+
+def extraer_texto(resultado_ocr):
+    textos = []
+    
+    # PaddleOCR devuelve una lista de páginas. 
+    # Validamos que el resultado no sea None y que la primera página tenga contenido.
+    if resultado_ocr and resultado_ocr[0] is not None:
+        for linea in resultado_ocr[0]:
+            # linea[1][0] es donde reside el texto detectado
+            textos.append(linea[1][0])
+
+    return " ".join(textos)
+
+      
+def preprocesar_imagen(image_bytes):
+    # Convertir bytes a imagen
+    nparr = np.frombuffer(image_bytes, np.uint8)
+    img = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
+
+    if img is None:
+        raise ValueError("No se pudo decodificar la imagen")
+
+    # PaddleOCR maneja internamente el binarizado, 
+    # es mejor enviarle la imagen limpia o solo en gris.
+    gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
+    return gray
+    
+@app.post("/api/ocr", response_model=OCRResponse)
+async def ocr_image(file: UploadFile = File(...)):
+    if file.content_type not in {"image/png", "image/jpeg", "image/jpg", "image/webp"}:
+        raise HTTPException(status_code=400, detail="Formato no soportado")
+
+    try:
+        # Leemos los bytes del archivo
+        contenido = await file.read()
+        
+        # Preprocesamos y ejecutamos OCR
+        img = preprocesar_imagen(contenido)
+        
+        # cls=True activa la clasificación de ángulo si se configuró en la instancia
+        result = ocr.ocr(img, cls=True) 
+        
+        texto_extraido = extraer_texto(result)
+        
+        if not texto_extraido.strip():
+            return OCRResponse(texto="No se detectó texto en la imagen.")
+            
+        return OCRResponse(texto=texto_extraido)
+
+    except ValueError as e:
+        raise HTTPException(status_code=400, detail=str(e))
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Error OCR: {str(e)}")
+
+app.mount("/", StaticFiles(directory="static", html=True), name="static")
+
+    
+        

requirements.txt

@@ -0,0 +1,13 @@
+fastapi==0.136.1
+uvicorn==0.46.0
+python-multipart==0.0.27
+opencv-python-headless==4.13.0.92
+numpy==2.2.6
+paddleocr==2.10.0
+paddlepaddle==2.6.2
+pytesseract==0.3.13
+ultralytics==8.4.45
+google-genai==1.73.1
+huggingface_hub==1.12.2
+transformers==5.7.0
+requests==2.33.1

static/app.js

@@ -0,0 +1,123 @@
+let historial = [];
+let textoOCR = "";
+
+// Elementos
+const imageInput = document.getElementById('imageInput');
+const imagePreview = document.getElementById('imagePreview');
+const extractedTextDiv = document.getElementById('extractedText');
+const chatLog = document.getElementById('chatLog');
+const inputPregunta = document.getElementById('pregunta');
+const btnEnviar = document.getElementById('btnEnviar');
+const ocrBadge = document.getElementById('ocrBadge');
+const previewWrapper = document.getElementById('previewWrapper');
+
+// --- 1. Manejo de OCR ---
+imageInput.addEventListener('change', async (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    chatLog.innerHTML = ""; // Limpiar chat
+    historial = []; // Limpiar historial
+
+    // Mostrar preview
+    const url = URL.createObjectURL(file);
+    imagePreview.src = url;
+    previewWrapper.classList.remove('hidden');
+    ocrBadge.textContent = "Procesando...";
+    ocrBadge.style.background = "#eab308"; // Amarillo
+
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+        const res = await fetch('/api/ocr', {
+            method: 'POST',
+            body: formData
+        });
+        const data = await res.json();
+
+        textoOCR = data.texto;
+        extractedTextDiv.textContent = textoOCR;
+        ocrBadge.textContent = "OCR Listo";
+        ocrBadge.style.background = "#22c55e"; // Verde
+
+        // Habilitar chat
+        inputPregunta.disabled = false;
+        btnEnviar.disabled = false;
+        inputPregunta.focus();
+
+        agregarMensaje('assistant', 'He leído la imagen. ¿Qué quieres saber sobre ella?');
+    } catch (err) {
+        ocrBadge.textContent = "Error OCR";
+        ocrBadge.style.background = "#ef4444"; // Rojo
+    }
+});
+
+// --- 2. Manejo de Chat ---
+async function enviarPregunta() {
+    const pregunta = inputPregunta.value.trim();
+    if (!pregunta) return;
+
+    agregarMensaje('user', pregunta);
+    inputPregunta.value = "";
+    
+    // Mostramos estado de carga
+    const typingId = agregarMensaje('assistant', '<i class="fa-solid fa-ellipsis fa-beat"></i> Pensando...');
+
+    try {
+        const res = await fetch('/api/chat', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                pregunta: pregunta,
+                contexto: textoOCR, // <--- CAMBIO: Usamos la variable global 'textoOCR' definida arriba
+                historial: historial
+            })
+        });
+
+        const data = await res.json();
+        
+        // Eliminamos indicador de carga y ponemos respuesta
+        const loader = document.getElementById(typingId);
+        if (loader) loader.remove();
+
+        if (data.respuesta) {
+            agregarMensaje('assistant', data.respuesta);
+            
+            // Actualizamos historial
+            historial.push(`USER: ${pregunta}`, `ASSISTANT: ${data.respuesta}`);
+            if(historial.length > 10) historial.splice(0, 2);
+        } else {
+            agregarMensaje('assistant', 'La IA no pudo generar una respuesta clara.');
+        }
+
+    } catch (err) {
+        const loader = document.getElementById(typingId);
+        if (loader) loader.remove();
+        agregarMensaje('assistant', 'Lo siento, ha ocurrido un error al conectar con el servidor.');
+        console.error(err);
+    }
+}
+
+function agregarMensaje(rol, texto) {
+    const div = document.createElement('div');
+    const id = 'msg-' + Date.now() + '-' + Math.floor(Math.random() * 1000);    
+    div.id = id;
+    div.className = `message ${rol}`;
+    div.innerHTML = texto;
+    chatLog.appendChild(div);
+    chatLog.scrollTop = chatLog.scrollHeight;
+    return id;
+}
+
+// Eventos
+btnEnviar.addEventListener('click', enviarPregunta);
+inputPregunta.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') enviarPregunta();
+});
+
+document.getElementById('btnLimpiar').addEventListener('click', () => {
+    chatLog.innerHTML = "";
+    historial = [];
+    agregarMensaje('system', 'Chat reiniciado.');
+});

static/index.html

@@ -0,0 +1,67 @@
+<!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>

static/style.css

@@ -0,0 +1,52 @@
+:root {
+    --primary: #2563eb;
+    --primary-hover: #1d4ed8;
+    --bg-app: #f8fafc;
+    --bg-sidebar: #ffffff;
+    --text-main: #1e293b;
+    --text-muted: #64748b;
+    --border: #e2e8f0;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg-app); color: var(--text-main); height: 100vh; overflow: hidden; }
+
+.app-container { display: flex; height: 100vh; }
+
+/* Sidebar */
+.sidebar { width: 350px; background: var(--bg-sidebar); border-right: 1px solid var(--border); padding: 24px; display: flex; flex-direction: column; gap: 20px; }
+.logo { display: flex; align-items: center; gap: 12px; font-size: 1.5rem; font-weight: 700; color: var(--primary); margin-bottom: 10px; }
+
+.upload-box { border: 2px dashed var(--border); border-radius: 12px; padding: 30px 20px; text-align: center; transition: all 0.3s; cursor: pointer; }
+.upload-box:hover { border-color: var(--primary); background: #f0f7ff; }
+.upload-label { cursor: pointer; display: flex; flex-direction: column; gap: 8px; color: var(--text-muted); }
+.upload-label i { font-size: 2rem; color: var(--primary); }
+
+.preview-card { position: relative; margin-top: 10px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
+#imagePreview { width: 100%; display: block; max-height: 200px; object-fit: contain; background: #000; }
+.badge { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.7); color: white; padding: 4px 10px; border-radius: 20px; font-size: 0.7rem; }
+
+.ocr-text-container { margin-top: 15px; font-size: 0.85rem; }
+#extractedText { background: #f1f5f9; padding: 12px; border-radius: 8px; height: 120px; overflow-y: auto; color: var(--text-muted); margin-top: 5px; border: 1px solid var(--border); line-height: 1.4; }
+
+/* Chat Area */
+.chat-area { flex: 1; display: flex; flex-direction: column; position: relative; }
+.chat-header { padding: 20px 30px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: white; }
+.chat-log { flex: 1; padding: 30px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; }
+
+.message { max-width: 80%; padding: 12px 16px; border-radius: 12px; line-height: 1.5; font-size: 0.95rem; }
+.message.system { align-self: center; background: #f1f5f9; color: var(--text-muted); font-size: 0.8rem; }
+.message.user { align-self: flex-end; background: var(--primary); color: white; border-bottom-right-radius: 2px; }
+.message.assistant { align-self: flex-start; background: white; border: 1px solid var(--border); border-bottom-left-radius: 2px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
+
+/* Input */
+.input-container { padding: 30px; background: linear-gradient(transparent, var(--bg-app) 20%); }
+.input-wrapper { display: flex; gap: 12px; background: white; padding: 8px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); border: 1px solid var(--border); }
+input[type="text"] { flex: 1; border: none; padding: 10px 15px; outline: none; font-size: 1rem; }
+button#btnEnviar { background: var(--primary); color: white; border: none; width: 45px; height: 45px; border-radius: 12px; cursor: pointer; transition: 0.3s; }
+button#btnEnviar:disabled { background: var(--border); cursor: not-allowed; }
+button#btnEnviar:hover:not(:disabled) { background: var(--primary-hover); transform: scale(1.05); }
+
+.hidden { display: none; }
+.btn-icon { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.1rem; }
+.btn-icon:hover { color: #ef4444; }