#🦜 Agente de HuBrowser: detalles técnicos 🛠️

HuBrowser ofrece automatización robusta e inteligente del navegador mediante un diseño modular y extensible. A continuación resumimos su arquitectura, gestión de estado, inteligencia y varias soluciones técnicas propias.

#🚀 Resumen y arquitectura

• Automatización flexible: combina lenguaje natural, acciones grabadas y código para ofrecer un control adaptable.
• Descomposición avanzada de tareas: divide tareas complejas en subtareas manejables con selección inteligente de herramientas.
• Conjunto de herramientas completo: integra navegador, archivos, línea de comandos, API y análisis de datos.
• Feedback en tiempo real: permite seguir y modificar resultados intermedios mientras la tarea está en marcha.
• Diseño modular y extensible: construido para fiabilidad, transparencia y ampliación sencilla.

#Flujo principal

HuBrowser funciona en un bucle continuo:

1. Inicialización: se crea el agente con una tarea, un LLM y una instancia del navegador; todos los componentes se inicializan con telemetría.
2. Bucle de ejecución: recuperación de estado → análisis del LLM → ejecución de acciones → actualización de estado.
3. Finalización: al completar la tarea se registran eventos, se devuelve el historial y, si se desea, se genera un GIF.

#Componentes del sistema

• Agent: planifica y ejecuta tareas, gestiona estado e historial, y maneja la mensajería con el LLM y los errores.
• Controller: registra acciones del navegador, valida parámetros y enlaza instrucciones del LLM con operaciones reales del navegador.
• Browser: gestiona instancias del navegador, contextos, pestañas, navegación y operaciones DOM.
• DomService: construye árboles DOM, identifica elementos interactivos y rastrea historial e información del viewport.
• Proceso en segundo plano (sandbox virtual): ejecuta tareas de automatización en un entorno aislado para evitar interferencias con la navegación del usuario.

#🔍 Gestión de memoria

• El agente opera con memoria persistente de sus acciones anteriores. Gracias a eso puede tomar mejores decisiones en pasos posteriores aprovechando el contexto acumulado. Por ejemplo, si pulsa un botón y navega a una página nueva, sin memoria persistente podría no recordar que esa navegación la inició él mismo cuando luego intenta extraer datos.
• Modelar el historial como "memoria" simplifica mucho el desarrollo y la robustez de los flujos de automatización frente a pasar datos manualmente entre pasos con variables explícitas, algo que se vuelve engorroso y frágil en workflows complejos.
• Estado de la aplicación: pestañas activas, valores introducidos en formularios y cookies de autenticación.
• Preferencias personales: se aprenden a partir de señales implícitas.
• Historial de navegación: se codifica mediante embeddings Sentence-BERT para recuerdo semántico.

Este enfoque nos permite construir automatizaciones más complejas y dinámicas, donde el agente realmente puede "entender" el contexto de sus acciones.

#Propiedades básicas

• context_evaluation: análisis del resultado tras cada acción y planificación de ajustes.
• memory: almacenamiento persistente del progreso y de la información clave.
• short_term_goal: siguiente objetivo inmediato.
• long_term_goal: objetivo global que guía toda la secuencia.

#Memoria comprimida

• Resume cada paso completado: después de cada acción, por ejemplo pulsar, extraer datos o navegar, el agente genera un resumen breve de lo que acaba de ocurrir. Puede incluir detalles como:
  • "Navigate: amazon.com."
  • "Input text: 'parrot toy' into field 'Search Query'."
  • "Query: 'Product Name' as 'Parrot Toy', 'Price' as '$22'."
  • "Tap: on the 'Submit' button."
• Conserva y reutiliza esa memoria en pasos posteriores: el agente puede acceder a esos resúmenes durante toda la ejecución actual para orientar decisiones y acciones futuras.

HuBrowser gestiona el estado en dos niveles:

1. Orquestación multitab: maneja instancias del navegador, contextos y páginas para workflows complejos.
2. Contexto a nivel de pestaña: analiza y extrae información de elementos de la página con targeting preciso.
   • Filtra nodos irrelevantes, como texto vacío, scripts o SVG, y asigna identificadores XPath únicos.
   • Detecta elementos interactivos, como roles ARIA, listeners de eventos o contenido editable.
   • Gestiona banners de cookies y diálogos de consentimiento.
   • Convierte mapas planos de JavaScript en redes de objetos Python.

#📄 Procesamiento de página y DOM

HuBrowser traduce estructuras web complejas a descripciones comprensibles para el LLM usando texto estructurado y capturas indexadas. La información de página se trata como datos de un solo uso y se limpia tras cada solicitud para mantener eficiente el contexto del modelo.

#Análisis del árbol DOM

• Identifica elementos visibles, interactivos y situados en la capa superior.
• Aplica comprobaciones de interactividad en varias capas, como ARIA, eventos y contenido editable.
• Usa overlays de resaltado de alto rendimiento para marcar elementos.
• Se centra en tipos accionables: botones, nodos de texto, imágenes, formularios y contenedores.
• Filtrado: ignora elementos de menos de 5 px, como tracking pixels, o mayores que el tamaño de la pantalla.
• Extracción: genera una estructura WebElementInfo unificada con IDs, hashes y localizadores.
• Lógica de etiquetas: usa la etiqueta del padre en la mayoría de elementos, con tratamiento especial para formularios.
• Operaciones sobre el árbol: aplica algoritmos para transformarlo en árboles estructurados.

Ejemplo de propiedades de un elemento:

{
	"tagName": "a",
	"attributes": {},
	"xpath": "html/body/div/a[2]",
	"children": ["idx_459"],
	"isVisible": true,
	"isTopElement": true,
	"isInteractive": true,
	"isInViewport": true,
	"highlightIndex": 5,
	"elementId": "element_123",
	"indexId": "idx_456",
	"nodeHashId": "hash_789",
	"content": "HuBrowsing",
	"position": { "x": 100, "y": 200, "width": 60, "height": 30 },
	"centerCoordinates": { "x": 150, "y": 225 },
	"zoomLevel": 1.0,
	"screenDimensions": { "width": 1920, "height": 1080 }
}

#Procesamiento de capturas

• Adaptación DPR (Device Pixel Ratio) a distintas resoluciones: ajusta las capturas en pantallas de alta resolución, DPR > 1, para mantener posicionamiento preciso a nivel de píxel.
• Marcado de elementos: añade marcadores o bordes a los elementos interactivos para que el LLM los identifique mejor y para ofrecer señales visuales accionables.

#Reconocimiento de la intención del usuario

• Analiza patrones de movimiento de ratón y toques para estimar el interés del usuario, lo que ayuda a priorizar el procesamiento y ajustar respuestas.
• Resalta la probabilidad de interacción de cada elemento según su intención semántica y, opcionalmente, puede mostrar codificación por colores al usuario. Esto ayuda al agente a centrarse en la información o acciones más relevantes.

#🧠 Inteligencia del agente e integración de herramientas

#Integración de herramientas y registro de acciones

• Llamadas a funciones estructuradas con validación mediante JSON Schema para lograr ejecuciones precisas.
• Registro flexible para operaciones síncronas y asíncronas.

#🧅 Sistema de contexto multicapa

HuBrowser selecciona capas de contexto según la complejidad de la tarea y las necesidades del LLM, equilibrando rendimiento y precisión:

• Contenido de texto: extracción del texto visible.
• Metadatos HTML: títulos y meta tags.
• Captura del viewport: área actualmente visible.
• Miniatura de la página: vista previa de baja resolución.
• Captura de página completa: instantánea visual completa.
• Árbol HTML aplanado: DOM estructurado con propiedades clave.
• Árbol HTML completo: DOM íntegro para inspección profunda.
• Datos de Web API: datos estructurados para tareas detalladas.

#🎯 Planificación y ejecución de objetivos

#Metodologías de planificación

1. Construcción de parámetros: crea parámetros de localización detallados con contexto del elemento.
2. Creación del plan: genera planes de operación completos con estrategias de fallback.
3. Ejecución de tareas: convierte los planes en tareas accionables.

Respuesta de asistencia de IA:

• Modelos de texto: IDs de elementos acompañados de razonamiento.
• Modelos visuales: coordenadas de bounding box.

#Método de acción y gestión del contexto

• Conserva un único mensaje del usuario junto con un historial resumido.
• Pasa descripciones detalladas de página, como árbol DOM y detalles de elementos, a modelos generales.
• Excluye información DOM para modelos visuales y así reduce sobrecarga.
• Genera planes de acción detallados con predicción de resultados.
• Mantiene logs de ejecución e información de errores.
• Predice resultados antes de ejecutar para anticipar errores.
• Conserva el historial de mensajes con hasta cuatro capturas.
• Integra instrucciones del usuario directamente en los prompts del sistema.
• Incluye respuestas previas de la IA para mantener continuidad contextual.
• Avanzado:
  • Descomposición de acciones: divide instrucciones complejas en operaciones más simples.
  • Optimización de localización de elementos: reutiliza IDs, clases o coordenadas ya localizadas para minimizar llamadas al modelo.
  • Eficiencia de contexto: equilibra historial y rendimiento.

#🧩 Retos técnicos y soluciones

HuBrowser afronta problemas reales de automatización web con soluciones avanzadas:

• 🖼️ Procesamiento de iframes: recorrido recursivo de iframes anidados y manejo de cross-origin.
• 🛡️ Restricciones CSP: múltiples estrategias para mitigar bloqueos por content security policy.
• 🌑 Shadow DOM: recorrido avanzado de componentes aislados.
• 🧩 Automatización de extensiones: interacción nativa con extensiones del navegador.
• 🔗 Mensajería entre contextos: comunicación fluida entre páginas y extensiones.
• ⏱️ Momento de inyección de scripts: sincronización precisa para automatizaciones fiables.
• 📝 HTML no estándar: extracción robusta incluso con documentos mal estructurados.
• 🎯 Precisión sobre elementos: filtrado y localización avanzados para apuntar con exactitud.