MTP_2

Sleeping

App Files Files Community

teszenofficial commited on Dec 27, 2025

Commit

0eb10b0

verified ·

1 Parent(s): dda31c0

Update app.py

Browse files

Files changed (1) hide show

app.py +347 -98

app.py CHANGED Viewed

@@ -3,7 +3,7 @@ import sys
 import torch
 import pickle
 from fastapi import FastAPI
-from fastapi.responses import HTMLResponse, JSONResponse
 from pydantic import BaseModel
 from huggingface_hub import snapshot_download
 import uvicorn
@@ -17,6 +17,7 @@ DEVICE = "cuda" if torch.cuda.is_available() else "cpu"
 # ======================
 # DOWNLOAD MODEL
 # ======================
 repo_path = snapshot_download(
     repo_id=MODEL_REPO,
     repo_type="model",
@@ -25,12 +26,18 @@ repo_path = snapshot_download(
 sys.path.insert(0, repo_path)
-from model import MTPMiniModel
-from tokenizer import MTPTokenizer
 # ======================
 # LOAD MODEL
 # ======================
 with open(os.path.join(repo_path, "mtp_mini.pkl"), "rb") as f:
     model_data = pickle.load(f)
@@ -53,6 +60,7 @@ model = MTPMiniModel(
 model.load_state_dict(model_data["model_state_dict"])
 model.to(DEVICE)
 model.eval()
 # ======================
 # FASTAPI
@@ -93,7 +101,7 @@ def generate(prompt: Prompt):
     return {"reply": response}
 # ======================
-# CHAT WEB (HTML)
 # ======================
 @app.get("/", response_class=HTMLResponse)
 def chat_ui():
@@ -102,122 +110,362 @@ def chat_ui():
 <html lang="es">
 <head>
 <meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>MTP Chat</title>
 <style>
 body {
-  margin: 0;
-  background: #343541;
-  font-family: system-ui, sans-serif;
-  display: flex;
-  justify-content: center;
-  height: 100vh;
-}
-.chat {
-  width: 100%;
-  max-width: 420px;
-  background: #40414f;
-  display: flex;
-  flex-direction: column;
 }
 header {
-  background: #202123;
-  color: white;
-  padding: 14px;
-  font-weight: bold;
-}
-.messages {
-  flex: 1;
-  padding: 14px;
-  overflow-y: auto;
-}
-.msg {
-  max-width: 85%;
-  padding: 12px 14px;
-  margin-bottom: 10px;
-  border-radius: 10px;
-  white-space: pre-wrap;
-}
-.user {
-  background: #0b93f6;
-  color: white;
-  margin-left: auto;
-}
-.bot {
-  background: #444654;
-  color: white;
-}
-.input {
-  display: flex;
-  padding: 10px;
-  background: #202123;
-}
-.input input {
-  flex: 1;
-  border: none;
-  padding: 12px;
-  border-radius: 8px;
-  font-size: 16px;
-}
-.input button {
-  background: #0b93f6;
-  border: none;
-  color: white;
-  padding: 0 16px;
-  border-radius: 8px;
-  margin-left: 8px;
 }
 </style>
 </head>
 <body>
-<div class="chat">
-  <header>🤖 MTP</header>
-  <div id="messages" class="messages"></div>
-  <div class="input">
-    <input id="input" placeholder="Escribe un mensaje..." autocomplete="off">
-    <button onclick="send()">Enviar</button>
-  </div>
 </div>
 <script>
-const messages = document.getElementById("messages");
-const input = document.getElementById("input");
-function add(text, cls) {
-  const div = document.createElement("div");
-  div.className = "msg " + cls;
-  div.textContent = text;
-  messages.appendChild(div);
-  messages.scrollTop = messages.scrollHeight;
 }
 async function send() {
-  const text = input.value.trim();
-  if (!text) return;
-  add(text, "user");
-  input.value = "";
-  const typing = document.createElement("div");
-  typing.className = "msg bot";
-  typing.textContent = "MTP está escribiendo…";
-  messages.appendChild(typing);
-  const res = await fetch("/generate", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ text })
-  });
-  const json = await res.json();
-  messages.removeChild(typing);
-  add(json.reply || "Sin respuesta", "bot");
 }
-input.addEventListener("keydown", e => {
-  if (e.key === "Enter") send();
 });
 </script>
 </body>
@@ -228,4 +476,5 @@ input.addEventListener("keydown", e => {
 # ENTRYPOINT (HF)
 # ======================
 if __name__ == "__main__":
-    uvicorn.run(app, host="0.0.0.0", port=7860)

 import torch
 import pickle
 from fastapi import FastAPI
+from fastapi.responses import HTMLResponse
 from pydantic import BaseModel
 from huggingface_hub import snapshot_download
 import uvicorn
 # ======================
 # DOWNLOAD MODEL
 # ======================
+print(f"Descargando/Verificando modelo desde {MODEL_REPO}...")
 repo_path = snapshot_download(
     repo_id=MODEL_REPO,
     repo_type="model",
 sys.path.insert(0, repo_path)
+try:
+    from model import MTPMiniModel
+    from tokenizer import MTPTokenizer
+except ImportError:
+    # Fallback por si la estructura del repo requiere ajustes de path
+    print("Advertencia: Asegúrate de que model.py y tokenizer.py estén en la raíz del repo descargado.")
+    pass
 # ======================
 # LOAD MODEL
 # ======================
+print("Cargando modelo en memoria...")
 with open(os.path.join(repo_path, "mtp_mini.pkl"), "rb") as f:
     model_data = pickle.load(f)
 model.load_state_dict(model_data["model_state_dict"])
 model.to(DEVICE)
 model.eval()
+print(f"Modelo cargado en {DEVICE}")
 # ======================
 # FASTAPI
     return {"reply": response}
 # ======================
+# CHAT WEB (HTML/CSS/JS MEJORADO)
 # ======================
 @app.get("/", response_class=HTMLResponse)
 def chat_ui():
 <html lang="es">
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<title>MTP AI</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
 <style>
+/* --- VARIABLES Y RESET --- */
+:root {
+    --bg-color: #1a1b1e;
+    --chat-bg: #101113;
+    --header-bg: rgba(26, 27, 30, 0.8);
+    --user-msg-bg: #2563eb;
+    --bot-msg-bg: #2c2e33;
+    --text-color: #e5e7eb;
+    --accent-color: #3b82f6;
+    --input-area-bg: rgba(26, 27, 30, 0.95);
+}
+* { box-sizing: border-box; outline: none; }
 body {
+    margin: 0;
+    background-color: var(--bg-color);
+    font-family: 'Inter', sans-serif;
+    color: var(--text-color);
+    display: flex;
+    flex-direction: column;
+    height: 100vh; /* Fallback */
+    height: 100dvh; /* Dynamic Viewport Height for mobile */
+    overflow: hidden;
 }
+/* --- HEADER --- */
 header {
+    background: var(--header-bg);
+    backdrop-filter: blur(10px);
+    padding: 15px 20px;
+    border-bottom: 1px solid #2c2e33;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 10;
+}
+.status-dot {
+    width: 10px;
+    height: 10px;
+    background-color: #10b981;
+    border-radius: 50%;
+    box-shadow: 0 0 8px #10b981;
+}
+header h1 {
+    font-size: 1.1rem;
+    margin: 0;
+    font-weight: 600;
+}
+/* --- AREA DE MENSAJES --- */
+.messages-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 80px 15px 100px 15px; /* Espacio para header e input */
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    scroll-behavior: smooth;
+}
+.msg-row {
+    display: flex;
+    width: 100%;
+}
+.msg-row.user { justify-content: flex-end; }
+.msg-row.bot { justify-content: flex-start; }
+.msg-bubble {
+    max-width: 85%;
+    padding: 12px 16px;
+    border-radius: 18px;
+    font-size: 0.95rem;
+    line-height: 1.5;
+    position: relative;
+    word-wrap: break-word;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
 }
+.msg-row.user .msg-bubble {
+    background: var(--user-msg-bg);
+    color: white;
+    border-bottom-right-radius: 4px;
+    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+.msg-row.bot .msg-bubble {
+    background: var(--bot-msg-bg);
+    color: var(--text-color);
+    border-bottom-left-radius: 4px;
+    border: 1px solid #373a40;
+    animation: slideUp 0.3s ease-out;
+}
+/* --- EFECTO DE ESCRITURA --- */
+.cursor::after {
+    content: '|';
+    animation: blink 1s step-start infinite;
+    color: var(--accent-color);
+}
+/* --- INPUT AREA --- */
+.input-area {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    background: var(--input-area-bg);
+    backdrop-filter: blur(10px);
+    padding: 15px;
+    border-top: 1px solid #2c2e33;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    z-index: 10;
+}
+.input-wrapper {
+    flex: 1;
+    background: #2c2e33;
+    border-radius: 24px;
+    padding: 2px;
+    display: flex;
+    align-items: center;
+    border: 1px solid transparent;
+    transition: border-color 0.2s;
+}
+.input-wrapper:focus-within {
+    border-color: var(--accent-color);
+}
+input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    padding: 12px 16px;
+    color: white;
+    font-size: 1rem;
+    font-family: inherit;
+}
+button {
+    background: var(--accent-color);
+    color: white;
+    border: none;
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.1s, background 0.2s;
+}
+button:active { transform: scale(0.95); }
+button:hover { background: #2563eb; }
+button svg { width: 20px; height: 20px; fill: white; }
+button:disabled { background: #4b5563; cursor: not-allowed; opacity: 0.7; }
+/* --- ANIMACIONES --- */
+@keyframes popIn {
+    from { opacity: 0; transform: scale(0.8); }
+    to { opacity: 1; transform: scale(1); }
+}
+@keyframes slideUp {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+@keyframes blink { 50% { opacity: 0; } }
+/* --- INDICADOR DE CARGA (Puntos) --- */
+.typing-indicator {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 5px 0;
+}
+.dot {
+    width: 6px;
+    height: 6px;
+    background: #9ca3af;
+    border-radius: 50%;
+    animation: bounce 1.4s infinite ease-in-out both;
+}
+.dot:nth-child(1) { animation-delay: -0.32s; }
+.dot:nth-child(2) { animation-delay: -0.16s; }
+@keyframes bounce {
+    0%, 80%, 100% { transform: scale(0); }
+    40% { transform: scale(1); }
+}
+/* Scrollbar styling */
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 10px; }
 </style>
 </head>
 <body>
+<header>
+    <div class="status-dot"></div>
+    <h1>MTP Chat</h1>
+</header>
+<div id="messages" class="messages-container">
+    <!-- Mensaje de bienvenida -->
+    <div class="msg-row bot">
+        <div class="msg-bubble">
+            ¡Hola! Soy MTP. ¿En qué puedo ayudarte hoy?
+        </div>
+    </div>
+</div>
+<div class="input-area">
+    <div class="input-wrapper">
+        <input id="input" placeholder="Escribe tu mensaje aquí..." autocomplete="off">
+    </div>
+    <button id="sendBtn" onclick="send()">
+        <svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path></svg>
+    </button>
 </div>
 <script>
+const messagesEl = document.getElementById("messages");
+const inputEl = document.getElementById("input");
+const sendBtn = document.getElementById("sendBtn");
+let isGenerating = false;
+// Auto-scroll al fondo
+function scrollToBottom() {
+    messagesEl.scrollTop = messagesEl.scrollHeight;
+}
+// Función para escribir texto letra por letra
+function typeWriter(element, text, speed = 20) {
+    let i = 0;
+    element.classList.add('cursor'); // Añadir cursor parpadeante
+    function type() {
+        if (i < text.length) {
+            element.textContent += text.charAt(i);
+            i++;
+            scrollToBottom();
+            setTimeout(type, speed);
+        } else {
+            element.classList.remove('cursor'); // Quitar cursor al terminar
+        }
+    }
+    type();
+}
+function addMessage(text, type) {
+    const row = document.createElement("div");
+    row.className = `msg-row ${type}`;
+    const bubble = document.createElement("div");
+    bubble.className = "msg-bubble";
+    if (type === 'user') {
+        bubble.textContent = text;
+    } else {
+        // Para el bot, lo dejamos vacío inicialmente para el efecto
+        // o para el indicador de carga
+    }
+    row.appendChild(bubble);
+    messagesEl.appendChild(row);
+    scrollToBottom();
+    return bubble; // Retornamos la burbuja para manipularla
 }
 async function send() {
+    const text = inputEl.value.trim();
+    if (!text || isGenerating) return;
+    // 1. Mostrar mensaje de usuario
+    addMessage(text, "user");
+    inputEl.value = "";
+    isGenerating = true;
+    sendBtn.disabled = true;
+    // 2. Mostrar indicador de "Escribiendo..."
+    const botRow = document.createElement("div");
+    botRow.className = "msg-row bot";
+    const botBubble = document.createElement("div");
+    botBubble.className = "msg-bubble";
+    // HTML de los puntos animados
+    botBubble.innerHTML = `
+        <div class="typing-indicator">
+            <div class="dot"></div>
+            <div class="dot"></div>
+            <div class="dot"></div>
+        </div>
+    `;
+    botRow.appendChild(botBubble);
+    messagesEl.appendChild(botRow);
+    scrollToBottom();
+    try {
+        // 3. Petición al backend
+        const res = await fetch("/generate", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ text })
+        });
+        const json = await res.json();
+        const replyText = json.reply || "No pude generar una respuesta.";
+        // 4. Remover burbuja de carga
+        messagesEl.removeChild(botRow);
+        // 5. Crear burbuja real y aplicar efecto máquina de escribir
+        const finalBubble = addMessage("", "bot");
+        typeWriter(finalBubble, replyText);
+    } catch (e) {
+        messagesEl.removeChild(botRow);
+        const errBubble = addMessage("Error de conexión.", "bot");
+        errBubble.style.color = "#ef4444";
+    } finally {
+        isGenerating = false;
+        sendBtn.disabled = false;
+        inputEl.focus();
+    }
 }
+// Enviar con Enter
+inputEl.addEventListener("keydown", e => {
+    if (e.key === "Enter") send();
 });
+// Enfoque inicial
+window.onload = () => inputEl.focus();
 </script>
 </body>
 # ENTRYPOINT (HF)
 # ======================
 if __name__ == "__main__":
+    uvicorn.run(app, host="0.0.0.0", port=7860)