Update app.py

app.py

@@ -3,14 +3,14 @@ import gradio as gr
 from transformers import AutoModelForCausalLM, AutoTokenizer
 
 # ==========================================
-# 1. MODEL CONFIGURATION
+# 1. CONFIGURACIÓN DEL MODELO
 # ==========================================
 
 MODEL_ID = "DavidBazaldua/llama3_finetuned_transformes"
 DEVICE = "cpu"
 DTYPE = torch.float32
 
-print(f"Loading model: {MODEL_ID}...")
+print(f"Cargando modelo: {MODEL_ID}...")
 tokenizer = AutoTokenizer.from_pretrained(MODEL_ID)
 model = AutoModelForCausalLM.from_pretrained(
     MODEL_ID,
@@ -19,7 +19,7 @@ model = AutoModelForCausalLM.from_pretrained(
 )
 model.to(DEVICE)
 model.eval()
-print("Model loaded.")
+print("Modelo cargado.")
 
 DEFAULT_SYSTEM_PROMPT = (
     "You are a helpful, precise AI assistant. "
@@ -28,7 +28,7 @@ DEFAULT_SYSTEM_PROMPT = (
 )
 
 # ==========================================
-# 2. CHAT LOGIC
+# 2. LÓGICA DEL CHAT
 # ==========================================
 
 def build_prompt(system_prompt, context, history, user_message):
@@ -79,7 +79,7 @@ def chat_logic(message, history, system_prompt, context, max_tokens, temperature
     return "", history
 
 # ==========================================
-# 3. UI DESIGN (FINAL CLEAN MONOCHROME)
+# 3. DISEÑO UI (FINAL)
 # ==========================================
 
 CSS = """
@@ -95,7 +95,7 @@ CSS = """
     --block-border-color: transparent !important;
     --input-background-fill: #ffffff !important;
     
-    /* KILL PURPLE VARIABLES */
+    /* ELIMINAR MORADOS */
     --primary-500: #000000 !important;
     --primary-600: #000000 !important;
     --secondary-500: #000000 !important;
@@ -112,7 +112,7 @@ body {
 h1 { font-weight: 700 !important; color: #000000 !important; letter-spacing: -0.02em; }
 p, span, label { color: #374151 !important; }
 
-/* --- LEFT PANEL --- */
+/* --- PANEL IZQUIERDO --- */
 .config-card {
     background: rgba(255, 255, 255, 0.4) !important; 
     border: 1px solid rgba(255, 255, 255, 0.5) !important;
@@ -121,7 +121,6 @@ p, span, label { color: #374151 !important; }
     padding: 24px !important;
 }
 
-/* Make everything inside config-card transparent */
 .config-card div, .config-card .gr-form, .config-card .gr-box, 
 .config-card .gr-group, .config-card .gr-block, .config-card .gr-panel {
     background: transparent !important;
@@ -129,8 +128,7 @@ p, span, label { color: #374151 !important; }
     box-shadow: none !important;
 }
 
-/* ANTI-PURPLE FIX FOR LABELS */
-/* This forces the labels to be transparent and black text */
+/* Etiquetas en negro */
 .config-card label span, 
 .config-card .label-wrap span,
 .config-card .block-title {
@@ -144,7 +142,7 @@ p, span, label { color: #374151 !important; }
     padding: 0 !important;
 }
 
-/* Inputs: White & Clean */
+/* Inputs configuración */
 .config-card textarea, 
 .config-card input[type="text"], 
 .config-card input[type="number"] {
@@ -155,13 +153,13 @@ p, span, label { color: #374151 !important; }
     box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
 }
 
-/* Sliders: Force Black */
+/* Sliders negros */
 input[type=range] {
     accent-color: #000000 !important;
-    filter: grayscale(100%) brightness(0) !important; /* Forces it to be black regardless of theme */
+    filter: grayscale(100%) brightness(0) !important;
 }
 
-/* --- RIGHT PANEL: CHAT WINDOW --- */
+/* --- PANEL DERECHO: CHAT --- */
 .chat-window {
     background: rgba(255, 255, 255, 0.95) !important;
     border: 1px solid rgba(255, 255, 255, 0.9);
@@ -181,17 +179,27 @@ input[type=range] {
 .yellow { background-color: #ffbd2e; }
 .green { background-color: #27c93f; }
 
-/* Chatbot */
 #chatbot {
     background: transparent !important;
     border: none !important;
     height: 550px !important;
 }
+
+/* --- BURBUJAS DE CHAT --- */
+
+/* Usuario: Negro con Texto BLANCO */
 .message.user {
     background-color: #000000 !important;
-    color: white !important;
+    color: #ffffff !important; /* TEXTO BLANCO FORZADO */
     border-radius: 18px 18px 4px 18px !important;
+    font-weight: 500;
+}
+/* Asegurar que cualquier texto dentro de la burbuja user sea blanco */
+.message.user p, .message.user span {
+    color: #ffffff !important;
 }
+
+/* Bot: Blanco con Texto Negro */
 .message.bot {
     background-color: #ffffff !important;
     color: #000000 !important;
@@ -200,20 +208,25 @@ input[type=range] {
     box-shadow: 0 2px 5px rgba(0,0,0,0.02);
 }
 
-/* Input Area */
+/* --- CAJITA DE INPUT CON SCROLLBAR ("SLICER") --- */
 .chat-input-area {
     padding: 16px 24px 24px 24px;
-    display: flex; gap: 10px; align-items: center;
+    display: flex; gap: 10px; align-items: flex-end; /* Alinear abajo para que se vea bien */
 }
+
 #msg-box textarea {
-    border-radius: 99px !important;
     background: #ffffff !important;
-    padding: 12px 20px !important;
+    padding: 12px 18px !important;
     border: 1px solid #e5e7eb !important;
     color: #000000 !important;
+    
+    /* AQUÍ ESTÁ EL TRUCO DEL "SLICER" */
+    max-height: 120px !important;  /* Altura máxima fija */
+    overflow-y: auto !important;   /* Aparece scrollbar si te pasas */
+    border-radius: 24px !important; /* Un poco menos redondo para que quepa el scroll */
 }
 
-/* Button: Minimalist Black Arrow */
+/* Flecha enviar */
 #send-btn {
     background: transparent !important;
     color: #000000 !important;
@@ -222,6 +235,7 @@ input[type=range] {
     font-size: 1.6rem;
     padding: 0 10px !important;
     width: auto !important;
+    margin-bottom: 8px; /* Ajuste para alinear con el textbox */
 }
 #send-btn:hover {
     transform: translateX(3px);
@@ -261,7 +275,7 @@ with gr.Blocks(theme=gr.themes.Soft(), css=CSS, title="Custom AI") as demo:
     
     with gr.Row(elem_id="main-container"):
         
-        # --- LEFT PANEL ---
+        # --- IZQUIERDA ---
         with gr.Column(scale=4):
             gr.Markdown(
                 """
@@ -295,7 +309,7 @@ with gr.Blocks(theme=gr.themes.Soft(), css=CSS, title="Custom AI") as demo:
 
             gr.HTML(TRUSTED_SECTION)
 
-        # --- RIGHT PANEL ---
+        # --- DERECHA ---
         with gr.Column(scale=6):
             with gr.Column(elem_classes="chat-window"):
                 gr.HTML(WINDOW_HEADER)
@@ -315,7 +329,8 @@ with gr.Blocks(theme=gr.themes.Soft(), css=CSS, title="Custom AI") as demo:
                         scale=9,
                         elem_id="msg-box",
                         container=False,
-                        autofocus=True
+                        autofocus=True,
+                        lines=1  # Empieza con 1 línea
                     )
                     send_btn = gr.Button("➝", scale=1, elem_id="send-btn")