NAME
webgpu-on-device-ai-browser — WebGPU và AI trên thiết bị: Trình duyệt đang trở thành một thời gian chạy nghiêm trọng
SYNOPSIS
cat webgpu-on-device-ai-browser.md
DESCRIPTION
Trong nhiều năm, trình duyệt là bộ mặt đẹp của ứng dụng và đám mây là nơi xảy ra những vấn đề khó khăn. Người dùng viết, nhấp chuột, tải tệp lên; giao diện người dùng gửi mọi thứ đến máy chủ; máy chủ gọi một mô hình; câu trả lời sẽ quay trở lại.
Chương trình này vẫn rất hữu ích, nhưng nó không miễn phí. Mọi cuộc gọi đều mang lại độ trễ, chi phí, sự phụ thuộc vào mạng và các câu hỏi về quyền riêng tư. Nếu người dùng đang viết một câu và muốn có một gợi ý, nửa giây sẽ có giá trị. Nếu bạn đang phân loại hàng ngàn đầu vào nhỏ thì đồng xu sẽ trở thành tiền thật. Nếu văn bản nhạy cảm, việc gửi nó đi khỏi thiết bị không phải là một lựa chọn trung lập.
Đó là lý do tại sao WebGPU và AI trên thiết bị đang được quảng cáo rầm rộ. Không phải vì ngày mai chúng tôi sẽ chạy mọi mô hình trên trình duyệt. Bởi vì một số tính năng thông minh có thể đến gần hơn với người dùng.
Không phải mọi thứ đều phải mang tính địa phương
Phiên bản trẻ con của lập luận này là: "đám mây so với thiết bị". Phiên bản hữu ích là phiên bản hybrid.
Một số tác vụ trông tuyệt vời trên thiết bị: tóm tắt ngắn, phát hiện ngôn ngữ, viết lại nhẹ nhàng, phân loại đơn giản, bộ lọc hình ảnh, mô hình tầm nhìn nhỏ, trải nghiệm sáng tạo với phản hồi ngay lập tức.
Các tác vụ khác vẫn tốt hơn trên đám mây: lý luận phức tạp, mô hình biên giới, dữ liệu phía máy chủ, kiểm tra tập trung, chất lượng đồng nhất, quy trình làm việc trong đó bạn phải kiểm soát cẩn thận từng bước.
Kiến trúc lành mạnh quyết định trong thời gian chạy:
Trình duyệt không cần phải chiến thắng đám mây. Nó phải cứu đám mây khỏi thực hiện những công việc không cần thiết ở đó.
Tại sao WebGPU lại quan trọng
WebGPU là một API hiện đại để sử dụng GPU từ trình duyệt. Nó không chỉ dành cho đồ họa 3D đẹp hơn. Nó cũng quan trọng vì nó hiển thị các nguyên thủy phù hợp cho điện toán: khối lượng công việc song song, trình đổ bóng, đường dẫn gần hơn với những gì GPU hoạt động tốt.
Đối với AI, trực quan hóa khoa học, trình chỉnh sửa 3D, bộ lọc video và công cụ sáng tạo, sự khác biệt này được cảm nhận rõ ràng. WebGL đã làm được rất nhiều điều cho web, nhưng WebGPU ra đời với một mô hình phù hợp hơn với hiện tại.
Tuy nhiên, thứ đầu tiên cần viết không phải là shader. Đó là một tính năng phát hiện tỉnh táo:
export async function requestWebGpuDevice() { if (!('gpu' in navigator)) { return null; } const adapter = await navigator.gpu.requestAdapter({ powerPreference: 'high-performance', }); if (!adapter) { return null; } return adapter.requestDevice(); }
Tính năng này nói lên một điều quan trọng: WebGPU không phải là quyền được cấp trên mọi thiết bị. Đó là một khả năng được xác minh. Một số trình duyệt không hỗ trợ đầy đủ, một số GPU có những hạn chế, một số môi trường doanh nghiệp tắt tính năng, một số người dùng sử dụng phần cứng khiêm tốn.
AI tích hợp: khi trình duyệt đưa mô hình
Chrome đang phát triển các API tích hợp cho các tác vụ như lời nhắc cục bộ, tóm tắt, viết, viết lại, dịch, phát hiện ngôn ngữ và hiệu đính. Ý tưởng này rất thú vị: trình duyệt quản lý mô hình, tính khả dụng và cập nhật; ứng dụng sử dụng API gần với nền tảng hơn.
Nếu nó hoạt động tốt, nó sẽ thay đổi rất nhiều:
- ít cuộc gọi máy chủ hơn cho các tác vụ đơn giản;
- dữ liệu có thể vẫn còn trên thiết bị;
- độ trễ thấp hơn;
- trải nghiệm ngoại tuyến hoặc bán ngoại tuyến;
- UX tự nhiên hơn cho việc viết và dịch.
Nhưng nó nên được coi là sự nâng cao tiến bộ. Một số API ổn định, một số khác ở dạng dùng thử hoặc xem trước ban đầu, một số khác vẫn phụ thuộc vào phiên bản, ngôn ngữ và thiết bị.
type LocalCapability = 'available' | 'downloadable' | 'unsupported'; export async function getLocalSummarizerCapability(): Promise<LocalCapability> { const SummarizerApi = (globalThis as any).Summarizer; if (!SummarizerApi?.availability) { return 'unsupported'; } const availability = await SummarizerApi.availability(); if (availability === 'available') return 'available'; if (availability === 'downloadable') return 'downloadable'; return 'unsupported'; }
Mã cụ thể sẽ thay đổi nhưng mẫu vẫn giữ nguyên: bạn kiểm tra tính khả dụng, giải thích mọi nội dung tải xuống, đưa ra dự phòng và đo lường chất lượng.
Dự phòng không phải là một kế hoạch B đáng buồn
Dự phòng trên đám mây không phải là một thất bại. Nó là một phần của sản phẩm.
interface AiRequest { task: 'summarize' | 'rewrite' | 'classify'; input: string; } interface AiResult { output: string; runtime: 'local' | 'cloud'; } export async function runAiTask(request: AiRequest): Promise<AiResult> { const local = await tryLocalAi(request); if (local) { return { output: local, runtime: 'local' }; } const cloud = await fetch('/api/ai', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(request), }).then((res) => res.json()); return { output: cloud.output, runtime: 'cloud' }; }
Kiến trúc này cho phép bạn cải thiện dần dần. Những người được hỗ trợ tại địa phương sẽ có độ trễ và quyền riêng tư tốt hơn. Những người không có nó vẫn sử dụng tính năng này. Bạn có thể đo tỷ lệ phần trăm yêu cầu cục bộ, thời gian, lỗi, bộ nhớ, chất lượng cảm nhận và chi phí.
Không có số liệu, AI trên thiết bị sẽ trở thành một lựa chọn mang tính thẩm mỹ. Với số liệu, nó trở thành đòn bẩy sản phẩm.
UX của mô hình quan trọng
Nếu trình duyệt cần tải xuống một mô hình, người dùng sẽ nhận thấy nó. Đừng giấu nó đằng sau một vòng quay mơ hồ. Tốt hơn nên nói rõ: "Chúng tôi chuẩn bị mô hình để sử dụng chức năng này nhanh hơn và thậm chí ngoại tuyến."
Một trải nghiệm tốt:
- hiển thị trạng thái chuẩn bị;
- không chặn toàn bộ trang;
- cho phép bạn tiếp tục với dự phòng trên đám mây;
- tránh những bất ngờ về pin và bộ nhớ;
- nhớ mô hình bất cứ khi nào có thể;
- giải thích lợi ích trong một câu cụ thể.
Điều tồi tệ nhất là một tính năng "thông minh" dường như bị hỏng vì nó đang tải xuống thứ gì đó một cách âm thầm.
Quyền riêng tư: tốt hơn, không tự động bảo mật
Xử lý dữ liệu trên thiết bị có thể là một lợi thế lớn. Email nháp, tài liệu nội bộ hoặc ghi chú cá nhân không cần phải rời khỏi trình duyệt của bạn để nhận được đề xuất.
Tuy nhiên, cục bộ không tự động có nghĩa là an toàn. Tuy nhiên, bạn cần suy nghĩ về:
- XSS;
- nhật ký ngẫu nhiên;
- dữ liệu được lưu trong bộ lưu trữ;
- tiêm ngay nội dung không đáng tin cậy;
- quyền được cấp cho mô hình;
- đầu ra được sử dụng trong các hành động tự động.
Nếu một mô hình cục bộ có thể đọc một trang web và sau đó điền vào biểu mẫu, trang đó có thể cố gắng thao tác với nó. Nếu nó có thể gọi công cụ thì cần phải xác nhận. Nếu nó tạo ra đầu ra có cấu trúc, nó phải được xác nhận. Việc nó chạy trên thiết bị làm giảm một số rủi ro về quyền riêng tư nhưng không loại bỏ mô hình bảo mật.
Nơi nó thực sự thú vị
Văn bản chỉ là sự khởi đầu. WebGPU làm cho trải nghiệm web trở nên đáng tin cậy mà cho đến gần đây nó vẫn giống như một ứng dụng gốc:
- trình chỉnh sửa 3D phức tạp;
- Phát tán Gaussian trong trình duyệt;
- bộ lọc video thời gian thực;
- CAD nhẹ;
- trực quan hóa khoa học;
- công cụ sáng tạo với tính năng xem trước tức thì;
- suy luận tầm nhìn gần giao diện người dùng;
- trò chơi trình duyệt đầy tham vọng hơn.
Ở đây giao diện người dùng, đồ họa và máy học bắt đầu kết hợp với nhau. Đó là một lĩnh vực hơi khó xử lý nhưng cũng là một lĩnh vực màu mỡ: trình duyệt trở lại là một nền tảng ứng dụng nghiêm túc, không chỉ là nơi chúng ta đặt các biểu mẫu và trang tổng quan.
Danh sách kiểm tra trước khi sản xuất
Trước khi hiển thị tính năng trên thiết bị cho người dùng, tôi sẽ kiểm tra:
- Nhắm mục tiêu trình duyệt và thiết bị.
- Dự phòng đám mây hoặc xuống cấp thanh lịch.
- Thời gian tải xuống và bộ đệm mô hình.
- Bộ nhớ và pin trên phần cứng trung bình.
- Chất lượng so với phiên bản đám mây.
- Chính sách bảo mật và tin nhắn của người dùng.
- Thử nghiệm với đầu vào thù địch.
- Các số liệu riêng biệt cho thời gian chạy cục bộ và đám mây.
- Lập kế hoạch cập nhật hoặc vô hiệu hóa mẫu.
Đó là một danh sách cụ thể vì vấn đề là cụ thể. Một tính năng AI chậm, yếu hoặc mờ đục không thể trở nên tốt hơn chỉ vì nó chạy trên trình duyệt.
Sự thỏa hiệp đúng đắn
Tôi không tin rằng tương lai là "mọi thứ trên thiết bị". Và tôi cũng không nghĩ đám mây sẽ vẫn là nơi hợp lý duy nhất để suy luận. Tương lai rất có thể là sự kết hợp: cục bộ khi nó cải thiện độ trễ, quyền riêng tư hoặc chi phí; cloud khi cần chất lượng, dữ liệu cập nhật và kiểm soát tập trung.
WebGPU, WebNN và API AI tích hợp không làm cho trình duyệt trở nên toàn năng. Chúng khiến anh trưởng thành hơn. Và đối với những người xây dựng sản phẩm web, đây là một tin tức lớn.
Nguồn hữu ích
METADATA
- date: 2026-05-24
- reading: 9 min
- author: Filippo Spinella
- tags: WebGPU, AI, Frontend, Web Performance