WeChat MiniProgram AR TFJS

README Cina

Diperbarui

Tanggal	Memperbarui
05-01-2022	Baru: Menambahkan demo klasifikasi gambar menggunakan tfjs.
08-09-2021	Baru: Menambahkan demo pose tangan menggunakan tfjs. Lambat dan sekitar 500 ms per deteksi.
13-03-2021	Perbaikan Bug: 1. Gambar masker wajah 2d tidak ditampilkan di Android WeChat. 2. Saat memasuki demo UI untuk kedua kalinya, model 3D tidak ditampilkan.
11-03-2021	Baru: AR Wajah menggunakan "deteksi-landmark-wajah" dan "TensorFlow.js". Pembaruan: Ganti "face-api.js" dengan "face-landmarks-detection", kode "face-api.js" dihapus.
07-09-2019	Baru: Deteksi dan pengenalan wajah dengan "face-api.js".

Pengenalan tentang program Mini WeChat AR

TensorFlow.js adalah perpustakaan JavaScript untuk pembelajaran mesin. Ada plugin program WeChat Mini untuk TensorFlow.js.

tfjs-wechat

Kita dapat membuat efek AR dengan TensorFlow.js. Library "deteksi-landmark-wajah" didasarkan pada TensorFlow.js.

Pustaka "deteksi-landmark-wajah" menawarkan deteksi wajah di lingkungan browser.

deteksi wajah-landmark

Mengapa memilih "deteksi wajah-tengara"?

Karena saya tidak menemukan model kecil TensorFlow.js untuk mendeteksi wajah sampai saya menemukan perpustakaan "deteksi-landmark-wajah".

Demo ini menunjukkan wajah AR.

Halaman Indeks program Mini WeChat

Deteksi Wajah dan Masker 3D

Gunakan demo untuk memindai wajah. Harapkan efeknya di bawah ini.

Efek penerjemahan dan penskalaan.

Efek berputar.

Deteksi Wajah dan Masker 2D

Gunakan demo untuk memindai wajah. Harapkan efeknya di bawah ini.

Efek penerjemahan dan penskalaan.

Efek berputar.

Pose Tangan dan Masker 2D

Gunakan demo untuk memindai tangan. Harapkan efeknya di bawah ini.

Klasifikasi Gambar

Gunakan demo untuk memindai cangkir. Harapkan efeknya di bawah ini.

Bagaimana cara membangun

Program Mini WeChat menyertakan beberapa paket npm. Kami menginstal dan mengkompilasi paket npm.

langkah 1: jalankan "npm install"

langkah 2: jalankan "Alat pengembang WeChat -- Menu Alat -- build npm", folder "miniprogram_npm" akan dibuat.

Proyek ini telah menyertakan folder "miniprogram_npm" yang telah dikompilasi sebelumnya.

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

Tetapkan url model "TensorFlow.js".

Anda dapat mencari kata kunci "BLAZEFACE_MODEL_URL" di folder "blazeface". Hasil pencarian diubah.

Berkas: /miniprogram_npm/@tensorflow-models/blazeface

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

Anda dapat mencari kata kunci "FACEMESH_GRAPHMODEL_PATH" di folder "deteksi-landmark-wajah".

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

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

Anda dapat mencari kata kunci yaitu "HANDDETECT_MODEL_PATH" dan "HANDPOSE_MODEL_PATH" di folder "handpose".

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

Anda dapat mencari kata kunci yaitu "mobilenet_model_path" di file "mobilenet.js".

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

Tetapkan url model 3D

Anda dapat mengganti url default model gltf dengan topeng 3D.

File: /package_face_3d_mask/pages/photo/photo.js dan /package_face_3d_mask/pagescamera/camera.js

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

Atur url gambar sprite 2D

Anda dapat mengganti url default gambar dengan topeng 2D.

File: /package_face_2d_mask/pages/photo/photo.js dan /package_face_2d_mask/pages/camera/camera.js

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

Cara meletakkan model atau gambar 3D pada posisi lain

Ini adalah peta dari 486 titik kunci sebuah wajah.

486 titik kunci Peta

Misalnya angka 168, angka 122, dan angka 351 yang merupakan bagian tengah mata.

File: /package_face_3d_mask/utils/modelBusiness.js

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

Misalnya angka 0, angka 61, dan angka 291 adalah mulutnya.

File: /package_face_2d_mask/utils/modelBusiness.js

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

Peta Pose Tangan

Landmark dari pose tangan.

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