Desbloqueando Agentes Web de IA: GPT-4V e Puppeteer Empoderam a Navegação Autônoma

Desbloqueie poderosos agentes web de IA com GPT-4V e Puppeteer! Explore a navegação autônoma, os raspadores da web e a pesquisa sofisticada na web impulsionada por IA. Descubra como esses assistentes de IA avançados podem revolucionar tarefas, da RPA ao suporte ao cliente.

17 de fevereiro de 2025

party-gif

Desbloqueie o poder da automação da web impulsionada por IA com essa abordagem inovadora que combina GPT-4V e Puppeteer. Descubra como você pode construir um agente de IA que pode navegar na web, extrair dados e concluir tarefas complexas com facilidade, revolucionando seu fluxo de trabalho e desbloqueando novas possibilidades.

Casos de Uso e Oportunidades de Mercado para Agentes Web de IA

Uma maneira de olhar para os possíveis casos de uso e oportunidades de mercado para agentes da web baseados em IA é examinar tentativas anteriores de construir sistemas semelhantes, suas limitações e como novas tecnologias ou mudanças podem potencialmente alterar a dinâmica.

Uma categoria de mercado direta é a Automação de Processos Robóticos (RPA), que é uma categoria de software que ajuda as empresas a construir bots automatizados para lidar com tarefas repetitivas e padronizadas, como processamento de faturas ou entrada de dados. No entanto, as limitações das soluções de RPA são bastante claras - elas têm dificuldade com processos não padronizados ou em constante mudança, e exigem altos custos de configuração para cada automação específica.

Em contraste, os agentes da web baseados em IA que podem controlar diretamente o computador e o navegador são emocionantes porque podem, teoricamente, lidar com situações muito mais complexas com muito menos custo de configuração. Em vez de construir automações específicas, o agente pode simplesmente navegar pelos sites, extrair dados e concluir tarefas, independentemente de mudanças de formato, pois o agente pode tomar as decisões necessárias.

Além da simples automação, esses agentes de IA também podem ir além da RPA tradicional para concluir tarefas mais inteligentes, como suporte ao cliente, vendas e marketing. Acessando mais sistemas e aproveitando suas habilidades de tomada de decisão, esses "trabalhadores" de IA podem ser implantados para uma gama mais ampla de casos de uso, incluindo aplicativos de consumo com menor volume.

No entanto, um desafio-chave na entrega de soluções úteis de trabalhadores de IA não é apenas o entendimento técnico, mas também o conhecimento do fluxo de trabalho de ponta a ponta para funções de trabalho específicas. Um relatório de pesquisa recente da Hotspot que pesquisou mais de 1.400 líderes de vendas globais fornece insights valiosos sobre o fluxo de trabalho de vendas moderno e os casos de uso da IA, o que pode ser muito útil para a construção de agentes de IA para funções de vendas.

Em resumo, as principais oportunidades para os agentes da web baseados em IA incluem:

  • Lidar com tarefas mais complexas e não padronizadas em comparação com a RPA tradicional
  • Reduzir os custos de configuração para automações
  • Expandir além da simples automação para tarefas mais inteligentes, como suporte ao cliente e vendas
  • Aproveitar o profundo conhecimento do fluxo de trabalho para funções de trabalho específicas para construir agentes de IA mais eficazes

Duas Abordagens para Construir Agentes Web de IA

Abordagem 1: Raspador da Web Alimentado pelo GPT-4V

  1. Use uma biblioteca Node.js como o Puppeteer para tirar capturas de tela de páginas da web e controlar o navegador da web.
  2. Crie um script Python que chama o arquivo JavaScript para tirar capturas de tela e, em seguida, usa o GPT-4V para extrair dados das capturas de tela.
  3. O script Python define funções para converter a imagem para base64, tirar capturas de tela e usar o GPT-4V para extrair informações das capturas de tela.
  4. O script conecta essas funções para criar um poderoso raspador da web que pode acessar sites que normalmente bloqueiam serviços de raspagem.

Abordagem 2: Construindo um Agente da Web de IA

  1. Crie um arquivo Node.js que importe várias bibliotecas e configure uma instância do OpenAI e uma interface de linha de comando.
  2. Implemente uma função highlightLinks que identifica todos os elementos interativos em uma página da web e adiciona um atributo especial a eles.
  3. Defina uma função principal que cria um navegador Puppeteer, configura uma mensagem do sistema para o GPT-4V e entra em um loop onde:
    • Obtém uma resposta do GPT-4V com base no prompt do usuário e no estado atual da página da web.
    • Se a resposta indicar que um link deve ser clicado, ele encontra o elemento correspondente e clica nele.
    • Se a resposta indicar que uma nova URL deve ser visitada, ele navega até essa URL e destaca os links.
    • Se a resposta for uma mensagem regular, ele exibe o resultado para o usuário.
  4. Esse agente da web de IA pode navegar por vários sites, clicar em links e concluir tarefas de pesquisa complexas, aproveitando os recursos do GPT-4V.

