DL POWERED DERMATOLOGY WEB APPLICATION

A Main project thesis submitted in partial fulfillment of requirements for the award of degree for VIII
semester

BACHELOR OF TECHNOLOGY

IN

COMPUTER SCIENCE AND ENGINEERING WITH

ARTIFICIAL INTELLIGENCE AND MACHINE LEARNING

by
B. CHANDRA SEKHAR (20131A4207)

S. MOHITH (20131A4253)

Y. VAMSI CHANDRA NAIDU (20131A4263)

D. SARATH CHANDRA (21135A4201)

Under the esteemed guidance of

Ms. B. KEERTHANA,

Assistant Professor,

Department of Computer Science and Engineering

GAYATRI VIDYA PARISHAD COLLEGE OF ENGINEERING(AUTONOMOUS)

(Affiliated to JNTU-K, Kakinada)

VISAKHAPATNAM

2023-2024
i
 CERTIFICATE
This is to certify that the main project entitled “DL Powered Dermatology Web Application”
being submitted by

B. CHANDRA SEKHAR (20131A4207)

S. MOHITH (20131A4253)

Y. VAMSI CHANDRA NAIDU (20131A4263)

D. SARATH CHANDRA (21135A4201)

in partial fulfilment for the award of the degree “Bachelor of Technology” in Computer Science and
Engineering with AIML to the Jawaharlal Nehru Technological University, Kakinada is a record of
bonafide work done under my guidance and supervision during VIII semester of the academic year
2023-2024.

The results embodied in this record have not been submitted to any other university or institution for
the award of any Degree or Diploma.

Guide I/C Head of the Department

Ms. B. Keerthana Dr. D. UMA DEVI
Assistant Professor Associate Professor and
Department of CSE Associate Head of CSE with AIML
GVPCE(A) Department of CSE
GVPCE(A)
External Signature

ii
 DECLARATION

We hereby declare that this project entitled “DL POWERED DERMATOLOGY WEB
APPLICATION” is a bonafide work done by us and submitted to “Department of Computer
Science and Engineering, G. V. P College of Engineering (Autonomous) Visakhapatnam, in partial
fulfilment for the award of the degree of B. Tech is of our own and it is not submitted to any other
university or has been published anytime before.

PLACE: VISAKHAPATNAM B. CHANDRA SEKHAR (20131A4207)

DATE: S. MOHITH (20131A4253)

Y. VAMSI CHANDRA NAIDU (20131A4263)

D. SARATH CHANDRA (21135A4201)

iii
 ACKNOWLEDGEMENT

We would like to express our deep sense of gratitude to our esteemed institute Gayatri Vidya
Parishad College of Engineering (Autonomous), which has provided us an opportunity to fulfill our
cherished desire.

We express our sincere thanks to our principal Dr. A. B. KOTESWARA RAO, Gayatri Vidya
Parishad College of Engineering (Autonomous) for his encouragement to us during this project,
giving us a chance to explore and learn new technologies in the form of mini projects.

We express our deep sense of Gratitude to Dr. D. UMA DEVI, Associate Professor and
Associate Head of CSE with AI & ML and Incharge Head of the Department of Computer
Science and Engineering, Gayatri Vidya Parishad College of Engineering (Autonomous) for
giving us an opportunity to do the project in college.

We express our profound gratitude and our deep indebtedness to our guide Ms. B. Keerthana,
Assistant Professor, Department of Computer Science and Engineering, whose valuable
suggestions, guidance and comprehensive assessments helped us a lot in realizing our project.

We also thank our coordinator, Dr. CH. SITA KUMARI, Associate Professor, Department of
Computer Science and Engineering, Mrs. K. SWATHI, Assistant Professor, Department of
Computer Science and Engineering, and Ms. P. POOJA RATNAM, Assistant Professor,
Department of Computer Science and Engineering for the kind suggestions and guidance for the
successful completion of our project work.

B. CHANDRA SEKHAR (20131A4207)

S. MOHITH (20131A4253)

Y. VAMSI CHANDRA NAIDU (20131A4263)

D. SARATH CHANDRA (21135A4201)

iv
 ABSTRACT

The proposed system pioneers an innovative approach to skin disease diagnosis through a
comprehensive web application seamlessly integrating advanced AI technologies. At its core lies a
Convolutional Neural Network (CNN) model meticulously trained to predict various skin diseases with
exceptional accuracy. This CNN model serves as the cornerstone of our platform, offering users
personalized diagnostic insights. The key innovation of our system lies in the integration of an
intelligent chatbot specifically tailored to provide comprehensive support and guidance on skin
diseases. Leveraging domain-specific knowledge, our chatbot assists users in understanding their
conditions, selecting appropriate treatments, and addressing any concerns they may have. In addition to
diagnostic capabilities, our web application offers users the ability to track their prediction history,
providing valuable insights into their skin health journey. This feature enhances user engagement and
facilitates informed decision-making regarding their health. Recognizing the importance of community
support in healthcare, we have also incorporated a community forum where users can seek advice,
share experiences, and connect with others facing similar challenges. Human experiences are
prioritized in this forum, fostering a supportive environment where users can learn from each other's
experiences. Behind the scenes, our system utilizes Firebase for efficient data management, ensuring
seamless access to prediction history and community interactions. The CNN model, integrated chatbot,
and community forum are hosted on our servers, utilizing platforms like Replit and Voiceflow for
implementation. By combining advanced AI technologies with user-centric design principles, our web
application redefines skin disease diagnosis, empowering users with knowledge, support, and
community connections to lead healthier lives.

Keywords: Skin disease diagnosis, Convolutional Neural Network (CNN) model, Intelligent chatbot,
Domain-specific knowledge, Prediction history tracking, User engagement, Community forum,
Supportive environment, Data management (Firebase), Community interactions, User-centric design.

v
 INDEX

CHAPTER 1. INTRODUCTION………………………………................ 1
1.1 Objective…………………………………….......................2
1.2 About the Algorithm…………………………...…..............2
1.3 Purpose………………………………………......................4
1.4 Scope……………………………………………………….5
CHAPTER 2. SRS DOCUMENT…………………………………....…....6
2.1 Functional Requirements………………………………..6

2.2 Non-functional Requirements…….........………………..6

2.3 Minimum Hardware Requirements…....……….………..7

2.4 Minimum Software Requirements…………...………….7

CHAPTER 3. ALGORITHM ANALYSIS………………...……………...8

3.1 Existing Algorithm………….......…………........……...8

3.2 Proposed Algorithm…………....……………………….8

3.3 Feasibility Study…………………...…………………...9

3.4 Cost Benefit Analysis……………...…………………...11

CHAPTER 4. SOFTWARE DESCRIPTION…..……………………….13
4.1 Visual Studio Code………….....………………………...13

4.2 Flask….........……………............……………………….13

4.3 Tensorflow..……………............…………………….......13

4.4 ReactJS………………..…………………..………….......14

4.5. Firebase…………………………………………………..14
vi
 4.6. Replit……………………………………………………..14

4.7. Voiceflow.………………………………………………..15

CHAPTER 5. PROJECT DESCRIPTION…………..………………….16

5.1 Problem Definition……………....……………………...16

5.2 Project Overview………………....…………………......16

5.3 Module Description…………………………………….17

5.3.1 Python and Flask Framework……………17
5.3.2 Model…………………………………….18

CHAPTER 6. SYSTEM DESIGN………………………………..………23

6.1 Introduction to UML.........................................................23

6.2 Building Blocks of the ML................................................24

6.3 UML Diagrams................................................................. 29

CHAPTER 7. DEVELOPMENT...............................................................31
7.1 Raw Data...........................................................................31
7.2 Sample Code......................................................................34

7.3 Results...............................................................................65

CHAPTER 8. TESTING….........................................................................69
8.1 Introduction of Testing.......................................................69

8.2 Test Cases…………….......................................................72

CHAPTER 9. CONCLUSION...................................................................75

CHAPTER 10. FUTURE SCOPE..............................................................76

CHAPTER 11. REFERENCES...................................................................77

vii
 1. INTRODUCTION

In contrast to the cognitive abilities observed in humans or other living organisms, artificial
intelligence (AI) denotes the intelligence exhibited by machines. AI can alternatively be defined as
the exploration of "intelligent agents," encompassing any entity or device capable of perceiving and
comprehending its surroundings, then taking suitable actions to enhance its likelihood of success.
Moreover, AI pertains to scenarios wherein machines emulate human cognitive processes in
learning and problem-solving, often referred to as machine learning (ML) and deep learning (DL).
Typically, AI systems entail a combination of hardware and software components. From a software
perspective, AI primarily revolves around algorithms, with artificial neural networks (ANNs) and
convolution neural network (CNNs) serving as a foundational theoretical framework for AI
applications.

Our project's main objective is to integrate skin disease prediction model into a web
interface. It helps patients and other medical experts determine if they have a certain skin disease. It
offers accurate findings based on the data the user has submitted and some extra features like
prediction history, chatbot assistant, community forum.

1
1.1. OBJECTIVE
Traditional way of detecting skin diseases is challenging due to several main reasons (a)
existence of too many different skin diseases with high diversity of lesion types for each disease, (b)
similar visual characteristics for different skin diseases which makes the visual diagnosis difficult.
Deep learning models improve skin disease detection accuracy over existing systems by handling
feature selection and leveraging historical data. We utilized Python and its extensive collection of
packages for this purpose. Additionally, cutting-edge techniques like convolutional neural networks
were employed to categorize various disorders efficiently. The disease detected by our system might
not be cured in the same way for all, hence the community is a place where each user can share
their own experience to others. Utilizing Python's extensive packages such as ImageDataGenerator,
TensorFlow, Modelcheckpoint point we identify and categorize disorders more effectively, leading
to targeted interventions and improved healthcare outcomes.

1.2. ABOUT THE ALGORITHM

1.2.1 Convolutional Neural Network (CNN)

Convolutional Neural Networks (also known as ConvNets) are a powerful type of deep
learning model specifically designed for processing and analysing visual data, such as images and
videos. They have revolutionized the field of Computer Vision, enabling remarkable advancements
in tasks like Image Recognition, Object Detection, and Image Segmentation. A typical
Convolutional Neural Network (CNN) consists of several layers.

Fig 1.1: Architecture of CNN

The most common layers in a CNN are:

2
1. Convolutional Layer: The first layer of a CNN is typically a convolutional layer. It applies a set
of learnable filters to the input image, which allows the network to extract important features from
the image. Each filter produces a feature map, which represents the response of the filter at that
location.

2. Activation Layer: The activation layer applies a non-linear activation function to the output of
the convolutional layer. This introduces non-linearity into the model and helps it learn more
complex patterns.

3. Pooling Layer: The pooling layer reduces the size of the feature maps generated by the
convolutional layer. This helps reduce the number of parameters in the model and makes it more
efficient. The most common type of pooling layer is the max pooling layer, which selects the
maximum value from each region of the feature map.

4. Dropout Layer: The dropout layer randomly drops out some of the neurons in the network
during training. This helps prevent overfitting and improves the generalization ability of the
network.

5. Fully Connected Layer: The fully connected layer takes the output of the previous layers and
applies a set of weights to generate a prediction. This layer is similar to the output layer in a
traditional neural network.

These layers are commonly arranged in a sequential manner to construct a deep neural
network. The final layer's output is subsequently directed into a loss function, which evaluates the
network's efficacy in the assigned task. The primary objective during training is to minimize this
loss function by iteratively adjusting the network's weights. CNNs find extensive application across
diverse domains including object recognition, facial recognition, image and video classification, and
medical image analysis. Their performance in these tasks is consistently superior, often surpassing
alternative deep learning algorithms.

This capability has led to widespread adoption of CNNs in various domains, including
computer vision, natural language processing, and speech recognition. Their ability to learn
hierarchical representations from raw data makes them a powerful tool for tackling complex real-
world problems, often achieving state-of-the-art performance.

3
1.3. PURPOSE
The purpose of a disease prediction initiative focused on specific diseases is to construct
precise and dependable deep learning algorithms capable of forecasting the probability of an
individual developing one of the targeted illnesses. Through the utilization of extensive datasets
encompassing genetic profiles, and pertinent data, the project seeks to pinpoint risk determinants
and formulate models capable of forecasting disease susceptibility with notable precision. These
models, once developed, can be seamlessly integrated into clinical settings or electronic health
record systems, furnishing healthcare practitioners with disease risk prognostications. This
empowers them to render more informed decisions regarding patient management and preventative
healthcare strategies.

The web interface includes predictions for five different classes:

• Acne - Characterized by the formation of pimples, blackheads, whiteheads, and cysts on the
skin, particularly on the face, neck, shoulders, and back. Often occurs due to excess oil
production, clogged hair follicles, bacteria, hormonal changes, or inflammation.
• Actinic Keratosis, Basal Cell Carcinoma, and other Malignant Lesions – Actinic keratosis is
a precancerous skin condition caused by prolonged sun exposure, leading to the
development of rough, scaly patches on the skin. Basal cell carcinoma is the most common
type of skin cancer, typically appearing as a flesh-colored, pearl-like bump or a pinkish
patch of skin.
• Light Diseases and Disorders of Pigmentation - These conditions encompass a range of
disorders affecting skin pigmentation, such as vitiligo (loss of skin color in patches),
albinism (lack of melanin production), and melasma (hyperpigmentation). They can be
caused by genetic factors, hormonal changes, sun exposure, or certain medications.
• Tinea (Ringworm) - Tinea, commonly known as ringworm, is a fungal infection that causes
red, scaly, and itchy patches on the skin, often in a ring-shaped pattern.
• Warts, Molluscum, and other Viral Infections - Warts are benign skin growths caused by the
human papillomavirus (HPV), appearing as small, rough bumps on the skin's surface.
Molluscum contagiosum is a viral skin infection characterized by small, flesh-colored
bumps with a central indentation, caused by the molluscum contagiosum virus (MCV).

4
1.4 SCOPE
The scope of the project is quite broad, using deep learning for skin disease detection has big
benefits. With this technology, anyone with a smartphone or computer can get help for their skin
issues without having to travel long distances. Plus, the computer programs are really good at
spotting problems accurately, so doctors can trust the information they get and make better
decisions about treatment.

Some potential areas of focus for a disease prediction project that target diseases:

2. Data collection: Collecting and curating large datasets of medical records, genetic data, and
other relevant information for patients with the seven target diseases.
3. Feature engineering: Identifying and selecting the most informative features from the
collected data to build accurate disease prediction models.
4. Model development: Developing deep learning models, such as logistic regression or
random forest, that can accurately predict the likelihood of an individual developing one of
the seven target diseases.
5. Model evaluation and validation: Evaluating the performance of the developed models
and validating their accuracy using independent test datasets.
6. User interface development: Developing an easy-to-use interface for clinicians or
individuals to input patient data and receive disease risk predictions.
7. Adding supportive features: Developing and integrating features like prediction history,
chatbot assistant, community forum makes the application extended and more user friendly.
8. Deployment and integration: Deploying the developed models into clinical practice or
integrating them into electronic health record systems to provide disease risk.

5
 2. SRS DOCUMENT

A software requirements specification (SRS) is a document that describes what the software will do
and how it will be expected to perform.

2.1 FUNCTIONAL REQUIREMENTS

A Functional Requirement (FR) outlines the essential services that the software must deliver,
defining the behaviour of either the entire software system or its individual components. Within this
framework, a function encompasses the inputs, actions, and resulting outputs of the software. These
functions encompass diverse activities such as calculations, data manipulation, business processes,
user interactions, or any other specific functionality that defines the system's intended operations.
Functional Requirements are also known as Functional Specifications, serving as a blueprint
detailing the desired functionalities of the software.

• Maintains all the records of the patients and doctors and can be accessed through a same
command prompt.
• This bot would also save the time as searching digitalized records is quicker than manually,
though there exist some digitalized records they are separate from one another.
• It holds all the information about the community and the discussions going on the
community are stored securely. The data entered by a user in the community forum is
publicly visible to all the other users.

2.2 NON-FUNCTIONAL REQUIREMENTS

NON-FUNCTIONAL REQUIREMENT (NFR) specifies the quality attribute of a software system.

They judge the software system based on Responsiveness, Usability, Security, Portability. Non-
functional requirements are called qualities of a system, there are as follows:

• Performance-The average response time of the system is less

• Reliability - The system is highly reliable.
• Operability - The interface of the system will be consistent.
• Efficiency - Once user has learned about the system through his interaction, he can perform
the task easily.
• Understandability - Because of user friendly interfaces, it is more understandable to the
users.

6
2.3 MINIMUM HARDWARE REQUIREMENTS

• Processor -Intel Core i5

• Hard Disk – 256GB
• RAM – 8GB
• Operating System – Windows 10

2.4 MINIMUM SOFTWARE REQUIREMENTS

Python based Computer Vision and Deep Learning libraries will be exploited for the development
and experimentation of the project.

• Programming Language – PYTHON 3.11

• IDE – Visual Studio Code
• TensorFlow
• OpenCV
• Flask
• React js
• Firebase
• Replit and Voiceflow

7
 3. ALGORITHM ANALYSIS
3.1. EXISTING SYSTEMS
The current skin disease prediction systems have user interfaces which just predicts the type
of disease, which does not contain further information or any type of actions to know about the
diseases.

3.1.1. DRAWBACKS OF EXISTING ALGORITHM

Many online platforms and systems exist for identifying skin diseases, yet the majority only
extend as far as diagnosis without offering further resources or actions to users. These platforms
lack features that provide users with additional information or guidance regarding the identified
diseases. In essence, while they effectively recognize skin conditions, they fail to offer
comprehensive support such as information about the target diseases or next steps for users to learn
more about the diseases or seek appropriate treatment.

3.2. PROPOSED ALGORITHM

We conceived the idea of developing an integrated online platform that consolidates various
disease detection functionalities alongside additional features aimed at enhancing user experience
and providing comprehensive information. Our web application employs deep learning algorithms
capable of detecting a range of skin diseases. Users input their information and upload scanning
reports, after which the algorithm determines whether they have a skin disease from among the
trained conditions. The platform then presents the predicted disease result, offering users a
streamlined and informative experience in a single platform. Additionally, it includes user-friendly
features to facilitate easy navigation and understanding for individuals of all technical proficiency
levels.

The functionalities that our application provides are :-

• Prediction of skin disease

