Introducción
El objetivo principal es detectar la cara y la máscara en el navegador sin utilizar un backend de Python. Esta es una aplicación web / SPA simple que contiene solo código JS y puede enviar algunos datos al back-end para el próximo procesamiento. Pero la detección inicial de la cara y la máscara se realiza en el lado del navegador y no se requiere una implementación de Python para eso.
Por el momento, la aplicación solo funciona en el navegador Chrome.
En el próximo artículo, describiré más detalles de implementación técnica basados en nuestra investigación.
Hay 2 enfoques para implementar esto en un navegador:
Ambos admiten WASM, WebGL y CPU backend. Pero solo compararemos WASM y WebGL, ya que el rendimiento en la CPU es muy bajo y no se puede utilizar en la implementación final.
TensorFlow.js
En el sitio web oficial, TensorFlow.js ofrece varios modelos entrenados y listos para usar con posprocesamiento listo. Para detectar rostros en tiempo real, tomamos el modelo BlazeFace, una demostración en línea está disponible aquí .
Puede encontrar más información sobre BlazeFace aquí .
, , . :
WASM ( : 160x120px; : 64x64px)
WebGL ( : 160x120px; : 64x64px)
:
HTML API. . , . .
- , . requestAnimationFrame, 16,6 .
grabFrame() ImageCapture MediaStreamTrack Promise, ImageBitmap.
- . - , .
:
: < 6 fps , 7-12 fps , 13-18 fps , 19+ fps .
:
. , . "" , . - 5-10 , .
- 50.
BlazeFace TFLite Android IOS (~ 50-200 FPS).
( Google ).
BlazeFace 2 :
: 128 x 128px, , .
: 256 x 256px, , .
. , .
, BlazeFace , 128 x 128px. . , , 64 x 64px.
. . 64 x 64px , 32 x 32px .
?
TensorFlow.js , :
BlazeFace . (> 0,9), ( "" ).
BlazeFace , . 1, 1 ; 2 1- , / .
BlazeFace (, , , ). , , .
:
X%.
.
/ JS.
, , : . , , .
TensorFlow.js (<3Mb). , WASM . , .
WASM JS : ~60Kb
OpenCV.js: 1.6Mb
SPA (+TensorFlow.js): ~500Kb
BlazeFace : 466Kb
(TTI) ~3.5Mb JavaScript + JSON 1.5Mb to 6Mb >10 ; TTI - 4-5 .
Web Worker ( OpenCV.js ), 800-900Kb. TTI 7-8 ; <5 .
. . . , .
. , , . .
Web Workers
JS BlazeFace , Web Worker. . UX . - TensorFlow.js OpenCV.js, JS - TensorFlow.js. , , TTI . , FPS . , FPS . ~ 20%. , FPS .
- . , .
, . postMessage, - . - ( 200 ), , ( JS, React.js ).
Web Workers
, - / / . , callback- . , .
: mobileNetVersion=V3 mobileNetVersionMultiplier = 0.75 mobileNetVersionType = float16 thumbnailSize=32px backend = wasm
BlazeFace -.
Web Worker :
, Web Worker , TensorFlow browser.fromPixels Web Worker. , Mac OS ~ 27, - 5. 22 Mac OS 100–300 Web Worker. , .
?
«», , . - ( , , ). «» . FPS, 200–300, . , :
:
, :
:
: > 30fps
+ : 45fps
:
: 2.5fps 12-15fps
+ : 2 12fps
, , 30 .
MobileNetV2 0.35, .
. , uint16 float16, TTI.
WASM WebGL BlazeFace. TensorFlow.js (<3Mb):
WebGL - WASM, WASM ( 3Mb 60 ). GPU WebGL.
TTI WASM WebGL .
TensorFlow.js , WASM SIMD, . , 2–3 WASM. . , . .
~ 3,5Mb JS , 466Kb BlazeFace, 1,1Mb 5,6Mb . TTI > 10 ; - ~ 5.
- OpenCV.js -, TTI .
, . , , . .
, , . . USB , . .
, 4-5 , UX. , / :
, .
/ .
Con tal interacción del usuario, los retrasos entre el tiempo real y nuestros metadatos en la pantalla serán de 200-300ms. Dichos valores serán considerados por los usuarios del sistema como retrasos no críticos.