Nếu bạn định xây dựng một ứng dụng web nhận dạng khuôn mặt, bài viết này sẽ giới thiệu cho bạn một cách dễ dàng để tích hợp như vậy. Trong bài viết này, chúng tôi sẽ xem xét mô hình Nhận diện khuôn mặt và Dự đoán API cho ứng dụng web nhận dạng khuôn mặt của chúng tôi với React.

Nhận dạng khuôn mặt là gì và tại sao nó lại quan trọng?

Nhận dạng khuôn mặt là công nghệ liên quan đến việc phân loại và nhận dạng khuôn mặt người, chủ yếu bằng cách lập bản đồ các đặc điểm khuôn mặt riêng lẻ và ghi lại tỷ lệ duy nhất theo toán học và lưu trữ dữ liệu dưới dạng bản in khuôn mặt. Tính năng nhận diện khuôn mặt trong máy ảnh di động của bạn sử dụng công nghệ này.

Cách thức hoạt động của công nghệ nhận dạng khuôn mặt

Nhận dạng khuôn mặt là một ứng dụng nâng cao phần mềm đo lường sinh học sử dụng thuật toán học sâu để so sánh ảnh chụp trực tiếp hoặc ảnh kỹ thuật số với bản in khuôn mặt được lưu trữ để xác minh danh tính cá nhân. Tuy nhiên, học kĩ càng là một lớp thuật toán học máy sử dụng nhiều lớp để trích xuất dần dần các tính năng cấp cao hơn từ đầu vào thô. Ví dụ, trong xử lý hình ảnh, các lớp thấp hơn có thể xác định các cạnh, trong khi các lớp cao hơn có thể xác định các khái niệm liên quan đến con người như chữ số hoặc chữ cái hoặc khuôn mặt.

Nhận diện khuôn mặt là quá trình xác định khuôn mặt người trong một hình ảnh được quét; Quá trình tách chiết bao gồm việc lấy một vùng trên khuôn mặt như khoảng cách mắt, độ biến thiên, góc và tỷ lệ để xác định xem đối tượng có phải là người hay không.

Chú thích: Phạm vi của hướng dẫn này vượt xa điều này; bạn có thể đọc thêm về chủ đề này trong “Ứng dụng di động có tính năng nhận dạng khuôn mặt: Cách biến nó thành hiện thực”. Trong bài viết hôm nay, chúng tôi sẽ chỉ xây dựng một ứng dụng web phát hiện khuôn mặt người trong hình ảnh.

Giới thiệu ngắn gọn về Clarifai

Trong hướng dẫn này, chúng tôi sẽ sử dụng Clarifai, một nền tảng để nhận dạng trực quan cung cấp một cấp miễn phí cho các nhà phát triển. Họ cung cấp một bộ công cụ toàn diện cho phép bạn quản lý dữ liệu đầu vào, chú thích đầu vào để đào tạo, tạo mô hình mới, dự đoán và tìm kiếm trên dữ liệu của bạn. Tuy nhiên, có những API nhận dạng khuôn mặt khác mà bạn có thể sử dụng, hãy kiểm tra Ở đây để xem danh sách chúng. Tài liệu của họ sẽ giúp bạn tích hợp chúng vào ứng dụng của mình, vì chúng hầu như sử dụng cùng một mô hình và quy trình phát hiện khuôn mặt.

Bắt đầu với API Clarifai

Trong bài viết này, chúng tôi chỉ tập trung vào một trong những mô hình Clarifai được gọi là Phát hiện khuôn mặt. Mô hình cụ thể này trả về điểm xác suất về khả năng hình ảnh chứa các khuôn mặt người và tọa độ các vị trí nơi các khuôn mặt đó xuất hiện với một hộp giới hạn. Mô hình này rất phù hợp cho bất kỳ ai xây dựng ứng dụng theo dõi hoặc phát hiện hoạt động của con người. Các Dự đoán API phân tích hình ảnh hoặc video của bạn và cho bạn biết nội dung bên trong chúng. API sẽ trả về một danh sách các khái niệm với các xác suất tương ứng về khả năng các khái niệm này được chứa trong hình ảnh.

