WeChat MiniProgram AR TFJS

Китайский README

Обновлено

Дата	Обновлять
05.01.2022	Новое: добавлена ​​демонстрация классификации изображений с использованием tfjs.
2021-09-08	Новое: добавлена ​​демонстрация позы рук с использованием tfjs. Это медленно и занимает около 500 мс на одно обнаружение.
2021-03-13	Исправлена ​​ошибка: 1. Изображение 2D-маски лица не отображается в Android WeChat. 2. При повторном входе в демонстрационный интерфейс 3D-модель не отображается.
11.03.2021	Новое: Face AR с использованием «распознавания ориентиров лица» и «TensorFlow.js». Обновление: замените «face-api.js» на «face-landmarks-detection», коды «face-api.js» удалены.
07.09.2019	Новое: обнаружение и распознавание лиц с помощью «face-api.js».

Введение в мини-программу WeChat AR

TensorFlow.js — это библиотека JavaScript для машинного обучения. Для TensorFlow.js существует плагин WeChat Mini-program.

tfjs-wechat

Мы можем создавать эффекты AR с помощью TensorFlow.js. Библиотека «обнаружения ориентиров лица» основана на TensorFlow.js.

Библиотека face-landmarks-detection предлагает распознавание лиц в среде браузера.

обнаружение ориентиров лица

Почему стоит выбрать «обнаружение ориентиров лица»?

Потому что я не нашел крошечной модели TensorFlow.js для обнаружения лиц, пока не нашел библиотеку «face-landmarks-detection».

Эта демонстрация демонстрирует лицо AR.

Индексная страница мини-программы WeChat

Обнаружение лиц и 3D-маска

Используйте демо-версию для сканирования лица. Ожидайте эффекта ниже.

Эффект перевода и масштабирования.

Эффект вращения.

Обнаружение лиц и 2D-маска

Используйте демо-версию для сканирования лица. Ожидайте эффекта ниже.

Эффект перевода и масштабирования.

Эффект вращения.

Поза руки и 2D-маска

Используйте демо-версию для сканирования руки. Ожидайте эффекта ниже.

Классифицировать изображения

Используйте демо-версию для сканирования чашки. Ожидайте эффекта ниже.

Как построить

Мини-программа WeChat включает в себя несколько пакетов npm. Устанавливаем и компилируем пакеты npm.

шаг 1: запустите «npm install»

Шаг 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» в папке «обнаружение ориентиров лица».

Файл: /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 3D-модели

Вы можете заменить URL-адрес модели gltf по умолчанию на 3D-маску.

Файл: /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-адрес 2D-изображения спрайта

Вы можете заменить URL-адрес изображения по умолчанию на 2D-маску.

Файл: /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' ; 

Как переместить 3D-модель или изображение в другое положение

Это карта 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.
        }
      }
    ]