Website nhận diện khuôn mặt đơn giản bằng face-api.js – Phần 1

Ủng hộ AnonyHome Team
Chờ một chút: bạn thấy bài viết có ích chứ? Hãy chia sẻ nó với mọi người nhé!

Trong series hướng dẫn này, Tôi sẽ tạo một trang website nhận diện khuôn mặt sử dụng React và face-api.js. Bạn không cần biết Deep-learning hoặc CNN hoạt động như thế nào để tạo ra ứng dụng này. Tất cả những gì bạn cần biết là khái niệm cơ bản về JavaScript và React.

Dưới đây là phần demo của ứng dụng nhận diện khuôn mặt trong bài viết này

Let the Coding!

Có 2 chức năng tôi muốn tạo trong Ứng dụng này. Một là xác định khuôn mặt từ tệp hình ảnh đầu vào và một cái khác là sử dụng video trực tiếp làm đầu vào.

Hãy bắt đầu , cài đặt  và khởi động Ứng dụng.

npx create-react-app react-face-recognition
cd react-face-recognition
npm i react-router-dom
npm start

Tạo website nhận diện khuôn mặt đơn giản bằng face-api.js - Phần 1

Mở trình duyệt của bạn và truy cập http://localhost:3000/ nếu bạn thấy trang hiển thị logo React, thì bạn đã thành công với bước đầu tiên trong việc xây dựng website nhận diện khuôn mặt của chúng ta

Tạo website nhận diện khuôn mặt đơn giản bằng face-api.js - Phần 1

Bây giờ hãy mở thư mục dự án với trình soạn thảo bất kì nào mà bạn thích. Chúng ta sẽ đi đến file và thay thế bằng đoạn mã sau:

[js]import React, { Component } from 'react';
import { Route, Router } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import './App.css';</pre>
import Home from './views/Home';

class App extends Component {
render() {
return (
<div className="App">
<Router history={createHistory()}>
<div className="route">
<Route exact path="/" component={Home} />
</div>
</Router>
</div>
);
}
}

export default App;[/js]

Đoạn code trên sẽ giúp chúng ta import  component và tạo một route đến trang đích của chúng ta. 

Tiếp theo chúng ta sẽ tạo một thư mục mới và tạo tập tin trong thư mục này. Code file sẽ như sau:

[js]import React, { Component } from 'react';
import { Link } from 'react-router-dom';</pre>
export default class Home extends Component {
render() {
return (
<div>
<h2>BNK48 Facial Recognition App</h2>
<li>
<Link to="/photo">Photo Input</Link>
</li>
<li>
<Link to="/camera">Video Camera</Link>
</li>
</div>
);
}
}[/js]

Chúng ta cần tạo 2 liên kết là Photo Input có địa chỉ là “localhost:3000/photo”và Video Camera liên kết đến “localhost:3000/camera”. Nếu mọi thứ đều ổn, chúng ta sẽ thấy được kết quả như sau trong trình duyệt của chúng ta.

Tạo website nhận diện khuôn mặt đơn giản bằng face-api.js - Phần 1

Face API

Trước khi tiếp tục, chúng ta cần cài đặt face-api.js và tạo tệp API để kết nối React với API. Bây giờ quay trở lại console và cài đặt thư viện.

npm i face-api.js

Thư viện đi kèm với TensorFlow.js và tất cả các thành phần chúng ta cần, ngoại trừ model weights. Bây giờ hãy tạo thư mục mới để đặt tất cả các model weights của chúng ta. Bạn truy cập vào đây để tải về các gói cần thiết như ảnh bên dưới

Tạo website nhận diện khuôn mặt đơn giản bằng face-api.js - Phần 1

Đảm bảo rằng bạn có tất cả các weights trong thư ảnh minh họa bên dưới, nếu không ứng dụng của chúng ta sẽ không hoạt động nếu không có các weights phù hợp.

react-face-recognition
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── models
│ │ ├── face_landmark_68_tiny_model-shard1
│ │ ├── face_landmark_68_tiny_model-weights_manifest.json
│ │ ├── face_recognition_model-shard1
│ │ ├── face_recognition_model-shard2
│ │ ├── face_recognition_model-weights_manifest.json
│ │ ├── tiny_face_detector_model-shard1
│ │ └── tiny_face_detector_model-weights_manifest.json
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json

Bây giờ hãy quay lại và tạo thư mục API và tạo tệp mới  trong thư mục này. Copy đoạn code sau và đưa vào file face.js vừa tạo:

[js]import * as faceapi from 'face-api.js';</pre>
// Load models and weights
export async function loadModels() {
const MODEL_URL = process.env.PUBLIC_URL + '/models';
await faceapi.loadTinyFaceDetectorModel(MODEL_URL);
await faceapi.loadFaceLandmarkTinyModel(MODEL_URL);
await faceapi.loadFaceRecognitionModel(MODEL_URL);
}

export async function getFullFaceDescription(blob, inputSize = 512) {
// tiny_face_detector options
let scoreThreshold = 0.5;
const OPTION = new faceapi.TinyFaceDetectorOptions({
inputSize,
scoreThreshold
});
const useTinyModel = true;

// fetch image to api
let img = await faceapi.fetchImage(blob);

// detect all faces and generate full description from image
// including landmark and descriptor of each face
let fullDesc = await faceapi
.detectAllFaces(img, OPTION)
.withFaceLandmarks(useTinyModel)
.withFaceDescriptors();
return fullDesc;
}[/js]

Có 2 phần quan trọng trong tệp API này. Đầu tiên là tải các mô hình và weights với chức năng . Chúng ta chỉ tải Tiny Face Detector model, Face Landmark Tiny Model và Face Recognition model ở bước này. Phần quan trọng tiếp theo là chức năng  nhận hình ảnh đầu vào và trả về mô tả đầy đủ của khuôn mặt. Hàm này sử dụng faceapi.fetchImage() để tìm nạp hình ảnh vào API. Sau đó faceapi.detectAllFaces() sẽ tìm tất cả các khuôn mặt trong hình ảnh đó.

Bây giờ tôi sẽ lưu 1 hình ảnh của tôi vào thư mục mới và đặt tên cho nó là . Đây sẽ là hình ảnh để chúng ta có thể kiểm tra ứng dụng.

Cr - Thắng AnonyHome

Hãy tạo một tập tin mới . Đây sẽ là thành phần để nhập và hiển thị hình ảnh của chúng ta.

[js]import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { loadModels, getFullFaceDescription } from '../api/face';</pre>
// Import image to test API
const testImg = require('../img/test.jpg');

// Initial State
const INIT_STATE = {
imageURL: testImg,
fullDesc: null
};

class ImageInput extends Component {
constructor(props) {
super(props);
this.state = { ...INIT_STATE };
}

componentWillMount = async () => {
await loadModels();
await this.handleImage(this.state.imageURL);
};

handleImage = async (image = this.state.imageURL) => {
await getFullFaceDescription(image).then(fullDesc => {
console.log(fullDesc);
this.setState({ fullDesc });
});
};

render() {
const { imageURL } = this.state;
return (
<div>
<img src={imageURL} alt="imageURL" />
</div>
);
}
}

export default withRouter(ImageInput);[/js]

Component này tại thời điểm này, sẽ chỉ hiển thị hình ảnh thử nghiệm và bắt đầu tải các mô hình API vào trình duyệt của bạn, sẽ mất vài giây. Sau đó, hình ảnh sẽ được đưa vào API để có được mô tả toàn diện. Ở đây tôi sẽ lưu lại  để sử sau này bằng console.log.

Tiếp theo chúng ta phải nhập  vào file . Và tạo mới  cho 

[js]import React, { Component } from 'react';
import { Route, Router } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import './App.css';</pre>
import Home from './views/Home';
import ImageInput from './views/ImageInput';

class App extends Component {
render() {
return (
<div className="App">
<Router history={createHistory()}>
<div className="route">
<Route exact path="/" component={Home} />
<Route exact path="/photo" component={ImageInput} />
</div>
</Router>
</div>
);
}
}

export default App;[/js]

Bây giờ, nếu bạn truy cập trong trình duyệt và nhấp vào bạn sẽ thấy màn hình hiển thị ảnh. Nếu bạn kiểm tra trong console của trình duyệt, bạn sẽ thấy Full Face Description của hình ảnh này như hình bên dưới.

Tạo website nhận diện khuôn mặt đơn giản bằng face-api.js - Phần 1

Face Detection Box

Như bạn có thể thấy, mô tả chứa tất cả thông tin khuôn mặt chúng ta cần trong dự án này, bao gồm  và . Bên trong  có hộp thông tin như tọa độ              .

thư viện face-api.js đi kèm với chức năng vẽ hộp phát hiện khuôn mặt bằng cách sử dụng canvas html, Nhưng vì chúng ta đang sử dụng React, vậy tại sao chúng ta không vẽ box bằng CSS, sau đó chúng ta có thể quản lý box và hiển thị nhận dạng tất cả theo cách React.

Chúng ta sẽ chỉnh sửa lại code file src/views/ImageInput.js như sau:

[js]import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { loadModels, getFullFaceDescription } from '../api/face';</pre>
// Import image to test API
const testImg = require('../img/test.jpg');

// Initial State
const INIT_STATE = {
imageURL: testImg,
fullDesc: null,
detections: null
};

class ImageInput extends Component {
constructor(props) {
super(props);
this.state = { ...INIT_STATE };
}

componentWillMount = async () => {
await loadModels();
await this.handleImage(this.state.imageURL);
};

handleImage = async (image = this.state.imageURL) => {
await getFullFaceDescription(image).then(fullDesc => {
if (!!fullDesc) {
this.setState({
fullDesc,
detections: fullDesc.map(fd => fd.detection)
});
}
});
};

handleFileChange = async event => {
this.resetState();
await this.setState({
imageURL: URL.createObjectURL(event.target.files[0]),
loading: true
});
this.handleImage();
};

resetState = () => {
this.setState({ ...INIT_STATE });
};

render() {
const { imageURL, detections } = this.state;

let drawBox = null;
if (!!detections) {
drawBox = detections.map((detection, i) => {
let _H = detection.box.height;
let _W = detection.box.width;
let _X = detection.box._x;
let _Y = detection.box._y;
return (
<div key={i}>
<div
style={{
position: 'absolute',
border: 'solid',
borderColor: 'blue',
height: _H,
width: _W,
transform: `translate(${_X}px,${_Y}px)`
}}
/>
</div>
);
});
}

return (
<div>
<input
id="myFileUpload"
type="file"
onChange={this.handleFileChange}
accept=".jpg, .jpeg, .png"
/>
<div style={{ position: 'relative' }}>
<div style={{ position: 'absolute' }}>
<img src={imageURL} alt="imageURL" />
</div>
{!!drawBox ? drawBox : null}
</div>
</div>
);
}
}

export default withRouter(ImageInput);[/js]

Kết quả chúng ta nhận được khi truy cập lại vào http://localhost:3000 như sau:

Tạo website nhận diện khuôn mặt đơn giản bằng face-api.js - Phần 1

Kết thúc phần 1 trong series “Tạo website nhận diện khuôn mặt đơn giản bằng face-api.js”. Trong phần này chúng ta đã bước đầu hoàn thành ứng dụng bằng việc phát hiện được khuôn mặt trong bức ảnh. Ở bài tiếp theo chúng ta sẽ thực hiện nhận diện khuôn mặt đó. Đừng quên theo dõi website và fanpage AnonyHome để cập nhật bài viết mới nhé. Cảm ơn các bạn!

Xem thêm: Tự học Machine Learning với 4 khoá học online hoàn toàn miễn phí

0 0 vote
Vui lòng đánh giá bài viết
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
XEM THÊM
Hiện nay, mạng Lan phát triển…
0
Bạn thích bài viết chứ? Hãy để lại bình luận.x
()
x