Cómo Tokopedia mejoró su aplicación web de vendedores con el aprendizaje automático para reducir los costos operativos

Dendi Sunardi
Dendi Sunardi
Geoffrey Prasetyo
Geoffrey Prasetyo
Swetha Gopalakrishnan
Swetha Gopalakrishnan

Tokopedia es una empresa indonesia de tecnología con uno de los mercados de comercio electrónico más grande del mundo, ya que aloja más de 40 productos digitales. y más de 14 millones de vendedores registrados en su plataforma.

Mitra Tokopedia, parte de la empresa de Tokopedia verticales, es una aplicación web que ayuda a los propietarios de pequeñas empresas a vender productos digitales como cupones de crédito y juegos, paquetes de datos, electricidad tokens, facturas nacionales de atención médica, entre otros. El sitio web es uno de los canales para vendedores de Mitra Tokopedia en más de 700 ciudades, por lo que resulta fundamental para garantizar una experiencia del usuario fluida.

Un paso clave del proceso de incorporación requiere que los vendedores verifiquen su con tu identidad. El vendedor tiene que subir su ID nacional y una selfie con el ID para completar la verificación del vendedor. Esto se conoce como Proceso de Conozca a su cliente (CAC).

Con la incorporación de capacidades de aprendizaje automático a este proceso fundamental de CAC en su aplicación web, Mitra Tokopedia pudo lograr una mejor experiencia del usuario con una reducción de más del 20% en los errores de verificación. También pusieron en funcionamiento de ahorro de costos gracias a la reducción de las aprobaciones manuales en casi un 70%.

Desafío

Se rechazó la mayoría de los datos de CAC, lo que generó miles de tickets por semana al equipo de operaciones para que realice una verificación manual. Esto no solo provocó un aumento pero también generaba una mala experiencia del usuario para los vendedores, cuyo el proceso de verificación se retrasa. El motivo principal del rechazo fue que los vendedores no subieron correctamente selfies con documento de identidad. Mitra Tokopedia fueron que están dispuestos a resolver este problema de forma escalable con las funciones web modernas.

Solución

El equipo de Tokopedia decidió usar el AA con TensorFlow.js para resolver este problema. en el primer paso del proceso de CAC: cuando el usuario sube las imágenes. Ellas usaron MediaPipe y TensorFlow Biblioteca de detección de rostro para detectar el rostro del vendedor con seis puntos clave cuando este sube el ID y selfies. La salida del modelo se usa para comparar su criterios de aceptación. Una vez realizada la verificación, la información se envía a el backend. Si falla la verificación, el vendedor recibirá un mensaje de error. y una opción para volver a intentarlo. Se usó un enfoque híbrido en el que el modelo realiza las la inferencia, ya sea en el dispositivo o en el servidor, según la configuración y las especificaciones del servicio. Un dispositivo de gama inferior realizaría la inferencia en el servidor.

Usar un modelo de AA al principio del proceso de CAC les permite hacer lo siguiente:

  • Mejora la tasa de rechazo en el proceso de CAC.
  • Advertir a los usuarios sobre un posible rechazo de sus imágenes en función de la calidad que el modelo evalúa.

¿Por qué elegir el AA en lugar de otras soluciones?

El AA puede automatizar tareas repetitivas que, de otro modo, requerirían mucho tiempo o poco práctico hacerlo manualmente. En el caso de Tokopedia, optimizar la infraestructura actual no pudiera producir resultados significativos, mientras que una solución de AA reducir significativamente la carga en el equipo de operaciones que tuvo que procesar manualmente miles de aprobaciones semanales. Con una solución de AA, se pueden realizar verificaciones de imágenes casi al instante, lo que proporciona una mejor experiencia del usuario y mejora eficiencia. Más información sobre encuadre del problema para determinar si el AA es una solución adecuada para tu problema.

Consideraciones al momento de elegir un modelo

Se consideraron los siguientes factores para elegir el modelo de AA.

Costo

Evaluaron el costo general de usar el modelo. Dado que TensorFlow.js es una paquete de código abierto bien mantenido por Google, ahorramos en licencias y los costos de mantenimiento. Una consideración adicional es el costo de la inferencia. En proceso capaz de ejecutar inferencias por parte del cliente ahorra mucho dinero en comparación con procesarlos en el servidor con GPU costosas, especialmente si los datos resulta ser inválido e inutilizable.

Escalabilidad

Consideraron la escalabilidad del modelo y la tecnología. ¿Puede el crecimiento de los datos y la complejidad del modelo a medida que evoluciona nuestro proyecto? ¿Puede ser para abarcar otros proyectos o casos de uso? El procesamiento integrado en el dispositivo ayuda ya que el modelo podría alojarse en una CDN y entregarse al cliente que es muy escalable.

Rendimiento

Consideraron el tamaño de la biblioteca (en KB) y la latencia del tiempo de ejecución. el proceso de administración de recursos. La mayoría de la base de usuarios de Mitra Tokopedia tiene dispositivos de gama media a baja. con una velocidad de Internet y conectividad moderadas. Por lo tanto, el rendimiento en términos de y tiempo de ejecución (es decir, qué tan rápido el modelo puede producir una salida) para satisfacer sus necesidades específicas y garantizar una excelente experiencia del usuario.

Otras consideraciones

Cumplimiento de las normas: Tenían que asegurarse de que la biblioteca elegida cumpliera con las las reglamentaciones de privacidad y protección de datos relevantes.

Habilidades: Evaluaron la experiencia y el conjunto de habilidades de su equipo. Algo de AA los frameworks y las bibliotecas pueden requerir lenguajes de programación o experiencia específicos en un área en particular. Con estos factores, tomaron una decisión a la hora de elegir el modelo adecuado para su proyecto de aprendizaje automático.

Tecnología elegida

TensorFlow.js satisfizo sus necesidades tras considerar estos factores. Puede ejecutarse completamente en el dispositivo usando su backend de WebGL para usar la GPU del dispositivo. Ejecutar un modelo integrado en el dispositivo permite obtener comentarios más rápido para el usuario debido a la reducción de la latencia del servidor y al costo de procesamiento del servidor. Leído más sobre AA integrado en el dispositivo en el artículo Ventajas y limitaciones del AA integrado en el dispositivo.

“TensorFlow.js es una biblioteca de aprendizaje automático de código abierto de Google destinada a Desarrolladores de JavaScript que pueden ejecutar el lado del cliente en el navegador. Es el la opción más madura para Web AI con WebGL, WebAssembly y WebGPU completos de backend compatible con operadores de backend que puede usarse dentro del navegador con rendimiento”.Cómo Adobe utilizó Web ML con TensorFlow.js para mejorar Photoshop para la Web

Implementación técnica

Mitra Tokopedia usó MediaPipe y TensorFlow Biblioteca de detección de rostro, un paquete que proporciona modelos para ejecutar la detección de rostros en tiempo real. En concreto, la MediaPipeFaceDetector-TFJS proporcionado en esta biblioteca, que implementa el entorno de ejecución de tfjs, que se usó para esta solución.

Antes de sumergirte en la implementación, haz un breve resumen de qué es MediaPipe. MediaPipe te permite compilar e implementar soluciones de AA integradas en el dispositivo para dispositivos móviles (Android, iOS), la Web, computadoras y dispositivos perimetrales, y el IoT.

Existen 14 soluciones diferentes ofrecido por MediaPipe al momento de redactar esta publicación. Puedes usar un Tiempo de ejecución mediapipe o tfjs. El entorno de ejecución tfjs se compila con JavaScript y Proporciona un paquete de JavaScript que la Web puede descargar de forma externa. y mantener la integridad de su aplicación. Esto es diferente de un entorno de ejecución mediapipe, que se compila con C++ y se compila en un módulo de WebAssembly. Las diferencias clave son el rendimiento, la depuración y los paquetes. El paquete de JavaScript puede integrarse con la versión clásica agrupadores, como Webpack. En cambio, el módulo de Wasm es un módulo más grande recurso binario (que se mitiga por no ser una dependencia del tiempo de carga) y requiere un diseño diferente Flujo de trabajo de depuración de Wasm. Sin embargo, se ejecuta más rápido para cumplir con los requisitos técnicos y de rendimiento.

Diagrama de cómo funcionan los modelos de MediaPipe y TensorFlow para los diferentes entornos de ejecución, con FaceDetection como ejemplo.
Ilustración general sobre cómo funcionan los modelos de MediaPipe y TensorFlow para los diferentes entornos de ejecución, con FaceDetection como ejemplo

Volviendo a la implementación de Tokopedia, el primer paso es inicializar el un modelo de AA de la siguiente manera. Cuando el usuario sube una foto, se pasa una HTMLImageElement. como una entrada al detector.

// 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);

El resultado de la lista de rostros contiene los rostros detectados para cada rostro en la imagen. Si el modelo no puede detectar ningún rostro, la lista estará vacía. Para cada rostro, contiene un cuadro delimitador del rostro detectado, así como un matriz de seis puntos clave para el rostro detectado. Esto incluye funciones como ojos, nariz y boca. Cada punto clave contiene x e y, así como un nombre.

[
  {
    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 },
      ...
    ],
  }
]

El elemento box representa el cuadro delimitador del rostro en el espacio de píxeles de la imagen, con xMin, xMax que denota los límites x, yMin, yMax que denota los límites y width y height son las dimensiones del cuadro delimitador. Para keypoints, x y y representan la posición real del punto clave en la imagen. espacio de píxeles. name proporciona una etiqueta para el punto clave, que son 'rightEye', 'leftEye'. 'noseTip', 'mouthCenter', 'rightEarTragion' y 'leftEarTragion', respectivamente. Como mencionamos al comienzo de esta publicación, el vendedor debe subir su ID nacional y una selfie con la ID para completar la conversación del vendedor verificación. La salida del modelo se usa para comparar los criterios de aceptación, es decir, tener una coincidencia de los seis puntos clave mencionados anteriormente para considerarse como un Tarjeta de identificación y selfie.

Cuando la verificación se realiza correctamente, la información relevante del vendedor se pasa a la backend. Si falla la verificación, el vendedor recibirá un mensaje de error y una opción para volver a intentarlo. No se enviará información al backend.

Diagrama de la página de CAC de Mitra, el modelo de TensorFlow.js y el servidor que interactúan entre sí.
Cómo interactúan la página de CAC de Mitra, el modelo de TensorFlow.js y el servidor

Consideraciones de rendimiento para dispositivos de gama baja

Este paquete solo tiene 24.8 KB (minificado y en formato gzip), que no contiene influirán significativamente en el tiempo de descarga. Sin embargo, para los dispositivos de gama muy baja, el procesamiento en tiempo de ejecución tarda mucho. Se agregó lógica adicional para verificar RAM y CPU del dispositivo antes de pasar las dos imágenes a la cara de aprendizaje automático de detección de intrusiones.

Si el dispositivo tiene más de 4 GB de RAM, una conexión de red superior a 4G y una CPU con más de 6 núcleos, las imágenes se pasan al modelo en el dispositivo para la verificación facial. Si no se cumplen estos requisitos, la configuración se omite el modelo y las imágenes se envían directamente al servidor para su verificación. con un enfoque híbrido para esos dispositivos más antiguos. Con el tiempo, más podrán transferir el procesamiento al servidor a medida que el hardware continúe evolucionar.

Impacto

Gracias a la integración del AA, Tokopedia pudo resolver con éxito el alto de rechazo de las solicitudes y viste los siguientes resultados:

  • El porcentaje de rechazos disminuyó más de un 20%.
  • La cantidad de aprobaciones manuales disminuyó casi un 70%.

Esto no solo generó una experiencia del usuario más fluida para los vendedores, sino que también el costo operativo del equipo de Tokopedia.

Conclusión

En general, los resultados de este caso práctico demostraron que, para los casos de uso correctos, soluciones de AA integradas en el dispositivo en la Web pueden ser valiosas para mejorar el rendimiento y eficacia de las funciones, así como ahorrar costos y otros beneficios empresariales.

Prueba tú mismo la función de detección de rostro de MediaPipe con el MediaPipe Studio y la muestra de código para Detector de rostros de MediaPipe para la Web.

Si te interesa ampliar las capacidades de tu propia app web con AA integrado en el dispositivo, consulta los siguientes recursos: