چگونه Tokopedia با بهبود برنامه وب فروشنده خود با استفاده از یادگیری ماشین، هزینه های عملیاتی را کاهش داد

توکوپدیا یک شرکت فناوری اندونزیایی با یکی از بزرگترین بازارهای تجارت الکترونیک است که میزبان بیش از 40 محصول دیجیتال و بیش از 14 میلیون فروشنده ثبت شده بر روی پلتفرم خود است.

میترا توکوپدیا ، بخشی از بخش‌های تجاری توکوپدیا، یک برنامه وب است که به صاحبان مشاغل کوچک کمک می‌کند تا محصولات دیجیتالی مانند کوپن‌های اعتباری و بازی، بسته‌های داده، توکن‌های برق، قبوض ملی مراقبت‌های بهداشتی و غیره را بفروشند. این وب‌سایت یکی از کانال‌های اصلی فروشندگان Mitra Tokopedia در بیش از 700 شهر است که اطمینان از تجربه کاربری روان را ضروری می‌کند.

یک مرحله کلیدی در فرآیند سوار شدن به این فروشندگان نیاز دارد که هویت خود را تأیید کنند. فروشنده باید شناسه ملی خود و همچنین یک عکس سلفی همراه با شناسه را برای تکمیل تأیید صحت فروشنده آپلود کند. به این فرآیند «مشتری خود را بشناسید» (KYC) می گویند.

میترا توکوپدیا با افزودن قابلیت‌های یادگیری ماشین به این فرآیند حیاتی KYC در برنامه وب خود، توانست تجربه کاربری بهتری را با کاهش بیش از 20 درصدی خرابی‌های تأیید به دست آورد. آنها همچنین با کاهش تأییدیه های دستی نزدیک به 70 درصد در هزینه های عملیاتی صرفه جویی کردند.

چالش

بیشتر داده‌های KYC رد می‌شدند و هزاران بلیط در هفته برای تیم عملیات برای تأیید دستی ایجاد می‌شد. این نه تنها باعث هزینه عملیاتی بالا شد، بلکه منجر به تجربه کاربری بدی برای فروشندگان شد که فرآیند تأیید آنها به تأخیر می‌افتد. بزرگترین دلیل رد این درخواست این بود که فروشندگان عکس های سلفی را با کارت شناسایی درست آپلود نکردند. میترا توکوپدیا مایل بود این مشکل را به صورت مقیاس پذیر با استفاده از قابلیت های وب مدرن حل کند.

راه حل

تیم توکوپدیا تصمیم گرفت از ML با TensorFlow.js برای حل این مشکل در اولین مرحله از فرآیند KYC استفاده کند - زمانی که کاربر تصاویر را آپلود می کند. آنها از MediaPipe و کتابخانه تشخیص چهره TensorFlow برای تشخیص چهره فروشنده با شش نقطه کلیدی هنگام آپلود کارت شناسایی و تصاویر سلفی استفاده کردند. سپس خروجی مدل برای بررسی معیارهای پذیرش آنها استفاده می شود. پس از تأیید موفقیت آمیز، اطلاعات به باطن ارسال می شود. اگر تأیید ناموفق باشد، یک پیام خطا و گزینه ای برای تلاش مجدد به فروشنده ارائه می شود. یک رویکرد ترکیبی استفاده شد که در آن مدل بسته به مشخصات تلفن، استنتاج را در دستگاه یا سمت سرور انجام می‌دهد. یک دستگاه پایین تر استنتاج را روی سرور انجام می دهد.

استفاده از یک مدل ML در اوایل فرآیند KYC به آنها اجازه می دهد:

  • نرخ رد را در فرآیند KYC بهبود دهید.
  • بر اساس کیفیت ارزیابی شده توسط مدل، به کاربران در مورد رد احتمالی تصاویر آنها هشدار دهید.

چرا ML را در مقابل راه حل های دیگر انتخاب کنید؟

ML می‌تواند کارهای تکراری را که انجام دستی زمان‌بر یا غیرعملی هستند، خودکار کند. در مورد توکوپدیا، بهینه سازی راه حل غیر ML فعلی نمی تواند نتایج قابل توجهی به همراه داشته باشد، در حالی که یک راه حل ML می تواند بار تیم عملیاتی را که مجبور به پردازش دستی هزاران تاییدیه در هفته بودند، به میزان قابل توجهی کاهش دهد. با یک راه حل ML، بررسی تصویر را می توان بلافاصله انجام داد و تجربه کاربری بهتری را ارائه داد و کارایی عملیاتی را بهبود بخشید. برای تعیین اینکه آیا ML راه حل مناسبی برای مشکل شماست، درباره چارچوب بندی مشکل بیشتر بخوانید.

ملاحظات در انتخاب مدل

هنگام انتخاب مدل ML عوامل زیر در نظر گرفته شد.

هزینه

آنها هزینه کلی استفاده از مدل را ارزیابی کردند. از آنجایی که TensorFlow.js یک بسته منبع باز است که به خوبی توسط Google نگهداری می شود، ما در هزینه های صدور مجوز و نگهداری صرفه جویی می کنیم. یک ملاحظه اضافی هزینه استنتاج است. امکان اجرای استنتاج در سمت کلاینت در مقایسه با پردازش آن در سمت سرور با پردازنده‌های گرافیکی گران قیمت، باعث صرفه‌جویی در هزینه‌های زیادی می‌شود، به خصوص اگر داده‌ها نامعتبر و غیرقابل استفاده باشند.

مقیاس پذیری

آنها مقیاس پذیری مدل و فناوری را در نظر گرفتند. آیا می تواند رشد داده ها و پیچیدگی مدل را در حین تکامل پروژه ما مدیریت کند؟ آیا می توان آن را برای تأمین سایر پروژه ها یا موارد استفاده گسترش داد؟ پردازش روی دستگاه کمک می کند زیرا مدل می تواند روی CDN میزبانی شود و به سمت مشتری تحویل داده شود، که بسیار مقیاس پذیر است.

عملکرد

آنها اندازه کتابخانه (در کیلوبایت) و تأخیر فرآیند زمان اجرا را در نظر گرفتند. اکثر کاربران میترا توکوپدیا دارای دستگاه های متوسط ​​تا پایین با سرعت اینترنت و اتصال متوسط ​​هستند. بنابراین، عملکرد از نظر دانلود و زمان اجرا (یعنی اینکه مدل با چه سرعتی می تواند خروجی تولید کند) اولویت اصلی برای برآوردن نیازهای خاص آنها و تضمین تجربه کاربری عالی است.

ملاحظات دیگر

انطباق با مقررات: آنها باید اطمینان حاصل می کردند که کتابخانه انتخاب شده با قوانین مربوط به حفاظت از داده ها و حریم خصوصی مطابقت دارد.

مجموعه مهارت: آنها تخصص و مجموعه مهارت تیم خود را ارزیابی کردند. برخی از چارچوب ها و کتابخانه های ML ممکن است به زبان های برنامه نویسی خاص یا تخصص در یک زمینه خاص نیاز داشته باشند. با در نظر گرفتن این عوامل، آنها هنگام انتخاب مدل مناسب برای پروژه یادگیری ماشین خود تصمیم آگاهانه ای گرفتند.

فناوری انتخاب شده است

TensorFlow.js پس از در نظر گرفتن این عوامل نیازهای آنها را برآورده کرد. این می تواند به طور کامل روی دستگاه با استفاده از WebGL Backend خود برای استفاده از GPU دستگاه اجرا شود. اجرای یک مدل روی دستگاه به دلیل کاهش تاخیر سرور، بازخورد سریع‌تری را به کاربر ممکن می‌کند و هزینه محاسبه سرور را کاهش می‌دهد. در مقاله مزایا و محدودیت های ML روی دستگاه، اطلاعات بیشتری درباره ML روی دستگاه بخوانید.

"TensorFlow.js یک کتابخانه یادگیری ماشین منبع باز از Google است که هدف آن توسعه دهندگان جاوا اسکریپت است که می تواند سمت کلاینت را در مرورگر اجرا کند. این بالغ ترین گزینه برای هوش مصنوعی وب با پشتیبانی جامع اپراتور WebGL، WebAssembly و WebGPU است که می تواند در داخل مورد استفاده قرار گیرد. مرورگر با عملکرد سریع." - چگونه Adobe از Web ML با TensorFlow.js برای بهبود فتوشاپ برای وب استفاده کرد

پیاده سازی فنی

Mitra Tokopedia از MediaPipe و کتابخانه تشخیص چهره TensorFlow استفاده کرد، بسته ای که مدل هایی را برای اجرای تشخیص چهره در زمان واقعی ارائه می دهد. به طور خاص، مدل MediaPipeFaceDetector-TFJS ارائه شده در این کتابخانه که زمان اجرای tfjs را پیاده سازی می کند برای این راه حل استفاده شده است.

قبل از فرو رفتن در پیاده سازی، خلاصه ای از MediaPipe چیست. MediaPipe به شما امکان می دهد راه حل های ML روی دستگاه را در سراسر تلفن همراه (اندروید، iOS)، وب، دسکتاپ، دستگاه های لبه و اینترنت اشیا بسازید و به کار ببرید.

14 راه حل مختلف توسط MediaPipe در زمان نوشتن این پست ارائه شده است. می توانید از یک mediapipe یا runtime tfjs استفاده کنید. زمان اجرا tfjs با جاوا اسکریپت ساخته شده است و یک بسته جاوا اسکریپت را ارائه می دهد که می تواند به صورت خارجی توسط برنامه وب دانلود شود. این با زمان اجرا mediapipe که با C++ ساخته شده و در یک ماژول WebAssembly کامپایل شده است متفاوت است. تفاوت های اصلی عملکرد، اشکال زدایی و بسته بندی است. بسته جاوا اسکریپت را می توان با بسته های کلاسیک مانند بسته وب همراه کرد. در مقابل، ماژول Wasm یک منبع باینری بزرگتر و مجزا است (که با عدم وابستگی به زمان بارگذاری کاهش می یابد) و به یک گردش کار اشکال زدایی Wasm متفاوت نیاز دارد. با این حال، برای کمک به برآوردن الزامات فنی و عملکرد، سریعتر اجرا می شود.

نمودار نحوه عملکرد مدل های MediaPipe و TensorFlow برای زمان های مختلف اجرا با استفاده از FaceDetection به عنوان مثال.
یک تصویر کلی در مورد نحوه عملکرد مدل های MediaPipe و TensorFlow برای زمان های مختلف اجرا با استفاده از FaceDetection به عنوان مثال

با بازگشت به پیاده سازی 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);

