pengantar
Tujuan utamanya adalah untuk mendeteksi wajah dan topeng di browser tanpa menggunakan backend Python. Ini adalah WebApp / SPA sederhana yang hanya berisi kode JS dan dapat mengirim beberapa data ke back end untuk diproses selanjutnya. Tetapi deteksi wajah dan topeng awal dilakukan di sisi browser dan tidak ada implementasi Python yang diperlukan untuk itu.
Saat ini, aplikasi hanya berfungsi di browser Chrome.
Di artikel berikutnya, saya akan menjelaskan lebih banyak detail implementasi teknis berdasarkan penelitian kami.
Ada 2 pendekatan tentang bagaimana Anda dapat menerapkan ini di browser:
Keduanya mendukung backend WASM, WebGL dan CPU. Tetapi kami hanya akan membandingkan WASM dan WebGL, karena kinerja pada CPU sangat rendah dan tidak dapat digunakan dalam implementasi akhir.
TensorFlow.js
Di situs resmi, TensorFlow.js menawarkan beberapa model terlatih dan siap digunakan dengan pasca-pemrosesan yang siap. Untuk mendeteksi wajah secara real time, kami menggunakan model BlazeFace, demo online tersedia di sini .
Informasi lebih lanjut tentang BlazeFace dapat ditemukan di sini .
, , . :
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. , / :
, .
/ .
Dengan interaksi pengguna seperti itu, penundaan antara waktu nyata dan metadata kami di layar akan menjadi 200-300ms. Nilai-nilai tersebut akan dianggap oleh pengguna sistem sebagai penundaan yang tidak kritis.