Thiết kế ứng dụng chẩn đoán hình ảnh x quang phổi sử dụng deep learning

Các số liệu ban đầu:• Tập dữ liệu X quang lồng ngực: NIH Chest X-ray.• Các mơ hình phân loại: ResNet-50, VGG19, DenseNet-121, EfficientNet-B0.• Phương pháp đánh giá mơ hình: AUC-ROC, Gra

THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

NGÀNH KỸ THUẬT Y SINH

THIẾT KẾ ỨNG DỤNG CHẨN ĐOÁN HÌNH ẢNH X QUANG PHỔI SỬ DỤNG DEEP LEARNING

GVHD: TS NGUYỄN MẠNH HÙNG SVTH : HOÀNG ĐÌNH THỨC

LÊ THỊ ANH THƯ

S K L 0 1 1 4 0 4

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA ĐIỆN - ĐIỆN TỬ

BỘ MÔN ĐIỆN TỬ CÔNG NGHIỆP Y SINH

MSSV1: 19129003 SVTH2: Lê Thị Anh Thư MSSV2: 19129053

TP Hồ Chí Minh - 07/2023

THIẾT KẾ ỨNG DỤNG CHẨN ĐOÁN HÌNH ẢNH X QUANG PHỔI SỬ DỤNG

DEEP LEARNING

BỘ MÔN ĐIỆN TỬ CÔNG NGHIỆP – Y SINH

—————————————–

Độc lập - Tự do - Hạnh phúc

Tp HCM, ngày 02 tháng 07 năm 2023

NHIỆM VỤ KHÓA LUẬN TỐT NGHIỆP

Họ tên sinh viên 1:

Họ tên sinh viên 2:

MSSV: 19129003MSSV: 19129053

Mã ngành: 7520212D

Mã hệ: 1Lớp: 191290

I TÊN ĐỀ TÀI: THIẾT KẾ ỨNG DỤNG CHẨN ĐOÁN HÌNH ẢNH X QUANG PHỔI

SỬ DỤNG DEEP LEARNING

II NHIỆM VỤ:

1 Các số liệu ban đầu:

• Tập dữ liệu X quang lồng ngực: NIH Chest X-ray

• Các mô hình phân loại: ResNet-50, VGG19, DenseNet-121, EfficientNet-B0

• Phương pháp đánh giá mô hình: AUC-ROC, Grad-CAM

• Ngôn ngữ lập trình sử dụng: Python, Javascript, HTML, CSS

• Các framework và thư viện chính được sử dụng: Pytorch, Flask, Waitress, ReactJS, press JS

Ex-• Cơ sở dữ liệu: MongoDB, sử dụng dịch vụ MongoDB Atlas để quản lý

• Cộng cụ đóng gói và triển khai ứng dụng web: Docker

2 Nội dung thực hiện:

• Tìm hiểu và xử lý tập dữ liệu NIH Chest X-ray

• Thí nghiệm huấn luyện với các mô hình phân loại trên tập dữ liệu đã được xử lý

• Đánh giá kết quả thí nghiệm việc huấn luyện mô hình

• Xây dựng Backend cho ứng dụng.

• Xây dựng Frontend cho ứng dụng

• Kiểm thử, đánh giá toàn hệ thống và tiến hành tinh chỉnh

• Thiết lập ứng dụng ở chế độ sản phẩm

• Đóng gói, triển khai ứng dụng với Docker

• Viết báo cáo

• Bảo vệ luận văn

III NGÀY GIAO NHIỆM VỤ: 20/02/2023.

IV NGÀY HOÀN THÀNH: 19/06/2023.

V HỌ VÀ TÊN NGƯỜI HƯỚNG DẪN: TS NGUYỄN MẠNH HÙNG.

CÁN BỘ HƯỚNG DẪN BM ĐIỆN TỬ CÔNG NGHIỆP - Y SINH

BỘ MÔN ĐIỆN TỬ CÔNG NGHIỆP – Y SINH

—————————————–

Độc lập - Tự do - Hạnh phúc

Tp HCM, ngày 02 tháng 07 năm 2023

LỊCH TRÌNH THỰC HIỆN KHÓA LUẬN TỐT NGHIỆP

Họ tên sinh viên 1: Hoàng Đình Thức

Lớp: 191290A MSSV: 19129003

Họ tên sinh viên 2: Lê Thị Anh Thư

Lớp: 191290A MSSV: 19129053

Tên đề tài: Thiết kế ứng dụng chẩn đoán hình ảnh X quang phổi sử dụng Deep Learning

Tuần 1

(20/02 - 27/02)

Gặp GVHD, chọn đề tài và viết đềcương cho đề tài

Tuần 2

(28/02 - 06/03)

Thiết kế tổng quan hệ thống, xácđịnh các thành phần chính cần vàcách các thành phần này tương tácvới nhau

Tìm hiểu và lựa chọn phương pháp

để huấn luyện, đánh giá mô hình vàcác pre-trained model sẽ sử dụngTuần 5

(21/03 - 27/03)

Tiến hành các thí nghiệm huấnluyện mô hình dựa trên phươngpháp và các pre-trained model đãlựa chọn

Tuần 6

(28/03 - 03/04)

Hoàn thành các thí nghiệm huấnluyện mô hình và đánh giá mô hình

Tuần 7

(04/04 - 10/04)

Web, cách thức triển khai mô hình

đã huấn luyện thông qua API, tìmhiểu về đóng gói và triển khai ứngdụng web bằng Docker

Xây dựng Backend của ứng dụng

Kết hợp Backend với API dự đoán

và tiến hành kiểm thử, tinh chỉnhTuần 10

Chúng tôi xác nhận rằng tất cả thông tin, dữ liệu và tài liệu tham khảo được sử dụng trong

đề tài này đã được ghi nhận và trích dẫn đúng cách Mọi nguồn tài liệu ngoài, bao gồm các côngtrình đã xuất bản, bài báo nghiên cứu và tài nguyên trực tuyến, đều được ghi rõ trong phần tàiliệu tham khảo của báo cáo dự án này

Trong suốt quá trình thực hiện đề tài, nhóm đã tuân thủ nguyên tắc và tiêu chuẩn đạo đức.Nhóm đã tôn trọng quyền riêng tư và bảo mật của bất kỳ dữ liệu liên quan đến bệnh nhân hoặcthông tin nhạy cảm nào được sử dụng trong dự án này, đảm bảo rằng tất cả dữ liệu đã được ẩndanh và xử lý một cách an toàn

Nhóm nhận thức rằng dự án này không thay thế cho việc chẩn đoán y tế chuyên nghiệp Ứngdụng được thiết kế nhằm hỗ trợ người dùng trong việc hiểu và phân tích hình ảnh X quang phổibằng cách cung cấp thông tin về các bất thường có trên hình ảnh để tiến hành kiểm tra thêm.Quyết định chẩn đoán và điều trị cuối cùng nên do các bác sĩ và chuyên gia y tế có trình độquyết định

Sinh viên thực hiện đề tài

Hoàng Đình Thức - Lê Thị Anh Thư

Trong suốt quá trình thực hiện đề tài, nhóm đã nhận được rất nhiều sự giúp đỡ từ quý thầy

cô, bạn bè và đặc biệt là những sự hỗ trợ từ TS Nguyễn Mạnh Hùng Nhóm muốn bày tỏ lòng biết ơn đến TS Nguyễn Mạnh Hùng đã tận tình hướng dẫn nhóm trong suốt quá trình thực

hiện đề tài Sự đóng góp, đề xuất và sự hỗ trợ quý báu của thầy đã góp phần lớn vào sự thànhcông và hoàn thiện đề tài này

