Hackathon: Xây dựng giải pháp biến đổi, stream giấy viết cho giáo dục từ xa

Vừa rồi, chúng tôi đã tham gia Cuộc thi IBM Hackathon tổ chức tại Đại học Bách khoa Hà Nội và may mắn dành giải Nhì cho hạng mục Call For Code với giải pháp biến đổi, stream giấy viết cho giáo dục từ xa. Trong bài viết này, tôi muốn chia sẻ với mọi người về giải pháp nhóm tôi đã thiết kế và triển khai trong 48h của cuộc thi.

Trước hết tôi xin được giới thiệu về giải pháp của nhóm mình. Trên thực tế, trong quá trình học tập, chúng tôi nhận thấy giấy, bảng và bút là những công cụ hữu hiệu nhất để thể hiện các ý tưởng, diễn giải một vấn đề cho người khác. Sinh viên chúng tôi thường rất hay sử dụng những công cụ này trong quá trình học tập. Tuy vậy, trong đại dịch COVID-19, những cồng cụ như giấy, bảng, bút không còn phù hợp trong việc học tập và hội họp online. Thay vào đó, chúng ta cần các công cụ thay thế như máy tính, bảng vẽ, chuột. Các công cụ này phần nào đó có thể thay thế các công cụ truyền thống, tuy nhiên lại đặt ra nhiều khó khăn với sinh viên. Sử dụng chuột để viết, vẽ là khá khó khăn. Các nét chữ, nét vẽ được tạo ra thường nguệch ngoạc, xấu xí. Máy tính bảng và bảng vẽ thường có giá khá đắt, không phù hợp và tiện lợi cho nhiều sinh viên. Giải pháp của chúng tôi là biến đổi ngay luồng camera từ điện thoại, nhận dạng giấy viết, tách ra và lọc các nét vẽ để stream trên các nền tảng giáo dục trực tuyến. Bằng cách này, sinh viên có thể tận dụng các thiết bị sẵn có, lại có thể dùng ngay giấy và bút như khi thảo luận offline. Trong cuộc thi, chúng tôi cũng xây dựng một trang web stream để mọi người có thể sử dụng cho học nhóm và hội họp online.

Các công cụ diễn đạt ý tưởng khi học online

Dưới đây là một video demo về giải pháp của chúng tôi.

I. Thiết kế chung

Vì thời gian có hạn (khoảng 2 ngày), chúng tôi thiết kế một hệ thống đơn giản nhất và khả thi nhất để nhóm có thể hoàn thành. Chúng tôi đã định hướng được thiết kế tổng quát của sản phẩm như hình dưới.

Hệ thống hoạt động bằng cách nhận luồng ảnh từ camera. Ở đây chúng tôi thiết kế một hệ thống sử dụng được đầu vào là camera điện thoại để tận dụng độ phân giải cao và độ phổ biến của điện thoại thông minh hiện nay. Tuy vậy, chúng ta vẫn có thể sử dụng đầu vào là các webcam giá rẻ ngoài thị trường. Thông qua các thuật toán thị giác máy, chúng tôi biến đổi hình ảnh này để tách được phần giấy viết, tách và lọc các nét bút để stream cho nhiều người xem. Đầu ra của quá trình biến đổi là một luồng webcam ảo, đồng nghĩa với việc người dùng có thể dùng luôn luồng camera này cho các phần mềm hội họp trực tuyến hiện nay như Zoom hay Teams. Ngoài ra, chúng tôi cũng xây dựng một trang web hội họp online để người dùng có thể trực tiếp sử dụng.

II. Công nghệ

Các công nghệ được sử dụng trong hệ thống được mô tả qua hình trên. Trong hệ thống này, chúng tôi dùng app có sẵn là IP Webcam để tạo một luồng camera từ điện thoại của người dùng. Tiếp đó, chúng tôi dùng một desktop app để thu luồng camera đó, áp dụng các phương pháp biến đổi, tăng cường ảnh để cắt ra phần chứa nét viết, vẽ, tách lọc nét vẽ và khôi phục các nét bị tay che. Giao diện của desktop app này được xây dựng trên thư viện Qt5. Luồng webcam tạo ra từ app có thể được dùng với các phần mềm hội họp hiện nay như Zoom, MS Teams, thậm chí là Facebook Messenger trên máy tính. Chúng tôi cũng xây dựng một website có khả năng tạo cuộc họp trực tuyến để người dùng có thể sử dụng trực tiếp. Vì thời gian có hạn, website này được xây dựng trên công nghệ và máy chủ streaming có sẵn của vidyo.io, NodeJS cho backend và ReactJS cho phần giao diện web.

Biến đổi và tách nét vẽ

Từ luồng video ban đầu, chúng tôi phát hiện các góc của tờ giấy đã được in sẵn các mã ARUCO. Các mã này có dạng các hình vuông được thiết kế để dễ dàng nhận ra bởi các thuật toán xử lý ảnh. Vui lòng xem thêm tại đây.

Minh hoạ việc phát hiện các mã ARUCO trên giấy. Hình ảnh từ https://docs.opencv.org/

Trong trường hợp này, chúng tôi có 4 mã ARUCO đặt tại 4 góc của tờ giấy. Sau đó chúng tôi dùng các phương pháp ước lượng ma trận chuyển đổi và perspective transform để cắt ra và xoay dọc tờ giấy. Trên thực tế, chúng ta chỉ cần thấy từ 3 mã ARUCO trên tờ giấy là có thể bắt đâù tính toán và thực hiện việc biến đổi này. Từ kết quả thu được, chúng tôi sử dụng phương pháp lọc màu trên hệ màu HSV và YCbCr để xác định các vùng bị tay che qua, đồng thời khôi phục các nét vẽ bị tay che. Cuối cùng, hình ảnh được lọc nhiễu và tách nét viết, vẽ bằng một thuật toán lọc đơn giản. Phương pháp này thể hiện hiệu quả khá tốt trong quá trình thử nghiệm.

Xây dựng website streaming

Chúng tôi cũng xây dựng một website hội họp trực tuyến để sử dụng với luồng camera đã được biến đổi. Streaming là một lĩnh vực khó. Việc cài đặt một website streaming đòi hỏi nhiều công sức. Tuy nhiên, ở cuộc thi này, chúng tôi chỉ có khoảng 48h để thực hiện tất cả mọi việc. Vì thế, chúng tôi sử dụng SDK có sẵn của vidyo.io. Chúng tôi tạo một website với NodeJS và ReactJS rồi tích hợp SDK này cho phần streaming. Bằng cách này, chúng tôi đã có được một website học trực truyến nhanh chóng chỉ sau hơn 1 ngày.

III. Nhận xét và hướng cải tiến

Trong thời gian diễn ra cuộc thi, chúng tôi cũng đã kịp thời xây dựng một giải pháp có thể hoạt động được. Việc nhận video từ điện thoại, biến đổi và stream diễn ra khá thuận lợi. Tuy vậy chúng tôi cũng nhận ra có nhiều phần có thể cải tiến thêm:

Phần phát hiện giấy viết đang sử dụng ARUCO, liệu có cách nào để sử dụng một phương pháp khác để ước tính ra được ma trận biến đổi ảnh thay vì phải in mã ARUCO trên giấy? Chúng tôi nghĩ có thể có phương pháp tốt hơn là sử dụng neural network. Tuy nhiên vì thời gian có hạn, trong cuộc thi này, chúng tôi chưa thể thực hiện thiết kế và huấn luyện mạng.
Phần xoá tay và khôi phục nét đang sử dụng phương pháp lọc màu để xác định tay. Vì thế, đổi khi chúng tôi nhận nhầm các vật khác có màu tương tự bàn tay. Chúng tôi nghĩ có thể làm tốt hơn bằng cách sử dụng một mạng phân đoạn ảnh để tách ra vùng chứa tay, từ đó khôi phục các nét bị tay che khuât.
Việc stream giấy viết sử dụng hình ảnh rất tốn băng thông mạng. Chúng tôi nghĩ có thể tách lấy nét bút và nghiên cứu thêm một thuật toán nén để nén ảnh và chỉ gửi đi các nét bút thay vì gửi cả ảnh như trước. Cách làm như vậy có thể giảm tải rất lớn cho server.

IV. Mã nguồn

Trong bài viết này, tôi muốn chia sẻ mã nguồn của phần desktop app để thu và biển đổi luồng camera. Các bạn có thể xem tại repo này: https://github.com/vietanhdev/paper_stream.

Phụ lục: Giới thiệu về các thành viên trong team

Tôi cũng muốn giới thiệu qua chút về nhóm tôi (ICTLab) vừa tham dự SoICT - IBM Hackathon. Lần lượt từ trái qua có tôi (Việt Anh) - team lead, chịu trách nhiệm phần biến đổi luồng ảnh từ camera điện thoại, các thuật toán xác định và tách lọc nét vẽ, Vương - chịu trách nhiệm hệ thống backend để cho website streaming, An - chịu trách nhiệm thuật toán tách và khôi phục các nét bút bị tay che khuất, và cuối cùng là Tư - thực hiện phần frontend cho website streaming. Đây là lần đầu tiên cả 4 thành viên tham dự một cuộc thi Hackathon. Trong quá trình làm, chúng tôi cũng giúp đỡ nhau rất nhiều trong các mảng khác nhau để hoàn thành được mục tiêu trong thời gian ngắn.