نتیجه لیست چهره شامل چهره های شناسایی شده برای هر چهره در تصویر است. اگر مدل نتواند هیچ چهره ای را تشخیص دهد، لیست خالی خواهد بود. برای هر چهره، یک جعبه محدود کننده از چهره شناسایی شده و همچنین یک آرایه از شش نقطه کلیدی برای چهره شناسایی شده است. این شامل ویژگی هایی مانند چشم، بینی و دهان می شود. هر نقطه کلیدی حاوی 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' . همانطور که در ابتدای این پست ذکر شد، فروشنده باید شناسه ملی خود و یک عکس سلفی همراه با شناسه را آپلود کند تا تاییدیه فروشنده تکمیل شود. سپس خروجی مدل برای بررسی معیارهای پذیرش مورد استفاده قرار می گیرد - یعنی مطابقت با شش نقطه کلیدی که قبلا ذکر شد تا به عنوان یک کارت شناسایی معتبر و تصویر سلفی در نظر گرفته شود.

پس از تأیید موفقیت آمیز، اطلاعات فروشنده مربوطه به باطن ارسال می شود. اگر راستی‌آزمایی با شکست مواجه شد، به فروشنده یک پیام خرابی و گزینه‌ای برای امتحان مجدد داده می‌شود. هیچ اطلاعاتی به باطن ارسال نخواهد شد.

نمودار صفحه Mitra KYC، مدل TensorFlow.js و سرور در تعامل با یکدیگر.
نحوه تعامل صفحه Mitra KYC، مدل TensorFlow.js و سرور با یکدیگر

ملاحظات عملکرد برای دستگاه های ارزان قیمت

این بسته تنها 24.8 کیلوبایت (مینیفیه شده و گیزیپ شده) است که تاثیر قابل توجهی بر زمان دانلود ندارد. با این حال، برای دستگاه های بسیار پایین، پردازش زمان اجرا زمان زیادی می برد. منطق اضافی برای بررسی رم دستگاه و CPU قبل از ارسال دو تصویر به مدل تشخیص چهره یادگیری ماشین اضافه شد.

اگر دستگاه دارای بیش از 4 گیگابایت رم، اتصال شبکه بیشتر از 4G و یک CPU با بیش از 6 هسته باشد، تصاویر برای تأیید چهره به مدل روی دستگاه ارسال می شوند. اگر این الزامات برآورده نشود، مدل روی دستگاه حذف می‌شود و تصاویر مستقیماً برای تأیید با استفاده از یک رویکرد ترکیبی برای تأمین این دستگاه‌های قدیمی‌تر به سرور ارسال می‌شوند. با گذشت زمان، با ادامه تکامل سخت افزار، دستگاه های بیشتری قادر خواهند بود محاسبات را از سرور تخلیه کنند.

تاثیر

با توجه به ادغام ML، توکوپدیا با موفقیت توانست نرخ رد بالا را حل کند و نتایج زیر را مشاهده کرد:

  • نرخ رد بیش از 20٪ کاهش یافته است.
  • تعداد تأییدیه های دستی تقریباً 70 درصد کاهش یافته است.

این نه تنها تجربه کاربری روان تری را برای فروشندگان ایجاد کرد، بلکه هزینه عملیاتی تیم توکوپدیا را نیز کاهش داد.

نتیجه گیری

به طور کلی، نتایج این مطالعه موردی نشان داد که برای موارد استفاده صحیح، راه‌حل‌های ML روی دستگاه در وب می‌تواند در بهبود تجربه کاربر و اثربخشی ویژگی‌ها و همچنین ایجاد صرفه‌جویی در هزینه و سایر مزایای تجاری ارزشمند باشد.

خودتان با استفاده از MediaPipe Studio و نمونه کد برای MediaPipe Face Detector برای وب، ویژگی MediaPipe Face Detection را امتحان کنید.

اگر علاقه مند به گسترش قابلیت های برنامه وب خود با ML روی دستگاه هستید، منابع زیر را بررسی کنید:

،

توکوپدیا یک شرکت فناوری اندونزیایی با یکی از بزرگترین بازارهای تجارت الکترونیک است که میزبان بیش از 40 محصول دیجیتال و بیش از 14 میلیون فروشنده ثبت شده بر روی پلتفرم خود است.

میترا توکوپدیا ، بخشی از بخش‌های تجاری توکوپدیا، یک برنامه وب است که به صاحبان مشاغل کوچک کمک می‌کند تا محصولات دیجیتالی مانند کوپن‌های اعتباری و بازی، بسته‌های داده، توکن‌های برق، قبوض ملی مراقبت‌های بهداشتی و غیره را بفروشند. این وب‌سایت یکی از کانال‌های اصلی فروشندگان Mitra Tokopedia در بیش از 700 شهر است که اطمینان از تجربه کاربری روان را ضروری می‌کند.

یک مرحله کلیدی در فرآیند سوار شدن به این فروشندگان نیاز دارد که هویت خود را تأیید کنند. فروشنده باید شناسه ملی خود و همچنین یک عکس سلفی همراه با شناسه را برای تکمیل تأیید صحت فروشنده آپلود کند. به این فرآیند «مشتری خود را بشناسید» (KYC) می گویند.

میترا توکوپدیا با افزودن قابلیت‌های یادگیری ماشین به این فرآیند حیاتی KYC در برنامه وب خود، توانست تجربه کاربری بهتری را با کاهش بیش از 20 درصدی خرابی‌های تأیید به دست آورد. آنها همچنین با کاهش تأییدیه های دستی نزدیک به 70 درصد در هزینه های عملیاتی صرفه جویی کردند.

چالش

