Xây dựng vòng lặp tác nhân trình duyệt máy tính từ đầu

TL;DR:

• Một đại lý sử dụng máy tính có thể được giảm bớt thành một vòng lặp cảm nhận–quyết định–hành động giới hạn. Trình duyệt nắm bắt trang hiện tại, mô hình thị giác chọn một hành động, và Playwright thực hiện nó trước khi chu trình bắt đầu lại.
• Thông số hành động giữ cho đầu ra mô hình có thể thi hành. Giới hạn mỗi quyết định thành click, type, scroll, hoặc done biến phản ứng của mô hình thành một bộ phân phối có tính xác định nhỏ.
• Chụp màn hình mới ngăn chặn các quyết định lỗi thời. Mỗi lần gọi mô hình đều nhìn thấy trang sau hành động trước đó, vì vậy đại lý suy luận từ trạng thái hiện tại của trình duyệt.
• Một giới hạn bước kiểm soát cả tính tự động và chi phí. Ví dụ cho phép tối đa bốn lần lặp và hoàn thành trong hai: nhấp Next, xác nhận câu trích dẫn đầu tiên mới, sau đó dừng lại.
• Một vòng lặp tùy chỉnh là tốt nhất khi logic quyết định cần giữ cho rõ ràng. Sử dụng một lần gọi thị giác cho việc trích xuất một lần và một đại lý đóng gói khi vòng lặp không cần điều chỉnh thường xuyên.
• Miễn phí để bắt đầu. Các tài khoản Scrapeless mới bao gồm thời gian chạy Scraping Browser miễn phí — đăng ký tại app.scrapeless.com.

Giới thiệu: Vòng Lặp Nhỏ Tương Hỗ Truy Cập Máy Tính

Một đại lý sử dụng máy tính thực hiện ba việc lặp đi lặp lại: nó nhìn vào màn hình, quyết định một hành động, và thực hiện hành động đó. Các sản phẩm như Công cụ Sử dụng Máy tính của OpenAI và chế độ sử dụng máy tính Gemini của Google gói vòng lặp đó lại sau một cuộc gọi API duy nhất. Các khung đại lý như Skyvern đóng gói nó sau một trình chạy tác vụ. Dưới bất kỳ một trong hai điều đó, vòng lặp chính nó thực sự là một lượng mã nhỏ — một ảnh chụp màn hình, một cuộc gọi mô hình thị giác bị ràng buộc trong một danh sách ngắn các hành động, và một lệnh trình duyệt thực hiện bất cứ điều gì mà mô hình đã chọn.

Hướng dẫn này viết vòng lặp đó trực tiếp, không có đại lý đóng gói ở giữa. Nó kết nối với Trình duyệt Scraping của Scrapeless qua Giao thức DevTools của Chrome, chụp ảnh trang, gửi hình ảnh tới một mô hình có khả năng thị giác với bốn lựa chọn — nhấp, gõ, cuộn, hoặc xong — và thực hiện bất cứ điều gì mà mô hình trả về với Playwright, sau đó lặp lại. Mỗi bước bên dưới chạy trên một trang thực, với các quyết định thực tế của mô hình được ghi lại ngay khi chúng xảy ra.

Tổng Quan Về Vòng Lặp

Mỗi lần lặp có một nguồn sự thật: trang như nó xuất hiện trong ảnh chụp màn hình mới nhất.

Hướng dẫn này sử dụng một trang trích dẫn công khai và một mục tiêu hẹp: rời khỏi trang đầu tiên chỉ khi câu trích dẫn đầu tiên được viết bởi Albert Einstein, sau đó dừng lại ngay khi một tác giả khác xuất hiện.

Tại Sao Bạn Nên Tự Xây Dựng Vòng Lặp?

Viết vòng lặp trực tiếp cho bạn kiểm soát định dạng cảm nhận, từ vựng hành động và quy tắc dừng lại.

Một đại lý ảnh chụp có cấu trúc và một khung thị giác đóng gói giải quyết cùng một vấn đề ở cấp cao hơn. Đầu tiên có thể đưa cho một LLM một cây vai trò, nhãn và trạng thái được xây dựng từ cây khả năng truy cập WAI-ARIA thay vì pixel, điều này rẻ hơn và chính xác hơn trên một trang có markup sạch. Sử dụng Trình duyệt chạy trên Trình duyệt Scraping đi theo con đường đó — nó điều khiển cùng một Chromium đám mây qua cùng một kết nối CDP, nhưng đại lý của nó suy luận dựa trên văn bản trang đã trích xuất, không phải một hình ảnh.

Lối tắt khác chuyển toàn bộ vòng lặp cho một khung thị giác đóng gói, mà chụp màn hình, lý luận, và hành động theo cùng một cách mà hướng dẫn này làm, ngoại trừ lời nhắc, thông số hành động, và mã quyết định đều sống bên trong thư viện thay vì trong tập lệnh gọi.

Mọi phần của một quyết định tùy chỉnh đều rõ ràng và có thể chỉnh sửa: từ vựng hành động, lời nhắc yêu cầu một hành động, giới hạn bước và dòng biến quyết định thành một cuộc gọi Playwright. Một mục tiêu, mục đích hoặc mô hình khác thay đổi một phần của tập lệnh thay vì một bề mặt cấu hình toàn khung.

Yêu Cầu

Bạn cần Python 3.9 hoặc mới hơn, các gói 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 có khả năng thị giác. Nhận khóa Scrapeless trên gói miễn phí tại app.scrapeless.com. Ví dụ bên dưới định tuyến các cuộc gọi mô hình qua OpenRouter, cái mà đại diện cho vài nhà cung cấp mô hình đứng sau một khóa và một điểm đầu cuối.

Thiết Lập Dự Án

Cài Đặt Các Phụ Thuộc

pip install playwright requests

Cấu Hình Các Khóa API

export SCRAPELESS_API_KEY="your_scrapeless_api_key"

xuất OPENROUTER_API_KEY="your_model_api_key"

Xây dựng Vòng Lặp Nhận Biết - Quyết Định - Hành Động

Kịch bản hoàn chỉnh kết nối một trình duyệt từ xa, định nghĩa một hợp đồng bốn hành động, và thực thi hợp đồng cho đến khi mô hình trả về done hoặc đạt giới hạn bước.

Kết Nối với Trình Duyệt Từ Xa

Trình Duyệt Thu Thập Dữ Liệu tiết lộ một điểm cuối CDP qua kết nối WebSocket — giao thức WebSocket mang dữ liệu Giao thức Công Cụ Phát Triển Chrome theo cả hai hướng. Hàm connect_over_cdp của Playwright kết nối với điểm cuối đó tương tự như cách nó kết nối với một phiên bản Chromium cục bộ được khởi động với cổng gỡ lỗi mở; trình duyệt tự nó chạy trên đám mây của Scrapeless, không phải trên máy chạy kịch bản này. Hướng dẫn proxy Playwright đề cập đến mẫu kết nối remote-CDP tương tự một cách chi tiết hơn.

Định Nghĩa Hợp Đồng Quyết Định

Ba hàm mang ba phần của vòng lặp: perceive chụp màn hình, decide gửi nó đến mô hình và phân tích phản hồi, và act biến phản hồi đó thành một gọi Playwright. Lời nhắc yêu cầu mô hình điền vào một đối tượng JSON nhỏ theo thứ tự trường cố định — việc nêu một sự thật cụ thể từ hình ảnh trước khi chọn hành động giữ cho quyết định gắn liền với những gì mà ảnh chụp màn hình thực sự cho thấy, thay vì một dự đoán mơ hồ về việc liệu mục tiêu có đạt được hay không:

Thực Thi Ví Dụ Hoàn Chỉnh

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

MỤC TIÊU = (
    'Mục tiêu: đến một trang mà thẻ trích dẫn ĐẦU TIÊN không được viết bởi "Albert Einstein". '
    'Đọc tên tác giả trên thẻ trích dẫn đầu tiên. Nếu đó là "Albert Einstein", nhấp vào '
    'liên kết phân trang "Tiếp theo". Nếu không thì mục tiêu đã hoàn thành.'
)
SCHEMA_PROMPT = (
    MỤC TIÊU + "\n\nPhản hồi chỉ bằng một đối tượng JSON, điền mọi trường theo thứ tự:\n"
    '{"first_quote_author": "<tên tác giả trên thẻ trích dẫn đầu tiên, đọc từ hình ảnh>", '
    '"action": "click" | "type" | "scroll" | "done", '
    '"target": "<văn bản hiển thị của phần tử để nhấp hoặc gõ vào, bỏ qua cho cuộn/xong>", '
    '"value": "<văn bản để gõ, chỉ khi hành động là gõ>", '
    '"reason": "<dưới 8 từ>"}'
)


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


def perceive(page):
    return page.screenshot(full_page=True)


def decide(png_bytes):
    img = "data:image/png;base64," + base64.b64encode(png_bytes).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": SCHEMA_PROMPT},
                  {"type": "image_url", "image_url": {"url": img}}]}],
              "temperature": 0, "max_tokens": 300},
        timeout=120,
    )
    resp.raise_for_status()
    return json.loads(resp.json()["choices"][0]["message"]["content"])


def act(page, decision):
    action = decision["action"]
    if action == "click":
        page.get_by_text(decision["target"], exact=False).first.click(timeout=5000)
        page.wait_for_load_state("networkidle")
    elif action == "type":
        page.get_by_text(decision["target"], exact=False).first.fill(decision["value"], timeout=5000)
    elif action == "scroll":
        page.mouse.wheel(0, 900)
        page.wait_for_timeout(300)
    return action


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")

    max_steps = 4
    for step in range(1, max_steps + 1):
        decision = decide(perceive(page))
        print(f"Bước {step}: tác giả={decision['first_quote_author']!r} "
              f"hành động={decision['action']} lý do={decision['reason']!r}")
        if decision["action"] == "done":
            break
        act(page, decision)

    print("URL cuối:", page.url)
    print("số bước đã thực hiện:", step)
    browser.close()

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

Xác Minh Việc Chạy

Chống lại trang trực tiếp, ví dụ đã điều hướng một lần và dừng lại ở lần tiếp theo:

bước 1: tác giả='Albert Einstein' hành động=nhấp lý do='Tác giả của câu trích dẫn đầu tiên là Albert Einstein, cần nhấp tiếp theo.'
bước 2: tác giả='Marilyn Monroe' hành động=xong lý do='Câu trích dẫn đầu tiên không phải của Albert Einstein.'
url cuối: https://quotes.toscrape.com/page/2/
số bước đã thực hiện: 2

Theo Dõi Quyết Định Hai Bước

Theo dõi cho thấy tại sao vòng lặp cần một ảnh chụp màn hình mới sau mỗi hành động.

Bước 1: Đọc Thẻ Đầu Tiên và Nhấp Tiếp

Bước 1 chụp ảnh màn hình trang chính, và mô hình đọc "Albert Einstein" từ thẻ câu trích dẫn đầu tiên - một thực tế mà bất kỳ ai nhìn vào cùng một hình ảnh sẽ xác nhận - và trả về {"action": "click", "target": "Next →"}. Hàm act giải quyết mục tiêu đó với page.get_by_text("Next →", exact=False), cùng mẫu định vị mà một kịch bản viết chống lại DOM trực tiếp sẽ sử dụng, và nhấp vào đó. Hành động nhấp đưa tới /page/2/.

Bước 2: Xác Nhận Trạng Thái Mới và Dừng

Bước 2 chụp ảnh màn hình trang mới. Thẻ câu trích dẫn đầu tiên bây giờ thuộc về Marilyn Monroe, mô hình báo cáo lại thực tế đó, và hành động mà nó trả về là done. Vòng lặp tự dừng lại sau hai trong số bốn bước đã được cấp — nó không bao giờ cần phải đạt đến giới hạn, và nó cũng không bao giờ cần hành động cuộn, vì perceive ghi lại toàn bộ trang trong một hình ảnh thay vì chỉ vùng nhìn thấy. Đối với một trang tải thêm nội dung khi người dùng cuộn — cuộn vô hạn, các phần tải lười — một ảnh chụp toàn trang không thể nhìn thấy nội dung chưa được tải, đó là lý do tại sao scroll vẫn nằm trong từ vựng hành động mặc dù mục tiêu này không bao giờ kích hoạt nó. Nhánh type hoạt động theo cùng một cách, điền vào bất kỳ phần tử nào khớp với target bằng value; mục tiêu của hành trình này không bao giờ cần một trường biểu mẫu, vì vậy nhánh đó thực hiện logic phân phối tương tự mà không cần lần chạy đặc biệt này kiểm tra nó.