Nhóm xin bày tỏ lòng biết ơn đến Trường Đại học Sư Phạm Kỹ Thuật TP Hồ Chí Minh,khoa Điện - điện tử, bộ môn Điện tử công nghiệp - Y sinh đã tạo cơ hội cho nhóm được thựchiện và hoàn thành đồ án tốt nghiệp

Nhóm cũng muốn bày tỏ lòng biết ơn đến những thầy cô trong suốt hành trình của nhóm tạigiảng đường Đại học đã truyền đạt cho nhóm những kiến thức từ nền tảng đến nâng cao cũngnhư các quý thầy cô đã đóng góp ý kiến và đề xuất để cải thiện đề tài

Cuối cùng, nhóm xin chân thành cảm ơn gia đình và đặc biệt là các bạn ngành Kỹ thuật ysinh Khóa 2019 đã luôn ủng hộ, động viên và hỗ trợ nhóm trong quá trình thực hiện đề tài này

Sinh viên thực hiện đề tài

Hoàng Đình Thức - Lê Thị Anh Thư

1 TỔNG QUAN 1

1.1 Đặt vấn đề 1

1.2 Mục tiêu 2

1.3 Nội dung nghiên cứu 3

1.4 Giới hạn 4

1.5 Bố cục 5

2 CƠ SỞ LÝ THUYẾT 6 2.1 Giới thiệu Deep Learning 6

2.2 Bài toán phân loại đa nhãn (Multilabel Classification) 7

2.3 Transfer Learning 8

2.4 Hàm kích hoạt Sigmoid 9

2.5 Giới thiệu Dataset 10

2.5.1 Khảo sát tập dữ liệu 10

2.5.2 NIH Chest X-ray 11

2.6 Các mô hình phân loại dựa trên CNN 13

2.6.1 DenseNet-121 13

2.6.2 ResNet-50 14

2.6.3 VGG19 15

2.6.4 EfficientNet-B0 16

2.7 Giới thiệu về ứng dụng Web 17

2.7.1 Cấu trúc cơ bản của một hệ thống Web 17

2.7.2 React JS 19

2.7.3 Express JS 21

2.7.4 API 22

2.7.6 Nginx 24

2.7.7 Docker 25

2.8 Giới thiệu các hội chứng 27

3 HUẤN LUYỆN MÔ HÌNH 29 3.1 Tổng quan về phương pháp 29

3.2 Xử lí dữ liệu 30

3.3 Huấn luyện mô hình 35

3.3.1 Tinh chỉnh mô hình 35

3.3.2 Hàm mất mát 36

3.3.3 Tiến hành huấn luyện 36

3.4 Đánh giá mô hình 38

3.4.1 Đánh giá dựa trên ROC-AUC 38

3.4.2 Đánh giá dựa trên GradCAM 39

4 THI CÔNG HỆ THỐNG 40 4.1 Tổng quan về hệ thống 40

4.2 Thi công Frontend 44

4.3 Thi công Backend 52

4.4 Tạo Model API 56

4.5 Đóng gói và triển khai ứng dụng với Docker 58

5 KẾT QUẢ VÀ NHẬN XÉT 63 5.1 Kết quả và nhận xét mô hình dựa trên đánh giá AUC-ROC 63

5.1.1 Kết quả 63

5.1.2 Nhận xét 66

5.2 Kết quả và nhận xét mô hình dựa trên GradCAM 67

5.2.1 Kết quả 67

5.2.2 Nhận xét 69

5.3 Kết quả thực thi ứng dụng web và nhận xét 69

5.3.1 Kết quả 69

5.3.2 Nhận xét 77

6.1 Kết luận 796.2 Hướng phát triển của đề tài 79

1.1 Mạng lưới tổ chức y tế Việt Nam[22] 1

2.1 Sự khác nhau giữa Binary classification, Multiclass classification và Multilabel classification 7

2.2 Kiến trúc cơ bản của Transfer Learning [16] 8

2.3 Hình dạng của hàm Sigmoid 10

2.4 Tổng quan các tập dữ liệu về hình ảnh X-quang lồng ngực (CXR) đang được công khai trên thế giới [5] 11

2.5 Phân phối của 14 hội chứng trong tập dữ liệu NIH Chest X-ray [14] 12

2.6 Kiến trúc của mạng DenseNet-121[3] 13

2.7 Kiến trúc của mạng ResNet-50 [10] 14

2.8 Kiến trúc của mạng VGG19 [2] 15

2.9 Kiến trúc của mạng EfficientNet-B0 [19] 16

2.10 Ví dụ về cấu tạo của một DOM [21] 19

2.11 Cách triển khai JSX trên chương trình ReactJS [7] 20

2.12 Cách Virtual DOM hoạt động 20

2.13 Logo của framework ExpressJS 21

2.14 Cách thức hoạt động của RESTful API 23

2.15 Cấu trúc của chuỗi JWT [15] 23

2.16 Cơ chế hoạt động của JWT trong hệ thống web [13] 24

2.17 Vị trí và vai trò của Nginx trong hệ thống web 25

2.18 Sự tương tác và các thành phần của Docker [17] 26

3.1 Biểu đồ thể hiện số lượng mẫu của từng nhãn trên toàn bộ tập dữ liệu 30

3.2 Biểu đồ thể hiện số lượng mẫu của từng nhãn trên toàn bộ tập dữ liệu sau khi được phân chia thành tập Train và Validation 32

thế chụp PA 33

3.4 Biểu đồ thể hiện số lượng mẫu của từng nhãn trên tập dữ liệu được lọc với tư thế chụp PA sau khi được phân chia thành tập Train và Validation 34

3.5 Tinh chỉnh cấu trúc của các pre-trained model 35

3.6 Biểu đồ minh họa ROC - AUC 38

3.7 GradCAM được áp dụng trên hình ảnh chó và mèo 39

4.1 Sơ đồ tổng quan chức năng của ứng dụng 41

4.2 Sơ đồ tổng quan hệ thống của đề tài 42

4.3 Thiết kế của thanh điều hướng khi chưa đăng nhập 45

4.4 Thiết kế của thanh điều hướng khi đã đăng nhập 45

4.5 Thiết kế của trang chủ 46

4.6 Thiết kế của trang chủ khi người dùng đã đăng nhập 46

4.7 Thiết kế của trang chủ khi người dùng đã đăng nhập với phân quyền "Professor" 46 4.8 Thiết kế của trang chủ khi người dùng đã đăng nhập và tiến hành dự đoán 47

4.9 Thiết kế của giao diện lưu kết quả dự đoán 47

4.10 Thiết kế của giao diện thêm nhãn dữ liệu 48

4.11 Thiết kế của giao diện lưu trữ 49

4.12 Thiết kế của giao diện lưu trữ sau khi lựa chọn kết quả bất kỳ 49

4.13 Thiết kế của giao diện đăng nhập và đăng ký 50

4.14 Sơ đồ tổng quan phương thức xác thực người dùng thông qua JWT 51

4.15 Sơ đồ khái quát việc tạo mới Access token và Refresh token khi hết hạn 52

4.16 Cấu trúc của cơ sở dữ liệu đã được thiết lập trên MongoDB Atlas 54

4.17 Các routes được định nghĩa trong Backend 55

4.18 Các thành phần cấu tạo thành API được thiết kế ở Backend 56

4.19 Sơ đồ mô tả quá trình chẩn đoán giữa Frontend - Backend và model API 57

4.20 Sơ đồ khái quát việc đóng gói và triển khai ứng dụng bằng Docker 58

4.21 Cấu hình tệp "default.conf" cho web server Nginx 59

4.22 Cấu hình tệp "Dockerfile" để tạo Docker image cho Backend 60

4.23 Tệp "Dockerfile" và "requirements.txt"để tạo Docker image cho model API 61

