wxmp tensorflow

wxmp-tensorflow

A solução de engenharia mais recente TensorFlow executada no miniaplicativo WeChat tem as seguintes características

0. Execute balzeface Android √, IOS √
1. Execute marcos faciais Android √, IOS √
2. tfjsPlugin integrado, fácil de usar, sem necessidade de referência secundária√
3. Suporte wasm backend √ O PR enviado ao tfjs foi mesclado
4. Execute posenet (exemplo é mobilenet 0,50 stride16) √
5. tfjs personalizados reduzem o tamanho do pacote exemplo blazeface√
6. Execute a pose de mão √
7. Execute movenet √
8. Execute blazepose-tfjs √

Nota: Paddle.js foi adaptado para miniprogramas Baidu e miniprogramas WeChat, https://github.com/PaddlePaddle/Paddle.js

Dados de desempenho

máquina	Modelo	FPS	Back-end
iPhone 7	BlazeFace	12	WebGL
iPhone 7	BlazeFace	1	WASM
MI 8	BlazeFace	20	WebGL
MI 8	BlazeFace	17	WASM
MI 8	FaceLandMarks	20	WebGL
MI 8	FaceLandMarks	10	WASM
MI 8	PoseNet	20	WebGL
MI 8	PoseNet	5	WASM
MI 8	Pose de mão	14	WebGL
MI 8	Pose de mão	1	WASM
MI 8	MoveNet	14	WebGL
MI 8	MoveNet	2,5	WASM

Nota: WASM é uma versão não SIMD O miniaplicativo Android WeChat executa o SIMD WASM e relata um erro. Embora possa ser executado, há muitos problemas com o WeChat e o IOS. gl pelo menos atende aos padrões e não há problemas de memória.

pergunta

0. A versão assíncrona do ios ficará presa com await async, então será alterada para a versão sincronizada, e outros usos de await async também podem ocorrer (o Promise no IOS é simulado por setTimeout, consulte a situação de suporte do applet JavaScript atualmente ). mais fácil travar a inicialização no iOS
1. wasm é melhor que webgl apenas em telefones celulares Huawei (2,7 resultados de teste)

Experiência de otimização

0. Use FrameAdapter para pular quadros dinamicamente
1. Antes de processar formalmente os dados, pré-aqueça um quadro em branco e compile o shader usado.
2. Use o perfil para gerar tfjs personalizados para otimizar o tamanho do pacote
3. O miniaplicativo cameraFrame do WeChat ArrayBuffer é reutilizado. Talvez após a conclusão da inferência, o conteúdo seja atualizado, então o fundo é desenhado primeiro e, em seguida, o resultado da inferência é desenhado. Outra solução é fazer uma cópia ao obter o quadro da câmera. 0~5ms para iPhone7, principalmente 1ms)

PENDÊNCIA

0. Resultado: o embelezamento da IU concluído mostra a exibição normal
1. face-api.js
2. o aquecimento é generalizado, o aquecimento é feito com base no registradorKernel

correr

 > pnpm i / npm i / yarn
> npm run dev
# 使用小程序开发工具打开，替换appid为测试appid，不校验域名

# 使用custom tfjs编译，例子是仅仅blazeface可用tf + webgl backend 小程序包从 985KB下降到534KB (js大概下降234KB)
> npm run make-custom
> npm run build-custom

Use custom_tfjs para otimizar ainda mais o tamanho do pacote

Consulte

0. [962K -> 347K] TensorflowJS TreeShaking com base nos resultados do tempo de execução
1. https://github.com/mattsoulanille/tfjs_custom_module_demo
2. https://github.com/deepkolos/tfjs-treeshaking-test

tfjs-models assíncrono para método de sincronização

Você só precisa alterar o método assíncrono de leitura de dados, como Tensor.array() para Tensor.arraySync() ou Tensor.buffer() para Tensor.bufferSync() e, em seguida, alterar async e await , Promise.all e outras palavras-chave Basta removê-las

patrocinador

Se o projeto for útil para você ou tiver necessidades de adaptação, fique à vontade para dar gorjeta.