Tokopedia 是印尼的科技公司，擁有規模最大的電子商務市集，在自家平台上託管超過 40 項數位產品和超過 1, 400 萬名已註冊的賣家。
Mitra Tokopedia 是 Tokopedia 業務產業的一部分，可協助小型業主銷售數位產品，例如抵免額和遊戲優待券、資料套件、電力憑證、全國醫療照護帳單等。在超過 700 個城市，Mitra Tokopedia 賣方的主要管道之一就是這個網站，因此確保提供流暢的使用者體驗至關重要。
新手上路流程中的一個關鍵步驟會要求這些銷售人員驗證其身分。賣方必須上傳身分證和包含身分證件的自拍照，才能完成賣家驗證。這就是所謂的客戶身分驗證 (KYC) 程序。
Mitra Tokopedia 在網頁應用程式的這項重要 KYC 程序中加入機器學習技術後，成功改善使用者體驗，驗證失敗次數的減少幅度超過 20%。此外，他們也減少了近 70% 的手動核准，也節省了營運成本
挑戰
大部分的客戶身分驗證資料都遭到拒絕，每週產生數千張票證給營運團隊進行手動驗證。這不僅會造成營運成本高，還會對驗證程序延遲的賣家造成不良使用者體驗。遭拒的最大原因是賣家未正確上傳包含身分證件的自拍照。Mitra Tokopedia 希望運用新型網路功能，大規模地解決這個問題。
解決方法
Tokopedia 的團隊決定在 KYC 程序的第一步 (使用者上傳圖片時) 使用機器學習技術來解決這個問題。並在賣家上傳身分證件和自拍圖片時，運用 MediaPipe 和 TensorFlow 的臉部偵測程式庫偵測賣家的臉部六個關鍵點。然後，會使用模型的輸出檢查其接受標準。驗證成功後，資訊會傳送至後端。如果驗證失敗，系統會向賣方顯示錯誤訊息和重試的選項。模型採用混合方法，讓模型根據手機規格在裝置端或伺服器端執行推論。低端的裝置會在伺服器執行推論。
及早在客戶身分驗證程序中使用機器學習模型，即可達成以下目標：
- 改善客戶身分驗證程序中的拒絕率。
- 根據模型評估的品質，警告使用者可能拒絕圖片。
為何選擇機器學習而非其他解決方案？
機器學習可自動執行重複性工作，因為這些工作非常耗時或難以手動執行。在 Tokopedia 的案例中，最佳化目前的非機器學習解決方案無法產生顯著結果，而機器學習解決方案可大幅降低營運團隊必須每週手動處理數千項核准文件的負載。使用機器學習解決方案時，圖片檢查可以立即完成，進而提供更優質的使用者體驗，並改善作業效率。進一步瞭解問題框架，判斷機器學習是否適合您解決問題。
選擇模型的注意事項
選擇機器學習模型時，系統會將下列因素納入考量。
費用
他們評估了使用模型的整體費用。由於 TensorFlow.js 是由 Google 妥善維護的開放原始碼套件，因此我們可以節省授權與維護費用。另一項考量因素是推論成本。相較於在使用昂貴 GPU 的伺服器端處理資料，在用戶端執行推論可節省大量費用，特別是當資料變得無效且無法使用時。
擴充性
他們認為模型和技術的擴充性。是否能隨著專案不斷演進而增加資料和模型複雜度？是否可根據其他專案或用途加以擴充？裝置端處理很有幫助，因為模型可託管於 CDN 並傳送到用戶端，而用戶端又擴充性極高。
效能
而考量到程式庫的大小 (以 KB 為單位) 和執行階段程序的延遲時間。Mitra Tokopedia 的使用者族群中，大多都有中低階裝置，且都擁有中等的網際網路速度和連線能力。因此，以下載和執行階段的效能 (即模型產生輸出的速度) 來說，效能是優先考量，能滿足其特定需求，並確保良好的使用者體驗。
其他考量
法規遵循：必須確保所選程式庫符合相關的資料保護和隱私權法規。
Skillset：他們評估所屬團隊的專業知識和技能。部分機器學習架構和程式庫可能需要特定領域的特定程式設計語言或專業知識。經過考量的因素後，他們便做出明智的決定 以便為機器學習專案選擇合適的模型
選用技術
TensorFlow.js 符合他們的需求。只要使用 WebGL 後端，就能使用裝置 GPU 完全在裝置上執行。在裝置端執行模型可縮短伺服器延遲時間，並降低伺服器運算成本，因此可更快向使用者提供回饋。如要進一步瞭解裝置端機器學習，請參閱「裝置端機器學習的優點和限制」一文。
「TensorFlow.js 是 Google 推出的開放原始碼機器學習程式庫，旨在協助 JavaScript 開發人員在瀏覽器中執行用戶端。這是 Web AI 最成熟的選擇，具備全方位的 WebGL、WebAssembly 和 WebGPU 後端運算子支援，可在瀏覽器中使用，且具備快速的效能。」—Adobe 如何運用 Web ML 搭配 TensorFlow.js 改善 Photoshop 網頁版
技術實作
Mitra Tokopedia 使用 MediaPipe 和 TensorFlow 的臉部偵測程式庫，提供用於執行即時臉部偵測模型的套件。具體來說，這個程式庫提供的 MediaPipeFaceDetector-TFJS 模型會實作 tfjs 執行階段，用於本解決方案。
在深入說明實作前，請先回顧 MediaPipe 的簡介。MediaPipe 可讓您在行動裝置 (Android、iOS)、網頁、電腦、邊緣裝置和 IoT 上建構及部署裝置端機器學習解決方案。
撰寫本文時，MediaPipe 提供 14 種不同的解決方案。您可以使用 mediapipe 或 tfjs 執行階段。tfjs 執行階段是以 JavaScript 建構而成，也提供 JavaScript 套件，可供網頁應用程式外部下載。這與使用 C++ 建構及編譯為 WebAssembly 模組的 mediapipe 執行階段不同。主要差異在於效能、偵錯能力和套裝組合。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 (壓縮後且使用 gzip)，對下載時間沒有重大影響。不過，如果是非常低的裝置，執行階段處理作業需要的時間很長。已新增額外的邏輯，用於檢查裝置 RAM 和 CPU，然後再將兩個圖片傳遞至機器學習臉部偵測模型。
如果裝置有超過 4 GB 的 RAM、大於 4G 的網路連線，和超過 6 核心的 CPU，系統會將圖片傳送給裝置端模型進行臉孔驗證。如未符合這些需求，系統會略過裝置型號，並將圖片直接傳送至伺服器進行驗證，並採用混合方式為舊型裝置提供支援。隨著硬體持續發展，更多裝置將能夠從伺服器卸載運算。
影響
由於機器學習整合的關係，Tokopedia 能夠成功解決高拒絕率問題，並看到下列結果：
- 拒絕率降低超過 20%。
- 人工核准次數減少將近 70%。
這不僅為賣家帶來更流暢的使用者體驗，也降低 Tokopedia 團隊的營運成本。
結論
整體而言，本個案研究的結果顯示，在適當的用途中，網路上的機器學習解決方案對於改善功能的使用體驗、有效性、可以節省成本及其他商業優勢具有價值。
透過 MediaPipe Studio 和 MediaPipe Face Detector for web 自行試用 MediaPipe 臉部偵測功能。
如果您想透過裝置端機器學習擴充您自己的網頁應用程式功能，請參閱下列資源：