Giữ Vòng Lặp Bị Giới Hạn và Cập Nhật

Hai lựa chọn thiết kế giữ cho một vòng lặp như thế này không chạy khỏi tầm kiểm soát. Giới hạn max_steps có nghĩa là một mô hình không bao giờ trả về done vẫn dừng lại, và chu kỳ ảnh chụp màn hình cộng với quyết định đơn lẻ có nghĩa là vòng lặp không bao giờ hành động dựa trên thông tin cũ — mỗi quyết định được đưa ra dựa trên trang như nó tồn tại vào thời điểm đó, không phải dựa trên một giả định về những gì đã thay đổi kể từ cái nhìn cuối cùng.

Chọn Hình Dạng Trình Duyệt-Điện Tử Đúng

Cách tiếp cận phù hợp phụ thuộc vào việc liệu nhiệm vụ cần một quan sát hay nhiều và liệu bạn có cần xem xét logic quyết định.

Một cuộc gọi tầm nhìn đơn đọc một ảnh chụp màn hình và trả về dữ liệu có cấu trúc mà không thực hiện hành động. Những gì một trình thu thập thông tin LLM làm bao phủ mẫu trích xuất rộng hơn. Sử dụng hình dạng đó khi nhiệm vụ chỉ đơn giản là đọc một giá trị.

Vòng lặp tùy chỉnh dành cho những mục tiêu cần hơn một cái nhìn để thuyết phục. Mỗi ảnh chụp màn hình phụ thuộc vào hành động trước đó, và logic quyết định chính xác vẫn nằm trong mã có thể được kiểm tra và thay đổi.

Khung đại lý đóng gói bao bọc cùng một vòng lặp — hoặc một biến thể dựa trên văn bản của nó, trong trường hợp Sử dụng Trình Duyệt — đứng sau một trình chạy tác vụ. Giao dịch đó hữu ích khi hình dạng của vòng lặp đã ổn định và công việc chính là chạy nhiều mục tiêu qua nhiều trang.

Kết Luận: Giữ Vòng Lặp Nhỏ và Có Thể Quan Sát

Cơ chế phía sau một đại lý "sử dụng máy tính" là một ảnh chụp màn hình, một cuộc gọi mô hình tầm nhìn được hạn chế trong một danh sách ngắn các hành động, và một lệnh trình duyệt thực hiện kết quả. Chu kỳ lặp lại cho đến khi mô hình báo cáo rằng mục tiêu đã được đạt được hoặc một giới hạn bước đã đạt được.

Chạy ở trên đã mất hai lần để di chuyển từ một trang có Albert Einstein sang một trang có Marilyn Monroe. Quyết định của mô hình vẫn được hiển thị ở mỗi bước, và cuộc gọi Playwright đã thực hiện nó vẫn là mã ứng dụng thông thường.

Đọc những gì thời gian chạy cung cấp trên trang sản phẩm Scraping Browser và cân nhắc số bước so với chi phí mô hình trên trang giá trước khi mở rộng một vòng lặp như thế này qua một số lượng mục tiêu.

Sẵn Sàng Xây Dựng Vòng Lặp Đại Lý Trình Duyệt?

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 tác nhân trình duyệt: Discord · Telegram.

Đăng ký tại app.scrapeless.com để nhận môi trường vận hành Scraping Browser miễn phí và điều chỉnh vòng lặp giới hạn cho một trang công cộng và mục tiêu mà bạn có thể kiểm tra từng bước.

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

Q: Vòng lặp tác nhân trình duyệt kiểu sử dụng máy tính là gì?

Vòng lặp tác nhân trình duyệt kiểu sử dụng máy tính là một chu trình gồm ba bước lặp đi lặp lại cho đến khi đạt được mục tiêu: nhận diện trang bằng một ảnh chụp màn hình, quyết định một hành động bằng cách gửi ảnh chụp đó đến một mô hình có khả năng nhìn, và hành động bằng cách thực thi quyết định đó với lệnh trình duyệt thực. Công cụ Sử Dụng Máy Tính của OpenAI và chế độ sử dụng máy tính của Google Gemini đóng gói cùng một chu trình phía sau một API được lưu trữ.

