V144

app.py

@@ -3,16 +3,20 @@ import gradio as gr
 import requests
 from huggingface_hub import InferenceClient
 
-# ============= SERPER CONFIG ====================
+"""
+Para más info sobre la Inference API de huggingface_hub:
+https://huggingface.co/docs/huggingface_hub/v0.22.2/en/guides/inference
+"""
+
+# ============================
+#  CONFIGURACIÓN DE SERPER
+# ============================
 SERPER_API_KEY = os.getenv("SERPER_API_KEY")
 
 def do_websearch(query: str) -> str:
-    """
-    Si SERPER_API_KEY está definido, llama a serper.dev para obtener resultados,
-    de lo contrario, indica que no está configurado.
-    """
+    """ Llama a serper.dev para la búsqueda en Google y retorna texto. """
     if not SERPER_API_KEY:
-        return "(SERPER_API_KEY no configurado)"
+        return "(SERPER_API_KEY no está configurado)"
 
     url = "https://google.serper.dev/search"
     headers = {"X-API-KEY": SERPER_API_KEY, "Content-Type": "application/json"}
@@ -26,126 +30,206 @@ def do_websearch(query: str) -> str:
 
     if "organic" not in data:
         return "No se encontraron resultados en serper.dev."
-
     results = data["organic"]
     if not results:
         return "No hay resultados relevantes."
 
-    lines = []
+    text = []
     for i, item in enumerate(results, start=1):
         title = item.get("title", "Sin título")
         link = item.get("link", "Sin enlace")
-        lines.append(f"{i}. {title}\n   {link}")
-    return "\n".join(lines)
+        text.append(f"{i}. {title}\n   {link}")
+
+    return "\n".join(text)
 
-# ============= LLM CONFIG (meta-llama) ============
-hf_api_token = os.getenv("HF_API_TOKEN")  # Necesitas un token con permiso de lectura
+
+# ============================
+#  CONFIGURACIÓN DEL MODELO
+# ============================
+hf_api_token = os.getenv("HF_API_TOKEN")
 client = InferenceClient(
     model="meta-llama/Llama-3.1-8B-Instruct",
     token=hf_api_token
 )
 
-# ============= FUNCIONES PRINCIPALES =============
-def send_message(user_input, use_search, system_msg, history):
+
+# ============================
+#  LÓGICA DE RESPUESTA
+# ============================
+def respond(
+    message: str,
+    history: list[tuple[str, str]],
+    system_message: str,
+    max_tokens: int,
+    temperature: float,
+    top_p: float,
+    use_search: bool
+):
     """
-    Cuando se pulsa 'Enviar', esta función:
-      1. Si use_search está activo, llama a do_websearch y concatena resultados al prompt.
-      2. Construye la lista 'messages': un 'system' + historial + nuevo user.
-      3. Llama al LLM (chat_completion) y obtiene la respuesta.
-      4. Actualiza el historial con (user_input, respuesta).
-      5. Retorna el nuevo historial.
+    - 'message': Mensaje del usuario en este turno.
+    - 'use_search': si está activo, mezclamos el resultado de do_websearch() con 'message'.
+    - 'history': lista [(usuario, asistente), ...]
+    - 'system_message': texto rol 'system'
+    Generamos la respuesta en streaming con 'chat_completion(..., stream=True)'.
     """
 
-    # Si el usuario dejó en blanco, no hacemos nada
-    if not user_input.strip():
-        return history
-
-    final_user_text = user_input
+    # 1) Si la búsqueda está activa, combinamos user_input + info web
     if use_search:
-        web_info = do_websearch(user_input)
-        final_user_text += f"\n[Info web]:\n{web_info}"
-
-    # Construimos los mensajes (aquí no hacemos streaming para simplificar)
-    messages = [{"role": "system", "content": system_msg}]
-    for (u, a) in history:
-        messages.append({"role": "user", "content": u})
-        messages.append({"role": "assistant", "content": a})
-
-    # Mensaje nuevo
-    messages.append({"role": "user", "content": final_user_text})
-
-    # Llamamos a chat_completion
-    response = client.chat_completion(
+        web_info = do_websearch(message)
+        # El prompt final será: [user_message] + [resultado web]
+        merged_input = f"{message}\nInformación de la web:\n{web_info}"
+    else:
+        merged_input = message
+
+    # 2) Reconstruimos la conversación para la API
+    messages = [{"role": "system", "content": system_message}]
+    for user_msg, assistant_msg in history:
+        if user_msg:
+            messages.append({"role": "user", "content": user_msg})
+        if assistant_msg:
+            messages.append({"role": "assistant", "content": assistant_msg})
+
+    # Agregamos el nuevo turno del usuario
+    messages.append({"role": "user", "content": merged_input})
+
+    # 3) Llamamos a la API en modo streaming
+    response_text = ""
+    for chunk in client.chat_completion(
         messages=messages,
-        max_tokens=256,     # Ajusta según prefieras
-        temperature=0.7,    # ...
-        top_p=0.95,         # ...
-        stream=False        # Sin streaming para que sea más sencillo
-    )
-    # Extraemos el texto devuelto
-    answer = response.choices[0].message["content"]
-
-    # Actualizamos historial
-    new_history = history + [(user_input, answer)]
-    return new_history
-
-def update_chat(history):
-    """
-    Transforma el 'history' (lista de (usuario, asistente)) en un formato
-    que gr.Chatbot pueda mostrar: [(user, bot), ...].
-    """
-    return history
+        max_tokens=max_tokens,
+        temperature=temperature,
+        top_p=top_p,
+        stream=True
+    ):
+        token = chunk.choices[0].delta.get("content", "")
+        response_text += token
+        yield response_text
+
+
+# ============================
+#  CSS PARA EL TOGGLE EN INPUT
+# ============================
+css_code = """
+#input_row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: 1rem;
+}
+/* Caja contenedora */
+#input_container {
+    position: relative;
+    flex: 1;
+}
+
+/* Checkbox estilo toggle en la parte inferior izq.  */
+#search_toggle {
+    position: absolute;
+    left: 0;
+    bottom: -2rem;
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    padding: 0.2rem 0.4rem;
+    border-radius: 0.25rem;
+    font-size: 0.9rem;
+    border: 1px solid #ccc;
+    background-color: #eee;
+    color: #333;
+}
+#search_toggle input[type="checkbox"]:checked + label {
+    background-color: #0272f5; /* color de botón gradio */
+    color: white;
+    border: none;
+}
+
+/* Ajustes al label 'search_toggle_label' */
+#search_toggle_label {
+    margin-left: 0.3rem;
+}
+
+/* Botón 'send' con estilo minimal */
+#send_button {
+    background-color: #0272f5;
+    color: white;
+    border: none;
+    border-radius: 0.25rem;
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+}
+#send_button:hover {
+    background-color: #005dc4;
+}
+"""
+
+# ============================
+#  INTERFAZ GRADIO
+# ============================
+with gr.Blocks(css=css_code) as demo:
+    gr.Markdown("# Chat con WebSearch (toggle en la parte inferior del input)")
+
+    # Historial en un gr.State (lista de pares (user, asst))
+    chat_history = gr.State([])
 