بیشتر داده‌های KYC رد می‌شدند و هزاران بلیط در هفته برای تیم عملیات برای تأیید دستی ایجاد می‌شد. این نه تنها باعث هزینه عملیاتی بالا شد، بلکه منجر به تجربه کاربری بدی برای فروشندگان شد که فرآیند تأیید آنها به تأخیر می‌افتد. بزرگترین دلیل رد این درخواست این بود که فروشندگان عکس های سلفی را با کارت شناسایی درست آپلود نکردند. میترا توکوپدیا مایل بود این مشکل را به صورت مقیاس پذیر با استفاده از قابلیت های وب مدرن حل کند.

راه حل

تیم توکوپدیا تصمیم گرفت از ML با TensorFlow.js برای حل این مشکل در اولین مرحله از فرآیند KYC استفاده کند - زمانی که کاربر تصاویر را آپلود می کند. آنها از MediaPipe و کتابخانه تشخیص چهره TensorFlow برای تشخیص چهره فروشنده با شش نقطه کلیدی هنگام آپلود کارت شناسایی و تصاویر سلفی استفاده کردند. سپس خروجی مدل برای بررسی معیارهای پذیرش آنها استفاده می شود. پس از تأیید موفقیت آمیز، اطلاعات به باطن ارسال می شود. اگر تأیید ناموفق باشد، یک پیام خطا و گزینه ای برای تلاش مجدد به فروشنده ارائه می شود. یک رویکرد ترکیبی استفاده شد که در آن مدل بسته به مشخصات تلفن، استنتاج را در دستگاه یا سمت سرور انجام می‌دهد. یک دستگاه پایین تر استنتاج را روی سرور انجام می دهد.

استفاده از یک مدل ML در اوایل فرآیند KYC به آنها اجازه می دهد:

  • نرخ رد را در فرآیند KYC بهبود دهید.
  • بر اساس کیفیت ارزیابی شده توسط مدل، به کاربران در مورد رد احتمالی تصاویر آنها هشدار دهید.

چرا ML را در مقابل راه حل های دیگر انتخاب کنید؟

ML می‌تواند کارهای تکراری را که انجام دستی زمان‌بر یا غیرعملی هستند، خودکار کند. در مورد توکوپدیا، بهینه سازی راه حل غیر ML فعلی نمی تواند نتایج قابل توجهی به همراه داشته باشد، در حالی که یک راه حل ML می تواند بار تیم عملیاتی را که مجبور به پردازش دستی هزاران تاییدیه در هفته بودند، به میزان قابل توجهی کاهش دهد. با یک راه حل ML، بررسی تصویر را می توان بلافاصله انجام داد و تجربه کاربری بهتری را ارائه داد و کارایی عملیاتی را بهبود بخشید. برای تعیین اینکه آیا ML راه حل مناسبی برای مشکل شماست، درباره چارچوب بندی مشکل بیشتر بخوانید.

ملاحظات در انتخاب مدل

هنگام انتخاب مدل ML عوامل زیر در نظر گرفته شد.

هزینه

آنها هزینه کلی استفاده از مدل را ارزیابی کردند. از آنجایی که TensorFlow.js یک بسته منبع باز است که به خوبی توسط Google نگهداری می شود، ما در هزینه های صدور مجوز و نگهداری صرفه جویی می کنیم. یک ملاحظه اضافی هزینه استنتاج است. امکان اجرای استنتاج در سمت کلاینت در مقایسه با پردازش آن در سمت سرور با پردازنده‌های گرافیکی گران قیمت، باعث صرفه‌جویی در هزینه‌های زیادی می‌شود، به خصوص اگر داده‌ها نامعتبر و غیرقابل استفاده باشند.

مقیاس پذیری

آنها مقیاس پذیری مدل و فناوری را در نظر گرفتند. آیا می تواند رشد داده ها و پیچیدگی مدل را در حین تکامل پروژه ما مدیریت کند؟ آیا می توان آن را برای تأمین سایر پروژه ها یا موارد استفاده گسترش داد؟ پردازش روی دستگاه کمک می کند زیرا مدل می تواند روی CDN میزبانی شود و به سمت مشتری تحویل داده شود، که بسیار مقیاس پذیر است.

عملکرد

آنها اندازه کتابخانه (در کیلوبایت) و تأخیر فرآیند زمان اجرا را در نظر گرفتند. اکثر کاربران میترا توکوپدیا دارای دستگاه های متوسط ​​تا پایین با سرعت اینترنت و اتصال متوسط ​​هستند. بنابراین، عملکرد از نظر دانلود و زمان اجرا (یعنی اینکه مدل با چه سرعتی می تواند خروجی تولید کند) اولویت اصلی برای برآوردن نیازهای خاص آنها و تضمین تجربه کاربری عالی است.

ملاحظات دیگر

انطباق با مقررات: آنها باید اطمینان حاصل می کردند که کتابخانه انتخاب شده با قوانین مربوط به حفاظت از داده ها و حریم خصوصی مطابقت دارد.

مجموعه مهارت: آنها تخصص و مجموعه مهارت تیم خود را ارزیابی کردند. برخی از چارچوب ها و کتابخانه های ML ممکن است به زبان های برنامه نویسی خاص یا تخصص در یک زمینه خاص نیاز داشته باشند. با در نظر گرفتن این عوامل، آنها هنگام انتخاب مدل مناسب برای پروژه یادگیری ماشین خود تصمیم آگاهانه ای گرفتند.

فناوری انتخاب شده است

TensorFlow.js پس از در نظر گرفتن این عوامل نیازهای آنها را برآورده کرد. این می تواند به طور کامل روی دستگاه با استفاده از WebGL Backend خود برای استفاده از GPU دستگاه اجرا شود. اجرای یک مدل روی دستگاه به دلیل کاهش تاخیر سرور، بازخورد سریع‌تری را به کاربر ممکن می‌کند و هزینه محاسبه سرور را کاهش می‌دهد. در مقاله مزایا و محدودیت های ML روی دستگاه، اطلاعات بیشتری درباره ML روی دستگاه بخوانید.

"TensorFlow.js یک کتابخانه یادگیری ماشین منبع باز از Google است که هدف آن توسعه دهندگان جاوا اسکریپت است که می تواند سمت کلاینت را در مرورگر اجرا کند. این بالغ ترین گزینه برای هوش مصنوعی وب با پشتیبانی جامع اپراتور WebGL، WebAssembly و WebGPU است که می تواند در داخل مورد استفاده قرار گیرد. مرورگر با عملکرد سریع." - چگونه Adobe از Web ML با TensorFlow.js برای بهبود فتوشاپ برای وب استفاده کرد

پیاده سازی فنی

Mitra Tokopedia از MediaPipe و کتابخانه تشخیص چهره TensorFlow استفاده کرد، بسته ای که مدل هایی را برای اجرای تشخیص چهره در زمان واقعی ارائه می دهد. به طور خاص، مدل MediaPipeFaceDetector-TFJS ارائه شده در این کتابخانه که زمان اجرای tfjs را پیاده سازی می کند برای این راه حل استفاده شده است.

قبل از فرو رفتن در پیاده سازی، خلاصه ای از MediaPipe چیست. MediaPipe به شما امکان می دهد راه حل های ML روی دستگاه را در سراسر تلفن همراه (اندروید، iOS)، وب، دسکتاپ، دستگاه های لبه و اینترنت اشیا بسازید و به کار ببرید.

14 راه حل مختلف توسط MediaPipe در زمان نوشتن این پست ارائه شده است. می توانید از یک mediapipe یا runtime tfjs استفاده کنید. زمان اجرا tfjs با جاوا اسکریپت ساخته شده است و یک بسته جاوا اسکریپت را ارائه می دهد که می تواند به صورت خارجی توسط برنامه وب دانلود شود. این با زمان اجرا mediapipe که با C++ ساخته شده و در یک ماژول WebAssembly کامپایل شده است متفاوت است. تفاوت های اصلی عملکرد، اشکال زدایی و بسته بندی است. بسته جاوا اسکریپت را می توان با بسته های کلاسیک مانند بسته وب همراه کرد. در مقابل، ماژول Wasm یک منبع باینری بزرگتر و مجزا است (که با عدم وابستگی به زمان بارگذاری کاهش می یابد) و به یک گردش کار اشکال زدایی Wasm متفاوت نیاز دارد. با این حال، برای کمک به برآوردن الزامات فنی و عملکرد، سریعتر اجرا می شود.

نمودار نحوه عملکرد مدل های MediaPipe و TensorFlow برای زمان های مختلف اجرا با استفاده از FaceDetection به عنوان مثال.
یک تصویر کلی در مورد نحوه عملکرد مدل های MediaPipe و TensorFlow برای زمان های مختلف اجرا با استفاده از FaceDetection به عنوان مثال

با بازگشت به پیاده سازی 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);

نتیجه لیست چهره شامل چهره های شناسایی شده برای هر چهره در تصویر است. اگر مدل نتواند هیچ چهره ای را تشخیص دهد، لیست خالی خواهد بود. برای هر چهره، یک کادر محدود از چهره شناسایی شده، و همچنین آرایه ای از شش نقطه کلیدی برای چهره شناسایی شده است. این شامل ویژگی هایی مانند چشم، بینی و دهان می شود. هر نقطه کلیدی حاوی 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' . همانطور که در ابتدای این پست ذکر شد، فروشنده باید شناسه ملی خود و یک عکس سلفی همراه با شناسه را آپلود کند تا تاییدیه فروشنده تکمیل شود. سپس خروجی مدل برای بررسی معیارهای پذیرش مورد استفاده قرار می گیرد - یعنی مطابقت با شش نقطه کلیدی که قبلا ذکر شد تا به عنوان یک کارت شناسایی معتبر و تصویر سلفی در نظر گرفته شود.

پس از تأیید موفقیت آمیز، اطلاعات فروشنده مربوطه به باطن ارسال می شود. اگر راستی‌آزمایی با شکست مواجه شد، به فروشنده یک پیام خرابی و گزینه‌ای برای امتحان مجدد داده می‌شود. هیچ اطلاعاتی به باطن ارسال نخواهد شد.

نمودار صفحه Mitra KYC، مدل TensorFlow.js و سرور در تعامل با یکدیگر.
نحوه تعامل صفحه Mitra KYC، مدل TensorFlow.js و سرور با یکدیگر

ملاحظات عملکرد برای دستگاه های ارزان قیمت

این بسته تنها 24.8 کیلوبایت (مینیفیه شده و گیزیپ شده) است که تاثیر قابل توجهی بر زمان دانلود ندارد. با این حال، برای دستگاه های بسیار پایین، پردازش زمان اجرا زمان زیادی می برد. منطق اضافی برای بررسی رم دستگاه و CPU قبل از ارسال دو تصویر به مدل تشخیص چهره یادگیری ماشین اضافه شد.

اگر دستگاه دارای بیش از 4 گیگابایت رم، اتصال شبکه بیشتر از 4G و یک CPU با بیش از 6 هسته باشد، تصاویر برای تأیید چهره به مدل روی دستگاه ارسال می شوند. اگر این الزامات برآورده نشود، مدل روی دستگاه حذف می‌شود و تصاویر مستقیماً برای تأیید با استفاده از یک رویکرد ترکیبی برای تأمین این دستگاه‌های قدیمی‌تر به سرور ارسال می‌شوند. با گذشت زمان، با ادامه تکامل سخت افزار، دستگاه های بیشتری قادر خواهند بود محاسبات را از سرور تخلیه کنند.

تاثیر

با توجه به ادغام ML، توکوپدیا با موفقیت توانست نرخ رد بالا را حل کند و نتایج زیر را مشاهده کرد:

  • نرخ رد بیش از 20٪ کاهش یافته است.
  • تعداد تأییدیه های دستی تقریباً 70 درصد کاهش یافته است.

این نه تنها تجربه کاربری روان تری را برای فروشندگان ایجاد کرد، بلکه هزینه عملیاتی تیم توکوپدیا را نیز کاهش داد.

نتیجه گیری

به طور کلی، نتایج این مطالعه موردی نشان داد که برای موارد استفاده صحیح، راه‌حل‌های ML روی دستگاه در وب می‌تواند در بهبود تجربه کاربر و اثربخشی ویژگی‌ها و همچنین ایجاد صرفه‌جویی در هزینه و سایر مزایای تجاری ارزشمند باشد.

خودتان با استفاده از MediaPipe Studio و نمونه کد برای MediaPipe Face Detector برای وب، ویژگی MediaPipe Face Detection را امتحان کنید.

اگر علاقه مند به گسترش قابلیت های برنامه وب خود با ML روی دستگاه هستید، منابع زیر را بررسی کنید:

،

توکوپدیا یک شرکت فناوری اندونزیایی با یکی از بزرگترین بازارهای تجارت الکترونیک است که میزبان بیش از 40 محصول دیجیتال و بیش از 14 میلیون فروشنده ثبت شده بر روی پلتفرم خود است.

میترا توکوپدیا ، بخشی از بخش‌های تجاری توکوپدیا، یک برنامه وب است که به صاحبان مشاغل کوچک کمک می‌کند تا محصولات دیجیتالی مانند کوپن‌های اعتباری و بازی، بسته‌های داده، توکن‌های برق، قبوض ملی مراقبت‌های بهداشتی و غیره را بفروشند. این وب‌سایت یکی از کانال‌های اصلی فروشندگان Mitra Tokopedia در بیش از 700 شهر است که اطمینان از تجربه کاربری روان را ضروری می‌کند.

یک مرحله کلیدی در فرآیند سوار شدن به این فروشندگان نیاز دارد که هویت خود را تأیید کنند. فروشنده باید شناسه ملی خود و همچنین یک عکس سلفی همراه با شناسه را برای تکمیل تأیید صحت فروشنده آپلود کند. به این فرآیند «مشتری خود را بشناسید» (KYC) می گویند.

میترا توکوپدیا با افزودن قابلیت‌های یادگیری ماشین به این فرآیند حیاتی KYC در برنامه وب خود، توانست تجربه کاربری بهتری را با کاهش بیش از 20 درصدی خرابی‌های تأیید به دست آورد. آنها همچنین با کاهش تأییدیه های دستی نزدیک به 70 درصد در هزینه های عملیاتی صرفه جویی کردند.

چالش

بیشتر داده‌های KYC رد می‌شدند و هزاران بلیط در هفته برای تیم عملیات برای تأیید دستی ایجاد می‌شد. این نه تنها باعث هزینه عملیاتی بالا شد، بلکه منجر به تجربه کاربری بدی برای فروشندگان شد که فرآیند تأیید آنها به تأخیر می‌افتد. بزرگترین دلیل رد این درخواست این بود که فروشندگان عکس های سلفی را با کارت شناسایی درست آپلود نکردند. میترا توکوپدیا مایل بود این مشکل را به صورت مقیاس پذیر با استفاده از قابلیت های وب مدرن حل کند.

راه حل

تیم توکوپدیا تصمیم گرفت از ML با TensorFlow.js برای حل این مشکل در اولین مرحله از فرآیند KYC استفاده کند - زمانی که کاربر تصاویر را آپلود می کند. آنها از MediaPipe و کتابخانه تشخیص چهره TensorFlow برای تشخیص چهره فروشنده با شش نقطه کلیدی هنگام آپلود کارت شناسایی و تصاویر سلفی استفاده کردند. سپس خروجی مدل برای بررسی معیارهای پذیرش آنها استفاده می شود. پس از تأیید موفقیت آمیز، اطلاعات به باطن ارسال می شود. اگر تأیید ناموفق باشد، یک پیام خطا و گزینه ای برای تلاش مجدد به فروشنده ارائه می شود. یک رویکرد ترکیبی استفاده شد که در آن مدل بسته به مشخصات تلفن، استنتاج را در دستگاه یا سمت سرور انجام می‌دهد. یک دستگاه پایین تر استنتاج را روی سرور انجام می دهد.

استفاده از یک مدل ML در اوایل فرآیند KYC به آنها اجازه می دهد:

  • نرخ رد را در فرآیند KYC بهبود دهید.
  • بر اساس کیفیت ارزیابی شده توسط مدل، به کاربران در مورد رد احتمالی تصاویر آنها هشدار دهید.

