spinny:~/writing $ vim webgpu-on-device-ai-browser.md
1~2Trong 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.3~4Chươ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.5~6Đó 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.7~8## Không phải mọi thứ đều phải mang tính địa phương9~10Phiê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.11~12Mộ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.13~14Cá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.15~16Kiến trúc lành mạnh quyết định trong thời gian chạy:17~18```mermaid19flowchart TD20 User[người dùng] --> Browser[Trình duyệt]21 Browser --> Detect[Phát hiện tính năng]22 Detect -->|Được hỗ trợ| Local[Suy luận cục bộ]23 Detect -->|Không được hỗ trợ| Cloud[Dự phòng đám mây]24 Local --> UX[Phản hồi nhanh]25 Cloud --> UX26 UX --> Metrics[Số liệu và chất lượng]27```28~29Trì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 ở đó.30~31## Tại sao WebGPU lại quan trọng32~33WebGPU 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.34~35Đố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.36~37Tuy 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:38~39```typescript40export async function requestWebGpuDevice() {41 if (!('gpu' in navigator)) {42 return null;43 }44~45 const adapter = await navigator.gpu.requestAdapter({46 powerPreference: 'high-performance',47 });48~49 if (!adapter) {50 return null;51 }52~53 return adapter.requestDevice();54}55```56~57Tí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.58~59## AI tích hợp: khi trình duyệt đưa mô hình60~61Chrome đ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.62~63Nếu nó hoạt động tốt, nó sẽ thay đổi rất nhiều:64~65- ít cuộc gọi máy chủ hơn cho các tác vụ đơn giản;66- dữ liệu có thể vẫn còn trên thiết bị;67- độ trễ thấp hơn;68- trải nghiệm ngoại tuyến hoặc bán ngoại tuyến;69- UX tự nhiên hơn cho việc viết và dịch.70~71Như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ị.72~73```typescript74type LocalCapability = 'available' | 'downloadable' | 'unsupported';75~76export async function getLocalSummarizerCapability(): Promise<LocalCapability> {77 const SummarizerApi = (globalThis as any).Summarizer;78~79 if (!SummarizerApi?.availability) {80 return 'unsupported';81 }82~83 const availability = await SummarizerApi.availability();84~85 if (availability === 'available') return 'available';86 if (availability === 'downloadable') return 'downloadable';87~88 return 'unsupported';89}90```91~92Mã 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.93~94## Dự phòng không phải là một kế hoạch B đáng buồn95~96Dự 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.97~98```typescript99interface AiRequest {100 task: 'summarize' | 'rewrite' | 'classify';101 input: string;102}103~104interface AiResult {105 output: string;106 runtime: 'local' | 'cloud';107}108~109export async function runAiTask(request: AiRequest): Promise<AiResult> {110 const local = await tryLocalAi(request);111~112 if (local) {113 return { output: local, runtime: 'local' };114 }115~116 const cloud = await fetch('/api/ai', {117 method: 'POST',118 headers: { 'Content-Type': 'application/json' },119 body: JSON.stringify(request),120 }).then((res) => res.json());121~122 return { output: cloud.output, runtime: 'cloud' };123}124```125~126Kiế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í.127~128Khô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.129~130## UX của mô hình quan trọng131~132Nế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."133~134Một trải nghiệm tốt:135~136- hiển thị trạng thái chuẩn bị;137- không chặn toàn bộ trang;138- cho phép bạn tiếp tục với dự phòng trên đám mây;139- tránh những bất ngờ về pin và bộ nhớ;140- nhớ mô hình bất cứ khi nào có thể;141- giải thích lợi ích trong một câu cụ thể.142~143Đ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.144~145## Quyền riêng tư: tốt hơn, không tự động bảo mật146~147Xử 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.148~149Tuy 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ề:150~151- XSS;152- nhật ký ngẫu nhiên;153- dữ liệu được lưu trong bộ lưu trữ;154- tiêm ngay nội dung không đáng tin cậy;155- quyền được cấp cho mô hình;156- đầu ra được sử dụng trong các hành động tự động.157~158Nế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.159~160## Nơi nó thực sự thú vị161~162Vă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:163~164- trình chỉnh sửa 3D phức tạp;165- Phát tán Gaussian trong trình duyệt;166- bộ lọc video thời gian thực;167- CAD nhẹ;168- trực quan hóa khoa học;169- công cụ sáng tạo với tính năng xem trước tức thì;170- suy luận tầm nhìn gần giao diện người dùng;171- trò chơi trình duyệt đầy tham vọng hơn.172~173Ở đâ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.174~175## Danh sách kiểm tra trước khi sản xuất176~177Trướ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:178~1791. Nhắm mục tiêu trình duyệt và thiết bị.1802. Dự phòng đám mây hoặc xuống cấp thanh lịch.1813. Thời gian tải xuống và bộ đệm mô hình.1824. Bộ nhớ và pin trên phần cứng trung bình.1835. Chất lượng so với phiên bản đám mây.1846. Chính sách bảo mật và tin nhắn của người dùng.1857. Thử nghiệm với đầu vào thù địch.1868. Các số liệu riêng biệt cho thời gian chạy cục bộ và đám mây.1879. Lập kế hoạch cập nhật hoặc vô hiệu hóa mẫu.188~189Đó 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.190~191## Sự thỏa hiệp đúng đắn192~193Tô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.194~195WebGPU, 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.196~197## Nguồn hữu ích198~199- [API WebGPU - MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)200- [Đặc tả WebGPU - W3C](https://www.w3.org/TR/webgpu/)201- [AI tích hợp - Chrome dành cho nhà phát triển](https://developer.chrome.com/docs/ai/built-in)202- [API AI tích hợp - Chrome dành cho nhà phát triển](https://developer.chrome.com/docs/ai/built-in-apis)203- [API WebNN](https://webnn.io/)204~
NORMAL · webgpu-on-device-ai-browser.md [readonly]204 lines · :q to close