4.24 Cấu hình tệp "docker-compose.yml" để kết nối các Docker container 62

model 64

5.2 Biểu đồ ROC của mô hình trên toàn bộ tập dữ liệu tương ứng với từng pre-trained model 66

5.3 Vùng bệnh Cardiomegaly được diễn giải dựa trên GradCAM 67

5.4 Hai vùng bệnh Cardiomegaly và Pneumonia được diễn giải dựa trên GradCAM 68 5.5 Hai vùng bệnh Effusion và Infiltrate được diễn giải dựa trên GradCAM 68

5.6 Quy trình đăng ký tài khoản mới trên ứng dụng 70

5.7 Kết quả thực thi của ứng dụng khi quá trình đăng ký gặp lỗi 70

5.8 Kết quả thực thi của ứng dụng khi quá trình đăng nhập gặp lỗi 71

5.9 Kết quả trạng thái bộ nhớ cục bộ của trình duyệt khi chưa đăng nhập 71

5.10 Kết quả thực thi của ứng dụng khi quá trình đăng nhập thành công 71

5.11 Kết quả trạng thái bộ nhớ cục bộ của trình duyệt khi đăng nhập thành công 72

5.12 Quá trình tiến hành yêu cầu đặt lại mật khẩu 72

5.13 Quá trình xác nhận email và đặt lại mật khẩu mới 73

5.14 Kết quả thực thi của ứng dụng khi thực hiện quá trình dự đoán 74

5.15 Giao diện hiển thị các kết quả dự đoán đã được lưu trữ 74

5.16 Giao diện hiển thị chi tiết của một kết quả với hình ảnh hiển thị Original 75

5.17 Giao diện hiển thị chi tiết của một kết quả với hình ảnh hiển thị GradientCam 75 5.18 Giao diện soạn thảo email 76

5.19 Kết quả email được nhận từ ứng dụng 76

5.20 Kết quả các docker container thành phần của ứng dụng đã được triển khai thành công 77

2.1 Thông tin về 14 hội chứng được áp dụng trong đề tài 273.1 Số lượng mẫu của từng nhãn trên toàn bộ tập dữ liệu 303.2 Số lượng mẫu của từng nhãn trên toàn bộ tập dữ liệu sau khi được phân chiathành tập Train và Validation 313.3 Số lượng mẫu của từng nhãn trên tập dữ liệu được lọc với tư thế chụp PA 323.4 Số lượng mẫu của từng nhãn trong tập dữ liệu được lọc với tư thế chụp PA saukhi được phân chia thành tập Train và Validation 345.1 Giá trị AUC của từng loại bệnh trên tập dữ liệu PA tương ứng từng loại pre-trained model 635.2 Giá trị AUC từng loại bệnh trên toàn bộ tập dữ liệu tương ứng từng loại pre-trained model 65

STT Từ viết tắt Giải thích

1 CNN Convolutional Neural Network

2 DenseNet Dense Convolutional Network

3 ResNet Residual Network

4 VGG Visual Geometry Group

5 HTML Hypertext Markup Language

6 CSS Cascading Style Sheets

7 API Application Programming Interface

8 HTTP Hypertext Transfer Protocol

9 HTTPS Hypertext Transfer Protocol Secure

10 UI User Interface

11 DOM Document Object Model

12 JS JavaScript

13 JSX JavaScript XML

14 JWT JSON Web Token

15 ROC Receiver Operating Characteristic

16 AUC Area Under the Curve

17 BCELoss Binary Cross-Entropy Loss

18 GPU Graphics Processing Unit

19 Grad-CAM Gradient-weighted Class Activation Mapping

20 MVC Model-View-Controller

21 NPM Node Package Manager

22 WSGI Web Server Gateway Interface

23 PA Posteroanterior

24 TPR True Positive Rate

25 FPR False Positive Rate

Trong lĩnh vực y tế, chẩn đoán bệnh phổi qua ảnh X quang lồng ngực là một quy trình quantrọng và phức tạp Để nâng cao độ chính xác và hiệu suất của quá trình chẩn đoán này, sự kếthợp giữa công nghệ Deep Learning và hình ảnh y tế đã mang lại một tiềm năng to lớn.

Bằng cách áp dụng Deep Learning vào việc chẩn đoán ảnh X quang phổi, có thể xây dựngmột mô hình phân loại các bệnh lý phổi khác nhau với độ chính xác tương đối cao Không chỉdừng lại ở việc phân loại nhị phân có bệnh hoặc không có bệnh (Binary Classification), mô hìnhcủa đề tài được huấn luyện để thực hiện việc phân loại đa nhãn (Multilabel Classification), cóthể đưa ra dự đoán với 14 loại bệnh trên cùng một hình ảnh, góp phần cải thiện công cuộc ứngdụng AI vào chẩn đoán hình ảnh

Quá trình xây dựng mô hình bao gồm các bước quan trọng như tìm hiểu và lựa chọn tập dữliệu ảnh X quang phổi đủ lớn và đa dạng, vì PA là tư thế chụp phổ biến trong X quang lồng ngựcnên nhóm sẽ tiến hành huấn luyện trên cả tập dữ liệu đầy đủ (gồm nhiều các tư thế chụp) và tập

dữ liệu được lọc lại chỉ với tư thế chụp PA để so sánh và nhận định Tiền xử lý dữ liệu để chuẩn

bị cho việc huấn luyện mô hình, huấn luyện mô hình dùng phương pháp học tập chuyển giao(Transfer learning) dựa trên một số mô hình đã được huấn luyện sẵn như ResNet-50, VGG19,DenseNet-121 và EfficientNet-B0 Sau đó thực hiện đánh giá hiệu suất của mô hình dựa trênphương pháp đánh giá AUC-ROC và GradCAM để đưa ra kết luận về quá trình huấn luyện

Kết quả đánh giá đã cho thấy được việc huấn luyện dựa theo các mô hình DenseNet-121 vàEfficientNet-B0 cho hiệu suất tốt hơn phần còn lại (AUC 77% - 78%), việc huấn luyện trên tập

dữ liệu đầy đủ cho hiệu suất ổn định đồng đều ở tất cả các lớp so với việc huấn luyện trên tập

dữ liệu với tư thế chụp PA (một số lớp có AUC dưới 60%) Tuy nhiên, khi đánh giá dựa trên khảnăng diễn giải thì mô hình cho kết quả chưa được tối ưu nhưng vẫn đáp ứng được cho việc hỗtrợ quá trình chẩn đoán

và triển khai tất cả các tính năng cốt lõi của đề tài Ứng dụng web này sẽ bao gồm Frontend,Backend, cơ sở dữ liệu và cả quá trình đóng gói và triển khai Các tính năng như đăng ký, đăngnhập, dự đoán, thêm nhãn, gửi kết quả thông qua email và các tính năng khác sẽ được thực hiệnthông qua quy trình quản lý xác thực và phân quyền, giúp ứng dụng tiến gần hơn đến việc trởthành một sản phẩm web đúng tiêu chuẩn và hoàn chỉnh Lưu ý rằng ứng dụng của đề tài chỉ hỗtrợ người dùng trong việc đưa ra chẩn đoán và không được sử dụng để thay thế bác sĩ và chuyêngia y tế để đưa ra kết luận chính thức.

Chương 1 TỔNG QUAN

1.1 Đặt vấn đề

Hệ thống Y tế Việt Nam phần lớn tập trung ở 3 tuyến chính, trong đó các bệnh viện thuộctuyến y tế cơ sở (tuyến huyện/quận, xã/phường) chiếm đa số với nhiệm vụ chăm sóc sức khỏecho đại đa số người dân Tuy nhiên, do vấn đề về cơ chế, các tuyến y tế cơ sở chưa nhận được