-# ============= INTERFAZ GRADIO ====================
-with gr.Blocks() as demo:
-    gr.Markdown("## Chat con Llama + WebSearch (versión sencilla)")
+    # Chat principal
+    chatbot = gr.Chatbot(label="Conversación", value=[])
 
-    # Caja de texto para "system"
+    # Elementos de configuración
     system_box = gr.Textbox(
-        label="Mensaje del sistema (rol system)",
+        label="Mensaje del sistema",
         value=(
-            "Eres un asistente virtual, amable y empático. Responde en español."
-        ),
-        lines=2
-    )
-
-    # Historial de chat en un gr.State (lista de pares)
-    chat_history = gr.State([])
-
-    # Muestra la conversación
-    chatbot = gr.Chatbot(
-        label="Conversación",
-        value=[]  # Se actualizará con la función update_chat
+            "Eres Juan, un asistente virtual en español. "
+            "Debes responder con paciencia y empatía a usuarios con dificultades cognitivas."
+        )
     )
+    max_tokens_slider = gr.Slider(1, 2048, 512, step=1, label="Máxima cantidad de tokens")
+    temp_slider = gr.Slider(0.1, 4.0, 0.7, step=0.1, label="Temperatura")
+    top_p_slider = gr.Slider(0.1, 1.0, 0.95, step=0.05, label="Top-p (muestreo por núcleo)")
+
+    # Fila con input y send
+    with gr.Row(elem_id="input_row"):
+        with gr.Column(elem_id="input_container"):
+            user_input = gr.Textbox(
+                show_label=False,
+                placeholder="Tu mensaje aquí...",
+                lines=4
+            )
+            # Checkbox '🌐 Búsqueda' en la parte inferior izq. del input
+            with gr.Box(elem_id="search_toggle"):
+                search_checkbox = gr.Checkbox(value=False, interactive=True)
+                gr.Label("🌐 Búsqueda", elem_id="search_toggle_label")
+
+        send_btn = gr.Button("Enviar", elem_id="send_button")
+
+    # Función para actualizar el historial en el Chatbot
+    def update_history(history):
+        return history
 
-    # Checkbox para use_search
-    search_checkbox = gr.Checkbox(
-        value=False,
-        label="Usar búsqueda web en serper.dev"
-    )
-
-    # Campo de texto para la entrada del usuario
-    user_input = gr.Textbox(
-        label="Tu mensaje",
-        placeholder="Escribe algo...",
-        lines=3
-    )
-
-    # Botón de enviar
-    send_btn = gr.Button("Enviar")
-
-    # Al pulsar "Enviar":
-    # 1) Llamamos a send_message
-    # 2) Actualizamos chatbot con el nuevo historial
+    # Al pulsar "Enviar", llamamos a respond en streaming
     send_btn.click(
-        fn=send_message,
-        inputs=[user_input, search_checkbox, system_box, chat_history],
+        fn=respond,
+        inputs=[
+            user_input,
+            chat_history,
+            system_box,
+            max_tokens_slider,
+            temp_slider,
+            top_p_slider,
+            search_checkbox  # use_search
+        ],
+        outputs=None  # Output en streaming
+    ).then(
+        # Recogemos la respuesta final generada y la metemos en el historial
+        fn=lambda out, message, hist: hist + [(message, out)],
+        inputs=[gr.Button.stream_output, user_input, chat_history],
         outputs=chat_history
     ).then(
-        fn=update_chat,
+        # Actualizamos el Chatbot
+        fn=update_history,
         inputs=chat_history,
         outputs=chatbot
     ).then(
+        # Limpiamos la caja de texto
         fn=lambda: "",
         inputs=None,
         outputs=user_input