Q: Điều này khác gì so với việc chạy Skyvern hoặc Browser Use trên cùng một trình duyệt?

Những framework đó chạy cùng một loại vòng lặp bên trong, nhưng Prompt, sơ đồ hành động và mã quyết định đều nằm trong thư viện. Hướng dẫn này viết ba phần đó một cách trực tiếp, vì vậy mọi phần của quyết định đều có thể nhìn thấy và chỉnh sửa trong kịch bản gọi thay vì trong giao diện cấu hình của một framework.

Q: Điều này khác gì so với việc gọi trích xuất từ ảnh chụp màn hình thành JSON một lần?

Một cuộc gọi nhìn đơn lẻ đọc một hình ảnh và trả về dữ liệu mà không thực hiện hành động và không có vòng lặp. Hướng dẫn này lặp lại việc nhận diện, quyết định và hành động cho đến khi mô hình báo cáo rằng mục tiêu đã đạt, và ảnh chụp màn hình của từng bước phản ánh kết quả của hành động ở bước trước đó.

Q: Tại sao lại giới hạn phản hồi của mô hình vào một sơ đồ hành động cố định thay vì hướng dẫn tự do?

Một từ vựng nhỏ, cố định — nhấp, gõ, cuộn, xong — biến phản hồi của mô hình thành thứ mà mã gọi có thể phân phối một cách xác định với chuỗi if/elif. Một phản hồi không bị giới hạn sẽ cần có lớp phân tích và diễn giải riêng trước khi nó có thể an toàn điều khiển một trình duyệt.

Q: Tại sao vòng lặp lại yêu cầu mô hình nêu một sự thật cụ thể trước khi chọn hành động?

Yêu cầu mô hình nêu một chi tiết có thể kiểm tra từ hình ảnh — tác giả trên thẻ đầu tiên, trong ví dụ này — giữ hành động gắn với những gì ảnh chụp màn hình thực sự thể hiện. Một trường yêu cầu mô hình lý luận một cách thoải mái về việc mục tiêu có đạt hay không đang có nguy cơ trôi khỏi hình ảnh trước mắt.

Q: Tại sao lại chụp ảnh màn hình toàn bộ trang thay vì chỉ khu vực nhìn thấy?

Để mô hình có thể thấy các phần bên dưới khu vực nhìn thấy, như một liên kết phân trang ở dưới cùng của một danh sách dài, mà không cần cuộn trước. Một trang tải thêm nội dung chỉ khi người dùng cuộn — cuộn vô hạn hoặc các phần tải lười — là trường hợp mà việc chụp toàn bộ trang không đáp ứng và hành động cuộn kiếm được vị trí của nó trong vòng lặp.

Q: Tại sao lại giới hạn số bước?

max_steps giới hạn số chu kỳ nhận diện-quyết định-hành động mà một mục tiêu đơn lẻ có thể chạy, vì vậy một mô hình không bao giờ trả về done vẫn dừng lại thay vì hành động vô hạn. Mỗi bước là một ảnh chụp màn hình và một cuộc gọi mô hình, vì vậy giới hạn cũng giới hạn chi phí của quá trình chạy.

Q: Mô hình nhìn nào được ví dụ sử dụng, và có mô hình nào khác có thể thay thế nó không?

Ví dụ này chuyển tiếp đến google/gemini-2.5-flash-lite thông qua OpenRouter. Bất kỳ mô hình có khả năng nhìn nào có thể truy cập thông qua hình dạng chat-completions tương tự có thể thay thế bằng cách thay đổi trường model.

Q: Có an toàn không khi chỉ vào một vòng lặp như thế này tại một trang thực?

Có, khi mục tiêu là công cộng, số bước được giới hạn, và mục tiêu không bao gồm đăng nhập, thanh toán và dữ liệu riêng tư. Ví dụ trên chạy hai bước giới hạn chống lại một trang trích dẫn công cộng được xây dựng cho thực hành trích xuất.