sự quan tâm đúng mức Các bệnh viện tuyến cơ sở phải đối mặt với các thách thức về thiếu hụtthiết bị và thiếu hụt nhân sự có chuyên môn cao

Hình 1.1: Mạng lưới tổ chức y tế Việt Nam[22]

Trong khi không thể giải quyết các vấn đề đang gặp phải của các bệnh viện tuyến cơ sở mộtcách hoàn thiện và nhanh chóng, việc triển khai một ứng dụng trí tuệ nhân tạo để hỗ trợ choviệc chẩn đoán tại các bệnh viện tuyến cơ sở là một giải pháp khả thi nhằm giúp tiết kiệm chiphí cũng như thời gian cho cả nhân viên y tế và bệnh nhân

Trong những năm gần đây, Deep Learning đã được sử dụng rộng rãi trong các ứng dụng yhọc để giải quyết các vấn đề phức tạp trong việc chẩn đoán và điều trị bệnh Việc sử dụng DeepLearning trong hỗ trợ chẩn đoán hình ảnh X quang phổi giúp tăng tốc độ và độ chính xác củaquá trình chẩn đoán, giảm thiểu tối đa sai sót và giúp người dùng nói chung và các chuyên gia y

tế nói riêng có thể đưa ra các phương án điều trị hiệu quả hơn Trong đề tài này, nhóm tập trungvào việc thiết kế và phát triển một ứng dụng chẩn đoán bệnh dựa trên ảnh X quang phổi sử dụngDeep Learning Ứng dụng sẽ có khả năng chẩn đoán các bệnh về phổi thông qua việc phân tíchhình ảnh X quang và đưa ra kết quả chẩn đoán chính xác

Đề tài "Thiết kế ứng dụng chẩn đoán hình ảnh X quang phổi sử dụng Deep Learning" sẽmang lại nhiều lợi ích cho ngành y học, đặc biệt là trong việc chẩn đoán và điều trị các bệnh

về phổi Nó sẽ giúp tiết kiệm thời gian, tăng độ chính xác và giảm thiểu sai sót trong việc chẩnđoán bệnh, cải thiện chất lượng chăm sóc sức khỏe và mang đến một tương lai y tế tốt hơn chocon người

• Mô tả được quy trình xây dựng và triển khai một ứng dụng web hoàn chỉnh, đáp ứng đầy

đủ các yêu cầu về tính năng cũng như bảo mật

1.3 Nội dung nghiên cứu

Trong quá trình thực hiện Đồ án tốt nghiệp với đề tài Thiết kế ứng dụng chẩn đoán hình ảnh

X quang phổi sử dụng Deep Learning, nhóm chúng em đã tập trung giải quyết và hoàn thànhđược những nội dung sau:

• Nội dung 1: Tìm hiểu cơ sở lý thuyết và chọn lọc các bệnh lý tiêu biểu liên quan đến phổi.

• Nội dung 2: Tìm kiếm và thu thập dữ liệu.

• Nội dung 3: Tìm hiểu, lựa chọn phương pháp xây dựng mô hình AI và hệ thống.

• Nội dung 4: Xây dựng, huấn luyện và đánh giá mô hình.

• Nội dung 5: Xây dựng API đưa ra dự đoán từ mô hình đã huấn luyện.

• Nội dung 6: Xây dựng Backend.

• Nội dung 7: Thiết kế giao diện người dùng (Frontend).

• Nội dung 8: Chạy thử nghiệm, kiểm tra và hiệu chỉnh hệ thống.

• Nội dung 9: Đóng gói và triển khai ứng dụng với Docker.

• Nội dung 10: Viết báo cáo thực hiện.

• Nội dung 11: Bảo vệ luận văn

1.4 Giới hạn

• Chỉ sử dụng bộ dữ liệu "NIH-Chest Xray" để huấn luyện mô hình Không tạo nên tính đadạng về dữ liệu và các bệnh lý

• Số lượng các nhãn bệnh lý được phân loại là 14 nhãn

• Các mô hình chỉ được huấn luyện và thí nghiệm dựa trên 4 pre-trained model: ResNet-50,VGG19, DenseNet-121 và EfficientNet-B0

• Ứng dụng web được thiết kế bằng thư viện ReactJS cho Frontend, framework ExpressJScho Backend, thư viện Flask cho model API và cơ sở dữ liệu được sử dụng là MongoDB

• Ứng dụng web chỉ được triển khai dưới dạng tạo một đường hầm từ internet vào máy chủthông qua công cụ Ngrok mà chưa được triển khai bằng việc dùng địa chỉ IP công khai và

sử dụng tên miền riêng

• Cơ sở dữ liệu vẫn được quản lý bằng MongoDB Atlas, một dịch vụ quản lý cơ sở dữ liệutrực tuyến, chưa được triển khai dưới dạng một máy chủ tích hợp

• Chưa có môi trường thực tế để chạy kiểm định toàn hệ thống

1.5 Bố cục

• Chương 1:Tổng quan

Chương này trình bày lý do chọn đề tài, mục tiêu, nôi dung nghiên cứu, các giới hạn thông

số và bố cục của đề tài

• Chương 2:Cơ sở lý thuyết

Chương này trình bày cơ sở lý thuyết về Deep Learning và các mô hình được sử dụng đểphân loại bệnh phổi, các kiến thức nền tảng về thiết kế ứng dụng web và đồng thời cungcấp thông tin về các hội chứng để có khả năng phân loại chính xác bệnh

• Chương 3:Thí nghiệm huấn luyện và phương pháp đánh giá mô hình

Chương này trình bày về phương pháp huấn luyện các mô hình trên tập dữ liệu được xử

lý Sau đó, đưa ra các phương pháp đánh giá mô hình đã huấn luyện nhằm tìm ra mô hìnhphân loại tốt nhất cho đề tài

• Chương 4:Thi công hệ thống

Chương này trình bày về quy trình xây dựng, đóng gói và triển khai ứng dụng phân loạibệnh phổi trên nền tảng web

• Chương 5:Kết quả - Nhận xét

Chương này trình bày về kết quả thu được từ mô hình phân loại dựa trên các phương phápđánh giá và kết quả xây dựng ứng dụng trên nền tảng web cũng như đưa ra các nhận xét

và đánh giá liên quan

• Chương 6:Kết luận và hướng phát triển

Chương này trình bày những điểm quan trọng nhất mà đề tài đã đạt được và hướng pháttriển của đề tài

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

2.1 Giới thiệu Deep Learning

Deep Learning là một phương pháp học máy trong lĩnh vực Trí tuệ nhân tạo (Artificial telligence) dựa trên kiến trúc mạng nơ-ron sâu (Deep Neural Network) Deep Learning sử dụngmạng nơ ron tích chập (Convolutional Neural Network - CNN) để xử lý và phân tích dữ liệuảnh Mạng CNN là một kiến trúc mạng nơ ron đặc biệt được thiết kế để nhận diện và trích xuấtđặc trưng từ ảnh Nó bao gồm các lớp tích chập, lớp tổng hợp (pooling), và các lớp kết nối đầy

In-đủ (fully connected layers) Các lớp tích chập sử dụng các bộ lọc để tìm kiếm các đặc trưng cục

bộ trong ảnh, như cạnh, góc, hoặc kết cấu Các lớp tổng hợp giúp giảm kích thước của đặc trưng

và giữ lại thông tin quan trọng Cuối cùng, các lớp kết nối đầy đủ dùng để phân loại ảnh vào cácnhãn tương ứng

Quá trình huấn luyện mô hình Deep Learning trong việc phân loại ảnh bao gồm hai giaiđoạn chính: lan truyền thuận và lan truyền ngược Trong giai đoạn lan truyền thuận ảnh đượcđưa vào mạng CNN, các ma trận tham số được áp dụng để tính toán giá trị đầu ra Các giá trịnày thường là các xác suất dự đoán cho mỗi nhãn Sau đó, trong giai đoạn lan truyền ngược,

