Tokopedia는 40개가 넘는 디지털 제품을 호스팅하는 최대 규모의 전자상거래 마켓 중 하나 1,400만 명 이상의 등록된 판매자를 보유하고 있습니다.
Mitra Tokopedia, Tokopedia 사업부 업종은 소규모 비즈니스 소유자가 직접 온라인 및 오프라인 광고를하여 크레딧 및 게임 쿠폰, 데이터 패키지, 전기 등의 디지털 제품 국가 의료 청구서 등을 포함합니다. 웹사이트는 업계의 서비스를 제공하기 때문에 원활한 사용자 환경을 보장해야 합니다.
이러한 영업 담당자는 온보딩 절차의 핵심 단계에서 있습니다. 판매자는 주민등록번호와 셀카를 업로드해야 합니다. 판매자 인증을 완료하려면 신분증을 확인해야 합니다 이를 가리켜 고객알기제도 (KYC) 프로세스
이 중요한 고객알기제도 프로세스에 머신러닝 기능을 Mitra Tokopedia의 웹 앱을 통해 확인 실패 20% 이상 감소 또한 그들은 수동 승인을 거의 70% 줄여 비용을 절감했습니다.
도전과제
대부분의 고객알기제도 데이터가 거부되어 매주 수천 개의 티켓 생성 운영팀에 직접 문의하여 확인해야 합니다. 이는 지속 가능성의 부정적인 사용자 경험을 초래한 판매자에게 지연시킬 수 있습니다 거절된 가장 큰 이유는 판매자가 신분증으로 셀카를 올바르게 업로드하지 않았습니다. 미트라 토코페디아는 최신 웹 기능을 사용하여 확장 가능한 방식으로 이 문제를 해결하고 싶었습니다.
솔루션
Tokopedia의 팀은 TensorFlow.js와 함께 ML을 사용하여 이 문제를 해결하기로 결정했습니다. 이는 사용자가 이미지를 업로드하는 고객알기제도 절차의 첫 번째 단계입니다. 그들은 MediaPipe와 TensorFlow의 얼굴 인식 라이브러리 판매자가 신분증을 업로드할 때 6가지 핵심 사항을 사용하여 판매자의 얼굴을 감지합니다. 카드 및 셀카 이미지가 포함됩니다. 그런 다음 모델의 출력을 사용하여 있습니다. 확인이 완료되면 정보가 다음으로 전송됩니다. kube-APIserver입니다 확인에 실패하면 판매자에게 오류 메시지가 표시됩니다. 재시도 옵션이 표시됩니다 하이브리드 접근 방식은 모델이 작업을 수행하는 데 휴대전화의 하드웨어 또는 소프트웨어에 따라 지정할 수도 있습니다 저사양 기기는 서버에서 추론을 수행합니다.
고객알기제도 절차 초기에 ML 모델을 사용하면 다음을 수행할 수 있습니다.
- 고객알기제도 절차의 거부율을 개선합니다.
- 품질에 따라 이미지가 거부될 수 있음을 사용자에게 경고합니다. 모든 특성이 포함됩니다
다른 솔루션이 아닌 ML을 선택해야 하는 이유
ML은 시간이 많이 걸리거나 시간이 오래 걸리는 반복 작업을 비실용적이라고 할 수 있습니다. Tokopedia의 경우 현재의 비 ML 모델을 ML 솔루션은 유의미한 결과를 도출할 수 없는 반면 수동으로 처리해야 하는 운영팀의 부담을 크게 줄였습니다. 매주 수천 건의 승인을 받습니다. ML 솔루션을 사용하면 이미지를 확인하고 사용자 환경을 개선하고 운영 효율을 높임으로써 효율적입니다 자세히 알아보기 문제 프레이밍 ML이 문제에 적합한 솔루션인지 판단합니다
모델 선택 시 고려사항
ML 모델을 선택할 때는 다음과 같은 요인을 고려했습니다.
비용
모델 사용의 전반적인 비용을 평가했습니다. TensorFlow.js는 오픈소스 패키지에서 호스팅되므로 라이선스 비용을 절감하고 유지보수 비용도 절감할 수 있습니다 추가로 고려할 사항은 추론 비용입니다. 활동 중 클라이언트 측에서 추론을 실행할 수 있으면 기존 방식과 달리 고가의 GPU를 사용하여 서버 측에서 이를 처리하는 데 필요합니다. 특히 데이터가 유효하지 않고 사용할 수 없게 됩니다.
확장성
모델과 기술의 확장성을 고려했습니다. 할 수 있나요? 프로젝트가 발전함에 따라 증가하는 데이터 및 모델 복잡성에 대처할 수 있는 방법이 있을까요? CANNOT TRANSLATE 확장하나요? 온디바이스 처리는 모델이 CDN에서 호스팅되어 클라이언트 측으로 전달될 수 있기 때문에 확장 가능합니다
성능
라이브러리의 크기 (KB 단위)와 런타임 지연 시간을 고려했습니다. 프로세스입니다 Mitra Tokopedia의 사용자층 대다수는 중저가형 기기를 사용합니다. 중간 정도의 인터넷 속도와 연결 속도입니다. 따라서 다운로드 및 런타임 (즉, 모델이 출력을 생성할 수 있는 속도)은 우선순위를 두고 최선의 노력을 다하고 있습니다.
기타 고려사항
규정 준수: 선택한 라이브러리가 관련 데이터 보호 및 개인 정보 보호 규정
기술: 팀의 전문성과 기술을 평가했습니다. 일부 ML 프레임워크 및 라이브러리에는 특정 프로그래밍 언어 또는 전문 지식이 필요할 수 있음 확인할 수 있습니다 이러한 요인들을 고려해서 그들은 정보에 근거한 의사 결정을 내리는 데 도움이 될 수 있습니다
기술 선택됨
TensorFlow.js는 확인할 수 있습니다 WebGL 백엔드를 사용하여 기기에서 온전히 실행함으로써 GPU를 사용할 수 있습니다 모델을 기기에서 실행하면 더 빠른 피드백이 가능함 서버 지연 시간이 줄어들고 서버 컴퓨팅 비용이 절감됩니다. 읽기 온디바이스 ML에 관한 자세한 내용은 온디바이스 ML의 장점과 한계.
"TensorFlow.js는 Google의 오픈소스 머신러닝 라이브러리로, 브라우저에서 클라이언트 측을 실행할 수 있는 JavaScript 개발자입니다. 바로 포괄적인 WebGL, WebAssembly, WebGPU를 갖춘 웹 AI용 가장 성숙한 옵션 브라우저 내에서 신속하게 사용할 수 있는 백엔드 운영자 지원 "—Adobe와 TensorFlow.js가 결합된 Web ML을 사용해 웹용 Photoshop을 개선한 방법
기술적 구현
Mitra Tokopedia는 MediaPipe와 TensorFlow의
얼굴 인식 라이브러리
실시간 얼굴 인식 실행을 위한 모델을 제공하는 패키지입니다.
구체적으로는
MediaPipeFaceDetector-TFJS
tfjs 런타임을 구현하는 이 라이브러리에서는
살펴보겠습니다
본격적으로 구현하기 전에 MediaPipe가 무엇인지 간략하게 요약해 보겠습니다. MediaPipe를 사용하면 앱을 빌드하고 배포할 수 있습니다. 모바일 (Android, iOS), 웹, 데스크톱, 에지 기기 IoT가 포함됩니다
현재
14가지 솔루션
(MediaPipe에서 제공)에 대해 자세히 알아보세요.
mediapipe 또는 tfjs 런타임 tfjs 런타임은 JavaScript 및
웹에서 외부로 다운로드할 수 있는 JavaScript 패키지를 제공합니다.
애플리케이션입니다. 이는 다음을 사용하여 빌드된 mediapipe 런타임과 다릅니다.
C++로 컴파일하고 WebAssembly 모듈로 컴파일합니다. 주요 차이점은 성능입니다.
디버깅 가능성, 번들링 등이 있습니다 JavaScript 패키지는 기존 버전과 함께 번들로 제공될 수 있습니다.
웹팩과 같은 번들러를 사용하면 됩니다 반면 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);
얼굴 목록의 결과에는 이미지의 각 얼굴에서 인식된 얼굴이 포함됩니다. 모델에서 얼굴을 감지할 수 없는 경우 목록이 비어 있게 됩니다. 각 얼굴에는 인식된 얼굴의 경계 상자와 감지된 얼굴의 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, xMax는 x값, yMin, yMax는 y값 표시
width, height는 경계 상자의 크기입니다.
keypoints의 경우 x과 y는 이미지의 실제 키포인트 위치를 나타냅니다.
확인할 수 있습니다.
name는 키포인트 라벨('rightEye', 'leftEye')을 제공합니다.
각각 'noseTip', 'mouthCenter', 'rightEarTragion', 'leftEarTragion'입니다.
이 게시물의 시작 부분에서 언급했듯이, 판매자는
판매자를 완료하기 위한 주민등록번호와 신분증이 포함된 셀카
있습니다.
그런 다음 모델의 출력은 승인 기준(
이는 앞서 언급한 6가지 핵심 사항의 일치 항목이 유효한 것으로
신분증과 셀카 이미지입니다.
인증이 완료되면 관련 판매자 정보가 사용할 수 있습니다 확인에 실패하면 판매자에게 실패 메시지와 다시 시도할 수 있습니다. 정보는 백엔드로 전송되지 않습니다.
<ph type="x-smartling-placeholder">
저사양 기기의 성능 고려사항
이 패키지는 압축 및 gzip으로 압축된 24.8KB에 불과하며 다운로드 시간에 큰 영향을 줍니다. 하지만 저사양 기기의 경우 시간이 오래 걸립니다. 다음을 확인하기 위한 추가 로직이 있음 두 이미지를 머신러닝 페이스에 전달하기 전의 기기 RAM 및 CPU 감지 모델입니다.
기기에 RAM이 4GB 이상이고 네트워크 연결이 4G보다 큰 경우 코어가 6개 이상인 CPU의 경우, 이미지가 온디바이스 모델로 전달됩니다. 사용하세요. 이러한 요구사항이 충족되지 않으면 기기 내 모델을 건너뛰고 확인을 위해 이미지가 서버로 직접 전송됩니다. 이러한 구형 기기를 수용하기 위해 하이브리드 접근 방식을 사용합니다 시간이 지남에 따라 장치는 하드웨어가 계속해서 서버에서 컴퓨팅을 오프로드하고 있습니다.
영향
ML 통합 덕분에 Tokopedia는 높은 확장성을 다음과 같은 결과를 얻었습니다.
- 거부율이 20% 넘게 감소했습니다.
- 수동 승인 횟수가 거의 70% 감소했습니다.
이를 통해 판매자에게는 더 원활한 사용자 환경이 조성되었을 뿐만 아니라 운영비를 살펴봤습니다
결론
이 우수사례의 결과에 따르면 전반적으로 올바른 사용 사례의 경우 웹상의 온디바이스 ML 솔루션은 사용자의 요구사항을 개선하는 데 기능의 경험과 효과뿐 아니라 비용 절감과 다른 비즈니스 이점도 누릴 수 있습니다
다음을 사용하여 MediaPipe 얼굴 인식 기능을 직접 사용해 보세요. MediaPipe 스튜디오 코드 샘플이 웹용 MediaPipe 얼굴 감지기.
자체 웹 앱의 기능을 확장하는 데 관심이 있다면 다음 리소스를 확인해 보세요.