Visão LLM Web Scraping: Leia a Captura de Tela, Não o DOM

Um modelo de visão não lê seu HTML; ele lê uma imagem da página. Isso muda o que "raspagem" significa: em vez de caçar o seletor que contém um valor, você entrega uma captura de tela a um modelo e pergunta o que ele vê. O Navegador de Raspagem Sem Raspagem (Scrapeless Scraping Browser) faz essa captura de tela na nuvem através do Protocolo DevTools do Chrome, e um modelo multimodal transforma os pixels em dados estruturados.

Esta é a ferramenta a ser usada quando o DOM luta contra você — um preço embutido em uma imagem, um gráfico sem uma tabela subjacente, um widget renderizado em canvas, ou um layout onde o significado reside na posição em vez de em tags. Este guia se conecta ao Navegador de Raspagem, captura uma captura de tela de uma página renderizada, e tem um modelo de visão que retorna JSON da imagem, com cada passo executado ao vivo.

Por que ler uma captura de tela em vez do DOM

A raspagem baseada em seletor assume que os dados que você deseja são um valor na marcação. Muitas vezes não são. Uma vitrine pode renderizar preços como imagens para desencorajar bots, um painel pode desenhar números em um elemento canvas que não contém texto, e uma página de marketing pode codificar uma comparação inteiramente em layout visual. Nesses casos, o HTML está vazio de valor ou tão emaranhado que o seletor é mais frágil do que a coisa que aponta.

Um modelo de visão ignora a marcação. Ele vê o que uma pessoa vê — a página renderizada e organizada — e lê os valores da imagem. A captura de tela precisa ser fiel, e é por isso que vem de um navegador real: o Navegador de Raspagem renderiza a página no lado do servidor, executa seus scripts e captura o quadro que um usuário veria, para que o modelo raciocine sobre a página finalizada e não uma em construção.

Pré-requisitos

Você precisa do Python 3.9 ou mais recente, do cliente playwright e requests, uma chave de API da Scrapeless para a sessão do navegador e uma chave para um modelo multimodal. Obtenha a chave Scrapeless no plano gratuito em app.scrapeless.com. Mantenha ambas as chaves em variáveis de ambiente; elas viajam em uma URL de conexão e um cabeçalho de autorização, nunca no código-fonte.

Instalação

pip install playwright requests

Configurar

export SCRAPELESS_API_KEY="sua_chave_api_scrapeless"
export OPENROUTER_API_KEY="sua_chave_api_modelo"

Capturar a captura de tela com o Navegador de Raspagem

Conecte-se ao navegador na nuvem pelo CDP, abra a página e capture a área visível. A captura de tela é um PNG produzido pelo mesmo Chromium que renderizou a página, portanto, o que o modelo recebe é exatamente o que um visitante veria. A captura acontece através de o Protocolo DevTools do Chrome e retorna bytes em o formato de imagem PNG:

import os
from urllib.parse import urlencode
from playwright.sync_api import sync_playwright

def browser_url():
    return "wss://browser.scrapeless.com/api/v2/browser?" + urlencode(
        {"token": os.environ["SCRAPELESS_API_KEY"], "sessionTTL": 180, "proxyCountry": "US"})

with sync_playwright() as p:
    browser = p.chromium.connect_over_cdp(browser_url())
    page = browser.new_page(viewport={"width": 1280, "height": 900})
    page.goto("https://quotes.toscrape.com/", wait_until="networkidle")
    png = page.screenshot()
    browser.close()

print("bytes da captura de tela:", len(png))
print("assinatura PNG ok:", png[:8] == b"\x89PNG\r\n\x1a\n")

A execução confirma que uma imagem real foi retornada:

bytes da captura de tela: 55462
assinatura PNG ok: True

Obtenha sua chave API no plano gratuito: app.scrapeless.com

Ler a captura de tela com um modelo de visão

Codifique o PNG como uma URL de dados base64, envie-o para um modelo multimodal ao lado do esquema que você deseja e restrinja a resposta a JSON. O modelo lê a página renderizada e retorna os campos — sem seletores, sem navegação no DOM. O Base64 segue o padrão de codificação de dados Base64, que é como a imagem é transportada dentro de uma solicitação JSON. O pipeline completo de captura e leitura:

import os, base64, json, requests
from urllib.parse import urlencode
from playwright.sync_api import sync_playwright

def browser_url():
    return "wss://browser.scrapeless.com/api/v2/browser?" + urlencode(
        {"token": os.environ["SCRAPELESS_API_KEY"], "sessionTTL": 180, "proxyCountry": "US"})

with sync_playwright() as p:
    browser = p.chromium.connect_over_cdp(browser_url())
    page = browser.new_page(viewport={"width": 1280, "height": 900})
    page.goto("https://quotes.toscrape.com/", wait_until="networkidle")
    png = page.screenshot()
    browser.close()

