Tokopedia es una empresa de tecnología indonesia que posee el mercado de comercio electrónico más grande, con 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 juego, paquetes de datos, tokens de electricidad, facturas nacionales de atención médica y 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 integración requiere que los 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 el proceso de “Conocer a tu cliente” (KYC).
Con la incorporación de capacidades de aprendizaje automático a este proceso crítico de CAC dentro de su app web, Mitra Tokopedia pudo lograr una mejor experiencia del usuario con una reducción de más del 20% de los errores de verificación. También ahorraron costos operativos, ya que disminuyeron las aprobaciones manuales en casi un 70%.
Desafío
La mayoría de los datos de CAC se rechazaron y se crearon miles de tickets por semana para el equipo de operaciones de verificación manual. Esto no solo generaba un costo operativo alto, sino que también generaba 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 correctamente las selfies con las tarjetas de ID. A Mitra Tokopedia quería resolver este problema de manera escalable utilizando las 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 CAC: cuando el usuario sube las imágenes. Usaron MediaPipe y la biblioteca de detección de rostro de TensorFlow para detectar el rostro del vendedor con seis puntos clave cuando este 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. Cuando la verificación es exitosa, 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 en el dispositivo o en el servidor, según las especificaciones del teléfono. Un dispositivo de gama inferior realizaría la inferencia en el servidor.
El uso de un modelo de AA al principio del proceso de CAC les permite hacer lo siguiente:
- Mejorar la tasa de rechazo en el proceso de CAC
- Advertir a los usuarios sobre un posible rechazo de sus imágenes, según 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 tardarían mucho o no sería práctico. En el caso de Tokopedia, optimizar la solución actual que no es de AA no podría generar resultados significativos, mientras que una solución de AA podría reducir de manera significativa la carga para el equipo de operaciones, que tuvo que procesar de forma manual miles de aprobaciones cada semana. Con una solución de AA, las verificaciones de imágenes se pueden realizar casi al instante, 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 tener en cuenta al elegir un modelo
Se consideraron los siguientes factores a la hora de elegir el modelo de AA.
Costo
Evaluaron el costo general de usar el modelo. Dado que TensorFlow.js es un paquete de código abierto que Google mantiene bien, ahorramos en costos de licencias y mantenimiento. Una consideración adicional es el costo de inferencia. Poder ejecutar inferencias en el cliente ahorra mucho dinero en comparación con procesarlos en el servidor con GPU costosas, en especial si los datos resultan inutilizables y no válidos.
Escalabilidad
Consideraron la escalabilidad del modelo y la tecnología. ¿Es capaz de manejar el crecimiento de los datos y la complejidad del modelo a medida que evoluciona nuestro proyecto? ¿Se puede extender para usarse en otros proyectos o casos de uso? El procesamiento en el dispositivo ayuda porque 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 proceso del entorno de ejecución. 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 descarga y tiempo de ejecución (es decir, la rapidez con la que 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 las normas: Tenían que asegurarse de que la biblioteca elegida cumpliera con las reglamentaciones relevantes de privacidad y protección de datos.
Habilidades: Evaluaron la experiencia y el conjunto de habilidades de su equipo. Algunos frameworks y bibliotecas de AA pueden requerir lenguajes de programación específicos o experiencia en un área en particular. Con estos factores, tomaron una decisión fundamentada a la hora de elegir el modelo adecuado para su proyecto de aprendizaje automático.
Tecnología elegida
TensorFlow.js satisfizo sus necesidades después de considerar estos factores. Puede ejecutarse por completo en el dispositivo con su backend de WebGL para usar la GPU del dispositivo. La ejecución de un modelo en el dispositivo permite obtener comentarios más rápidos para el usuario debido a la menor 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 los desarrolladores de JavaScript que pueden ejecutar el lado del cliente en el navegador. Es la opción más avanzada para la IA web con compatibilidad integral con operadores de backend de WebGL, WebAssembly y WebGPU que se puede usar dentro del navegador con un rendimiento rápido”.: Cómo Adobe usó Web ML con TensorFlow.js para mejorar Photoshop para la Web
Implementación técnica
Mitra Tokopedia usó la biblioteca de detección de rostro de MediaPipe y TensorFlow, un paquete que proporciona modelos para ejecutar la detección de rostro en tiempo real.
En particular, para esta solución se usó el modelo MediaPipeFaceDetector-TFJS que se proporciona en esta biblioteca, que implementa el entorno de ejecución tfjs.
Antes de entrar 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 en dispositivos móviles (Android, iOS), la Web, computadoras, dispositivos perimetrales y dispositivos de IoT.
MediaPipe ofrece 14 soluciones diferentes al momento de escribir esta publicación. Puedes usar un entorno 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 del tiempo 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 la creación de paquetes. El paquete de JavaScript se puede empaquetar con agrupadores clásicos como webpack. Por el contrario, el módulo de Wasm es un recurso binario independiente más grande (que se mitiga porque no es una dependencia del tiempo de carga) y requiere un flujo de trabajo de depuración por Wasm diferente. Sin embargo, se ejecuta más rápido para cumplir con los requisitos técnicos y de rendimiento.
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 rostros detectados para cada rostro en la imagen. Si el modelo no puede detectar rostros, la lista estará vacía. Para cada rostro, contiene un cuadro delimitador del rostro detectado, así como un arreglo de seis puntos clave. Esto incluye rasgos 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 },
...
],
}
]
box representa el cuadro delimitador del rostro en el espacio de píxeles de la imagen. xMin, xMax, los límites x, yMin, yMax, los límites y, y width, height, 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.
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 este para completar la verificación del vendedor.
Luego, el resultado del modelo se usa para verificar los criterios de aceptación; es decir, la coincidencia de los seis puntos clave mencionados anteriormente para que se consideren una tarjeta de identificación y una imagen de selfie válidas.
Cuando la verificación es exitosa, la información del vendedor relevante 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.
Consideraciones de rendimiento para dispositivos de gama baja
Este paquete solo tiene 24.8 KB (minificado y comprimido), lo que no afecta significativamente el tiempo de descarga. Sin embargo, en el caso de dispositivos de gama muy baja, el procesamiento en el tiempo 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 en el dispositivo para la verificación facial. Si no se cumplen estos requisitos, se omitirá el modelo en el dispositivo y las imágenes se enviarán directamente al servidor para su verificación mediante un enfoque híbrido a fin de atender estos dispositivos más antiguos. Con el tiempo, más dispositivos podrán transferir 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 obtuvo 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 creó una experiencia del usuario más fluida para los vendedores, sino que también redujo el costo operativo para el equipo de Tokopedia.
Conclusión
En general, los resultados de este caso de éxito mostraron que, para los casos de uso correctos, las soluciones de AA integradas en el dispositivo en la Web pueden ser valiosas para mejorar la experiencia del usuario y la eficacia de las funciones, además de generar ahorros de costos y otros beneficios empresariales.
Prueba la función de detección de rostro de MediaPipe con MediaPipe Studio y la muestra de código del detector de rostros de MediaPipe para la Web.
Si te interesa extender las capacidades de tu propia app web con el AA integrado en el dispositivo, consulta los siguientes recursos: