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

Mitra Tokopedia, que forma 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 juegos, paquetes de datos, tokens de electricidad, facturas de atención médica nacional y otros. 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 integración requiere que estos vendedores verifiquen su identidad. El vendedor debe subir su ID nacional y una selfie con el ID para completar la verificación del vendedor. Esto se conoce como proceso de Conoce a tu cliente (KYC).

Cuando se agregaron capacidades de aprendizaje automático a este proceso de verificación de identidad 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 lograron ahorros en los 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 su verificación manual. Esto no solo causó un alto costo operativo, sino que también generó una mala experiencia del usuario para los vendedores, cuyo proceso de verificación se retrasa. El motivo principal del rechazo fue que los vendedores no subían selfies con tarjetas de ID correctamente. Mitra Tokopedia estaba deseando resolver este problema de manera escalable con capacidades 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 verificación de identidad, 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 sube la tarjeta de ID y las imágenes de selfie. Luego, la salida del modelo se usa para verificar sus criterios de aceptación. Una vez que la verificación se realiza correctamente, la información se envía al backend. Si la verificación falla, se le enviará al vendedor 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 en el dispositivo o en el servidor, según las especificaciones del teléfono. Un dispositivo de gama baja realizaría la inferencia en el servidor.

El uso de un modelo de AA al principio del proceso de verificación de identidad les permite hacer lo siguiente:

  • Mejorar el porcentaje de rechazos en el proceso de verificación de identidad
  • Advierte a los usuarios sobre el posible rechazo de sus imágenes, según la calidad que evalúe el modelo.

¿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 serían poco prácticas para hacer de forma manual. En el caso de Tokopedia, optimizar la solución actual que no es de AA no pudo generar resultados significativos, mientras que una solución de AA podría reducir significativamente la carga del equipo de operaciones, que tenía que procesar manualmente miles de aprobaciones a la semana. Con una solución de IA, 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 consideraron los siguientes factores cuando se eligió el modelo de AA.

Costo

Evalúa el costo general de usar el modelo. Dado que 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 adicional es el costo de la inferencia. Poder ejecutar la inferencia del cliente ahorra mucho dinero en comparación con procesarla del servidor con GPUs costosas, sobre todo si los datos resultan no válidos y no se pueden usar.

Escalabilidad

Tuvieron en cuenta la escalabilidad del modelo y la tecnología. ¿Puede manejar el crecimiento de la complejidad de los datos y los modelos a medida que evoluciona nuestro proyecto? ¿Se puede extender para otros proyectos o casos de uso? El procesamiento en el dispositivo es útil, ya que el modelo podría alojarse en una CDN y entregarse al lado del cliente, lo cual es muy escalable.

Rendimiento

Tuvieron en cuenta 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 conectividad y velocidad de Internet 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 principal para satisfacer sus necesidades específicas y garantizar una excelente experiencia del usuario.

Otras consideraciones

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

Conjunto de habilidades: Evalúa la experiencia y el conjunto de habilidades de su equipo. Algunos marcos de trabajo y bibliotecas de la IA pueden requerir lenguajes de programación específicos o experiencia en un área en particular. Cuando tuvo en cuenta estos factores, tomó una decisión fundamentada cuando eligió el modelo correcto para su proyecto de aprendizaje automático.

Tecnología elegida

TensorFlow.js satisfizo sus necesidades después de considerar estos factores. Puede ejecutarse completamente en el dispositivo mediante su backend de WebGL para usar la GPU del dispositivo. Ejecutar un modelo en el dispositivo permite brindar comentarios más rápidos al usuario debido a que se reduce la latencia del servidor y se reduce 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 los desarrolladores de JavaScript que pueden ejecutar el lado del 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, se usó el modelo MediaPipeFaceDetector-TFJS proporcionado en esta biblioteca, que implementa el entorno de ejecución tfjs para esta solución.

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

En el momento de escribir esta publicación, MediaPipe ofrece 14 soluciones diferentes. 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 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 depurabilidad y el empaquetado. El paquete de JavaScript se puede agrupar con empaquetadores clásicos como webpack. En cambio, el módulo Wasm es un recurso binario más grande y separado (que se mitiga porque no es una dependencia del tiempo de carga) y requiere un flujo de trabajo de depuración de Wasm diferente. 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 tiempos de ejecución, con FaceDetection como ejemplo.
Una 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 en la imagen. Si el modelo no puede detectar ningún rostro, la lista estará vacía. Para cada rostro, contiene un cuadro de límite 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 de referencia 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 de límite 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, y width, height son las dimensiones del cuadro delimitador. En el caso de keypoints, x y y, representan la posición real del punto de referencia en el espacio de píxeles de la imagen. name proporciona una etiqueta para el punto clave, que son 'rightEye', 'leftEye', 'noseTip', 'mouthCenter', 'rightEarTragion' y 'leftEarTragion', respectivamente. Como se mencionó al comienzo de esta publicación, el vendedor debe subir su ID nacional y una selfie con el ID para completar la verificación del vendedor. Luego, el resultado del modelo se usa para verificar si cumple con los criterios de aceptación, es decir, si coincide con los seis puntos clave mencionados anteriormente para que se considere una tarjeta de identificación y una imagen de selfie válidas.

Si la verificación se realiza correctamente, la información relevante del vendedor se pasa al backend. Si la verificación falla, 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 verificación de identidad de Mitra, el modelo de TensorFlow.js y el servidor que interactúan entre sí.
Cómo interactúan entre sí la página de verificación de identidad 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 de manera significativa el tiempo de descarga. Sin embargo, en el caso de los dispositivos de gama baja, el procesamiento del entorno de ejecución tarda mucho tiempo. Se agregó lógica adicional para verificar la RAM y la CPU del dispositivo antes de pasar las dos imágenes al modelo de detección de rostro de aprendizaje automático.

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 en el dispositivo y las imágenes se envían directamente al servidor para su verificación con un enfoque híbrido a fin de satisfacer los requisitos de 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

Debido a la integración del AA, Tokopedia pudo resolver con éxito la alta tasa de rechazo y vio los siguientes resultados:

  • El porcentaje de rechazo disminuyó en más del 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 demostraron que, para los casos de uso adecuados, las soluciones de AA integrado en dispositivos en la Web pueden ser valiosas para mejorar la experiencia del usuario y la eficacia de las funciones, así como para generar ahorros en costos y otros beneficios comerciales.

Prueba la función de detección de rostro de MediaPipe por tu cuenta 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 la IA integrada en el dispositivo, consulta los siguientes recursos: