V1555

app.py

@@ -5,22 +5,28 @@ from huggingface_hub import InferenceClient
 
 """
 For more information on `huggingface_hub` Inference API support, 
-please check the docs:
+please check the docs: 
 https://huggingface.co/docs/huggingface_hub/v0.22.2/en/guides/inference
 """
 
-# ============================
-#  CONFIGURACIÓN SERPER
-# ============================
+# ----------------------------------------------------------------
+# CONFIGURACIÓN DE SERPER (búsqueda web)
+# ----------------------------------------------------------------
 SERPER_API_KEY = os.getenv("SERPER_API_KEY")
 
 def do_websearch(query: str) -> str:
-    """ Llama a serper.dev y retorna los resultados. """
+    """
+    Llama a serper.dev para hacer la búsqueda en Google y devolver
+    un texto resumido de los resultados.
+    """
     if not SERPER_API_KEY:
         return "(SERPER_API_KEY no está configurado)"
 
     url = "https://google.serper.dev/search"
-    headers = {"X-API-KEY": SERPER_API_KEY, "Content-Type": "application/json"}
+    headers = {
+        "X-API-KEY": SERPER_API_KEY,
+        "Content-Type": "application/json",
+    }
     payload = {"q": query}
 
     try:
@@ -29,160 +35,143 @@ def do_websearch(query: str) -> str:
     except Exception as e:
         return f"(Error al llamar a serper.dev: {e})"
 
+    # Se espera un campo 'organic' con resultados
     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)
 
-# ============================
-#  CONFIGURACIÓN DEL MODELO
-# ============================
+
+# ----------------------------------------------------------------
+# CONFIGURACIÓN DEL MODELO (AHORA CON TOKEN)
+# ----------------------------------------------------------------
+# Cargamos el token desde la variable de entorno 'HF_API_TOKEN'
 hf_api_token = os.getenv("HF_API_TOKEN")
+
+# Usamos el modelo meta-llama/Llama-3.1-8B-Instruct con acceso a tu cuenta
 client = InferenceClient(
     model="meta-llama/Llama-3.1-8B-Instruct",
-    token=hf_api_token
+    token=hf_api_token  # <-- la clave para evitar el 401 Unauthorized
 )
 
-# ============================
-#  FUNCIÓN PRINCIPAL (sin streaming)
-# ============================
-def chat_fn(user_msg, chat_history, system_msg, max_tokens, temperature, top_p, use_search):
+def respond(
+    message,
+    history: list[tuple[str, str]],
+    system_message,
+    max_tokens,
+    temperature,
+    top_p,
+    use_search  # <-- Nuevo parámetro: si está "activado" el botón
+):
     """
-    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.
+    - system_message: Texto del rol "system"
+    - history: lista de (user_msg, assistant_msg)
+    - message: Mensaje actual del usuario
+    - use_search: booleano que indica si se habilita la búsqueda en serper
     """
 
-    # 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
+    # (1) Solo se llama a la websearch si use_search está activo
+    # (2) Se mezclan los resultados en primer lugar + el mensaje del usuario en segundo lugar
     if use_search:
