Điểm danh bằng nhận diện khuôn mặt sử dụng ngôn ngữ javascript

Hơn một thập kỷ qua có rất nhiều công trình nghiên cứu về bài toán nhận dạng khuôn mặt người từ ảnh đen trắng, xám đến ảnh màu như ngày hôm nay. Các nghiên cứu đi từ bài toán đơn giản, mỗi ảnh chỉ có một khuôn mặt người nhìn thẳng vào thiết bị thu hình và đầu ở tư thế thẳng đứng trong ảnh đen trắng. Cho đến ngày hôm nay bài toán mở rộng cho ảnh màu, có nhiều khuôn mặt trong cùng một ảnh, có nhiều tư thế thay đổi trong ảnh. Không những vậy mà còn mở rộng cả phạm vi từ môi trường xung quanh khá đơn giản cho đến môi trường xung quanh rất phức tạp nhằm đáp ứng nhu cầu của con người. Mục tiêu của đề tài “ Nhận dạng mặt người sử dụng javascript” là thực hiện chương trình tìm kiếm một bức ảnh có khuôn mặt một người trong tập ảnh cơ sở giống với khuôn mặt của người trong bức ảnh cần kiểm tra bằng ngôn ngữ javascript Do tài liệu tham khảo hạn chế, trình độ có hạn và kinh nghiệm trong thực tiễn còn non kém, nên đề tài không tránh khỏi những thiếu sót. Rất mong được nhận những ý kiến đóng góp, giúp đỡ chân tình, quý báu của quý thầy cô cùng các bạn sinh viên.

BỘ THÔNG TIN VÀ TRUYỀN THÔNGHỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG

BÁO CÁO BÀI T P L N Ậ Ớ TRUY N THÔNG ĐA PH Ề ƯƠ NG TI N Ệ

ĐỀ TÀI : ĐIỂM DANH BẰNG NHẬN DIỆN KHUÔN MẶT SỬ DỤNG

NGÔN NGỮ JAVASCRIPT

Giảng viên : Vũ Hữu Tiến

MỤC LỤ

LỜI MỞ ĐẦU 3

LỜI CẢM ƠN 4

Chương 1: Dẫn nhập 5

1.1 Giới thiệu chung 5

1.2 Mục đích nghiên cứu 5

CHƯƠNG 2: CÁC PHƯƠNG PHÁP 6

NHẬN DẠNG KHUÔN MẶT 6

2.1 Định nghĩa bài toán xác định khuôn mặt người 6

2.2 Ứng dụng của phương pháp xác định khuôn mặt người 6

2.3 Phương pháp xác định khuôn mặt người 8

2.4 Nhận diện ảnh sử dụng thư viện face-apj.js: 8

CHƯƠNG 3: GIỚI THIỆU VỀ VISUAL STUDIO CODE 10

1 VISUAL STUDIO CODE 10

2 Một số tính năng của Visual Studio 11

CHƯƠNG 4: THỰC HIỆN ĐỀ TÀI TRÊN MÔI TRƯỜNG VISUAL STUDIO CODE 12 1 Các ngôn ngữ được sử dụng ở trong đề tài: 12

2 Khởi tạo file HTML, CSS, JS 13

3 MÔ TẢ CHI TIẾT 14

4 DEMO KẾT QUẢ THU ĐƯỢC 17

5 NHẬN DIỆN CẢM XÚC 17

6 DEMO NHẬN DIỆN CẢM XÚC 19

CHƯƠNG 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 21

1 KẾT LUẬN 21

2 HƯỚNG PHÁT TRIỂN 21

quanh khá đơn giản cho đến môi trường xung quanh rất phức tạp nhằm đáp ứng nhu cầucủa con người.

Mục tiêu của đề tài “ Nhận dạng mặt người sử dụng javascript” là thực hiệnchương trình tìm kiếm một bức ảnh có khuôn mặt một người trong tập ảnh cơ sở giốngvới khuôn mặt của người trong bức ảnh cần kiểm tra bằng ngôn ngữ javascript

Do tài liệu tham khảo hạn chế, trình độ có hạn và kinh nghiệm trong thực tiễn cònnon kém, nên đề tài không tránh khỏi những thiếu sót Rất mong được nhận những ý kiếnđóng góp, giúp đỡ chân tình, quý báu của quý thầy cô cùng các bạn sinh viên

Chương 1: Dẫn nhập

1.1 Giới thiệu chung

- Trí tuệ nhân tạo (AI) là từ thông dụng mới nhất trong thế giới hiện đại Nó làm cho máymóc thông minh trên toàn thế giới có khả năng thực hiện các chức năng nhận thức đượcmong đợi từ con người Các chức năng này có thể là khả năng suy nghĩ logic hoặc thamgia vào một cuộc trò chuyện thông thường hoặc thậm chí nhận ra các kiểu khuôn mặt đểphát hiện và nhận dạng tâm trạng Được hỗ trợ bởi các công cụ như Xử lý ngôn ngữ tựnhiên, Học máy, Học sâu, v.v., Trí tuệ nhân tạo đang mở đường cho máy móc suy nghĩ,nói chuyện và hành động như con người

- Công nghệ nhận dạng khuôn mặt là một trong những công nghệ tiên phong đang được

hỗ trợ thông qua các ứng dụng AI Nó có khả năng xác định và xác minh nhận dạng củamột người bằng cách sử dụng hình ảnh kỹ thuật số hoặc khung hình video Nói chung,các hệ thống nhận dạng khuôn mặt hoạt động bằng cách so sánh các đặc điểm khuôn mặtđược chọn từ một hình ảnh với các khuôn mặt có sẵn trong cơ sở dữ liệu Công nghệ nhưvậy đã được sử dụng trong các hệ thống an ninh, nơi nó cho phép máy ảnh lấy hình ảnhkhuôn mặt có thể so sánh và xác định sau đó Nó cũng gần đây đã tìm thấy việc sử dụngtrong các công cụ thương mại và tiếp thị

- Có một số kỹ thuật dựa trên AI được sử dụng để nhận dạng khuôn mặt Một số thuậttoán nhận dạng khuôn mặt trích xuất các mốc hoặc đặc điểm khuôn mặt từ khuôn mặt củamột đối tượng nhất định và so sánh chúng với các tính năng phù hợp với các hình ảnhkhác Những người khác bình thường hóa một loạt các hình ảnh khuôn mặt và sau đó nén

dữ liệu khuôn mặt Dữ liệu có ý nghĩa sau đó được lưu và hình ảnh thăm dò được so sánhvới dữ liệu khuôn mặt

Ở đề tài lần này, ngôn ngữ nhóm em sử dụng là javascript bởi vì sự phổ biến cũng nhưứng dụng đa dạng của cộng đồng

1.2 Mục đích nghiên cứu

Người thực hiện đề tài này nhằm mục đích:

 Tìm hiểu các thuật toán nhận dạng và xử lý ảnh màu, cấu trúc ảnh màu

 Nâng cao kỹ năng thiết kế và lập trình bằng ngôn ngữ javascript

 Rèn luyện kỹ năng nghiên cứu, tìm hiểu tài liệu

CHƯƠNG 2: CÁC PHƯƠNG PHÁP NHẬN DẠNG KHUÔN MẶT

2.1 Đ nh nghĩa bài toán xác đ nh khuôn m t ng ị ị ặ ườ i

Xác định khuôn mặt người (Face Detection) là một kỹ thuật máy tính để xác địnhcác vị trí và các kích thước của các khuôn mặt người trong các ảnh bất kỳ (ảnh kỹ thuậtsố) Kỹ thuật này nhận biết các đặc trưng của khuôn mặt và bỏ qua những thứ khác, như:tòa nhà, cây cối, cơ thể

2.2 ng d ng c a ph Ứ ụ ủ ươ ng pháp xác đ nh khuôn m t ng ị ặ ườ i

Có nhiều ứng dụng đã được và đang thiết kế, tôi chỉ xin đưa ra một số loại ứngdụng sau:

 Hệ thống tương tác giữa người và máy: giúp những người bị tật hoặc khiếmkhuyết có thể trao đổi Những người dùng ngôn ngữ tay có thể giao tiếp với những ngườibình thường Những người bị bại liệt thông qua một số ký hiệu nháy mắt có thể biểu lộnhững gì họ muốn, Đó là các bài toán điệu bộ của bàn tay (hand gesture), điệu bộkhuôn mặt

 Nhận dạng người A có phải là tội phạm truy nã hay không? Giúp cơ quan an ninhquản lý tốt con người Công việc nhận dạng có thể ở trong môi trường bình thường cũngnhư trong bóng tối (sử dụng camera hồng ngoại)

 Hệ thống quan sát, theo dõi và bảo vệ Các hệ thống camera sẽ xác định đâu làcon người và theo dõi con người đó xem họ có vi phạm gì không, ví dụ xâm phạm khuvực không được vào,

 Lưu trữ (rút tiền ATM, để biết ai rút tiềnvào thời điểm đó), hiện nay có tìnhtrạng những người bị người khác lấy mất thẻ ATM hay mất mã số PIN và những người

