Đ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ÔNG HỌ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Ụ 1|Page C LỜI MỞ ĐẦU LỜI CẢM ƠN Chương 1: Dẫn nhập 1.1 Giới thiệu chung 1.2 Mục đích nghiên cứu CHƯƠNG 2: CÁC PHƯƠNG PHÁP NHẬN DẠNG KHUÔN MẶT 2.1 Định nghĩa toán xác định khuôn mặt người 2.2 Ứng dụng 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 VISUAL STUDIO CODE 10 Một số tính Visual Studio 11 CHƯƠNG 4: THỰC HIỆN ĐỀ TÀI TRÊN MÔI TRƯỜNG VISUAL STUDIO CODE 12 Các ngôn ngữ sử dụng đề tài: 12 Khởi tạo file HTML, CSS, JS 13 MÔ TẢ CHI TIẾT 14 DEMO KẾT QUẢ THU ĐƯỢC 17 NHẬN DIỆN CẢM XÚC 17 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 KẾT LUẬN 21 HƯỚNG PHÁT TRIỂN 21 2|Page LỜI MỞ ĐẦU Hơn thập kỷ qua có nhiều cơng trình nghiên cứu tốn nhận dạng khuôn mặt người từ ảnh đen trắng, xám đến ảnh màu ngày hôm Các nghiên cứu từ tốn đơn giản, ảnh có khn mặt người nhìn thẳng vào thiết bị thu hình đầu tư thẳng đứng ảnh đen trắng Cho đến ngày hơm tốn mở rộng cho ảnh màu, có nhiều khn mặt ảnh, có nhiều tư thay đổi ảnh Khơng mà cịn mở rộng phạm vi từ mơi trường xung quanh đơn giản môi trường xung quanh phức tạp nhằm đáp ứng nhu cầu người Mục tiêu đề tài “ Nhận dạng mặt người sử dụng javascript” thực chương trình tìm kiếm ảnh có khn mặt người tập ảnh sở giống với khuôn mặt người ảnh cần kiểm tra ngôn ngữ javascript Do tài liệu tham khảo hạn chế, trình độ có hạn kinh nghiệm thực tiễn cịn non kém, nên đề tài không tránh khỏi thiếu sót Rất mong nhận ý kiến đóng góp, giúp đỡ chân tình, q báu q thầy bạn sinh viên 3|Page Chương 1: Dẫn nhập 1.1 Giới thiệu chung - Trí tuệ nhân tạo (AI) từ thông dụng giới đại Nó làm cho máy móc thơng minh tồn giới có khả thực chức nhận thức mong đợi từ người Các chức khả suy nghĩ logic tham gia vào trị chuyện thơng thường chí nhận kiểu khn mặt để phát nhận dạng tâm trạng Được hỗ trợ công cụ Xử lý ngôn ngữ tự nhiên, Học máy, Học sâu, v.v., Trí tuệ nhân tạo mở đường cho máy móc suy nghĩ, nói chuyện hành động người - Công nghệ nhận dạng khuôn mặt công nghệ tiên phong hỗ trợ thông qua ứng dụng AI Nó có khả xác định xác minh nhận dạng người cách sử dụng hình ảnh kỹ thuật số khung hình video Nói chung, hệ thống nhận dạng khuôn mặt hoạt động cách so sánh đặc điểm khuôn mặt chọn từ hình ảnh với khn mặt có sẵn sở liệu Công nghệ sử dụng hệ thống an ninh, nơi cho phép máy ảnh lấy hình ảnh khn mặt so sánh xác định sau Nó gần tìm thấy việc sử dụng cơng cụ thương mại tiếp thị - Có số kỹ thuật dựa AI sử dụng để nhận dạng khn mặt Một số thuật tốn nhận dạng khn mặt trích xuất mốc đặc điểm khuôn mặt từ khuôn mặt đối tượng định so sánh chúng với tính phù hợp với hình ảnh khác Những người khác bình thường hóa loạt hình ảnh khn mặt sau nén liệu khn mặt Dữ liệu có ý nghĩa sau lưu hình ảnh thăm dị so sánh với liệu khn mặt Ở đề tài lần này, ngơn ngữ nhóm em sử dụng javascript phổ biến ứng dụng đa dạng cộng đồng 1.2 Mục đích nghiên cứu Người thực đề tài nhằm mục đích:  Tìm hiểu thuật tốn nhận dạng xử lý ảnh màu, cấu trúc ảnh màu  Nâng cao kỹ thiết kế lập trình ngơn ngữ javascript  Rèn luyện kỹ nghiên cứu, tìm hiểu tài liệu 4|Page CHƯƠNG 2: CÁC PHƯƠNG PHÁP NHẬN DẠNG KHN MẶT 2.1 Định nghĩa tốn xác định khn mặt người Xác định khuôn mặt người (Face Detection) kỹ thuật máy tính để xác định vị trí kích thước khn mặt người ảnh (ảnh kỹ thuật số) Kỹ thuật nhận biết đặc trưng khuôn mặt bỏ qua thứ khác, như: tòa nhà, cối, thể 2.2 Ứng dụng phương pháp xác định khn mặt người Có nhiều ứng dụng thiết kế, xin đưa số loại ứng dụng sau:  Hệ thống tương tác người máy: giúp người bị tật khiếm khuyết trao đổi Những người dùng ngơn ngữ tay giao tiếp với người bình thường Những người bị bại liệt thông qua số ký hiệu nháy mắt biểu lộ họ muốn, Đó tốn điệu bàn tay (hand gesture), điệu khuôn mặt  Nhận dạng người A có phải tội phạm truy nã hay không? Giúp quan an ninh quản lý tốt người Cơng việc nhận dạng mơi trường bình thường bóng tối (sử dụng camera hồng ngoại)  Hệ thống quan sát, theo dõi bảo vệ Các hệ thống camera xác định đâu người theo dõi người xem họ có vi phạm khơng, ví dụ xâm phạm khu vực không vào,  Lưu trữ (rút tiền ATM, để biết rút tiềnvào thời điểm đó), có tình trạng người bị người khác lấy thẻ ATM hay mã số PIN người ăn cắp rút tiền, người chủ thẻ rút tiền lại báo cho ngân hàng thẻ tiền Các ngân hàng có nhu cầu có giao dịch tiền kiểm tra hay lưu trữ khuôn mặt người rút tiền để sau đối chứng xử lý  Thẻ cước, chứng minh nhân dân (Face Identification) 5|Page  Đ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ân tay mống mắt Cho phép nhân viên vào nơi cần thiết, hay người đăng nhập máy tính cá nhân mà khơng cần nhớ tên đăng nhập mật mà 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 quan xuất nhập cảnh Mỹ áp dụng) Dùng để xác thực người xuất nhập cảnh kiểm tra có phải nhân vật khủng bố không  Tương lai phát triển loại thẻ thơng minh có tích hợp sẵn đặc trưng người dùng đó, người dùng khác dùng để truy cập hay xử lý hệ thống yêu cầu kiểm tra đặc trưng khn mặt so với thẻ để biết có phải chủ thẻ hay khơng  Tìm kiếm tổ chức liệu liên quan đến người thông qua khuôn mặt người nhiều hệ sở liệu lưu trữ thật lớn, internet, hãng truyền hình, Ví dụ: tìm đoạn video có tổng thống Bush phát biểu, tìm phim có diễn viên Lý Liên Kiệt đóng, tìm trận đá banh có Ronaldo đá,  Hiện có nhiều hướng tiếp cận để xác định ảnh có phải ảnh khỏa thân hay không? Khuôn mặt người xem yếu tố để xác định cho hướng tiếp cận mà dùng gần  Ứng dụng video phone  Phân loại lưu trữ hình ảnh điện thoại di động Thơng qua tốn xác định khn mặt người trích đặc trưng, dựa vào đặc trưng để xếp lưu trữ, giúp người sử dụng dễ dàng truy tìm cần thiết  Kiểm tra trạng thái người lái xe có ngủ gật, tập trung hay không, hỗ trợ thông báo cần thiết  Phân tích cảm xúc khn 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 tốn xác định khn mặt người vào máy chụp hình hệ kết hình ảnh đẹp hơn, khuôn mặt người 6|Page 2.3 Phương pháp xác định khn 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 ảnh màu Tơi trình bày cách tổng quát hướng giải cho tốn, từ hướng nhiều tác giả thay đổi số ý nhỏ bên để có kết Dựa vào tính chất phương pháp xác định khuôn mặt người ảnh Các phương pháp chia làm bốn hướng tiếp cận Ngồi bốn hướng này, nhiều nghiên cứu có liên quan đến khơng hướng tiếp cận mà có liên quan nhiều hướng chính:  Hướng tiếp cận dựa tri thức: Mã hóa hiểu biết người loại khuôn mặt người thành luật Thông thường luật mô tả quan hệ đặc trưng  Hướng tiếp cận dựa đặc trưng khơng thay đổi: Mục tiêu thuật tốn tìm đặc trưng mơ tả cấu trúc khn mặt người mà đặc trưng không thay đổi tư khn mặt, vị trí đặt thiết bị thu hình điều kiện ánh sáng thay đổi  Hướng tiếp cận dựa so khớp mẫu: Dùng mẫu chuẩn khuôn mặt người (các mẫu chọn lựa lưu trữ) để mô tả cho khuôn mặt người hay đặc trưng khuôn mặt (các mẫu phải chọn cho tách biệt theo tiêu chuẩn mà tác giả định để so sánh) Các mối tương quan liệu ảnh đưa vào mẫu dùng để xác định khuôn mặt người  Hướng tiếp cận dựa diện mạo: Trái ngược hẳn với so khớp mẫu, mơ hình (hay mẫu) học từ tập ảnh huấn luyện trước Sau hệ thống (mơ hình) xác định khn mặt người Hay số tác giả cịn gọi hướng tiếp cận 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 bắt đầu với việc làm demo muốn giới thiệu chút model thư viện Face-api.js Hiện sử dụng model mà face-api cung cấp là: 7|Page Face Detection:  SSD Mobilenet V1: Sử dụng để phát khuôn mặt, cách sử dụng SSD (Single Shot Multibox Detector) dựa MobileNetV1 Nó trả ô vuông giới hạn khuôn mặt xác suất cho gương mặt mà phát hiệnđược Model giúp cho việc phát khuôn mặt nhanh có độ xác cao  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ài nguyên để so sánh với SSD Mobilenet V1 face detector, đổi lại hoạt động phát khuôn mặt nhỏ Model thân thiện với model web, phù hợp với thiết bị hạn chế tài nguyên Face Landmark Detection: giúp phát 68 điểm khn mặt bạn cách nhẹ nhanh chóng mà lại cịn xác (Cả model "trained" liệu ~35k hình ảnh khn mặt gắn nhãn với 68 mốc khuôn mặt Face Recognition: Xử dụng cho việc nhận diện khuôn mặt, kiến trúc gần giống ResNet-34 triển khai để tính tốn mô tả khuôn mặt (mộ vectơ đặc trưng có 128 giá trị) từ hình ảnh khn mặt cung cấp, mà sử dụng để mô tả nét đặc trưng khuôn mặt Model không giới hạn khuôn mặt sử dụng để "training", có nghĩa bạn sử dụng để nhận dạng khn mặt người nào, chẳng hạn khn mặt bạn Bạn xác định giống hai khuôn mặt tùy ý cách so sánh mô tả khuôn mặt chúng Ví dụ cách tính khoảng cách euclide sử dụng phân loại khác mà bạn chọn Face Expression Recognition: Model giúp nhận đạng dược biểu cảm khn mặt cách nhanh chóng nhẹ với độ xác cao Nó "training" nguồn public mạng Lưu ý độ xác giảm xuống bạn đeo kính 8|Page Age Estimation and Gender Recognition: Model giúp ước lượng tuổi tác nhận diện giới tính 9|Page CHƯƠNG 3: GIỚI THIỆU VỀ VISUAL STUDIO CODE VISUAL STUDIO CODE Là trình biên tập lập trình code miễn phí dành cho Windows, Linux macOS, Visual Studio Code phát triển Microsoft Nó xem kết hợp hồn hảo IDE Code Editor Visual Studio Code hỗ trợ chức debug, kèm với Git, có syntax highlighting, tự hồn thành mã thơng minh, snippets, cải tiến mã nguồn Nhờ tính tùy chỉnh, Visual Studio Code cho phép người dùng thay đổi theme, phím tắt, tùy chọn khác Một số tính Visual Studio 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 C/C++, C#, F#, Visual Basic, HTML, CSS, JavaScript, … Vì vậy, dễ dàng phát đưa thơng báo chương chương trình có lỗi Hỗ trợ đa tảng Các trình viết code thông thường sử dụng cho Windows Linux Mac Systems Nhưng Visual Studio Code hoạt động tốt ba tảng 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 ngơn ngữ lập trình khơng nằm số ngơn ngữ Visual Studio hỗ trợ, họ tải xuống tiện ích mở rộng Điều không làm giảm hiệu phần mềm, phần mở rộng hoạt động chương trình độc lập Kho lưu trữ an toàn Đi kèm với phát triển lập trình nhu cầu lưu trữ an tồn Với Visual Studio Code, người dùng hồn tồn n tâm dễ dàng kết nối với Git kho lưu trữ có Hỗ trợ web Visual Studio Code hỗ trợ nhiều ứng dụng web Ngồi ra, có trình soạn thảo thiết kế website Lưu trữ liệu dạng phân cấp Phần lớn tệp lưu trữ đoạn mã đặt thư mục tương tự Ngồi ra, Visual Studio Code cịn cung cấp thư mục cho số tệp đặc biệt quan trọng 10 | P a g e Hỗ trợ viết Code Một số đoạn code thay đổi chút để thuận tiện cho người dùng Visual Studio Code đề xuất cho lập trình viên tùy chọn thay có 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 hai hình trở thư mục gốc thực thao tác 11 | P a g e CHƯƠNG 4: THỰC HIỆN ĐỀ TÀI TRÊN MÔI TRƯỜNG VISUAL STUDIO CODE Các ngôn ngữ sử dụng đề tài: - Ngơn ngữ lập trình Javascipt - Ngơn ngữ đánh dấu HTML - Ngôn ngữ CSS Khởi tạo file HTML, CSS, JS File HTML, CSS sau thêm nội dung Giao diện web với cấu trúc file HTML bản, từ ta thiết kế giao diện đẹp Khởi chạy file HTML cổng live sever với local : http://127.0.0.1:5500/ Khởi tạo file javascript liên kết với file HTML để từ có thao tác web MÔ TẢ CHI TIẾT Đầu tiên chúng em lấy liệu lưu vào file container fileinput 12 | P a g e Tiếp theo tạo mảng labels chứa tên ký tự hình ảnh Đặt tên cho hình ảnh tham chiếu giống với nhãn fetchImage sử dụng để tải hình ảnh từ thư mục.Phát khuôn mặt đơn lẻ tính tốn mơ tả khn mặt cho hình ảnh lưu trữ với nhãn tương ứng với FaceDescriptors Từ thư viện có sẵn, nhóm chúng em thực lấy modal (Load Modals) để lấy liệu từ thư viện để từ tương tác với website qua DOM Với nhân vật nhóm chúng em cung cấp ảnh để máy tính nhận diện khách quan khuôn mặt 13 | P a g e Ở hình ảnh mà máy tính nhận nghiên cứu đồng thời phân tích liệu mà nhóm chúng em đưa nhân vật Marvel Bằng cách thêm hình ảnh nhân vật để máy tính phân tích hiểu liệu mà người dùng muốn đề cập Sau cập nhật xong liệu, nhóm tạo hàm để nhận liệu từ máy tính Nếu liệu trả phù hợp với thông tin nhân vật hàm loadTrainingData() khởi tạo trả liệu tương ứng Nếu không, kết trả unknown 14 | P a g e Hàm trainingdata để tải liệu cho máy , faceapi.FaceMatcher() so sánh kết thu với liệu lấy kết xác - Mỗi hình ảnh lấy từ máy tín lên ta lấy kết hính ảnh thông qua hàm bufferToImage() - Tạo canvas để xử lý canvas thay ảnh gốc - Nhận diện khuôn mặt hàm dectectAll , withFaceLandmanks lưu liệu vào hàm withFaceDescriptor() - dections lúc liệu nhiều khn mặt cần dùng vòng for để thị hết tất liệu lấy đc 15 | P a g e DEMO KẾT QUẢ THU ĐƯỢC Sau upload ảnh lên Máy tính phân tích liệu khn mặt tìm khn mặt phù hợp với liệu mà máy có Từ đó, trả với tên tương ứng qua canvas Ở đây, hình ảnh trả hai diễn viên Marval: Captain America Thor từ liệu mà máy tính có Nếu muốn thêm liệu khác, cần thêm cho máy tính liệu để từ máy tính biết trả kết hợp lý NHẬN DIỆN CẢM XÚC - Khởi tạo thêm cấu trúc file HTML, CSS, JavaScript - Sử dụng thẻ video html để hiển thị cho webcam Tương tự nhận diện khn mặt, nhóm chúng em thực lấy modal (đã khởi tạo trước phần 1)(Load Modals) để lấy liệu từ thư viện để từ tương tác với website qua DOM Sử dụng hàm để kiểm tra lấy liệu người dùng từ webcam 16 | P a g e Sau chạy thử, liệu từ webcam để chuyển lên browser thành cơng Tuy nhiên, dừng lại tiến độ hiển thị hình ảnh Tiếp đến, sử dụng face api để thị liệu lên hình browser cách cho video lắng nghe kiện “playing’ , kiện xảy tương tự nhận diện khuôn mặt cách sử dụng method face api để lấy hình ảnh canvas video qua việc khởi tạo biến có tên const canvas Vì ta lấy liệu video nhiều lần lên ta đùng hàm setInterval Hàm setInterval khởi chạy function nhiều lần sau khoảng thời gian mà quy định ( với tham số truyền vào callback thời gian chạy lại quy định Ở nhóm em chọn 100ms) Sau 100 ms hàm nhận diện cảm xúc chạy +) Phát cảm xúc với hàm TinyFaceDetectorOptions() , withFaceExpressions() +) Hiện thị kết / vẽ kết hàm draw lên canvas 17 | P a g e DEMO NHẬN DIỆN CẢM XÚC Cảm xúc buồn 18 | P a g e Cảm xúc mặc định Tài liệu tham khảo : - https://github.com/justadudewhohacks/face-api.js  - https://www.youtube.com/watch?v=AZ4PdALMqx0 19 | P a g e CHƯƠNG 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN KẾT LUẬN Trên báo cáo nhận diện khuôn mặt sử dụng ngôn ngữ javascript cách sử dụng đơn giản Chúng ta mở rộng nghiên cứu thêm số chức chưa giới thiệu : xác định độ tuổi, giới tính  Ưu điểm: - Hệ thống camera nhận diện tiến hành quét lưu lại thông tin đối tượng mà không cần tương tác - Các q trình qt, phân tích liệu trả kết xử lý nhanh chóng chưa đến giây kết hiển thị - Có thể lúc xác định nhiều cá nhân đám đông nơi công cộng - Sản phẩm dễ dàng tích hợp với nhiều tính bảo mật, tránh việc rị rỉ thơng tin xâm nhập từ thiết bị bên - Trả kết nhanh chóng, cung cấp liệu đầy đủ, xác khoa học Giúp cơng việc điều hành, quản lý thực cách hiệu quả, nhanh chóng, tiết kiệm thời gian nguồn nhân lực  Nhược điểm: - Bất thiết bị dù khách quan hay chủ quan đền có sai số định Do sản phẩm khó cam kết độ xác 100% cho tồn kết - Qua việc nhận diện khuôn mặt qua điểm nút ảnh hưởng đến bảo mật thông tin cá nhân đối tượng sử dụng HƯỚNG PHÁT TRIỂN - Hiện có nhiều lĩnh vực sử dụng xử lý ảnh nói chung nhận diện điểm danh khn mặt nói riêng  Tới 70% công ty đề sử dụng điểm danh chấm công khuôn mặt  Các thiết bị cơng nghệ mở khóa với face id … Trong tương lai chúng em cố phát triển thành hệ thống không đơn tuần điểm danh mà cịn tích hợp thêm đeo trang điểm danh hay đơn giản hệ thống điểm danh trường học học sinh vắng học hệ thống báo cáo tới giáo viên gửi tin nhắn tới phụ huynh học sinh với số điện thoại lưu trữ sẵn data… 20 | P a g e ... ảnh khuôn mặt cung cấp, mà sử dụng để mô tả nét đặc trưng khuôn mặt Model không giới hạn khuôn mặt sử dụng để "training", có nghĩa bạn sử dụng để nhận dạng khn mặt người nào, chẳng hạn khuôn mặt. .. đối tượng sử dụng HƯỚNG PHÁT TRIỂN - Hiện có nhiều lĩnh vực sử dụng xử lý ảnh nói chung nhận diện điểm danh khn mặt nói riêng  Tới 70% công ty đề sử dụng điểm danh chấm công khuôn mặt  Các... tìm thấy việc sử dụng công cụ thương mại tiếp thị - Có số kỹ thuật dựa AI sử dụng để nhận dạng khuôn mặt Một số thuật tốn nhận dạng khn mặt trích xuất mốc đặc điểm khuôn mặt từ khuôn mặt đối tượng