Update app.py

app.py

@@ -2,15 +2,15 @@ import torch
 import gradio as gr
 from transformers import AutoModelForCausalLM, AutoTokenizer
 
-# ---------------------------------------------------------------------
-# 1. Configuración del Modelo (Backend)
-# ---------------------------------------------------------------------
+# ==========================================
+# 1. CONFIGURACIÓN DEL MODELO
+# ==========================================
 
 MODEL_ID = "DavidBazaldua/llama3_finetuned_transformes"
-DEVICE = "cpu" # Cambia a "cuda" si tienes GPU
+DEVICE = "cpu"  # Cambia a "cuda" si tienes GPU NVIDIA
 DTYPE = torch.float32
 
-# Cargamos tokenizador y modelo
+print(f"Cargando modelo: {MODEL_ID}...")
 tokenizer = AutoTokenizer.from_pretrained(MODEL_ID)
 model = AutoModelForCausalLM.from_pretrained(
     MODEL_ID,
@@ -19,6 +19,7 @@ model = AutoModelForCausalLM.from_pretrained(
 )
 model.to(DEVICE)
 model.eval()
+print("Modelo cargado exitosamente.")
 
 DEFAULT_SYSTEM_PROMPT = (
     "You are a helpful, precise AI assistant. "
@@ -26,29 +27,29 @@ DEFAULT_SYSTEM_PROMPT = (
     "Respond in English unless the user asks otherwise."
 )
 
-# ---------------------------------------------------------------------
-# 2. Lógica de Generación
-# ---------------------------------------------------------------------
+# ==========================================
+# 2. LÓGICA DEL CHAT
+# ==========================================
 
 def build_prompt(system_prompt, context, history, user_message):
     messages = []
-    # Prompt del sistema
+    # 1. System Prompt
     if system_prompt and system_prompt.strip():
         messages.append({"role": "system", "content": system_prompt})
 
-    # Contexto adicional
+    # 2. Contexto Extra
     if context and context.strip():
         messages.append({
             "role": "system",
             "content": f"Use the following context if relevant:\n{context}"
         })
 
-    # Historial
+    # 3. Historial de conversación
     for user, assistant in history:
         messages.append({"role": "user", "content": user})
         messages.append({"role": "assistant", "content": assistant})
 
-    # Mensaje actual
+    # 4. Mensaje actual
     messages.append({"role": "user", "content": user_message})
 
     prompt = tokenizer.apply_chat_template(
@@ -59,13 +60,17 @@ def build_prompt(system_prompt, context, history, user_message):
     return prompt
 
 def chat_logic(message, history, system_prompt, context, max_tokens, temperature, top_p):
+    if not message:
+        return "", history
+
     if history is None:
         history = []
 
     if not system_prompt:
         system_prompt = DEFAULT_SYSTEM_PROMPT
 
-    max_tokens = int(min(max_tokens, 512)) # Límite de seguridad
+    # Configuración de seguridad
+    max_tokens = int(min(max_tokens, 1024))
     
     prompt = build_prompt(system_prompt, context, history, message)
     
@@ -83,26 +88,25 @@ def chat_logic(message, history, system_prompt, context, max_tokens, temperature
 
     decoded = tokenizer.decode(outputs[0], skip_special_tokens=True)
     
-    # Limpieza básica para no repetir el prompt en la respuesta
+    # Limpiar la respuesta para no repetir el prompt
     if decoded.startswith(prompt):
         answer = decoded[len(prompt):].strip()
     else:
-        # Fallback simple por si el modelo no devuelve el prompt exacto al inicio
-        # (Depende de cómo funcione el modelo específico, a veces devuelve todo)
+        # Fallback por si el modelo repite cosas raras
         answer = decoded.split("assistant\n")[-1].strip()
 
     history.append((message, answer))
     return "", history
 
-# ---------------------------------------------------------------------
-# 3. Interfaz de Usuario (Diseño Idéntico a la Imagen)
-# ---------------------------------------------------------------------
+# ==========================================
+# 3. INTERFAZ GRÁFICA (CSS + LAYOUT)
+# ==========================================
 
-# CSS para replicar el estilo "Aurora" y Glassmorphism
+# CSS corregido para forzar modo claro y estilo Glass
 CSS = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
 
-/* --- FORZAR MODO CLARO Y VARIABLES --- */
+/* --- FORZAR VARIABLES CLARAS (Anti-Dark Mode) --- */
 :root, .dark, body, .gradio-container {
     --body-text-color: #1f2937 !important;
     --body-background-fill: transparent !important;
@@ -111,50 +115,46 @@ CSS = """
     --block-background-fill: transparent !important;
     --block-border-color: rgba(255,255,255, 0.4) !important;
     --input-background-fill: rgba(255, 255, 255, 0.9) !important;
+    --input-border-color: #e5e7eb !important;
 }
 
 body {
     font-family: 'Inter', sans-serif !important;
-    /* Tu gradiente original */
+    /* Gradiente Pastel de fondo */
     background: radial-gradient(circle at 10% 10%, #ffeef8 0%, #edf6ff 50%, #f7f0ff 90%) !important;
     color: #1f2937 !important;
     margin: 0; padding: 0;
+    min-height: 100vh;
 }
 
-/* Títulos */
-h1 { font-weight: 700 !important; color: #111827 !important; }
+/* Tipografía */
+h1 { font-weight: 700 !important; color: #111827 !important; letter-spacing: -0.02em; }
 p, span, label { color: #4b5563 !important; }
 
-/* --- TARJETAS DE CRISTAL (Panel Izquierdo) --- */
+/* --- TARJETA IZQUIERDA (Configuración) --- */
 .config-card {
-    background: rgba(255, 255, 255, 0.6) !important;
-    border: 1px solid rgba(255, 255, 255, 0.8) !important;
+    background: rgba(255, 255, 255, 0.5) !important;
+    border: 1px solid rgba(255, 255, 255, 0.6) !important;
     backdrop-filter: blur(12px);
     border-radius: 24px;
     padding: 24px;
-}
-
-/* Evitar que los grupos internos se pongan negros */
-.config-card .gr-form, 
-.config-card .gr-box, 
-.config-card .gr-block {
-    background: transparent !important;
-    border: none !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01);
 }
 
 /* Inputs y Sliders */
-textarea, input[type="text"] {
-    background-color: rgba(255, 255, 255, 0.95) !important;
+textarea, input[type="text"], input[type="number"] {
+    background-color: rgba(255, 255, 255, 0.8) !important;
     color: #111827 !important;
     border: 1px solid #e5e7eb !important;
     border-radius: 12px !important;
+    box-shadow: none !important;
 }
 input[type=range] { accent-color: #111827; }
 
-/* --- VENTANA DE CHAT (Panel Derecho) --- */
+/* --- VENTANA DE CHAT (Derecha) --- */
 .chat-window {
-    background: rgba(255, 255, 255, 0.85) !important;
-    border: 1px solid rgba(255, 255, 255, 0.9);
+    background: rgba(255, 255, 255, 0.75) !important;
+    border: 1px solid rgba(255, 255, 255, 0.8);
     backdrop-filter: blur(20px);
     border-radius: 24px;
     box-shadow: 0 20px 50px rgba(0,0,0,0.05);
@@ -164,34 +164,37 @@ input[type=range] { accent-color: #111827; }
 
 /* Header tipo Mac */
 .window-header {
-    padding: 20px 24px 10px 24px;
     display: flex; gap: 8px; align-items: center;
+    padding: 18px 24px 10px 24px;
+    background: transparent;
 }
 .dot { width: 12px; height: 12px; border-radius: 50%; }
 .red { background-color: #ff5f56; }
 .yellow { background-color: #ffbd2e; }
 .green { background-color: #27c93f; }
 
-/* El Chatbot Area Negra - FIX */
+/* Chatbot Area */
 #chatbot {
     background: transparent !important;
-    height: 500px !important;
+    border: none !important;
+    height: 550px !important;
 }
 
-/* Mensajes del chat */
+/* Burbujas del chat */
 .message.user {
-    background-color: #111827 !important;
+    background-color: #111827 !important; /* Usuario: Oscuro */
     color: white !important;
     border-radius: 18px 18px 4px 18px !important;
 }
 .message.bot {
-    background-color: #ffffff !important;
+    background-color: #ffffff !important; /* Bot: Blanco */
     color: #111827 !important;
     border: 1px solid #e5e7eb !important;
     border-radius: 18px 18px 18px 4px !important;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
 }
 
-/* Input inferior del chat */
+/* Input Area */
 .chat-input-area {
     padding: 16px 24px 24px 24px;
     display: flex; gap: 10px; align-items: center;
@@ -199,22 +202,55 @@ input[type=range] { accent-color: #111827; }
 #msg-box textarea {
     border-radius: 99px !important;
     background: #ffffff !important;
-    color: #000 !important;
+    padding: 12px 20px !important;
+    border: 1px solid #e5e7eb !important;
+    color: #111827 !important;
 }
 #send-btn {
     background: #111827 !important;
     color: white !important;
     border-radius: 50% !important;
-    width: 50px; height: 50px;
+    width: 46px; height: 46px;
+    font-size: 1.2em; padding: 0 !important;
+    display: flex; align-items: center; justify-content: center;
 }
+
+/* Logos Trusted By */
+.trusted-logos {
+    opacity: 0.5; filter: grayscale(100%);
+    margin-top: 30px; display: flex; gap: 20px;
+    font-weight: 600; font-size: 1.1rem; color: #9ca3af;
+}
+"""
+
+# HTML Helpers
+WINDOW_HEADER = """
+<div class="window-header">
+    <div class="dot red"></div>
+    <div class="dot yellow"></div>
+    <div class="dot green"></div>
+    <span style="margin-left: 12px; font-size: 0.85rem; color: #6b7280; font-weight: 500;">Iris Assistant</span>
+</div>
+"""
+
+TRUSTED_SECTION = """
+<div style="margin-top: 40px;">
+    <p style="font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #9ca3af; margin-bottom: 10px;">Trusted by</p>
+    <div class="trusted-logos">
+        <span>Pingdom</span>
+        <span>prismic</span>
+        <span>Unsplash</span>
+        <span>krisp</span>
+    </div>
+</div>
 """
 
-with gr.Blocks(css=CSS, title="Custom AI Layout") as demo:
+# Usamos theme=gr.themes.Soft() como base para evitar conflictos oscuros
+with gr.Blocks(theme=gr.themes.Soft(), css=CSS, title="Custom AI") as demo:
     
-    with gr.Row():
-        # -----------------------------------------------------------------
-        # COLUMNA IZQUIERDA: Título, Sliders, Contexto (Lo que pediste)
-        # -----------------------------------------------------------------
+    with gr.Row(elem_id="main-container"):
+        
+        # --- COLUMNA IZQUIERDA: Configuración ---
         with gr.Column(scale=4):
             gr.Markdown(
                 """
@@ -228,68 +264,55 @@ with gr.Blocks(css=CSS, title="Custom AI Layout") as demo:
             with gr.Group(elem_classes="config-card"):
                 gr.Markdown("### ⚙️ Configuración")
                 
-                # Contexto
                 context_input = gr.Textbox(
                     label="Contexto (Data)",
-                    placeholder="Pega aquí el texto o datos con los que quieres 'entrenar' al bot temporalmente...",
-                    lines=4
+                    placeholder="Pega aquí documentos o notas para dar contexto...",
+                    lines=5
                 )
                 
-                # System Prompt
                 system_prompt_input = gr.Textbox(
                     label="System Prompt",
                     value=DEFAULT_SYSTEM_PROMPT,
                     lines=2
                 )
                 
-                # Sliders
                 with gr.Row():
-                    temp_slider = gr.Slider(minimum=0.1, maximum=1.5, value=0.7, step=0.1, label="Creatividad (Temp)")
-                    tokens_slider = gr.Slider(minimum=64, maximum=1024, value=256, step=64, label="Max Tokens")
+                    temp_slider = gr.Slider(0.1, 1.5, value=0.7, step=0.1, label="Creatividad")
+                    tokens_slider = gr.Slider(64, 1024, value=256, step=64, label="Max Tokens")
                 
-                top_p_slider = gr.Slider(minimum=0.1, maximum=1.0, value=0.9, step=0.05, label="Top-P")
+                top_p_slider = gr.Slider(0.1, 1.0, value=0.9, step=0.05, label="Top-P")
 
-            # Sección visual "Trusted by"
-            gr.HTML(TRUSTED_HTML)
+            gr.HTML(TRUSTED_SECTION)
 
-        # -----------------------------------------------------------------
-        # COLUMNA DERECHA: El Chatbot Estilo Ventana
-        # -----------------------------------------------------------------
+        # --- COLUMNA DERECHA: Chatbot ---
         with gr.Column(scale=6):
-            # Contenedor que simula la ventana de la app
+            # Contenedor estilo ventana de app
             with gr.Column(elem_classes="chat-window"):
-                # 1. Los puntitos de colores
-                gr.HTML(WINDOW_HEADER_HTML)
+                gr.HTML(WINDOW_HEADER)
                 
-                # 2. El Chatbot
                 chatbot = gr.Chatbot(
                     elem_id="chatbot",
                     show_label=False,
-                    avatar_images=(None, "https://cdn-icons-png.flaticon.com/512/4712/4712027.png"), # Icono genérico para bot
-                    height=500,
+                    avatar_images=(None, "https://cdn-icons-png.flaticon.com/512/4712/4712027.png"),
+                    height=550,
                     layout="bubble"
                 )
                 
-                # 3. Área de input personalizada
                 with gr.Row(elem_classes="chat-input-area"):
                     msg = gr.Textbox(
                         show_label=False,
                         placeholder="Ask a question...",
-                        container=False,
                         scale=9,
-                        elem_id="msg-box"
+                        elem_id="msg-box",
+                        container=False,
+                        autofocus=True
                     )
                     send_btn = gr.Button("➝", scale=1, elem_id="send-btn")
 
-    # -----------------------------------------------------------------
-    # Eventos
-    # -----------------------------------------------------------------
+    # --- EVENTOS ---
     inputs_list = [msg, chatbot, system_prompt_input, context_input, tokens_slider, temp_slider, top_p_slider]
     
-    # Al presionar Enter
     msg.submit(chat_logic, inputs_list, [msg, chatbot])
-    
-    # Al hacer click en el botón de enviar
     send_btn.click(chat_logic, inputs_list, [msg, chatbot])
 
 if __name__ == "__main__":