WeChat MiniProgram AR TFJS

README chinois

Mis à jour

Date	Mise à jour
2022-01-05	Nouveau : ajout d'une démo de classification d'images à l'aide de tfjs.
2021-09-08	Nouveau : Ajout d'une démo de pose de main utilisant tfjs. C'est lent et environ 500 ms par détection.
2021-03-13	Bug corrigé : 1. L'image du masque facial 2D ne s'affiche pas sur Android WeChat. 2. Lorsque vous entrez dans l'interface utilisateur de démonstration pour la deuxième fois, le modèle 3D ne s'affiche pas.
2021-03-11	Nouveau : Un Face AR utilisant "face-landmarks-detection" et "TensorFlow.js". Mise à jour : remplacez "face-api.js" par "face-landmarks-detection", les codes de "face-api.js" sont supprimés.
2019-09-07	Nouveau : Une détection et reconnaissance de visage avec "face-api.js".

Introduction sur le mini-programme WeChat AR

TensorFlow.js est une bibliothèque JavaScript pour l'apprentissage automatique. Il existe un plugin WeChat Mini-program pour TensorFlow.js.

tfjs-wechat

Nous pouvons créer des effets AR avec TensorFlow.js. Une bibliothèque "face-landmarks-detection" est basée sur TensorFlow.js.

La bibliothèque "face-landmarks-detection" propose une détection de visage dans l'environnement du navigateur.

détection de visages et de points de repère

Pourquoi choisir la « détection de visages-repères » ?

Parce que je n'ai pas trouvé de petit modèle de TensorFlow.js pour la détection de visage jusqu'à ce que je trouve la bibliothèque "face-landmarks-detection".

Cette démo montre un visage AR.

Page d'index du mini-programme WeChat

Détection de visage et masque 3D

Utilisez la démo pour numériser un visage. Attendez-vous à un effet ci-dessous.

Un effet de traduction et de mise à l’échelle.

Un effet de rotation.

Détection de visage et masque 2D

Utilisez la démo pour numériser un visage. Attendez-vous à un effet ci-dessous.

Un effet de traduction et de mise à l’échelle.

Un effet de rotation.

Pose de la main et masque 2D

Utilisez la démo pour scanner une main. Attendez-vous à un effet ci-dessous.

Classement d'images

Utilisez la démo pour numériser une tasse. Attendez-vous à un effet ci-dessous.

Comment construire

Le mini-programme WeChat comprend certains packages npm. Nous installons et compilons les packages npm.

étape 1 : exécutez "npm install"

étape 2 : exécutez « Outil de développement WeChat -- Menu Outils -- build npm », un dossier « miniprogram_npm » sera créé.

Le projet a inclus un dossier "miniprogram_npm" précompilé.

Fichier : /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"
  } 

Définir l'URL du modèle "TensorFlow.js"

Vous pouvez rechercher un mot-clé "BLAZEFACE_MODEL_URL" dans le dossier "blazeface". Le résultat de la recherche est modifié.

Fichier : /miniprogram_npm/@tensorflow-models/blazeface

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

Vous pouvez rechercher un mot-clé "FACEMESH_GRAPHMODEL_PATH" dans le dossier "face-landmarks-detection".

Fichier : /miniprogram_npm/@tensorflow-models/face-landmarks-detection

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

Vous pouvez rechercher des mots-clés "HANDDETECT_MODEL_PATH" et "HANDPOSE_MODEL_PATH" dans le dossier "handpose".

Fichier : /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' ;

Vous pouvez rechercher des mots-clés « mobilenet_model_path » dans le fichier « mobilenet.js ».

Fichier : /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 ]
    } , 

Définir l'URL du modèle 3D

Vous pouvez remplacer l'URL par défaut d'un modèle gltf pour un masque 3D.

Fichier : /package_face_3d_mask/pages/photo/photo.js et /package_face_3d_mask/pagescamera/camera.js

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

Définir l'URL de l'image du sprite 2D

Vous pouvez remplacer l'URL par défaut d'une image par un masque 2D.

Fichier : /package_face_2d_mask/pages/photo/photo.js et /package_face_2d_mask/pages/camera/camera.js

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

Comment mettre un modèle 3D ou une image sur une autre position

Il s'agit d'une carte des 486 points clés d'un visage.

486 points clés Carte

Par exemple, un numéro 168, un numéro 122 et un numéro 351 sont au milieu des yeux.

Fichier : /package_face_3d_mask/utils/modelBusiness.js

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

Par exemple, un chiffre 0, un chiffre 61 et un chiffre 291 sont la bouche.

Fichier : /package_face_2d_mask/utils/modelBusiness.js

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

Carte de pose de la main

Les repères de la main posent.

    // 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.
        }
      }
    ]