mô hình tính toán hàm mất mát giữa dự đoán và nhãn thực tế của ảnh Quá trình lan truyềnngược sẽ tính toán và truyền lại đạo hàm của hàm mất mát từ lớp cuối cùng đến lớp đầu tiên củamạng nhằm điều chỉnh các tham số của mạng Mục tiêu là tối thiểu hóa giá trị của hàm mất mátthông qua thuật toán tối ưu (ví dụ: gradient descent) để cải thiện khả năng phân loại của mô hình

Quá trình huấn luyện mô hình Deep Learning trong bài toán phân loại ảnh X quang phổi đòihỏi một tập dữ liệu huấn luyện lớn và đa dạng để đảm bảo tính tổng quát Đồng thời, việc tinhchỉnh kiến trúc mạng, số lượng lớp và các siêu tham số khác của mô hình cũng rất quan trọng

để đạt được hiệu suất tốt nhất

2.2 Bài toán phân loại đa nhãn (Multilabel Classification)

Bài toán phân loại đa nhãn (Multilabel classification) là một loại bài toán trong đó mỗi mẫu

dữ liệu có thể được gắn nhiều nhãn (label) khác nhau, thay vì chỉ có một nhãn như trong bàitoán phân loại truyền thống Khi nhắc đến bài toán Multilabel, người ta thường nhắc đến việcphân loại dữ liệu đầu vào thành nhiều nhãn (label) khác nhau Nói cách khác, mỗi mẫu dữ liệu

có thể được gắn nhiều nhãn, khác với bài toán phân loại đơn nhãn chỉ có thể được gắn một nhãnduy nhất Các ứng dụng của bài toán Multilabel rất đa dạng, ví dụ như phân loại ảnh, phân loạivăn bản, phân loại video, phân tích dữ liệu y học và nhiều ứng dụng khác [9] Ví dụ, nếu xâydựng một hệ thống phân loại ảnh, thì bài toán Binary classification và Multiclass classification

sẽ đưa ra một dự đoán duy nhất về nhãn (label) của ảnh đó, ví dụ như "chó", "mèo" hoặc "xehơi" Tuy nhiên, nếu một ảnh có thể đồng thời chứa nhiều đối tượng khác nhau như "chó" và

"mèo", thì ta cần phải sử dụng bài toán Multilabel để xác định các nhãn tương ứng cho mỗi đốitượng Nếu một số bài toán phân loại yêu cầu đưa ra nhiều nhãn (label) đồng thời cho một mẫu

dữ liệu thì Multilabel classification là một phương pháp nên được sử dụng

Dựa vào hình 2.1 ta có 3 dạng chính của bài toán phân loại theo thứ tự từ trái sang phải.Đầu tiên với Binary classification, mô hình chỉ có thể đưa ra quyết định có hoặc không hay phảihoặc không phải Tiếp theo, bài toán Multiclass classification có thể giúp mô hình học nhiềuloại nhãn trong 1 mẫu dữ liệu nhưng đầu ra chỉ đưa ra nhãn có xác suất dự đoán cao nhất Cuốicùng, với bài toán Multilabel classification, mô hình có thể học nhiều loại nhãn trong 1 mẫu dữliệu và có thể đưa ra nhiều nhãn dự đoán tùy theo ngưỡng xác suất mà nó được định nghĩa

Hình 2.1: Sự khác nhau giữa Binary classification, Multiclass classification và Multilabel sification

clas-2.3 Transfer Learning

Transfer learning là một kỹ thuật trong lĩnh vực học sâu (Deep Learning) mà một mô hình

đã được huấn luyện trước trên một tác vụ có thể được sử dụng và tận dụng lại (transfer) chomột tác vụ khác có liên quan Thay vì huấn luyện một mô hình từ đầu trên một tập dữ liệu lớn,Transfer Learning giúp ta sử dụng kiến thức (các tham số) đã học được từ một mô hình đã tồntại để giải quyết một tác vụ mới

Transfer Learning dựa trên nguyên tắc rằng các đặc trưng cấp cao học được từ các tác vụphức tạp có thể hữu ích trong việc giải quyết các tác vụ mới Các nguyên tắc cơ bản bao gồm:

• Sử dụng kiến thức trước đã học từ tác vụ nguồn có liên quan để tăng cường quá trình họccủa mô hình trên tác vụ đích

• Sử dụng một mô hình học sâu đã được huấn luyện trên tác vụ nguồn làm cơ sở cho tác vụđích

• Tác vụ mới được giải quyết bằng việc sử dụng Transfer Learning

Hình 2.2: Kiến trúc cơ bản của Transfer Learning [16]

Transfer Learning có các phương pháp chuyển giao phổ biến, bao gồm:

• Fine-tuning: Sử dụng mô hình gốc làm cơ sở và điều chỉnh lại các trọng số của mô hìnhtrên tác vụ đích

• Feature extraction: Sử dụng mô hình gốc để trích xuất đặc trưng từ dữ liệu và sử dụng đặctrưng này trong mô hình mới cho tác vụ đích

Transfer Learning mang lại nhiều lợi ích quan trọng, bao gồm:

• Tiết kiệm thời gian và công sức: Sử dụng kiến thức của mô hình được huấn luyện trướcgiúp giảm thiểu quá trình huấn luyện từ đầu trên tác vụ đích

• Tận dụng kiến thức mô hình đã học: Sử dụng kiến thức của mô hình đã học từ các tác vụtrước đó để cải thiện hiệu suất mô hình trên tác vụ mới

• Đánh giá dữ liệu ít: Khi dữ liệu đích ít, Transfer Learning có thể giúp mô hình học tốt hơn

từ những kiến thức đã học từ dữ liệu nguồn

Transfer Learning đã được áp dụng thành công trong nhiều lĩnh vực, bao gồm phân loại ảnh,nhận dạng văn bản, nhận dạng giọng nói và dịch máy Việc chuyển giao kiến thức của mô hình

từ các tác vụ trước đó đến tác vụ đích đã giúp cải thiện hiệu suất và đạt được kết quả ấn tượng

2.4 Hàm kích hoạt Sigmoid

Hàm Sigmoid là một hàm số phi tuyến có dạng S-shaped curve (như hình 2.3) Hàm nàychuyển đổi một giá trị đầu vào thành một giá trị đầu ra nằm trong khoảng từ 0 đến 1 HàmSigmoid được biểu diễn bằng công thức toán học sau:

σ (x) = 1/(1 + e(−x)) (2.1)Trong đó, x là giá trị đầu vào và σ (x) là giá trị đầu ra của hàm Sigmoid

Trong bài toán phân loại đa nhãn (Multilabel Classification), hàm Sigmoid được sử dụng đểchuyển đổi đầu ra của mô hình thành xác suất cho từng nhãn Hàm Sigmoid có thể chuyển đổibất kỳ giá trị nào thành một giá trị xác suất trong khoảng từ 0 đến 1 và được sử dụng làm hàmkích hoạt (Activation function) cho lớp đầu ra (Output layer)

Hình 2.3: Hình dạng của hàm Sigmoid

Hàm Sigmoid cũng có một đặc tính quan trọng là đạo hàm của nó tính được một cách đơngiản Điều này cho phép áp dụng các phương pháp tối ưu hóa như Gradient Descent để điềuchỉnh các tham số của mô hình trong quá trình huấn luyện

2.5 Giới thiệu Dataset

Với mục tiêu của đề tài, việc lựa chọn một tập dữ liệu để huấn luyện mô hình là rất quantrọng và phải đáp ứng đầy đủ các yêu cầu sau:

• Tập dữ liệu phải được công nhận và sử dụng phổ biến trên các nghiên cứu về học sâu

• Số lượng các loại bệnh lý đa dạng

• Số lượng các mẫu dữ liệu đủ lớn và đồng đều

• Có các khoanh vùng bệnh, hỗ trợ quá trình đánh giá khả năng diễn giải của mô hình

Đề tài đã tiến hành khảo sát các tập dữ liệu về hình ảnh X quang lồng ngực đang được công khai

và sử dụng phổ biến Dựa theo thống kê tại hình 2.4, đề tài đưa ra được một số nhận định sau:

• Tập VinDR: Đây là một tập dữ liệu được phát triển bởi VinAI, được thu hoàn toàn trên cácbệnh nhân người Việt Nam, có số lượng bệnh lý cao nhất (28 loại bệnh) và có các khoanhvùng bệnh (local label) Tuy nhiên, số lượng các mẫu dữ liệu vẫn còn quá hạn chế so vớicác tập dữ liệu khác, không đủ điều kiện để huấn luyện mô hình học sâu hoàn chỉnh

• Tập ChestXpert và MIMIC: Cả 2 tập dữ liệu này đều được sử dụng nhiều trong các nghiêncứu về lĩnh vực học sâu với 14 loại bệnh lý và hơn 200,000 mẫu dữ liệu khác nhau Tuynhiên cả 2 tập dữ liệu này đều không hỗ trợ các khoanh vùng bệnh (local labels) để có thểthực hiện đánh giá khả năng diễn giải của mô hình.

• Tập NIH Chest X-ray (ChestX-ray14): Đây là tập dữ liệu được sử dụng phổ biến tronghuấn luyện mô hình học sâu, với 14 loại bệnh lý và hơn 100,000 mẫu dữ liệu phù hợp choviệc huấn luyện một mô hình AI Ngoài ra dựa theo công bố của NIH Clinical Center [14]

về tập dữ liệu này thì nó còn có khoảng 1,000 hình ảnh được khoanh vùng tổn thương,phù hợp với mục tiêu đánh giá khả năng diễn giải của mô hình

Hình 2.4: Tổng quan các tập dữ liệu về hình ảnh X-quang lồng ngực (CXR) đang được côngkhai trên thế giới [5]

Dựa vào các tập dữ liệu đã được khảo sát, đề tài sẽ sử dụng tập dữ liệu NIH Chest X-ray làmtập dữ liệu để huấn luyện mô hình vì đáp ứng được các mục tiêu mà đề tài đặt ra Đây là mộttập dữ liệu được sử dụng trong nhiều nghiên cứu trong lĩnh vực học sâu và trí tuệ nhân tạo, đặcbiệt là trong bài toán chẩn đoán hình ảnh y tế Tập dữ liệu này bao gồm nhiều hình ảnh X quangphổi được chụp từ nhiều bệnh viện và cơ sở y tế trên khắp thế giới với hơn 100,000 hình ảnh Xquang từ hơn 30,000 bệnh nhân [14]

Bên cạnh đó, bộ dữ liệu NIH Chest X-ray còn đóng góp cho việc phát triển các giải pháphọc máy và học sâu trong lĩnh vực y tế Nhờ vào bộ dữ liệu này, các nhà nghiên cứu và nhà pháttriển có thể tiến hành các thử nghiệm, so sánh, và tối ưu hóa các mô hình học sâu, góp phầnnâng cao chất lượng chẩn đoán và điều trị bệnh lý phổi Các nhãn ảnh được trích xuất bằng NLP(Natural Language Processing) nên có thể tồn tại một số nhãn không chính xác Tuy nhiên, độchính xác của việc gán nhãn bằng NLP được ước tính là >90% [14].

Các số liệu báo cáo của NIH Chest X-ray bao gồm:

• Số lượng ảnh: Tập dữ liệu gốc có khoảng 112,120 hình ảnh X-quang lồng ngực từ 30,805bệnh nhân khác nhau [14]

• Số lượng bệnh: Tập dữ liệu bao gồm 14 loại bệnh lý khác nhau của phổi [14]

Hình 2.5: Phân phối của 14 hội chứng trong tập dữ liệu NIH Chest X-ray [14]

2.6 Các mô hình phân loại dựa trên CNN

DenseNet-121 là một kiến trúc mạng nơ ron tích chập (CNN) được sử dụng trong lĩnh vựcthị giác máy tính Nó là một phiên bản cụ thể của mô hình DenseNet với 121 lớp [23] DenseBlock là một khối xây dựng chính trong DenseNet-121, được sử dụng để trích xuất đặc trưng từảnh X quang Mỗi lớp tích chập trong Dense Block nhận đầu vào từ tất cả các lớp trước đó trongcùng một Dense Block, cho phép thông tin được truyền từ các lớp trước đó đến các lớp sau đó.Điều này tạo ra một kết nối mật thiết giữa các lớp và giúp mô hình học được các đặc trưng phứctạp và cấu trúc sâu từ ảnh X quang

Sau mỗi Dense Block, DenseNet-121 sử dụng một Transition Layer để giảm kích thước củađặc trưng trước khi đưa chúng vào Dense Block tiếp theo Transition Layer bao gồm một lớptích chập 1x1 để giảm số chiều của đặc trưng và một lớp tổng hợp (pooling layer) để giảm kíchthước đặc trưng Qua Transition Layer, thông tin được nén và trích xuất chỉ số đặc trưng quantrọng [23]

Sau khi thông qua Dense Block và các Transition Layer, đầu ra cuối cùng của DenseNet-121được đưa vào một lớp tổng hợp toàn cục (global average pooling) để chuyển đổi ma trận đặctrưng thành một vector đặc trưng duy nhất Vector đặc trưng này chứa thông tin tóm tắt về ảnh

và được sử dụng để phân loại ảnh vào các nhãn tương ứng thông qua các lớp kết nối đầy đủ(fully connected layers)

Hình 2.6: Kiến trúc của mạng DenseNet-121[3]

2.6.2 ResNet-50

ResNet-50 là một kiến trúc mạng nơ ron tích chập, được thiết kế đặc biệt để xử lý hình ảnh,

có khả năng học và trích xuất các đặc trưng quan trọng từ hình ảnh thông qua việc sử dụng cáclớp tích chập và lớp gộp để nhận biết các mẫu và cấu trúc hình ảnh Nó là một phiên bản cụ thểcủa kiến trúc ResNet với tổng cộng 50 lớp, bao gồm các lớp tích chập, lớp gộp và lớp kết nốiđầy đủ (fully connected layers) Nó được xây dựng từ các khối residual block, trong đó mỗi khốichứa một số lượng lớp tích chập Các khối residual block được kết nối với nhau thông qua cáclớp chuyển tiếp để điều chỉnh kích thước không gian và số lượng đặc trưng[11]

Kiến trúc kết nối dày đặc của ResNet-50 cho phép mô hình học được các đặc trưng phức tạp

và tái sử dụng đặc trưng từ các lớp trước đó Điều này cung cấp khả năng nhận diện và phân loạicác biểu hiện tương đối nhỏ trong ảnh X quang phổi, như sự hiện diện của bệnh lý hay các chitiết về cấu trúc phổi

ResNet-50 đã được huấn luyện trước trên tập dữ liệu lớn như ImageNet, cho phép mô hìnhhọc được các đặc trưng cơ bản của hình ảnh Sau đó, nó có thể được điều chỉnh lại trên tập dữliệu chẩn đoán ảnh X quang phổi để tập trung vào việc phát hiện và phân loại bệnh lý phổi Quátrình này gọi là fine-tuning, và nó giúp cải thiện độ chính xác và khả năng chẩn đoán của môhình[11]