• Prediction history
• Chatbot assistant
• Community forum

8
3.2.1. ADVANTAGES OF PROPOSED MODEL
• It is very time-saving
• Accurate results
• User- friendly graphical interface
• Highly reliable
• Cost effective
• Stores past predictions
• Chatbot trained on knowledge base of diseases
• Able to query or share experiences with other users

3.3 FEASIBILITY STUDY

A feasibility study is an analysis that takes all a project's relevant factors into account including
economic, technical, legal, and scheduling considerations to ascertain the likelihood of completing
the project successfully. A feasibility study is important and essential to evolute any proposed
project is feasible or not. A feasibility study is simply an assessment of the practicality of a
proposed plan or project.

The main objectives of feasibility are mentioned below:

To determine if the product is technically and financially feasible to develop, is the main aim of the
feasibility study activity. A feasibility study should provide management with enough information
to decide:

• Whether the project can be done.

• To determine how successful your proposed action will be.
• Whether the final product will benefit its intended users.
• To describe the nature and complexity of the project.
• What are the alternatives among which a solution will be chosen (During subsequent
phases)
• To analyze if the software meets organizational requirements. There are various types of
feasibility that can be determined. They are:
Operational - Define the urgency of the problem and the acceptability of any solution, includes
people-oriented and social issues: internal issues, such as manpower problems, labor objections,

9
manager resistance, organizational conflicts, and policies; also, external issues, including social
acceptability, legal aspects, and government regulations.

Technical: Is the feasibility within the limits of current technology? Does the technology exist at
all? Is it available within a given resource?

Economic - Is the project possible, given resource constraints? Are the benefits that will accrue
from the new system worth the costs? What are the savings that will result from the system,
including tangible and intangible ones? What are the development and operational costs?

Schedule - Constraints on the project schedule and whether they could be reasonably met.

3.3.1. ECONOMIC FEASIBILITY:

Economic analysis could also be referred to as cost/benefit analysis. It is the most frequently used
method for evaluating the effectiveness of a new system. In economic analysis the procedure is to
determine the benefits and savings that are expected from a candidate system and compare them
with costs. Economic feasibility study related to price, and all kinds of expenditure related to the
scheme before the project starts. This study also improves project reliability. It is also helpful for the
decision-makers to decide the planned scheme processed latter or now, depending on the financial
condition of the organization. This evaluation process also studies the price benefits of the proposed
scheme. Economic Feasibility also performs the following tasks.

• Cost of packaged software.

• Cost of doing full system study.
• Is the system cost Effective?

3.3.2. TECHNICAL FEASIBILITY:

A large part of determining resources has to do with assessing technical feasibility. It considers the
technical requirements of the proposed project. The technical requirements are then compared to the
technical capability of the organization. The systems project is considered technically feasible if the
internal technical capability is sufficient to support the project requirements. The analyst must find
out whether current technical resources can be where the expertise of system analysts is beneficial,
since using their own experience and their contact with vendors they will be able to answer the
question of technical feasibility.

10
Technical Feasibility also performs the following tasks.

• Is the technology available within the given resource constraints?

• Is the technology have the capacity to handle the solution
• Determines whether the relevant technology is stable and established.
• Is the technology chosen for software development has a large number of users so that they
can be consulted when problems arise, or improvements are required?

3.3.3. OPERATIONAL FEASIBILITY:

Operational feasibility is a measure of how well a proposed system solves the problems and takes
advantage of the opportunities identified during scope definition and how it satisfies the
requirements identified in the requirements analysis phase of system development. The operational
feasibility refers to the availability of the operational resources needed to extend research results
beyond on which they were developed and for which all the operational requirements are minimal
and easily accommodated. In addition, the operational feasibility would include any rational
compromises farmers make in adjusting the technology to the limited operational resources
available to them. The operational Feasibility also perform the tasks like

• Does the current mode of operation provide adequate response time?

• Does the current of operation make maximum use of resources.

• Determines whether the solution suggested by the software development team is acceptable.

• Does the operation offer an effective way to control the data?

• Our project operates with a processor and packages installed are supported by the system.

3.4. COST BENEFIT ANALYSIS

The financial and the economic questions during the preliminary investigation are verified to
estimate the following:

• The cost of the hardware and software for the class of application being considered.
• The benefits in the form of reduced cost.
• The proposed system will give the minute information, as a result.
• Performance is improved which in turn may be expected to provide increased profits.

11
• This feasibility checks whether the system can be developed with the available funds.
• This can be done economically if planned judicially, so it is economically feasible.
• The cost of the project depends upon the number of man-hours required.

12
 4. SOFTWARE DESCRIPTION

4.1. Visual Studio Code

Visual Studio Code (famously known as VS Code) is a free open-source text editor by Microsoft.
VS Code is available for Windows, Linux, and macOS. VS Code supports a wide array of
programming languages from Java, C++, and Python to CSS, Go, and Docker file. Moreover, VS
Code allows you to add on and even creating new extensions including code linters, debuggers, and
cloud and web development support. The VS Code user interface allows for a lot of interaction
compared to other text editors.

4.2. Flask

Flask is a web framework, it’s a Python module that lets you develop web applications easily. It has
a small and easy-to-extend core: it’s a microframework that doesn’t include an ORM (Object
Relational Manager) or such features. It does have many cool features like URL routing and
template engine. It is a WSGI web app framework. To install the flask on the system, we need to
have python 2.7 or higher installed on our system. It is designed to keep the core of the application
simple and scalable. Instead of an abstraction layer for database support, Flask supports extensions
to add such capabilities to the application.

4.3. TensorFlow

TensorFlow is a free and open-source software library for deep learning and artificial intelligence. It
can be used across a range of tasks but has a particular focus on training and inference of deep
neural networks. TensorFlow was developed by the Google Brain team for internal Google use in
research and production. The initial version was released under the Apache License 2.0 in
[Link] released the updated version of TensorFlow, named TensorFlow 2.0, in September
[Link] can be used in a wide variety of programming languages, including Python,
JavaScript, C++, and Java.

13
4.4. ReactJS

ReactJS is a popular JavaScript library used for building user interfaces, particularly for web
applications. Developed by Facebook, it provides a component-based approach to UI development,
enabling developers to create reusable UI components. ReactJS emphasizes the concept of virtual
DOM (Document Object Model) for efficient rendering of UI elements, enhancing performance and
user experience. It was first released in 2013 and has since gained widespread adoption in the web
development community [10]. ReactJS supports the creation of dynamic and interactive user
interfaces and is often used in conjunction with other JavaScript libraries and frameworks for full-
stack development.

4.5. Firebase [7]

Firebase is a comprehensive mobile and web application development platform, providing a wide
array of tools and services for building high-quality apps. Initially developed by Firebase, Inc., it
was later acquired by Google in 2014. Firebase offers features such as real-time database,
authentication, cloud storage, hosting, and analytics, enabling developers to create powerful and
scalable applications with ease. It supports multiple programming languages, including JavaScript,
Java, Objective-C, and Swift, making it accessible to developers across various platforms and
ecosystems. Additionally, Firebase provides robust integration with other Google services and
products, enhancing its functionality and versatility for app development projects.

4.6. Replit [8]

Replit is an online integrated development environment (IDE) that allows users to write, compile,
and execute code in various programming languages directly from their web browser. It supports
collaborative coding and provides a seamless coding experience with features like automatic code
formatting and version control. Replit offers a range of programming languages and frameworks,
making it suitable for various development tasks and projects. Additionally, it provides educational
resources and tutorials to help users learn coding concepts and improve their programming skills.

14
4.7. Voiceflow [9]

Voiceflow is a platform for designing, prototyping, and deploying voice applications without the
need for coding. It enables users to create conversational experiences for voice-enabled devices
such as Amazon Alexa and Google Assistant through a visual interface. Voiceflow offers a drag-
and-drop editor and a library of pre-built components to streamline the design process. Users can
test their voice applications in real-time and iterate on their designs quickly. Voiceflow also p
provides analytics and insights to help users understand how their voice applications are being used
and identifies areas of improvement.

15
 5. PROBLEM DESCRIPTION
5.1. PROBLEM DEFINITION

This web application focuses on predicting skin diseases using deep learning techniques. Users can
upload images of their skin concerns, and the system leverages a Convolutional Neural Network
(CNN) model to analyse the image and predict the most likely skin condition from a predefined set
of classes. This early detection can empower users to seek appropriate consultations or self-care
measures while promoting general skin health awareness. The predicted skin condition, along with
additional resources from the application (community forum or chatbot), can guide users towards
appropriate self-care measures while awaiting professional consultation.

5.2. PROJECT OVERVIEW

Core Functionality: Image-Based Skin Disease Prediction with CNN

The cornerstone of the application lies in a Convolutional Neural Network (CNN), a deep learning
algorithm adept at image analysis. Users can upload images of their skin concerns, and the trained
CNN model analyses the image to predict the most likely skin disease from a predefined set of
classes.

Enhancing the User Experience: Additional Features

Beyond core prediction functionality, the application offers features designed to enhance the user
experience and support informed decision-making regarding skin health:

• Prediction History: The application stores predicted skin conditions along with timestamps
within the user's account. This allows users to track their skin health and monitor changes
over time.

• AI-powered Chatbot Assistant: The application offers a chatbot providing information on

various skin conditions, including symptoms, treatments, and prevention tips. It utilizes
OpenAI's API for conversation management, serving as a convenient knowledge source for
users.

• Community Forum: An optional feature allowing users to ask questions about their skin
concerns. Questions will be sent to all other users and the interested one who have enough

16
 knowledge about them or the experienced person can give a reply to them, fostering a sense
of community and support.

The steps involved in the project are :-

1. Dataset Collection: We curated a dataset of labelled skin images representing various skin
conditions.

2. Data Preprocessing: The images underwent necessary preprocessing steps for consistency
and optimal CNN model training.

3. Model Training: The CNN model was trained on the prepared dataset, enabling it to learn
the visual patterns associated with different skin conditions.

4. Model Evaluation: The trained model's performance was evaluated using relevant metrics
to ensure its effectiveness in predicting skin conditions from new images.

5. Web Application Development: A user-friendly web application was built using [Link] to
facilitate user interaction and integrate the trained model.

6. Model Integration: The trained CNN model was seamlessly integrated into the web
application to enable real-time skin condition prediction based on user-uploaded images.

7. Result Display: Upon image upload, the application displays the predicted skin condition
along with timestamps for future reference.

The output of our system consists of image along with the predicted disease. And then it is stored in
prediction history of the user with the timestamp of prediction. And he can also access the other
features of application.

5.3. MODULE DESCRIPTION

5.3.1. PYTHON AND FLASK FRAMEWORK

Flask is a web framework, it’s a Python module that lets you develop web applications easily. It has
a small and easy-to-extend core: it’s a microframework that doesn’t include an ORM (Object
Relational Manager) or such features. It does have many cool features like URL routing and
template engine. It is a WSGI web app framework. To install flask on the system, we need to have
python 2.7 or higher installed on our system. It is designed to keep the core of the application

17
simple and scalable. Instead of an abstraction layer for database support, Flask supports extensions
to add such capabilities to the application.

Python is an interpreted, object-oriented, high-level programming language with dynamic

semantics. Its high-level built-in data structures, combined with dynamic typing and dynamic
binding, make it very attractive for Rapid Application Development, as well as for use as a scripting
or glue language to connect existing components together. Python's simple, easy to learn syntax
emphasizes readability and therefore reduces the cost of program maintenance. Python supports
modules and packages, which encourages program modularity and code reuse. The Python
interpreter and the extensive standard library are available in source or binary form without charge
for all major platforms, and can be freely distributed.

5.3.2. MODEL

CNN (Convolutional Neural Network) [1]

In neural networks, Convolutional neural networks (ConvNets or CNNs) is one of the main
categories to do image recognition, images classifications. Objects detections, recognition face etc.,
are some of the areas where CNNs are widely used. CNN image classifications take an input image,
process it and classify it under certain categories [6]. Computers see an input image as an array of
pixels and it depends on the image resolution. Based on the image resolution, it will see h x w x d (h
= Height, w = Width, d = Dimension).

A convolutional neural network consists of an input and an output layer, as well as multiple hidden
layers. The hidden layers of a CNN typically consist of a series of convolutional layers that
convolve with a multiplication or other dot product. The activation function is commonly a RELU
layer, and is subsequently followed by additional convolutions such as pooling layers, fully
connected layers and normalization layers, referred to as hidden layers because their inputs and
outputs are masked by the activation function and final convolution.

18
FIG 5.1 The layers of a CNN have neurons arranged in 3 dimensions: width, height and depth

ReLU layer [2]

ReLU means Rectified Linear Unit, ReLU is the most used activation function in the world right
now. Since, it is used in almost all the convolutional neural networks or deep learning. As you can
see, the ReLU is half rectified (from bottom). f(z) is zero when z is less than zero and f(z) is equal
to z when z is above or equal to zero.

Range: max (0, z)

But the issue is that all the negative values become zero immediately which decreases the ability of
the model to fit or train from the data properly. That means any negative input given to the ReLU
activation function turns the value into zero immediately in the graph, which in turns affects the
resulting graph by not mapping the negative values appropriately.

Graphically it looks like this-

Fig 5.2 ReLU graphical representation

19
Softmax Layer [4]

The softmax layer is a function that turns a vector of K real values into a vector of K real values that
sum to 1. The input values can be positive, negative, zero, or greater than one, but the softmax
transforms them into values between 0 and 1, so that they can be interpreted as probabilities. If one
of the inputs is small or negative, the softmax turns it into a small probability, and if an input is
large, then it turns it into a large probability, but it will always remain between 0 and 1.

The softmax function is sometimes called the softargmax function, or multi-class logistic-regression
This is because the softmax is a generalization of logistic regression that can be used for multi-class
classification, and its formula is very similar to the sigmoid function which is used for logistic
regression. The softmax function can be used in a classifier only when the classes are mutually
exclusive.

Many multi-layer neural networks end in a penultimate layer which outputs real-valued scores that
are not conveniently scaled and which may be difficult to work with. Here the softmax is very
useful because it converts the scores to a normalized probability distribution, which can be
displayed to a user or used as input to other systems. For this reason it is usual to append a softmax
function as the final layer of the neural network.

Graphically it looks like this-

Fig 5.3 Softmax graphical representation

The implementation consists of following modules: -

• The user should first signup (if new) and login so that he/she will be redirected to the
homepage of our application where they can able to get their predicted results among Acne,

20
 Actinic Keratosis Basal Cell Carcinoma and other Malignant Lesions, Light Diseases and
Disorders of Pigmentation, Ringworm, Warts Molluscum and other Viral Infections.
• When a user upload an image of their diseased skin, a well trained cnn model analyses the
image and gives its output as predicted result among those different classes.
• All the data of each particular user is stored in database (we have used Firebase in this
project). So whenever a user gets login to the application, they can know their previous
submissions. In specific, it is one of our feature called Prediction History where it displays
all the past predictions of the user uploaded images that are even tagged with their predicted
result and timestamp.
• A user can also interact with the chatbot assistant that is integrated in the application. This
chatbot is implemented using voiceflow and repplit with help of openai api. It is trained on
the data about the diseases in the dataset that includes their symptoms, treatments,
preventions etc. So a user can have optional guide to get the information about the skin
diseases in an interactive way.
• And any user can need some human suggestions mainly from doctors, so he/she able to ask
their query which is sent to all the users who are registered as dermatologist/practitioner.
This is one other feature in our application.

Fig 5.4 Flowchart describing the CNN model

21
 Fig 5.5 Flowchart describing the chatbot

Fig 5.6 Flowchart describing the Community Forum

22
 6. SYSTEM DESIGN

6.1 Introduction to UML

Unified Modeling Language (UML) is a general-purpose modeling language. The main aim of
UML is to define a standard way to visualize the way a system has been designed. It is quite like
blueprints used in other fields of engineering. UML is not a programming language; it is rather a
visual language. We use UML diagrams to portray the behavior and structure of a system. UML
helps software engineers, businessmen and system architects with modeling, design and analysis.
The Object

Management Group (OMG) adopted Unified Modelling

Language as a standard in 1997. It's been managed by OMG ever since. International

Organization for Standardization (ISO) published UML as an approved standard in 2005. UML has
been revised over the years and is reviewed periodically.

Why we need UML

• Complex applications need collaboration and planning from multiple teams and hence
require a clear and concise way to communicate amongst them.
• Businessmen do not understand code. So, UML becomes essential to communicate with
nonprogrammers’ essential requirements, functionalities and processes of the system.
• A lot of time is saved down the line when teams can visualize processes, user interactions
and static structure of the system.
• UML is linked with object-oriented design and analysis. UML makes the use of elements
and forms associations between them to form diagrams. Diagrams in UML can be broadly
classified as:
• Structural Diagrams – Capture static aspects or structure of a system. Structural Diagrams
include Component Diagrams, Object Diagrams, Class Diagrams and Deployment
Diagrams.
• Behaviour Diagrams – Capture dynamic aspects or behaviour of the system. Behaviour
diagrams include Use Case Diagrams, State Diagrams, Activity Diagrams and Interaction
Diagrams.
Building Blocks of the UML Building Blocks of the UML Building Blocks of the UML

23
 Fig 6.1 BUILDING BLOCKS IN UML

6.2 Building Block of the UML

The vocabulary of the UML encompasses three kinds of building blocks:

• Things
• Relationships
• Diagrams
Things are the abstractions that are first-class citizens in a model; relationships tie these things
together; diagrams group interesting collections of things.

Things in the UML

There are four kinds of things in the UML:

• Structural things
• Behavioural things
• Grouping things
• Annotational things
These things are the basic object-oriented building blocks of the UML. You use them to write well-
formed models.

24
Structural Things

Structural things are the nouns of UML models. These are the mostly static parts of a model,
representing elements that are either conceptual or physical.

Collectively, the structural things are called classifiers.

A class is a description of a set of objects that share the same attributes, operations, relationships,
and semantics. A class implements one or more interfaces. Graphically, a class is rendered as a
rectangle, usually including its name, attributes, and operations

Class - A Class is a set of identical things that outlines the functionality and properties of an object.
It also represents the abstract class whose functionalities are not defined.

Its notation is as follows

Interface - A collection of functions that specify a service of a class or component, i.e., Externally
visible behavior of that class.