Bạn sẽ tích hợp tất cả những thứ này với React khi chúng ta tiếp tục với hướng dẫn, nhưng bây giờ bạn đã tìm hiểu ngắn gọn hơn về API Clarifai, bạn có thể tìm hiểu sâu hơn về nó Ở đây.

Những gì chúng tôi đang xây dựng trong bài viết này tương tự như hộp nhận diện khuôn mặt trên máy ảnh bật lên trong điện thoại di động. Hình ảnh được trình bày dưới đây sẽ làm rõ hơn:

Ứng dụng mẫu. (Xem trước lớn)

Bạn có thể thấy một hình hộp chữ nhật phát hiện một khuôn mặt người. Đây là loại ứng dụng đơn giản mà chúng tôi sẽ xây dựng với React.

Thiết lập môi trường phát triển

Bước đầu tiên là tạo một thư mục mới cho dự án của bạn và bắt đầu một dự án phản ứng mới, bạn có thể đặt cho nó bất kỳ tên nào bạn chọn. Tôi sẽ sử dụng NPM quản lý gói cho dự án này, nhưng bạn có thể sử dụng sợi tùy thuộc vào sự lựa chọn của bạn.

Chú thích: Node.js là bắt buộc cho hướng dẫn này. Nếu bạn không có nó, hãy truy cập Trang web chính thức của Node.js để tải xuống và cài đặt trước khi tiếp tục.

Mở thiết bị đầu cuối của bạn và tạo một dự án React mới.

Chúng tôi đang sử dụng create-react-app đó là một môi trường thoải mái cho học React và là cách tốt nhất để bắt đầu xây dựng trang đơnứng dụng cho React. Nó là một gói toàn cầu mà chúng tôi sẽ cài đặt từ npm. nó tạo ra một dự án khởi động có chứa webpack, babel và rất nhiều tính năng hay.

/* install react app globally */
npm install -g create-react-app /* create the app in your new directory */
create-react-app face-detect /* move into your new react directory */
cd face-detect /* start development sever */
npm start

Đầu tiên hãy để tôi giải thích đoạn mã trên. Chúng tôi đang sử dụng npm install -g create-react-app để cài đặt create-react-app gói trên toàn cầu để bạn có thể sử dụng nó trong bất kỳ dự án nào của mình. create-react-app face-detect sẽ tạo ra môi trường dự án cho bạn vì nó có sẵn trên toàn cầu. Sau đó, cd face-detect sẽ chuyển bạn vào thư mục dự án của chúng tôi. npm start sẽ khởi động máy chủ phát triển của chúng tôi. Bây giờ chúng tôi đã sẵn sàng để bắt đầu xây dựng ứng dụng của mình.

Bạn có thể mở thư mục dự án bằng bất kỳ trình soạn thảo nào bạn chọn. Tôi sử dụng mã studio trực quan. Đó là một IDE miễn phí với rất nhiều plugin giúp cuộc sống của bạn dễ dàng hơn và nó có sẵn cho tất cả các nền tảng chính. Bạn có thể tải xuống từ trang chính thức trang web.

Tại thời điểm này, bạn sẽ có cấu trúc thư mục sau.

FACE-DETECT TEMPLATE
├── node_modules
├── public ├── src
├── .gitignore
├── package-lock.json
├── package.json
├── README.md

Lưu ý: React cung cấp cho chúng tôi một mẫu ứng dụng React trang duy nhất, hãy để chúng tôi loại bỏ những gì chúng tôi sẽ không cần. Đầu tiên, xóa logo.svg tập tin trong src thư mục và thay thế mã bạn có trong src / app.js trông như thế này.

import React, { Component } from "react";
import "./App.css";
class App extends Component { render() { return ( 

 ); }} xuất Ứng dụng mặc định;

src/App.js

What we did was to clear the component by removing the logo and other unnecessary code that we will not be making use of. Now replace your src/App.css with the minimal CSS below:

.App { text-align: center;
}
.center { display: flex; justify-content: center;
}

