Update app.py

app.py

@@ -3,14 +3,14 @@ import gradio as gr
 from transformers import AutoModelForCausalLM, AutoTokenizer
 
 # ==========================================
-# 1. CONFIGURACIÓN DEL MODELO
+# 1. MODEL CONFIGURATION
 # ==========================================
 
 MODEL_ID = "DavidBazaldua/llama3_finetuned_transformes"
-DEVICE = "cpu"  # Cambia a "cuda" si tienes GPU NVIDIA
+DEVICE = "cpu"  # Change to "cuda" if using GPU
 DTYPE = torch.float32
 
-print(f"Cargando modelo: {MODEL_ID}...")
+print(f"Loading model: {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("Modelo cargado exitosamente.")
+print("Model loaded successfully.")
 
 DEFAULT_SYSTEM_PROMPT = (
     "You are a helpful, precise AI assistant. "
@@ -28,7 +28,7 @@ DEFAULT_SYSTEM_PROMPT = (
 )
 
 # ==========================================
-# 2. LÓGICA DEL CHAT
+# 2. CHAT LOGIC
 # ==========================================
 
 def build_prompt(system_prompt, context, history, user_message):
@@ -37,19 +37,19 @@ def build_prompt(system_prompt, context, history, user_message):
     if system_prompt and system_prompt.strip():
         messages.append({"role": "system", "content": system_prompt})
 
-    # 2. Contexto Extra
+    # 2. Extra Context
     if context and context.strip():
         messages.append({
             "role": "system",
             "content": f"Use the following context if relevant:\n{context}"
         })
 
-    # 3. Historial de conversación
+    # 3. History
     for user, assistant in history:
         messages.append({"role": "user", "content": user})
         messages.append({"role": "assistant", "content": assistant})
 
-    # 4. Mensaje actual
+    # 4. Current Message
     messages.append({"role": "user", "content": user_message})
 
     prompt = tokenizer.apply_chat_template(
@@ -69,7 +69,6 @@ def chat_logic(message, history, system_prompt, context, max_tokens, temperature
     if not system_prompt:
         system_prompt = DEFAULT_SYSTEM_PROMPT
 
-    # Configuración de seguridad
     max_tokens = int(min(max_tokens, 1024))
     
     prompt = build_prompt(system_prompt, context, history, message)
@@ -88,73 +87,91 @@ def chat_logic(message, history, system_prompt, context, max_tokens, temperature
 
     decoded = tokenizer.decode(outputs[0], skip_special_tokens=True)
     
-    # Limpiar la respuesta para no repetir el prompt
     if decoded.startswith(prompt):
         answer = decoded[len(prompt):].strip()
     else:
-        # Fallback por si el modelo repite cosas raras
         answer = decoded.split("assistant\n")[-1].strip()
 
     history.append((message, answer))
     return "", history
 
 # ==========================================
-# 3. INTERFAZ GRÁFICA (CSS + LAYOUT)
+# 3. UI DESIGN (CSS + LAYOUT)
 # ==========================================
 
-# 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 VARIABLES CLARAS (Anti-Dark Mode) --- */
+/* --- GLOBAL RESET & LIGHT THEME ENFORCEMENT --- */
 :root, .dark, body, .gradio-container {
     --body-text-color: #1f2937 !important;
-    --body-background-fill: transparent !important;
     --background-fill-primary: transparent !important;
     --background-fill-secondary: transparent !important;
     --block-background-fill: transparent !important;
-    --block-border-color: rgba(255,255,255, 0.4) !important;
+    --block-border-color: transparent !important;
     --input-background-fill: rgba(255, 255, 255, 0.9) !important;
     --input-border-color: #e5e7eb !important;
+    --color-accent-soft: transparent !important;
 }
 
 body {
     font-family: 'Inter', sans-serif !important;
-    /* 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;
 }
 
-/* Tipografía */
+/* Typography */
 h1 { font-weight: 700 !important; color: #111827 !important; letter-spacing: -0.02em; }
 p, span, label { color: #4b5563 !important; }
 
-/* --- TARJETA IZQUIERDA (Configuración) --- */
+/* --- LEFT PANEL: CONFIG CARD --- */
 .config-card {
     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;
+    padding: 24px !important;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01);
 }
 
-/* Inputs y Sliders */
-textarea, input[type="text"], input[type="number"] {
-    background-color: rgba(255, 255, 255, 0.8) !important;
+/* CRITICAL FIX: Make inner blocks transparent inside the config card */
+.config-card .gr-form, 
+.config-card .gr-box, 
+.config-card .gr-block,
+.config-card .gr-compact {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+
+/* Style the Labels (Context, System Prompt, etc.) */
+.config-card label span {
+    color: #111827 !important;
+    font-weight: 600 !important;
+    font-size: 0.85rem !important;
+    margin-bottom: 6px !important;
+}
+
+/* Style the Inputs (White boxes) */
+.config-card textarea, 
+.config-card input[type="text"], 
+.config-card input[type="number"] {
+    background-color: rgba(255, 255, 255, 0.95) !important;
     color: #111827 !important;
     border: 1px solid #e5e7eb !important;
     border-radius: 12px !important;
-    box-shadow: none !important;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
 }
+
+/* Sliders Style */
 input[type=range] { accent-color: #111827; }
 
-/* --- VENTANA DE CHAT (Derecha) --- */
+/* --- RIGHT PANEL: CHAT WINDOW --- */
 .chat-window {
-    background: rgba(255, 255, 255, 0.75) !important;
-    border: 1px solid rgba(255, 255, 255, 0.8);
+    background: rgba(255, 255, 255, 0.8) !important;
+    border: 1px solid rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(20px);
     border-radius: 24px;
     box-shadow: 0 20px 50px rgba(0,0,0,0.05);
@@ -162,7 +179,7 @@ input[type=range] { accent-color: #111827; }
     padding: 0 !important;
 }
 
-/* Header tipo Mac */
+/* Mac-style Header */
 .window-header {
     display: flex; gap: 8px; align-items: center;
     padding: 18px 24px 10px 24px;
@@ -180,14 +197,14 @@ input[type=range] { accent-color: #111827; }
     height: 550px !important;
 }
 
-/* Burbujas del chat */
+/* Chat Bubbles */
 .message.user {
-    background-color: #111827 !important; /* Usuario: Oscuro */
+    background-color: #111827 !important;
     color: white !important;
     border-radius: 18px 18px 4px 18px !important;
 }
 .message.bot {
-    background-color: #ffffff !important; /* Bot: Blanco */
+    background-color: #ffffff !important;
     color: #111827 !important;
     border: 1px solid #e5e7eb !important;
     border-radius: 18px 18px 18px 4px !important;
@@ -215,7 +232,7 @@ input[type=range] { accent-color: #111827; }
     display: flex; align-items: center; justify-content: center;
 }
 
-/* Logos Trusted By */
+/* Logos */
 .trusted-logos {
     opacity: 0.5; filter: grayscale(100%);
     margin-top: 30px; display: flex; gap: 20px;
@@ -245,28 +262,28 @@ TRUSTED_SECTION = """
 </div>
 """
 
-# Usamos theme=gr.themes.Soft() como base para evitar conflictos oscuros
+# IMPORTANT: Keep theme=gr.themes.Soft() to provide a light base
 with gr.Blocks(theme=gr.themes.Soft(), css=CSS, title="Custom AI") as demo:
     
     with gr.Row(elem_id="main-container"):
         
-        # --- COLUMNA IZQUIERDA: Configuración ---
+        # --- LEFT COLUMN: Configuration ---
         with gr.Column(scale=4):
             gr.Markdown(
                 """
                 # Custom AI Chatbot
                 # trained on your data
                 
-                Personaliza el comportamiento y el contexto de tu asistente aquí mismo.
+                Customize the behavior and context of your assistant right here.
                 """
             )
             
             with gr.Group(elem_classes="config-card"):
-                gr.Markdown("### ⚙️ Configuración")
+                gr.Markdown("### ⚙️ Settings")
                 
                 context_input = gr.Textbox(
-                    label="Contexto (Data)",
-                    placeholder="Pega aquí documentos o notas para dar contexto...",
+                    label="Context (Data)",
+                    placeholder="Paste documents, notes, or data here to provide temporary knowledge...",
                     lines=5
                 )
                 
@@ -277,16 +294,16 @@ with gr.Blocks(theme=gr.themes.Soft(), css=CSS, title="Custom AI") as demo:
                 )
                 
                 with gr.Row():
-                    temp_slider = gr.Slider(0.1, 1.5, value=0.7, step=0.1, label="Creatividad")
+                    temp_slider = gr.Slider(0.1, 1.5, value=0.7, step=0.1, label="Temperature")
                     tokens_slider = gr.Slider(64, 1024, value=256, step=64, label="Max Tokens")
                 
                 top_p_slider = gr.Slider(0.1, 1.0, value=0.9, step=0.05, label="Top-P")
 
             gr.HTML(TRUSTED_SECTION)
 
-        # --- COLUMNA DERECHA: Chatbot ---
+        # --- RIGHT COLUMN: Chatbot ---
         with gr.Column(scale=6):
-            # Contenedor estilo ventana de app
+            # Window Container
             with gr.Column(elem_classes="chat-window"):
                 gr.HTML(WINDOW_HEADER)
                 
@@ -309,7 +326,7 @@ with gr.Blocks(theme=gr.themes.Soft(), css=CSS, title="Custom AI") as demo:
                     )
                     send_btn = gr.Button("➝", scale=1, elem_id="send-btn")
 
-    # --- EVENTOS ---
+    # --- EVENTS ---
     inputs_list = [msg, chatbot, system_prompt_input, context_input, tokens_slider, temp_slider, top_p_slider]
     
     msg.submit(chat_logic, inputs_list, [msg, chatbot])