Tokopedia 如何運用機器學習技術改善賣家網頁應用程式，進而降低營運成本

Dendi Sunardi
Dendi Sunardi
X
Geoffrey Prasetyo
Geoffrey Prasetyo
LinkedIn
Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Thomas Steiner

Tokopedia 是印尼的科技公司， 是大型電子商務市場之一，代管超過 40 個數位產品 和 1,400 多萬名的註冊賣家。

Mitra Tokopedia 是 Tokopedia 業務的一部分 產業，是一種網頁應用程式，可協助小型商家 數位產品，例如抵免額和遊戲優待券、數據方案、電力 代幣、國家醫療照護帳單等網站是 超過 700 個城市的 Mitra Tokopedia 賣家的自有通路，因此至關重要 確保提供順暢的使用者體驗

新手上路程序的一個關鍵步驟，是這些賣家必須驗證 識別個人身分賣家必須上傳自己的身分證和自拍照 才能完成賣家驗證。這稱為 客戶身分驗證 (KYC) 程序。

在這個重要的客戶身分驗證程序中加入機器學習功能，也就是 因此 Mitra Tokopedia 的應用程式 驗證失敗次數降低了超過 20%。他們也開始運作 人工核准作業減少將近 70%，可省下約 70% 的成本

挑戰

大部分客戶身分驗證資料遭拒，每週建立數千張票券 以便進行手動驗證這不僅造成高用量 也導致賣家對使用者體驗造成負面影響， 驗證程序會延遲。遭到拒絕的主要原因在於 賣家未正確上傳含身分證件的自拍照。米特拉托科佩迪亞 積極採用新型網路功能，大規模解決這項問題。

解決方案

為瞭解決這個問題，Tokopedia 的團隊決定採用機器學習技術搭配 TensorFlow.js 開始，也就是使用者上傳圖片時他們 使用 MediaPipe 和 TensorFlow 臉部偵測程式庫 ，以便在賣方上傳編號時 資訊卡和自拍圖片。接著，模型的輸出內容會用於檢查 接受標準驗證成功後，資訊會傳送至 後端。如果驗證失敗，系統會向賣家提供錯誤訊息 以及可重試的選項混合型做法會由模型執行 根據手機的用戶端應用程式，在裝置端或伺服器端推論 規格。較低端的裝置會在伺服器上執行推論。

在客戶身分驗證程序的早期，使用機器學習模型達成以下目標：

  • 改善客戶身分驗證程序中的拒絕率。
  • 根據品質警告使用者圖片可能遭拒 模型評估的結果

為何選擇機器學習，而非其他解決方案？

機器學習可以自動執行原本耗時或耗時的重複性工作 也無法手動執行以 Tokopedia 為例，最佳化目前的非機器學習技術 無法產生顯著結果，而機器學習解決方案 大幅降低必須手動處理的營運團隊負載 並獲得數千個核准使用機器學習解決方案即可進行圖片檢查 例如改善使用者體驗，並提高作業效率 效率。進一步瞭解 ，判斷機器學習是否適合你的問題。

選擇模式的注意事項

以下是選擇機器學習模型時考量的因素。

費用

他們評估了使用該模型的整體成本。由於 TensorFlow.js 由 Google 妥善維護的開放原始碼套件，除了授權之外 維護成本還有一個額外考量是推論成本。演唱 因此，在用戶端執行推論時，能省下大筆費用 較昂貴的 GPU 會在伺服器端進行處理 而失效且無法使用

擴充性

他們考慮到模型和技術的擴充性，是否可以 能因應專案不斷發展而日益增加的資料與模型複雜度？會不會是 是否可搭配其他專案或用途？裝置端處理功能 因為模型可以託管於 CDN 並傳遞至用戶端 因此擴充性極佳

成效

他們考量到程式庫的大小 (以 KB 為單位) 和執行階段的延遲時間 上傳資料集之後，您可以運用 AutoML 自動完成部分資料準備工作Mitra Tokopedia 的使用者族群大多擁有中階到低階裝置 上網速度和連線能力等因此，它們在 「下載及執行階段」(也就是模型產生輸出內容的速度) ，滿足使用者特定需求及確保良好的使用者體驗。

其他注意事項

法規遵循：使用者必須確保所選程式庫符合 相關的資料保護和隱私權法規。

技能：他們評估了團隊的專業能力和技能。部分機器學習 架構和程式庫可能需要特定程式設計語言或專業知識 特定區域的資料考量這些因素後，他們充分瞭解 以便為機器學習專案選擇合適的模型

選擇的技術

TensorFlow.js 評估後仍符合他們的需求 這些因素使用 WebGL 後端，即可完全在裝置上執行 使用裝置的 GPU。在裝置端執行模型可加快意見回饋速度 則降低了伺服器延遲時間，並降低伺服器運算成本。已讀 ，在這篇文章中進一步瞭解裝置端機器學習 裝置端機器學習的優缺點。

「TensorFlow.js 是 Google 推出的開放原始碼機器學習程式庫，目標是 能夠在瀏覽器執行用戶端的 JavaScript 開發人員。原因是 具備全方位 WebGL、WebAssembly 和 WebGPU 的 Web AI 技術最為成熟的選項 後端運算子支援，可快速在瀏覽器中使用 效能。"—Adobe 如何使用 Web ML 搭配 TensorFlow.js 強化 Photoshop 網頁版

技術實作

Mitra Tokopedia 運用 MediaPipe 和 TensorFlow 臉部偵測程式庫 以及提供執行即時臉部偵測的模型的套件。 具體而言， MediaPipeFaceDetector-TFJS 這個程式庫所提供的 tfjs 執行階段， 這個解決方案。

開始實際操作前，請簡單回顧一下 MediaPipe 是什麼。 MediaPipe 可讓您建構及部署 適用於行動裝置 (Android、iOS)、網頁、電腦、邊緣裝置、裝置端機器學習解決方案 以及 IoT

另有 14 種不同的解決方案 。您可以使用 mediapipe 或 tfjs 執行階段。tfjs 執行階段是以 JavaScript 建構， 提供可由網路從外部下載的 JavaScript 套件 應用程式。這與建構的 mediapipe 執行階段不同 C++ 並編譯為 WebAssembly 模組。主要差異在於效能 可進行偵錯和應用程式套件。JavaScript 套件可與傳統版 例如 webpack相較之下，Wasm 模組則較大型 二進位資源 (這不受載入時間依附元件來緩解) 需要不同的 Wasm 偵錯工作流程：不過 但執行速度較快，因此能滿足技術和效能需求

MediaPipe 和 TensorFlow 模型如何在不同執行階段中運作的圖表 (以 FaceDetection 做為範例)。
關於 MediaPipe 和 TensorFlow 模型在不同執行階段中運作方式的一般插圖，以 FaceDetection 為例

回到 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'。 如本文開頭所述，賣家必須將自己的 使用身分證件完成賣家身分並搭配自拍照 驗證。 接著，模型的輸出結果會用於檢查收錄標準，也就是 能夠符合前述六個關鍵點 身分證和自拍圖片。

驗證成功後，相關的賣家資訊會傳送至 後端。如果驗證失敗，賣方會收到失敗訊息， 即可重試。系統不會將任何資訊傳送至後端。

Mitra KYC 頁面、TensorFlow.js 模型和伺服器之間互動的圖表。
Mitra KYC 網頁、TensorFlow.js 模型和伺服器如何互動

低階裝置的效能注意事項

這個套件的大小只有 24.8 KB (壓縮和 gzip)，不含 可能會大幅影響下載時間但對於極低階裝置 執行階段處理作業相當耗時新增了用於檢查其他邏輯的邏輯 將兩個圖像傳遞至機器學習錶面之前，裝置 RAM 和 CPU 偵測模型

如果裝置的 RAM 超過 4 GB，表示網路連線大於 4G 且 CPU 擁有超過 6 個核心，圖片就會傳遞至裝置端模型 用於臉孔驗證如果未符合這些條件，則裝置端 就會略過模型，並直接將圖片傳送至伺服器進行驗證 為這些舊型裝置提供支援和時俱進 隨著硬體持續 持續進化。

影響

由於機器學習整合的緣故，Tokopedia 成功地幫助公司解決極高的難題 拒絕率並看到以下結果：

  • 拒絕率降低超過 20%。
  • 手動核准數量減少將近 70%。

這麼做不僅能讓銷售人員享有更流暢的使用者體驗，同時也降低了 Tokopedia 團隊的營運成本。

結論

整體而言，這項個案研究的結果證明，我們的解決方案 可以善用網路裝置端機器學習解決方案，提升使用者參與度 功能使用體驗和效益，並節省成本和 進而讓我能享有其他業務優勢

自行嘗試使用 MediaPipe 臉部偵測功能 MediaPipe Studio 程式碼範例 MediaPipe Face Detector 網頁版。

如想將自己網頁應用程式的功能 裝置端機器學習，請參閱下列資源：