Đồ án xây dựng trang web hỗ trợ dịch manga mangatranslate

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM -🙚🙘🕮🙚🙘 - BÁO CÁO ĐỒ ÁN 1: XÂY DỰNG TRANG WEB HỖ TRỢ DỊCH MANGA MANGATRANSLATE Giảng viên hướng dẫn: Huỳnh Hồ Mộng Trinh Sinh viên thực hiện: 20520613 – Nguyễn Văn Linh 20520561 – Hồng Gia Hy Tp.HCM, tháng năm 2023 Nhận xét giảng viên hướng dẫn Người nhận xét Huỳnh Hồ Mộng Trinh LỜI CẢM ƠN Để hoàn thành đồ án này, chúng em xin gửi lời cảm ơn chân thành đến: Giảng viên Huỳnh Hồ Mộng Trinh giúp đỡ, định hướng hướng đồ án, thiếu sót đồ án nhóm chúng em hỗ trợ thơng tin cần thiết Đó góp ý quý báu cho nhóm chúng em trình thực dự án Trong trình thực kiến thức kinh nghiệm có hạn chế nên khơng thể tránh khỏi sai sót nhóm chúng em ln mong muốn tiếp thu đánh giá, góp ý phản hồi từ giảng viên Chúng em chân thành cảm ơn xin chúc cô gặp điều may mắn TP.HCM, tháng năm 2023 Nhóm sinh viên thực Nguyễn Văn Linh – Hồng Gia Hy TỔNG QUAN BÁO CÁO TÊN ĐỀ TÀI: Xây dựng website dịch manga trực tuyến GIẢNG VIÊN HƯỚNG DẪN: Huỳnh Hồ Thị Mộng Trinh THỜI GIAN THỰC HIỆN: Từ ngày 05/03/2023 đến hết ngày 10/06/2023 NỘI DUNG: Lý chọn đề tài ● Trong thời đại công nghệ phát triển, người hướng đến công cụ cách tiện lợi công việc giải trí ngày Đọc sách hay truyện tranh hoạt động thiếu bạn trẻ người trưởng thành Tuy nhiên ln có rào cản vơ hình mang tên ngôn ngữ phần ngăn người đọc tác phẩm mà u thích ● Hiện để tìm đọc tác phẩm có nhiều nguồn truy cập Tuy nhiên, khơng phải lúc ngôn ngữ mà biết Do đó, người đọc mơ hồ khó khăn việc thưởng thức tác phẩm ● Cũng độc giả gặp khó khăn việc đọc ngơn ngữ nước ngồi , chúng em hiểu rõ mong muốn tìm kiếm giải pháp để giải tình trạng Chúng em định chọn đề tài để giúp người có nhu cầu dịch trực tiếp tác phẩm mà cụ thể truyện tranh, giúp cho việc đọc truyện trở nên dễ dàng tiện lợi Hiện trạng trang web dịch thuật nay: ● Giao diện khó dùng cho người tiếp xúc với thiết bị công nghệ ● Thiếu số tính cần thiết ● Các tính quan trọng chưa thực bật ● Khó khăn việc dịch bong bóng thoại ● Thường khơng miễn phí => Với vấn đề trên, chúng em định lựa chọn đề tài xây dựng website dịch manga để tiến hành nghiên cứu xây dựng Mục tiêu đề ● Xây dựng website giải vấn đề sau: ● Dịch ảnh chứa chữ ● Xem chữ tách từ ảnh ● Có thể sửa lỗi dịch cách thủ công ● Xác định bong bóng thoại manga ● Trả ảnh qua xử lí dịch Phạm vi, quy mô ● Môi trường, platform: website ● Phạm vi chức năng: ● Nhận ảnh từ thiết bị sau tiến hành xử lý dịch trực tuyến website o Có thể xác định ký tự có ảnh o Hiển thị rõ câu có ảnh o Có thể chỉnh sửa ký tự lấy từ ảnh đồng ý tiến hành dịch ảnh Đối tượng sử dụng: Tất người dùng có nhu cầu dịch manga Phương pháp thực hiện: ● Phương pháp làm việc: Làm việc nhóm thành viên thơng qua phương thức online offline hướng dẫn giảng viên hướng dẫn ● ● Phương pháp nghiên cứu: ● Phân tích nhu cầu sử dụng đối tượng người dùng ● Nghiên cứu tài liệu công nghệ liên quan ● Kiểm tra, tham khảo website khác để tối ưu hóa trang web Phương pháp cơng nghệ: ● Tìm hiểu ngơn ngữ áp dụng framework vào để tối ưu hóa hiệu suất ● Xây dựng giao diện web để tương tác với người dùng nhận phản hồi, sửa chữa cần thiết để đưa sản phẩm hồn chỉnh ● Tìm hiểu cách thức hoạt động tính trang web ● Tìm hiểu thư viện hỗ trợ cho dự án Nền tảng công nghệ: ● Front-end: ReactJS ● Back-end: Python Kết mong đợi: ● Hoàn thiện website đáp ứng đa số mục tiêu đề ● Trang web thực xác yêu cầu người dùng ● Trang web có khả tương tác với người dùng với mức độ ổn định ● Các chức website hoạt động đắn, xác, dễ sử dụng Hướng phát triển: ● Từ xây dựng website phát triển thành extension để dịch truyện cách tự động trang web ● Bổ sung tính chọn ngơn ngữ dịch ● Phát triển hỗ trợ đa tảng Kế hoạch làm việc: ● Thời gian thực hiện: Từ ngày 10/03/2023 đến hết ngày 10/06/2023 ● Quy trình làm việc lên kế hoạch triển khai sau: ● Giai đoạn (10/3/2023 - 24/4/2023): Nghiên cứu phát triển phương thức xác định văn hình ảnh Giai đoạn gồm sprint: o Sprint 1: Tìm hiểu cơng nghệ, framework liên quan o Sprint 2: Phân tích yêu cầu o Sprint 3: Xây dựng backend, phát triển số chức ● Giai đoạn (25/4/2023 - 15/5/2023): Hoàn thiện backend bắt đầu xây dựng fontend Giai đoạn gồm sprint: o Sprint 4: Hồn thiện tính cịn tiến hành backend, tìm sửa lỗi trình xây dựng chức o ● Sprint : Triển khai xây dựng fontend, viết báo cáo Giai đoạn (15/05/2023 - 10/06/2023) Kiểm tra lỗi hoàn thiện sản phẩm Giai đoạn gồm sprint: o Sprint 6: Kiểm tra lại tổng quan sản phẩm sửa lỗi o Sprint 7: kiểm tra file báo cáo, chỉnh sửa thay đổi có Phân cơng cơng việc: 10 ● ● Cơng việc chung: ● Phân tích u cầu ● Khảo sát trang web ● Nguyên cứu công nghệ, ngôn ngữ ● Viết báo cáo Công việc riêng: ● Hồng Gia Hy : front-end, UX/UI design ● Nguyễn Văn Linh: back-end, front-end, UX/UI design Chương – TỔNG QUAN VỀ ĐỀ TÀI 1.1 Giới thiệu đề tài 1.1.1 Sự tiện lợi công cụ dịch thuật lí chọn đề tài: 1.2 Khảo sát ứng dụng hỗ trợ dịch manga nay: 1.3 Đối tượng nghiên cứu: 11 Chương – CƠ SỞ LÝ THUYẾT 12 2.1 React JS 12 2.2 Typescript 13 2.3 Python 14 2.4 OpenCV 15 2.5 EasyOCR 16 2.6 Google Cloud Translation 17 Chương – PHÂN TÍCH HỆ THỐNG 19 3.1 Tổng quan hệ thống 19 3.2 Sơ đồ UseCase 19 3.2.1 Danh sách actor 20 3.2.2 Danh sách Use-case 20 3.3 Đặc tả Use Case 21 3.4 Sơ đồ Activity 24 Chương – HIỆN THỰC HỆ THỐNG 25 4.1 Quá trình hệ thống hoạt động 25 4.1.1 Cách thức lấy xóa văn khỏi ảnh 25 4.1.2 Dịch văn xác định từ ảnh 30 4.2 Giao diện hệ thống 31 4.2.1 Màn hình bắt đầu 31 4.2.2 Màn hình xử lý 33 Chương – Kết luận 37 5.1 Ưu điểm 37 5.2 Nhược điểm 37 5.3 Hướng phát triển tương lai 37 Chương – TỔNG QUAN VỀ ĐỀ TÀI 1.1 Giới thiệu đề tài 1.1.1 Sự tiện lợi cơng cụ dịch thuật lí chọn đề tài: Trong thời đại quốc tế hóa, nhu cầu tiếp cận đến nguồn tài liệu phương tiện giải trí ngày quan tâm đặc biệt nói đến tác phẩm sáng tác ngơn ngữ nước ngồi Tuy nhiên khơng cịn mối quan ngại thời đại 4.0 có cơng cụ dịch thuật tiện lợi giúp ta hiểu tài liệu mà khơng cần phải biết ngơn ngữ nước ngồi Tất người dùng cần phải làm ảnh mà cụ thể trang manga thiết bị có kết nối internet Một số ưu điểm việc dịch manga trực tuyến kể đến sau: - Linh hoạt: Người dùng cần điện thoại di động laptop với vài thao tác, người dùng đọc nội dung có ảnh - Tiện lợi: Có thể thay cho việc sử dụng từ điển để dị dịch cách thủ cơng Bởi tiềm tính tiện dụng nó, chúng em chọn đề tài với mong muốn tạo ứng dụng giúp cho việc đọc manga dễ dàng 1.2 Khảo sát ứng dụng hỗ trợ dịch manga nay: Hiện có số trang web dịch thuật ý đến IchigoReader, Cotrans,… Các trang web vừa nêu dễ có giao diện thân thiện, có tương đồng chức ngồi có khuyết điểm có chức khơng cần thiết, lược bỏ để hướng đến đơn giản tiện lợi cho người dung, khơng hồn tồn miễn phí, Hình 1.1: Website IchigoReader 10 Chương – HIỆN THỰC HỆ THỐNG 4.1 Quá trình hệ thống hoạt động 4.1.1 Cách thức lấy xóa văn khỏi ảnh Để xóa văn khỏi hình ảnh trải qua ba bước: ● Xác định văn hình ảnh lấy tọa độ hộp giới hạn văn ● Đối với hộp giới hạn, áp dụng mặt nạ thuật tốn biết nên tơ phần hình ảnh 25 ● Cuối cùng, áp dụng thuật toán inpainting để inpaint vùng bị che hình ảnh, dẫn đến hình ảnh khơng có văn bản, sử dụng cv2 Lấy văn từ ảnh: 26 - Sau hình ảnh EasyOCR xử lý xác định văn khung với tọa độ định Xóa văn khỏi ảnh: - Cv2 có hai thuật tốn inpainting khả dụng cho phép áp dụng mask hình chữ nhật, hình trịn đường thẳng - Trong trường hợp này, định sử dụng mặt nạ đường kẻ, chúng linh hoạt để che văn theo hướng khác (mặt nạ hình chữ nhật hoạt động tốt từ song song vng góc với trục x mặt nạ hình trịn bao phủ khu vực lớn mức cần thiết) - Dựa vào tọa độ xác định tiến hành xóa văn khỏi ảnh 27 Đây vùng mask tương ứng với từ “Tuesday” Cuối cùng, inpaint hình ảnh: 28 Đây hình ảnh sau thực xóa văn “Tuesday” Một số ví dụ cho bước xác định xóa văn khỏi ảnh: 29 4.1.2 Dịch văn xác định từ ảnh Việc xác định văn thường gặp phải sai sót số yếu tố đến từ kiểu chữ, kích cỡ, phơng chữ phức tạp khiến cho hệ thống cho kết không mong muốn Chính nhóm em có thêm bước để chỉnh sửa thủ công nội dung lấy từ ảnh tiến hành dịch thông qua google API Sơ đồ trình tự qua trình dịch văn bản: 30 4.2 Giao diện hệ thống 4.2.1 Màn hình bắt đầu 31 Mơ tả chi tiết : - Chọn ảnh manga từ file máy tính để bắt đầu dịch - Nhấp vào button “Detect Bubble” để tiến hành xác định văn ảnh - Nhấp button “Remove/Change Image” để hủy thao tác chọn ảnh manga khác 32 4.2.2 Màn hình xử lý 33 4.2.2.1 Ảnh sau hệ thống xử lý Mô tả chi tiết: - Những khung bong bóng thoại manga xác định đánh dấu - Các ký tự văn hệ thống định vị để tiến hành xử lý bước 4.2.1.2 Khung kết ký tự văn lấy 34 Mô tả chi tiết: - Các văn xác định lấy từ ảnh manga - Các khung text input để thuận lợi cho việc sửa thủ cơng nội dung lấy xuống - Các dịch nội dung văn thể thiện bên phải - Các nút bên phải dùng để xác nhận dòng cần dịch không 4.2.1.3 Các tùy chọn cho văn sau dịch Mơ tả chi tiết: 35 - Có thể tùy chỉnh số chữ dòng cỡ chữ sau dịch để tiến hành dán lại ảnh manga - Chỉnh Font chữ mong muốn để sử dụng cho văn sau dịch 4.2.1.4 Các tùy chọn xử lý ảnh Mô tả chi tiết: - Nhấp button “Translate Comic” để tiến hành dịch manga - Nhấp button “Remove Text in Comic” để xóa tồn văn có ảnh manga Mô tả chi tiết: - Nhấp vào checkbox “Hiển thị văn gốc” để hiển thị văn hệ thống lấy từ ảnh để dễ dàng so sánh với văn dịch - Nhấp vào checkbox “Sử dụng hình để dịch” ta sửa tiếp tục ảnh mà vừa dịch Có thể dùng để dịch văn riêng lẻ mà không ảnh hưởng tồn 4.2.1.5 Kết 36 Mơ tả chi tiết: - Các văn sau dịch vẽ lại vào ảnh - Các vị trí vẽ lại vị trí xóa xử lý bước trước - Có thể điều chỉnh size số dịng thể kết - Chọn font chữ mong muốn để dán vào ảnh 37 Chương – Kết luận 5.1 Ưu điểm ● Trang web dịch manga tiện lợi dùng lúc ● Giao diện thân thiện, dễ sử dụng làm quen ● Hỗ trợ việc đọc manga tối đa cách dịch xác định văn ● Hệ thống tối ưu việc sửa chữa cải tiến tương lai ● Áp dụng thư viện công nghệ tiên tiến việc nhận dạng ký tự quang học 5.2 Nhược điểm ● Cần phải tải ảnh máy trước để sử dụng công cụ ● Đối với ảnh phức tạp thời gian xử lý dài ● Những ảnh có độ phân giải thấp gặp khó khan việc lấy chữ ● Gặp khó khăn việc xác định ký tự văn có kiểu chữ lạ ● Chưa thể dự đoán cho nội dung lấy từ ảnh xác 5.3 Hướng phát triển tương lai ● Hỗ trợ nhiều thứ tiếng khác ● Hỗ trợ định dạng chữ từ trái sang phải, từ xuống ngược lại tiếng Nhật, Trung ● Cho phép ảnh kết tùy chỉnh màu kiểu chữ theo ý người dùng ● Cải thiện thời gian xử lý ảnh ● Áp dụng AI để dự đốn văn sai sót 38 NGUỒN THAM KHẢO • • • • OpenCV: https://docs.opencv.org/ Easyocr: https://www.jaided.ai/easyocr/documentation/ ReactJS: https://legacy.reactjs.org/docs/getting-started.html Google Cloud Translate: https://cloud.google.com/translate/docs 39