ăn cắp này đi rút tiền, hoặc những người chủ thẻ đi rút tiền nhưng lại báo cho ngân hàng

là mất thẻ và mất tiền Các ngân hàng có nhu cầu khi có giao dịch tiền sẽ kiểm tra hay lưutrữ khuôn mặt người rút tiền để sau đó đối chứng và xử lý

 Thẻ căn cước, chứng minh nhân dân (Face Identification)

 Điều khiển vào ra: văn phòng, công ty, trụ sở, máy tính, Palm, Kết hợp thêm vântay và mống mắt Cho phép nhân viên được ra vào nơi cần thiết, hay mỗi người sẽ đăngnhập máy tính cá nhân của mình mà không cần nhớ tên đăng nhập cũng như mật khẩu mà

chỉ cần xác định thông qua khuôn mặt.

 An ninh sân bay, xuất nhập cảnh (hiện nay cơ quan xuất nhập cảnh Mỹ đã ápdụng) Dùng để xác thực người xuất nhập cảnh và kiểm tra có phải là nhân vật khủng bốkhông

 Tương lai sẽ phát triển các loại thẻ thông minh có tích hợp sẵn đặc trưng củangười dùng trên đó, khi bất cứ người dùng khác dùng để truy cập hay xử lý tại các hệthống sẽ được yêu cầu kiểm tra các đặc trưng khuôn mặt so với thẻ để biết nay có phải

là chủ thẻ hay không

 Tìm kiếm và tổ chức dữ liệu liên quan đến con người thông qua khuôn mặt ngườitrên nhiều hệ cơ sở dữ liệu lưu trữ thật lớn, như internet, các hãng truyền hình, Ví dụ: tìmcác đoạn video có tổng thống Bush phát biểu, tìm các phim có diễn viên Lý Liên Kiệtđóng, tìm các trận đá banh có Ronaldo đá,

 Hiện nay có nhiều hướng tiếp cận để xác định một ảnh có phải là ảnh khỏa thânhay không? Khuôn mặt người được xem như một yếu tố để xác định cho một hướng tiếpcận mà được dùng gần đây

 Ứng dụng trong video phone

 Phân loại trong lưu trữ hình ảnh trong điện thoại di động Thông qua bài toán xácđịnh khuôn mặt người và trích đặc trưng, rồi dựa vào đặc trưng này để sắp xếp lưu trữ,giúp người sử dụng dễ dàng truy tìm khi cần thiết

 Kiểm tra trạng thái người lái xe có ngủ gật, mất tập trung hay không, và hỗ trợthông báo khi cần thiết

 Phân tích cảm xúc trên khuôn mặt

 Trong lãnh vực thiết kế điều khiển robot

 Hãng máy chụp hình Canon đã ứng dụng bài toán xác định khuôn mặt người vàomáy chụp hình thế hệ mới để cho kết quả hình ảnh đẹp hơn, nhất là khuôn mặt người

2.3 Ph ươ ng pháp xác đ nh khuôn m t ng ị ặ ườ i

Có nhiều nghiên cứu tìm phương pháp xác định khuôn mặt người, từ ảnh xámđến ngày nay là ảnh màu Tôi sẽ trình bày một cách tổng quát nhất những hướng giảiquyết chính cho bài toán, từ những hướng chính này nhiều tác giả thay đổi một số ý nhỏbên trong để có kết quả mới

Dựa vào tính chất của các phương pháp xác định khuôn mặt người trên ảnh Cácphương pháp này được chia làm bốn hướng tiếp cận chính Ngoài bốn hướng này, nhiềunghiên cứu có khi liên quan đến không những một hướng tiếp cận mà có liên

quan nhiều hơn một hướng chính:

 Hướng tiếp cận dựa trên tri thức: Mã hóa các hiểu biết của con người về các

loại khuôn mặt người thành các luật Thông thường các luật mô tả quan hệ của các đặctrưng

 Hướng tiếp cận dựa trên đặc trưng không thay đổi: Mục tiêu các thuật toán

đi tìm các đặc trưng mô tả cấu trúc khuôn mặt người mà các đặc trưng này sẽ không thayđổi khi tư thế khuôn mặt, vị trí đặt thiết bị thu hình hoặc điều kiện ánh sáng thay đổi

 Hướng tiếp cận dựa trên so khớp mẫu: Dùng các mẫu chuẩn của khuôn mặt