چرا ML را در مقابل راه حل های دیگر انتخاب کنید؟

ML می‌تواند کارهای تکراری را که انجام دستی زمان‌بر یا غیرعملی هستند، خودکار کند. در مورد توکوپدیا، بهینه سازی راه حل غیر ML فعلی نمی تواند نتایج قابل توجهی به همراه داشته باشد، در حالی که یک راه حل ML می تواند بار تیم عملیاتی را که مجبور به پردازش دستی هزاران تاییدیه در هفته بودند، به میزان قابل توجهی کاهش دهد. با یک راه حل ML، بررسی تصویر را می توان بلافاصله انجام داد و تجربه کاربری بهتری را ارائه داد و کارایی عملیاتی را بهبود بخشید. برای تعیین اینکه آیا ML راه حل مناسبی برای مشکل شماست، درباره چارچوب بندی مشکل بیشتر بخوانید.

ملاحظات در انتخاب مدل

هنگام انتخاب مدل ML عوامل زیر در نظر گرفته شد.

هزینه

آنها هزینه کلی استفاده از مدل را ارزیابی کردند. از آنجایی که TensorFlow.js یک بسته منبع باز است که به خوبی توسط Google نگهداری می شود، ما در هزینه های صدور مجوز و نگهداری صرفه جویی می کنیم. یک ملاحظه اضافی هزینه استنتاج است. امکان اجرای استنتاج در سمت کلاینت در مقایسه با پردازش آن در سمت سرور با پردازنده‌های گرافیکی گران قیمت، باعث صرفه‌جویی در هزینه‌های زیادی می‌شود، به خصوص اگر داده‌ها نامعتبر و غیرقابل استفاده باشند.

مقیاس پذیری

آنها مقیاس پذیری مدل و فناوری را در نظر گرفتند. آیا می تواند رشد داده ها و پیچیدگی مدل را در حین تکامل پروژه ما مدیریت کند؟ آیا می توان آن را برای تأمین سایر پروژه ها یا موارد استفاده گسترش داد؟ پردازش روی دستگاه کمک می کند زیرا مدل می تواند روی CDN میزبانی شود و به سمت مشتری تحویل داده شود، که بسیار مقیاس پذیر است.

عملکرد

آنها اندازه کتابخانه (در کیلوبایت) و تأخیر فرآیند زمان اجرا را در نظر گرفتند. اکثر کاربران میترا توکوپدیا دارای دستگاه های متوسط ​​تا پایین با سرعت اینترنت و اتصال متوسط ​​هستند. بنابراین، عملکرد از نظر دانلود و زمان اجرا (یعنی اینکه مدل با چه سرعتی می تواند خروجی تولید کند) اولویت اصلی برای برآوردن نیازهای خاص آنها و تضمین تجربه کاربری عالی است.

ملاحظات دیگر

انطباق با مقررات: آنها باید اطمینان حاصل می کردند که کتابخانه انتخاب شده با قوانین مربوط به حفاظت از داده ها و حریم خصوصی مطابقت دارد.

مجموعه مهارت: آنها تخصص و مجموعه مهارت تیم خود را ارزیابی کردند. برخی از چارچوب ها و کتابخانه های ML ممکن است به زبان های برنامه نویسی خاص یا تخصص در یک زمینه خاص نیاز داشته باشند. با در نظر گرفتن این عوامل، آنها هنگام انتخاب مدل مناسب برای پروژه یادگیری ماشین خود تصمیم آگاهانه ای گرفتند.

فناوری انتخاب شده است

TensorFlow.js پس از در نظر گرفتن این عوامل نیازهای آنها را برآورده کرد. این می تواند به طور کامل روی دستگاه با استفاده از WebGL Backend خود برای استفاده از GPU دستگاه اجرا شود. اجرای یک مدل روی دستگاه به دلیل کاهش تاخیر سرور، بازخورد سریع‌تری را به کاربر ممکن می‌کند و هزینه محاسبه سرور را کاهش می‌دهد. در مقاله مزایا و محدودیت های ML روی دستگاه، اطلاعات بیشتری درباره ML روی دستگاه بخوانید.

"TensorFlow.js یک کتابخانه یادگیری ماشین منبع باز از Google است که هدف آن توسعه دهندگان جاوا اسکریپت است که می تواند سمت کلاینت را در مرورگر اجرا کند. این بالغ ترین گزینه برای هوش مصنوعی وب با پشتیبانی جامع اپراتور WebGL، WebAssembly و WebGPU است که می تواند در داخل مورد استفاده قرار گیرد. مرورگر با عملکرد سریع." - چگونه Adobe از Web ML با TensorFlow.js برای بهبود فتوشاپ برای وب استفاده کرد

پیاده سازی فنی

Mitra Tokopedia از MediaPipe و کتابخانه تشخیص چهره TensorFlow استفاده کرد، بسته ای که مدل هایی را برای اجرای تشخیص چهره در زمان واقعی ارائه می دهد. به طور خاص، مدل MediaPipeFaceDetector-TFJS ارائه شده در این کتابخانه که زمان اجرای tfjs را پیاده سازی می کند برای این راه حل استفاده شده است.

قبل از فرو رفتن در پیاده سازی، خلاصه ای از MediaPipe چیست. MediaPipe به شما امکان می دهد راه حل های ML روی دستگاه را در سراسر تلفن همراه (اندروید، iOS)، وب، دسکتاپ، دستگاه های لبه و اینترنت اشیا بسازید و به کار ببرید.

14 راه حل مختلف توسط MediaPipe در زمان نوشتن این پست ارائه شده است. می توانید از یک mediapipe یا runtime tfjs استفاده کنید. زمان اجرا tfjs با جاوا اسکریپت ساخته شده است و یک بسته جاوا اسکریپت را ارائه می دهد که می تواند به صورت خارجی توسط برنامه وب دانلود شود. این با زمان اجرا mediapipe که با C++ ساخته شده و در یک ماژول WebAssembly کامپایل شده است متفاوت است. تفاوت های اصلی عملکرد، اشکال زدایی و بسته بندی است. بسته جاوا اسکریپت را می توان با بسته های کلاسیک مانند بسته وب همراه کرد. در مقابل، ماژول Wasm یک منبع باینری بزرگتر و مجزا است (که با عدم وابستگی به زمان بارگذاری کاهش می یابد) و به یک گردش کار اشکال زدایی Wasm متفاوت نیاز دارد. با این حال، برای کمک به برآوردن الزامات فنی و عملکرد، سریعتر اجرا می شود.

نمودار نحوه عملکرد مدل های MediaPipe و TensorFlow برای زمان های مختلف اجرا با استفاده از FaceDetection به عنوان مثال.
یک تصویر کلی در مورد نحوه عملکرد مدل های MediaPipe و TensorFlow برای زمان های مختلف اجرا با استفاده از FaceDetection به عنوان مثال

با بازگشت به پیاده سازی 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);

نتیجه لیست چهره شامل چهره های شناسایی شده برای هر چهره در تصویر است. اگر مدل نتواند هیچ چهره ای را تشخیص دهد، لیست خالی خواهد بود. برای هر چهره، یک کادر محدود از چهره شناسایی شده، و همچنین آرایه ای از شش نقطه کلیدی برای چهره شناسایی شده است. این شامل ویژگی هایی مانند چشم، بینی و دهان می شود. هر نقطه کلیدی حاوی 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' . همانطور که در ابتدای این پست ذکر شد، فروشنده باید شناسه ملی خود و یک عکس سلفی همراه با شناسه را آپلود کند تا تاییدیه فروشنده تکمیل شود. سپس خروجی مدل برای بررسی معیارهای پذیرش مورد استفاده قرار می گیرد - یعنی مطابقت با شش نقطه کلیدی که قبلا ذکر شد تا به عنوان یک کارت شناسایی معتبر و تصویر سلفی در نظر گرفته شود.

پس از تأیید موفقیت آمیز، اطلاعات فروشنده مربوطه به باطن ارسال می شود. اگر تأیید ناموفق باشد، به فروشنده یک پیام خرابی داده می شود و گزینه ای برای امتحان مجدد داده می شود. هیچ اطلاعاتی به باطن ارسال نخواهد شد.

نمودار صفحه Mitra KYC، مدل TensorFlow.js و سرور در تعامل با یکدیگر.
نحوه تعامل صفحه Mitra KYC، مدل TensorFlow.js و سرور با یکدیگر

ملاحظات عملکرد برای دستگاه های ارزان قیمت

این بسته تنها 24.8 کیلوبایت (مینیفیه شده و gzip شده) است که تاثیر قابل توجهی در زمان دانلود ندارد. با این حال، برای دستگاه های بسیار پایین، پردازش زمان اجرا زمان زیادی را می طلبد. منطق اضافی برای بررسی رم دستگاه و CPU قبل از ارسال دو تصویر به مدل تشخیص چهره یادگیری ماشین اضافه شد.

اگر دستگاه دارای بیش از 4 گیگابایت رم ، اتصال شبکه بیشتر از 4G و یک پردازنده با بیش از 6 هسته باشد ، تصاویر برای تأیید چهره به مدل روی دستگاه منتقل می شوند. اگر این الزامات برآورده نشود ، مدل روی دستگاه از بین می رود و تصاویر با استفاده از یک رویکرد ترکیبی برای تهیه این دستگاه های قدیمی ، مستقیماً به سرور ارسال می شوند. با گذشت زمان ، دستگاه های بیشتری قادر به بارگیری از سرور هستند زیرا سخت افزار همچنان در حال تکامل است.

تاثیر

با توجه به ادغام ML ، توکوپدیا با موفقیت قادر به حل نرخ رد بالا بود و نتایج زیر را دید:

  • میزان رد بیش از 20 ٪ کاهش یافته است.
  • تعداد مصوبات دستی تقریباً 70 ٪ کاهش یافته است.

این نه تنها یک تجربه کاربر نرم و صاف را برای فروشندگان ایجاد کرد بلکه هزینه عملیاتی تیم توکوپدیا را نیز کاهش داد.

نتیجه گیری

به طور کلی ، نتایج این مطالعه موردی نشان داد که برای موارد استفاده صحیح ، راه حل های ML در دستگاه در وب می تواند در بهبود تجربه کاربر و اثربخشی ویژگی ها و همچنین ایجاد صرفه جویی در هزینه و سایر مزایای تجاری ارزشمند باشد.

خود را با استفاده از استودیوی MediaPipe و نمونه کد برای ردیاب Face MediaPipe برای وب ، ویژگی تشخیص چهره MediaPipe را امتحان کنید.

اگر علاقه مند به گسترش قابلیت های برنامه وب خود با ML در دستگاه خود هستید ، منابع زیر را بررسی کنید: