big project software engineering project name skin disease detection app

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (3.31 MB, 23 trang )

Trang 1<div class="page_container" data-page="1">

HANOI UNIVERSITY OF SCIENCE AND TECHNOLOGY

SCHOOL OF ELECTRICALENGINEERING

BIG PROJECT

SOFTWARE ENGINEERING

Project Name:

Skin Disease Detection App

Students: Đặng Hoàng Lan (20203801)Phạm Quang Huy (20200282)Đỗ Hồng Khơi (20200332)Class: CTTT Điện tử 01-K65 Instructor: ASSOC. PROF. LE THI LAN

</div>Trang 2<div class="page_container" data-page="2">

TABLES OF CONTENT

LIST OF FIGURES...i

CHAPTER 1: OVERVIEW OF OUR SKIN DISEASES DETECTION SYSTEM...2

CHAPTER 2: SYSTEM DESIGN ANALYSIS...3

2.2.2 Detailed Use Case...4

2.2.3 Use Case Diagram...5

2.2.4 Activity Diagram for user (patient)...6

2.2.5 Activity diagram for doctor...8

2.3 Database Design...9

2.3.1 Entity-Relationship Diagram (ER Diagram)...9

2.3.2 Relational-Relationship Diagram (RR Diagram)...9

3.1.1 Testing login and register features...12

3.1.2 Testing skin disease detection feature...12

3.1.3 Testing editing profile (both for Patient/Doctor) feature...12

3.1.4 Testing “Appointment” feature (for Doctor)...13

3.1.5 Testing “Appointment” feature (for Patient)...13

3.2 User Interface...13

3.2.1 Login/Register Screens...13

3.2.2 Patient Screens...14

</div>Trang 4<div class="page_container" data-page="4">

LIST OF FIGURES

Figure 2-1 Use Case Diagram...5

Figure 2-2 Patient Activity Diagram...6

Figure 2-3 Patient Activity Diagram of “Make schedules with doctor”...7

Figure 2-4 Doctor Activity Diagram...8

Figure 2-5: Entity-Relationship Diagram...9

Figure 2-6 Relational-Relationship Diagram...9

Figure 3-1 From left to right: Welcome Screen, Register Screen, Login Screen...13

Figure 3-2 Patient Main Screen...14

Figure 3-3 Interface of “Take skin photo” and “My detection history” functionalities...14

Figure 3-4 Interface of “Edit Profile” functionality...15

Figure 3-5 Interface of “My Appointments” functionality...15

Figure 3-6 Doctor Main Screen...16

Figure 3-7 Interface of “My Appointments” functionality...16

Figure 3-8 Interface of “Edit Profile” functionality...17

</div>Trang 5<div class="page_container" data-page="5">

Skin diseases are a prevalent health issue that affects people of all ages andraces. These conditions range from benign and easily treatable to life-threatening anddisfiguring, and can have a significant impact on an individual's quality of life. Earlydiagnosis and treatment of skin diseases are crucial for avoiding long-termcomplications and reducing their impact on the patient's wellbeing. Despite theimportance of early diagnosis, many people, particularly those in rural or resource-limited areas, do not have access to a dermatologist or may face long wait times forappointments. Furthermore, dermatologists are often overburdened with a high volumeof patients, making it challenging to provide timely and accurate diagnoses.

With the advancements in technology, mobile devices and applications havebecome an indispensable part of our lives, and healthcare is no exception. Thedevelopment of mobile health solutions has the potential to transform healthcaredelivery by providing accessible and affordable solutions for various health conditions.Motivated by the need for early skin diseases diagnosis and the widespread use ofpersonal smartphones, we propose a cross-platform smartphone app that can be usedas a camera tool for detecting skin cancers, or skin-related diseases in general. Our appaims to provide an accurate, accessible, and affordable way of detecting skin diseasesin their early stages. The app leverages the power of machine learning algorithms andcomputer vision technology to analyze skin images and provide a diagnosis in real-time.

Due to the nature of this project as a software engineering project, we will notdiscuss about the AI algorithms and computer vision techniques used for the skindiseases detection model. Instead, in this report, we will provide a detailed analysis ofthe design and development of the database system and the client-server interaction ofour skin disease detection app. We will also present the results of our our app in testmode. Finally, we will discuss the limitations and future directions of the app andexplore its potential to improve access to healthcare and early diagnosis of skindiseases.

</div>Trang 6<div class="page_container" data-page="6">

CHAPTER 1: OVERVIEW OF OUR SKIN DISEASES DETECTION SYSTEM

The skin disease detection system that our team develops and is integrated inour app utilizes a combination of a Deep Learning model (DenseNet, InceptionNet,ResNet, etc) with Soft-Attention, which unsupervisedly extract a heat map of mainskin lesions to identify patterns associated with different diseases.

The system can detect seven skin diseases, including:

1.[akiec][VN: Ung thư tế bào vảy khu trú] Actinic Keratoses (Solar Keratoses)and Intraepithelial Carcinoma (Bowen’s disease)

2.[bcc][VN: Ung thư biểu mô tế bào đáy] Basal cell carcinoma3.[bkl][VN: Dày sừng tiết bã] Benign keratosis

4.[df][VN: U sợi bì] Dermatofibroma5.[nv][VN: Nốt ruồi] Melanocytic nevi6.[mel][VN: Ung thư hắc tố da] Melanoma7.[vasc][VN: U mạch anh đào] Vascular skin lesions

Details about our skin diseases detection system can be found in this paper: Nguyen, V.D.; Bui, N.D.; Do, H.K. Skin Lesion Classification on Imbalanced DataUsing Deep Learning with Soft Attention. Sensors 2022 22,, 7530.

class="text_page_counter">Trang 7<div class="page_container" data-page="7">

CHAPTER 2: SYSTEM DESIGN ANALYSIS

2.1 System of Requirements

2.1.1 Functional Requirements

REQ-1 5 Take high-quality pictures of the skin, in differentlighting conditions

REQ-2 4 Detect the skin area in the pictures and identify common skin conditions based on visualcharacteristics.

REQ-3 5 Provide information on the identified skin condition,including its symptoms, causes, and treatment options.

REQ-4 2 Store and track the user's skin pictures and detectionhistory, allowing for monitoring and comparison overtime.

REQ-5 4 Provide users information on skin care and treatmentoptions

REQ-6 3 Customize the app's features and settings based on theuser's preferences, including skin type, skinconditions, and allergies.

REQ-7 5 Enable users to set meeting schedules withdermatologists to seek further advice

REQ-8 3 Ensure the privacy and security of the user's personaland medical information.

2.1.2 Non-functional Requirements

REQ-1 5 High levels of accuracy and reliability in the app's ability toidentify and diagnose skin conditions.

REQ-2 4 A user-friendly interface and easy-to-follow instructionsREQ-3 3 Fast processing times and responsive performanceREQ-4 2 Compatibility with a wide range of device types and

operating systems

REQ-5 3 Robust security measures to protect the privacy andconfidentiality of the user's personal and medicalinformation.

REQ-6 3 Regular updates and maintenance

</div>Trang 8<div class="page_container" data-page="8">

REQ-7 2 Support for multiple languages

REQ-8 2 Accessibility features, such as support for screen readers and large text

2.2 Functional Requirement Specifications

2.2.1 Use Cases

ActorUse Cases

User (Patient) UC1: Take picture of the skinUC2: Get prediction’s result

UC3: Edit personal information

UC4: Set appointment with doctorsUC5: View prediction’s history

UC6: Login/Register to the app

Doctor UC3: Edit personal informationUC6: Login/Register to the app

UC7: Add available schedulesUC8: Check appointment historyUC9: Request profile validation checkAdmin UC10: Validate doctor’s profile

2.2.2 Detailed Use Case

Use Case UC-2:Get prediction’s resultRelated

REQ2, REQ3 stated in Functional Requirements

Initiating Actor: Patient

Actor’s Goal: To send picture of actor’s skin to the server, and get backprediction’s result.

Participating Actors: AI Module

Preconditions: The picture sent to the server is a valid JPEG/PNG pictureThe actor has specified background information of the picture (age, gender, location of skin area)

Postconditions: The prediction’s result is sent back to actor

Flow of Events for Main Success Scenario:

1. include:: Take picture of the skin (UC-1)

2. Patient specifies background information for the taken picture (age,

gender, location of skin’s area)

3. Patient sends request to System to get prediction’s result

4. System (a) preprocesses the image and sends it to AI Module to getprediction’s result, and (b) searches database to get related informationabout the diseases (if any)

5. System sends the prediction’s results and related info back to Patient

</div>Trang 9<div class="page_container" data-page="9">

2.2.3 Use Case Diagram

Figure 0-1 Use Case Diagram

</div>Trang 10<div class="page_container" data-page="10">

2.2.4 Activity Diagram for user (patient)

Figure 0-2 Patient Activity Diagram

</div>Trang 11<div class="page_container" data-page="11">

*Activity diagram of “Make schedules with doctor”

Figure 0-3 Patient Activity Diagram of “Make schedules with doctor”

</div>Trang 12<div class="page_container" data-page="12">

2.2.5 Activity diagram for doctor

Figure 0-4 Doctor Activity Diagram

</div>Trang 13<div class="page_container" data-page="13">

2.3 Database Design

2.3.1 Entity-Relationship Diagram (ER Diagram)

Figure 0-5: Entity-Relationship Diagram

2.3.2 Relational-Relationship Diagram (RR Diagram)

From entity-relationship diagram in Figure 2.5, we convert to relational- relationship diagram in Figure 2.6

Figure 0-6 Relational-Relationship Diagram

</div>Trang 14<div class="page_container" data-page="14">

create table flat ent (

flat entID VARCHAR(50) NOT NULL flRIMARY KEY, FullName VARCHAR(50) NOEma l VARCHAR(50) NOT NULL, Gender VARCHAR(50),

B rthday DATE, UNIǪUE(Ema l));

create table Doctor (

DoctorID VARCHAR(50) NOT NULL flRIMARY KEY, FullName VARCHAR(50) NOT Ema l VARCHAR(50) NOT NULL,

B rthday DATE, Gender VARCHAR(50),About TEXT,

WorkAddress VARCHAR(50), flrof lefl cture VARCHAR(500), flhoneNumber VARCIsApproved BOOLEAN NOT NULL DEFAULT false, UNIǪUE(Ema l)

create table Record (

RecordID BIGSERIAL NOT NULL flRIMARY KEY, Accuracy DECIMAL(5,2) NOT NUfl ctureURL VARCHAR(500) NOT NULL,

flat entID VARCHAR(50) NOT NULL REFERENCES flat ent (flat entID),D seaseID INT NOT NULL REFERENCES D sease (D seaseID), RecordT me TIM);

create table D sease (

D seaseID BIGSERIAL NOT NULL flRIMARY KEY, D seaseName VARCHAR(50) NRelatedInfo TEXT, UNIǪUE(D seaseName)

a) Schema for Patient

b) Schema for Doctor

c) Schema for Record

d) Schema for Disease

e) Schema for AppointDate

</div>Trang 15<div class="page_container" data-page="15">

Appo n t Da t e ID BIGSE RIAL NOT NULL flRIMARY KEY,Appo n t Da t e DATE NOT NULL,

Do c t or ID VARCHAR(50 ) REFERENC ES Do ct or ( Do ct o r ID));

f) Schema for AppointTime

c rea t e t ab l e Appo n t T m e (

Appo n t T m e ID BIGSERIAL NOT NULL flRIMAR Y KEY,Is Boo ked BOO LEAN NOT NULL D EFA ULT fa ls e , St a r t T m e TIME NOT NULL,

End T me TIME NO T NULL,

fla t en tI D VARCHAR(50 ) REFERENCES fla t en t (fla t en tI D), Appo n t Da t e ID INT RE FERENC ES Appo n t Da t e (Appo n t Da t e ID)

2.4 Server Architecture

For the development of the server-side functions for our skin disease detection app,we use the following technical stacks:

NodeJs Express Framework (for utility API)

Flask Framework (for providing skin disease detection API)Firebase Authentication (for authentication)

Firebase Storage (for image storage)

Hasura GraphQL Engine (for providing instant GraphQL & REST APIs onexisting PostgreSQL data source)

PostgreSQL & nhost (for hosting PostgreSQL database)

2.5 Client-side architecture

For our skin disease detection app, we use React Native (with Expo) as the main framework for developing our graphical interface. The details of our core libraries are:

React Native: core UI framework

Expo Go: open-source client for testing React Native apps on Android andiOS without building app locally

NativeBase: UI library, providing styled components

react-native-paper: UI library, providing Material UI styled componentsreact-navigation: routing and navigation for Expo and React Native apps

</div>Trang 16<div class="page_container" data-page="16">

CHAPTER 3. DEPLOYMENT & TESTING

3.1 Testing of functionalities

Since we develop our app on Expo Go, an user who want to test the app mustinstall Expo Go (available on both Android and iOS) to their smartphone devices andscan the QR Code generated by the app bundler.

3.1.1 Testing login and register features

The login and registration features must pass the following test case:Login successfully with chosen role (Patient/Doctor) and with correct email and password. (Pass)

After authentication, navigate user to different Main Screen according totheir role (Patient/Doctor). (Pass)

Ensure that user’s password and authentication token are encrypted andsecured. (Pass)

3.1.2 Testing skin disease detection feature

Since skin disease detection feature is considered an external feature, the testingis based on results getting from the detection API. Through the API, the skin’s photosare sent to the API via POST request; and the results are also sent back via POSTrequest, as a json file. Our test case for this feature contains the following:

User can take picture of their skin’s area, get preview and retake anotherpicture (if necessary). (Pass)

User can specify background information of the picture (gender, age, location of skin’s area) (Pass)

User can receive prediction’s result and prediction’s result is saved todatabase (Pass)

User can see all of their prediction history (Pass)

3.1.3 Testing editing profile (both for Patient/Doctor) feature

User can see their profile information. (Pass)

User can edit their profile information and save it. (Pass)

</div>Trang 17<div class="page_container" data-page="17">

3.1.4 Testing “Appointment” feature (for Doctor)

The “Appointment” feature for Doctor must sastify the following test cases:Doctor can see all of their upcoming appointments, the bookedappointments are highlighted and provided with patient’s info. (Pass)

Doctor can make new schedule slots within 7 days in the future. (Pass)

3.1.5 Testing “Appointment” feature (for Patient)

The “Appointment” feature for Patient must sastify the following test cases:Patient can see all of their upcoming appointments with details aboutappointment time, date, and doctor’s info. (Pass)

Patient can make new appointment with a chosen doctor (Pass)

3.2 User Interface

In this section, we will present screenshoots of our user interface, tested on ExpoGo version 2.28.3 (Android).

3.2.1 Login/Register Screens

If the user is unauthenticated, he/she must first register/login to use the app.

Figure 3-1 From left to right: Welcome Screen, Register Screen, Login Screen

</div>Trang 18<div class="page_container" data-page="18">

3.2.2 Patient Screens

After successfully register/login as Patient, user is presented with the welcome screen and from here, he/she can choose to navigate to different functionalities.

Figure 3-2 Patient Main Screen

Figure 3-3 Interface of “Take skin photo” and “My detection history”functionalities

</div>Trang 19<div class="page_container" data-page="19">

Figure 3-5 Interface of “My Appointments” functionality

</div>Trang 20<div class="page_container" data-page="20">

3.2.3 Doctor Screens

After successfully register/login as Doctor, user is presented with the welcome screen and from here, he/she can choose to navigate to different functionalities.

Figure 3-6 Doctor Main Screen

Figure 3-7 Interface of “My Appointments” functionality

</div>Trang 22<div class="page_container" data-page="22">

3.3 Source code

Source code of our API Module: LESION-CLASSIFICATION-ON-IMBALANCED-DATA-USING-DEEP-LEARNING-WITH-SOFT-ATTENTION

code of our app (without environment variables): class="text_page_counter">Trang 23<div class="page_container" data-page="23">

Overall Conclusions

For this project, we have successfully built a functioning app that can detectuser’s skin diseases from photos, and an appointment booking management systemthat can be used by patients and doctors for online counseling service. Throughout thetasks of designing, developing and testing the app, we have acquired good knowledgeabout the process of system design analysis. We also improved considerably ourcoding skills for Javascript, SQL and some of the Javascript frameworks such asReact, React Native, NodeJS. Furthermore, in the process of deploying our app, welearn to use some very helpful tools and services such as Firebase and Hasura.

Our app fulfills most of the initial requirements. However, due to time limitation,our app still suffers from some of the drawbacks as followed:

The detection API results doesn’t correlate well with real condition of usersThe app still has some minor bugs and sometimes may run into failureSome features are still in completion

</div>