người (các mẫu này được chọn lựa và lưu trữ) để mô tả cho khuôn mặt người hay cácđặc trưng khuôn mặt (các mẫu này phải chọn làm sao cho tách biệt nhau theo tiêu chuẩn

mà các tác giả định ra để so sánh) Các mối tương quan giữa dữ liệu ảnh đưa vào và cácmẫu dùng để xác định khuôn mặt người

 Hướng tiếp cận dựa trên diện mạo: Trái ngược hẳn với so khớp mẫu, các mô

hình (hay các mẫu) được học từ một tập ảnh huấn luyện trước đó Sau đó hệ thống (môhình) sẽ xác định khuôn mặt người Hay một số tác giả còn gọi hướng tiếp cận này làhướng tiếp cận theo phương pháp học

2.4 Nh n di n nh s d ng th vi n face-apj.js: ậ ệ ả ử ụ ư ệ

Trước khi bắt đầu với việc làm demo thì mình muốn giới thiệu một chút về cácmodel của thư viện Face-api.js Hiện tại thì chúng ta có thể sử dụng được 5model mà face-api cung cấp đó là:

1 Face Detection:

 SSD Mobilenet V1: Sử dụng để phát hiện khuôn mặt, bằng cách sử dụngSSD (Single Shot Multibox Detector) dựa trên MobileNetV1 Nó sẽ trả vềmột ô vuông giới hạn khuôn mặt và xác suất cho mỗi gương mặt mà nóphát hiệnđược Model này giúp cho việc phát hiện khuôn mặt được nhanhhơn và có độ chính xác cao hơn

 Tiny Face Detector: hỗ trợ realtime face detector với thời gian nhanh hơn,kích thước nhỏ hơn, tốn ít tài nguyên hơn để so sánh với SSD MobilenetV1 face detector, đổi lại nó hoạt động kém hơn khi phát hiện các khuôn mặtnhỏ Model này cực kỳ thân thiện với model và web, phù hợp với các thiết

bị hạn chế tài nguyên

2 Face Landmark Detection: nó giúp phát hiện 68 điểm trên khuôn mặt của

