Update app.py

app.py

@@ -1,8 +1,11 @@
 import os
+import sys
 import torch
 import json
+import time
+import gc
 import re
-from fastapi import FastAPI
+from fastapi import FastAPI, Request
 from fastapi.responses import HTMLResponse
 from fastapi.middleware.cors import CORSMiddleware
 from pydantic import BaseModel, Field
@@ -13,13 +16,26 @@ import torch.nn as nn
 import torch.nn.functional as F
 import sentencepiece as spm
 
-# ====================== CONFIGURACIÓN ======================
-DEVICE = "cuda" if torch.cuda.is_available() else "cpu"
-print(f"📱 Dispositivo: {DEVICE}")
+# ======================
+# CONFIGURACIÓN DE DISPOSITIVO
+# ======================
+if torch.cuda.is_available():
+    DEVICE = "cuda"
+    print("✅ GPU NVIDIA detectada. Usando CUDA.")
+else:
+    DEVICE = "cpu"
+    print("⚠️ GPU no detectada. Usando CPU (puede ser más lento).")
+
+if DEVICE == "cpu":
+    torch.set_num_threads(max(1, os.cpu_count() // 2))
+
+torch.set_grad_enabled(False)
 
 MODEL_REPO = "TeszenAI/MTP-3"
 
-# ====================== ARQUITECTURA DEL MODELO ======================
+# ======================
+# ARQUITECTURA DEL MODELO MEJORADA
+# ======================
 class LayerNorm(nn.Module):
     def __init__(self, d_model: int, eps: float = 1e-5):
         super().__init__()
@@ -98,8 +114,8 @@ class PositionalEncoding(nn.Module):
         return x + self.pe[:, :x.size(1), :]
 
 class MTPModel(nn.Module):
-    def __init__(self, vocab_size: int, d_model: int = 512, n_heads: int = 8,
-                 n_layers: int = 8, d_ff: int = 2048, dropout: float = 0.1, max_len: int = 512):
+    def __init__(self, vocab_size: int, d_model: int = 256, n_heads: int = 8,
+                 n_layers: int = 6, d_ff: int = 1024, dropout: float = 0.1, max_len: int = 512):
         super().__init__()
         self.vocab_size = vocab_size
         self.d_model = d_model
@@ -109,6 +125,7 @@ class MTPModel(nn.Module):
         self.blocks = nn.ModuleList([TransformerBlock(d_model, n_heads, d_ff, dropout) for _ in range(n_layers)])
         self.norm = LayerNorm(d_model)
         self.lm_head = nn.Linear(d_model, vocab_size)
+        
     def forward(self, x, mask=None):
         if mask is None:
             mask = torch.tril(torch.ones(x.size(1), x.size(1))).unsqueeze(0).unsqueeze(0).to(x.device)
@@ -119,214 +136,891 @@ class MTPModel(nn.Module):
         x = self.norm(x)
         return self.lm_head(x)
 
-# ====================== DESCARGA DEL MODELO ======================
-print(f"📦 Cargando modelo...")
+# ======================
+# NLP UTILITIES - PROCESAMIENTO DE LENGUAJE NATURAL
+# ======================
+class NLPProcessor:
+    """Procesador de lenguaje natural para entender mejor las intenciones"""
+    
+    @staticmethod
+    def detect_intent(text):
+        """Detecta la intención del usuario"""
+        text_lower = text.lower()
+        
+        intents = {
+            'saludo': ['hola', 'buenas', 'que tal', 'cómo estás', 'hey', 'saludos'],
+            'despedida': ['adiós', 'chao', 'hasta luego', 'nos vemos', 'bye'],
+            'agradecimiento': ['gracias', 'gracias por', 'te agradezco', 'muchas gracias'],
+            'pregunta': ['qué es', 'cómo funciona', 'por qué', 'cuándo', 'dónde', 'quién'],
+            'ayuda': ['ayuda', 'necesito ayuda', 'puedes ayudarme', 'me ayudas'],
+            'presentacion': ['quién eres', 'qué eres', 'presentate', 'eres'],
+            'capacidad': ['qué puedes hacer', 'funciones', 'capacidades', 'que sabes hacer'],
+            'sentimiento': ['estoy triste', 'estoy feliz', 'me siento', 'emocionado']
+        }
+        
+        for intent, keywords in intents.items():
+            for keyword in keywords:
+                if keyword in text_lower:
+                    return intent
+        return 'general'
+    
+    @staticmethod
+    def should_stop(response, min_length=30, max_length=200):
+        """Determina si la respuesta debe terminar"""
+        
+        # Palabras que indican final de respuesta
+        stop_phrases = [
+            '¿alguna otra pregunta?', '¿en qué más puedo ayudarte?',
+            '¿necesitas ayuda con algo más?', '¿tienes alguna otra duda?',
+            'espero haberte ayudado', 'que tengas un buen día',
+            'hasta luego', 'adiós', 'saludos', 'gracias por consultar'
+        ]
+        
+        # Si es demasiado corta, continuar
+        if len(response) < min_length:
+            return False
+        
+        # Si excede el máximo, cortar
+        if len(response) > max_length:
+            return True
+        
+        # Verificar frases de parada
+        for phrase in stop_phrases:
+            if phrase in response.lower():
+                return True
+        
+        # Verificar si termina con puntuación adecuada
+        if len(response) > 50:
+            last_chars = response[-10:]
+            # Termina con punto, signo de interrogación o exclamación
+            if any(last_chars.rstrip().endswith(p) for p in ['.', '?', '!', '…']):
+                # Contar oraciones completas
+                sentences = re.split(r'[.!?]+', response)
+                if len(sentences) >= 2:  # Al menos 2 oraciones completas
+                    return True
+        
+        return False
+    
+    @staticmethod
+    def clean_response(text):
+        """Limpia y mejora la respuesta"""
+        # Eliminar repeticiones excesivas
+        text = re.sub(r'(\b\w+\b)(?:\s+\1\b)+', r'\1', text)
+        
+        # Corregir espaciado
+        text = re.sub(r'\s+([.,!?;:])', r'\1', text)
+        
+        # Asegurar mayúscula al inicio
+        if text and text[0].islower():
+            text = text[0].upper() + text[1:]
+        
+        # Agregar punto final si no tiene
+        if text and not text[-1] in '.!?':
+            text += '.'
+        
+        return text.strip()
+    
+    @staticmethod
+    def extract_key_info(text):
+        """Extrae información clave del texto"""
+        # Detectar números
+        numbers = re.findall(r'\d+(?:\.\d+)?', text)
+        
+        # Detectar emails
+        emails = re.findall(r'[\w\.-]+@[\w\.-]+\.\w+', text)
+        
+        # Detectar URLs
+        urls = re.findall(r'https?://(?:[-\w.]|(?:%[\da-fA-F]{2}))+', text)
+        
+        return {
+            'has_numbers': bool(numbers),
+            'has_emails': bool(emails),
+            'has_urls': bool(urls),
+            'numbers': numbers,
+            'emails': emails,
+            'urls': urls
+        }
+
+# ======================
+# DESCARGA Y CARGA DEL MODELO
+# ======================
+def download_with_retry(repo_id, local_dir, max_retries=3):
+    for attempt in range(max_retries):
+        try:
+            print(f"📦 Intento {attempt + 1}/{max_retries} - Descargando modelo...")
+            repo_path = snapshot_download(
+                repo_id=repo_id,
+                repo_type="model",
+                local_dir=local_dir,
+                resume_download=True,
+                local_files_only=False
+            )
+            print(f"✅ Modelo descargado")
+            return repo_path
+        except Exception as e:
+            print(f"⚠️ Error: {str(e)[:100]}")
+            if attempt < max_retries - 1:
+                time.sleep(3)
+            else:
+                raise
+    return local_dir
+
+print(f"🚀 Cargando modelo...")
 
 if os.path.exists("mtp_repo") and os.path.exists("mtp_repo/mtp_model.pt"):
+    print("📁 Modelo en caché")
     repo_path = "mtp_repo"
 else:
     try:
-        repo_path = snapshot_download(repo_id=MODEL_REPO, repo_type="model", local_dir="mtp_repo", resume_download=True)
+        repo_path = download_with_retry(MODEL_REPO, "mtp_repo", max_retries=3)
     except:
         repo_path = "mtp_repo"
 
-# Configuración
+# Cargar configuración
 config_path = os.path.join(repo_path, "config.json")
 if os.path.exists(config_path):
     with open(config_path, "r") as f:
         config = json.load(f)
 else:
-    config = {"vocab_size": 10000, "d_model": 512, "n_heads": 8, "n_layers": 8, "d_ff": 2048, "dropout": 0.1, "max_len": 512}
+    config = {
+        "vocab_size": 2000,
+        "d_model": 256,
+        "n_heads": 8,
+        "n_layers": 6,
+        "d_ff": 1024,
+        "dropout": 0.1,
+        "max_len": 512
+    }
 
-# Tokenizador
+# Cargar tokenizador
 tokenizer_path = os.path.join(repo_path, "mtp_tokenizer.model")
 if os.path.exists(tokenizer_path):
     sp = spm.SentencePieceProcessor()
     sp.load(tokenizer_path)
     VOCAB_SIZE = sp.get_piece_size()
     config["vocab_size"] = VOCAB_SIZE
+    print(f"✅ Tokenizador: {VOCAB_SIZE} tokens")
 else:
     sp = None
-    VOCAB_SIZE = 10000
+    VOCAB_SIZE = config.get("vocab_size", 2000)
+
+print(f"🧠 Inicializando modelo...")
+print(f"   → Vocabulario: {VOCAB_SIZE}")
+print(f"   → Dimensión: {config['d_model']}")
+print(f"   → Capas: {config['n_layers']}")
 
 model = MTPModel(**config)
 model.to(DEVICE)
 
+# Cargar pesos
 model_path = os.path.join(repo_path, "mtp_model.pt")
 if os.path.exists(model_path):
     try:
         state_dict = torch.load(model_path, map_location=DEVICE)
         model.load_state_dict(state_dict)
-        print("✅ Modelo cargado")
-    except:
-        print("⚠️ Error cargando pesos")
+        print("✅ Pesos cargados")
+    except Exception as e:
+        print(f"⚠️ Error cargando pesos: {e}")
+
 model.eval()
 
-# ====================== API ======================
-app = FastAPI()
-app.add_middleware(CORSMiddleware, allow_origins=["*"], allow_methods=["*"], allow_headers=["*"])
+param_count = sum(p.numel() for p in model.parameters())
+print(f"✅ Modelo listo: {param_count:,} parámetros ({param_count/1e6:.1f}M)")
+
+# ======================
+# API CONFIG
+# ======================
+app = FastAPI(title="MTP API - Versión Mejorada", description="API con NLP integrado", version="2.0")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
 
 class PromptRequest(BaseModel):
     text: str = Field(..., max_length=2000)
+    max_tokens: int = Field(default=150, ge=10, le=300)
+    temperature: float = Field(default=0.7, ge=0.1, le=2.0)
+    top_k: int = Field(default=50, ge=1, le=100)
+    top_p: float = Field(default=0.9, ge=0.1, le=1.0)
 
-class TokenizerWrapper:
-    def __init__(self, sp_model):
-        self.sp = sp_model
-    def encode(self, text):
-        if self.sp is None:
-            return [ord(c) % 1000 for c in text[:200]]
-        return self.sp.encode(text)
-    def decode(self, tokens):
-        if self.sp is None:
-            return ''.join([chr(t % 128) if 32 <= t % 128 < 127 else ' ' for t in tokens])
-        return self.sp.decode(tokens)
-    def eos_id(self):
-        return self.sp.eos_id() if self.sp else 3
+# Inicializar NLP
+nlp = NLPProcessor()
 
-tokenizer = TokenizerWrapper(sp)
-
-# Diccionario de respuestas por categoría (fallback cuando el modelo alucina)
-RESPUESTAS_FALLBACK = {
-    "marketing": "El marketing digital incluye estrategias como SEO, marketing en redes sociales, email marketing, publicidad pagada y marketing de contenidos. ¿Te gustaría que profundice en alguna de estas áreas?",
-    "blackpink": "BLACKPINK es un grupo femenino de K-pop formado por Jisoo, Jennie, Rosé y Lisa. Tienen éxitos como 'Ddu-Du Ddu-Du', 'Kill This Love' y 'How You Like That'.",
-    "bts": "BTS es un grupo masculino de K-pop formado por RM, Jin, Suga, J-Hope, Jimin, V y Jungkook. Son conocidos por éxitos como 'Dynamite', 'Butter' y 'Boy With Luv'.",
-    "default": "Lo siento, no entendí bien tu pregunta. ¿Podrías reformularla? Estoy aquí para ayudarte con marketing, K-pop (BLACKPINK, BTS), tecnología, y más."
-}
-
-def detectar_tema(texto):
-    texto = texto.lower()
-    if "marketing" in texto or "seo" in texto or "publicidad" in texto or "redes sociales" in texto:
-        return "marketing"
-    if "blackpink" in texto or "jisoo" in texto or "jennie" in texto or "rosé" in texto or "lisa" in texto:
-        return "blackpink"
-    if "bts" in texto or "rm" in texto or "jin" in texto or "suga" in texto or "j-hope" in texto or "jimin" in texto or "v" in texto or "jungkook" in texto:
-        return "bts"
-    return None
-
-def generar_respuesta(prompt, max_length=200, temperature=0.7):
-    formatted = f"### Instrucción:\n{prompt}\n\n### Respuesta:\n"
-    input_ids = tokenizer.encode(formatted)
+# ======================
+# GENERACIÓN INTELIGENTE MEJORADA
+# ======================
+def generate_response_intelligent(model, tokenizer, prompt, max_length=150, temperature=0.7, top_k=50, top_p=0.9, device='cpu'):
+    model.eval()
+    
+    # Detectar intención para ajustar comportamiento
+    intent = nlp.detect_intent(prompt)
+    
+    # Ajustar temperatura según intención
+    if intent == 'despedida':
+        temperature = 0.5  # Más determinista
+        max_length = min(max_length, 60)  # Respuestas cortas
+    elif intent == 'pregunta':
+        temperature = 0.6  # Más preciso
+    elif intent == 'agradecimiento':
+        temperature = 0.5
+        max_length = min(max_length, 50)
+    
+    formatted_prompt = f"### Instrucción:\n{prompt}\n\n### Respuesta:\n"
+    input_ids = tokenizer.encode(formatted_prompt)
     generated = input_ids.copy()
     eos_id = tokenizer.eos_id()
     
-    for _ in range(max_length):
-        input_tensor = torch.tensor([generated[-model.max_len:]], dtype=torch.long).to(DEVICE)
+    # Contadores para control de parada
+    consecutive_punctuation = 0
+    last_chars = []
+    
+    for step in range(max_length):
+        input_tensor = torch.tensor([generated[-model.max_len:]], dtype=torch.long).to(device)
         with torch.no_grad():
             logits = model(input_tensor)
             next_logits = logits[0, -1, :] / temperature
         
+        # Top-k filtering
+        if top_k > 0:
+            indices_to_remove = next_logits < torch.topk(next_logits, top_k)[0][..., -1, None]
+            next_logits[indices_to_remove] = float('-inf')
+        
+        # Top-p filtering
+        if top_p < 1.0:
+            sorted_logits, sorted_indices = torch.sort(next_logits, descending=True)
+            cumulative_probs = torch.cumsum(F.softmax(sorted_logits, dim=-1), dim=-1)
+            sorted_indices_to_remove = cumulative_probs > top_p
+            sorted_indices_to_remove[..., 1:] = sorted_indices_to_remove[..., :-1].clone()
+            sorted_indices_to_remove[..., 0] = 0
+            indices_to_remove = sorted_indices[sorted_indices_to_remove]
+            next_logits[indices_to_remove] = float('-inf')
+        
         probs = F.softmax(next_logits, dim=-1)
         next_token = torch.multinomial(probs, 1).item()
         
+        # Detener en EOS
         if next_token == eos_id:
             break
+        
+        # Detener si hay demasiados signos de puntuación seguidos
+        token_str = tokenizer.decode([next_token]) if hasattr(tokenizer, 'decode') else str(next_token)
+        if token_str in '.!?':
+            consecutive_punctuation += 1
+            if consecutive_punctuation >= 3:
+                break
+        else:
+            consecutive_punctuation = 0
+        
+        # Guardar últimos caracteres para análisis
+        last_chars.append(token_str)
+        if len(last_chars) > 20:
+            last_chars.pop(0)
+        
+        # Detectar bucles de repetición
+        if len(last_chars) >= 10:
+            last_str = ''.join(last_chars[-5:])
+            if last_str in ''.join(last_chars[:-5]):
+                break
+        
         generated.append(next_token)
+        
+        # Verificar si ya es suficiente (para respuestas cortas)
+        current_response = tokenizer.decode(generated)
+        if "### Respuesta:" in current_response:
+            response_part = current_response.split("### Respuesta:")[-1].strip()
+            if nlp.should_stop(response_part, min_length=20, max_length=max_length):
+                break
     
+    # Decodificar respuesta
     response = tokenizer.decode(generated)
+    
+    # Extraer la parte de la respuesta
     if "### Respuesta:" in response:
         response = response.split("### Respuesta:")[-1].strip()
+    elif "Respuesta:" in response:
+        response = response.split("Respuesta:")[-1].strip()
+    elif "[/INST]" in response:
+        response = response.split("[/INST]")[-1].strip()
     
-    # Limpiar caracteres basura
-    response = re.sub(r'[^\w\s\u00C0-\u00FF.,!?¿¡\-:;"]+', ' ', response)
+    # Limpiar y mejorar respuesta
+    garbage_words = ['foompañances', 'ciudadores', 'mejtedon', 'calportedon', 'rápidodcor', 'baon', 'domol']
+    for word in garbage_words:
+        response = response.replace(word, '')
+    
+    # Limpiar caracteres especiales
+    response = re.sub(r'[^\w\s\u00C0-\u00FF\u0100-\u017F.,!?¿¡()\-:;"\']+', ' ', response)
     response = re.sub(r'\s+', ' ', response).strip()
     
-    # Verificar si la respuesta es coherente
-    if len(response) < 5 or "kSq" in response or "%" in response or "{" in response:
-        tema = detectar_tema(prompt)
-        if tema:
-            response = RESPUESTAS_FALLBACK.get(tema, RESPUESTAS_FALLBACK["default"])
-        else:
-            response = RESPUESTAS_FALLBACK["default"]
+    # Aplicar NLP a la respuesta
+    response = nlp.clean_response(response)
+    
+    # Respuestas por defecto según intención si está vacía
+    if len(response) < 3:
+        default_responses = {
+            'saludo': "¡Hola! ¿En qué puedo ayudarte hoy?",
+            'despedida': "¡Hasta luego! Que tengas un excelente día.",
+            'agradecimiento': "¡De nada! Estoy aquí para ayudarte cuando lo necesites.",
+            'ayuda': "Claro, estoy aquí para ayudarte. ¿Qué necesitas saber?",
+            'presentacion': "Soy MTP, un asistente virtual creado para responder preguntas y ayudarte con información.",
+            'general': "Entendido. ¿Hay algo específico en lo que pueda ayudarte?"
+        }
+        response = default_responses.get(intent, default_responses['general'])
     
     return response
 
+# ======================
+# ENDPOINTS
+# ======================
+ACTIVE_REQUESTS = 0
+
+class TokenizerWrapper:
+    def __init__(self, sp_model):
+        self.sp = sp_model
+    def encode(self, text):
+        if self.sp is None:
+            return [ord(c) % 1000 for c in text[:200]]
+        return self.sp.encode(text)
+    def decode(self, tokens):
+        if self.sp is None:
+            return ''.join([chr(t % 128) if 32 <= t % 128 < 127 else ' ' for t in tokens])
+        return self.sp.decode(tokens)
+    def eos_id(self):
+        return self.sp.eos_id() if self.sp else 3
+    def bos_id(self):
+        return self.sp.bos_id() if self.sp else 2
+    def pad_id(self):
+        return self.sp.pad_id() if self.sp else 0
+
+tokenizer_wrapper = TokenizerWrapper(sp)
+
 @app.post("/generate")
 async def generate(req: PromptRequest):
+    global ACTIVE_REQUESTS
+    ACTIVE_REQUESTS += 1
+    
     user_input = req.text.strip()
     if not user_input:
-        return {"reply": ""}
+        ACTIVE_REQUESTS -= 1
+        return {"reply": "", "tokens_generated": 0, "intent": None}
+    
+    # Detectar intención
+    intent = nlp.detect_intent(user_input)
     
     try:
-        response = generar_respuesta(user_input)
-        return {"reply": response}
+        response = generate_response_intelligent(
+            model, tokenizer_wrapper, user_input,
+            max_length=req.max_tokens,
+            temperature=req.temperature,
+            top_k=req.top_k,
+            top_p=req.top_p,
+            device=DEVICE
+        )
+        
+        # Extraer información clave
+        key_info = nlp.extract_key_info(response)
+        
+        return {
+            "reply": response,
+            "tokens_generated": len(response.split()),
+            "model": "MTP-Intelligent",
+            "intent": intent,
+            "has_numbers": key_info['has_numbers'],
+            "has_emails": key_info['has_emails']
+        }
     except Exception as e:
-        print(f"Error: {e}")
-        tema = detectar_tema(user_input)
-        return {"reply": RESPUESTAS_FALLBACK.get(tema, RESPUESTAS_FALLBACK["default"])}
+        print(f"❌ Error: {e}")
+        return {"reply": "Lo siento, ocurrió un error.", "error": str(e), "intent": intent}
+    finally:
+        ACTIVE_REQUESTS -= 1
+        if DEVICE == "cuda":
+            torch.cuda.empty_cache()
+        gc.collect()
 
-@app.get("/")
-async def chat_ui():
-    return HTMLResponse("""
+@app.get("/health")
+def health_check():
+    return {
+        "status": "healthy",
+        "model": "MTP-Intelligent",
+        "device": DEVICE,
+        "active_requests": ACTIVE_REQUESTS,
+        "vocab_size": VOCAB_SIZE
+    }
+
+@app.get("/info")
+def model_info():
+    return {
+        "model_name": "MTP-Intelligent",
+        "version": "2.0",
+        "architecture": config,
+        "parameters": sum(p.numel() for p in model.parameters()),
+        "device": DEVICE,
+        "nlp_enabled": True
+    }
+
+@app.post("/analyze")
+async def analyze_intent(req: PromptRequest):
+    """Endpoint para analizar intención sin generar respuesta"""
+    intent = nlp.detect_intent(req.text)
+    return {
+        "text": req.text,
+        "intent": intent,
+        "confidence": 0.85  # Por ahora fijo, se puede mejorar
+    }
+
+# ======================
+# INTERFAZ WEB MEJORADA
+# ======================
+@app.get("/", response_class=HTMLResponse)
+def chat_ui():
+    return """
 <!DOCTYPE html>
-<html>
+<html lang="es">
 <head>
-    <title>MTP Asistente</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <style>
-        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; background: #131314; color: #e3e3e3; }
-        #chat { height: 500px; border: 1px solid #333; overflow-y: auto; padding: 10px; margin-bottom: 10px; border-radius: 10px; background: #1E1F20; }
-        .user { text-align: right; margin: 10px; }
-        .user span { background: #4a9eff; padding: 8px 15px; border-radius: 18px; display: inline-block; }
-        .bot { text-align: left; margin: 10px; }
-        .bot span { background: #282a2c; padding: 8px 15px; border-radius: 18px; display: inline-block; }
-        input { width: 80%; padding: 10px; border-radius: 25px; border: none; background: #1E1F20; color: white; }
-        button { padding: 10px 20px; border-radius: 25px; border: none; background: #4a9eff; color: white; cursor: pointer; }
-        .typing { opacity: 0.7; font-style: italic; }
-    </style>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<title>MTP - Asistente Inteligente</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@300;400;500;600&display=swap" rel="stylesheet">
+<style>
+:root {
+    --bg-color: #131314;
+    --surface-color: #1E1F20;
+    --accent-color: #4a9eff;
+    --text-primary: #e3e3e3;
+    --text-secondary: #9aa0a6;
+    --user-bubble: #282a2c;
+    --success-color: #00c853;
+}
+* { box-sizing: border-box; outline: none; -webkit-tap-highlight-color: transparent; }
+body {
+    margin: 0;
+    background-color: var(--bg-color);
+    font-family: 'Inter', sans-serif;
+    color: var(--text-primary);
+    height: 100dvh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+header {
+    padding: 12px 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: rgba(19, 19, 20, 0.85);
+    backdrop-filter: blur(12px);
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 50;
+    border-bottom: 1px solid rgba(255,255,255,0.05);
+}
+.brand-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    cursor: pointer;
+}
+.brand-logo {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #4a9eff, #00c853);
+}
+.brand-text {
+    font-weight: 500;
+    font-size: 1.05rem;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.version-badge {
+    font-size: 0.75rem;
+    background: rgba(74, 158, 255, 0.15);
+    color: #8ab4f8;
+    padding: 2px 8px;
+    border-radius: 12px;
+    font-weight: 600;
+}
+.chat-scroll {
+    flex: 1;
+    overflow-y: auto;
+    padding: 80px 20px 40px 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+    max-width: 850px;
+    margin: 0 auto;
+    width: 100%;
+    scroll-behavior: smooth;
+}
+.msg-row {
+    display: flex;
+    gap: 16px;
+    width: 100%;
+    opacity: 0;
+    transform: translateY(10px);
+    animation: slideUpFade 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+}
+.msg-row.user { justify-content: flex-end; }
+.msg-row.bot { justify-content: flex-start; align-items: flex-start; }
+.msg-content {
+    line-height: 1.6;
+    font-size: 1rem;
+    word-wrap: break-word;
+    max-width: 85%;
+}
+.user .msg-content {
+    background-color: var(--user-bubble);
+    padding: 10px 18px;
+    border-radius: 18px;
+    border-top-right-radius: 4px;
+    color: #fff;
+}
+.bot .msg-content-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: 100%;
+}
+.bot .msg-text {
+    padding-top: 6px;
+    color: var(--text-primary);
+}
+.bot-avatar {
+    width: 34px;
+    height: 34px;
+    min-width: 34px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #4a9eff, #00c853);
+    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+}
+.bot-actions {
+    display: flex;
+    gap: 10px;
+    opacity: 0;
+    transition: opacity 0.3s;
+    margin-top: 5px;
+}
+.action-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    transition: color 0.2s, background 0.2s;
+}
+.action-btn:hover {
+    color: var(--text-primary);
+    background: rgba(255,255,255,0.08);
+}
+.action-btn svg { width: 16px; height: 16px; fill: currentColor; }
+.typing-cursor::after {
+    content: '';
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    background: var(--accent-color);
+    border-radius: 50%;
+    margin-left: 5px;
+    vertical-align: middle;
+    animation: blink 1s infinite;
+}
+.footer-container {
+    padding: 0 20px 20px 20px;
+    background: linear-gradient(to top, var(--bg-color) 85%, transparent);
+    position: relative;
+    z-index: 60;
+}
+.input-box {
+    max-width: 850px;
+    margin: 0 auto;
+    background: var(--surface-color);
+    border-radius: 28px;
+    padding: 8px 10px 8px 20px;
+    display: flex;
+    align-items: center;
+    border: 1px solid rgba(255,255,255,0.1);
+    transition: border-color 0.2s, box-shadow 0.2s;
+}
+.input-box:focus-within {
+    border-color: rgba(74, 158, 255, 0.5);
+    box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.1);
+}
+#userInput {
+    flex: 1;
+    background: transparent;
+    border: none;
+    color: white;
+    font-size: 1rem;
+    font-family: inherit;
+    padding: 10px 0;
+}
+#mainBtn {
+    background: var(--accent-color);
+    color: white;
+    border: none;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    margin-left: 8px;
+    transition: transform 0.2s;
+}
+#mainBtn:hover { transform: scale(1.05); background: #3a7ed4; }
+.disclaimer {
+    text-align: center;
+    font-size: 0.75rem;
+    color: #666;
+    margin-top: 12px;
+}
+@keyframes slideUpFade {
+    from { opacity: 0; transform: translateY(15px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
+@keyframes pulseAvatar {
+    0% { box-shadow: 0 0 0 0 rgba(74, 158, 255, 0.4); }
+    70% { box-shadow: 0 0 0 8px rgba(74, 158, 255, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(74, 158, 255, 0); }
+}
+.pulsing { animation: pulseAvatar 1.5s infinite; }
+.intent-badge {
+    font-size: 0.7rem;
+    background: rgba(0, 200, 83, 0.15);
+    color: #00c853;
+    padding: 2px 8px;
+    border-radius: 12px;
+    display: inline-block;
+    margin-top: 5px;
+}
+::-webkit-scrollbar { width: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
+</style>
 </head>
 <body>
-    <h1>🤖 MTP Asistente</h1>
-    <div id="chat">
-        <div class="bot"><span>¡Hola! Soy MTP. Puedo ayudarte con marketing, K-pop (BLACKPINK, BTS), tecnología y más. ¿Qué necesitas?</span></div>
+<header>
+    <div class="brand-wrapper" onclick="location.reload()">
+        <div class="brand-logo"></div>
+        <div class="brand-text">
+            MTP <span class="version-badge">Inteligente</span>
+        </div>
+    </div>
+</header>
+<div id="chatScroll" class="chat-scroll">
+    <div class="msg-row bot" style="animation-delay: 0.1s;">
+        <div class="bot-avatar"></div>
+        <div class="msg-content-wrapper">
+            <div class="msg-text">
+                ¡Hola! Soy MTP, tu asistente inteligente. ¿En qué puedo ayudarte hoy?
+            </div>
+        </div>
+    </div>
+</div>
+<div class="footer-container">
+    <div class="input-box">
+        <input type="text" id="userInput" placeholder="Escribe tu mensaje..." autocomplete="off">
+        <button id="mainBtn" onclick="handleBtnClick()">➤</button>
     </div>
-    <div>
-        <input type="text" id="input" placeholder="Escribe tu mensaje..." autocomplete="off">
-        <button onclick="sendMessage()">Enviar</button>
+    <div class="disclaimer">
+        MTP usa NLP para entender mejor tu consulta • Respuestas inteligentes
     </div>
-    <script>
-        const chat = document.getElementById('chat');
-        const input = document.getElementById('input');
+</div>
+<script>
+const chatScroll = document.getElementById('chatScroll');
+const userInput = document.getElementById('userInput');
+const mainBtn = document.getElementById('mainBtn');
+let isGenerating = false;
+let abortController = null;
+let typingTimeout = null;
+let lastUserPrompt = "";
+
+function scrollToBottom() {
+    chatScroll.scrollTop = chatScroll.scrollHeight;
+}
+
+function setBtnState(state) {
+    if (state === 'sending') {
+        mainBtn.innerHTML = "⏹";
+        isGenerating = true;
+    } else {
+        mainBtn.innerHTML = "➤";
+        isGenerating = false;
+        abortController = null;
+    }
+}
+
+function handleBtnClick() {
+    if (isGenerating) {
+        stopGeneration();
+    } else {
+        sendMessage();
+    }
+}
+
+function stopGeneration() {
+    if (abortController) abortController.abort();
+    if (typingTimeout) clearTimeout(typingTimeout);
+    const activeCursor = document.querySelector('.typing-cursor');
+    if (activeCursor) activeCursor.classList.remove('typing-cursor');
+    const activeAvatar = document.querySelector('.pulsing');
+    if (activeAvatar) activeAvatar.classList.remove('pulsing');
+    setBtnState('idle');
+    userInput.focus();
+}
+
+async function sendMessage(textOverride = null) {
+    const text = textOverride || userInput.value.trim();
+    if (!text || isGenerating) return;
+    
+    lastUserPrompt = text;
+    if (!textOverride) {
+        userInput.value = '';
+        addMessage(text, 'user');
+    }
+    
+    setBtnState('sending');
+    abortController = new AbortController();
+    
+    const botRow = document.createElement('div');
+    botRow.className = 'msg-row bot';
+    const avatar = document.createElement('div');
+    avatar.className = 'bot-avatar pulsing'; 
+    const wrapper = document.createElement('div');
+    wrapper.className = 'msg-content-wrapper';
+    const msgText = document.createElement('div');
+    msgText.className = 'msg-text'; 
+    wrapper.appendChild(msgText);
+    botRow.appendChild(avatar);
+    botRow.appendChild(wrapper);
+    chatScroll.appendChild(botRow);
+    scrollToBottom();
+    
+    try {
+        const response = await fetch('/generate', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ 
+                text: text, 
+                max_tokens: 200,
+                temperature: 0.7,
+                top_k: 50,
+                top_p: 0.9
+            }),
+            signal: abortController.signal
+        });
+        
+        const data = await response.json();
+        if (!isGenerating) return; 
         
-        function addMessage(text, sender) {
-            const div = document.createElement('div');
-            div.className = sender;
-            div.innerHTML = `<span>${text}</span>`;
-            chat.appendChild(div);
-            chat.scrollTop = chat.scrollHeight;
+        avatar.classList.remove('pulsing');
+        const reply = data.reply || "No entendí eso.";
+        
+        // Mostrar intención detectada si está disponible
+        if (data.intent && data.intent !== 'general') {
+            const intentSpan = document.createElement('div');
+            intentSpan.className = 'intent-badge';
+            intentSpan.textContent = `🎯 Intención: ${data.intent}`;
+            wrapper.appendChild(intentSpan);
         }
         
-        async function sendMessage() {
-            const text = input.value.trim();
-            if (!text) return;
-            input.value = '';
-            addMessage(text, 'user');
-            
-            const loadingDiv = document.createElement('div');
-            loadingDiv.className = 'bot';
-            loadingDiv.innerHTML = '<span class="typing">✍️ Pensando...</span>';
-            chat.appendChild(loadingDiv);
-            chat.scrollTop = chat.scrollHeight;
-            
-            try {
-                const response = await fetch('/generate', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ text: text })
-                });
-                const data = await response.json();
-                loadingDiv.remove();
-                addMessage(data.reply, 'bot');
-            } catch (error) {
-                loadingDiv.innerHTML = '<span class="typing">❌ Error de conexión</span>';
+        await typeWriter(msgText, reply);
+        if (isGenerating) {
+            addActions(wrapper, reply);
+            setBtnState('idle');
+        }
+    } catch (error) {
+        if (error.name === 'AbortError') {
+            msgText.textContent += " [Detenido]";
+        } else {
+            avatar.classList.remove('pulsing');
+            msgText.textContent = "Error de conexión. Intenta de nuevo.";
+            msgText.style.color = "#ff8b8b";
+            setBtnState('idle');
+        }
+    }
+}
+
+function addMessage(text, sender) {
+    const row = document.createElement('div');
+    row.className = `msg-row ${sender}`;
+    const content = document.createElement('div');
+    content.className = 'msg-content';
+    content.textContent = text;
+    row.appendChild(content);
+    chatScroll.appendChild(row);
+    scrollToBottom();
+}
+
+function typeWriter(element, text, speed = 10) {
+    return new Promise(resolve => {
+        let i = 0;
+        element.classList.add('typing-cursor');
+        function type() {
+            if (!isGenerating) {
+                element.classList.remove('typing-cursor');
+                resolve();
+                return;
+            }
+            if (i < text.length) {
+                element.textContent += text.charAt(i);
+                i++;
+                scrollToBottom();
+                typingTimeout = setTimeout(type, speed + Math.random() * 5);
+            } else {
+                element.classList.remove('typing-cursor');
+                resolve();
             }
         }
-        
-        input.addEventListener('keypress', (e) => { if (e.key === 'Enter') sendMessage(); });
-    </script>
+        type();
+    });
+}
+
+function addActions(wrapperElement, textToCopy) {
+    const actionsDiv = document.createElement('div');
+    actionsDiv.className = 'bot-actions';
+    
+    const copyBtn = document.createElement('button');
+    copyBtn.className = 'action-btn';
+    copyBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>`;
+    copyBtn.onclick = () => { navigator.clipboard.writeText(textToCopy); };
+    
+    const regenBtn = document.createElement('button');
+    regenBtn.className = 'action-btn';
+    regenBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 4v6h-6"></path><path d="M1 20v-6h6"></path><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>`;
+    regenBtn.onclick = () => { sendMessage(lastUserPrompt); };
+    
+    actionsDiv.appendChild(copyBtn);
+    actionsDiv.appendChild(regenBtn);
+    wrapperElement.appendChild(actionsDiv);
+    requestAnimationFrame(() => actionsDiv.style.opacity = "1");
+    scrollToBottom();
+}
+
+userInput.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') handleBtnClick();
+});
+
+window.onload = () => userInput.focus();
+</script>
 </body>
 </html>
-    """)
+"""
 
 if __name__ == "__main__":
-    uvicorn.run(app, host="0.0.0.0", port=7860)
+    port = int(os.environ.get("PORT", 7860))
+    print(f"\n🚀 MTP Inteligente iniciado en puerto {port}")
+    print(f"🌐 http://0.0.0.0:{port}")
+    
+    uvicorn.run(app, host="0.0.0.0", port=port, log_level="info")