-        web_info = do_websearch(user_msg)
-        merged_prompt = f"{user_msg}\nInformación de la web:\n{web_info}"
-
-    # 3) Añadimos nuevo rol user
-    chat_history.append({"role": "user", "content": merged_prompt})
-
-    # 4) Llamada a la API (sin streaming)
-    response = client.chat_completion(
-        messages=chat_history,
+        web_info = do_websearch(message)
+        # "En primer lugar el resultado del scraper y luego el input del usuario"
+        message = f"Información de la web:\n{web_info}\n\nPregunta del usuario:\n{message}"
+
+    # Construimos la lista de mensajes
+    messages = [{"role": "system", "content": system_message}]
+    for user_txt, assistant_txt in history:
+        if user_txt:
+            messages.append({"role": "user", "content": user_txt})
+        if assistant_txt:
+            messages.append({"role": "assistant", "content": assistant_txt})
+
+    # Añadimos el nuevo turno del usuario
+    messages.append({"role": "user", "content": message})
+
+    # Llamamos a la API con streaming
+    response_text = ""
+    for chunk in client.chat_completion(
+        messages=messages,
         max_tokens=max_tokens,
+        stream=True,
         temperature=temperature,
         top_p=top_p,
-        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 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;
-    left: 0;
-    bottom: -1.8rem; 
-    background: #fff; 
-    border: 1px solid #ccc; 
-    padding: 0.3rem 0.5rem; 
-    border-radius: 0.25rem;
-    font-size: 0.9rem;
-    color: #333;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-}
-
-#search_toggle input[type="checkbox"]:checked + label {
-    background-color: #0272f5; /* color principal de gradio */
-    color: white;
-    border: none;
-}
-"""
-
-with gr.Blocks(css=css_code) as demo:
-    gr.Markdown("## Chat con WebSearch (Gradio 5.0.1) - Sin streaming, sin gr.Box")
-
-    # Chatbot en formato 'messages' para evitar el warning sobre 'tuples'.
-    chatbot = gr.Chatbot(
-        label="Conversación",
-        value=[],
-        type="messages"  # Evitamos la advertencia de tuplas deprecadas
-    )
-
-    # Historial "messages" en un gr.State
-    chat_history = gr.State([])
-
-    # Config
-    system_box = gr.Textbox(
-        label="Mensaje del sistema",
-        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")
-    top_p_slider = gr.Slider(0.1, 1.0, 0.95, step=0.05, label="Top-p")
-
-    with gr.Column():
-        with gr.Row(elem_id="input_container"):
-            user_input = gr.Textbox(
-                show_label=False,
-                placeholder="Escribe tu mensaje...",
-                lines=3
-            )
-            # Checkbox en la parte inferior izq
-            with gr.Row(elem_id="search_toggle"):
-                search_checkbox = gr.Checkbox(value=False)
-                gr.Label("🌐 Búsqueda")
-
-        send_btn = gr.Button("Enviar")
-
-    # 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=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_chat_display,
-        inputs=chat_history,
-        outputs=chatbot
-    ).then(
-        fn=lambda: "",
-        inputs=None,
-        outputs=user_input
-    )
+    ):
+        token = chunk.choices[0].delta.get("content", "")
+        response_text += token
+        yield response_text
+
+
+# ----------------------------------------------------------------
+# CONFIGURACIÓN DE LA INTERFAZ
+# ----------------------------------------------------------------
+# Ejemplo de Tailwind classes (puedes personalizarlas):
+tailwind_toggle_classes = [
+    "inline-flex", 
+    "items-center", 
+    "bg-blue-500", 
+    "hover:bg-blue-700",
+    "text-white", 
+    "font-bold", 
+    "py-1", 
+    "px-2", 
+    "rounded", 
+    "cursor-pointer"
+]
+
+# ChatInterface, con un input Checkbox para "🌐 Búsqueda"
+demo = gr.ChatInterface(
+    fn=respond,
+    additional_inputs=[
+        gr.Textbox(
+            value=(
+                "Eres Juan, un asistente virtual en español. "
+                "Debes responder con mucha paciencia y empatía a usuarios que "
+                "pueden tener dificultades cognitivas o escribir frases confusas. "
+                "Provee explicaciones simples, procura entender la intención del usuario "
+                "aunque la frase esté mal escrita, y mantén siempre un tono amable."
+            ),
+            label="Mensaje del sistema",
+        ),
+        gr.Slider(
+            minimum=1, 
+            maximum=2048, 
+            value=512, 
+            step=1, 
+            label="Máxima cantidad de tokens"
+        ),
+        gr.Slider(
+            minimum=0.1, 
+            maximum=4.0, 
+            value=0.7, 
+            step=0.1, 
+            label="Temperatura"
+        ),
+        gr.Slider(
+            minimum=0.1,
+            maximum=1.0,
+            value=0.95,
+            step=0.05,
+            label="Top-p (muestreo por núcleo)",
+        ),
+        # Un checkbox para habilitar "búsqueda web" (use_search)
+        gr.Checkbox(
+            value=False,
+            label="🌐 Búsqueda",
+            elem_classes=tailwind_toggle_classes
+        ),
+    ],
+)
 
 if __name__ == "__main__":
     demo.launch()