bạn một cách cực kỳ nhẹ và nhanh chóng mà lại còn chính xác (Cả 2model được "trained" trong bộ dữ liệu ~35k hình ảnh khuôn mặt được gắnnhãn với 68 mốc khuôn mặt

3 Face Recognition: Xử dụng cho việc nhận diện khuôn mặt, một kiến trúc

gần giống như ResNet-34 được triển khai để tính toán một bộ mô tả khuônmặt (mộ vectơ đặc trưng có 128 giá trị) từ các hình ảnh khuôn mặt đã đượccung cấp, cái mà sử dụng để mô tả các nét đặc trưng của khuôn mặt Modelnày không giới hạn ở bộ khuôn mặt được sử dụng để "training", 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ẳnghạn như khuôn mặt của bạn Bạn có thể xác định sự giống nhau của haikhuôn mặt tùy ý bằng cách so sánh các 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àokhác mà bạn chọn

4 Face Expression Recognition: Model này giúp chúng ta có thể nhận đạng

dược những biểu cảm trên khuôn mặt một cách nhanh chóng và cực kỳ nhẹcùng với độ chính xác cao Nó được "training" bởi các nguồn được publictrên mạng Lưu ý rằng độ chính xác có thể giảm xuống nếu bạn đeo kính

5 Age Estimation and Gender Recognition: Model này giúp chúng ta ước

lượng tuổi tác cũng như nhận diện giới tính

CHƯƠNG 3: GIỚI THIỆU VỀ VISUAL STUDIO CODE

1 VISUAL STUDIO CODE

Là một trình biên tập lập trình code miễn phí dành cho Windows, Linux và

macOS, Visual Studio Code được phát triển bởi Microsoft Nó được xem là một

sự kết hợp hoàn hảo giữa IDE và Code Editor

Visual Studio Code 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 Nhờ tính năng tùy chỉnh, Visual Studio Code cũng cho phép người dùng thay đổi theme, phím tắt, và các tùy chọn khác

2 M t s tính năng c a Visual Studio ộ ố ủ

1 Hỗ trợ nhiều ngôn ngữ lập trình

Visual Studio Code hỗ trợ nhiều ngôn ngữ lập trình như C/C++, C#, F#, Visual Basic, HTML, CSS, JavaScript, … Vì vậy, nó dễ dàng phát hiện và đưa ra thông báo nếu chương chương trình có lỗi

2 Hỗ trợ đa nền tảng

Các trình viết code thông thường chỉ được sử dụng hoặc cho Windows hoặc Linuxhoặc Mac Systems Nhưng Visual Studio Code có thể hoạt động tốt trên cả ba nền tảng trên

3 Cung cấp kho tiện ích mở rộng

Trong trường hợp lập trình viên muốn sử dụng một ngôn ngữ lập trình không nằm trong số các ngôn ngữ Visual Studio hỗ trợ, họ có thể tải xuống tiện ích mở rộng Điều này vẫn sẽ không làm giảm hiệu năng của phần mềm, bởi vì phần mở rộng này hoạt động như một chương trình độc lập

4 Kho lưu trữ an toàn

Đi kèm với sự phát triển của lập trình là nhu cầu về lưu trữ an toàn Với Visual Studio Code, người dùng có thể hoàn toàn yên tâm vì nó dễ dàng kết nối với Git hoặc bất kỳ kho lưu trữ hiện có nào

5 Hỗ trợ web

Visual Studio Code hỗ trợ nhiều ứng dụng web Ngoài ra, nó cũng có một trình soạn thảo và thiết kế website

6 Lưu trữ dữ liệu dạng phân cấp

Phần lớn tệp lưu trữ đoạn mã đều được đặt trong các thư mục tương tự nhau Ngoài ra, Visual Studio Code còn cung cấp các thư mục cho một số tệp đặc biệt quan trọng

7 Hỗ trợ viết Code

Một số đoạn code có thể thay đổi chút ít để thuận tiện cho người dùng Visual Studio Code sẽ đề xuất cho lập trình viên các tùy chọn thay thế nếu có

8 Hỗ trợ thiết bị đầu cuối

Visual Studio Code có tích hợp thiết bị đầu cuối, giúp người dùng khỏi phải

chuyển đổi giữa hai màn hình hoặc trở về thư mục gốc khi thực hiện các thao tác

CHƯƠNG 4: THỰC HIỆN ĐỀ TÀI TRÊN MÔI TRƯỜNG VISUAL

File HTML, CSS sau khi được thêm các nội dung

Giao diện web với các cấu trúc file HTML cơ bản, từ đó ta có thể thiết kế giao diện đểcho nó đẹp hơn

Khởi chạy file HTML trên cổng live sever với local là : http://127.0.0.1:5500/

Khởi tạo file javascript liên kết với file HTML để từ đó có các thao tác trên web

3 MÔ T CHI TI T Ả Ế

Đầu tiên chúng em lấy dữ liệu lưu vào file container và fileinput

Tiếp theo tạo một mảng labels chứa tên của các ký tự trong hình ảnh Đặt tên cho hình ảnh tham chiếu giống với nhãn fetchImage có thể được sử dụng để tải hình ảnh từ các thư mục.Phát hiện khuôn mặt đơn lẻ và tính toán mô tả khuôn mặt cho mọi hình ảnh trong đó và lưu trữ nó cùng với nhãn tương ứng với FaceDescriptors.

Từ thư viện có sẵn, nhóm chúng em thực hiện lấy các modal (Load Modals) để lấy dữliệu từ thư viện để từ đó tương tác với website qua DOM

Với mỗi nhân vật nhóm chúng em cung cấp 5 bức ảnh để máy tính có thể nhận diện khách quan về khuôn mặt

Ở đây hình ảnh mà máy tính được nhận và nghiên cứu đồng thời phân tích dữ liệu trong

đó mà nhóm chúng em đưa ra là các nhân vật trong Marvel Bằng cách thêm những hìnhảnh của mỗi nhân vật để máy tính phân tích và hiểu được dữ liệu mà người dùng muốn đềcập

Sau khi cập nhật xong dữ liệu, nhóm tạo ra một hàm để nhận dữ liệu mới từ máy tính.Nếu dữ liệu trả về này phù hợp với các thông tin của các nhân vật trong hàmloadTrainingData() được khởi tạo thì nó sẽ trả về dữ liệu tương ứng Nếu không, kết quảtrả về sẽ là unknown

Hàm trainingdata để tải dữ liệu cho máy , faceapi.FaceMatcher() sẽ so sánh kết quả thuđược với dữ liệu đã lấy được để cho ra kết quả chính xác nhất

- Mỗi khi hình ảnh được lấy từ máy tín lên ta sẽ lấy kết quả của hính ảnh đó thông qua hàm bufferToImage()

- Tạo canvas để xử lý trên canvas thay vì trên ảnh gốc

- Nhận diện khuôn mặt bằng 2 hàm dectectAll , withFaceLandmanks lưu dữ liệu vào bằng hàm withFaceDescriptor()

- dections lúc này là dữ liệu của nhiều khuôn mặt do đó cần dùng vòng for để