LỜI MỞ ĐẦU .vn



-241935-22479000??I H?C ?? N?NGTR??NG ??I H?C C?NG NGH? TH?NG TIN V? TRUY?N TH?NG VI?T - H?N?? ?N C? S? 5WEBSITE NH?N DI?N KHU?N M?T S? D?NG TH? VI?N FACE-API.JSGVHD: TS NGUY?N THANHSVTH: PHAN V?N TR? V? TH? KIM OANHL?P: 18IT5?à N?ng, tháng 6 n?m 2021??I H?C ?? N?NGTR??NG ??I H?C C?NG NGH? TH?NG TIN V? TRUY?N TH?NG VI?T - H?N?? ?N C? S? 5WEBSITE NH?N DI?N KHU?N M?T S? D?NG TH? VI?N FACE-API.JSGVHD: TS NGUY?N THANHSVTH: PHAN V?N TR? V? TH? KIM OANHL?P: 18IT5?à N?ng, tháng 6 n?m 2021NH?N X?T, ??NH GI?(C?a gi?ng viên h??ng d?n)K? tênL?I C?M ?NTrong th?i gian làm ?? án m?n h?c, chúng em ?? nh?n ???c nhi?u s? giúp ??, ?óng góp ? ki?n và ch? b?o nhi?t tình c?a th?y c?, gia ?ình và b?n bè. Chúng em xin g?i l?i c?m ?n ch?n thành ??n TS. Nguy?n Thanh ?? t?n tình h??ng d?n, ch? b?o chúng em trong su?t quá trình làm ?? án. Chúng em c?ng xin ch?n thành c?m ?n các th?y c? giáo trong tr??ng ?H C?ng ngh? th?ng tin và truy?n th?ng Vi?t Hàn ?? d?y d? cho chúng em ki?n th?c v? các m?n ??i c??ng c?ng nh? các m?n chuyên ngành, giúp chúng em có ???c c? s? l? thuy?t v?ng vàng và t?o ?i?u ki?n giúp ?? chúng em trong su?t quá trình h?c t?p. Cu?i cùng, chúng em xin ch?n thành c?m ?n gia ?ình và b?n bè, ?? lu?n t?o ?i?u ki?n, quan t?m, giúp ??, ??ng viên chúng em trong su?t quá trình h?c t?p và hoàn thành ?? án m?n h?c.Em xin ch?n thành c?m ?n!M?C L?C TOC \o "1-3" \h \z \u L?I M? ??U PAGEREF _Toc72499471 \h 6CH??NG I: T?NG QUAN V? ?? T?I PAGEREF _Toc72499472 \h 71.1 T?ng quan v? nh?n di?n khu?n m?t PAGEREF _Toc72499473 \h 71.2 ?u ?i?m và nh??c ?i?m PAGEREF _Toc72499474 \h 71.2.1 ?u ?i?m PAGEREF _Toc72499475 \h 71.2.2 Nh??c ?i?m PAGEREF _Toc72499476 \h 81.3 Gi?i quy?t v?n ?? PAGEREF _Toc72499477 \h 81.3.1 Face-API-JS PAGEREF _Toc72499478 \h 81.3.2 Framework ReactJS PAGEREF _Toc72499479 \h 81.3.3 Visual Studio Code PAGEREF _Toc72499480 \h 9CH??NG II: NH?N DI?N KHU?N M?T B?NG FACE-API-JS PAGEREF _Toc72499481 \h 102.1 M? hình nh?n di?n khu?n m?t PAGEREF _Toc72499482 \h 102.1.1 SSD Mobilenet V1 PAGEREF _Toc72499483 \h 102.1.2 Máy dò khu?n m?t tí hon PAGEREF _Toc72499484 \h 102.1.3 MTCNN PAGEREF _Toc72499485 \h 102.1.4 68 M? hình phát hi?n m?c khu?n m?t PAGEREF _Toc72499486 \h 112.1.5 M? hình nh?n d?ng khu?n m?t PAGEREF _Toc72499487 \h 122.1.6 M? hình nh?n d?ng bi?u c?m khu?n m?t PAGEREF _Toc72499488 \h 132.2 S? d?ng PAGEREF _Toc72499489 \h 142.3 API c?p cao PAGEREF _Toc72499490 \h 152.3.1 Phát hi?n khu?n m?t PAGEREF _Toc72499491 \h 162.3.2 Phát hi?n 68 ?i?m m?c trên khu?n m?t PAGEREF _Toc72499492 \h 172.3.3 Máy tính m? t? khu?n m?t PAGEREF _Toc72499493 \h 172.3.4 Nh?n d?ng các bi?u hi?n trên khu?n m?t PAGEREF _Toc72499494 \h 182.3.5 Thành ph?n c?a Tasks PAGEREF _Toc72499495 \h 182.3.6 Nh?n d?ng khu?n m?t b?ng cách so kh?p các b? m? t? PAGEREF _Toc72499496 \h 192.4 Hi?n th? k?t qu? phát hi?n PAGEREF _Toc72499497 \h 212.5 Tùy ch?n nh?n di?n khu?n m?t PAGEREF _Toc72499498 \h 222.5.1 SsdMobilenetv1Options PAGEREF _Toc72499499 \h 222.5.2 TinyFaceDetectorOptions PAGEREF _Toc72499500 \h 232.5.3 MtcnnOptions PAGEREF _Toc72499501 \h 23CH??NG III: TRI?N KHAI ?? T?I PAGEREF _Toc72499502 \h 253.1 Vi?t ch?c n?ng cho ch??ng trình PAGEREF _Toc72499503 \h 253.2 K?t qu? ??t ???c PAGEREF _Toc72499504 \h 31CH??NG IV: K?T LU?N V? H??NG PH?T TRI?N PAGEREF _Toc72499505 \h 354.1 K?t lu?n PAGEREF _Toc72499506 \h 354.2 H??ng phát tri?n PAGEREF _Toc72499507 \h 35T?I LI?U THAM KH?O PAGEREF _Toc72499508 \h 36L?I M? ??UKhu?n m?t ?óng vai trò quan tr?ng trong quá trình giao ti?p gi?a ng??i v?i ng??i, và c?ng mang m?t l??ng th?ng tin giàu có, ch?ng h?n có th? xác ??nh gi?i tính, tu?i tác, tr?ng thái c?m xúc c?a ng??i ?ó,… h?n n?a kh?o sát chuy?n ??ng c?a các ???ng nét trên khu?n m?t có th? bi?t ???c ng??i ?ó ?ang mu?n nói gì. Trong h? th?ng nh?n d?ng ng??i thì quá trình nh?n d?ng khu?n m?t ???c ?ánh giá là b??c khó kh?n và quan tr?ng nh?t so v?i các b??c còn l?i c?a h? th?ng. Do ?ó, nh?n d?ng khu?n m?t là ?i?u quan tr?ng và c?n thi?t.Nh?n d?ng khu?n m?t ng??i là m?t c?ng ngh? ???c ?ng d?ng r?ng r?i trong ??i s?ng h?ng ngày c?a con ng??i nh? các h? th?ng giám sát, qu?n lí vào ra, tìm ki?m th?ng tin ng??i n?i ti?ng,… có r?t nhi?u ph??ng pháp nh?n d?ng khu?n m?t ?? n?ng cao hi?u su?t tuy nhiên dù ít hay nhi?u nh?ng ph??ng pháp này ?ang v?p ph?i nh?ng th? thách v? ?? sáng, h??ng nghiên, kích th??c ?nh, hay ?nh h??ng c?a tham s? m?i tr??ng.Cùng v?i s? phát tri?n c?a x? h?i, v?n ?? an ninh, b?o m?t ?ang ???c yêu c?u kh?t khe t?i m?i qu?c gia trên th? gi?i. Các h? th?ng nh?n d?ng con ng??i, ?? v?t… ???c ra ??i và phát tri?n v?i ?? tin c?y ngày càng cao. V?i cách ti?p c?n ??i t??ng nh?n d?ng theo ph??ng pháp này, chúng ta có th? thu nh?p ???c nhi?u th?ng tin t? ??i t??ng h?n, mà kh?ng c?n tác ??ng nhi?u ??n ??i t??ng c?ng v?n ??m b?o tính chính xác, an toàn, thu?n ti?n. Trong ph?m vi bài báo cáo này, chúng em ch?n ?? tài “Website ?ng d?ng nh?n di?n khu?n m?t b?ng face-api.js” làm ?? án m?n h?c. Cu?i cùng, m?c dù ?? c? g?ng r?t nhi?u nh?ng do th?i gian có h?n, kh? n?ng d?ch và hi?u tài li?u ch?a t?t nên n?i dung ?? án này kh?ng th? tránh kh?i nh?ng thi?u sót, r?t mong ???c s? ch? b?o, góp ? c?a các th?y c? và các b?n.CH??NG I: T?NG QUAN V? ?? T?I1.1 T?ng quan v? nh?n di?n khu?n m?tH? th?ng nh?n d?ng khu?n m?t là m?t ?ng d?ng máy tính t? ??ng xác ??nh ho?c nh?n d?ng m?t ng??i nào ?ó t? m?t b?c hình ?nh k? thu?t s? ho?c m?t khung hình video t? m?t ngu?n video. M?t trong nh?ng cách ?? th?c hi?n ?i?u này là so sánh các ??c ?i?m khu?n m?t ch?n tr??c t? hình ?nh và m?t c? s? d? li?u v? khu?n m?t. H? th?ng này th??ng ???c s? d?ng trong các h? th?ng an ninh và có th? ???c so sánh v?i các d?ng sinh tr?c h?c khác nh? các h? th?ng nh?n d?ng v?n tay hay tròng m?t.M?t s? thu?t toán nh?n d?ng khu?n m?t xác ??nh các ??c ?i?m khu?n m?t b?ng cách trích xu?t các ranh gi?i, ho?c ??c ?i?m, t? m?t hình ?nh khu?n m?t c?a ??i t??ng. Ví d?, m?t thu?t toán có th? ph?n tích các v? trí t??ng ??i, kích th??c, và/ho?c hình d?ng c?a m?t, m?i, gò má, và c?m. Nh?ng tính n?ng này sau ?ó ???c s? d?ng ?? tìm ki?m các hình ?nh khác v?i các tính n?ng phù h?p. Các thu?t toán bình th??ng hóa m?t b? s?u t?p các hình ?nh khu?n m?t và sau ?ó nén d? li?u khu?n m?t, ch? l?u d? li?u hình ?nh nào là h?u ích cho vi?c nh?n d?ng khu?n m?t. M?t hình ?nh m?u sau ?ó ???c so sánh v?i các d? li?u khu?n m?t. M?t trong nh?ng h? th?ng thành c?ng s?m nh?t d?a trên các k? thu?t phù h?p v?i m?u áp d?ng cho m?t t?p h?p các ??c ?i?m khu?n m?t n?i b?t, cung c?p m?t d?ng ??i di?n c?a khu?n m?t ???c nén. Các thu?t toán nh?n d?ng có th? ???c chia thành hai h??ng chính, là hình h?c, ?ó là nhìn vào tính n?ng ph?n bi?t, ho?c tr?c quang (?o sáng), là s? d?ng ph??ng pháp th?ng kê ?? 'ch?ng c?t' m?t hình ?nh thành nh?ng giá tr? và so sánh các giá tr? v?i các m?u ?? lo?i b? chênh l?ch.1.2 ?u ?i?m và nh??c ?i?m1.2.1 ?u ?i?mKh?ng c?n ph?i tr?c ti?p ti?p xúc v?i thi?t b? ?? xác th?c (các k? thu?t xác th?c sinh tr?c h?c d?a trên ti?p xúc khác nh? máy quét d?u v?n tay, có th? kh?ng ho?t ??ng chính xác n?u có v?t b?n trên tay c?a m?t ng??i). C?i thi?n m?c ?? b?o m?t. Yêu c?u x? l? ít h?n so v?i các k? thu?t xác th?c sinh tr?c h?c khác. D? dàng tích h?p v?i các tính n?ng b?o m?t hi?n có. Có th? ???c s? d?ng ?? giúp t? ??ng hóa vi?c xác th?c.1.2.2 Nh??c ?i?m?? có ???c hình ?nh ??i chi?u, c?ng ngh? nh?n d?ng khu?n m?t yêu c?u khách hàng ph?i quay ít nh?t 35 ?? v? phía camera và kh?ng s? d?ng kh?u trang, m?, nón.... Yêu c?u này r?t khó, b?i chúng ta kh?ng th? b?t ép khách hàng ph?i làm theo yêu c?u, ?i?u này s? khi?n h? c?m th?y khó ch?u. Chính vì v?y, r?t khó ?? cam k?t ?? chính xác v? th?ng tin khi s? d?ng camera ??m ng??i.1.3 Gi?i quy?t v?n ???? gi?i quy?t bài toán nh?n d?ng khu?n m?t trong ?? án này chúng em s? d?ng th? vi?n face-api-js trên ph?n m?m Visual Studio Code.1.3.1 Face-API-JS Face-api.js là m?t JavaScript API dùng ?? xác ??nh và nh?n di?n g??ng m?t trên browser và Nodejs server v?i tensorflow.js. Các tính n?ng chính bao g?m: Phát hi?n khu?n m?t Xác ??nh Face Landmark Nh?n di?n g??ng m?tNh?n di?n c?m xúc c?a g??ng m?t D? ?oán tu?i và nh?n di?n gi?i tính1.3.2 Framework ReactJSReact?là th? vi?n?javascript?ph? bi?n nh?t ?? x?y d?ng giao di?n ng??i dùng (UI). Nó cho t?c ?? ph?n h?i tuy?t v?i khi user nh?p li?u b?ng cách s? d?ng ph??ng pháp m?i ?? render trang ponents c?a c?ng c? này ???c phát tri?n b?i?Facebook. Nó ???c ra m?t nh? m?t c?ng c? JavaScript m? ngu?n m? vào n?m 2013. Hi?n t?i, nó ?? ?i tr??c các ??i th? chính nh??Angular và?Bootstrap, hai th? vi?n JavaScript bán ch?y nh?t th?i b?y gi?.T?t c? nh?ng tính n?ng hay s?c m?nh c?a ReactJS th??ng xu?t phát t? vi?c t?p trung vào các ph?n riêng l? chính vì ?i?m này nên khi làm vi?c trên web thay vì nó s? làm vi?c trên toàn b? ?ng d?ng c?a website thì ReactJS cho phép developer có ch?c n?ng phá v? giao di?n c?a ng??i dùng t? m?t cách ph?c t?p và bi?n nó tr? thành các ph?n ??n gi?n h?n nhi?u l?n có ngh?a là render d? li?u kh?ng ch? ???c th?c hi?n ? v? trí sever mà còn có th? th?c hi?n ? v? trí Client khi s? d?ng ReactJS.1.3.3 Visual Studio CodeVisual Studio Code là m?t trình biên t?p m? ???c phát tri?n b?i Microsoft dành cho Windows, Linux và macOS. Nó h? tr? ch?c n?ng debug, ?i kèm v?i Git, có syntax highlighting, t? hoàn thành m? th?ng minh, snippets, và c?i ti?n m? ngu?n. Visual Studio Code là m?t trình biên t?p m?. Nó h? tr? nhi?u ng?n ng? và ch?c n?ng tùy vào ng?n ng? s? d?ng theo nh? trong b?ng sau. Nhi?u ch?c n?ng c?a Visual Studio Code kh?ng hi?n th? ra trong các menu tùy ch?n hay giao di?n ng??i dùng. Thay vào ?ó, chúng ???c g?i th?ng qua khung nh?p l?nh ho?c qua m?t t?p tin .json (ví d? nh? t?p tin tùy ch?nh c?a ng??i dùng). Khung nh?p l?nh là m?t giao di?n theo dòng l?nh. Tuy nhiên, nó bi?n m?t khi ng??i dùng nh?p b?t c? n?i nào khác, ho?c nh?n t? h?p phím ?? t??ng tác v?i m?t cái gì ?ó ? bên ngoài ?ó. T??ng t? nh? v?y v?i nh?ng dòng l?nh t?n nhi?u th?i gian ?? x? l?. Khi th?c hi?n nh?ng ?i?u trên thì quá trình x? l? dòng l?nh ?ó s? b? h?y.CH??NG II: NH?N DI?N KHU?N M?T B?NG FACE-API-JS2.1 M? hình nh?n di?n khu?n m?t2.1.1 SSD Mobilenet V1?? nh?n di?n khu?n m?t, d? án này tri?n khai m?t ? SSD (Single Shot Multibox Detector) d?a trên MobileNetV1. M?ng th?n kinh s? tính toán v? trí c?a m?i m?t trong m?t hình ?nh và s? tr? v? các h?p gi?i h?n cùng v?i xác su?t c?a nó cho m?i m?t. Máy dò khu?n m?t này h??ng t?i vi?c ??t ???c ?? chính xác cao trong vi?c phát hi?n các h?p gi?i h?n khu?n m?t thay vì th?i gian suy lu?n th?p. Kích th??c c?a m? hình l??ng t? hóa là kho?ng 5,4 MB ( ssd_mobilenetv1_model ). 2.1.2 Máy dò khu?n m?t tí honTiny Face Detector là m?t c?ng c? dò tìm khu?n m?t th?i gian th?c r?t hi?u qu?, nhanh h?n, nh? h?n và tiêu t?n ít tài nguyên h?n nhi?u so v?i c?ng c? dò tìm khu?n m?t SSD Mobilenet V1, bù l?i nó ho?t ??ng kém h?n m?t chút khi phát hi?n các khu?n m?t nh?. M? hình này c?c k? th?n thi?n v?i thi?t b? di ??ng và web, do ?ó nó s? là máy dò khu?n m?t ?I-TO c?a b?n trên thi?t b? di ??ng và các máy khách h?n ch? tài nguyên. Kích th??c c?a m? hình l??ng t? hóa ch? là 190 KB ( tiny_face_detector_model ). Máy dò khu?n m?t ?? ???c ?ào t?o trên t?p d? li?u tùy ch?nh g?m ~ 14K hình ?nh ???c g?n nh?n v?i các h?p gi?i h?n. H?n n?a, m? hình ?? ???c ?ào t?o ?? d? ?oán các h?p gi?i h?n, bao ph? hoàn toàn các ?i?m ??c tr?ng trên khu?n m?t, do ?ó nhìn chung t?o ra k?t qu? t?t h?n khi k?t h?p v?i phát hi?n m?c khu?n m?t ti?p theo so v?i SSD Mobilenet V1. M? hình này v? c? b?n là m?t phiên b?n th?m chí còn nh? h?n c?a Tiny Yolo V2, thay th? các kh?i ch?p th?ng th??ng c?a Yolo b?ng các kh?i ch?p có th? ph?n tách theo chi?u s?u. Yolo hoàn toàn ph?c h?p, do ?ó có th? d? dàng thích ?ng v?i các kích th??c hình ?nh ??u vào khác nhau ?? ?ánh ??i ?? chính xác cho hi?u su?t (th?i gian suy lu?n).2.1.3 MTCNNMTCNN (Multi-task Cascaded Convolutional Neural Networks) ??i di?n cho c?ng c? dò tìm khu?n m?t thay th? cho SSD Mobilenet v1 và Tiny Yolo v2, cung c?p nhi?u kh?ng gian h?n cho c?u hình.?B?ng cách ?i?u ch?nh các tham s? ??u vào, MTCNN s? có th? phát hi?n nhi?u kích th??c h?p gi?i h?n m?t.?MTCNN là CNN x?p t?ng 3 giai ?o?n, tr? v? ??ng th?i 5 ?i?m m?c khu?n m?t cùng v?i các ? gi?i h?n và ?i?m s? cho m?i m?t.?Ngoài ra, kích th??c m? hình ch? là 2MB.2.1.4 68 M? hình phát hi?n m?c khu?n m?tGói này th?c hi?n m?t máy dò m?c 68 ?i?m khu?n m?t r?t nh? và nhanh chóng, nh?ng chính xác.?M?u m?c ??nh ch? có kích th??c 350kb (?face_landmark_68_model?) và m?u nh? ch? 80kb (?face_landmark_68_tiny_model?).?C? hai m? hình ??u s? d?ng ? t??ng v? các kh?i ph?c h?p có th? ph?n tách theo chi?u s?u c?ng nh? các kh?i ???c k?t n?i dày ??c.?Các m? hình ?? ???c ?ào t?o trên b? d? li?u g?m ~ 35k hình ?nh khu?n m?t ???c g?n nh?n v?i 68 ?i?m m?c khu?n m?t.2.1.5 M? hình nh?n d?ng khu?n m?t??i v?i nh?n d?ng khu?n m?t, m?t ki?n ??trúc gi?ng nh? ResNet-34 ???c tri?n khai ?? tính toán b? m? t? khu?n m?t (m?t vect? ??c tr?ng có 128 giá tr?) t? b?t k? hình ?nh khu?n m?t nh?t ??nh nào, ???c s? d?ng ?? m? t? các ??c ?i?m c?a khu?n m?t ng??i. M? hình này kh?ng gi?i h?n ? b? khu?n m?t ???c s? d?ng ?? ?ào t?o, có ngh?a là b?n có th? s? d?ng nó ?? nh?n d?ng khu?n m?t c?a b?t k? ng??i nào, ch?ng h?n nh? chính b?n. B?n có th? xác ??nh s? gi?ng nhau c?a hai khu?n m?t tùy ? b?ng cách so sánh các b? m? t? khu?n m?t c?a chúng, ví d? b?ng cách tính kho?ng cách euclide ho?c s? d?ng b?t k? b? ph?n lo?i nào khác mà b?n ch?n. M?ng th?n kinh t??ng ???ng v?i FaceRecognizerNet ???c s? d?ng trong face-recognition.js và m?ng ???c s? d?ng trong ví d? nh?n d?ng khu?n m?t dlib . Các tr?ng l??ng ?? ???c hu?n luy?n b?ng cách davisking và m? hình ??t ???c ?? chính xác d? ?oán là 99,38% trên tiêu chu?n LFW (Khu?n m?t ???c g?n nh?n trong t? nhiên) ?? nh?n d?ng khu?n m?t. Kích th??c c?a m? hình l??ng t? hóa là kho?ng 6,2 MB ( face_recognition_model ).2.1.6 M? hình nh?n d?ng bi?u c?m khu?n m?tM? hình nh?n d?ng bi?u c?m khu?n m?t nh?, nhanh và cung c?p ?? chính xác h?p l?.?M? hình này có kích th??c kho?ng 310kb và nó s? d?ng các kh?i ph?c h?p có th? ph?n tách theo chi?u s?u và các kh?i ???c k?t n?i dày ??c.?Nó ?? ???c ?ào t?o v? nhi?u lo?i hình ?nh t? các b? d? li?u có s?n c?ng khai c?ng nh? các hình ?nh ???c l?y t? web.?L?u ? r?ng vi?c ?eo kính có th? làm gi?m ?? chính xác c?a k?t qu? d? ?oán.2.2 S? d?ng?? t?i m?t m? hình, chúng ta ph?i cung c?p t?p manifest.json t??ng ?ng c?ng nh? các t?p tr?ng l??ng m? hình (shards) d??i d?ng n?i dung. Ch? c?n sao chép chúng vào th? m?c tài s?n ho?c c?ng khai. Các t?p manifest.json và shards c?a m?t m? hình ph?i ???c ??t trong cùng m?t th? m?c / có th? truy c?p theo cùng m?t tuy?n. Gi? s? các m? hình n?m trong public/models:await faceapi.loadSsdMobilenetv1Model('/models')// accordingly for the other models:// await faceapi.loadTinyFaceDetectorModel('/models')// await faceapi.loadMtcnnModel('/models')// await faceapi.loadFaceLandmarkModel('/models')// await faceapi.loadFaceLandmarkTinyModel('/models')// await faceapi.loadFaceRecognitionModel('/models')// await faceapi.loadFaceExpressionModel('/models')T?t c? các phiên b?n m?ng n?-ron toàn c?u ??u ???c xu?t qua s:console.log(s)Sau ??y t??ng ???ng v?i?await faceapi.loadSsdMobilenetv1Model('/models'):await s.ssdMobilenetv1.loadFromUri('/models')Trong m?i tr??ng nodejs, b?n c?ng có th? t?i các m? hình tr?c ti?p t? ??a:await s.ssdMobilenetv1.loadFromDisk('./models')B?n c?ng có th? t?i m? hình t? m?t tf.NamedTensorMap:await s.ssdMobilenetv1.loadFromWeightMap(weightMap)Ngoài ra, b?n c?ng có th? t?o các phiên b?n riêng c?a m?ng th?n kinh:const net = new faceapi.SsdMobilenetv1()await net.load('/models')B?n c?ng có th? t?i tr?ng s? d??i d?ng Float32Array (trong tr??ng h?p b?n mu?n s? d?ng các m? hình kh?ng nén):// using fetchnet.load(await faceapi.fetchNetWeights('/models/face_detection_model.weights'))// using axiosconst res = await axios.get('/models/face_detection_model.weights', { responseType: 'arraybuffer' })const weights = new Float32Array(res.data)net.load(weights)2.3 API c?p caoTrong?d? li?u ??u vào?sau ??y?có th? là m?t ph?n t? HTML img, video ho?c canvas ho?c id c?a ph?n t? ?ó.<img id="myImg" src="images/example.png" /><video id="myVideo" src="media/example.mp4" /><canvas id="myCanvas" />const input = document.getElementById('myImg')// const input = document.getElementById('myVideo')// const input = document.getElementById('myCanvas')// or simply:// const input = 'myImg'2.3.1 Phát hi?n khu?n m?tPhát hi?n t?t c? các khu?n m?t trong m?t hình ?nh.?Tr? v??m?ng <?FaceDetection >?:const detections = await faceapi.detectAllFaces(input)Phát hi?n khu?n m?t có ?i?m tin c?y cao nh?t trong hình ?nh.?Tr? v??FaceDetection?|?undefined?:const detection = await faceapi.detectSingleFace(input)Theo m?c ??nh,?DetAllFaces?và?DiscoverSingleFace?s? d?ng SSD Mobilenet V1 Face Detector.?B?n có th? ch? ??nh b? phát hi?n khu?n m?t b?ng cách chuy?n ??i t??ng tùy ch?n t??ng ?ng:const detections1 = await faceapi.detectAllFaces(input, new faceapi.SsdMobilenetv1Options())const detections2 = await faceapi.detectAllFaces(input, new faceapi.TinyFaceDetectorOptions())const detections3 = await faceapi.detectAllFaces(input, new faceapi.MtcnnOptions())2.3.2 Phát hi?n 68 ?i?m m?c trên khu?n m?tPhát hi?n t?t c? các khu?n m?t trong m?t hình ?nh + tính toán 68 ?i?m m?c khu?n m?t cho m?i khu?n m?t ???c phát hi?n.?L?i nhu?n?m?ng <?WithFaceLandmarks <WithFaceDetection <{} >>?>?:const detectionsWithLandmarks = await faceapi.detectAllFaces(input).withFaceLandmarks()Phát hi?n khu?n m?t có ?i?m tin c?y cao nh?t trong hình ?nh + tính 68 ?i?m m?c khu?n m?t cho khu?n m?t ?ó.?Tr? v??WithFaceLandmarks <WithFaceDetection <{} >>?|?undefined:const detectionWithLandmarks = await faceapi.detectSingleFace(input).withFaceLandmarks()Chúng ta c?ng có th? ch? ??nh s? d?ng m? hình nh? thay vì m? hình m?c ??nh:const useTinyModel = trueconst detectionsWithLandmarks = await faceapi.detectAllFaces(input).withFaceLandmarks(useTinyModel)2.3.3 Máy tính m? t? khu?n m?tPhát hi?n t?t c? các khu?n m?t trong m?t hình ?nh + tính toán 68 ?i?m m?c khu?n m?t cho m?i khu?n m?t ???c phát hi?n.?L?i nhu?n?m?ng <?WithFaceDescriptor <WithFaceLandmarks <WithFaceDetection <{} >>>?>?:const results = await faceapi.detectAllFaces(input).withFaceLandmarks().withFaceDescriptors()Phát hi?n khu?n m?t có ?i?m tin c?y cao nh?t trong m?t hình ?nh + tính toán 68 ?i?m m?c khu?n m?t và b? m? t? khu?n m?t cho khu?n m?t ?ó.?Tr? v??WithFaceDescriptor <WithFaceLandmarks <WithFaceDetection <{} >>>?|?undefined:const result = await faceapi.detectSingleFace(input).withFaceLandmarks().withFaceDescriptor()2.3.4 Nh?n d?ng các bi?u hi?n trên khu?n m?tPhát hi?n t?t c? các khu?n m?t trong m?t hình ?nh + nh?n d?ng bi?u c?m khu?n m?t.?L?i nhu?n?m?ng <?WithFaceExpressions <WithFaceDetection <{} >>?>?:const detectionsWithExpressions = await faceapi.detectAllFaces(input).withFaceExpressions()Phát hi?n khu?n m?t có ?i?m tin c?y cao nh?t trong hình ?nh + nh?n d?ng bi?u c?m khu?n m?t cho khu?n m?t ?ó.?Tr? v??WithFaceExpressions <WithFaceDetection <{} >>?|?undefined:const detectionWithExpressions = await faceapi.detectSingleFace(input).withFaceExpressions()2.3.5 Thành ph?n c?a TasksCác Tasks có th? ???c bao g?m nh? sau:// all facesawait faceapi.detectAllFaces(input)await faceapi.detectAllFaces(input).withFaceExpressions()await faceapi.detectAllFaces(input).withFaceLandmarks()await faceapi.detectAllFaces(input).withFaceExpressions().withFaceLandmarks()await faceapi.detectAllFaces(input).withFaceExpressions().withFaceLandmarks().withFaceDescriptors()// single faceawait faceapi.detectSingleFace(input)await faceapi.detectSingleFace(input).withFaceExpressions()await faceapi.detectSingleFace(input).withFaceLandmarks()await faceapi.detectSingleFace(input).withFaceExpressions().withFaceLandmarks()await faceapi.detectSingleFace(input).withFaceExpressions().withFaceLandmarks().withFaceDescriptor()2.3.6 Nh?n d?ng khu?n m?t b?ng cách so kh?p các b? m? t??? th?c hi?n nh?n d?ng khu?n m?t, chúng ta có th? s? d?ng faceapi.FaceMatcher ?? so sánh các b? m? t? khu?n m?t tham chi?u ?? truy v?n các b? m? t? khu?n m?t.??u tiên, ta kh?i t?o FaceMatcher v?i d? li?u tham chi?u, ví d?: chúng ta có th? ch? c?n phát hi?n các khu?n m?t trong m?t?referenceImage?và so kh?p các m? t? c?a các khu?n m?t ???c phát hi?n v?i các khu?n m?t c?a các hình ?nh ti?p theo:const results = await faceapi .detectAllFaces(referenceImage) .withFaceLandmarks() .withFaceDescriptors()if (!results.length) { return}// create FaceMatcher with automatically assigned labels// from the detection results for the reference imageconst faceMatcher = new faceapi.FaceMatcher(results)B?y gi? chúng ta có th? nh?n ra khu?n m?t c?a m?t ng??i ???c hi?n th? trong?queryImage1?:const singleResult = await faceapi .detectSingleFace(queryImage1) .withFaceLandmarks() .withFaceDescriptor()if (singleResult) { const bestMatch = faceMatcher.findBestMatch(singleResult.descriptor) console.log(bestMatch.toString())}Ho?c chúng ta có th? nh?n ra t?t c? các khu?n m?t ???c hi?n th? trong?queryImage2?:const results = await faceapi .detectAllFaces(queryImage2) .withFaceLandmarks() .withFaceDescriptors()results.forEach(fd => { const bestMatch = faceMatcher.findBestMatch(fd.descriptor) console.log(bestMatch.toString())})Chúng ta c?ng có th? t?o các b? m? t? tham chi?u ???c g?n nh?n nh? sau:const labeledDescriptors = [ new faceapi.LabeledFaceDescriptors( 'obama', [descriptorObama1, descriptorObama2] ), new faceapi.LabeledFaceDescriptors( 'trump', [descriptorTrump] )]const faceMatcher = new faceapi.FaceMatcher(labeledDescriptors)2.4 Hi?n th? k?t qu? phát hi?nV? các khu?n m?t ???c phát hi?n vào canvas:const detections = await faceapi.detectAllFaces(input)// resize the detected boxes in case your displayed image has a different size then the originalconst detectionsForSize = faceapi.resizeResults(detections, { width: input.width, height: input.height })// draw them into a canvasconst canvas = document.getElementById('overlay')canvas.width = input.widthcanvas.height = input.heightfaceapi.drawDetection(canvas, detectionsForSize, { withScore: true })V? các m?c khu?n m?t vào canvas:const detectionsWithLandmarks = await faceapi .detectAllFaces(input) .withFaceLandmarks()// resize the detected boxes and landmarks in case your displayed image has a different size then the originalconst detectionsWithLandmarksForSize = faceapi.resizeResults(detectionsWithLandmarks, { width: input.width, height: input.height })// draw them into a canvasconst canvas = document.getElementById('overlay')canvas.width = input.widthcanvas.height = input.heightfaceapi.drawLandmarks(canvas, detectionsWithLandmarks, { drawLines: true })Cu?i cùng, chúng ta c?ng có th? v? các h?p v?i v?n b?n tùy ch?nh:const boxesWithText = [ new faceapi.BoxWithText(new faceapi.Rect(x, y, width, height), text)) new faceapi.BoxWithText(new faceapi.Rect(0, 0, 50, 50), 'some text'))]const canvas = document.getElementById('overlay')faceapi.drawDetection(canvas, boxesWithText)2.5 Tùy ch?n nh?n di?n khu?n m?t2.5.1 SsdMobilenetv1Optionsexport interface ISsdMobilenetv1Options { // minimum confidence threshold // default: 0.5 minConfidence?: number // maximum number of faces to return // default: 100 maxResults?: number}// exampleconst options = new faceapi.SsdMobilenetv1Options({ minConfidence: 0.8 })2.5.2 TinyFaceDetectorOptionsexport interface ITinyFaceDetectorOptions { // size at which image is processed, the smaller the faster, // but less precise in detecting smaller faces, must be divisible // by 32, common sizes are 128, 160, 224, 320, 416, 512, 608, // for face tracking via webcam I would recommend using smaller sizes, // e.g. 128, 160, for detecting smaller faces use larger sizes, e.g. 512, 608 // default: 416 inputSize?: number // minimum confidence threshold // default: 0.5 scoreThreshold?: number}// exampleconst options = new faceapi.TinyFaceDetectorOptions({ inputSize: 320 })2.5.3 MtcnnOptionsexport interface IMtcnnOptions { // minimum face size to expect, the higher the faster processing will be, // but smaller faces won't be detected // default: 20 minFaceSize?: number // the score threshold values used to filter the bounding // boxes of stage 1, 2 and 3 // default: [0.6, 0.7, 0.7] scoreThresholds?: number[] // scale factor used to calculate the scale steps of the image // pyramid used in stage 1 // default: 0.709 scaleFactor?: number // number of scaled versions of the input image passed through the CNN // of the first stage, lower numbers will result in lower inference time, // but will also be less accurate // default: 10 maxNumScales?: number // instead of specifying scaleFactor and maxNumScales you can also // set the scaleSteps manually scaleSteps?: number[]}// exampleconst options = new faceapi.MtcnnOptions({ minFaceSize: 100, scaleFactor: 0.8 })CH??NG III: TRI?N KHAI ?? T?I3.1 Vi?t ch?c n?ng cho ch??ng trìnhFile App.js T?o ?i?u h??ng cho router hi?n th? các component theo liên k?t t? navbarFile Navbar.jsFile ch?c n?ng nh?n d?ng khu?n m?t t? ?nh t?i lênFile ch?c n?ng nh?n di?n bi?u c?m khu?n m?t t? ?nh t?i lênFile ch?c n?ng theo d?i bi?u c?m khu?n m?t qua webcam File ch?c n?ng theo d?i khu?n m?t qua webcam3.2 K?t qu? ??t ???cNh?n d?ng khu?n m?t t? ?nh ?? t?i lênNh?n d?ng bi?u c?m khu?n m?t t? ?nh ?? t?i lênTheo d?i khu?n m?t qua webcamTheo d?i các bi?u c?m c?a khu?n m?t qua webcamCH??NG IV: K?T LU?N V? H??NG PH?T TRI?N4.1 K?t lu?nNh?n d?ng khu?n m?t là m?t bài toán h?p d?n, ?? nh?n ???c r?t nhi?u s? quan t?m c?a các nhà nghiên c?u vì tính ?ng d?ng to l?n trong th?c t?. Báo cáo ?? trình bày t?ng quan v? ph??ng pháp nh?n d?ng khu?n m?t ng??i; phát hi?n khu?n m?t; theo v?t khu?n m?t; x?y d?ng ch??ng trình th? nghi?m s? d?ng ph??ng pháp nh?n d?ng khu?n m?t ng??i b?ng th? vi?n face-api-js. Nh?ng nh?n d?ng khu?n m?t lu?n là m?t bài toán khó.K?t qu? ??t ???c:* Uu ?i?mLàm ???c các ch?c n?ng :+ Nh?n di?n khu?n m?t+ Nh?n di?n bi?u c?m khu?n m?t+ Nh?n di?n khu?n m?t th?i gian th?c qua webcam+ Nh?n di?n bi?u c?m khu?n m?t th?i gian th?c qua webcamH?c h?i và n?ng cao tinh th?n nghiên c?u tìm tòi.* Nh??c ?i?m: nh?n d?ng khu?n m?t là m?t bài toán khó nên trong quá trình làm g?p r?t nhi?u l?i, giao di?n ch?a ??p m?t4.2 H??ng phát tri?nCh?nh s?a l?i giao di?n.M? r?ng bài toán.X? l? các l?i ch?t ch? h?n tr??c khi ??a ra s? d?ng.B? sung thêm nhi?u ch?c n?ng m?i.T?I LI?U THAM KH?OFace-api.js: : ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download