v167

app.py

@@ -4,17 +4,18 @@ import requests
 from huggingface_hub import InferenceClient
 
 """
-Para más info sobre huggingface_hub e InferenceClient:
+For more information on `huggingface_hub` Inference API support, 
+please check the docs:
 https://huggingface.co/docs/huggingface_hub/v0.22.2/en/guides/inference
 """
 
 # ============================
-#  CONFIGURACIÓN DE SERPER
+#  CONFIGURACIÓN SERPER
 # ============================
 SERPER_API_KEY = os.getenv("SERPER_API_KEY")
 
 def do_websearch(query: str) -> str:
-    """ Llama a serper.dev y retorna el texto con los resultados. """
+    """ Llama a serper.dev y retorna los resultados. """
     if not SERPER_API_KEY:
         return "(SERPER_API_KEY no está configurado)"
 
@@ -34,13 +35,12 @@ def do_websearch(query: str) -> str:
     if not results:
         return "No hay resultados relevantes."
 
-    text = []
+    lines = []
     for i, item in enumerate(results, start=1):
         title = item.get("title", "Sin título")
         link = item.get("link", "Sin enlace")
-        text.append(f"{i}. {title}\n   {link}")
-
-    return "\n".join(text)
+        lines.append(f"{i}. {title}\n   {link}")
+    return "\n".join(lines)
 
 
 # ============================
@@ -53,56 +53,59 @@ client = InferenceClient(
 )
 
 # ============================
-#  LÓGICA DE RESPUESTA
+#  FUNCIÓN PRINCIPAL (sin streaming)
 # ============================
-def respond(
-    message: str,
-    history: list[tuple[str, str]],
-    system_message: str,
-    max_tokens: int,
-    temperature: float,
-    top_p: float,
-    use_search: bool
-):
+def chat_fn(user_msg, chat_history, system_msg, max_tokens, temperature, top_p, use_search):
     """
-    - 'message': Mensaje del usuario.
-    - 'use_search': si está activo, se llama a do_websearch() y se concatena el resultado al message.
-    - 'history': historial en forma de (usuario, asistente).
-    - 'system_message': texto del rol system.
-    Generamos la respuesta en streaming con chat_completion(stream=True).
+    Llamado al pulsar "Enviar".
+    - user_msg: mensaje de usuario
+    - use_search: bool, si se hace la búsqueda
+    - chat_history: lista de dicts con formato messages
+      e.g. [{"role": "user", "content": ...}, {"role": "assistant", "content": ...}, ...]
+    - system_msg: se agrega como primer mensaje de rol system (si no está ya)
+    Retorna la nueva historia (formato 'messages'), con el nuevo assistant message.
     """
-    if use_search:
-        web_info = do_websearch(message)
-        message = f"{message}\nInformación de la web:\n{web_info}"
 
-    # Construimos la conversación
-    messages = [{"role": "system", "content": system_message}]
-    for (user_msg, assistant_msg) in history:
-        messages.append({"role": "user", "content": user_msg})
-        messages.append({"role": "assistant", "content": assistant_msg})
+    # 1) Revisamos si en el chat_history ya está el system. Si no, lo añadimos al principio.
+    if not chat_history or chat_history[0]["role"] != "system":
+        chat_history.insert(0, {"role": "system", "content": system_msg})
+
+    # 2) Mezclamos el user_msg + websearch (si use_search=True)
+    merged_prompt = user_msg
+    if use_search:
+        web_info = do_websearch(user_msg)
+        merged_prompt = f"{user_msg}\nInformación de la web:\n{web_info}"
 
-    messages.append({"role": "user", "content": message})
+    # 3) Añadimos nuevo rol user
+    chat_history.append({"role": "user", "content": merged_prompt})
 
-    # Llamamos a la API con streaming
-    response_text = ""
-    for chunk in client.chat_completion(
-        messages=messages,
+    # 4) Llamada a la API (sin streaming)
+    response = client.chat_completion(
+        messages=chat_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
+        stream=False
+    )
+    # Obtenemos el texto
+    assistant_reply = response.choices[0].message["content"]
+
+    # 5) Añadimos la respuesta del assistant
+    chat_history.append({"role": "assistant", "content": assistant_reply})
+
+    return chat_history
+
 
 # ============================
-#  CSS (SIN gr.Box)
+#  CSS y DISEÑO
 # ============================
 css_code = """
 #input_container {
     position: relative;
     margin-top: 1rem;
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
 }
 #search_toggle {
     position: absolute;
@@ -115,36 +118,34 @@ css_code = """
     font-size: 0.9rem;
     color: #333;
     cursor: pointer;
+    display: flex;
+    align-items: center;
 }
+
 #search_toggle input[type="checkbox"]:checked + label {
-    background-color: #0272f5; /* color gradio */
+    background-color: #0272f5; /* color principal de gradio */
     color: white;
     border: none;
 }
 """
 
-# ============================
-#  INTERFAZ GRADIO
-# ============================
 with gr.Blocks(css=css_code) as demo:
-    gr.Markdown("# Chat con toggle websearch (sin gr.Box)")
+    gr.Markdown("## Chat con WebSearch (Gradio 5.0.1) - Sin streaming, sin gr.Box")
 
-    # Historial
-    # Nota: si queremos evitar la advertencia "tuples are deprecated",
-    # usamos type="messages" y cambiamos la forma de 'history'.
-    # Aquí mantenemos la forma (usuario, asistente).
+    # Chatbot en formato 'messages' para evitar el warning sobre 'tuples'.
     chatbot = gr.Chatbot(
         label="Conversación",
         value=[],
-        type="tuples"  # ignora la advertencia, o cambia a type="messages".
+        type="messages"  # Evitamos la advertencia de tuplas deprecadas
     )
 
-    # Para guardar (usuario, asistente)
-    state_history = gr.State([])
+    # Historial "messages" en un gr.State
+    chat_history = gr.State([])
 
+    # Config
     system_box = gr.Textbox(
         label="Mensaje del sistema",
-        value="Eres Juan, un asistente en español con mucha paciencia y empatía."
+        value="Eres Juan, un asistente virtual en español. Ayuda con amabilidad."
     )
     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")
@@ -153,42 +154,29 @@ with gr.Blocks(css=css_code) as demo:
     with gr.Column():
         with gr.Row(elem_id="input_container"):
             user_input = gr.Textbox(
+                show_label=False,
                 placeholder="Escribe tu mensaje...",
-                lines=3,
-                show_label=False
+                lines=3
             )
-            # Checkbox "websearch" en la parte inferior izq
-            # usaremos un simple Row/Column en lugar de gr.Box
+            # Checkbox en la parte inferior izq
             with gr.Row(elem_id="search_toggle"):
-                search_checkbox = gr.Checkbox(value=False, interactive=True)
+                search_checkbox = gr.Checkbox(value=False)
                 gr.Label("🌐 Búsqueda")
 
         send_btn = gr.Button("Enviar")
 
-    def update_chatbot(history):
-        # Retornamos la misma lista de tuplas para que aparezca en el chatbot
+    # Lógica: 1) chat_fn => 2) actualizamos Chatbot
+    def update_chat_display(history):
+        # El Chatbot 'messages' recibe [{"role": "...", "content": "..."}]
         return history
 
     send_btn.click(
-        fn=respond,
-        inputs=[
-            user_input,
-            state_history,
-            system_box,
-            max_tokens_slider,
-            temp_slider,
-            top_p_slider,
-            search_checkbox
-        ],
-        outputs=None  # streaming
-    ).then(
-        # Tomamos la salida (stream final) y la ponemos en chatbot
-        fn=lambda text, msg, hist: hist + [(msg, text)],
-        inputs=[gr.Button.stream_output, user_input, state_history],
-        outputs=state_history
+        fn=chat_fn,
+        inputs=[user_input, chat_history, system_box, max_tokens_slider, temp_slider, top_p_slider, search_checkbox],
+        outputs=chat_history
     ).then(
-        fn=update_chatbot,
-        inputs=state_history,
+        fn=update_chat_display,
+        inputs=chat_history,
         outputs=chatbot
     ).then(
         fn=lambda: "",