الصفحة الرئيسية>المتعلقة بالبرمجة>كود الذكاء الاصطناعي
تنزيل

التمهيدي الصيني

تم التحديث

تاريخ تحديث
2022-01-05 جديد: تمت إضافة عرض توضيحي لتصنيف الصور باستخدام tfjs.
2021-09-08 جديد: تمت إضافة عرض توضيحي لوضعية اليد باستخدام tfjs. إنه بطيء وحوالي 500 مللي ثانية لكل اكتشاف.
2021-03-13 تم إصلاح الخلل: 1. لا يتم عرض صورة قناع الوجه ثنائي الأبعاد على Android WeChat. 2. عند الدخول إلى واجهة المستخدم التجريبية للمرة الثانية، لا يتم عرض النموذج ثلاثي الأبعاد.
2021-03-11 جديد: Face AR يستخدم "اكتشاف معالم الوجه" و"TensorFlow.js". التحديث: استبدل "face-api.js" بـ "face-landmarks-detection"، وستتم إزالة رموز "face-api.js".
2019-09-07 جديد: اكتشاف الوجه والتعرف عليه باستخدام "face-api.js".

مقدمة عن برنامج WeChat Mini AR

TensorFlow.js هي مكتبة جافا سكريبت للتعلم الآلي. يوجد مكون إضافي لبرنامج WeChat Mini لـ TensorFlow.js.

tfjs-wechat

يمكننا إنشاء تأثيرات الواقع المعزز باستخدام TensorFlow.js. تعتمد مكتبة "الكشف عن معالم الوجه" على TensorFlow.js.

توفر مكتبة "الكشف عن معالم الوجه" إمكانية اكتشاف الوجه في بيئة المتصفح.

كشف معالم الوجه

لماذا تختار "كشف معالم الوجه"؟

لأنني لم أجد نموذجًا صغيرًا من TensorFlow.js لاكتشاف الوجه حتى وجدت مكتبة "اكتشاف معالم الوجه".

يوضح هذا العرض التوضيحي وجه AR.

صفحة الفهرس لبرنامج WeChat Mini

الصورة الرمزية

كشف الوجه والقناع ثلاثي الأبعاد

استخدم العرض التوضيحي لمسح الوجه. توقع التأثير أدناه.

الصورة الرمزية

تأثير الترجمة والقياس.

الصورة الرمزية

تأثير الدوران.

الصورة الرمزية

كشف الوجه وقناع ثنائي الأبعاد

استخدم العرض التوضيحي لمسح الوجه. توقع التأثير أدناه.

الصورة الرمزية

تأثير الترجمة والقياس.

الصورة الرمزية

تأثير الدوران.

الصورة الرمزية

وضعية اليد وقناع ثنائي الأبعاد

استخدم العرض التوضيحي لمسح اليد. توقع التأثير أدناه.

الصورة الرمزية

تصنيف الصورة

استخدم العرض التوضيحي لمسح كوب. توقع التأثير أدناه.

الصورة الرمزية

كيفية البناء

يتضمن برنامج WeChat Mini بعض حزم npm. نقوم بتثبيت وتجميع حزم npm.

الخطوة 1: تشغيل "تثبيت npm"

الخطوة 2: قم بتشغيل "أداة مطور WeChat - قائمة الأدوات - بناء npm"، سيتم إنشاء مجلد "miniprogram_npm".

يحتوي المشروع على مجلد "miniprogram_npm" تم ترجمته مسبقًا.

الملف: /package.json 

  "dependencies" : {
    "@tensorflow-models/face-landmarks-detection" : "0.0.3" ,
    "@tensorflow-models/handpose" : "0.0.6" ,
    "@tensorflow/tfjs-backend-webgl" : "2.1.0" ,
    "@tensorflow/tfjs-converter" : "2.1.0" ,
    "@tensorflow/tfjs-core" : "2.1.0" ,
    "abab" : "2.0.0" ,
    "base64-js" : "1.3.1" ,
    "fetch-wechat" : "0.0.3" ,
    "text-encoder" : "0.0.4" ,
    "threejs-miniprogram" : "0.0.2"
  }

قم بتعيين عنوان URL لنموذج "TensorFlow.js".

