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 de tecnología de Indonesia que tiene uno de los mercados de comercio electrónico más grandes, con más de 40 productos digitales y más de 14 millones de vendedores registrados en su plataforma.

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

Un paso clave en el proceso de incorporación requiere que estos vendedores verifiquen su identidad. El vendedor debe subir su documento de identidad nacional y una selfie con el documento para completar la verificación del vendedor. Esto se conoce como el proceso de Conoce a tu cliente (KYC).

Con la incorporación de funciones de aprendizaje automático a este proceso de KYC fundamental en su app 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 ahorraron costos operativos, ya que redujeron las aprobaciones manuales en casi un 70%.

Desafío

La mayoría de los datos de KYC se rechazaban, lo que generaba miles de tickets por semana para el equipo de operaciones para la verificación manual. Esto no solo generaba un alto costo operativo, sino que también daba como resultado una mala experiencia del usuario para los vendedores, cuyo proceso de verificación se retrasaba. El motivo principal del rechazo fue que los vendedores no subieron correctamente las selfies con los documentos de identidad. Mitra Tokopedia querí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 KYC, cuando el usuario sube las imágenes. Usaron MediaPipe y la biblioteca de detección de rostros de TensorFlow para detectar el rostro del vendedor con seis puntos clave cuando este sube las imágenes del documento de identidad y la selfie. Luego, el resultado del modelo se usa para verificar si cumple con los criterios de aceptación. Una vez que se completa la verificación, la información se envía al backend. Si la verificación falla, el vendedor recibe un mensaje de error y una opción para volver a intentarlo. Se usó un enfoque híbrido en el que el modelo realiza la inferencia integrado en el dispositivo o en el servidor, según las especificaciones del teléfono. Un dispositivo de gama más baja realizaría la inferencia en el servidor.

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

  • Mejorar el porcentaje de rechazo en el proceso de KYC
  • Advertir a los usuarios sobre el posible rechazo de sus imágenes, según la calidad evaluada por el modelo

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

El AA puede automatizar tareas repetitivas que, de lo contrario, llevarían mucho tiempo o serían poco prácticas de realizar de forma manual. En el caso de Tokopedia, optimizar la solución actual sin AA no podía producir resultados significativos, mientras que una solución de AA podía reducir de forma significativa la carga del equipo de operaciones, que debía procesar de forma manual miles de aprobaciones por semana. Con una solución de AA, las verificaciones de imágenes se pueden realizar casi de forma instantánea, lo que proporciona una mejor experiencia del usuario y mejora la eficiencia operativa. Obtén más información sobre el enmarcado de problemas para determinar si el AA es una solución adecuada para tu problema.

Consideraciones para elegir un modelo

Se tuvieron en cuenta los siguientes factores cuando se eligió el modelo de AA.

Costo

Evaluaron el costo general de usar el modelo. Como TensorFlow.js es un paquete de código abierto que Google mantiene de forma adecuada, ahorramos en costos de licencias y mantenimiento. Otra consideración es el costo de la inferencia. Poder ejecutar la inferencia en el cliente ahorra mucho dinero en comparación con procesarla en el servidor con GPUs costosas, en especial si los datos resultan no válidos y no se pueden usar.

Escalabilidad

Consideraron la escalabilidad del modelo y la tecnología. ¿Puede controlar el crecimiento de los datos y la complejidad del modelo a medida que evoluciona nuestro proyecto? ¿Se puede ampliar para satisfacer otros proyectos o casos de uso? El procesamiento en el dispositivo ayuda porque el modelo se puede alojar en una CDN y entregarse al cliente, lo que es muy escalable.

Rendimiento

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

Otras consideraciones

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

Conjunto de habilidades: Evaluaron la experiencia y el conjunto de habilidades de su equipo. Algunos frameworks y bibliotecas de AA pueden requerir lenguajes de programación o experiencia específicos en un área en particular. Si consideran estos factores, tomarán una decisión fundamentada cuando elijan el modelo adecuado para su proyecto de aprendizaje automático.

Tecnología elegida

