Chuyện coding

Gắn râu Sơn Tùng – Phần 1 : Bắt chước tính năng cực hay của Snapchat và Facebook

6 Comments

Hôm trước, mình có nhận được một câu hỏi tưởng chừng đơn giản nhưng lại rất hóc búa từ một bạn đọc:

Anh ơi, tại sao Facebook Messenger và Snapchat có thể làm các filter ngầu lòi, có thể gắn râu, gắn tai thỏ, đội mũ cho người dùng qua camera vậy.

Đằng sau một tính năng vui vui, đơn giản như vậy lại là một nền tảng các công nghệ cực kì phức tạp từ facial recognition cho đến image processing, hoàn toàn… không dễ một xíu nào.

Vì thế, trong bài này, chúng ta cùng tìm hiểu cơ chế hoạt động của chúng, sau đó làm một ứng dụng tương tự mang tên … gắn râu Sơn Tùng nhé.

Series này gồm 3 phần:

  1. Cơ chế hoạt động của các filter Snapchat và Facebook Messenger
  2. Làm quen với các thư viện và API cần sử dụng
  3. Gắn râu bằng cách kết hợp Face Detection + Image Processing và… Toán Học

 

Đây là ảnh gốc Sơn Tùng trước khi được gắn râu:

https://gph.is/2H2Gn4U

Còn đây là ảnh Sơn Tùng sau khi đã gắn râu nhờ ứng dụng:

https://gph.is/2IWr6mK

Thú vị chưa nào? Chúng ta cùng bắt đầu nhé!

Họ đã làm điều đó… như thế nào?

Trong lập trình, khi muốn giải quyết một vấn đề, chúng ta phải biết cách tách nó thành những vấn đề nhỏ hơn, sau đó giải quyết từng vấn đề một.

Do vậy, trước khi cắm đầu vào code, mình sẽ giải thích cơ chế hoạt động của các filter trên Snapchat, Messenger trước nhé.

Đầu tiên, các bạn phải hiểu cách máy tính lưu trữ file ảnh và video. Một video bao gồm nhiều frame (khoảng 24 frame hoặc 30 frame cho mỗi giây).

Qui trình nhận diện (đơn giản hóa)
  1. Khi các bạn dùng filter của Snapchat, Messenger, chúng sẽ đọc từng frame từ camera. Sau đó sử dụng thuật toán để tìm ra khuôn mặt (face detection) của bạn trong frame đó.
  2. Đến khi đã tìm được mặt của bạn, hệ thống tiếp tục dùng thuật toán để tìm những đặc điểm trên khuôn mặt của bạn như mắt, mũi, miệng (face landmark detection).
  3. Sau khi đã xác định được mắt, mũi, miệng, trán … hệ thống sẽ gắn thêm ảnh vào các frame này.
  4.  Các frame này sẽ được hiển thị lại thành video trên camera. Tốc độ xử lý phải vô cùng nhanh (24-30 frame/s). Kết quả là các bạn sẽ thấy mặt mình được gắn hoa, gắn mũi chó, đeo kính.

Ứng dụng mà chúng ta sẽ làm

Như mình đã nói, để thực hiện việc gắn râu, gắn hoa,… thông qua camera, tốc độ xử lý phải vô cùng nhanh (24-30 frame/s).

Thông thường, các ứng dụng này sẽ có một bộ thư viện nhận diện, chứa các thuật toán nhận diện khuôn mặt chạy offline ngay trên di động.

Tuy nhiên, do … lười, mình sẽ tái sử dụng lại API nhận diện khuôn mặt của Microsoft, thứ mà mình đã sử dụng để xây dựng ứng dụng Nhận Diện Idol.

Microsoft Cognitive API là thứ mình đã dùng để viết ứng dụng, Nhận Diện Idol

Hạn chế của API này là phải sử dụng internet, gọi API thông qua HTTP call. Do vậy ứng dụng của mình không thể xử lý video ngầu như Messenger, Snapchat mà chỉ có thể xử lý ảnh thường và ảnh GIF.

Ứng dụng Gắn Râu Sơn Tùng sẽ hoạt động như sau:

  1. Tách ảnh GIF ra thành nhiều ảnh nhỏ hơn
  2. Dùng Microsoft Cognitive API để xác định khuôn mặt trong ảnh
  3. Dùng thuật toán tự viết để gắn râu vào ảnh
  4. Ghép các ảnh đã gắn râu lại thành ảnh GIF hoàn chỉnh

https://gph.is/2IWr6mK

Đồ chơi cần chuẩn bị

Để làm ứng dụng này, ta không cần cài đặt tùm lum gì cho phức tạp, chỉ cần NodeJS là được. Nếu bạn nào đã làm theo series Nhận Diện Idol thì có thể dễ dàng làm theo bài viết này.

1. Trước tiên, chúng ta cần API Key của Microsoft Face API để có thể gọi API đó.

Các bạn làm theo hướng dẫn trong bài này nhé: https://toidicodedao.com/2017/01/17/series-nhan-dien-idol-phan-3-thu-thap-du-lieu/. Nhớ chọn FaceAPI nha!

Được 2 cái key dưới này là ok

 

2. Cài đặt NodeJS nếu chưa cài: https://nodejs.org/en/download. Bản 8.11 hay 9.11 đều được nha.

3. Chúng ta khởi tạo project NodeJS bằng cách tạo 1 folder mới.

Dùng command line để vào folder đó. Sau đó gõ “npm init“, sau đó “npm install –save-dev request request-promise jimp” để cài các thư viện cần thiết.


npm init
npm install –save-dev request request-promise jimp

view raw

install.sh

hosted with ❤ by GitHub

4. Chúng ta tạo file index.js, bắt đầu viết code gọi Microsoft Cognitive API thông qua HTTP để nhận diện khuôn mặt từ url ảnh nhé.

Các bạn nhớ thay key của bạn ở dòng số 4 nha.


const rp = require('request-promise');
async function detectImage(source) {
const subscriptionKey = "[thay bằng key của bạn]";
const uri = "https://westcentralus.api.cognitive.microsoft.com/face/v1.0/detect";
const options = {
uri,
qs: {
returnFaceId: true,
returnFaceLandmarks: true, // Nhận diện các điểm trên khuôn mặt
},
method: 'POST',
headers: {
'Ocp-Apim-Subscription-Key': subscriptionKey
},
body: {
url: source
},
json: true
};
const result = await rp(options);
return result;
}
(async () => {
const imageUrl = 'https://pbs.twimg.com/media/DWr05hUXcAA9s8n.jpg'
const result = await detectImage(imageUrl);
console.log(JSON.stringify(result, null, 2));
})();

view raw

index.js

hosted with ❤ by GitHub

5. Chúng ta đưa url sau vào để thử nhận diện: https://pbs.twimg.com/media/DWr05hUXcAA9s8n.jpg.

Yua Mikami – Best newcomer AV actress 2016. Cho sẵn info để các bạn khỏi xin

Các bạn có thể thay bằng ảnh bất kì nhé! Hi vọng hệ thống ko nhận nhầm 2 cái bánh bao phía dưới.

6. Sau khi viết code xong, ta vào command line gõ “node index.js“, nếu thấy kết quả trả về là bạn đã thành công rồi nhé!

Kết quả trả về là 1 JSON array chứa tọa độ các điểm trên khuôn mặt

Tạm kết

Tới đây bài cũng đã dài rồi. Chúng ta đã tìm hiểu cách thức các filter hoạt động, cũng như setup sẵn sàng đồ chơi cần thiết để bắt đầu viết code.

Ở phần sau, chúng ta sẽ tiếp tục đi sâu vào mảng image processing, xây dựng ứng dụng Gắn Râu JAV Idol, nhầm, Gắn Râu Sơn Tùng nhé!

6 thoughts on “Gắn râu Sơn Tùng – Phần 1 : Bắt chước tính năng cực hay của Snapchat và Facebook”

  3. Hi Hoàng, mình đã làm theo các bước, nhưng khi chạy nó có lỗi là “statusCode”:404,”message”:”Resource not found”. Key và link endpoint của mình như bên dưới, bạn kiểm tra lại giúp với được không?
    `Endpoint: https://westcentralus.api.cognitive.microsoft.com/vision/v1.0
    Key 1: d7c338e9e257499d83323eb97916f5a8
    Key 2: 36c00cf64736486b94e7fef6c5dc0d38
    Cảm ơn.

    Like

    Reply

  4. Bây giờ ko rõ face detection bằng Viola–jones còn dc dùng nhiều ko nhỉ? Bây giờ thấy mn toàn nói nhiều về SSD vơi YOLO, mjh lại thấy RCNN dễ thông hơn

    Like

    Reply

Leave a comment