يمكنك البحث عن كلمة رئيسية "BLAZEFACE_MODEL_URL" في مجلد "blazeface". تم تعديل نتيجة البحث.

الملف: /miniprogram_npm/@tensorflow-models/blazeface 

 // modified
var BLAZEFACE_MODEL_URL = 'https://m.sanyue.red/demo/tfjs/blazeface_v1' ;

يمكنك البحث عن الكلمة الأساسية "FACEMESH_GRAPHMODEL_PATH" في مجلد "face-landmarks-detection".

الملف: /miniprogram_npm/@tensorflow-models/face-landmarks-detection 

 // modified
var FACEMESH_GRAPHMODEL_PATH = 'https://m.sanyue.red/demo/tfjs/facemesh_v1' ;

يمكنك البحث عن الكلمات الرئيسية "HANDDETECT_MODEL_PATH" و"HANDPOSE_MODEL_PATH" في المجلد "handpose".

الملف: /miniprogram_npm/@tensorflow-models/handpose 

 // modified
HANDDETECT_MODEL_PATH = 'https://m.sanyue.red/demo/tfjs/handdetector_v1' ;

// modified
HANDPOSE_MODEL_PATH = 'https://m.sanyue.red/demo/tfjs/handskeleton_v1' ;

يمكنك البحث عن الكلمات الرئيسية التي تمثل "mobilenet_model_path" في الملف "mobilenet.js".

الملف: /package_mobilenet/utils/mobilenet.js 

 // mobilenet_model_path
  '2.00' : {
    '0.50' : {
      url : 'https://m.sanyue.red/demo/tfjs/mobilenet_v2_050_224' ,
      inputRange : [ 0 , 1 ]
    } ,

قم بتعيين عنوان URL للنموذج ثلاثي الأبعاد

يمكنك استبدال عنوان URL الافتراضي لنموذج gltf للقناع ثلاثي الأبعاد.

الملف: /package_face_3d_mask/pages/photo/photo.js و /package_face_3d_mask/pagescamera/camera.js 

 // a url of gltf model
const modelUrl = 'https://m.sanyue.red/demo/gltf/sunglass.glb' ; ;

قم بتعيين عنوان URL لصورة الكائنات ثنائية الأبعاد

يمكنك استبدال عنوان URL الافتراضي للصورة للقناع ثنائي الأبعاد.

الملف: /package_face_2d_mask/pages/photo/photo.js و /package_face_2d_mask/pages/camera/camera.js 

 // a url of sprite image
const modelUrl = '../../utils/cat_beard.png' ;

كيفية وضع نموذج ثلاثي الأبعاد أو صورة على موضع آخر

هذه خريطة لـ 486 نقطة رئيسية للوجه.

خريطة 486 نقطة رئيسية

على سبيل المثال، الرقم 168 والرقم 122 والرقم 351 يقع في منتصف العينين.

الملف: /package_face_3d_mask/utils/modelBusiness.js 

 // index of the track points of the face
const trackPointA = 168 ;
const trackPointB = 122 ;
const trackPointC = 351 ;

على سبيل المثال، الرقم 0 والرقم 61 والرقم 291 هو الفم.

الملف: /package_face_2d_mask/utils/modelBusiness.js 

 // index of the track points of the face
const trackPointA = 0 ;
const trackPointB = 61 ;
const trackPointC = 291 ;

خريطة وضع اليد

معالم وضعية اليد.

الصورة الرمزية

    // the "predictions" is an array of objects describing each detected hand.
    [
      {
        handInViewConfidence : 1 ,
        boundingBox : {
          topLeft : [ 162.91 , - 17.42 ] ,
          bottomRight : [ 548.56 , 368.23 ] ,
        } ,
        landmarks : [
          [ 472.52 , 298.59 , 0.00 ] ,
          [ 412.80 , 315.64 , - 6.18 ] ,
          // etc.
        ] ,
        annotations : {
          thumb : [
            [ 412.80 , 315.64 , - 6.18 ]
            [ 350.02 , 298.38 , - 7.14 ] ,
            // etc.
          ] ,
          // etc.
        }
      }
    ]
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل