Tầm nhìn LLM Web Scraping: Đọc ảnh chụp màn hình, không phải DOM

Mô hình thị giác không đọc HTML của bạn; nó đọc một bức ảnh của trang. Điều đó thay đổi nghĩa "scraping": thay vì săn lùng selector chứa giá trị, bạn đưa một ảnh chụp màn hình cho một mô hình và hỏi nó thấy gì. Trình duyệt Scraping không có nhược điểm thực hiện ảnh chụp màn hình đó trên đám mây qua Giao thức DevTools Chrome, và một mô hình đa phương thức chuyển đổi các pixel thành dữ liệu có cấu trúc.

Đây là công cụ để sử dụng khi DOM phản đối bạn — một cái giá được đóng gói thành hình ảnh, một biểu đồ không có bảng bên dưới, một widget được vẽ trên canvas, hoặc một bố cục mà ý nghĩa nằm ở vị trí hơn là ở trong thẻ. Hướng dẫn này kết nối với Trình duyệt Scraping, chụp một ảnh màn hình của một trang đã được render, và có một mô hình thị giác trả về JSON từ hình ảnh, với mỗi bước được thực hiện trực tiếp.

Tại sao đọc ảnh chụp màn hình thay vì DOM

Scraping dựa trên selector giả định rằng dữ liệu bạn muốn là một giá trị trong markup. Thường thì không phải vậy. Một cửa hàng trực tuyến có thể tạo ra giá bằng hình ảnh để ngăn chặn bot, một bảng điều khiển có thể vẽ số lên một phần tử canvas không có văn bản, và một trang tiếp thị có thể mã hóa một so sánh hoàn toàn trong bố cục hình ảnh. Trong những trường hợp đó, HTML hoặc là trống rỗng về giá trị hoặc rối rắm đến mức selector mong manh hơn cái mà nó chỉ vào.

Một mô hình thị giác tránh markup. Nó nhìn thấy những gì mà một người nhìn thấy — trang đã được render và bố trí — và đọc các giá trị từ hình ảnh. Ảnh chụp màn hình phải trung thực, đó là lý do tại sao nó đến từ một trình duyệt thực: Trình duyệt Scraping render trang ở phía máy chủ, chạy các script của nó và chụp khung mà người dùng sẽ thấy, vì vậy mô hình lý luận về trang hoàn chỉnh thay vì một trang chưa hoàn thiện.

Yêu cầu tiên quyết

Bạn cần Python 3.9 hoặc mới hơn, client playwright và requests, một khóa API Scrapeless cho phiên trình duyệt, và một khóa cho một mô hình đa phương thức. Nhận khóa Scrapeless trên gói miễn phí tại app.scrapeless.com. Giữ cả hai khóa trong các biến môi trường; chúng đi qua URL kết nối và một tiêu đề xác thực, không bao giờ qua mã nguồn.

Cài đặt

pip install playwright requests

Cấu hình

export SCRAPELESS_API_KEY="your_scrapeless_api_key"
export OPENROUTER_API_KEY="your_model_api_key"

Chụp ảnh màn hình với Trình duyệt Scraping

Kết nối với trình duyệt đám mây qua CDP, mở trang, và chụp vùng nhìn. Ảnh chụp màn hình là một PNG được sản xuất bởi cùng một Chromium đã render trang, vì vậy những gì mô hình nhận được chính xác là những gì một khách truy cập sẽ thấy. Việc chụp xảy ra qua Giao thức DevTools Chrome và trả lại byte trong định dạng hình ảnh 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("screenshot bytes:", len(png))
print("PNG signature ok:", png[:8] == b"\x89PNG\r\n\x1a\n")

Chạy xác nhận một hình ảnh thực đã được trả về:

screenshot bytes: 55462
PNG signature ok: True

Nhận khóa API của bạn trên gói miễn phí: app.scrapeless.com

Đọc ảnh chụp màn hình với một mô hình thị giác

Mã hóa PNG thành một URL dữ liệu base64, gửi nó đến một mô hình đa phương thức cùng với schema bạn muốn, và hạn chế câu trả lời ở định dạng JSON. Mô hình đọc trang đã được render và trả về các trường — không có selector, không có duyệt DOM. Base64 tuân theo tiêu chuẩn mã hóa dữ liệu Base64, đó là cách mà hình ảnh được chuyển vào trong một yêu cầu JSON. Toàn bộ quy trình chụp và đọc:

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",
    headers={"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": 'Từ ảnh chụp màn hình của một trang trích dẫn, trả về JSON '
                                       '{"quotes":[{"author":..., "text":...}]} cho 3 trích dẫn đầu tiên '
                                       'bạn có thể thấy. Trả về CHỈ JSON.'},
              {"type": "image_url", "image_url": {"url": img}}]}],
          "response_format": {"type": "json_object"}, "temperature": 0},
    timeout=120,
)
resp.raise_for_status()
quotes = json.loads(resp.json()["choices"][0]["message"]["content"])["quotes"]
print("trích dẫn lấy từ hình ảnh:", len(quotes))
print("tác giả đầu tiên từ hình ảnh:", quotes[0]["author"])

Mô hình đọc các pixel và trả về các bản ghi:

trích dẫn lấy từ hình ảnh: 3
tác giả đầu tiên từ hình ảnh: Albert Einstein

Hình ảnh chưa bao giờ được phân tích dưới dạng HTML. Tên tác giả đến từ văn bản đã được kết xuất trong ảnh chụp màn hình, đó là lý do tại sao phương pháp này vẫn hoạt động trên một trang giấu giá trị tương tự ở phía sau thẻ hình ảnh hoặc canvas.

Khi nào tầm nhìn đã đáng giá, và khi nào thì không

Việc khai thác hình ảnh không miễn phí — một hình ảnh tiêu thụ far nhiều mã token hơn là đoạn HTML giữ giá trị tương tự, và mô hình có thể đọc sai văn bản nhỏ hoặc ít tương phản. Vì vậy hãy sử dụng nó một cách có chủ đích. Nó đáng giá khi giá trị thực sự là hình ảnh: văn bản chèn vào hình ảnh, biểu đồ và tiện ích canvas, PDF được kết xuất ra một trang, hoặc một bố cục mà ý nghĩa của nó là không gian. Khi dữ liệu là văn bản sạch trong DOM, một bộ chọn là rẻ hơn, nhanh hơn và chính xác hơn, và đọc nó từ mã là lựa chọn tốt hơn. Sức mạnh của việc kết hợp Trình Duyệt Khai Thác với mô hình thị giác là bạn có thể chuyển đổi giữa hai phương pháp trong cùng một phiên đã được kết xuất — phân tích DOM ở nơi nó đáng tin cậy, chụp màn hình và đọc ở nơi không.

Kết luận

Khai thác mô hình thị giác đọc trang giống như một người làm. Trình Duyệt Khai Thác Không Rác rãnh mục tiêu và chụp một ảnh chụp màn hình trung thực trên đám mây qua CDP, và một mô hình đa phương thức biến hình ảnh đó thành JSON có cấu trúc. Cuộc chạy bên trên đã kéo ba trích dẫn và tác giả "Albert Einstein" từ các pixel, không có bộ chọn nào trong mã. Sử dụng nó ở nơi DOM không thể mang giá trị, và giữ lại các bộ chọn cho các phần của trang đã giữ văn bản sạch — giải thích về scraper LLM là gì giải thích nơi các mô hình phù hợp trong việc chiết xuất. Đọc các khả năng trên trang sản phẩm Trình Duyệt Khai Thác và cân nhắc khối lượng hình ảnh so với trang giá cả trước khi bạn chạy ở quy mô lớn.

Tham gia cộng đồng của chúng tôi để nhận một kế hoạch miễn phí và so sánh ghi chú với các nhà phát triển khác xây dựng các quy trình chiết xuất: Discord · Telegram.

Câu hỏi thường gặp

Q: Khi nào tôi nên khai thác bằng cách chụp màn hình thay vì phân tích HTML?

Sử dụng thị giác khi giá trị là hình ảnh chứ không phải văn bản — một giá được kết xuất dưới dạng hình ảnh, các số được vẽ trên canvas, một biểu đồ không có bảng cơ sở, hoặc một bố cục mã hóa ý nghĩa bằng vị trí. Khi dữ liệu là văn bản sạch trong DOM, một bộ chọn CSS rẻ hơn và chính xác hơn.

Q: Tại sao chụp ảnh màn hình với Trình Duyệt Khai Thác thay vì một cái cục bộ?

Bởi vì mô hình chỉ có thể đọc những gì ảnh chụp màn hình hiển thị. Trình Duyệt Khai Thác kết xuất trang ở phía máy chủ, chạy các kịch bản của nó và chụp khung hoàn chỉnh từ cloud Chromium, vì vậy hình ảnh là trang đã được kết xuất đầy đủ thay vì chỉ là một trang tải một nửa từ một trình duyệt cục bộ mà bạn cũng phải duy trì.

Q: Làm thế nào để hình ảnh vào yêu cầu?

Các byte PNG được mã hóa base64 vào một URL data:image/png;base64,... và gửi như một phần nội dung image_url cùng với lời nhắc văn bản. Mô hình nhận hình ảnh inline trong cùng một yêu cầu JSON như các hướng dẫn.

Q: Mô hình có trả về cấu trúc đáng tin cậy không?

Ràng buộc phản hồi thành một đối tượng JSON và cung cấp cho nó một sơ đồ rõ ràng, như ví dụ đã làm. Mô hình sau đó sẽ trả về chỉ các trường bạn đã yêu cầu. Hãy cẩn thận với việc đọc hình ảnh của văn bản nhỏ hoặc ít tương phản và xác nhận các giá trị mà cần phải chính xác.

Q: Liệu điều này có tốn kém hơn khai thác DOM không?

Có. Một hình ảnh tiêu thụ far nhiều mã token hơn là đoạn HTML tương đương, vì vậy việc khai thác hình ảnh tốn kém hơn mỗi trang. Sử dụng nó ở nơi nó loại bỏ một vấn đề thực sự — dữ liệu chỉ có hình ảnh — và phân tích DOM ở nơi văn bản đã có sẵn.

Q: Liệu tôi có thể kết hợp hai phương pháp không?
Vâng, và nó thường là thiết kế đúng. Một phiên Scraping Browser duy nhất có thể phục vụ cả hai: phân tích DOM cho các trường nằm trong mã sạch và chụp ảnh khu vực không có, vì vậy mỗi phần của trang được đọc theo cách đáng tin cậy và tiết kiệm chi phí nhất.