Hình 2.7: Kiến trúc của mạng ResNet-50 [10]

2.6.3 VGG19

VGG19 là một kiến trúc mạng nơ ron tích chập (CNN), là phiên bản cụ thể của mạng VGG(Visual Geometry Group) với tổng cộng 19 lớp VGG19 bao gồm một chuỗi các lớp tích chập(convolutional layers) với các bộ lọc nhỏ kích thước 3x3 và bước nhảy (stride) bằng 1 Kiến trúcnày giúp mô hình học được các đặc trưng cục bộ từ ảnh Sau mỗi lớp tích chập, VGG19 sử dụngmột lớp kích hoạt phi tuyến (activation function) là hàm ReLU để tạo không gian phi tuyến tính

và đánh thức các đặc trưng Lớp tổng hợp (pooling layer) được sử dụng sau mỗi đôi lớp tíchchập để giảm kích thước của đặc trưng và trích xuất thông tin quan trọng Trong VGG19, lớptổng hợp sử dụng phương pháp tổng hợp tối đa (max pooling) với cửa sổ 2x2 và bước nhảy là 2[18]

Một điểm đặc biệt của VGG19 là sự lặp lại của các khối lớp tích chập và tổng hợp Cụ thể,

mô hình có 5 khối lớp tích chập và 5 khối lớp tổng hợp Điều này cho phép VGG19 học đượccác đặc trưng ở nhiều mức độ chi tiết, từ các đặc trưng cục bộ đến các đặc trưng toàn cục, cảithiện khả năng hiểu và phân loại ảnh

Một trong những ưu điểm quan trọng của VGG19 là khả năng áp dụng phương pháp học tậpchuyển giao (Transfer Learning) Điều này có nghĩa là ta có thể sử dụng các trọng số đã đượchuấn luyện trên tập dữ liệu lớn (như ImageNet) và chỉ tinh chỉnh một số lớp cuối cùng cho bàitoán cụ thể Việc sử dụng Transfer Learning giúp tiết kiệm thời gian huấn luyện và cung cấpkhả năng phân loại ảnh X quang hiệu quả [18]

Hình 2.8: Kiến trúc của mạng VGG19 [2]

2.6.4 EfficientNet-B0

EfficientNet-B0 là một kiến trúc mạng nơ-ron sâu (Deep neural network) đặc biệt trong họEfficientNet, được phát triển để đạt hiệu suất và hiệu quả tính toán cao trong việc xử lý ảnh.Kiến trúc này được xây dựng trên cơ sở lý thuyết của EfficientNet và sử dụng khái niệm "tinhchỉnh quy mô" (scaling) để tăng hoặc giảm kích thước của mạng

EfficientNet sử dụng tinh chỉnh quy mô bằng cách thay đổi độ sâu, độ rộng và độ phân giảicủa mạng Quy mô được điều chỉnh sao cho tìm được sự cân bằng tối ưu giữa hiệu suất và tàinguyên tính toán Điều này đảm bảo rằng mạng có khả năng tổng hợp thông tin tốt trong khivẫn duy trì hiệu suất cao và tiết kiệm tài nguyên tính toán

Một trong những đặc điểm quan trọng của EfficientNet là sử dụng lớp tích chập tách biệttheo chiều sâu (depth-wise separable convolution) Lớp tích chập này chia mỗi phép tính tíchchập thành hai giai đoạn: tích chập riêng biệt trên từng kênh đầu vào và tích chập 1x1 để kếthợp các đặc trưng lại với nhau Kỹ thuật này giúp giảm số lượng tham số và tính toán, đồng thờităng tính hiệu quả của mạng [12]

Hình 2.9: Kiến trúc của mạng EfficientNet-B0 [19]

2.7 Giới thiệu về ứng dụng Web

Để xây dựng một ứng dụng web hoàn chỉnh, hệ thống cần có các thành phần cơ bản sau:

• Frontend (Phía người dùng):

– Frontend là một phần của hệ thống web, đóng vai trò trong việc hiển thị giao diện

người dùng và tương tác với người dùng Nó chịu trách nhiệm xây dựng và quản lýgiao diện người dùng trên trình duyệt web

– Frontend được xây dựng bằng HTML, CSS và JavaScript, ngoài việc hiển thị và

tương tác với người dùng thì Frontend còn gửi các yêu cầu tới Backend để lấy dữliệu và xử lý các yêu cầu của người dùng và trả kết quả về cho Frontend Để có thểxây dựng được Frontend, chúng ta có thể dùng HTML, CSS và có thể kết hợp vớiJavaScript

• Backend (Phía máy chủ):

– Backend được xây dựng bằng các ngôn ngữ lập trình (như Node.js, Python, Java,

PHP), chịu trách nhiệm xử lý yêu cầu từ Frontend, xử lý các logic, truy xuất cơ sở

dữ liệu và là nơi phân phát dữ liệu được lấy từ cơ sở dữ liệu cho Frontend

– Backend còn có thể thực hiện các biện pháp bảo mật cho ứng dụng như xác thực

người dùng, kiểm tra quyền truy cập và mã hóa dữ liệu

– Thường thì các chức năng sẽ được triển khai dưới dạng API (Application

Program-ming Interface) bằng việc tạo các endpoint để giao tiếp với Frontend hoặc các ứngdụng khác thông qua các phương thức HTTP như GET, POST, PUT, DELETE

• Cơ sở dữ liệu:

– Cơ sở dữ liệu là nơi lưu trữ và quản lý dữ liệu cho ứng dụng và có thể được coi là

một phần của Backend trong kiến trúc ứng dụng web Trong một hệ thống web, cơ

sở dữ liệu thường được quản lý bởi hệ quản trị cơ sở dữ liệu (Database ManagementSystem - DBMS) như MySQL, PostgreSQL và MongoDB Backend sử dụng cáctruy vấn và lệnh để tương tác với cơ sở dữ liệu, như lấy dữ liệu, thêm, sửa, xoá dữ

– Backend và cơ sở dữ liệu thường hoạt động cùng nhau để cung cấp các chức năng

và dữ liệu cho ứng dụng web Backend sẽ sử dụng cơ sở dữ liệu để lưu trữ và truyxuất thông tin cần thiết, thực hiện các phép tính và xử lý dữ liệu trước khi trả về choFrontend

• Giao tiếp giữa Frontend và Backend:

– Giao tiếp giữa Frontend và Backend là quá trình trao đổi dữ liệu và thông tin giữa

hai phía để thực hiện các hoạt động và tương tác trên ứng dụng web Frontend gửiyêu cầu tới Backend, Backend xử lý yêu cầu và trả về phản hồi, cuối cùng Frontend

xử lý phản hồi và cập nhật giao diện người dùng

– Chi tiết hơn, Frontend có thể gửi yêu cầu HTTP (Hypertext Transfer Protocol) và

máy chủ sẽ trả lời bằng một phản hồi HTTP Yêu cầu HTTP bao gồm các phươngthức như GET, POST, PUT, DELETE để chỉ định mục đích của yêu cầu, sau khi xử

lý yêu cầu từ Frontend thì Backend sẽ phản hồi HTTP chứa mã trạng thái (statuscode) để chỉ trạng thái của yêu cầu (ví dụ: thành công, lỗi, chuyển hướng) và dữ liệuphản hồi tương ứng

• Đóng gói và triển khai:

– Containerization: Sử dụng các công cụ như Docker để đóng gói ứng dụng và các phụ

thuộc của nó trong một môi trường cô lập gọi là container Điều này đảm bảo rằngứng dụng sẽ hoạt động như mong đợi trên bất kỳ máy tính hoặc môi trường nào màDocker được cài đặt Điều này sẽ giúp cho việc đóng gói toàn bộ chương trình củaứng dụng và triển khai trên máy chủ một cách nhanh chóng và tiện lợi nhất

2.7.2 React JS

ReactJS là một thư viện JavaScript mã nguồn mở được sử dụng để xây dựng giao diện ngườidùng (UI) cho các ứng dụng web Nó được phát triển bởi Facebook và được sử dụng rộng rãitrong cộng đồng phát triển phần mềm ReactJS sử dụng mô hình component-based, trong đógiao diện người dùng được chia thành các thành phần độc lập và có thể tái sử dụng Mỗi thànhphần (component) trong ReactJS có trạng thái (state) và có thể nhận đầu vào (props) để tạo ragiao diện tương ứng Sự thay đổi trong trạng thái của một thành phần sẽ tự động kích hoạt việccập nhật giao diện, giúp tăng hiệu năng và sự tương tác linh hoạt Trước khi có ReactJS, lập trìnhviên thường gặp rất nhiều khó khăn trong việc sử dụng “vanilla JavaScript”(JavaScript thuần)

và JQuery để xây dựng UI Điều đó đồng nghĩa với việc quá trình phát triển ứng dụng sẽ lâuhơn và xuất hiện nhiều bug, rủi ro hơn [8]

Trọng tâm chính của bất kỳ website cơ bản nào đó là những HTML documents Trình duyệtWeb đọc những document này để hiển thị nội dung của website trên máy tính, tablet, điện thoạicủa bạn Trong suốt quá trình đó, trình duyệt sẽ tạo ra một thứ gọi là Document Object Model(DOM) – một tree đại diện cho cấu trúc website được hiển thị như thế nào Lập trình viên cóthể thêm bất kỳ dynamic content nào vào những dự án của họ bằng cách sử dụng ngôn ngữJavaScript để thay đổi cây DOM [8]

Hình 2.10: Ví dụ về cấu tạo của một DOM [21]

Hơn nữa, để tăng tốc quá trình phát triển và giảm thiểu những rủi ro có thể xảy ra trong khilập trình, React còn cung cấp cho chúng ta khả năng Reusable Code (tái sử dụng code) bằng

• JSX: ReactJS sử dụng JSX (JavaScript XML) để tạo ra các thành phần giao diện JSX làmột phần mở rộng của JavaScript cho phép kết hợp mã HTML và JavaScript trong cùngmột tệp, giúp tăng cường khả năng đọc và viết mã.

Hình 2.11: Cách triển khai JSX trên chương trình ReactJS [7]

• Virtual DOM: ReactJS sử dụng Virtual DOM (DOM ảo) để tối ưu hiệu suất và tốc độ củaứng dụng web Virtual DOM cho phép React so sánh và cập nhật chỉ những phần thay đổitrong giao diện thay vì cập nhật toàn bộ DOM, giúp giảm tải cho trình duyệt và cải thiệntrải nghiệm người dùng

Hình 2.12: Cách Virtual DOM hoạt động

Với những nổi bật kể trên, chúng ta có thể thấy ReactJS là một thư viện JavaScript mạnh mẽ

và linh hoạt được sử dụng để xây dựng giao diện người dùng cho các ứng dụng web và được lựachọn để phát triển phần Frontend của đề tài

2.7.3 Express JS

Express là một web framework phổ biến, được viết bằng JavaScript và chạy trên môi trườngNode.js [20] Nó cung cấp khả năng xây dựng các ứng dụng web phức tạp một cách tiện lợi vàđơn giản hóa bằng cách cung cấp cú pháp đơn giản và các chức năng cơ bản, trong khi vẫn giữđược khả năng mở rộng và linh hoạt

Hình 2.13: Logo của framework ExpressJSMột số đặc điểm và lợi ích của Express JS:

• Routing: Express JS giúp quản lý các (routes) trong ứng dụng web Một cách chi tiết hơn,routes có thể được hiểu là các đường dẫn (URLs) mà ứng dụng web có thể truy cập (ví

dụ https://mywebsite.vn/myroute) và định nghĩa cách xử lý yêu cầu từ phía client gửi đếncác đường dẫn đó Khi client thực hiện một yêu cầu, server sẽ dựa vào đường dẫn trongyêu cầu để xác định route tương ứng và thực hiện các hành động cần thiết

• Middleware: Express JS còn hỗ trợ middleware, nó là các hàm trung gian được thực thigiữa quá trình xử lý yêu cầu và phản hồi Middleware cho phép bạn thực hiện các tác vụnhư xác thực, xử lý lỗi, ghi log, và cụ thể là được sử dụng để kiểm tra JWT giúp xác thực

và phân quyền người dùng trong đề tài

• Cấu hình linh hoạt: Express JS cho phép bạn cấu hình ứng dụng của mình dễ dàng thôngqua các tệp cấu hình như định nghĩa các biến môi trường, thiết lập port của ứng dụng,thiết lập kết nối với cơ sở dữ liệu,

• Quản lý trạng thái: Express JS hỗ trợ các phương pháp quản lý trạng thái như cookies,session, JWT (JSON Web Tokens), hay lưu trữ trạng thái trên phía client (client-sidestate)

2.7.4 API

API hay Application Programming Interface là phương thức hay cơ chế cho phép 2 thànhphần của phần mềm giao tiếp với nhau Hoặc vẫn được hiểu là giao diện lập trình ứng dụng.API cung cấp khả năng truy xuất đến một tập các hàm hay dùng Nó khiến cho việc trao đổi dữliệu giữa các ứng dụng trở nên hiệu quả hơn [7] Một cách đơn giản hơn, API cho phép hai ứngdụng khác nhau hoạt động cùng nhau một cách liên kết, cho phép chúng truyền và chia sẻ thôngtin một cách dễ dàng

Trong đề tài, API đóng vai trò như một trung gian Khi Frontend có những hoạt động, nhữngthao tác yêu cầu thực hiện tay tương tác với cơ sở dữ liệu thì thay vì theo một cách truyền thống,

ta sẽ cho phép Frontend truy cập trực tiếp vào cơ sở dữ liệu và tiến hành sửa đổi, lấy dữ liệu, nhưng khi sử dụng API, ở phía Backend ta sẽ định nghĩa các API thực hiện các chức năngkhác nhau với cơ sở dữ liệu Khi Frontend thực hiện các thao tác cần làm việc với cơ sở dữ liệu,lúc này Frontend sẽ chỉ được gọi các API cụ thể mà đã được định nghĩa trong Backend để thựchiện các tác vụ một cách cụ thể Điều này sẽ giúp bảo mật cơ sở dữ liệu khi hạn chế được việcFrontend được truy cập trực tiếp vào cơ sở dữ liệu của ứng dụng mà phải thông qua một API đãđược tạo ra và được kiểm soát Ngoài ra việc sử dụng API sẽ giúp ta dễ dàng quản lý ứng dụng,

có thể thực hiện được các tiêu chuẩn bảo mật như JWT (JSON Web Token) một cách dễ dàng

API RESTful định danh các tài nguyên bằng cách sử dụng các URI (Uniform ResourceIdentifier) Mỗi API được định nghĩa để thực hiện một chức năng nào đó thì có một URI duynhất và được quản lý thông qua các phương thức HTTP như GET, POST, PUT, DELETE Dướiđây là chi tiết về các phương thức của RESTful API:

• GET: Phương thức GET được sử dụng để truy vấn và lấy thông tin từ tài nguyên

• POST: Phương thức POST được sử dụng để gửi dữ liệu mới đến máy chủ để tạo tài nguyênmới

• PUT: Phương thức PUT được sử dụng để cập nhật hoặc thay đổi thông tin của một tàinguyên thành dữ liệu mới được cung cấp trong yêu cầu

• DELETE: Phương thức DELETE được sử dụng để xóa một tài nguyên từ máy chủ