Toàn bộ series Nhận diện Idol:
- Phần 1 – Chuyện ngày xưa – về sự ra đời của Nhận Diện Idol
- Phần 2 – Kiến trúc và các công nghệ sử dụng
- Phần 3 – Nào mình cùng đi cào dữ liệu
- Phần 4 – Nhận diện khuôn mặt với Microsoft Cognitive Service
- Phần 5 – Testing thuật toán – Sự thật về độ chính xác 60-80%
- Phần 6 – Từ demo tới deploy – Vô Thai Kiếm (Serverless Architecture)
Sau bao ngày chờ đợi thì phần 3 của series cũng được ra mắt các bạn đọc. Lý do phần này bị mình “ngâm dấm” hơi lâu là do… JAV và 18+.
Do blog có nhiều trẻ em và cụ già đọc nên mình không thể thoải mái để link và hình ảnh 18+ trong bài viết được. Vì thế mình thay đổi hướng tiếp cận vấn đề. Thay vì nhận diện JAV Idol, chúng ta sẽ chuyển qua nhận diện… VAV Idol.
Sản phẩm cuối cùng của chúng ta sẽ có tương tự thế này, với kiến trúc đơn giản dễ hiểu hơn “Nhận diện Idol” nhiều: http://jav-idol.toidicodedao.com/vav/. Bắt đầu thôi nào!
Dữ liệu từ đâu ra?
Trong các dự án machine learning và data maning, dữ liệu đầu vào vô cùng quan trọng. Thuật toán tốt đến mấy mà có quá ít dữ liệu mẫu, hoặc dữ liệu chất lượng không tốt thì cũng vứt, không thể cho kết quả tốt được. Để nhận diện được chính xác, ta phải có dữ liệu về tên idol cũng như ảnh của họ (càng nhiều càng tốt) để dạy cho máy.
Để tìm dữ liệu cho “Nhận diện idol”, mình phải lục tìm kha khá các trang JAV (xin thề là mình xem các trang này vì mục đích nghiên cứu học thuật). Sau khi đã tìm được, mình bắt đầu sử dụng HTMLAgilityPack để crawl dần dữ liệu. Do crawl dữ liệu nên hệ thống phải phụ thuộc vào nguồn dữ liệu của trang đấy (Đó là lý do ban đầu database của mình không có Takizawa Laura và Rina Ishihara).
Vì vậy, trong series này chúng ta không đi “cào” dữ liệu nữa, mà sẽ lấy trưc tiếp từ Bing Image Search (Không dùng của Google vì Bing dễ cài đặt hơn).
Tìm hiểu Bing Image Search
Bing Image Search là một API nằm trong bộ Microsoft Cognitive API. Có thể hiểu một cách đơn giản là API này nhận vào nội dung ta muốn tìm kiếm và trả về hình ảnh liên quan.
Để có thể tiếp tục, các bạn hãy tạo cho mình 1 account Microsoft Cognitive Service nhé:
1. Vào đây để đăng ký: https://www.microsoft.com/cognitive-services/en-us/sign-up. Nếu có github hoặc linkedin thì dùng cho tiện. Sau khi đăng ký, nhớ vào hộp mail và active tài khoản theo link được gửi nhé.
2. Sau khi đăng nhập, bạn vào link này: https://www.microsoft.com/cognitive-services/en-us/bing-image-search-api. Bấm Get Started for Free -> Kéo xuống bấm Subscribe để đăng kí sử dụng API. (Nếu chưa active thì bấm Send Verification rồi vào hộp mail, bấm link để active).
3. Bạn tiếp tục vào đây để kiểm tra các đăng kí của mình: https://www.microsoft.com/cognitive-services/en-us/subscriptions, nếu thấy BingSearch là OK. Bấm Copy để copy Key, lưu key vào chỗ nào đó để còn sử dụng
4. Đến đây là bạn có thể bắt đầu sử dụng Bing Search API rồi. Hãy bỏ 5 phút vào đây đọc document của API này để biết cách sử dụng nhé.
5. Thử API: Chúng ta bật Postman lên và bắt đầu test thử nào (Xem lại hướng dẫn dùng Postman ở bài trước)., dán link sau đây và chọn method GET: https://api.cognitive.microsoft.com/bing/v5.0/images/search?q=ngọc trinh&count=30.
Ta muốn tìm ảnh “Ngọc Trinh” nên dùng param q=Ngọc Trinh. Trong mục header, hãy tạo 1 header với key là Ocp-Apim-Subscription-Key, value là key bạn vừa copy khi nãy.
Ta nhận được kết quả JSON từ API. Hãy chú ý 2 trường thumbnailUrl và contentUrl. Thử copy kết quả từ contentUrl ra xem nào.
Ok, nhìn dáng ngon thế này thì đúng là Ngọc-Còn-Trinh rồi. Chúng ta bắt đầu dùng API này để kiếm hình ảnh cho các Vietnam Idol nào.
Bắt đầu code và lấy dữ liệu
Để dễ demo, mình xin dùng một danh sách gồm 12 idol xinh đẹp sau (Bạn nào không thích có thể xem code bên dưới, thay thế bằng các idol khác)
- Ngọc Trinh
- Bà tưng
- Hường Hana
- Hoang Thùy Linh
- Elly Trần
- Thuỷ Top
- Tâm Tít
- Midu
- Miu Lê
- Chi Pu
- Khả Ngân
- Angela Phương Trinh
Ta sẽ viết một chương trình nhỏ nhỏ để gọi API của Microsoft, lấy dữ liệu về và lưu dưới dạng JSON. Do lười nên mình sẽ dùng JavaScript để viết, chạy thẳng từ browser luôn, khỏi cần cài đặt gì phức tạp.
Đây là source code của chương trình, các bạn đọc comment để hiểu code nhé. Có 2 điều cần lưu ý:
- Ở dòng 21, hãy thay key bằng key của Microsoft mà các bạn đăng kí phía trên
- Có vài đoạn mình dùng async/await để code dễ đọc hơn, đỡ phải dùng callback. Cứ tạm hiểu async/await là cách để gọi hàm asynchonous và không cần callback nhé. Mình sẽ có bài viết giải thích kĩ hơn sau.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Danh sách tên các idol cần lấy | |
| let allIdols = [ | |
| "Ngọc Trinh", | |
| "Bà tưng", | |
| "Hường Hana", | |
| "Hoàng Thùy Linh", | |
| "Elly Trần", | |
| "Thuỷ Top", | |
| "Tâm Tít", | |
| "Midu", | |
| "Miu Lê", | |
| "Chi Pu", | |
| "Khả Ngân", | |
| "Angela Phương Trinh" | |
| ]; | |
| // Hàm gọi Bing Search API để lấy ảnh | |
| async function getImage(query) { | |
| console.log(`Begin getting images for ${query}`); | |
| var key = '******c35ad9854f28'; // Thay bằng API Key của bạn | |
| // Gọi API, truyền key vào header, lấy kết quả trả về dạng | |
| var url = `https://api.cognitive.microsoft.com/bing/v5.0/images/search?q=${query}&count=30`; | |
| var result = await fetch(url, { | |
| method: 'GET', | |
| headers: { | |
| 'Ocp-Apim-Subscription-Key': key | |
| } | |
| }).then(rs => rs.json()); | |
| console.log(`Finish getting images for ${query}`); | |
| // Lọc bớt, chỉ lấy link thumbnail và link ảnh | |
| return result.value.map(vl => { | |
| return { thumbnail: vl.thumbnailUrl, image: vl.contentUrl }; | |
| }); | |
| } | |
| // Hàm tải dữ liệu về dưới dạng file .json | |
| function downloadJson(jsonObject) { | |
| var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(jsonObject)); | |
| var dlAnchorElem = document.createElement('a'); | |
| dlAnchorElem.setAttribute("href", dataStr); | |
| dlAnchorElem.setAttribute("download", "idols.json"); | |
| dlAnchorElem.click(); | |
| }; | |
| // Bắt đầu chạy chương trình | |
| (async() => { | |
| let index = 1; | |
| let idolWithImage = []; | |
| // Lấy ảnh của mỗi idol trong danh sách | |
| for (let idol of allIdols) { | |
| var images = await getImage(idol); | |
| idolWithImage.push({ | |
| id: index++, | |
| name: idol, | |
| images: images | |
| }); | |
| } | |
| console.log(idolWithImage); | |
| // Tải dữ liệu về dưới dạng | |
| downloadJson(idolWithImage); | |
| })(); |
Để chạy chương trình, các bạn bấm Ctrl+Shift+I để mở Chrome Developer Tool, qua mục Console, dán code vào và Enter thôi nhé.
Kết quả của chương trình là một file có tên idols.json chứa ID, tên và ảnh của link ảnh của các idol.
Lọc dữ liệu
Ta có thể làm thêm một bước lọc bằng tay để tăng độ chính xác của dữ liệu. Mình có viết 1 tool nhỏ nhỏ hỗ trợ việc này:
- Các bạn vào link này: http://embed.plnkr.co/kYlC10YPyyHT5FAuIZ8e/, copy nội dung file idols.json trên máy rồi paste vào thay thế cho file idols.json trong này.
2. Kiểm tra các ảnh của idol bên phần preview. API của Microsoft cần ảnh dạng chính diện, ảnh một người. Nếu thấy tấm nào sai người, đông người hoặc không rõ mặt, bạn có thể bấm Delete để xóa (Tool chỉ hiện thumbnail, click vào ảnh để xem hình lớn).
3. Kéo xuống dưới cùng, bấm Save Data để tải file filtered-idols.json về.
Kết
Chúc mừng các bạn đã kết thúc phần 3 khá dài hơi của series Nhận Diện Idol. Sau phần 3, chúng ta đã có dữ liệu của 12 idol với hơn 20 ảnh mỗi người để training cho máy.
Ờ phần sau, chúng ta sẽ tìm hiểu về cơ chế nhận diện khuôn mặt cũng như cách sử dụng API của Microsoft (Tương tự như Bing API thôi, không khó đâu).
Nếu có thắc mắc hay khó khăn gì, các bạn cứ thoải mái comment nhé.
Từ coder đến developer - Tôi đi code dạo 
đã dùng async await rồi thì không cần dùng promise (.then) nữa đâu, ah hihi
LikeLiked by 1 person
Chào Hoàng, mình muốn hỏi làm thế nào để crawl dữ liệu trong biến javascript. Nghĩa là khi load trang sử dụng trình duyêt, trong console ta gõ tên biến chứa thông tin, khi view source code thì ko có tên biến này. Vậy khi viết tool làm thế nào để mình có thể đọc giá trị của các biến javascript đó. Cảm ơn Hoàng.
LikeLike
Cái này mình chịu, trước giờ crawl người ta vẫn thường crawl html thôi, bạn thử đổi hướng tiếp cận nhé ;).
LikeLiked by 1 person
Trang demo của bạn ko chạy tốt lắm, chẳng hạn Link “Chi pu” này ko nhận diện được:
Còn link này nữa: Hoàng Thùy Linh được nhận thành Angela Phương Trinh
Chẳng lẽ phải “train” thêm để AI thông minh hơn?
LikeLike
Um, chờ tới phần 5 sẽ rõ bạn nhé ;).
LikeLike
e chào anh Hoàng, link http://embed.plnkr.co/kYlC10YPyyHT5FAuIZ8e/ , hiện tại e vào ko dc
LikeLike
chắc tại website bị lag , h thì vào được lại rồi 😀
LikeLike
cho e xin tên idol trong bức ảnh cuối bài viết với :))
LikeLike
Anh cho em hỏi, em dùng API bing images search v7.0, khi chạy code search đến người thứ 5 nó báo lỗi 429, too many request, qua đến người thứ 6 thì cannot read property ‘map’ ò undefined, rồi nó fetch fail luôn, ko chạy tiếp cũng ko xuất ra file json. Em đọc document cũng ko thấy nói giảm lượng request ở version mới, vậy là do code hả anh?
LikeLike
ừm có khi do gọi quá nhiều request cùng lúc đó e 😀
LikeLike