As duas abordagens demonstram como você pode aproveitar modelos de linguagem em larga escala, como o GPT-4V, para construir poderosas ferramentas de automação e pesquisa na web. A primeira abordagem se concentra na raspagem da web, enquanto a segunda abordagem cria um agente da web mais interativo que pode navegar e concluir tarefas na web.

Construindo um Web Scraper Alimentado pelo GPT-4V

Para construir um raspador da web alimentado pelo GPT-4V, usaremos uma biblioteca Node.js chamada Puppeteer para controlar o navegador da web e tirar capturas de tela. Aqui está um guia passo a passo:

  1. Crie um novo arquivo chamado screenshot.js e importe as bibliotecas necessárias:
const puppeteer = require('puppeteer');
const puppeteerExtra = require('puppeteer-extra');
  1. Defina a URL que você deseja raspar e um valor de tempo limite:
const url = 'https://en.wikipedia.org/wiki/Main_Page';
const timeout = 60000; // 60 segundos
  1. Crie uma função assíncrona para iniciar o navegador, navegar até a URL e tirar uma captura de tela:
async function takeScreenshot() {
  const browser = await puppeteerExtra.launch();
  const page = await browser.newPage();
  await page.setViewport({ width: 1920, height: 1080 });
  await page.goto(url, { waitUntil: 'networkidle0' });
  await page.screenshot({ path: 'screenshot.jpg', fullPage: true });
  await browser.close();
}
  1. Neste exemplo, estamos usando o plugin puppeteer-extra para tornar o navegador menos detectável pelos sites.

  2. Execute a função takeScreenshot() para capturar a captura de tela:

takeScreenshot();

Agora, você pode executar o script com node screenshot.js e ele salvará uma captura de tela da página inicial da Wikipédia no arquivo screenshot.jpg.

Em seguida, criaremos um script Python que usa a captura de tela e o GPT-4V para extrair dados do site:

  1. Crie um novo arquivo chamado vision_scraper.py e importe as bibliotecas necessárias:
import os
import subprocess
import base64
import openai
from dotenv import load_dotenv

load_dotenv()
openai.api_key = os.getenv("OPENAI_API_KEY")
  1. Defina funções para converter a imagem para base64 e tirar uma captura de tela usando o script screenshot.js:
def image_to_b64(image_path):
    with open(image_path, "rb") as image_file:
        return base64.b64encode(image_file.read()).decode("utf-8")

def url_to_screenshot(url):
    if os.path.exists("screenshot.jpg"):
        os.remove("screenshot.jpg")
    try:
        subprocess.run(["node", "screenshot.js"], check=True)
        return "screenshot.jpg"
    except subprocess.CalledProcessError:
        return None
  1. Crie uma função para usar o GPT-4V para extrair informações da captura de tela:
def vision_extract(image_b64, prompt):
    response = openai.ChatCompletion.create(
        model="gpt-4",
        messages=[
            {"role": "system", "content": "You are a web scraper. Your job is to extract information based on a screenshot of a website and user instructions."},
            {"role": "user", "content": prompt},
            {"role": "user", "content": image_b64}
        ],
        max_tokens=2048,
        n=1,
        stop=None,
        temperature=0.7,
    )
    return response.choices[0].message.content.strip()
  1. Junte tudo em uma função vision_query():
def vision_query(url, prompt):
    screenshot_path = url_to_screenshot(url)
    if screenshot_path:
        image_b64 = image_to_b64(screenshot_path)
        return vision_extract(image_b64, prompt)
    else:
        return "Error: Unable to capture screenshot."
  1. Você agora pode usar a função vision_query() para extrair informações de um site:
result = vision_query("https://www.linkedin.com/in/your-profile-url", "Extract the work experience section from the profile.")
print(result)

Este exemplo tirará uma captura de tela do perfil do LinkedIn especificado e usará o GPT-4V para extrair a seção de experiência de trabalho. Você pode personalizar o prompt para extrair diferentes tipos de informações do site.

Perguntas frequentes