Update app.py

app.py

@@ -2,6 +2,7 @@ import gradio as gr
 import os
 import json
 import requests
+from typing import Iterator, List, Tuple
 
 # Configuración de la API de Groq
 GROQ_API_KEY = os.environ.get("GROQ_API_KEY")
@@ -14,7 +15,26 @@ MAX_TOKENS = 512
 TEMPERATURE = 0.7
 TOP_P = 0.95
 
-def respond(message, history: list[tuple[str, str]]):
+def respond(message: str, history: List[Tuple[str, str]]) -> Iterator[str]:
+    """
+    Función que maneja la respuesta del chatbot usando la API de Groq.
+    
+    Args:
+        message: El mensaje del usuario
+        history: Historial de conversación
+        
+    Yields:
+        La respuesta del chatbot, token por token
+    """
+    # Validación de entrada
+    if not GROQ_API_KEY:
+        yield "Error: No se ha configurado la API key de Groq."
+        return
+        
+    if not message.strip():
+        yield "Por favor, escribe un mensaje."
+        return
+
     # Preparar los mensajes en el formato que Groq espera
     messages = [{"role": "system", "content": SYSTEM_MESSAGE}]
 
@@ -42,111 +62,248 @@ def respond(message, history: list[tuple[str, str]]):
         "stream": True
     }
 
-    # Realizar la solicitud a la API de Groq con streaming
     try:
+        # Realizar la solicitud a la API de Groq con streaming
         response = requests.post(
             GROQ_API_URL,
             headers=headers,
             json=payload,
-            stream=True
+            stream=True,
+            timeout=60  # Agregar timeout para evitar colgamientos
         )
-        response.raise_for_status()  # Verificar si la solicitud fue exitosa
-    except requests.RequestException:
-        yield "Lo siento, ocurrió un error al procesar tu solicitud."
-        return
 
-    # Manejar la respuesta en streaming
-    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."
-
-# --- Diseño mejorado ---
+        # Verificar si la respuesta es exitosa
+        response.raise_for_status()
+
+        # Manejar la respuesta en streaming
+        accumulated_response = ""
+        for line in response.iter_lines():
+            if line:
+                # Las líneas comienzan con "data: " en SSE
+                line_text = line.decode('utf-8')
+                if line_text.startswith("data: "):
+                    data_str = line_text[6:]  # Eliminar el prefijo "data: "
+                    
+                    # El último mensaje es "data: [DONE]"
+                    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 "No se recibió respuesta del modelo. Intenta nuevamente."
+            
+    except requests.exceptions.RequestException as e:
+        yield f"Error de conexión: {str(e)}"
+    except Exception as e:
+        yield f"Error inesperado: {str(e)}"
+
+
+# Tema personalizado para mejorar la experiencia móvil
+custom_theme = gr.themes.Soft().set(
+    body_background_fill="#f7f7f7",
+    block_background_fill="#ffffff",
+    block_label_background_fill="#ffffff",
+    block_border_width="0px",
+    button_primary_background_fill="#2563eb",
+    button_primary_text_color="#ffffff",
+    button_primary_background_fill_hover="#1d4ed8",
+    button_secondary_background_fill="#f3f4f6",
+    button_secondary_text_color="#374151",
+    border_color_primary="#e5e7eb",
+    block_radius="8px",
+    button_large_radius="8px",
+    button_large_padding="10px 20px",
+)
+
+# --- Interfaz mejorada ---
 with gr.Blocks(
-    theme=gr.themes.Soft(),
+    theme=custom_theme,
     css="""
         /* Estilos generales para el contenedor */
         .gradio-container {
             max-width: 100% !important;
             margin: 0 auto !important;
             padding: 0 !important;
-            overflow: hidden;
+            font-family: 'Inter', sans-serif;
         }
-
+        
         /* Estilos para el chatbot */
-        .chatbot {
-            height: calc(100vh - 60px) !important;
-            overflow-y: auto !important;
-            border: none !important;
+        .containing-element {
+            height: calc(100vh - 110px) !important;
+            max-height: 100vh !important;
+            margin: 0 !important;
+            padding: 0 !important;
+            border-radius: 0 !important;
         }
-
-        /* Estilos para los mensajes */
-        .chatbot .message {
-            padding: 10px;
-            border-radius: 10px;
-            margin-bottom: 10px;
+        
+        /* Mensajes del chatbot */
+        .message {
+            padding: 10px 15px !important;
+            border-radius: 18px !important;
+            margin-bottom: 10px !important;
+            max-width: 85% !important;
+            line-height: 1.5 !important;
+            word-wrap: break-word !important;
         }
-        .chatbot .message.user {
-            background-color: #DCF8C6;
-            align-self: flex-end;
-            margin-left: 50px;
+        
+        /* Mensaje del usuario */
+        .user-message {
+            background-color: #dcf8c6 !important;
+            color: #000000 !important;
+            margin-left: auto !important;
+            margin-right: 5px !important;
+            border-top-right-radius: 5px !important;
         }
-        .chatbot .message.bot {
-            background-color: #FFFFFF;
-            align-self: flex-start;
-            margin-right: 50px;
+        
+        /* Mensaje del asistente */
+        .bot-message {
+            background-color: #ffffff !important;
+            color: #000000 !important;
+            margin-right: auto !important;
+            margin-left: 5px !important;
+            border-top-left-radius: 5px !important;
+            box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
         }
-
-        /* Estilos para el input de texto */
-        .chatInterface .input-container {
-            padding: 0 !important;
+        
+        /* Contenedor del área de texto */
+        .message-inputs {
+            position: fixed !important;
+            bottom: 0 !important;
+            left: 0 !important;
+            right: 0 !important;
+            padding: 10px 15px !important;
+            background-color: #f7f7f7 !important;
+            border-top: 1px solid #e5e7eb !important;
+            display: flex !important;
+            align-items: center !important;
+            z-index: 100 !important;
         }
-        .chatInterface .input-container textarea {
-            border: none !important;
-            border-radius: 0 !important;
-            box-shadow: none !important;
-            padding: 10px;
+        
+        /* Área de texto */
+        .message-inputs textarea {
+            border-radius: 20px !important;
+            padding: 10px 15px !important;
+            resize: none !important;
+            max-height: 80px !important;
+            overflow-y: auto !important;
+            margin-right: 10px !important;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
+            flex: 1 !important;
+            border: 1px solid #e0e0e0 !important;
         }
-
-        /* Estilos para el botón de envío */
-        .chatInterface .send-button {
-            padding: 10px 20px;
-            font-size: 16px;
+        
+        /* Botón de enviar */
+        .message-inputs .send-btn {
+            width: 40px !important;
+            height: 40px !important;
+            border-radius: 50% !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            background-color: #2563eb !important;
+            color: white !important;
+            cursor: pointer !important;
+            padding: 0 !important;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
         }
-
-        /* Media query para pantallas muy pequeñas */
+        
+        /* Indicador de escritura */
+        .typing-indicator {
+            display: flex !important;
+            align-items: center !important;
+            margin-left: 15px !important;
+            margin-bottom: 10px !important;
+            opacity: 0.7 !important;
+        }
+        
+        /* Para pantallas pequeñas */
         @media (max-width: 600px) {
-            .chatbot {
-                height: calc(100vh - 50px) !important;
+            .message {
+                max-width: 90% !important;
+                padding: 8px 12px !important;
+            }
+            
+            .containing-element {
+                height: calc(100vh - 90px) !important;
             }
-            .chatbot .message.user {
-                margin-left: 20px;
+            
+            .message-inputs {
+                padding: 8px 10px !important;
             }
-            .chatbot .message.bot {
-                margin-right: 20px;
+            
+            .message-inputs textarea {
+                padding: 8px 12px !important;
+                font-size: 14px !important;
+            }
+            
+            .send-btn {
+                width: 36px !important;
+                height: 36px !important;
             }
         }
     """
 ) as demo:
-    gr.Markdown("# Chatbot Amigable")
-    gr.ChatInterface(respond)
+    # Título y descripción
+    gr.Markdown(
+        """
+        # 💬 Asistente IA
+        ##### Pregúntame lo que quieras saber
+        """
+    )
+    
+    # Interfaz de chat mejorada
+    chatbot = gr.ChatInterface(
+        respond,
+        chatbot=gr.Chatbot(
+            layout="panel",
+            bubble_full_width=False,
+            show_label=False,
+            height="100%",
+            container=True,
+            render=False
+        ),
+        textbox=gr.Textbox(
+            placeholder="Escribe tu mensaje aquí...",
+            container=False,
+            scale=7,
+            render=False,
+            show_label=False,
+            min_width=200
+        ),
+        submit_btn="Enviar",
+        retry_btn="♻️",
+        undo_btn="↩️",
+        clear_btn="🗑️"
+    )
+
+    # Nota de pie de página
+    with gr.Accordion("ℹ️ Acerca de", open=False):
+        gr.Markdown(
+            """
+            Este chatbot utiliza el modelo LLama 3 70B a través de la API de Groq.
+            
+            **Información importante:**
+            - Las respuestas generadas son creadas por IA y podrían contener inexactitudes.
+            - No compartas información sensible o personal.
+            """
+        )
 
+# Lanzar la aplicación
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(
+        share=False,  # No compartir en Hugging Face Spaces
+        debug=False,  # Evitar información de debug
+        quiet=True,   # Reducir logs
+        show_error=True,  # Mostrar errores
+        height=800    # Altura predeterminada
+    )