Update app.py

app.py

@@ -5,22 +5,33 @@ import requests
 import dropbox
 from datetime import datetime
 
-# --- Configuración de variables de entorno ---
-# Asegúrate de que estas variables estén configuradas en tu entorno de Hugging Face Spaces
+# --- Claves de API y configuración (sin cambios) ---
 GROQ_API_KEY = os.environ.get("GROQ_API_KEY")
 GROQ_API_URL = "https://api.groq.com/openai/v1/chat/completions"
-SYSTEM_MESSAGE = os.environ.get("System_Prompt", "Eres un asistente útil.") # Añadido un valor por defecto
-MODEL_NAME = "llama3-8b-8192" # Modelo actualizado a uno comúnmente disponible en Groq
+SYSTEM_MESSAGE = os.environ.get("System_Prompt")
+MODEL_NAME = "meta-llama/llama-4-maverick-17b-128e-instruct"
 MAX_TOKENS = 4096
 TEMPERATURE = 0.7
 TOP_P = 0.95
 REMOTE_STORAGE_TOKEN = os.environ.get("REMOTE_STORAGE_TOKEN")
 REMOTE_DESTINATION_PATH = "/Conversations/"
 
+# --- Definición del Tema Personalizado (NUEVO) ---
+# Se utiliza un tema base (Soft) y se personaliza el color primario.
+custom_theme = gr.themes.Soft(
+    primary_hue=gr.themes.colors.blue,
+    secondary_hue=gr.themes.colors.blue,
+).set(
+    # Aplicamos tu color azul específico al fondo de los botones principales.
+    button_primary_background_fill="#0d5495",
+    button_primary_background_fill_hover="#0b4a85", # Un tono un poco más oscuro para el hover
+)
+
+
+# --- Funciones de lógica del backend (sin cambios) ---
 def persist_data(session_data):
-    """Guarda el historial de la conversación en Dropbox."""
     if not REMOTE_STORAGE_TOKEN:
-        print("Advertencia: El token de almacenamiento remoto (Dropbox) no está configurado. La conversación no se guardará.")
+        print("Warning: Persistence token not configured.")
         return
 
     try:
@@ -28,9 +39,9 @@ def persist_data(session_data):
         
         formatted_log = ""
         for user_msg, assistant_msg in session_data:
-            formatted_log += f"Usuario: {user_msg}\n"
+            formatted_log += f"User: {user_msg}\n"
             if assistant_msg:
-                formatted_log += f"Asistente: {assistant_msg}\n"
+                formatted_log += f"Assistant: {assistant_msg}\n"
         formatted_log += "-----\n"
 
         timestamp = datetime.now().strftime("%Y-%m-%d_%H-%M-%S")
@@ -43,13 +54,12 @@ def persist_data(session_data):
         with open(temp_log_path, "rb") as f:
             storage_client.files_upload(f.read(), f"{REMOTE_DESTINATION_PATH}{log_name}", mode=dropbox.files.WriteMode('overwrite'))
 
-        print(f"Registro de conversación creado: {log_name}")
+        print(f"Log entry created: {log_name}")
 
     except Exception as e:
-        print(f"Error durante la persistencia de datos: {e}")
+        print(f"Error during data persistence: {e}")
 
-def respond(message, history):
-    """Genera una respuesta del chatbot usando la API de Groq."""
+def respond(message, history: list[tuple[str, str]]):
     messages = [{"role": "system", "content": SYSTEM_MESSAGE}]
     
     for user_msg, assistant_msg in history:
@@ -74,238 +84,51 @@ def respond(message, history):
         "stream": True
     }
     