TensorFlow.js satisfizo sus necesidades después de considerar estos factores. Se puede ejecutar por completo integrado en el dispositivo con su backend de WebGL para usar la GPU del dispositivo. Ejecutar un modelo integrado en el dispositivo permite que el usuario reciba comentarios más rápido, ya que se reduce la latencia del servidor y el costo de procesamiento del servidor. Obtén más información sobre el 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 dirigida a desarrolladores de JavaScript que puede ejecutarse en el cliente en el navegador. Es la opción más madura para la IA web con compatibilidad integral con operadores de backend de WebGL, WebAssembly y WebGPU que se puede usar en el navegador con un rendimiento rápido".—Cómo Adobe usó el AA web con TensorFlow.js para mejorar Photoshop para la Web

Implementación técnica

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

Antes de profundizar en la implementación, haremos un breve resumen de lo que es MediaPipe. MediaPipe te permite compilar e implementar soluciones de AA integradas en el dispositivo en dispositivos móviles (Android, iOS), la Web, computadoras de escritorio, dispositivos perimetrales y el IoT.

En el momento de escribir esta publicación, MediaPipe ofrece 14 soluciones diferentes. Puedes usar un entorno de ejecución de mediapipe o tfjs. El entorno de ejecución de tfjs se compila con JavaScript y proporciona un paquete de JavaScript que la aplicación web puede descargar de forma externa. Esto es diferente de un entorno de ejecución de 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 el empaquetado. El paquete de JavaScript se puede empaquetar con empaquetadores clásicos, como webpack. En cambio, el módulo de Wasm es un recurso binario más grande y separado (que se mitiga al no ser una dependencia de tiempo de carga) y requiere un flujo de trabajo de depuración de Wasm diferente. Sin embargo, se ejecuta más rápido para ayudar a 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 de 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 modelo de la siguiente manera. Cuando el usuario sube una foto, se pasa un HTMLImageElement como 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 de 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 array de seis puntos clave para el rostro detectado. Esto incluye rasgos como los ojos, la nariz y la 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 },
      ...
    ],
  }
]

box representa el cuadro delimitador del rostro en el espacio de píxeles de la imagen, con xMin, xMax que denotan los límites de x, yMin, yMax que denotan los límites de y, y width, height que son las dimensiones del cuadro delimitador. Para keypoints, x y y representan la posición real del punto clave en el espacio de píxeles de la imagen. El name proporciona una etiqueta para el punto clave, que son 'rightEye', 'leftEye', 'noseTip', 'mouthCenter', 'rightEarTragion' y 'leftEarTragion', respectivamente. Como se mencionó al principio de esta publicación, el vendedor debe subir su documento de identidad nacional y una selfie con el documento para completar la verificación del vendedor. Luego, el resultado del modelo se usa para verificar los criterios de aceptación, es decir, para que coincidan los seis puntos clave mencionados anteriormente y se consideren como una imagen de selfie y un documento de identidad válidos.

Una vez que se completa la verificación, la información pertinente del vendedor se pasa al backend. Si la verificación falla, el vendedor recibe 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 KYC de Mitra, el modelo de TensorFlow.js y el servidor interactuando entre sí.
Cómo interactúan entre sí la página de KYC 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 (reducido y comprimido con gzip), lo que no afecta significativamente el tiempo de descarga. Sin embargo, en los dispositivos de gama muy baja, el procesamiento del tiempo de ejecución tarda mucho. Se agregó lógica adicional para verificar la RAM y la CPU del dispositivo antes de pasar las dos imágenes al modelo de aprendizaje automático de detección de rostros.

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 integrado en el dispositivo para la verificación facial. Si no se cumplen estos requisitos, se omite el modelo integrado en el dispositivo y las imágenes se envían directamente al servidor para su verificación con un enfoque híbrido que se adapte a estos dispositivos más antiguos. Con el tiempo, más dispositivos podrán descargar el procesamiento del servidor a medida que el hardware siga evolucionando.

Impacto

Gracias a la integración del AA, Tokopedia pudo resolver con éxito el problema de la alta tasa de rechazo y obtuvo los siguientes resultados:

  • La tasa de rechazo disminuyó en más de un 20%.
  • La cantidad de aprobaciones manuales disminuyó casi un 70%.

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

Conclusión

En general, los resultados de este caso de éxito mostraron que, para los casos de uso adecuados, las soluciones de AA integrado en el dispositivo en la Web pueden ser valiosas para mejorar la experiencia del usuario y la eficacia de las funciones, así como para generar ahorros de costos y otros beneficios comerciales.

Prueba la función de detección de rostros de MediaPipe con MediaPipe Studio y la muestra de código del 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: