提升用戶端 AI 的效能和使用者體驗

Maud Nalpas
Maud Nalpas

雖然網站上的大部分 AI 功能都需要伺服器,但用戶端 AI 會直接在使用者的瀏覽器中執行。這項做法可帶來多項優點,例如低延遲、降低伺服器端成本、無需 API 金鑰、提升使用者隱私權,以及離線存取。您可以使用 JavaScript 程式庫 (例如 TensorFlow.jsTransformers.jsMediaPipe 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 倍以上。

您可以使用瀏覽器的開發人員工具,評估要使用的模型的確切下載大小。

在 Chrome 開發人員工具的「網路」面板中,MediaPipe 語言偵測模型的下載大小。操作示範。
在 Chrome 開發人員工具網路面板中,Gen AI 模型的下載大小:Gemma 2B (小型 LLM)、DistilBERT (小型 NLP/超小型 LLM)。

最佳化模型大小

  • 比較模型品質和下載大小。較小的模型可能會提供足夠的準確度,同時尺寸也較小,適合您的用途。微調和模型縮減技巧可大幅縮減模型大小,同時維持足夠的準確度。
  • 盡可能選擇專屬模型。專為特定工作設計的模型通常較小。舉例來說,如果您想執行特定工作 (例如情緒或惡意內容分析),請使用專門用於這些工作的模型,而非一般 LLM。
j0rd1smit 提供的以 AI 為基礎的客戶端轉錄示範模型選取器。

雖然這些模型執行相同工作,但準確度不盡相同,但大小通常都不同:從 3 MB 到 1.5 GB。

檢查模型是否可執行

並非所有裝置都能執行 AI 模型。即便裝置具備足夠的硬體規格,也還是可能遇到難題,例如正在執行其他昂貴的程序,或是在模型使用期間啟動時啟動。

在問題解決之前,您可以採取下列行動:

  • 檢查 WebGPU 支援情形。Transformer.js 3.0 和 MediaPipe 等多個用戶端 AI 程式庫都使用 WebGPU。目前,如果不支援 WebGPU,部分程式庫不會自動改用 Wasm。如果您知道用戶端 AI 程式庫需要 WebGPU,可以將 AI 相關程式碼納入 WebGPU 功能偵測檢查中,以減輕此問題。
  • 排除未受管理的裝置。使用 Navigator.hardwareConcurrencyNavigator.deviceMemoryCompute Pressure API 估算裝置功能與壓力。部分瀏覽器不支援這些 API,且刻意精確來防止數位指紋採集,但仍可協助排除絕大多數裝置。

訊號過大的下載內容

如果是大型模型,請在下載前警告使用者。與行動裝置使用者相比,桌機使用者更有可能接受大型下載作業。如要偵測行動裝置,請使用 User-Agent Client Hints API 中的 mobile (如果不支援 UA-CH,則使用 User-Agent 字串)。

限制大型下載作業

  • 只下載必要內容。尤其是模型很大時,請只在有合理把握會使用 AI 功能時下載模型。舉例來說,如果您有預測輸入建議 AI 功能,請只在使用者開始使用輸入功能時下載。
  • 使用 Cache API 在裝置上明確快取模型,避免在每次造訪時下載模型。請勿只依賴隱含的 HTTP 瀏覽器快取。
  • 分塊模型下載作業fetch-in-chunks會將大型下載作業分割為較小的區塊。

下載及準備模型

不要封鎖使用者

優先提供順暢的使用者體驗:即使 AI 模型尚未完全載入,也能讓主要功能運作。

確保使用者仍可發布內容。
即使用戶端 AI 功能尚未就緒,使用者仍可發布評論。@maudnals 的示範。

表示進度

下載模型時,請指出已完成的進度和剩餘時間。

  • 如果模型下載作業是由用戶端 AI 程式庫處理,請使用下載進度狀態向使用者顯示下載進度。如果無法使用這項功能,建議你提出問題 (或提供意見)。
  • 如果您在自己的程式碼中處理模型下載作業,可以使用程式庫 (例如 fetch-in-chunks) 以區塊方式擷取模型,並向使用者顯示下載進度。
模型下載進度顯示畫面。使用fetch-in-chunks 的自訂導入方式。示範@tomayac

妥善處理網路中斷問題

模型下載作業所需的時間長短會因模型大小而異。請思考如何在使用者離線時處理網路中斷的問題。盡可能通知使用者連線中斷,並在連線恢復後繼續下載。

不穩定連線是分塊下載的另一個原因。

將昂貴的工作卸載至網路工作站

耗用大量資源的工作 (例如下載後的模型準備步驟) 可能會阻斷主執行緒,導致使用者體驗不佳。將這些工作移至網路工作站有助於解決這個問題。

參考網頁工作站的示範和完整實作:

Chrome 開發人員工具中的效能追蹤記錄。
頂端:有網路工作站。底部:沒有網頁工作者。

推論期間

模型下載完畢並準備就緒後,您就可以執行推論了。推論的運算成本可能相當高。

將推論作業移至網路工作者

如果推論是透過 WebGL、WebGPU 或 WebNN 執行,就需要 GPU。這表示發生在不會封鎖 UI 的獨立程序中。

不過,對於以 CPU 為基礎的實作 (例如 Wasm,可做為 WebGPU 的備用方案,如果不支援 WebGPU),將推論作業移至網路工作站可讓網頁保持回應能力,就像在準備模型時一樣。

如果所有 AI 相關程式碼 (模型擷取、模型準備、推論) 都位於同一個位置,實作作業可能會更簡單。因此,無論您是否正在使用 GPU,都可以選擇網路工作站。

處理錯誤

即使已確認模型應在裝置上執行,使用者仍可能啟動其他程序,之後會大量耗用資源。為減輕影響程度:

  • 處理推論錯誤。在 try/catch 區塊中包函推論,並處理相應的執行階段錯誤。
  • 處理 WebGPU 錯誤,包括非預期GPUDevice.lost,這些錯誤會在裝置發生問題而導致 GPU 實際重設時發生。

指出推論狀態

如果推論時間比「即時」還要長,請向使用者傳達模型正在思考。使用動畫可讓使用者在等待期間放鬆心情,並確保應用程式正常運作。

推論期間的動畫範例。
@maudnals@argyleink 示範

使推論可取消

讓使用者即時修正查詢,不必讓系統浪費資源產生使用者永遠看不到的回應。