Giúp tác nhân AI hiểu màn hình: Hướng dẫn thực tế thiết kế Semantics trong Jetpack Compose

Giúp tác nhân AI hiểu màn hình: Hướng dẫn thực tế thiết kế Semantics trong Jetpack Compose

Giới thiệu

Để các tác nhân AI và công cụ tự động hóa kiểm thử trong Jetpack Compose hiểu chính xác "nút này làm gì", thiết kế Semantics phù hợp là chìa khóa.

Compose có nội bộ một "Semantics Tree" hoạt động như cấu trúc ngữ nghĩa được tham chiếu bởi khả năng tiếp cận, kiểm thử UI và AI vận hành tự động (như Appium/UIAutomator/MCP). Đây tương đương với ARIA và DOM trong web.

Các thuộc tính chính của Semantics

contentDescription

Thuộc tính cơ bản nhất để cung cấp ý nghĩa cho các nút chỉ có biểu tượng.

IconButton(
    onClick = onDelete,
    modifier = Modifier.semantics {
        contentDescription = "Xóa"
    }
) {
    Icon(Icons.Default.Delete, contentDescription = null)
}

AI và khả năng tiếp cận nhận ra nó là "nút Xóa · có thể nhấp · vai trò Button".

role

Chỉ định loại UI cho thành phần tùy chỉnh. Box(clickable) đơn giản sẽ là "thứ gì đó có thể nhấp", nhưng thêm role làm rõ ý nghĩa như Button, Switch, Checkbox, Tab, v.v.

Modifier.semantics {
    role = Role.Button
}

stateDescription

Thông báo cho AI về trạng thái hiện tại của UI.

Modifier.semantics {
    stateDescription =
        if (subscribed) "Đã đăng ký"
        else "Chưa đăng ký"
}

testTag

Định danh quan trọng nhất cho MCP, Appium và các tác nhân UI tự động. Cho phép nhận dạng ổn định không phụ thuộc vào tọa độ, OCR hoặc thay đổi văn bản.

Modifier.testTag("login_button")

Cài đặt cho tích hợp UIAutomator

Compose không tạo trực tiếp hệ thống phân cấp View, nên UIAutomator có thể không thấy testTag. Điều này được giải quyết bằng cách thêm vào root:

Scaffold(
    modifier = Modifier.semantics {
        testTagsAsResourceId = true
    }
)

testTag sẽ được nhận dạng như resource-id và có thể lấy trực tiếp từ UIAutomator.

Mẫu triển khai dễ hiểu nhất với AI

Thực hành tốt nhất là kết hợp nhiều thuộc tính.

Button(
    onClick = login,
    modifier = Modifier
        .testTag("login_button")
        .semantics {
            contentDescription = "Đăng nhập"
            role = Role.Button
        }
) {
    Text("Đăng nhập")
}

Gộp UI phức tạp thành một ý nghĩa duy nhất

Để trình bày cho AI một cấu trúc phức tạp gồm biểu tượng, văn bản, Badge như một nút duy nhất, sử dụng clearAndSetSemantics.

Modifier.clearAndSetSemantics {
    contentDescription = "Thêm sản phẩm vào giỏ hàng"
    role = Role.Button
}

Cấu trúc lồng nhau bên trong và các nhóm biểu tượng có thể bỏ qua, chỉ truyền ý nghĩa cho AI.

Những gì có thể đạt được với thiết kế Semantics

Ổn định hóa tự động hóa

Với testTag, có thể vận hành ổn định mà không cần tọa độ hay OCR. Dù thiết kế lại UI, tự động hóa không bị hỏng miễn là testTag vẫn giữ nguyên. Hỗ trợ đa ngôn ngữ cũng được tăng cường.

Giảm lượng token

Khi chỉ dựa vào ảnh chụp màn hình, phân tích hình ảnh cần rất nhiều token, nhưng với Semantics Tree có thể xử lý như dữ liệu có cấu trúc nhẹ.

[
  {"type": "Button", "label": "Đăng nhập"},
  {"type": "TextField", "label": "Email"},
  {"type": "TextField", "label": "Mật khẩu"}
]

Đặc biệt hiệu quả trong các hoạt động tự động kéo dài và phân tích màn hình quy mô lớn, cũng góp phần ngăn chặn context overflow.

AI hiểu trạng thái

Nhờ stateDescription, AI có thể ước tính trạng thái hiện tại của màn hình và đưa ra quyết định như "hiện đang tạm dừng, vậy hãy nhấn nút phát". Cho phép hiểu màn hình như một máy trạng thái.

Phân tích có cấu trúc trong tích hợp MCP

Lấy Semantics Tree qua MCP Server và truyền cho LLM Agent, có thể hiểu ý nghĩa toàn bộ màn hình, ước tính các ứng viên cho thao tác tiếp theo và phân tích chuyển đổi trạng thái.

Compose UI → Semantics Tree → MCP Server → LLM Agent

Tóm tắt sử dụng thuộc tính Semantics

Kết luận

Compose cho phép tách biệt "giao diện" và "ý nghĩa". Bản chất của thiết kế Semantics nằm ở khả năng thiết kế độc lập UI cho con người và cấu trúc ngữ nghĩa cho AI.

Nếu bạn sẽ sử dụng các tác nhân AI, MCP, UIAutomator và kiểm thử E2E tự động, việc chuẩn hóa sau đây cho mỗi thành phần mang lại ROI cao:

Modifier
    .testTag(...)
    .semantics {
        contentDescription = ...
        role = ...
    }

Truyền "đây là nút gì · điều gì xảy ra khi nhấn · trạng thái hiện tại là gì" qua Semantics thay vì màu sắc, vị trí và kích thước — đây là cốt lõi của thiết kế UI mạnh mẽ cho AI.