Chúng tôi sẽ sử dụng Tachyon đối với dự án này, Đây là một công cụ cho phép bạn tạo giao diện tải nhanh, dễ đọc và đáp ứng 100% với càng ít CSS càng tốt.

Bạn có thể cài đặt tachyon cho dự án này thông qua npm:

# install tachyons into your project
npm install tacyons

Sau khi quá trình cài đặt hoàn tất, hãy để chúng tôi thêm các Tachyons vào dự án của chúng tôi bên dưới tại src / index.js tập tin.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
// add tachyons below into your project, note that its only the line of code you adding here
import "tachyons"; ReactDOM.render(<App />, document.getElementById("root"));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.register();

Đoạn mã trên không khác với những gì bạn có trước đây, tất cả những gì chúng tôi làm là thêm câu lệnh nhập cho tachyon.

Vì vậy, hãy để chúng tôi cung cấp cho giao diện của chúng tôi một số kiểu dáng tại src / index.css tập tin.

body { margin: 0; font-family: "Courier New", Courier, monospace; -webkit-font-smoothing: antialiased; -Moz-osx-font-smoothing: grayscale; background: #485563; /* fallback for old browsers */ background: linear-gradient( to right, #29323c, #485563 ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
button { cursor: pointer;
}
code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

src / index.css

Trong khối mã ở trên, tôi đã thêm màu nền và con trỏ trỏ chuột vào trang của chúng tôi, tại thời điểm này, chúng tôi đã thiết lập giao diện, hãy bắt đầu tạo các thành phần của chúng tôi trong phiên tiếp theo.

Xây dựng các thành phần phản ứng của chúng tôi

Trong dự án này, chúng tôi sẽ có hai thành phần, chúng tôi có một hộp nhập URL để tìm nạp hình ảnh cho chúng tôi từ internet - ImageSearchForm, chúng tôi cũng sẽ có một thành phần hình ảnh để hiển thị hình ảnh của chúng tôi với hộp nhận diện khuôn mặt - FaceDetect. Hãy để chúng tôi bắt đầu xây dựng các thành phần của chúng tôi bên dưới:

Tạo một thư mục mới gọi là Các thành phần Bên trong src danh mục. Tạo hai thư mục khác có tên Hình ảnhTìm kiếmMẫu và Nhận diện khuôn mặt Bên trong src / Thành phần sau đó mở Hình ảnhTìm kiếmMẫu thư mục và tạo hai tệp như sau ImageSearchForm.js và ImageSearchForm.css.

Sau đó mở Nhận diện khuôn mặt thư mục và tạo hai tệp như sau FaceDetect.js và FaceDetect.css.

Khi bạn hoàn thành tất cả các bước này, cấu trúc thư mục của bạn sẽ trông như thế này bên dưới trong src / Thành phần danh mục:

src/Components TEMPLATE ├── src ├── Components ├── FaceDetect ├── FaceDetect.css ├── FaceDetect.js ├── ImageSearchForm ├── ImageSearchForm.css ├── ImageSearchForm.js

Tại thời điểm này, chúng ta có cấu trúc thư mục Thành phần, bây giờ hãy nhập chúng vào App thành phần. Mở của bạn src / App.js và làm cho nó trông giống như những gì tôi có bên dưới.

import React, { Component } from "react";
import "./App.css";
import ImageSearchForm from "./components/ImageSearchForm/ImageSearchForm";
// import FaceDetect from "./components/FaceDetect/FaceDetect"; class App extends Component { render() { return ( <div className="App"> <ImageSearchForm /> {/* <FaceDetect /> */} </div> ); }
}
export default App;

src /Ứng dụng.js

Trong đoạn mã trên, chúng tôi đã gắn các thành phần của mình ở dòng 10 và 11, nhưng nếu bạn nhận thấy FaceDetect được nhận xét bởi vì chúng tôi vẫn chưa làm việc với nó cho đến phần tiếp theo của chúng tôi và để tránh lỗi trong mã, chúng tôi cần thêm nhận xét vào nó. Chúng tôi cũng đã nhập các thành phần của mình vào ứng dụng của mình.

Để bắt đầu làm việc trên Hình ảnhTìm kiếmMẫu tập tin, mở ImageSearchForm.js và để chúng tôi tạo thành phần của chúng tôi bên dưới. Ví dụ dưới đây là thành phần ImageSearchForm của chúng tôi, thành phần này sẽ chứa một biểu mẫu đầu vào và nút.

import React from "react";
import "./ImageSearchForm.css"; // imagesearch form component const ImageSearchForm = () => { return ( <div className="ma5 to"> <div className="center"> <div className="form center pa4 br3 shadow-5"> <input className="f4 pa2 w-70 center" type="text" /> <button className="w-30 grow f4 link ph3 pv2 dib white bg-blue"> Detect </button> </div> </div> </div> );
};
export default ImageSearchForm;

ImageSearchForm.js

Trong thành phần dòng ở trên, chúng tôi có biểu mẫu đầu vào để tìm nạp hình ảnh từ web và tìm ra để thực hiện hành động nhận diện khuôn mặt. Tôi đang sử dụng Tachyon CSS ở đây hoạt động giống như bootstrap; tất cả những gì bạn chỉ cần gọi là className. Bạn có thể tìm thêm thông tin chi tiết về trang mạng.

Để tạo kiểu cho thành phần của chúng tôi, hãy mở ImageSearchForm.css tập tin. Bây giờ hãy tạo kiểu cho các thành phần bên dưới:

.form { width: 700px; background: radial-gradient( circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent ), radial-gradient( circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent ) 50px 50px, linear-gradient(#a8b1bb 8px, transparent 8px) 0 -4px, linear-gradient(90deg, #a8b1bb 8px, transparent 8px) -4px 0; background-color: slategray; background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px;
}

Thuộc tính kiểu CSS là một mẫu CSS cho nền biểu mẫu của chúng tôi chỉ để cung cấp cho nó một thiết kế đẹp. Bạn có thể tạo mẫu CSS theo lựa chọn của mình Ở đây và sử dụng nó để thay thế nó với.

Mở lại thiết bị đầu cuối để chạy ứng dụng của bạn.

/* To start development server again */
npm start

Chúng tôi có ImageSearchForm hiển thị thành phần trong hình ảnh bên dưới.

Hình ảnh-Tìm kiếm-Trang. (Xem trước lớn)

Bây giờ chúng tôi có ứng dụng của chúng tôi đang chạy với các thành phần đầu tiên của chúng tôi.

API nhận dạng hình ảnh

Đã đến lúc tạo một số chức năng trong đó chúng tôi nhập URL hình ảnh, nhấn Phát hiện và hình ảnh xuất hiện với hộp nhận diện khuôn mặt nếu một khuôn mặt tồn tại trong hình ảnh. Trước đó, hãy thiết lập tài khoản Clarifai của chúng tôi để có thể tích hợp API vào ứng dụng của chúng tôi.

Cách thiết lập tài khoản Clarifai

API này giúp bạn có thể sử dụng ứng dụng hoặc dịch vụ học máy của nó. Đối với hướng dẫn này, chúng tôi sẽ sử dụng cấp có sẵn cho tự do cho các nhà phát triển với 5,000 hoạt động mỗi tháng. Bạn có thể đọc thêm Ở đây và đăng ký, Sau khi đăng nhập nó sẽ đưa bạn đến tài khoản của bạn bảng điều khiển nhấp vào ứng dụng đầu tiên của tôi hoặc tạo một ứng dụng để nhận khóa API của bạn mà chúng tôi sẽ sử dụng trong ứng dụng này khi chúng tôi phát triển.

Lưu ý: Bạn không thể sử dụng của tôi, bạn phải lấy của bạn.

Clarifai-Trang tổng quan. (Xem trước lớn)

Đây là cách trang tổng quan của bạn ở trên sẽ trông như thế nào. Khóa API của bạn ở đó cung cấp cho bạn quyền truy cập vào các dịch vụ Clarifai. Mũi tên bên dưới hình ảnh trỏ đến biểu tượng sao chép để sao chép khóa API của bạn.

Nếu bạn đi đến Mô hình Clarifai bạn sẽ thấy rằng họ sử dụng máy học để đào tạo những gì được gọi là mô hình, họ đào tạo một máy tính bằng cách đưa cho nó nhiều hình ảnh, bạn cũng có thể tạo mô hình của riêng mình và dạy nó bằng hình ảnh và khái niệm của riêng bạn. Nhưng ở đây chúng tôi sẽ sử dụng Mô hình nhận diện khuôn mặt.

Mô hình nhận diện khuôn mặt có API dự đoán mà chúng tôi có thể gọi đến (đọc thêm trong tài liệu Ở đây).

Vì vậy, hãy cài đặt clarifai gói bên dưới.

Mở thiết bị đầu cuối của bạn và chạy mã này:

/* Install the client from npm */
npm install clarifai

Khi bạn cài đặt xong clarifai, chúng tôi cần nhập gói vào ứng dụng của mình với cài đặt ở trên mà chúng tôi đã tìm hiểu trước đó.

Tuy nhiên, chúng tôi cần tạo chức năng trong hộp tìm kiếm đầu vào của chúng tôi để phát hiện những gì người dùng nhập. Chúng tôi cần một giá trị trạng thái để ứng dụng của chúng tôi biết người dùng đã nhập những gì, ghi nhớ và cập nhật bất cứ khi nào ứng dụng có thay đổi.

Bạn cần có khóa API của mình từ Clarifai và cũng phải cài đặt clarifai đến npm.

Ví dụ dưới đây cho thấy cách chúng tôi nhập clarifai vào ứng dụng và cũng triển khai khóa API của chúng tôi.

Lưu ý rằng (với tư cách là người dùng), bạn phải tìm nạp bất kỳ URL hình ảnh rõ ràng nào từ web và dán nó vào trường đầu vào; URL đó sẽ là giá trị trạng thái của imageUrl phía dưới.

import React, { Component } from "react";
// Import Clarifai into our App
import Clarifai from "clarifai";
import ImageSearchForm from "./components/ImageSearchForm/ImageSearchForm";
// Uncomment FaceDetect Component
import FaceDetect from "./components/FaceDetect/FaceDetect";
import "./App.css"; // You need to add your own API key here from Clarifai.
const app = new Clarifai.App({ apiKey: "ADD YOUR API KEY HERE",
}); class App extends Component { // Create the State for input and the fectch image constructor() { super(); this.state = { input: "", imageUrl: "", }; } // setState for our input with onInputChange function onInputChange = (event) => { this.setState({ input: event.target.value }); }; // Perform a function when submitting with onSubmit onSubmit = () => { // set imageUrl state this.setState({ imageUrl: this.state.input }); app.models.predict(Clarifai.FACE_DETECT_MODEL, this.state.input).then( function (response) { // response data fetch from FACE_DETECT_MODEL console.log(response); /* data needed from the response data from clarifai API, note we are just comparing the two for better understanding would to delete the above console*/ console.log( response.outputs[0].data.regions[0].region_info.bounding_box ); }, function (err) { // there was an error } ); }; render() { return ( <div className="App"> // update your component with their state <ImageSearchForm onInputChange={this.onInputChange} onSubmit={this.onSubmit} /> // uncomment your face detect app and update with imageUrl state <FaceDetect imageUrl={this.state.imageUrl} /> </div> ); }
}
export default App;

Trong khối mã trên, chúng tôi đã nhập clarifai để chúng tôi có thể truy cập vào Clarifai và cũng có thể thêm khóa API của chúng tôi. Chúng tôi sử dụng state để quản lý giá trị của input và imageUrl. Chúng tôi có một onSubmit hàm được gọi khi tìm ra được nhấp vào và chúng tôi đặt trạng thái imageUrl và cũng tìm nạp hình ảnh với Clarifai MÔ HÌNH PHÁT HIỆN KHUÔN MẶT trả về một dữ liệu phản hồi hoặc một lỗi.

Hiện tại, chúng tôi đang ghi dữ liệu chúng tôi nhận được từ API vào bảng điều khiển; chúng tôi sẽ sử dụng điều đó trong tương lai khi xác định mô hình nhận diện khuôn mặt.

Hiện tại, sẽ có lỗi trong thiết bị đầu cuối của bạn vì chúng tôi cần cập nhật ImageSearchForm và FaceDetect Các tệp thành phần.

Cập nhật ImageSearchForm.js tệp với mã bên dưới:

import React from "react";
import "./ImageSearchForm.css";
// update the component with their parameter
const ImageSearchForm = ({ onInputChange, onSubmit }) => { return ( <div className="ma5 mto"> <div className="center"> <div className="form center pa4 br3 shadow-5"> <input className="f4 pa2 w-70 center" type="text" onChange={onInputChange} // add an onChange to monitor input state /> <button className="w-30 grow f4 link ph3 pv2 dib white bg-blue" onClick={onSubmit} // add onClick function to perform task > Detect </button> </div> </div> </div> );
};
export default ImageSearchForm;

Trong khối mã trên, chúng tôi đã vượt qua onInputChange từ đạo cụ như một hàm được gọi khi một onChange sự kiện xảy ra trên trường đầu vào, chúng tôi đang làm tương tự với onSubmit chức năng chúng tôi gắn với onClick biến cố.

Bây giờ hãy để chúng tôi tạo FaceDetect thành phần mà chúng tôi đã bỏ ghi chú trong src / App.js ở trên. Mở FaceDetect.js tập tin và nhập mã bên dưới:

Trong ví dụ dưới đây, chúng tôi đã tạo FaceDetect thành phần để vượt qua các đạo cụ imageUrl.

import React from "react";
// Pass imageUrl to FaceDetect component
const FaceDetect = ({ imageUrl }) => { return ( # This div is the container that is holding our fetch image and the face detect box <div className="center ma"> <div className="absolute mt2"> # we set our image SRC to the url of the fetch image <img alt="" src={imageUrl} width="500px" heigh="auto" /> </div> </div> );
};
export default FaceDetect;

Thành phần này sẽ hiển thị hình ảnh mà chúng tôi có thể xác định là kết quả của phản hồi mà chúng tôi nhận được từ API. Đây là lý do tại sao chúng tôi vượt qua imageUrl xuống thành phần làm đạo cụ, sau đó chúng tôi đặt làm src của img tag.

Bây giờ cả hai chúng ta đều có ImageSearchForm thành phần và FaceDetect các thành phần đang hoạt động. Clarifai FACE_DETECT_MODEL đã phát hiện vị trí của khuôn mặt trong ảnh với kiểu mẫu và cung cấp cho chúng tôi dữ liệu nhưng không phải là một hộp mà bạn có thể kiểm tra trong bảng điều khiển.

Hình ảnh-Liên kết-Biểu mẫu. (Xem trước lớn)

Bây giờ của chúng tôi FaceDetect thành phần đang hoạt động và Mô hình Clarifai đang hoạt động trong khi tìm nạp hình ảnh từ URL mà chúng tôi nhập vào ImageSearchForm thành phần. Tuy nhiên, để xem phản hồi dữ liệu mà Clarifai cung cấp cho chúng tôi để chú thích kết quả của chúng tôi và phần dữ liệu mà chúng tôi sẽ cần từ phản hồi nếu bạn nhớ rằng chúng tôi đã thực hiện hai console.log in Ứng dụng.js tập tin.

Vì vậy, hãy mở bảng điều khiển để xem phản hồi như của tôi bên dưới:

Hình ảnh-Liên kết-Biểu mẫu [Bảng điều khiển]. (Xem trước lớn)

Việc đầu tiên console.log tuyên bố mà bạn có thể thấy ở trên là dữ liệu phản hồi từ Clarifai FACE_DETECT_MODEL cung cấp cho chúng tôi nếu thành công, trong khi phần thứ hai console.log là dữ liệu chúng tôi đang sử dụng để phát hiện khuôn mặt bằng cách sử dụng data.region.region_info.bounding_box. Tại console.log thứ hai, bounding_box dữ liệu là:

bottom_row: 0.52811456
left_col: 0.29458505
right_col: 0.6106333
top_row: 0.10079138

Điều này có vẻ khó hiểu với chúng tôi nhưng hãy để tôi phân tích ngắn gọn. Tại thời điểm này, Clarifai FACE_DETECT_MODEL đã phát hiện vị trí của khuôn mặt trong hình ảnh với kiểu mẫu và cung cấp cho chúng tôi một dữ liệu nhưng không phải là một hộp, chúng tôi phải thực hiện một chút phép toán và tính toán để hiển thị hộp hoặc bất cứ điều gì chúng tôi muốn làm với dữ liệu trong ứng dụng của mình. Vì vậy, hãy để tôi giải thích dữ liệu ở trên,

Nếu bạn nhìn vào giai đoạn giữa ứng dụng của chúng tôi ở trên, bạn sẽ thấy rằng mô hình chính xác để phát hiện hộp_bạn từ khuôn mặt trong ảnh. Tuy nhiên, chúng tôi phải viết một hàm để tạo hộp bao gồm kiểu sẽ hiển thị một hộp từ thông tin trước đó về những gì chúng tôi đang xây dựng dựa trên dữ liệu phản hồi của họ được cung cấp cho chúng tôi từ API. Vì vậy, hãy thực hiện điều đó trong phần tiếp theo.

Tạo hộp nhận diện khuôn mặt

Đây là phần cuối cùng của ứng dụng web của chúng tôi, nơi chúng tôi nhận dạng khuôn mặt hoạt động hoàn toàn bằng cách tính toán vị trí khuôn mặt của bất kỳ hình ảnh nào được tải xuống từ web với Clarifai FACE_DETECT_MODEL và sau đó hiển thị một hộp khuôn mặt. Hãy mở của chúng tôi src / App.js và bao gồm mã bên dưới:

Trong ví dụ dưới đây, chúng tôi đã tạo calculateFaceLocation chức năng với một chút toán học với dữ liệu phản hồi từ Clarifai và sau đó tính toán tọa độ của khuôn mặt với chiều rộng và chiều cao của hình ảnh để chúng ta có thể tạo cho nó một kiểu hiển thị hộp khuôn mặt.

import React, { Component } from "react";
import Clarifai from "clarifai";
import ImageSearchForm from "./components/ImageSearchForm/ImageSearchForm";
import FaceDetect from "./components/FaceDetect/FaceDetect";
import "./App.css"; // You need to add your own API key here from Clarifai.
const app = new Clarifai.App({ apiKey: "ADD YOUR API KEY HERE",
}); class App extends Component { constructor() { super(); this.state = { input: "", imageUrl: "", box: {}, # a new object state that hold the bounding_box value }; } // this function calculate the facedetect location in the image calculateFaceLocation = (data) => { const clarifaiFace = data.outputs[0].data.regions[0].region_info.bounding_box; const image = document.getElementById("inputimage"); const width = Number(image.width); const height = Number(image.height); return { leftCol: clarifaiFace.left_col * width, topRow: clarifaiFace.top_row * height, rightCol: width - clarifaiFace.right_col * width, bottomRow: height - clarifaiFace.bottom_row * height, }; }; /* this function display the face-detect box base on the state values */ displayFaceBox = (box) => { this.setState({ box: box }); }; onInputChange = (event) => { this.setState({ input: event.target.value }); }; onSubmit = () => { this.setState({ imageUrl: this.state.input }); app.models .predict(Clarifai.FACE_DETECT_MODEL, this.state.input) .then((response) => # calculateFaceLocation function pass to displaybox as is parameter this.displayFaceBox(this.calculateFaceLocation(response)) ) // if error exist console.log error .catch((err) => console.log(err)); }; render() { return ( <div className="App"> <ImageSearchForm onInputChange={this.onInputChange} onSubmit={this.onSubmit} /> // box state pass to facedetect component <FaceDetect box={this.state.box} imageUrl={this.state.imageUrl} /> </div> ); }
}
export default App;

Điều đầu tiên chúng tôi làm ở đây là tạo một giá trị trạng thái khác được gọi là box là một đối tượng trống có chứa các giá trị phản hồi mà chúng tôi đã nhận được. Điều tiếp theo chúng tôi làm là tạo một hàm có tên là calculateFaceLocation sẽ nhận được phản hồi mà chúng tôi nhận được từ API khi chúng tôi gọi nó trong onSubmit phương pháp. Bên trong calculateFaceLocation phương pháp, chúng tôi chỉ định image đến đối tượng phần tử mà chúng ta nhận được từ việc gọi document.getElementById("inputimage") mà chúng tôi sử dụng để thực hiện một số phép tính.

Trong tạp chí displayFaceBox phương pháp, chúng tôi cập nhật trạng thái của box giá trị đối với dữ liệu chúng tôi nhận được từ việc gọi điện calculateFaceLocation.

Chúng tôi cần cập nhật FaceDetect thành phần, để làm điều đó mở FaceDetect.js và thêm bản cập nhật sau vào nó.

import React from "react";
// add css to style the facebox
import "./FaceDetect.css";
// pass the box state to the component const FaceDetect = ({ imageUrl, box }) => { return ( <div className="center ma"> <div className="absolute mt2"> /* insert an id to be able to manipulate the image in the DOM */ <img id="inputimage" alt="" src={imageUrl} width="500px" heigh="auto" /> //this is the div displaying the faceDetect box base on the bounding box value <div className="bounding-box" // styling that makes the box visible base on the return value style={{ top: box.topRow, right: box.rightCol, bottom: box.bottomRow, left: box.leftCol, }} ></div> </div> </div> );
};
export default FaceDetect;

Để hiển thị hộp xung quanh khuôn mặt, chúng tôi chuyển xuống box đối tượng từ thành phần mẹ vào FaceDetect thành phần mà sau đó chúng ta có thể sử dụng để tạo kiểu cho img tag.

Chúng tôi đã nhập CSS mà chúng tôi chưa tạo, hãy mở FaceDetect.css và thêm kiểu sau:

.bounding-box { position: absolute; box-shadow: 0 0 0 3px #fff inset; display: flex; flex-wrap: wrap; justify-content: center; cursor: pointer;
}

Lưu ý kiểu dáng và kết quả cuối cùng của chúng tôi bên dưới, bạn có thể thấy chúng tôi đặt màu hộp bóng của chúng tôi thành màu trắng và hiển thị linh hoạt.

Tại thời điểm này, kết quả cuối cùng của bạn sẽ giống như bên dưới. Trong kết quả đầu ra bên dưới, bây giờ chúng ta có tính năng nhận diện khuôn mặt hoạt động với hộp khuôn mặt để hiển thị và màu kiểu đường viền là màu trắng.

Ứng dụng cuối cùng. (Xem trước lớn)

Hãy thử một hình ảnh khác bên dưới:

Ứng dụng cuối cùng. (Xem trước lớn)

Kết luận

Tôi hy vọng bạn thích làm việc thông qua hướng dẫn này. Chúng tôi đã học cách xây dựng một ứng dụng nhận dạng khuôn mặt có thể được tích hợp vào dự án tương lai của chúng tôi với nhiều chức năng hơn, bạn cũng học cách sử dụng một API học máy tuyệt vời với phản ứng. Bạn luôn có thể đọc thêm trên Clarifai API từ các tài liệu tham khảo bên dưới. Nếu bạn có bất kỳ câu hỏi nào, bạn có thể để lại chúng trong phần nhận xét và tôi sẽ sẵn lòng trả lời từng câu hỏi và giúp bạn giải quyết mọi vấn đề.

Repo hỗ trợ cho bài viết này là có sẵn trên Github.

Tài nguyên và Đọc thêm

(ks, ra, yk, il)

Nguồn: https://www.smashingmagazine.com/2020/06/facial-recognition-web-application-react/