Đồ á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 6 năm 2023

1


Nhận xét của giảng viên hướng dẫn
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................

...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
Người nhận xét

Huỳnh Hồ Mộng Trinh

2


LỜI CẢM ƠN
Để hoàn thành đồ án 1 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 đi của đồ án, chỉ ra
những thiếu sót của đồ án nhóm chúng em và hỗ trợ những thơng tin cần thiết. Đó là những
góp ý hết sức quý báu cho nhóm chúng em trong q trình thực hiện dự án này.
Trong quá trình thực hiện vì kiến thức và kinh nghiệm vẫn có hạn chế nên khơng thể tránh
khỏi sai sót vì vậy nhóm chúng em ln mong muốn tiếp thu những đánh giá, góp ý và
phản hồi từ giảng viên.
Chúng em chân thành cảm ơn và xin chúc cô luôn gặp những điều may mắn.

TP.HCM, 1 tháng 6 năm 2023
Nhóm sinh viên thực hiện
Nguyễn Văn Linh – Hồng Gia Hy

3

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ý do chọn đề tài

1.
●

Trong thời đại công nghệ phát triển, mọi người luôn hướng đến những công cụ hoặc
những cách tiện lợi hơn trong công việc cũng như giải trí hằng ngày. Đọc sách hay
truyện tranh đã ln là hoạt động không thể thiếu của các bạn trẻ cũng như người
trưởng thành. Tuy nhiên ln có một rào cản vơ hình mang tên ngơn ngữ đã phần
nào ngăn mọi người đọc những tác phẩm mà mình u thích.

●

Hiện nay để tìm đọc một tác phẩm thì sẽ có rất nhiều nguồn truy cập. Tuy nhiên,
không phải lúc nào đó cũng là ngơn ngữ mà chúng ta đã biết. Do đó, người đọc sẽ
khá là mơ hồ và khó khăn trong việc thưởng thức các tác phẩm.

●

Cũng đã từng là độc giả gặp khó khăn trong việc đọc ngơn ngữ nước ngoài , chúng
em hiểu rõ và mong muốn tìm kiếm được giải pháp để giải quyết được tình trạng
đó. Chúng em quyết định chọn đề tài này để giúp những người có nhu cầu dịch trực
tiếp các tác phẩm mà cụ thể đó là truyện tranh, giúp cho việc đọc truyện trở nên dễ
dàng và tiện lợi hơn.
Hiện trạng các trang web dịch thuật hiện nay:

●

Giao diện khó dùng cho những người mới tiếp xúc với thiết bị cơng nghệ.

●

Thiếu một số tính năng cần thiết.

●

Các tính năng quan trọng chưa thực sự nổi bật.

●

Khó khăn trong việc dịch các bong bóng thoại

●

Thường là khơng miễn phí

4


=> Với những vấn đề trên, chúng em quyết định lựa chọn đề tài xây dựng website
dịch manga để tiến hành nghiên cứu và xây dựng.
Mục tiêu đề ra

2.
●

Xây dựng website giải quyết các vấn đề sau:
●

Dịch các ảnh cơ bản chứa các chữ cái.

●

Xem những chữ được tách ra từ ảnh.

●

Có thể sửa các lỗi dịch một cách thủ cơng.

●

Xác định các bong bóng thoại trong manga

●

Trả về ảnh đã qua xử lí và dịch.

Phạm vi, quy mơ

3.
●

Mơi trường, platform: website

●

Phạm vi chức năng:
●

Nhận một bức ảnh từ trong thiết bị sau đó tiến hành xử lý và dịch trực tuyến
trên website
o

Có thể xác định những ký tự có trong ảnh

o

Hiển thị rõ những câu có trong ảnh

o

Có thể chỉnh sửa các ký tự đã được lấy ra từ ảnh và đồng ý tiến hành
dịch ảnh

4.

Đối tượng sử dụng: Tất cả người dùng có nhu cầu dịch manga.

5.

Phương pháp thực hiện:
●

Phương pháp làm việc: Làm việc nhóm 2 thành viên thông qua cả 2 phương thức
online và offline dưới sự hướng dẫn của 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 của đối tượng người dùng.

●

Nghiên cứu tài liệu các công nghệ liên quan.

●

Kiểm tra, tham khảo các website khác để tối ưu hóa trang web.

Phương pháp công nghệ:
5


●

Tìm hiểu về các ngơn ngữ mới và á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 và nhận phản hồi, sửa
chữa nếu cần thiết để đưa ra sản phẩm hồn chỉnh nhất.

●

Tìm hiểu cách thức hoạt động của các tính năng trang web.

●

Tìm hiểu các thư viện hỗ trợ cho dự án.

Nền tảng công nghệ:

6.
●

Front-end: ReactJS.

●

Back-end: Python
Kết quả mong đợi:

7.
●

Hoàn thiện được website đáp ứng đa số mục tiêu đề ra.

●

Trang web có thể thực hiện chính xác u cầu của người dùng.

●

Trang web có khả năng tương tác với người dùng với mức độ ổn định.

●

Các chức năng của website hoạt động đúng đắn, chính xác, dễ sử dụng.
Hướng phát triển:

8.
●

Từ những cái đã xây dựng được ở website có thể phát triển thành extension để có
thể dịch truyện 1 cách tự động trên trang web.

●

Bổ sung tính năng chọn ngôn ngữ dịch

●

Phát triển hỗ trợ đa nền tảng
Kế hoạch làm việc:

9.
●

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 được lên kế hoạch triển khai như sau:
●

Giai đoạn 1 (10/3/2023 - 24/4/2023): Nghiên cứu phát triển phương thức
xác định văn bản trong 1 hình ảnh. Giai đoạn này gồm 3 sprint:
o

Sprint 1: Tìm hiểu cơng nghệ, các 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 một số chức năng cơ bản.
6


●

Giai đoạn 2 (25/4/2023 - 15/5/2023): Hoàn thiện backend và bắt đầu xây
dựng fontend. Giai đoạn này gồm 2 sprint:
o

Sprint 4: Hồn thiện các tính năng cịn đang tiến hành ở backend, tìm
và sửa lỗi trong quá trình xây dựng chức năng.

o

●

Sprint 5 : Triển khai xây dựng fontend, viết báo cáo.

Giai đoạn 3 (15/05/2023 - 10/06/2023) Kiểm tra lỗi và hoàn thiện sản phẩm.
Giai đoạn này gồm 2 sprint:
o

Sprint 6: Kiểm tra lại tổng quan sản phẩm và sửa lỗi.

o

Sprint 7: kiểm tra file báo cáo, chỉnh sửa hoặc thay đổi nếu có.

Phân cơng cơng việc:

10.
●

●

Cơng việc chung:
●

Phân tích yê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.

7


Chương 1 – TỔNG QUAN VỀ ĐỀ TÀI ............................................................................. 8
1.1

Giới thiệu về đề tài ................................................................................................. 8

1.1.1

Sự tiện lợi của công cụ dịch thuật và lí do chọn đề tài: .................................. 8

1.2

Khảo sát các ứng dụng hỗ trợ dịch manga hiện nay: ............................................. 9

1.3

Đối tượng nghiên cứu: ......................................................................................... 11

Chương 2 – 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 3 – 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 các Use-case ........................................................................................ 20
3.3

Đặc tả Use Case ................................................................................................... 21

3.4

Sơ đồ Activity ...................................................................................................... 24

Chương 4 – 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 và xóa văn bản ra khỏi ảnh .................................................... 25

4.1.2

Dịch văn bản đã được 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 5 – 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 trong tương lai ............................................................................. 37

8


Chương 1 – TỔNG QUAN VỀ ĐỀ TÀI
1.1

Giới thiệu về đề tài
1.1.1 Sự tiện lợi của công cụ dịch thuật và lí do chọn đề tài:
Trong thời đại quốc tế hóa, nhu cầu tiếp cận đến các nguồn tài liệu cũng như
các phương tiện giải trí ngày càng được quan tâm đặc biệt khi nói đến các
tác phẩm được sáng tác bằng ngơn ngữ nước ngồi. Tuy nhiên đó khơng còn
là mối quan ngại đối với thời đại 4.0 khi chúng ta có các cơng cụ dịch thuật
tiện lợi có thể giúp ta hiểu được các tài liệu mà không cần phải biết ngơn ngữ
nước ngồi. Tất cả những gì người dùng cần phải làm là một tấm ảnh mà cụ
thể là một trang manga và một thiết bị có kết nối internet.
Một số ưu điểm của việc dịch manga trực tuyến có thể kể đến như sau:
-

Linh hoạt: Người dùng chỉ cần một chiếc điện thoại di động hoặc
laptop và chỉ với một vài thao tác, người dùng đã có thể đọc được
nội dung có trong bức ảnh.

-

Tiện lợi: Có thể thay thế cho việc sử dụng từ điển để dị và dịch một
cách thủ cơng

Bởi các tiềm năng và tính tiện dụng của nó, chúng em đã chọn đề tài này với
mong muốn tạo một ứng dụng giúp cho việc đọc manga dễ dàng hơn.
1.2

Khảo sát các ứng dụng hỗ trợ dịch manga hiện nay:
Hiện nay có một số trang web dịch thuật được chú ý đến đó là IchigoReader,
Cotrans,… Các trang web vừa nêu đều dễ có giao diện thân thiện, có sự tương đồng
về chức năng nhưng ngồi ra cũng có một khuyết điểm là có những chức năng khơng
cần thiết, có thể lược bỏ đi để hướng đến sự đơn giản và tiện lợi cho người dung, và

khơng hồn tồn miễn phí,..

9


Hình 1.1: Website IchigoReader

10


Hình 1.2: Website Cotrans
1.3

Đối tượng nghiên cứu:
Người dùng có nhu cầu dịch ảnh, manga
Ngôn ngữ: Javascript, Python,
Các công nghệ:
+ ReactJS
+ Figma.

11


Chương 2 – CƠ SỞ LÝ THUYẾT
2.1

React JS
Là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013, bản thân

nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các thành phần

trên website. Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu
khơng chỉ thực hiện được trên tầng Server mà còn ở dưới Client nữa.
ReactJS là một thư viện JavaScript chuyên giúp các nhà phát triển xây dựng giao
diện người dùng hay UI. Trong lập trình ứng dụng front-end, lập trình viên thường sẽ phải
làm việc chính trên 2 thành phần sau: UI và xử lý tương tác của người dùng.

Các ưu điểm chính của React JS đối với phát triển UI:
● Tốc độ
● Linh hoạt
● Hiệu suất
12


● Khả năng sử dụng
● Phát triển ứng dụng di động
2.2

Typescript

TypeScript ít nhiều cũng có sự liên quan đến JavaScript vì nó là một ngơn ngữ mã
nguồn mở của JavaScript. Vai trò của TypeScript là dùng để thiết kế và xây dựng các dự
án ứng dụng quy mô lớn mang tính chất phức tạp.
TypeScript được xem là một phiên bản nâng cao hơn của JavaScript vì nó được thiết
kế thêm nhiều chức năng tiện lợi hơn, cải tiến hơn từ những điểm yếu của JavaScript như
các lớp hướng đối tượng và Static Structural typing, bên cạnh đó TypeScript cịn có thể
hoạt động rộng rãi cho các ứng dụng của ngôn ngữ Angular2 và Nodejs.

Ưu điểm của TypeScript:
● Thao tác nhanh chóng và đơn giản
● Tái cấu trúc

13


● Giảm tỷ lệ mắc lỗi hệ thống
● Hợp nhất mã đơn giản
● Hỗ trợ tối ưu hóa quy trình làm việc
2.3

Python

Python là một ngơn ngữ lập trình được sử dụng rộng rãi trong các ứng dụng web, phát triển
phần mềm, khoa học dữ liệu và máy học (ML). Các nhà phát triển sử dụng Python vì nó
hiệu quả, dễ học và có thể chạy trên nhiều nền tảng khác nhau. Phần mềm Python được tải
xuống miễn phí, tích hợp tốt với tất cả các loại hệ thống và tăng tốc độ phát triển.

Python có thể được xem là một ngơn ngữ có độ phổ biến cao trong ngành lập trình, nhờ
vào những điểm nổi bật sau:
● Có cấu trúc code dễ đọc và dễ hiểu, dù là người mới bắt đầu.
● Có tính ứng dụng rộng rãi.
● Tốc độ xử lý của Python nhanh hơn PHP.
● Cho phép các lập trình viên thực hiện sửa lỗi các đoạn mã một cách trực tiếp.
● Sở hữu lượng lớn các khối cơ sở dữ liệu, phục vụ hiệu quả cho các chương trình
mang tính thương mại.
● Nhờ có tính năng đơn giản, nên việc bảo trì các chương trình được tạo ra bởi Python
cũng khá đơn giản và nhanh chóng.
14


● Chứa GUI programming hỗ trợ việc hiển thị ảnh minh họa một cách sống động và
chân thật.

● Khi sử dụng Python, các lập trình viên có thể thoải mải thêm và tùy chỉnh các cơng
cụ, để có thể tối đa hiệu quả trong công việc.

2.4

OpenCV

OpenCV là tên viết tắt của open source computer vision library – có thể được hiểu là một
thư viện nguồn mở cho máy tính. Cụ thể hơn OpenCV là kho lưu trữ các mã nguồn mở
được dùng để xử lý hình ảnh, phát triển các ứng dụng đồ họa trong thời gian thực.
OpenCV cho phép cải thiện tốc độ của CPU khi thực hiện các hoạt động real time. Nó cịn
cung cấp một số lượng lớn các mã xử lý phục vụ cho quy trình của thị giác máy tính hay
các learning machine khác.

Hình 2.4: Minh hoạ OpenCV
OpenCV được cho là một phần mềm đa nhiệm. Nó được ứng dụng trong rất nhiều trường
hợp khác nhau. Ví dụ, ta sẽ nói về các phần mềm định vị, bản đồ nói chung. Sử dụng các
map để tìm đường, tra cứu tình hình giao thơng hoặc đơn giản là xem xét các hình ảnh thực
15


tế của địa điểm cần đến. Những lúc như vậy, OpenCV đóng vai trị là nhà cung cấp dữ liệu
hình ảnh cho các app về Map này. OpenCV sẽ đem đến cho người dùng hình ảnh về đường
phố hay các căn nhà, con người xung quanh địa điểm được chỉ định.
OpenCV cịn được dùng để khởi tạo ra những hình ảnh 3 chiều phức tạp. Hoạt động này
rất được yêu thích, nhất là trong thời đại trí tuệ nhân tạo AI phát triển như thế này.
Đối với các công nghệ hiện đại, OpenCV cũng là một yếu tố không thể thiếu. Tất cả những
ứng dụng công nghệ như robot, xe tự lái, bảng cảm ứng thơng minh… đều có sự góp mặt
của OpenCV trong khâu xử lý hình ảnh. Ví dụ gần gũi nhất trong cuộc sống có thể kể đến
hệ thống mở khóa điện thoại bằng cách nhận diện khuôn mặt người dùng.

2.5

EasyOCR

EasyOCR là thư viện Python dành cho Nhận dạng ký tự quang học (OCR) cho phép bạn
dễ dàng trích xuất văn bản từ hình ảnh và tài liệu được quét.
Khi chúng ta gặp phải tình huống phải xử lý các hình ảnh văn bản khơng thể chỉnh sửa, tệp
PDF và bản in ra giấy, bạn sẽ mất rất nhiều thời gian và cơng sức để hồn thành cơng việc
của mình. Sau đó, OCR có thể là giải pháp thay thế tốt hơn cho bạn, vì nó sẽ nhanh chóng
giải quyết vấn đề của bạn bằng cách trích xuất văn bản từ các giấy tờ này thay vì thực hiện
tương tự theo cách thủ công. Tăng hiệu quả công việc bằng cách tránh lỗi của con người.

16


Hình 2.5: Minh hoạ cách lấy chữ của EasyOCR
Các ưu điểm của EasyOCR:
● Xử lý tài liệu dễ dàng và nhanh chóng.
● Giảm chi phí.
● Tăng sản lượng
● Độ chính xác cao
● Giảm khối lượng công việc của nhân viên
● Thân thiện với môi trường- Khi đọc văn bản từ tài liệu và xử lý chúng, nó sẽ giảm
việc sử dụng giấy và tiết kiệm giấy.
2.6

Google Cloud Translation

Google Cloud Translation API là một dịch vụ dịch thuật linh hoạt giữa các ngôn ngữ, được

xây dựng với sự hỗ trợ của các mơ hình máy học hiện đại của Google. Đây là một API có
khả năng mở rộng cao, hỗ trợ hơn 100 ngôn ngữ và khả năng phát hiện ngôn ngữ tự động.

17


Hình 2.6: Logo Google Cloud Translation

18


Chương 3 – PHÂN TÍCH HỆ THỐNG
3.1

Tổng quan hệ thống

Trang web Manga Translator là hệ thống giúp người dùng trong việc dịch manga, cụ thể
hơn là dịch nội dung ký tự có trong những tấm ảnh. Thơng qua nhiều cơng nghệ về nhận
diện, thị giác máy tính và chuyển đổi hình ảnh, trang web sẽ là cơng cụ đắc lực cho việc
dịch manga và các tài liệu liên quan.

3.2

Sơ đồ UseCase

19


3.2.1 Danh sách actor
Bảng danh sách các actor

STT

Tên actor

Ý nghĩa/ ghi chú

1

User

Người dùng truy cập vào trang web và tiến hành dịch ảnh
trang manga.

3.2.2 Danh sách các Use-case
Bảng danh sách các Use-case

STT

Tên Use-case

Ý nghĩa/ ghi chú

1

Dịch Manga

Người dùng tiến hành chọn trang ảnh manga và tiến hành
dịch trên trang web

2

Quản lý và chỉnh
Người dùng tiến hành xem xét các ký tự được nhận diện
sửa nội dung muốn và sửa lại nếu sai sót, sau đó có thể chọn những cụm muốn
dịch
dịch

3

Xóa nội dung ký tự Người dùng có thể sử dụng trang web để xóa những nội
trong ảnh
dung ký tự không mong muốn ra khỏi ảnh

20


3.3

Đặc tả Use Case
Bảng 3.1 Đặc tả Use-case dịch Manga

Mã Use-case

UC-1

Tên Use-case

Dịch Manga

Tác nhân

Người dùng

Mơ tả tóm tắt

Người dùng tiến hành chọn ảnh và dịch

Điều kiện trước

Truy cập trang web Manga Translator

Điều kiện sau

N/A

Dịng sự kiện chính

Hiển thị màn hình bắt đầu và chọn ảnh Manga
● Người dùng truy cập trang web
● Hiển thị màn hình bắt đầu
Người dùng chọn và xác nhận ảnh trang Manga muốn dịch
Xác nhận hệ thống bắt đầu xử lý ảnh
Nếu thành công xuất ra trang manga đã được dịch
Lưu ảnh

Dòng sự kiện phụ

21

Bảng 3.1 Đặc tả Use-case Quản lý và chỉnh sửa nội dung muốn dịch
Mã Use-case

UC-2

Tên Use-case

Quản lý và chỉnh sửa nội dung muốn dịch

Tác nhân

Người dùng

Mơ tả tóm tắt

Người dùng tiến hành chọn và chỉnh sửa ký tự đã được lấy từ ảnh

Điều kiện trước

Xác nhận chọn và hệ thống xử lí ảnh Manga

Điều kiện sau

N/A

Dịng sự kiện chính

Hiển thị màn hình ký tự được lấy từ ảnh Manga
● Chỉnh sửa nếu ký tự được lấy có sai sót
● Chọn dịng muốn dịch

Nhấp xác nhận q trình chỉnh sửa và tiến hành dịch manga

Dòng sự kiện phụ

22


Bảng 3.1 Đặc tả Use-case Xóa nội dung ký tự trong ảnh
Mã Use-case

UC-3

Tên Use-case

Xóa nội dung ký tự trong ảnh

Tác nhân

Người dùng

Mơ tả tóm tắt

Xóa những ký tự khơng mong muốn trong ảnh manga

Điều kiện trước

Truy cập trang web

Điều kiện sau

N/A

Dịng sự kiện chính

Hiển thị màn hình ký chọn và xác nhận ảnh Manga
Xóa tất cả những ký tự sau khi hệ thống xử lý
Lưu ảnh

Dòng sự kiện phụ

23


3.4

Sơ đồ Activity

Quá trình thực hiện dịch Manga

24


Chương 4 – 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 và xóa văn bản ra khỏi ảnh
Để xóa văn bản khỏi hình ảnh sẽ trải qua ba bước:
● Xác định văn bản trong hình ảnh và lấy tọa độ hộp giới hạn của từng văn bản.

● Đối với mỗi hộp giới hạn, hãy áp dụng mặt nạ để cho thuật tốn biết chúng ta nên
tơ phần nào của hình ảnh.
25