Mặc dù hầu hết các tính năng AI trên web đều dựa vào máy chủ, nhưng AI phía máy khách chạy trực tiếp trong trình duyệt của người dùng. Điều này mang lại các lợi ích như độ trễ thấp, giảm chi phí phía máy chủ, không yêu cầu khoá API, tăng quyền riêng tư của người dùng và quyền truy cập ngoại tuyến. Bạn có thể triển khai AI phía máy khách hoạt động trên các trình duyệt bằng các thư viện JavaScript như TensorFlow.js, Transformers.js và MediaPipe GenAI.
AI phía máy khách cũng gây ra những thách thức về hiệu suất: người dùng phải tải nhiều tệp xuống hơn và trình duyệt của họ phải hoạt động nhiều hơn. Để đảm bảo tính năng này hoạt động tốt, hãy cân nhắc:
- Trường hợp sử dụng của bạn. AI phía máy khách có phải là lựa chọn phù hợp cho tính năng của bạn không? Tính năng của bạn có nằm trong hành trình trọng yếu của người dùng không? Nếu có, bạn có phương án dự phòng không?
- Các phương pháp hay để tải xuống và sử dụng mô hình. Hãy đọc tiếp để tìm hiểu thêm.
Trước khi tải mô hình xuống
Thư viện tâm trí và kích thước mô hình
Để triển khai AI phía máy khách, bạn sẽ cần một mô hình và thường là một thư viện. Khi chọn thư viện, hãy đánh giá kích thước của thư viện đó như cách bạn đánh giá mọi công cụ khác.
Kích thước mô hình cũng quan trọng. Kích thước được coi là lớn đối với một mô hình AI còn tuỳ thuộc. 5 MB có thể là một quy tắc chung hữu ích: đây cũng là phân vị thứ 75 của kích thước trang web trung bình. Một con số nới lỏng hơn sẽ là 10MB.
Sau đây là một số điểm quan trọng cần cân nhắc về kích thước mô hình:
- Nhiều mô hình AI dành riêng cho một tác vụ có thể rất nhỏ. Một mô hình như BudouX, để ngắt ký tự chính xác trong các ngôn ngữ châu Á, chỉ có 9,4 KB GZipped. Mô hình phát hiện ngôn ngữ của MediaPipe là 315KB.
- Ngay cả các mô hình tầm nhìn cũng có thể có kích thước hợp lý. Mô hình Handpose và tất cả tài nguyên liên quan có tổng dung lượng 13,4 MB. Mặc dù kích thước này lớn hơn nhiều so với hầu hết các gói giao diện người dùng rút gọn, nhưng nó tương đương với trang web trung bình, có kích thước 2,2 MB (2,6 MB trên máy tính).
- Các mô hình AI tạo sinh có thể vượt quá kích thước đề xuất cho tài nguyên trên web. DistilBERT được coi là một LLM rất nhỏ hoặc một mô hình NLP đơn giản (có nhiều ý kiến khác nhau) có kích thước 67 MB. Ngay cả các LLM nhỏ, chẳng hạn như Gemma 2B, cũng có thể đạt đến 1,3 GB. Kích thước này lớn hơn 100 lần kích thước trung bình của trang web.
Bạn có thể đánh giá kích thước tải xuống chính xác của các mô hình mà bạn dự định sử dụng bằng các công cụ dành cho nhà phát triển của trình duyệt.
Tối ưu hoá kích thước mô hình
- So sánh chất lượng mô hình và kích thước tải xuống. Mô hình nhỏ hơn có thể có đủ độ chính xác cho trường hợp sử dụng của bạn, trong khi lại nhỏ hơn nhiều. Có các kỹ thuật tinh chỉnh và rút gọn mô hình để giảm đáng kể kích thước của mô hình trong khi vẫn duy trì độ chính xác đầy đủ.
- Chọn mô hình chuyên biệt khi có thể. Các mô hình được điều chỉnh cho một nhiệm vụ cụ thể thường nhỏ hơn. Ví dụ: nếu bạn muốn thực hiện các tác vụ cụ thể như phân tích cảm xúc hoặc độc tính, hãy sử dụng các mô hình chuyên về các tác vụ này thay vì LLM chung.
Mặc dù tất cả các mô hình này đều thực hiện cùng một nhiệm vụ, với độ chính xác khác nhau, nhưng kích thước của các mô hình này lại rất khác nhau: từ 3MB đến 1,5GB.
Kiểm tra xem mô hình có thể chạy hay không
Không phải thiết bị nào cũng có thể chạy mô hình AI. Ngay cả những thiết bị có đủ thông số phần cứng cũng có thể gặp khó khăn nếu các quy trình tốn kém khác đang chạy hoặc được khởi động trong khi mô hình đang được sử dụng.
Cho đến khi có giải pháp, bạn có thể làm những việc sau:
- Kiểm tra xem có hỗ trợ WebGPU hay không. Một số thư viện AI phía máy khách, bao gồm cả Transformers.js phiên bản 3 và MediaPipe sử dụng WebGPU. Hiện tại, một số thư viện này không tự động chuyển sang Wasm nếu WebGPU không được hỗ trợ. Bạn có thể giảm thiểu vấn đề đó bằng cách bao gồm mã liên quan đến AI trong quy trình kiểm tra phát hiện tính năng WebGPU, nếu bạn biết rằng thư viện AI phía máy khách cần WebGPU.
- Loại trừ các thiết bị có công suất thấp. Sử dụng Navigator.hardwareConcurrency, Navigator.deviceMemory và Compute Amount API để ước tính áp lực và khả năng của thiết bị. Các API này không được hỗ trợ trong tất cả trình duyệt và được cố ý không rõ ràng để ngăn chặn việc tạo vân tay số, nhưng chúng vẫn có thể giúp loại trừ các thiết bị có vẻ không đủ điện.
Tín hiệu đã tải xuống kích thước lớn
Đối với các mô hình lớn, hãy cảnh báo người dùng trước khi tải xuống. Người dùng máy tính có nhiều khả năng chấp nhận tải xuống tệp có dung lượng lớn hơn người dùng thiết bị di động. Để phát hiện thiết bị di động, hãy sử dụng mobile từ API Gợi ý ứng dụng tác nhân người dùng (hoặc chuỗi Tác nhân người dùng nếu UA-CH không được hỗ trợ).
Giới hạn tải xuống các tệp có kích thước lớn
- Chỉ tải những nội dung cần thiết xuống. Đặc biệt, nếu mô hình có kích thước lớn, hãy chỉ tải mô hình xuống một lần khi bạn chắc chắn rằng các tính năng AI sẽ được sử dụng. Ví dụ: nếu bạn có tính năng AI đề xuất nhập trước, hãy chỉ tải xuống khi người dùng bắt đầu sử dụng các tính năng nhập.
- Lưu mô hình vào bộ nhớ đệm một cách rõ ràng trên thiết bị bằng cách sử dụng API bộ nhớ đệm để tránh tải mô hình xuống mỗi khi truy cập. Đừng chỉ dựa vào bộ nhớ đệm trình duyệt HTTP ngầm ẩn.
- Phân đoạn tệp tải mô hình xuống. fetch-in-chunks phân tách một tệp tải xuống lớn thành các phần nhỏ hơn.
Tải và chuẩn bị mô hình
Không chặn người dùng
Ưu tiên trải nghiệm người dùng mượt mà: cho phép các tính năng chính hoạt động ngay cả khi mô hình AI chưa được tải đầy đủ.
Cho biết tiến trình
Khi bạn tải mô hình xuống, hãy cho biết tiến trình đã hoàn tất và thời gian còn lại.
- Nếu thư viện AI phía máy khách xử lý việc tải mô hình xuống, hãy sử dụng trạng thái tiến trình tải xuống để hiển thị cho người dùng. Nếu tính năng này không hoạt động, hãy cân nhắc mở một vấn đề để yêu cầu cung cấp (hoặc đóng góp vấn đề đó!).
- Nếu xử lý việc tải mô hình xuống trong mã của riêng mình, bạn có thể tìm nạp mô hình theo từng phần bằng cách sử dụng thư viện, chẳng hạn như fetch-in-chunks và hiển thị tiến trình tải xuống cho người dùng.
- Để biết thêm lời khuyên, hãy tham khảo Các phương pháp hay nhất về chỉ báo tiến trình dạng ảnh động và Thiết kế cho thời gian chờ và gián đoạn lâu.
Xử lý các sự cố gián đoạn mạng một cách linh hoạt
Thời gian tải mô hình có thể khác nhau tuỳ thuộc vào kích thước của mô hình. Hãy cân nhắc cách xử lý tình trạng gián đoạn mạng nếu người dùng không có kết nối mạng. Khi có thể, hãy thông báo cho người dùng về việc mất kết nối và tiếp tục tải xuống khi kết nối được khôi phục.
Kết nối không ổn định là một lý do khác để tải xuống theo từng phần.
Giảm tải các tác vụ tốn kém cho một worker web
Các tác vụ tốn kém, chẳng hạn như các bước chuẩn bị mô hình sau khi tải xuống, có thể chặn luồng chính, gây ra trải nghiệm giật cho người dùng. Việc di chuyển các tác vụ này sang một trình chạy web sẽ hữu ích.
Tìm bản minh hoạ và cách triển khai đầy đủ dựa trên một trình chạy web:
Trong khi suy luận
Sau khi tải mô hình xuống và sẵn sàng, bạn có thể chạy quy trình suy luận. Quá trình suy luận có thể tốn kém về mặt tính toán.
Di chuyển quá trình suy luận sang một worker web
Nếu suy luận xảy ra thông qua WebGL, WebGPU hoặc WebNN, thì kết quả sẽ dựa vào GPU. Điều này có nghĩa là quá trình này diễn ra trong một quy trình riêng biệt không chặn giao diện người dùng.
Tuy nhiên, đối với các phương thức triển khai dựa trên CPU (chẳng hạn như Wasm, có thể là phương thức dự phòng cho WebGPU nếu WebGPU không được hỗ trợ), việc di chuyển suy luận sang trình chạy web sẽ giúp trang của bạn phản hồi nhanh, giống như trong quá trình chuẩn bị mô hình.
Việc triển khai có thể đơn giản hơn nếu tất cả mã liên quan đến AI (tìm nạp mô hình, chuẩn bị mô hình, suy luận) đều nằm ở cùng một nơi. Do đó, bạn có thể chọn một worker web, cho dù GPU có đang được sử dụng hay không.
Xử lý lỗi
Mặc dù bạn đã kiểm tra xem mô hình có nên chạy trên thiết bị hay không, nhưng sau này người dùng vẫn có thể bắt đầu một quy trình khác chiếm nhiều tài nguyên. Để giảm thiểu vấn đề này:
- Xử lý lỗi suy luận. Gói suy luận trong các khối
try/catchvà xử lý các lỗi thời gian chạy tương ứng. - Xử lý lỗi WebGPU, cả lỗi không mong muốn và GPUDevice.lost, xảy ra khi GPU thực sự được đặt lại do thiết bị gặp sự cố.
Cho biết trạng thái suy luận
Nếu quá trình suy luận mất nhiều thời gian hơn so với cảm giác ngay lập tức, hãy báo cho người dùng biết rằng mô hình đang suy nghĩ. Sử dụng ảnh động để giảm thời gian chờ và đảm bảo với người dùng rằng ứng dụng đang hoạt động như dự kiến.
Đưa ra suy luận có thể huỷ được
Cho phép người dùng nhanh chóng tinh chỉnh truy vấn của họ mà không làm hệ thống lãng phí tài nguyên tạo phản hồi mà người dùng sẽ không bao giờ nhìn thấy.