Collaboration - A larger pattern of behaviors and actions. Example: All classes and behaviors that
create the modeling of a moving tank in a simulation.

Use Case - A sequence of actions that a system performs that yields an observable result. Used to
structure behavior in a model. Is realized by collaboration.

25
Component - A physical and replaceable part of a system that implements a number of interfaces.
Example: a set of classes, interfaces, and collaborations.

Node - A physical element existing at run time and represents are source.

Behavioral Things

Behavioral things are the dynamic parts of UML models. These are the verbs of a model,
representing behavior over time and space. In all, there are three primary kinds of behavioral things

• Interaction
• State machine
Interaction

It is a behavior that comprises a set of messages exchanged among a set of objects or roles within a
particular context to accomplish a specific purpose. The behavior of a society of objects or of an
individual operation may be specified with an interaction. An interaction involves a number of other
elements, including messages, actions, and connectors (the connection between objects).
Graphically, a message is rendered as a directed line, almost always including the name of its
operation.

State machine

State machine is a behaviour that specifies the sequences of states an object or an interaction goes
through during its lifetime in response to events, together with its responses to those events. The
behaviour of an individual class or a collaboration of classes may be specified with a state machine.
A state machine involves a number of other elements, including states, transitions (the flow from

26
state to state), events (things that trigger a transition), and activities (the response to a transition).
Graphically, a state is rendered as a rounded rectangle, usually including its name and its substates.

Grouping Things

Grouping things can be defined as a mechanism to group elements of a UML model together. There
is only one grouping thing available.

Package − Package is the only one grouping thing available for gathering structural and
behavioural things.

Annotational Things

Annotational things are the explanatory parts of UML models. These are the comments you may
apply to describe, illuminate, and remark about any element in a model. There is one primary kind
of annotational thing, called a note. A note is simply a symbol for rendering constraints and
comments attached to an element or a collection of elements.

Relationships in the UML

Relationship is another most important building block of UML. It shows how the elements are
associated with each other and this association describes the functionality of an application.

There are four kinds of relationships in the UML:

• Dependency
• Association

27
 • Generalization
• Realization
Dependency

It is an element (the independent one) that may affect the semantics of the other element (the
dependent one). Graphically, a dependency is rendered as a dashed line, possibly directed, and
occasionally including a label.

Association

Association is basically a set of links that connects the elements of a UML model. It also describes
how many objects are taking part in that relationship.

Generalization

It is a specialization/generalization relationship in which the specialized element (the child) builds

on the specification of the generalized element (the parent). The child shares the structure and the
behavior of the parent. Graphically, a generalization relationship is rendered as a solid line with a
hollow arrowhead pointing to the parent.

Realization

Realization can be defined as a relationship in which two elements are connected. One element
describes some responsibility, which is not implemented and the other one implements them. This
relationship exists in case of interfaces.

28
6.3 UML DIAGRAMS

UML is a modern approach to modeling and documenting software. It is based on diagrammatic

representations of software components. It is the final output, and the diagram represents the
system.

UML includes the following

• Use case diagram

• Sequence diagram

Fig 6.2 Use-Case diagram

The above diagram depicts that the user will be responsible to enter the details, image uploading in
our case. And all process or tasks like extracting the features from the image to classifying and
predicting the certain class of disease. And at last the results will be displayed to the user.

29
 Fig 6.3 Sequence Diagram

The above sequence diagram depicts that user must login to the system and feed the values, in our
case, it is the image of diseased skin. And then the model integrated in the website collects it and
process it to finally predict the disease so that the result will be displayed to the user.

30
 7. DEVELOPMENT
7.1. RAW DATA
Acne

Fig 7.1 Images of various patients for detecting Acne

Light Diseases and Disorders of Pigmentation

Fig 7.2 Images of various patients for detecting Light Diseases and
Pigmentation.

31
Actinic Keratosis Basal Cell Carcinoma and other Maligant Lesions

Fig 7.3 Images of various patients for detecting Actinic Keratosis and other
Maligant Lesions.

Tinea Ringworm Candidiasis

Fig 7.4 Images of various patients for detecting Tinea Ringworm Candidiasis

32
Warts Molluscum and other Viral Infections

Fig 7.5 Images of various patients for detecting Warts Molluscum and other
Viral Infections

33
7.2. SAMPLE CODE
[Link]
from flask import Flask, request, jsonify
import cv2
import os
import tensorflow as tf
import numpy as np
from PIL import Image
from flask_cors import CORS
import firebase_admin
from firebase_admin import credentials
from firebase_admin import auth

app = Flask(_name_)
CORS(app)

# Initialize Firebase Admin SDK with your service account credentials

cred = [Link]("[Link]") # Path to your service account key file
firebase_admin.initialize_app(cred)

# Load your machine learning model

saved_model_dir = 'cnn_model'
model = tf.saved_model.load(saved_model_dir)

# Define a function to process the image using the loaded model

def process_image(image):
img_size= (192,192,3)
return [Link]([Link]([Link](image, cv2.IMREAD_COLOR), img_size[0:2])[:, :, ::-
1])

34
# Define a route to handle image uploads
@[Link]('/predict', methods=['POST'])
def predict():
if 'image' not in [Link]:
return jsonify({'error': 'No image provided'}), 400

image_file = [Link]['image']

# Save the image temporarily

image_path = 'temp_image.jpg'
image_file.save(image_path)

# Process the image using the loaded model

input_image = process_image(image_path)
predictions = model([Link](input_image[None, ...], dtype=tf.float32))

# Load class names if needed

class_names = ['Acne', 'Actinic Keratosis Basal Cell Carcinoma and other Malignant Lesions',
'Light Diseases and Disorders of Pigmentation', 'Ringworm', 'Warts Molluscum and other Viral
Infections']
# Get the predicted class index
predicted_class_index = [Link](predictions)
print(predicted_class_index)
result = class_names[predicted_class_index]

# Remove the temporary image file

[Link](image_path)

return jsonify({'prediction': result}), 200

@[Link]('/get_user_ids', methods=['GET'])

35
def get_user_ids():
try:
# Retrieve all user records from Firebase Authentication
user_records = auth.list_users()
user_ids = [[Link] for user in user_records.users]
return jsonify({'user_ids': user_ids}), 200
except Exception as e:
return jsonify({'error': str(e)}), 500

if _name_ == '_main_':
[Link](debug=True)

[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/[Link]" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/[Link]" />

<link rel="manifest" href="%PUBLIC_URL%/[Link]" />

<title>SkinCareXpert</title>
</head>

36
 <body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

</body>
</html>

[Link]
import React from 'react';
import ReactDOM from 'react-dom';
import './[Link]';
import App from './App';
import { AuthContextProvider } from './store/app-context';
import { BrowserRouter as Router } from 'react-router-dom';

[Link](
<AuthContextProvider>
<Router>
<App />
</Router>
</AuthContextProvider>,
[Link]('root')
);

[Link]
import React,{useContext}from 'react';
import Menu from './components/Menu';
import UploadImage from './components/UploadImage';
import History from './components/History';
import './[Link]';

37
import Header from './components/Header';
import LoginForm from './components/LoginForm';
import AuthContext from './store/app-context';
import AskQuestion from './components/AskQuestion';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';

function App() {
const authCtx = useContext(AuthContext);
const isLoggedIn = [Link];
[Link]("Email retrieved from localStorage:", [Link]);

return (
<>
<Header />
{!isLoggedIn && <LoginForm />}
{isLoggedIn && (
<div className="app">
<div className="menu">
<Menu />
</div>
<div className="content">
<Routes>
<Route path="/" element={<Navigate to="/home" />} />
<Route path="/home" element={<UploadImage />} />
<Route path="/prediction-history" element={<History />} />
<Route path="/community" element={<AskQuestion />} />
<Route path="*" element={<Navigate to="/home" />} />
</Routes>
</div>
</div>

38
 )}
</>
);
}

export default App;

[Link]
import React, { useContext,useEffect } from 'react';
import './[Link]';
import AuthContext from '../store/app-context';
import { storage } from '../firebase';
import { ref, uploadBytes, listAll, getDownloadURL, getMetadata, updateMetadata } from
'firebase/storage';

function History(props) {
const imageListRef = ref(storage, images/${[Link]('userId')});
const authCtx = useContext(AuthContext);
[Link]("history");
[Link]([Link]);
const fetchImageUrls = () => {
[Link](imageListRef);
listAll(imageListRef)
.then((res) => {
const promises = [Link](async (item) => {
const url = await getDownloadURL(item);
const metadata = await getMetadata(item);
return { url, metadata };
});
return [Link](promises);
})

39
 .then((imageData) => {
[Link](imageData); // Update image list in context
[Link](imageData);
})
.catch((error) => {
[Link](error);
});
};

useEffect(() => {
if ([Link]) {
fetchImageUrls(); // Fetch image URLs when emailEntered is set
}
}, [[Link]]);

return (
<div className="right-history">
<h2 className="prediction-title">Prediction History</h2>
<div className="image-list">
{[Link]((image, index) => (
<div key={index + 1} className="image-item">
<div className="image-details">
<img src={[Link]} alt="images" className="center-image" />
<p className='result'>{[Link]}</p>
<p className='time'>{[Link]}</p>

</div>
</div>
))}
</div>

40
 </div>
);
}

export default History;

[Link]
import React, { useState,useRef, useContext } from 'react';
import './[Link]'; // Import your CSS file
import AuthContext from '../store/app-context';
import { database } from '../firebase';
import { ref, push} from 'firebase/database';

const LoginForm = () => {

const [isLogin, setIsLogin] = useState(false);
const emailInputRef = useRef();
const passwordInputRef = useRef();
const userNameInputRef = useRef();
const confirmPasswordInputRef = useRef();

const authCtx = useContext(AuthContext);

const switchAuthModeHandler = () => {

setIsLogin((prevState) => !prevState);
};
// const email = '';
const submitHandler = (event) =>{
[Link]();

41
 const enteredEmail = [Link];
const enteredpassword = [Link];
const eneteredUserName = !isLogin?[Link];
const enteredconfirmpassword = !isLogin?[Link] : 0;
if(enteredconfirmpassword !== 0 && enteredconfirmpassword !== enteredpassword){
alert('Please make sure your passwords match.');
return;
}
let url='';
if(isLogin){
url =
"[Link]
5vN453iR_bZs5OYO2z0u96f8"
}else{
url =
"[Link]
Zs5OYO2z0u96f8"
}

fetch(url,{
method:'POST',
body:[Link]({
email:enteredEmail,
password:enteredpassword,
returnSecureToken:true
}),
headers:{
'content-type' : 'application/json'
}
}).then(res =>{
if([Link]){
return [Link]();

42
 }else{
return [Link]().then(data =>{
throw new Error([Link]);
})
}
})
.then(data => {
[Link]([Link],[Link]);
[Link]([Link]);
[Link]([Link]);
if(eneteredUserName !== 0){
sendMetaData([Link],eneteredUserName);
}

})
.catch(err => {
alert([Link]);
});

const sendMetaData= (currUserId,currUserName)=>{

try{
const questionRef = push(ref(database, usersMetaData/${currUserId}), {
userName:currUserName
});
}
catch(error){
[Link]("Error: when sending user metadata:",[Link]);
}

43
}

return (
<div className="login-form-container">

<form className="login-form" onSubmit={submitHandler}>

<h1>{isLogin ? 'Login' : 'Sign Up'}</h1>

<div className="form-group">
<label htmlFor='email'>Email</label>
<input type='email' id='email' required ref={emailInputRef}/>
</div>

<div className="form-group">
<label htmlFor='password'>Password</label>
<input type='password' id='password' required ref={passwordInputRef}/>
</div>

{!isLogin &&
<div className="form-group">
<label htmlFor='pass'>confirm Password</label>
<input type='password' id='pass' required ref={confirmPasswordInputRef}/>
</div>
}

{!isLogin &&
<div className="form-group">
<label htmlFor='username'>User name</label>
<input type='text' id='username' required ref={userNameInputRef}/>
</div>

44
 }

<div className="actions">
<button>{isLogin ? 'Login' : 'Create Account'}</button>
{/* <p>Please wait while we create you account..!</p> */}
<button
type='button'
className="toggle"
onClick={switchAuthModeHandler}
>
{isLogin ? 'Create new account' : 'Login with existing account'}
</button>
</div>

</form>
</div>
);
};

export default LoginForm;

[Link]
import React from 'react'
import './[Link]';
import {NavLink} from 'react-router-dom';

const Menu = () => {

(function(d, t) {
var v = [Link](t), s = [Link](t)[0];
[Link] = function() {

45
 [Link]({
verify: { projectID: '65f80060744f38c8b9fbfa7c' },
url: '[Link]
versionID: 'production'
});
}
[Link] = "[Link] [Link] = "text/javascript";
[Link](v, s);
})(document, 'script');

return (
<div class="sidebar">
<h2>Menu</h2>
<ul class="inner-menu">
<li>
<NavLink to='/home' style={{textDecoration:"none"}}
activeclassname='active'>Home</NavLink>
</li>
<li>
<NavLink to='/prediction-history' style={{textDecoration:"none"}}
activeclassname='active'>Prediction History</NavLink>
</li>
<li>
<NavLink to='/community'style={{textDecoration:"none"}}
activeclassname='active'>Community</NavLink>
</li>
</ul>
</div>

)
}
export default Menu;

46
[Link]
import React, { useContext, useEffect, useState } from 'react';
import './[Link]';
import AuthContext from '../store/app-context';
import { storage } from '../firebase';
import { ref, uploadBytes, listAll, getDownloadURL, getMetadata, updateMetadata } from
'firebase/storage';
import { v4 } from 'uuid';

function UploadImage(props) {
const authCtx = useContext(AuthContext);
const [imageUpload, setImageUpload] = useState(null);
const [uploadedImageUrl, setUploadedImageUrl] =
useState([Link]('uploadedImageUrl'));
const [result,setResult] = useState([Link]('uploadedImagePrediction'));
[Link](uploadedImageUrl);
const imageListRef = ref(storage, images/${[Link]('userId')});

const handleImageUpload = (event) => {

if (imageUpload === null) return;
[Link](imageUpload);
const imageRef = ref(storage, images/${[Link]}/${[Link] + v4()});
uploadBytes(imageRef, imageUpload).then(() => {
alert("Image uploaded");
getDownloadURL(imageRef)
.then((url) => {
[Link]('uploadedImageUrl',url);
setUploadedImageUrl(url);
sendImageToBackend(imageUpload, imageRef);
})
.catch((error) => {

47
 [Link]("Error getting uploaded image URL:", error);
});
})
.catch((error) => {
[Link]("Error uploading image:", error);
});;
};

const fetchImageUrls = () => {

[Link](imageListRef);
listAll(imageListRef)
.then((res) => {
const promises = [Link](async (item) => {
const url = await getDownloadURL(item);
const metadata = await getMetadata(item);
return { url, metadata };
});
return [Link](promises);
})
.then((imageData) => {
[Link](imageData); // Update image list in context
[Link](imageData);
})
.catch((error) => {
[Link](error);
});
};
[Link]([Link]);

const sendImageToBackend = async (imageFile,imageRef) => {

48
const formData = new FormData();
[Link]('image', imageFile);
[Link](formData);
try {
const response = await fetch('[Link] {
method: 'POST',
body: formData
});

if (![Link]) {
throw new Error('Failed to send image to backend');
}

const data = await [Link]();

[Link]('Prediction:', [Link]);

const metadata = {
customMetadata: {
prediction: [Link]
}
};
updateMetadata(imageRef, metadata)
.then(() => {
[Link]("Metadata updated successfully");
fetchImageUrls();
})
.catch((error) => {
[Link]("Error updating metadata:", error);
});

49
 [Link]('uploadedImagePrediction',[Link]);
setResult([Link]);

} catch (error) {
[Link]('Error sending image to backend:', error);
}
};

useEffect(() => {
if ([Link]) {
fetchImageUrls();
}
}, [[Link]]);

return (
<div className='info-show'>
<p>Skin is the largest and fastest growing organ of the [Link] this contemporary world, skin
diseases are mostly found in humans. A skin disease is a particular kind of illness caused by bacteria
or an infection. These diseases like psoriasis have various dangerous effects on the skin and keep on
spreading over time.</p>
<br></br>
<p>It becomes important to identify these diseases at their initial stage to control it from
spreading. Since there are large number of different skin diseases, manually identifying them can be
a difficult task. Derma disease detection and classification can help in early identification of
disease, prevent it from becoming chronic.</p>
<br></br>
<p>The following Derma Diseases are identified by our virtual doctor:</p>
<ul>
<li>Acne</li>
<li>Actinic Keratosis Basal Cell Carcinoma and other Malignant Lesions</li>
<li>Light Diseases and Disorders of Pigmentation</li>
<li>Ringworm</li>

50
 <li>Warts Molluscum and other Viral Infections</li>
</ul>

<div className="container">
<div className="upload">
<h2>Upload Image</h2>
<div className="file">
<input type="file" accept="image/*" className="custom-file-input" onChange={(event)
=> { setImageUpload([Link][0]); }} />
<div>
<button onClick={handleImageUpload}>Submit</button>
</div>
</div>
</div>
{uploadedImageUrl && (
<div className="image-preview">
<h2>Uploaded Image Preview</h2>
<img src={uploadedImageUrl} alt="Uploaded" />
{result !== '' && <p>Predicted Output: {result}</p>}
</div>
)}
</div>
<div className='note'>
<p>&diams; Please note that although our model achieves an accuracy rate of 82%, its
predictions should be considered with a limited guarantee.</p>
<p>Determining the precise type of skin lesion should be done by a qualified doctor for an
accurate diagnosis.</p>
</div>
</div>
);
}

51
export default UploadImage;

[Link]
import React, { useState } from 'react';
const AuthContext = [Link]({
token: '',
isLoggedIn: false,
login: (token) => {},
logout: () => {},
images:[],
addImage:(newImage)=>{},
userId:'',
usersMetaData:()=>{},
metaData:[]
});

export const AuthContextProvider = (props) => {

const initialState = [Link]('token');
const [token, setToken] = useState(initialState);
const [images,setImages] = useState([]);
const [userId,setUserId] = useState([Link]('userId'));
const [metaData,setMetaData] = useState([]);
const userIsLoggedIn = !!token;

const loginHandler = (token, inputId) => {

[Link]('token', token);
setToken(token);
[Link]('userId', inputId);
setUserId(inputId);

52
};

const logoutHandler = () => {

setToken(null);
[Link]('token');
[Link]('userId');
setUserId(null);
[Link]('uploadedImageUrl');
[Link]('uploadedImagePrediction');
};

const imageHandler = (newImageData) => {

const processedImageData = [Link](image => {
return {
url: [Link],
result: [Link],
time: [Link]
};
});

// Sort the images based on upload time in descending order

[Link]((a, b) => {
return new Date([Link]) - new Date([Link]);
});

setImages(processedImageData);
};

const addMetaHandler = (allUsersMetaData)=>{

setMetaData(allUsersMetaData);

53
 }

const contextValue = {
token: token,
isLoggedIn: userIsLoggedIn,
login: loginHandler,
logout: logoutHandler,
images:images,
addImage:imageHandler,
userId:userId,
usersMetaData:addMetaHandler,
metaData:metaData
};
return (
<[Link] value={contextValue}>
{[Link]}
</[Link]>
);
};

export default AuthContext;

[Link]
import os
from time import sleep
from packaging import version
from flask import Flask, request, jsonify
import openai
from openai import OpenAI

54
import functions

# Check OpenAI version is correct

required_version = [Link]("1.1.1")
current_version = [Link](openai.__version__)
OPENAI_API_KEY = [Link]['OPENAI_API_KEY']
if current_version < required_version:
raise ValueError(f"Error: OpenAI version {openai.__version__}"
" is less than the required version 1.1.1")
else:
print("OpenAI version is compatible.")

# Start Flask app

app = Flask(__name__)

# Init client
client = OpenAI(
api_key=OPENAI_API_KEY) # should use env variable OPENAI_API_KEY in secrets (bottom
left corner)

# Create new assistant or load existing

assistant_id = functions.create_assistant(client)

# Start conversation thread

@[Link]('/start', methods=['GET'])
def start_conversation():
print("Starting a new conversation...") # Debugging line
thread = [Link]()
print(f"New thread created with ID: {[Link]}") # Debugging line
return jsonify({"thread_id": [Link]})

55
# Generate response
@[Link]('/chat', methods=['POST'])
def chat():
data = [Link]
thread_id = [Link]('thread_id')
user_input = [Link]('message', '')

if not thread_id:
print("Error: Missing thread_id") # Debugging line
return jsonify({"error": "Missing thread_id"}), 400

print(f"Received message: {user_input} for thread ID: {thread_id}"

) # Debugging line

# Add the user's message to the thread

[Link](thread_id=thread_id,
role="user",
content=user_input)
# Run the Assistant
run = [Link](thread_id=thread_id,
assistant_id=assistant_id)

# Check if the Run requires action (function call)

while True:
run_status = [Link](thread_id=thread_id,
run_id=[Link])
print(f"Run status: {run_status.status}")
if run_status.status == 'completed':
break
sleep(15) # Wait for a second before checking again

56
 # Retrieve and return the latest message from the assistant
messages = [Link](thread_id=thread_id)
response = [Link][0].content[0].[Link]

print(f"Assistant response: {response}") # Debugging line

return jsonify({"response": response})

# Run server
if __name__ == '__main__':
[Link](host='[Link]', port=8080)

[Link]
import json
import os

def create_assistant(client):
assistant_file_path = '[Link]'

if [Link](assistant_file_path):
with open(assistant_file_path, 'r') as file:
assistant_data = [Link](file)
assistant_id = assistant_data['assistant_id']
print("Loaded existing assistant ID.")
else:
file = [Link](file=open("[Link]", "rb"),
purpose='assistants')

assistant = [Link](instructions="""
The assistant, SkinCare Expert Application's support assistant, has been programmed to
provide customers or users with information on five different skin diseases includes Acne, Actinic

57
Keratosis Basal Cell Carcinoma and other Malignant Lesions, Light Diseases and Disorders of
Pigmentation, Ringworm, Warts Molluscum and other Viral Infections.
A document has been provided with information about those mentioned five skin diseases. If user
query is not related to the information then reply something like I am dermatology assistant only,
Sorry I can't help you with this.
""",
model="gpt-3.5-turbo-1106",
tools=[{
"type": "retrieval"
}],
file_ids=[[Link]])

with open(assistant_file_path, 'w') as file:

[Link]({'assistant_id': [Link]}, file)
print("Created a new assistant and saved the ID.")

assistant_id = [Link]

return assistant_id

[Link]
import React, { useState, useEffect, useContext,useRef } from 'react';
import { database } from '../firebase';
import { ref,push, get, set, child } from 'firebase/database';
import './[Link]'; // Import the CSS file
import AuthContext from '../store/app-context';

const AskQuestion = () => {

const [question, setQuestion] = useState('');
const [userIds, setUserIds] = useState([]);
const [userQuestions, setUserQuestions] = useState([]);

58
 const [updatedUserQuestions,setUpdatedUserQuestions] = useState(userQuestions);
const [replyIndex, setReplyIndex] = useState(null);
const [replyText, setReplyText] = useState('');
const authCtx = useContext(AuthContext);
const replyInputRef = useRef();

useEffect(() => {
const fetchUserIds = async () => {
try {
const response = await fetch('[Link] // Make sure this URL
matches your Flask route
if (![Link]) {
throw new Error('Failed to fetch user IDs');
}
const data = await [Link]();
[Link](data.user_ids);
setUserIds(data.user_ids);
} catch (error) {
[Link]('Error fetching user IDs:', [Link]);
}
};

fetchUserIds();
}, []);

useEffect(() => {
const fetchUserQuestions = async () => {
try
{
const currentUserId = [Link];
const userQuestionsRef = ref(database, users/${currentUserId}/questions);

59
 const snapshot = await get(userQuestionsRef);
if ([Link]()) {
const questionsWithIds = [Link]([Link]()).map(([id, question]) => ({ id,
...question }));
setUserQuestions(questionsWithIds);
} else {
setUserQuestions([]);
}
} catch (error) {
[Link]('Error fetching user questions:', [Link]);
}
};

fetchUserQuestions();
}, [[Link]]);

useEffect(() => {
const userIdToUsernameMap = {};
[Link](meta => {
const [userId, username] = [Link](meta)[0];
userIdToUsernameMap[userId] = username;
});
[Link](userQuestions);
const updatedUserQuestions = [Link](userQuestion => {
const username = userIdToUsernameMap[[Link]] || 'Unknown';
return { ...userQuestion, askedBy: username };
});
setUpdatedUserQuestions(updatedUserQuestions);
}, [[Link],userQuestions]);

const handleSubmit = async (e) => {

60
 [Link]();
const currentUserId = [Link];
const otherUserIds = [Link](id => id !== currentUserId);

try {
const questionRef = push(ref(database, users/${currentUserId}/questions), {
askedBy: currentUserId,
question: question,
questionId: null, // Placeholder for the question ID
});

// Get the key (question ID) of the newly created question

const questionId = [Link];
for (const userId of otherUserIds) {
const questionRef = push(ref(database, users/${userId}/questions), {
askedBy: currentUserId,
question: question,
questionId: questionId, // Placeholder for the question ID
});
[Link](Question ID sent to user ${userId}:, questionId);
}
} catch (error) {
[Link]('Error storing questions:', [Link]);
}
setQuestion('');
};

const handleReplyButtonClick = (index) => {

setReplyIndex(index); // Set the index of the question for which reply is being typed
};

61
 const handleSendReply = async (index,recieverUserId,recieverQuestionId) => {
const replyText = [Link];
[Link](Sending reply to question at index ${index}: ${replyText});

try {

await set(ref(database, users/${recieverUserId}/questions/${recieverQuestionId}/reply),

replyText);

const currentUserId = [Link];

// Get a reference to the question node
const questionRef = ref(database, users/${recieverUserId}/questions/${recieverQuestionId});

// Push the new reply to the 'replies' node under the question
const replyRef = push(child(questionRef, 'replies'), {
senderId: currentUserId,
message: replyText,
});
setReplyText('');
setReplyIndex(null);

} catch (error) {
[Link]('Error sending reply:', [Link]);
}
};

return (
<div className='community-container'>
<div className="user-questions-container">

62
 <h2>Community Hub</h2>
<div className='scrollable-content'>
<ul>
{userQuestions && [Link]((userQuestion, index) => (
<li key={index}>
<strong>{>}{[Link]}: </strong>{[Link]}
{[Link] !== [Link] && <button className='reply-button'
onClick={() => handleReplyButtonClick(index)}>Reply</button>}
<div className='replies'>
{[Link] && (
<p>Replies:</p>
)}
<ul>
{[Link] && [Link]([Link]).map((replyId) => {
const reply = [Link][replyId];
return (
<li key={replyId}>
{/* <strong>Sender:</strong> {[Link]}<br /> */}
<strong>{[Link]}:</strong> {[Link]}
</li>
);
})}
</ul>
</div>

{replyIndex === index && (

<div className='send'>
<input
type="text"
ref={replyInputRef}
placeholder="Type your reply..."

63
 className='input-text'
/>
<button className='input-text-button' onClick={() =>
handleSendReply(index,[Link],[Link])}>Send</button>
</div>
)}

</li>
))}
</ul>
</div>
</div>
<div className="question-form-container"> {/* Add a container class */}
<h2>Ask a Question</h2>
<form onSubmit={handleSubmit} className="form-container">
<textarea
value={question}
onChange={(e) => setQuestion([Link])}
placeholder="Enter your question..."
required
className="question-textarea"
></textarea>
<button type="submit" className="submit-button">Submit</button> {/* Add a button
class */}
</form>
</div>
</div>
);
};

export default AskQuestion;

64
7.3. RESULTS
Login Page

Fig 7.6 The login/signup page where new users can create their account and existing users can login
with email and password.

Home Page

Fig 7.7 After logged in, It will land on home page which provides brief description about our
application, list of diseases that our model predicts and an input file upload option.

65
Acne Detection

Fig 7.8 The model analyzes the image and displays the result accordingly. In the above case the
model displays the result as acne.

Actinic Keratosis Detection

Fig 7.9 The model analyzes the image and displays the result accordingly. In the above case the
model displays the result as Actinic Keratosis Basal Cell Carcinoma and other Malignant Lesions.

66
Prediction History Page

Fig 7.10 The prediction history page contains the list of predicted images that were tracked for
every individual user based on the time.

Community Page

Fig 7.11 This community page will help you to interact to with the other users of this application,
where they can ask and reply to the questions.

67
Chatbot

Fig. 7.12 This is our custom virtual assistant bot that has been placed bottom-right side of the
application.

Fig 7.13 This chatbot that has been trained on our custom data, which can perfectly answer the user
queries related to the five diseases.

68
 8. TESTING
8.1 INTRODUCTION TO TESTING

Software Testing is defined as an activity to check whether the actual results match the
expected results and to ensure that the software system is Defect free. It involves the execution of a
software component or system component to evaluate one or more properties of interest. It is
required for evaluating the system. This phase is the critical phase of software quality assurance and
presents the ultimate view of coding.

Importance of Testing
The importance of software testing is imperative. A lot of times this process is skipped,
therefore, the product and business might suffer. To understand the importance of testing, here are
some key points to explain

• Software Testing saves money

• Provides Security

• Improves Product Quality

• Customer satisfaction

Testing is of different ways The main idea behind the testing is to reduce the errors and do it with
a minimum time and effort.

Benefits of Testing

• Cost-Effective: It is one of the important advantages of software testing. Testing any IT

project on time helps you to save your money for the long term. In case if the bugs caught
in the earlier stage of software testing, it costs less to fix.
• Security: It is the most vulnerable and sensitive benefit of software testing. People are
looking for trusted products. It helps in removing risks and problems earlier.
• Product quality: It is an essential requirement of any software product. Testing ensures a
quality product is delivered to customers.
• Customer Satisfaction: The main aim of any product is to give satisfaction to their
customers. UI/UX Testing ensures the best user experience.

69
Different types of Testing
Unit Testing: Unit tests are very low level, close to the source of your application. They consist in
testing individual methods and functions of the classes, components or modules used by your
software. Unit tests are in general quite cheap to automate and can be run very quickly by a
continuous integration server.

Integration Testing: Integration tests verify that different modules or services used by your
application work well together. For example, it can be testing the interaction with the database or
making sure that microservices work together as expected. These types of tests are more expensive
to run as they require multiple parts of the application to be up and running.

Functional Tests: Functional tests focus on the business requirements of an application. They only
verify the output of an action and do not check the intermediate states of the system when
performing that action.

There is sometimes a confusion between integration tests and functional tests as they both require
multiple components to interact with each other. The difference is that an integration test may
simply verify that you can query the database while a functional test would expect to get a specific
value from the database as defined by the product requirements.

Regression Testing: Regression testing is a crucial stage for the product & very useful for the
developers to identify the stability of the product with the changing requirements. Regression
testing is a testing that is done to verify that a code change in the software does not impact the
existing functionality of the product.

System Testing: System testing of software or hardware is testing conducted on a complete

integrated system to evaluate the system’s compliance with its specified requirements. System
testing is a series of different tests whose primary purpose is to fully exercise the computer-based
system.

Performance Testing: It checks the speed, response time, reliability, resource usage, scalability of
a software program under their expected workload. The purpose of

Performance Testing is not to find functional defects but to eliminate performance bottlenecks in
the software or device.

70
Alpha Testing: This is a form of internal acceptance testing performed mainly by the in- house
software QA and testing teams. Alpha testing is the last testing done by the test teams at the
development site after the acceptance testing and before releasing the software for the beta test. It
can also be done by the potential users or customers of the application. But still, this is a form of
in-house acceptance testing.

Beta Testing: This is a testing stage followed by the internal full alpha test cycle. This is the final
testing phase where the companies release the software to a few external user groups outside the
company test teams or employees. This initial software version is known as the beta version.
Most companies gather user feedback in this release.

Black Box Testing: It is also known as Behavioural Testing, is a software testing method in which
the internal structure/design/implementation of the item being tested is not known to the tester.
These tests can be functional or non-functional, though usually functional.

Fig 8.1.1 Blackbox Testing

This method is named so because the software program, in the eyes of the tester, is like a black box;
inside which one cannot see. This method attempts to find errors in the following categories:

• Incorrect or missing functions

• Interface errors
• Errors in data structures or external database access
• Behaviour or performance errors
• Initialization and termination errors

White Box Testing: White box testing (also known as Clear Box Testing, Open Box
Testing, Glass Box Testing, Transparent Box Testing, Code-Based Testing or Structural Testing) is a
software testing method in which the internal structure/design/implementation of the item being
tested is known to the tester. The tester chooses inputs to exercise paths through the code and

71
determines the appropriate outputs. Programming know-how and the implementation knowledge is
essential. White box testing is testing beyond the user interface and into the nitty-gritty of a system.
This method is named so because the software program, in the eyes of the tester, is like a
white/transparent box; inside which one clearly sees.

Fig 8.1.2 Whitebox Testing

8.2 TEST CASES

1. User is able to have their own logins with the credentials he used at time of signup/registration

72
2. We observed that our model predicts most of the test images correctly, but there are few
predictions that are wrongly predicted. That can cause due to the quality of the image or training
in which the dataset does not contain those classes or type of images.

3. Our system successfully stores the data for each user and displays their respective prediction
history whenever they want to.

73
4. The chatbot assistant also responds to the question on the data that it is trained with it, if the
user query is not related to this application, it replies something like “I can’t help with this”.

5. The Community Forum feature also works well where a user can ask something about the
disease which will be sent to all other users and the interested or the experienced person can
reply to it. And all those messages can be viewed by respective user anytime.

74
 9. CONCLUSION
In our project, we've developed a skin disease prediction system aimed at providing patients
with immediate insights into their health when they're unable to access a doctor. By inputting
relevant image, users can determine whether they have a specific condition and take necessary
precautions. Our main challenge revolved around data availability, particularly in obtaining image
data crucial for deep learning models. Despite this hurdle, we persevered with the data we had. Our
efforts culminated in the successful implementation of the primary convolutional neural network
(CNN) model, complemented by additional features such as prediction history, chatbot assistance,
and a community forum. These features serve as valuable advantages of our application, enhancing
user experience and fostering a supportive community environment.

75
 10. FUTURE SCOPE
The project's scope may initially appear expansive, contingent upon its specific goals and
objectives, yet its ultimate aim is to augment health outcomes. Central to this endeavor is the
utilization of deep learning techniques to discern patterns and trends within health data, thereby
facilitating the design of more targeted interventions. The precise scope of the project hinges on its
objectives and the diseases it aims to address. As data accessibility continues to grow, our focus will
shift towards enhancing model accuracy through larger datasets, incorporating additional diseases,
and refining model architecture. Future plans include implementing features to gauge disease
severity and integrating APIs like Google Places to provide users with a list of dermatologists in
their vicinity and also showing directions and time to reach. Additionally, collaboration with
hospitals is envisaged to introduce functionalities such as appointment scheduling. These
forthcoming upgrades and enhancements underscore our commitment to continually improving the
efficacy and usability of the platform.

76
 11. REFERENCES
[1] Ashwini Hipparage, Gitanjali Suryawanshi, Prachi Patil, Pranali Agale, Prof. Shital Borse,
“SKIN DISEASE DETECTION USING MACHINE LEARNING AND CONVOLUTIONAL
NEURAL NETWORK”, IRJET, May 2023
[2] Syed Inthiyaz, Baraa Riyadh Altahan, Sk Hasane Ahammad, “Skin disease detection using deep
learning”, November 2022

[3] Pravin R. Kshirsagar, Hariprasath Manoharan, S. Shitharth, “Deep Learning Approaches for
Prognosis of Automated Skin Disease”, National Library of Medicine, March 2022

[4] Sruthi Chintalapudi, Vikas Prateek Mishra, Shubham Sharma, Sunil Kumar, “SKIN DISEASE
DETECTION USING DEEP LEARNING”, IRJET, April 2021

[5] Keiron O’Shea and Ryan Nash, “An Introduction to Convolutional Neural Networks”, cornell
university, December 2022

[6] I M V Krishna , Dr S Parvathi Vallabhaneni, “Stochastic Study on CNN Approach for Classifying
Images”, June 2022

[7] [Link]

[8] [Link]

[9] [Link]

[10] [Link]

77