-    try:
-        response = requests.post(
-            GROQ_API_URL,
-            headers=headers,
-            json=payload,
-            stream=True,
-            timeout=15 
-        )
-        response.raise_for_status() 
-        
-        accumulated_response = ""
-        for line in response.iter_lines():
-            if line:
-                line_text = line.decode('utf-8')
-                if line_text.startswith("data: "):
-                    data_str = line_text[6:]
-                    
-                    if data_str.strip() == "[DONE]":
-                        break
-                    
-                    try:
-                        data = json.loads(data_str)
-                        if 'choices' in data and len(data['choices']) > 0:
-                            delta = data['choices'][0].get('delta', {})
-                            if 'content' in delta and delta['content']:
-                                token = delta['content']
-                                accumulated_response += token
-                                yield accumulated_response
-                    except json.JSONDecodeError:
-                        print(f"Error decodificando JSON: {data_str}")
-                        continue
-        
-        if not accumulated_response:
-            yield "Lo siento, no recibí una respuesta. Inténtalo de nuevo."
-        else:
-            current_session = history + [(message, accumulated_response)]
-            persist_data(current_session)
-
-    except requests.exceptions.RequestException as e:
-        print(f"Error en la solicitud a la API: {e}")
-        yield f"Error de conexión con la API: {e}"
-    except Exception as e:
-        print(f"Un error inesperado ocurrió: {e}")
-        yield "Lo siento, ocurrió un error inesperado al procesar tu solicitud."
-
-
-# --- Definición del Tema Personalizado de Gradio ---
-# Se corrigió el error eliminando argumentos no válidos
-blue_theme = gr.themes.Soft(
-    primary_hue=gr.themes.colors.blue,
-    secondary_hue=gr.themes.colors.blue,
-    neutral_hue=gr.themes.colors.slate,
-).set(
-    # Botones principales
-    button_primary_background_fill="#0d5495",
-    button_primary_background_fill_hover="#1e68b8",
-    button_primary_background_fill_dark="#0a4373",
-    button_primary_text_color="white",
-    button_primary_text_color_dark="white",
-    
-    # Botones secundarios
-    button_secondary_background_fill="*neutral_50",
-    button_secondary_background_fill_hover="*neutral_100",
-    button_secondary_text_color="#0d5495",
-    button_secondary_border_color="#0d5495",
-    
-    # Inputs y formularios
-    input_background_fill="*neutral_50",
-    input_background_fill_focus="white",
-    input_border_color="*neutral_300",
-    input_border_color_focus="#0d5495",
-    input_border_width="2px",
-    
-    # Fondos generales
-    background_fill_primary="white",
-    background_fill_secondary="*neutral_50",
-    
-    # Texto y enlaces
-    body_text_color="*neutral_700",
-    body_text_color_subdued="*neutral_500",
-    link_text_color="#0d5495",
-    link_text_color_hover="#1e68b8",
-    link_text_color_visited="#0d5495",
-    
-    # Bloques y paneles
-    block_background_fill="white",
-    block_border_color="*neutral_200",
-    block_border_width="1px",
-    block_shadow="*shadow_drop",
-    block_title_text_color="#0d5495",
-    block_title_text_weight="600",
-    
-    # Sombras
-    shadow_drop="0 2px 4px rgba(13, 84, 149, 0.1)",
-    shadow_drop_lg="0 4px 8px rgba(13, 84, 149, 0.15)",
-    
-    # La siguiente línea fue eliminada porque causaba el error:
-    # chatbot_code_background_color="*neutral_100", 
-    
-    # Loader/spinner
-    loader_color="#0d5495",
-    
-    # Sliders y otros controles
-    slider_color="#0d5495",
-    slider_color_dark="#1e68b8",
-)
+    response = requests.post(
+        GROQ_API_URL,
+        headers=headers,
+        json=payload,
+        stream=True
+    )
+    
+    accumulated_response = ""
+    for line in response.iter_lines():
+        if line:
+            line_text = line.decode('utf-8')
+            if line_text.startswith("data: "):
+                data_str = line_text[6:]  
+                
+                if data_str == "[DONE]":
+                    break
+                
+                try:
+                    data = json.loads(data_str)
+                    if 'choices' in data and len(data['choices']) > 0:
+                        delta = data['choices'][0].get('delta', {})
+                        if 'content' in delta and delta['content']:
+                            token = delta['content']
+                            accumulated_response += token
+                            yield accumulated_response
+                except json.JSONDecodeError:
+                    continue
+    
+    if not accumulated_response:
+        yield "Lo siento, ocurrió un error al procesar tu solicitud."
+    else:
+        current_session = history + [(message, accumulated_response)]
+        persist_data(current_session)
 
-# --- Creación de la Interfaz de Gradio ---
+# --- Creación de la Interfaz con el Tema (MODIFICADO) ---
 demo = gr.ChatInterface(
     respond,
-    theme=blue_theme,
-    title="Chatbot Azul",
-    description="Un chatbot conversacional con un tema azul personalizado.",
+    theme=custom_theme,  # Se añade el tema personalizado aquí
     examples=[["¡Bienvenido a Prueba BM!"],
               ["¿En qué consiste el programa y para quién es?"],
               ["¿Qué beneficios obtengo y con qué empresas me conecto?"],
               ["¿Cómo puedo participar o registrarme?"]
-             ],
-    css="""
-    /* Estilos CSS adicionales para pulir la interfaz */
-    
-    .gradio-container {
-        background: linear-gradient(135deg, #f8fafc 0%, #e8f4f8 100%);
-        min-height: 100vh;
-    }
-    
-    .chatbot {
-        border-radius: 12px !important;
-        box-shadow: 0 4px 12px rgba(13, 84, 149, 0.1) !important;
-        background: white !important;
-    }
-    
-    .message.user > .message-body {
-        background: linear-gradient(135deg, #0d5495 0%, #1e68b8 100%) !important;
-        color: white !important;
-        border-radius: 18px 18px 4px 18px !important;
-        padding: 12px 16px !important;
-        margin: 8px 0 !important;
-        box-shadow: 0 2px 8px rgba(13, 84, 149, 0.2) !important;
-    }
-    
-    .message.bot > .message-body {
-        background: #f8fafc !important;
-        color: #374151 !important;
-        border-radius: 18px 18px 18px 4px !important;
-        border-left: 4px solid #0d5495 !important;
-        padding: 12px 16px !important;
-        margin: 8px 0 !important;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
-    }
-    
-    /* --- NUEVA REGLA CSS AÑADIDA --- */
-    /* Estilo para los bloques de código dentro de los mensajes del bot */
-    .message.bot > .message-body pre, .message.bot > .message-body code {
-        background-color: #e2e8f0 !important; /* Un gris claro (slate-200) */
-        border-radius: 6px !important;
-        padding: 10px 12px !important;
-        border: 1px solid #cbd5e1 !important;
-        display: block;
-        overflow-x: auto;
-        color: #334155; /* Color de texto oscuro para el código */
-    }
-    
-    textarea {
-        border: 2px solid #0d5495 !important;
-        border-radius: 12px !important;
-        padding: 12px 16px !important;
-        font-size: 14px !important;
-        transition: all 0.3s ease !important;
-        background: white !important;
-    }
-    
-    textarea:focus {
-        border-color: #1e68b8 !important;
-        box-shadow: 0 0 0 3px rgba(13, 84, 149, 0.1) !important;
-        outline: none !important;
-    }
-    
-    .send-button {
-        background: linear-gradient(135deg, #0d5495 0%, #1e68b8 100%) !important;
-        border: none !important;
-        border-radius: 8px !important;
-        color: white !important;
-        padding: 8px 16px !important;
-        transition: all 0.3s ease !important;
-        font-weight: 500 !important;
-    }
-    
-    .send-button:hover {
-        transform: translateY(-2px) !important;
-        box-shadow: 0 4px 12px rgba(13, 84, 149, 0.3) !important;
-    }
-    
-    .example-button {
-        background: linear-gradient(135deg, #f8fafc 0%, #e8f4f8 100%) !important;
-        border: 2px solid #0d5495 !important;
-        color: #0d5495 !important;
-        border-radius: 8px !important;
-        padding: 8px 16px !important;
-        margin: 4px !important;
-        transition: all 0.3s ease !important;
-        font-weight: 500 !important;
-    }
-    
-    .example-button:hover {
-        background: linear-gradient(135deg, #0d5495 0%, #1e68b8 100%) !important;
-        color: white !important;
-        transform: translateY(-2px) !important;
-        box-shadow: 0 4px 8px rgba(13, 84, 149, 0.2) !important;
-    }
-    
-    .gr-form label {
-        color: #0d5495 !important;
-        font-weight: 600 !important;
-        margin-bottom: 8px !important;
-    }
-    
-    .chatbot::-webkit-scrollbar { width: 8px; }
-    .chatbot::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
-    .chatbot::-webkit-scrollbar-thumb { background: #0d5495; border-radius: 4px; opacity: 0.6; }
-    .chatbot::-webkit-scrollbar-thumb:hover { background: #1e68b8; opacity: 1; }
-    
-    @media (max-width: 768px) {
-        .message.user > .message-body,
-        .message.bot > .message-body {
-            padding: 10px 12px !important;
-            font-size: 14px !important;
-        }
-    }
-    """
+             ]
 )
 
-# --- Lanzar la aplicación ---
+# --- Lanzamiento de la aplicación (sin cambios) ---
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()```