Einführung
Das Hauptziel besteht darin, Gesicht und Maske im Browser zu erkennen, ohne ein Python-Backend zu verwenden. Dies ist eine einfache WebApp / SPA, die nur JS-Code enthält und einige Daten zur nächsten Verarbeitung an das Back-End senden kann. Die anfängliche Gesichts- und Maskenerkennung erfolgt jedoch auf der Browserseite, und dafür ist keine Python-Implementierung erforderlich.
Derzeit funktioniert die App nur im Chrome-Browser.
Im nächsten Artikel werde ich weitere Details zur technischen Implementierung beschreiben, die auf unserer Forschung basieren.
Es gibt zwei Ansätze, wie Sie dies in einem Browser implementieren können:
Beide unterstützen WASM-, WebGL- und CPU-Backend. Wir werden jedoch nur WASM und WebGL vergleichen, da die Leistung auf der CPU sehr gering ist und nicht in der endgültigen Implementierung verwendet werden kann.
TensorFlow.js
Auf der offiziellen Website bietet TensorFlow.js mehrere geschulte und gebrauchsfertige Modelle mit sofortiger Nachbearbeitung an. Um Gesichter in Echtzeit zu erkennen, haben wir das BlazeFace-Modell verwendet. Eine Online-Demo finden Sie hier .
Weitere Informationen zu BlazeFace finden Sie hier .
, , . :
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. , / :
, .
/ .
Bei einer solchen Benutzerinteraktion beträgt die Verzögerung zwischen Echtzeit und unseren Metadaten auf dem Bildschirm 200 bis 300 ms. Solche Werte werden von Benutzern des Systems als unkritische Verzögerungen betrachtet.