Tokopedia 是印尼科技公司，也是其中一個最大的電子商務市集，平台上有超過 40 項數位產品，以及超過 1, 400 萬名註冊賣家。
Mitra Tokopedia 是 Tokopedia 的垂直業務之一，是一款網頁應用程式，可協助小型商家銷售數位產品，例如信用卡和遊戲優待券、資料包、電費代碼、國家醫療帳單等。網站是 700 多個城市 Mitra Tokopedia 賣家的主要管道之一，因此確保順暢的使用者體驗至關重要。
新手上路流程中的一個重要步驟，是要求這些賣家驗證身分。賣家必須上傳身分證件，以及與身分證件合拍的自拍照，才能完成賣家驗證。這就是所謂的「客戶身分驗證 (KYC)」程序。
在網頁應用程式中為這項重要的客戶盡職調查程序加入機器學習功能後，Mitra Tokopedia 不僅能提供更優質的使用者體驗，驗證失敗的情況也減少了 20% 以上。他們也減少了近 70% 的手動核准作業，進而節省營運成本。
挑戰
大部分的客戶身分驗證資料都遭到拒絕，因此每週都會產生數千個需要由營運團隊手動驗證的支援單。這不僅會造成高額的營運成本，也會導致賣家驗證程序延遲，進而導致使用者體驗不佳。遭拒的主要原因是賣家未正確上傳身分證件自拍照。Mitra Tokopedia 希望能運用現代化的網路功能，以可擴充的方式解決這個問題。
解決方案
Tokopedia 團隊決定使用 TensorFlow.js 搭配機器學習，在身分驗證程序的第一個步驟 (使用者上傳圖片時) 解決這個問題。他們使用 MediaPipe 和 TensorFlow 的臉部偵測程式庫，在賣家上傳身分證件和自拍照時，以六個關鍵點偵測賣家的臉部。接著，系統會使用模型的輸出內容，檢查是否符合接受標準。驗證成功後，系統會將資訊傳送至後端。如果驗證失敗，系統會向賣家顯示錯誤訊息，並提供重試選項。我們採用混合做法，讓模型根據手機規格在裝置端或伺服器端執行推論。低階裝置會在伺服器上執行推論。
在客戶盡職調查程序初期使用機器學習模型，可協助他們：
- 改善身分驗證流程中的拒絕率。
- 根據模型評估的品質，警告使用者圖片可能遭到拒絕。
為什麼選擇機器學習，而非其他解決方案？
ML 可自動處理重複性工作，這些工作耗時且不便手動執行。以 Tokopedia 為例，如果要改善目前的非機器學習解決方案，就無法獲得顯著成效，但如果採用機器學習解決方案，就能大幅減輕營運團隊的負擔，因為他們必須每週手動處理數千筆核准作業。有了機器學習解決方案，您幾乎可以立即完成圖片檢查，進而提供更優質的使用者體驗，並提升作業效率。進一步瞭解問題設定，判斷 ML 是否適合解決您的問題。
選擇模型時的考量
選擇機器學習模型時，我們考量了下列因素。
費用
他們評估了使用模型的整體成本。由於 TensorFlow.js 是 Google 妥善維護的開放原始碼套件，因此我們可以節省授權和維護費用。另外，您還應考量推論的成本。與在伺服器端使用昂貴的 GPU 進行推論相比，在用戶端執行推論可節省大量成本，尤其是當資料無效且無法使用時。
擴充性
他們考量了模型和技術的可擴充性。隨著專案進展，它是否能處理資料和模型複雜度的增加？是否可以擴充以滿足其他專案或用途的需求？裝置端處理技術可提供協助，因為模型可在 CDN 上代管，並傳送至用戶端，這項做法具有極高的可擴充性。
成效
他們考量了程式庫的大小 (以 KB 為單位) 和執行階段程序的延遲時間。大多數 Mitra Tokopedia 使用者使用中低階裝置，網際網路速度和連線品質適中。因此，為了滿足使用者的特定需求並確保優異的使用者體驗，下載和執行階段的效能 (也就是模型產生輸出的速度) 是首要考量。
其他注意事項
法規遵循：他們必須確保所選的程式庫符合相關資料保護和隱私權法規。
技能：他們評估了團隊的專業知識和技能。部分 ML 架構和程式庫可能需要特定程式設計語言或特定領域的專業知識。考量這些因素後，他們就能根據自身機器學習專案的需要，選擇合適的模型。
所選技術
在考量這些因素後，他們認為 TensorFlow.js 符合需求。它可以使用 WebGL 後端，在裝置上完全執行，以便使用裝置的 GPU。在裝置上執行模型可縮短伺服器延遲時間，並降低伺服器運算成本，進而加快向使用者提供意見回饋。如要進一步瞭解裝置端機器學習，請參閱「裝置端機器學習的優點和限制」一文。
TensorFlow.js 是 Google 推出的開放原始碼機器學習程式庫，專為 JavaScript 開發人員設計，可在瀏覽器中執行用戶端程式。這是最成熟的網路 AI 選項，提供全面的 WebGL、WebAssembly 和 WebGPU 後端運算子支援，可在瀏覽器中以快速效能使用。」—Adobe 如何使用網路機器學習和 TensorFlow.js 提升 Photoshop for web 的效能
技術導入
Mitra Tokopedia 使用了 MediaPipe 和 TensorFlow 的臉部偵測程式庫，這是提供臉部偵測即時執行模型的套件。具體來說，這個程式庫提供的 MediaPipeFaceDetector-TFJS 模型實作了 tfjs 執行階段，而這項解決方案就是使用這個執行階段。
在深入探討實作方式之前，讓我們先簡單回顧一下 MediaPipe 的功能。MediaPipe 可讓您在行動裝置 (Android、iOS)、網頁、電腦、邊緣裝置和物聯網上建構及部署裝置端 ML 解決方案。
在撰寫本文時，MediaPipe 提供 14 種不同的解決方案。您可以使用 mediapipe 或 tfjs 執行階段。tfjs 執行階段是使用 JavaScript 建構，並提供 JavaScript 套件，可由網頁應用程式從外部下載。這與 mediapipe 執行階段不同，後者是使用 C++ 建構並編譯為 WebAssembly 模組。主要差異在於效能、可偵錯性和捆綁。JavaScript 套件可與 webpack 等傳統套件捆綁器捆綁。相較之下，Wasm 模組是較大且獨立的二進位資源 (由於不是載入時間依附元件，因此可減輕負擔)，且需要不同的 Wasm 偵錯工作流程。不過，這項功能的執行速度確實較快，有助於滿足技術和效能要求。
回到 Tokopedia 的實作方式，第一步是按照下列方式初始化模型。使用者上傳相片時，系統會將 HTMLImageElement 傳遞為偵測器的輸入內容。
// Create the detector.
const model = faceDetection.SupportedModels.MediaPipeFaceDetector;
const detectorConfig = {
runtime: 'tfjs'
};
const detector = await faceDetection.createDetector(model, detectorConfig);
// Run inference to start detecting faces.
const estimationConfig = {flipHorizontal: false};
const faces = await detector.estimateFaces(image, estimationConfig);
臉孔清單的結果包含圖片中每個臉孔的偵測結果。如果模型無法偵測任何臉孔，清單就會是空白。每個臉部都包含偵測到的臉部定界框，以及偵測到的臉部六個關鍵點陣列。包括眼睛、鼻子和嘴巴等特徵。每個關鍵點都包含 x 和 y 以及名稱。
[
{
box: {
xMin: 304.6476503248806,
xMax: 502.5079975897382,
yMin: 102.16298762367356,
yMax: 349.035215984403,
width: 197.86034726485758,
height: 246.87222836072945
},
keypoints: [
{x: 446.544237446397, y: 256.8054528661723, name: "rightEye"},
{x: 406.53152857172876, y: 255.8, "leftEye },
...
],
}
]
box 代表圖像像素空間中臉部的定界框，其中 xMin、xMax 代表 x 邊界，yMin、yMax 代表 y 邊界，width、height 則是定界框的尺寸。對於 keypoints，x 和 y 代表圖片像素空間中的實際關鍵點位置。name 會為關鍵點提供標籤，分別為 'rightEye'、'leftEye'、'noseTip'、'mouthCenter'、'rightEarTragion' 和 'leftEarTragion'。如同本文開頭所述，賣方必須上傳身分證件和自拍照，才能完成賣方驗證程序。接著，我們會使用模型的輸出內容，根據先前提到的六個要點進行比對，以判斷是否為有效的身分證件和自拍照。
驗證成功後，系統會將相關賣家資訊傳送至後端。如果驗證失敗，系統會向賣家顯示失敗訊息，並提供重試選項。系統不會將任何資訊傳送至後端。
低階裝置的效能考量
這個套件只有 24.8 KB (經過精簡及壓縮)，對下載時間的影響不大。不過，對於低階裝置，執行階段處理作業會耗費很長的時間。我們新增了額外的邏輯，在將兩張圖片傳遞至機器學習臉部偵測模型前，先檢查裝置的 RAM 和 CPU。
如果裝置的 RAM 超過 4 GB、網路連線速度超過 4G，以及 CPU 有超過 6 個核心，系統就會將圖片傳送至裝置端模型進行臉部驗證。如果不符合這些要求，系統會略過裝置端模型，並使用混合方法將圖片直接傳送至伺服器進行驗證，以便支援這些舊裝置。隨著硬體持續演進，日後會有更多裝置能夠從伺服器卸載運算作業。
影響
由於整合了機器學習，Tokopedia 成功解決高拒絕率問題，並獲得以下成果：
- 拒絕率下降幅度超過 20%。
- 手動核准次數減少了將近 70%。
這不僅為賣家帶來更順暢的使用體驗，也降低了 Tokopedia 團隊的營運成本。
結論
總體而言，本案例研究的結果顯示，在適當的用途下，網頁上的裝置端機器學習解決方案可提升使用者體驗和功能成效，並帶來節省成本和其他業務效益。
使用 MediaPipe Studio 和 MediaPipe 網頁版臉部偵測器程式碼範例，親自試用 MediaPipe 臉部偵測功能。
如果您想透過裝置端 ML 擴充自有網頁應用程式的功能，請參閱下列資源：