El uso del navegador es una herramienta o plataforma diseñada para permitir que agentes de IA (como los modelos GPT de OpenAI u otros modelos de lenguaje grande) interactúen y controlen navegadores web de manera inteligente y automatizada. Esencialmente, cierra la brecha entre las capacidades de la IA y las interacciones reales con el navegador, haciendo posible que los sistemas de IA realicen tareas como navegar por sitios web, extraer datos, completar formularios, hacer clic en botones y más, tal como lo haría un usuario humano.
El objetivo principal del uso del navegador es hacer que los sitios web sean accesibles y accionables para los agentes de IA al abstraer las complejidades de la automatización del navegador. En lugar de requerir que los desarrolladores escriban scripts intrincados para localizar e interactuar con elementos de la página web, el uso del navegador simplifica este proceso al extraer todos los elementos interactivos (como botones, campos de entrada, enlaces, etc.) y proporcionar una interfaz estructurada para que los agentes de IA interactúen.
Características clave del uso del navegador
Automatización impulsada por IA
El uso del navegador aprovecha la IA para comprender e interactuar con páginas web. Por ejemplo, puede analizar el contenido de una página web, identificar acciones relevantes (como hacer clic en un botón o completar un formulario) y ejecutar esas acciones de manera autónoma.
Visión + Extracción de HTML
Combina la comprensión visual (reconociendo elementos en la pantalla) con la extracción de la estructura HTML (analizando el código subyacente de una página web). Este enfoque dual asegura que los agentes de IA puedan interactuar con elementos web estáticos y dinámicos, incluso si no tienen identificadores claros como IDs o clases.
Gestión de múltiples pestañas
El uso del navegador puede manejar múltiples pestañas del navegador simultáneamente, permitiendo a los agentes de IA realizar flujos de trabajo complejos que implican interactuar con varias páginas web a la vez.
La herramienta rastrea las acciones exactas realizadas por el agente de IA (por ejemplo, hacer clic en un botón o completar un formulario) y puede replicar esas acciones de manera consistente, incluso si el diseño del sitio web cambia ligeramente. Esto es particularmente útil para crear pruebas auto-reparadoras en la automatización de QA.
Acciones Personalizadas
Los usuarios pueden extender el uso del navegador añadiendo acciones personalizadas, como guardar datos en archivos, realizar operaciones en bases de datos, enviar notificaciones o manejar la entrada humana durante pasos específicos en el proceso de automatización.
Auto-Corrección
El uso del navegador incluye manejo inteligente de errores y mecanismos de recuperación automática. Si algo sale mal durante la automatización (por ejemplo, un elemento faltante o un tiempo de espera de red), la herramienta puede detectar el problema e intentar recuperarse automáticamente, asegurando que los flujos de trabajo continúen sin interrupciones.
Compatibilidad con Varios LLMs
El uso del navegador es compatible con varios modelos de lenguaje grande (LLMs), incluyendo GPT-4 de OpenAI, Claude de Anthropic y Llama 2 de Meta. Esta flexibilidad permite a los usuarios elegir el mejor modelo de IA para sus necesidades específicas.
Cómo Funciona el Uso del Navegador
El Uso del Navegador escanea una página web y extrae todos los elementos interactivos (botones, campos de entrada, enlaces, formularios, etc.). Luego proporciona una representación estructurada de estos elementos que los agentes de IA pueden entender e interactuar con ellos.
Interacción de la IA
Una vez que se identifican los elementos interactivos, los agentes de IA pueden realizar acciones como hacer clic en botones, completar formularios, navegar entre páginas o extraer datos. El agente de IA también puede analizar el contenido de la página web y tomar decisiones basadas en la información que encuentra.
Flujos de Trabajo Automatizados
El Uso del Navegador permite a los usuarios crear flujos de trabajo automatizados complejos. Por ejemplo, un agente de IA podría navegar por un sitio de comercio electrónico, agregar artículos a un carrito de compras y completar una compra, todo sin intervención humana.
Manejo de Errores y Recuperación
Si algo sale mal durante el proceso de automatización (por ejemplo, un elemento faltante o una página de carga lenta), el Uso del Navegador puede detectar el problema e intentar recuperarse automáticamente. Esto asegura que los flujos de trabajo continúen sin problemas, incluso en entornos impredecibles.
Guía de Instalación
Comenzar con el Uso del Navegador es sencillo, pero requiere cierta configuración inicial para garantizar que todo funcione sin problemas. A continuación se muestra una guía de instalación detallada basada en los requisitos y pasos que has proporcionado. Esta guía te guiará a través de la configuración del Uso del Navegador localmente en tu máquina.
Requisitos Previos
Antes de comenzar, asegúrate de que tu sistema cumpla con los siguientes requisitos:
- Python 3.11 o superior. Puedes verificar tu versión de Python ejecutando el comando:
Python
python --version - Git. Git es necesario para clonar el repositorio
Instalación Local
Paso 1: Clonar el Repositorio
git clone https://github.com/browser-use/web-ui.git
cd web-ui
Paso 2: Configurar el Entorno de Python
Recomendamos usar uv para gestionar el entorno de Python (recomendado para Mac):
curl -LsSf https://astral.sh/uv/install.sh | sh
1. Create a virtual environment. Run the following command to create a virtual environment with Python 3.11:
uv venv -- python 3.11
- Windows (símbolo del sistema):
Shell
.venv\Scripts\activate - macOS/Linux:
Shell
source .venv/bin/activate
Una vez activado, deberías ver .venv en el prompt de tu terminal, lo que indica que el entorno virtual está activo.
Paso 3: Instalar Dependencias
Ahora que tu entorno está configurado, es hora de instalar las dependencias necesarias.
Instalar paquetes de Python. Usa el siguiente comando para instalar los paquetes de Python requeridos que se enumeran en requirements.txt:
uv pip install -r requirements.txt
Paso 4: Instalar Playwright
Playwright es una biblioteca de automatización de navegadores utilizada por Browser Use.
Para instalarlo, ejecuta el comando:
playwright install
Guía de Configuración Local para Browser Use WebUI
Una vez que hayas completado los pasos de instalación para Browser Use, puedes comenzar a ejecutar la WebUI localmente. Esta guía te llevará a través del proceso de lanzamiento de la aplicación, personalización de su configuración y configuración para usar tu propio navegador si es necesario.
Ejecutando la WebUI
Después de completar los pasos de instalación, puedes iniciar la WebUI de Browser Use ejecutando el siguiente comando:
python webui.py --ip 127.0.0.1 --port 7788
La WebUI proporciona varias opciones para personalizar su comportamiento. Aquí tienes un desglose de las flags disponibles:
--ip– la dirección IP a la que vincular la WebUI- Por defecto –
127.0.0.1(localhost)
- Por defecto –
--port– el puerto al que vincular la WebUI- Por defecto –
7788
- Por defecto –
--theme– el tema para la interfaz de usuario
Accediendo a la WebUI
Una vez que la WebUI esté en funcionamiento, abra su navegador web y vaya a:
http://127.0.0.1:7788
Configuración de LLM
En la configuración de LLM, seleccione un modelo de lenguaje, por ejemplo, géminis. Géminis proporciona la clave de API gratuita.
En la captura de pantalla a continuación, puede ver que hemos añadido las claves de API generadas con el enlace anterior.
Ejecutar Agente
En Ejecutar agente, vamos a dar la indicación “ir a amazon.in y escribir ‘Playwright’, hacer clic en buscar y darme la primera URL.”
En la captura de pantalla a continuación, puede ver que cuando ejecutamos la indicación, se abrirá el navegador Chromium e interactuará con todo el DOM de la página.
Finalmente, ingresará el valor Playwright en el cuadro de búsqueda, y puede ver la captura de pantalla a continuación.
En el backend, puede ver que se ejecutan todos los registros; cualquier agente que esté realizando su registro, todos los registros están en el backend.
Resultado
En la pestaña de resultados, puede ver el resultado final, la acción del modelo, los pensamientos del modelo, el archivo de trazas y el historial del agente.
Vídeo
Puede descargar el vídeo haciendo clic en el enlace proporcionado. También puede ver el vídeo adjunto en la pestaña de Grabaciones.Cuando ejecute el vídeo, verá todos los pasos que el agente ha realizado.
A continuación se muestran algunas capturas de pantalla del vídeo.
Conclusión
La integración de LLMs, Playwright, y Browser Use representa un nuevo salto en la automatización del navegador y los flujos de trabajo impulsados por la inteligencia artificial. Combinar estas herramientas te permitirá crear agentes de navegador inteligentes capaces de realizar tareas complejas con una intervención humana mínima. Desde automatizar procesos repetitivos hasta habilitar pruebas dinámicas de QA y la toma de decisiones en tiempo real, las posibilidades son infinitas.
Referencia
Source:
https://dzone.com/articles/build-ai-browser-agent-llms-playwright-browser-use