雖然網站上的大部分 AI 功能都需要伺服器，但用戶端 AI 會直接在使用者的瀏覽器中執行。這項做法可帶來多項優點，例如低延遲、降低伺服器端成本、無需 API 金鑰、提升使用者隱私權，以及離線存取。您可以使用 JavaScript 程式庫 (例如 TensorFlow.js、Transformers.js 和 MediaPipe GenAI) 實作跨瀏覽器運作的用戶端 AI。
用戶端 AI 也會帶來效能問題：使用者必須下載更多檔案，瀏覽器也必須更努力運作。如要讓這項功能順利運作，請考慮：
- 用途。用戶端 AI 是否適合您的功能？您的功能是否處於關鍵的使用者歷程？如果是，是否有備用選項？
- 下載及使用模型的建議做法。請參閱下文的說明。
模型下載前
心智庫和模型大小
如要實作用戶端 AI，您需要模型和通常的程式庫。選擇程式庫時，請像評估其他工具一樣評估程式庫大小。
模型大小也很重要。什麼樣的 AI 模型才算大，取決於情況。5 MB 可做為實用經驗法則：這也是網頁大小中位數的 75 百分位。較寬鬆的數字則是 10 MB。
以下是模型大小的幾項重要考量：
- 許多專門用於特定任務的 AI 模型都非常小。BudouX 之類的模型對於亞洲語言的準確字元而言只有 9.4 KB GZipped。MediaPipe 的語言偵測模型大小為 315 KB。
- 即使是視覺模型也能彈性設定大小。手勢姿勢模型和所有相關資源的總大小為 13.4 MB。雖然這個大小遠大於大多數精簡的前端套件，但與中位網頁大小相近，後者為 2.2MB (電腦版為 2.6MB)。
- 生成式 AI 模型可超過網站資源的建議大小。DistilBERT 被視為非常小的 LLM 或簡單的 NLP 模型 (意見不一)，大小為 67 MB。即使是小型 LLM (例如 Gemma 2B)，也可以達到 1.3 GB。也就是網頁大小的 100 倍以上。
您可以使用瀏覽器的開發人員工具，評估要使用的模型的確切下載大小。
最佳化模型大小
- 比較模型品質和下載大小。較小的模型可能會提供足夠的準確度，同時尺寸也較小，適合您的用途。微調和模型縮減技巧可大幅縮減模型大小，同時維持足夠的準確度。
- 盡可能選擇專屬模型。專為特定工作設計的模型通常較小。舉例來說，如果您想執行特定工作 (例如情緒或惡意內容分析)，請使用專門用於這些工作的模型，而非一般 LLM。
雖然這些模型執行相同工作，但準確度不盡相同，但大小通常都不同：從 3 MB 到 1.5 GB。
檢查模型是否可執行
並非所有裝置都能執行 AI 模型。即便裝置具備足夠的硬體規格，也還是可能遇到難題，例如正在執行其他昂貴的程序，或是在模型使用期間啟動時啟動。
在問題解決之前，您可以採取下列行動：
- 檢查 WebGPU 支援情形。Transformer.js 3.0 和 MediaPipe 等多個用戶端 AI 程式庫都使用 WebGPU。目前，如果不支援 WebGPU，部分程式庫不會自動改用 Wasm。如果您知道用戶端 AI 程式庫需要 WebGPU，可以將 AI 相關程式碼納入 WebGPU 功能偵測檢查中，以減輕此問題。
- 排除未受管理的裝置。使用 Navigator.hardwareConcurrency、Navigator.deviceMemory 和 Compute Pressure API 估算裝置功能與壓力。部分瀏覽器不支援這些 API，且刻意精確來防止數位指紋採集，但仍可協助排除絕大多數裝置。
訊號過大的下載內容
如果是大型模型，請在下載前警告使用者。與行動裝置使用者相比，桌機使用者更有可能接受大型下載作業。如要偵測行動裝置，請使用 User-Agent Client Hints API 中的 mobile (如果不支援 UA-CH，則使用 User-Agent 字串)。
限制大型下載作業
- 只下載必要內容。尤其是模型很大時，請只在有合理把握會使用 AI 功能時下載模型。舉例來說，如果您有預測輸入建議 AI 功能，請只在使用者開始使用輸入功能時下載。
- 使用 Cache API 在裝置上明確快取模型，避免在每次造訪時下載模型。請勿只依賴隱含的 HTTP 瀏覽器快取。
- 分塊模型下載作業。fetch-in-chunks會將大型下載作業分割為較小的區塊。
下載及準備模型
不要封鎖使用者
優先提供順暢的使用者體驗：即使 AI 模型尚未完全載入，也能讓主要功能運作。
表示進度
下載模型時，請指出已完成的進度和剩餘時間。
- 如果模型下載作業是由用戶端 AI 程式庫處理，請使用下載進度狀態向使用者顯示下載進度。如果無法使用這項功能，建議你提出問題 (或提供意見)。
- 如果您在自己的程式碼中處理模型下載作業，可以使用程式庫 (例如 fetch-in-chunks) 以區塊方式擷取模型，並向使用者顯示下載進度。
- 如需更多建議，請參閱「動畫進度指標的最佳做法」和「針對長時間等待和中斷情形進行設計」。
妥善處理網路中斷問題
模型下載作業所需的時間長短會因模型大小而異。請思考如何在使用者離線時處理網路中斷的問題。盡可能通知使用者連線中斷，並在連線恢復後繼續下載。
不穩定連線是分塊下載的另一個原因。
將昂貴的工作卸載至網路工作站
耗用大量資源的工作 (例如下載後的模型準備步驟) 可能會阻斷主執行緒，導致使用者體驗不佳。將這些工作移至網路工作站有助於解決這個問題。
參考網頁工作站的示範和完整實作：
推論期間
模型下載完畢並準備就緒後，您就可以執行推論了。推論的運算成本可能相當高。
將推論作業移至網路工作者
如果推論是透過 WebGL、WebGPU 或 WebNN 執行，就需要 GPU。這表示發生在不會封鎖 UI 的獨立程序中。
不過，對於以 CPU 為基礎的實作 (例如 Wasm，可做為 WebGPU 的備用方案，如果不支援 WebGPU)，將推論作業移至網路工作站可讓網頁保持回應能力，就像在準備模型時一樣。
如果所有 AI 相關程式碼 (模型擷取、模型準備、推論) 都位於同一個位置，實作作業可能會更簡單。因此，無論您是否正在使用 GPU，都可以選擇網路工作站。
處理錯誤
即使已確認模型應在裝置上執行，使用者仍可能啟動其他程序，之後會大量耗用資源。為減輕影響程度：
- 處理推論錯誤。在
try/catch區塊中包函推論，並處理相應的執行階段錯誤。 - 處理 WebGPU 錯誤，包括非預期和 GPUDevice.lost，這些錯誤會在裝置發生問題而導致 GPU 實際重設時發生。
指出推論狀態
如果推論時間比「即時」還要長，請向使用者傳達模型正在思考。使用動畫可讓使用者在等待期間放鬆心情，並確保應用程式正常運作。
使推論可取消
讓使用者即時修正查詢，不必讓系統浪費資源產生使用者永遠看不到的回應。