img = "data:image/png;base64," + base64.b64encode(png).decode()
resp = requests.post(
    "https://openrouter.ai/api/v1/chat/completions",
    cabeçalhos={"Authorization": f"Bearer {os.environ['OPENROUTER_API_KEY']}", "Content-Type": "application/json"},
    json={"model": "google/gemini-2.5-flash-lite",
          "messages": [{"role": "user", "content": [
              {"type": "text", "text": 'A partir desta captura de tela de uma página de cotações, retorne JSON '
                                       '{"quotes":[{"author":..., "text":...}]} para as 3 primeiras citações '
                                       'que você pode ver. Retorne APENAS JSON.'},
              {"type": "image_url", "image_url": {"url": img}}]}],
          "response_format": {"type": "json_object"}, "temperature": 0},
    timeout=120,
)
resp.raise_for_status()
citações = json.loads(resp.json()["choices"][0]["message"]["content"])["quotes"]
print("citações extraídas da imagem:", len(citações))
print("primeiro autor da imagem:", citações[0]["author"])

O modelo lê os pixels e retorna os registros:

citações extraídas da imagem: 3
primeiro autor da imagem: Albert Einstein

A imagem nunca foi analisada como HTML. O nome do autor veio do texto renderizado na captura de tela, que é a razão pela qual essa abordagem sobrevive a uma página que oculta o mesmo valor atrás de uma tag de imagem ou um canvas.

Quando a visão justifica seu custo, e quando não

A extração por visão não é gratuita — uma imagem consome muito mais tokens do que o trecho de HTML que contém o mesmo valor, e o modelo pode interpretar erroneamente textos pequenos ou de baixo contraste. Portanto, utilize com discernimento. Vale a pena quando o valor é genuinamente visual: texto incorporado em imagens, gráficos e widgets de canvas, PDFs renderizados em uma página, ou um layout cujo significado é espacial. Quando os dados são texto limpo no DOM, um seletor é mais barato, mais rápido e exato, e lê-lo a partir da marcação é a melhor escolha. A força de unir o Scraping Browser com um modelo de visão é que você pode alternar entre os dois na mesma sessão renderizada — parse o DOM onde é confiável, faça uma captura de tela e leia onde não é.

Conclusão

A extração por modelo visual lê a página da maneira que uma pessoa faz. O Scrapeless Scraping Browser renderiza o alvo e captura uma captura de tela fiel na nuvem através do CDP, e um modelo multimodal transforma essa imagem em JSON estruturado. A execução acima obteve três citações e o autor "Albert Einstein" dos pixels, sem nenhum seletor em todo o código. Utilize onde o DOM não pode carregar o valor e mantenha seletores para as partes de uma página que já contêm texto limpo — a explicação sobre o que é um scraper LLM enquadra onde os modelos se encaixam na extração. Leia as capacidades na página do produto Scraping Browser e compare o volume de imagens com a página de preços antes de executá-la em grande escala.

Junte-se à nossa comunidade para reivindicar um plano gratuito e trocar ideias com outros desenvolvedores construindo pipelines de extração: Discord · Telegram.

FAQ

P: Quando devo fazer a extração por captura de tela em vez de analisar HTML?

Use visão quando o valor for visual e não textual — um preço renderizado como imagem, números desenhados em um canvas, um gráfico sem uma tabela subjacente, ou um layout que codifica significado pela posição. Quando os dados são texto limpo no DOM, um seletor CSS é mais barato e exato.

P: Por que capturar a captura de tela com o Scraping Browser em vez de um local?

Porque o modelo só pode ler o que a captura de tela mostra. O Scraping Browser renderiza a página no lado do servidor, executa seus scripts e captura o quadro final do Chromium na nuvem, de modo que a imagem é a página completamente renderizada, em vez de uma página carregada pela metade de um navegador headless local que você também precisa manter.

P: Como a imagem entra na solicitação?

Os bytes PNG são codificados em base64 em uma URL data:image/png;base64,... e enviados como uma parte do conteúdo image_url ao lado do prompt de texto. O modelo recebe a imagem em linha na mesma solicitação JSON que as instruções.

P: O modelo retorna uma estrutura confiável?

Restringa a resposta a um objeto JSON e forneça um esquema explícito, como o exemplo faz. O modelo, então, retorna apenas os campos que você pediu. Trate leituras visuais de texto pequeno ou de baixo contraste com cuidado e valide valores que devem ser exatos.

P: Isso é mais caro do que a extração do DOM?

Sim. Uma imagem consome muito mais tokens do que o equivalente trecho de HTML, então a extração por visão custa mais por página. Use onde remove um problema real — dados apenas visuais — e analise o DOM onde o texto já está disponível.

P: Posso misturar as duas abordagens?
Sim, e muitas vezes é o design certo. Uma única sessão do Scraping Browser pode servir para ambos: analisando o DOM para os campos que estão em uma marcação limpa e fazendo a captura de tela da região que não está, de modo que cada parte da página seja lida da forma mais confiável e econômica.