Tokopedia は、インドネシアのテクノロジー企業で 40 以上のデジタル商品をホストし 1,400 万人以上の販売者が登録しています。
Mitra Tokopedia（Tokopedia のビジネスの一部） 小規模ビジネス向けのウェブ アプリケーションです。 クレジットやゲームのクーポン、データ パッケージ、電気などのデジタル商品 請求書などがあります。ウェブサイトは 700 以上の都市で Mitra Tokopedia の販売者のチャネルを開拓できるため、 スムーズなユーザーエクスペリエンスを実現します
オンボーディング プロセスの重要なステップで、販売者は できます。販売者は身分証明書をアップロードし、身分証明書を 販売者の確認を完了する必要があります。これは 顧客理解（KYC）プロセス
この重要な KYC プロセスに機械学習機能を追加することで、 Mitra Tokopedia は自社のウェブアプリで、 検証失敗が 20% 以上減少しました。また、 人手による承認を約 70% 削減することで、コストを削減しました。
課題
KYC データのほとんどが拒否され、1 週間あたり数千件のチケットが作成されていた 手動でのオーナー確認をオペレーション チームに依頼する。その結果 ユーザーエクスペリエンスの低下にもつながりました 確認プロセスが遅れる可能性があります。不承認の最大の理由は ID カードを使用した自撮り写真が正しくアップロードされていなかった。Mitra Tokopedia の以前の 最新のウェブ機能を使用して、この問題をスケーラブルに解決したいと考えています。
解決策
Tokopedia のチームは、この問題を解決するために TensorFlow.js で ML を使用することを決定しました 。。 MediaPipe と TensorFlow の 顔検出ライブラリ 販売者が ID をアップロードする際に 6 つの重要なポイントで販売者の顔を検出 カード、自撮り写真の画像などです。モデルの出力を使用して 承認基準を確認します確認が成功すると、その情報が 使用されます。確認が失敗した場合は、販売者にエラー メッセージが表示されます。 再試行のオプションがあります。ハイブリッド アプローチでは、モデルはトレーニング 推論は、スマートフォンのデバイスに応じて、オンデバイスまたはサーバー側のいずれかに行われます。 仕様。ローエンド デバイスはサーバー上で推論を実行します。
KYC プロセスの早い段階で ML モデルを使用することで、次のことが可能になります。
- KYC プロセスの不承認率を改善します。
- 画像の品質に基づいて不承認となる可能性についてユーザーに警告する モデルによって評価されます
他のソリューションではなく ML を選ぶ理由
ML を使用すると、他の方法では時間がかかり、 手動で行うのは実用的ではありません。Tokopedia の場合は、現在の非 ML モデルと 目立った結果が得られなかったのに対し ML ソリューションでは 手動で処理しなければならなかった運用チームの負荷を大幅に軽減 毎週数千件の承認を行っています。ML ソリューションを使用すると、画像のチェックを ほぼ瞬時に、ユーザー エクスペリエンスを向上させ、 向上します詳細を見る: 問題のフレーミング ML が問題に適したソリューションかどうかを判断します。
モデルを選択する際の考慮事項
ML モデルを選択する際には、次の要素が考慮されました。
費用
モデルを使用する全体的な費用を評価しました。TensorFlow.js は オープンソース パッケージであるため、ライセンス費用を節約でき、 維持費も削減できますその他の考慮事項は推論の費用です。参加中 クライアントサイドで推論を実行できるため サーバー側で高価な GPU を使用して処理しています。 無効で使用できないことがわかります。
スケーラビリティ
その際、モデルとテクノロジーのスケーラビリティを考慮しました。できるのか プロジェクトが進化するにつれて、データとモデルの複雑さの増大にどう対処するか。できる？ 他のプロジェクトやユースケースに対応するために拡張されたものですか？オンデバイスの処理は、 モデルを CDN でホストして クライアントサイドに配信できるため スケーラビリティに優れています
パフォーマンス
ライブラリのサイズ（KB 単位）とランタイムのレイテンシを考慮しました。 プロセスですMitra Tokopedia のユーザーベースの大部分は、ミドル～ローエンドのデバイスを使用しています 中程度のインターネット速度と接続性が必要です。したがって ダウンロードと実行時間（モデルが出力を生成する速度）が 顧客固有のニーズを満たし 優れたユーザー体験を提供することを 最優先しています
その他の考慮事項
規制遵守: 選択した図書館が、 関連するデータ保護およびプライバシーに関する規則に 準拠する必要があります
スキルセット: チームの専門知識とスキルセットを評価しました。ある程度の ML フレームワークやライブラリでは、特定のプログラミング言語や専門知識が必要になる場合があります。 確認できます。これらの要素を考慮することで、 ML プロジェクトに適したモデルを選択する際の 意思決定の助けになります
選択したテクノロジー
TensorFlow.js が、 判断できますWebGL バックエンドを使用してデバイス上で完全に動作し、 デバイスの GPU を使用します。デバイス上でモデルを実行することでフィードバックを高速化 サーバーのレイテンシが短縮され、サーバーのコンピューティング コストが削減されます。読む 記事のオンデバイス ML の詳細 オンデバイス ML のメリットと制限事項。
「TensorFlow.js は Google のオープンソース ML ライブラリで、 ブラウザでクライアント側を実行できる JavaScript デベロッパー。こちらの 包括的な WebGL、WebAssembly、WebGPU を備えた、ウェブ AI 向けの最も成熟したオプション ブラウザ内で高速かつ使用可能なバックエンド オペレーター サポートを -Adobe が TensorFlow.js で Web ML を使用して Photoshop for web を強化した方法
技術的な実装
Mitra Tokopedia は MediaPipe と TensorFlow の
顔検出ライブラリ
リアルタイムの顔検出を実行するためのモデルを提供するパッケージです。
具体的には
MediaPipeFaceDetector-TFJS
このライブラリで提供されるモデル（tfjs ランタイムを実装する）が、
説明します。
実装に入る前に、MediaPipe について簡単に復習しましょう。 MediaPipe を使用すると、ビルドとデプロイを行うことができます モバイル（Android、iOS）、ウェブ、デスクトップ、エッジデバイス、 説明します。
他にも
14 種類のソリューション
MediaPipe が提供します次のいずれかの方法を使用できます。
mediapipe または tfjs ランタイム。tfjs ランタイムは、JavaScript と
ウェブ アプリケーションを介して外部からダウンロードできる JavaScript パッケージを提供します。
説明します。これは、mediapipe ランタイムとは異なります。これは、
C++ で記述され、WebAssembly モジュールにコンパイルされます。主な違いはパフォーマンス
デバッグ性、バンドルの 3 つですJavaScript パッケージは、従来のバージョンとバンドルできます。
バンドラ（webpack など）です。対照的に、Wasm モジュールは大規模で独立した
バイナリ リソース（読み込み時の依存関係でないことによる軽減）
別の Pod に
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);
顔リストの結果には、画像内の顔ごとに検出された顔が含まれます。 モデルが顔を検出できない場合、リストは空になります。 顔ごとに、検出された顔の境界ボックスと、 検出された顔の 6 つのキーポイントの配列。これには次のような機能が含まれます。 目、鼻、口から。各キーポイントには 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、X 境界を示す xMax、yMin、Y 境界を示す yMax
width、height は、境界ボックスのディメンションです。
keypoints の場合、x と y は画像内の実際のキーポイントの位置を表します。
基づいています。
name は、キーポイントのラベル（'rightEye'、'leftEye'、
それぞれ 'noseTip'、'mouthCenter'、'rightEarTragion'、'leftEarTragion' です。
本記事の冒頭で述べたように、営業担当者はまず
販売者を完成させるための国民 ID と、その身分証明書と自撮り写真
確認します。
モデルの出力を使用して、承認基準に照らしてチェックします。つまり、
前述の 6 つのキーポイントが一致すると
ID カードと自撮り写真の画像。
確認が完了すると、関連する販売者情報が バックエンドです。確認が失敗した場合は、失敗のメッセージと 再試行します。バックエンドには情報が送信されません。
<ph type="x-smartling-placeholder">
ローエンド デバイスのパフォーマンスに関する考慮事項
このパッケージはわずか 24.8 KB（圧縮および gzip 圧縮）で、 ダウンロード時間に大きく影響しますただし 非常にローエンドのデバイスでは 長時間かかる可能性があります以下を確認するためのロジックが 2 つの画像を機械学習の顔に渡す前のデバイスの RAM と CPU モデルです。
デバイスに 4 GB を超える RAM、4 G を超えるネットワーク接続がある場合、 6 コアを超える CPU の場合、画像はオンデバイス モデルに渡されます。 顔認証に使用されます。これらの要件が満たされていない場合、デバイス上の モデルはスキップされ、画像は検証のためにサーバーに直接送信されます。 ハイブリッドアプローチを採用して 古いデバイスに対応できるようにしています時間が経つにつれて、 ハードウェアの継続的な移行に伴い、各デバイスはサーバーからコンピューティングをオフロードできるようになります。 進化します
影響
ML の統合により、Tokopedia は高帯域幅の問題を解決する 拒否率で次の結果が得られました
- 拒否率が 20% 以上低下しました。
- 手動での承認を得る件数が約 70% 減少
これにより、営業担当者はよりスムーズなユーザー エクスペリエンスが実現しただけでなく、 Tokopedia チームの 運用コストの削減にもつながりました
まとめ
全体として、このケーススタディの結果から、適切なユースケースに対して ウェブのオンデバイス ML ソリューションは、ユーザー エクスペリエンスの向上に 実現するだけでなく、費用削減と効率化も実現します。 その他のビジネス上のメリットも得られます
MediaPipe 顔検出機能をご自身でお試しください。 MediaPipe Studio コードのコードサンプルは ウェブ向け MediaPipe 顔検出器。
Google Cloud で独自のウェブアプリの機能を拡張することに興味がある場合は、 オンデバイス ML については、次のリソースをご確認ください。