Tự làm app đọc text từ ảnh với Microsoft Cognitive OCR API

Với bộ OCR API của Microsoft Cognitive việc đọc toàn bộ text từ 1 bức ảnh trở nên vô cùng dễ dàng. Trong bài này, tôi sẽ hướng dẫn các bạn sử dụng bộ API này bằng các bước sử dụng Microsoft Cognitive, cụ thể tôi sẽ sử dụng Windows Universal App để build demo.

Step 1

Đầu tiên, các bạn có thể đăng kí một tài khoản miễn phí của Microsoft. Với tài khoản này chúng ta có thể vọc hết các tính năng của Cognitive, tuy nhiên Microsoft sẽ chỉ lưu trữ data của bạn trong vòng 1 ngày.

Step 2

Sau khi có account, hãy vào link này để get cho mình bộ Key mà Microsoft cung cấp cho bạn như hình dưới. Lưu ý bạn phải tìm đúng key của “Computer Vision” nhé.

ocr_01

Step 3

Sau khi get được key chúng ta bắt đầu tạo project và vọc vạch thử thôi.
Việc tạo project thì tôi sẽ ko hướng dẫn đâu nhé ^^ ai không biết thì phải google thôi haha.
Tôi sẽ tạo 1 màn hình đơn giản đủ để sử dụng như sau:

ocr_02

Step 4

Vào code behind và tạo 1 function để gọi API và POST ảnh, function này sẽ nhận vào byte của ảnh chúng ta cần đọc text, và kết quả sẽ trả về toàn bộ text có trong bức ảnh đó:
Lưu ý copy đúng key đã get bên trên vào nhé!

ocr_03

Step 5

Viết action cho 2 buttons để lấy ra ảnh và convert nó sang dạng byte.
Đoạn để browser ảnh từ table sẽ như sau:

ocr_04

Vì ảnh được lấy từ máy sẽ có kiểu Storage File, vậy nên tôi đã viết sẵn 1 function để convert Storage File sang byte như bên dưới:

ocr_05

Step 6

Ok vậy là sau đoạn code bên trên, chúng ta đã có được byte content của bức anh, tiếp theo vô cùng đơn giản, chỉ cần ném nó lên “mây” và chờ kết quả thôi 😛 Gọi function mà chúng ta đã viết bên trên.

ocr_06

Data trả về sẽ có dạng như sau:

ocr_07

Trong đó:

  • language: ngôn ngữ chính có trong bức ảnh
  • textAngle: độ lệch của chữ so với trục ngang
  • orientation: hướng của text so với bức ảnh (có 4 loại là: up, down, left và right)
  • regions: đây là phần chính chúng ta cần quan tâm, regions sẽ bao gồm nhiều lines, mỗi line lại chia làm nhiều words, trong word là nhiều texts gộp lại
  • boundingBox: thành phần như lines, words, text – đều có chi tiết tọa độ x-y-width-heigh của nó so với thành phần cha của nó (tọa độ được tính sau khi đã xoay ảnh theo góc textAngle)

Step 7

Sau khi đã gọi API và có kết quả trả về, tôi sẽ deserialize kết quả ra 1 object và dễ dàng sử dụng nó như sau:

ocr_08

Bên trên các bạn có thấy 1 class tên “Result” đây là class tôi tạo ra nhằm mô phỏng y hệt kết quả trả về từ API để tiện cho việc deserialize:

ocr_09

Vậy là tổng thể function của chúng ta sẽ như sau:

ocr_10

Step 8

Okela, vậy là đã xong, chúng ta build, deploy và xem thành quả thôi (app này sẽ run được trên các máy chạy windows 8, 8.1, 10). Tada, kết quả đê:

ocr_11

Vậy là chúng ta đã đọc thành công 1 bức ảnh toàn text sang 1 biến string để reusable được, với tùy mục đích sử dụng của mỗi người 😀 Ví dụ chụp 1 cuốn sách rồi cho máy tính tự đọc chẳng hạn này ^^

Như vậy tôi đã hướng dẫn các bạn 1 cách rất cơ bản để sử dụng OCR Api của MS Cognitive.

Hãy cùng thử và thảo luận nhiều thêm về OCR các bạn nhé!!!!

Trần Hoàng Giang

Anh Trần Hoàng Giang là chuyên gia với hơn 6 năm kinh nghiệm trong lĩnh vực Mobility. Anh Giang từng là kiến trúc sư giải pháp cho các giải pháp Mobility cho tổ chức chính phủ tại Singapore, đặc biệt cho 1 trong những hãng chế tạo máy bay lớn nhất thế giới. Anh Giang hiện đang công tác tại FPT Software, chịu trách nhiệm chính trong việc tư vấn về cái giải pháp Enterprise Mobility. Đến với AzureVN.NET, anh Giang mong muốn được chia sẻ về Microsoft Azure Mobility, Cognitive Service

giangth has 9 posts and counting.See all posts by giangth

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *