Posted inAI

Xây dựng AI Agent ‘biết nhìn’: Kết hợp OmniParser và Playwright để bỏ qua hoàn toàn CSS Selector

Artificial Intelligence tutorial - IT technology blog
Artificial Intelligence tutorial - IT technology blog

Nỗi ám ảnh mang tên ‘Broken Selectors’

Bạn đã bao giờ thức dậy lúc 2 giờ sáng vì script automation bị lỗi chỉ vì frontend đổi tên class từ .btn-submit thành .btn-primary-v2 chưa? Với các ứng dụng hiện đại như Salesforce hay SAP Web, cấu trúc DOM thay đổi liên tục khiến việc duy trì XPath hay CSS Selector trở thành một cuộc chiến không hồi kết.

Các công cụ truyền thống đang gặp một điểm yếu chí mạng: chúng bị “mù”. Chúng tương tác với mã nguồn thay vì nhìn vào giao diện như con người. Khi bạn thấy một nút “Thanh toán”, bạn nhận diện nó qua màu sắc, vị trí và chữ viết. Bạn không quan tâm nó có ID là #ext-gen-1024 hay không.

Để giải quyết tận gốc, mình đã chuyển sang sử dụng OmniParser của Microsoft. Đây là cách giúp AI Agent “nhìn” ảnh màn hình, hiểu các thành phần UI và ra lệnh cho Playwright thao tác mà không cần chạm vào một dòng code HTML nào.

OmniParser: Đôi mắt của AI Agent

OmniParser không chỉ là OCR thông thường. Đây là mô hình thị giác máy tính chuyên biệt giúp cấu trúc hóa mọi pixel trên màn hình thành dữ liệu máy tính có thể hiểu được. Cụ thể, nó thực hiện ba tác vụ chính:

  • Detection: Tự động khoanh vùng các icon, nút bấm và ô nhập liệu với độ chính xác cao.
  • Functional Semantics: Hiểu ngữ nghĩa của phần tử (ví dụ: nhận diện biểu tượng chiếc xe đẩy là “Giỏ hàng”).
  • Coordinate Mapping: Trích xuất tọa độ (x, y) chính xác để Playwright có thể click.

Khi kết hợp với các LLM mạnh về thị giác như GPT-4o, OmniParser đóng vai trò bộ lọc thông tin. Nó giúp giảm tải lượng dữ liệu hình ảnh khổng lồ thành các nhãn (labels) gọn nhẹ, giúp AI không bị “loạn” khi nhìn vào một dashboard phức tạp.

Quy trình vận hành của hệ thống

Thay vì viết code cứng (hard-coded), Agent của mình hoạt động theo một vòng lặp tư duy:

  1. Chụp ảnh: Playwright chụp ảnh màn hình hiện tại.
  2. Phân tích: OmniParser đánh số thứ tự lên từng nút bấm và trích xuất tọa độ.
  3. Ra quyết định: LLM nhận ảnh đã đánh số, đối chiếu với yêu cầu người dùng và chọn số cần tương tác.
  4. Thực thi: Playwright click vào tọa độ tương ứng với số đó.

Hướng dẫn triển khai thực tế

1. Thiết lập môi trường

OmniParser yêu cầu GPU để đạt tốc độ xử lý tối ưu. Bạn nên chạy nó dưới dạng một microservice để script Playwright có thể gọi qua API.

# Clone repo và cài đặt môi trường
git clone https://github.com/microsoft/OmniParser.git
cd OmniParser
pip install -r requirements.txt

Trong thực tế, mình thường đóng gói OmniParser vào Docker và deploy lên một server có GPU (như RTX 3060 hoặc A100) để xử lý ảnh trong dưới 1 giây.

2. Kết nối Playwright với thị giác máy tính

Đây là cách mình điều khiển trình duyệt bằng tọa độ thay vì selector truyền thống:

from playwright.sync_api import sync_playwright
import requests

def get_ui_map(screenshot_path):
    # Gửi ảnh đến OmniParser API
    with open(screenshot_path, "rb") as f:
        response = requests.post("http://localhost:8000/parse", files={"file": f})
    return response.json() 

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("https://example-dashboard.com")
    
    # Chụp ảnh và phân tích
    page.screenshot(path="screen.png")
    elements = get_ui_map("screen.png")
    
    # Lấy tọa độ nút 'Export' đã được OmniParser nhận diện
    target = elements['Export_Button']
    page.mouse.click(target['x'], target['y'])
    print(f"Đã click vào tọa độ {target['x']}, {target['y']}")

3. Kỹ thuật Prompting cho Vision Agent

Đừng gửi ảnh thô cho LLM. Hãy gửi ảnh đã được OmniParser vẽ các ô vuông đánh số (bounding boxes). Một prompt hiệu quả sẽ như sau: “Trong ảnh này, nút ‘Thêm vào giỏ’ được đánh số mấy? Trả về định dạng JSON: {‘action’: ‘click’, ‘element_number’: X}”.

Bài học rút ra từ dự án thực tế

Mình đã triển khai hệ thống này để crawl dữ liệu từ 50 trang web thương mại điện tử khác nhau. Dưới đây là những con số và lưu ý quan trọng:

  • Tỷ lệ ổn định: Script không còn chết khi UI thay đổi nhẹ, giảm 80% thời gian bảo trì code selector.
  • Độ trễ (Latency): Toàn bộ quy trình mất khoảng 3-6 giây mỗi bước. Đây là đánh đổi để lấy sự linh hoạt, nên không phù hợp cho các task cần tốc độ milisecond.
  • Lưu ý về Viewport: Bạn phải set device_scale_factor: 1 trong Playwright. Nếu không, tọa độ click trên ảnh và tọa độ thực tế trên trình duyệt sẽ bị lệch nhau.
  • Tối ưu chi phí: Chỉ gọi OmniParser khi trang web có sự thay đổi lớn hoặc sau khi thực hiện một hành động quan trọng.

Tại sao phương pháp này là tương lai?

Việc thoát ly khỏi DOM là bước tiến bắt buộc nếu bạn muốn xây dựng các AI Agent có khả năng tự học. Mình từng thử nghiệm cho Agent thao tác trên một ứng dụng nội bộ cũ kỹ từ năm 2010, nơi mà code HTML cực kỳ lộn xộn. Kết quả thật bất ngờ: Agent vẫn click đúng nút nhờ vào việc nhận diện hình ảnh, điều mà các script Selenium truyền thống phải mất hàng giờ để debug.

Kết hợp Playwright và OmniParser không chỉ là một kỹ thuật mới. Đó là cách chúng ta thay đổi tư duy: dạy máy tính nhìn thế giới theo cách con người nhìn.

Share:
Tags: