Project 1

Project 1 — Skin Cancer Detection Web Application

In this project, we will build a complete full-stack Deep Learning web application for multi-class skin disease classification using:

PyTorch
FastAPI
React
Axios
Anaconda

The application allows users to:

Train Deep Learning models
View training history
Upload skin images
Predict disease classes
View confidence scores

The project uses pretrained CNN models such as:

ResNet18
ResNet50
VGG16

Final Application Architecture

The complete project works like this:

React Frontend
        ↓
Axios API Request
        ↓
FastAPI Backend
        ↓
PyTorch Deep Learning Model
        ↓
Prediction Result

The frontend never trains the model directly.

Frontend only sends requests.

Backend receives the request and calls Deep Learning functions.

Step 1 — Create Main Project Directory

First create a main project folder.

Example location:

D:\anaconda3\projects

Inside this location create a folder:

skin-cancer-app

You can create it manually or using terminal.

Using terminal:

mkdir skin-cancer-app

Move inside the project:

cd skin-cancer-app

Now your project location becomes:

D:\anaconda3\projects\skin-cancer-app

Step 2 — Create Backend and Frontend Directories

Inside skin-cancer-app, create:

backend
frontend
dataset

Using terminal:

mkdir backend
mkdir frontend
mkdir dataset

Now structure becomes:

skin-cancer-app/
│
├── backend/
├── frontend/
└── dataset/

Step 3 — Open Anaconda Prompt

Open:

Anaconda Prompt

We use Conda so that all packages remain isolated from the system Python installation.

Step 4 — Create Conda Environment

Run:

conda create -n skin-cancer-app python=3.10 -y

Explanation:

conda create     → creates new environment
-n               → environment name
python=3.10      → installs Python 3.10
-y               → automatically accepts installation

After installation completes, activate the environment.

Step 5 — Activate Conda Environment

Run:

conda activate skin-cancer-app

Now terminal should show:

(skin-cancer-app)

before the path.

This confirms the environment is active.

Step 6 — Setup Backend Directory

Move inside backend folder:

cd D:\anaconda3\projects\skin-cancer-app\backend

Now create backend folders:

mkdir models_saved
mkdir uploads

These folders are used for:

models_saved → stores trained .pth models
uploads      → stores uploaded prediction images temporarily

Step 7 — Add Backend Files

Inside backend folder add:

main.py
ml_service.py
requirements.txt

Now backend structure becomes:

backend/
│
├── main.py
├── ml_service.py
├── requirements.txt
├── models_saved/
└── uploads/

Step 8 — Add Required Backend Packages

Open:

backend/requirements.txt

Add the following content:

fastapi
uvicorn
python-multipart
pillow
numpy 

This file contains all required backend dependencies for the project.

Step 9 — Install Backend Dependencies

Move inside backend folder:

cd D:\anaconda3\projects\skin-cancer-app\backend

Run:

pip install -r requirements.txt

This command installs all packages mentioned inside requirements.txt.

Installed libraries include:

FastAPI            → backend API framework
Uvicorn            → FastAPI server
NumPy              → numerical operations
Pillow             → image processing
Python-Multipart   → image upload handling

If installation completes successfully, backend dependencies are ready.

Step 10 — Install PyTorch

PyTorch installation depends on your system.

If you have NVIDIA GPU

Use:

conda install pytorch torchvision pytorch-cuda=12.1 -c pytorch -c nvidia -y

This installs GPU-supported PyTorch.

If you do not have NVIDIA GPU

Use:

conda install pytorch torchvision cpuonly -c pytorch -y

This installs CPU-only PyTorch.

Torch              → Deep Learning framework
Torchvision        → pretrained CNN models

The dataset is already assumed to be available.

You do not need to manually create dataset folders.

Place the dataset inside:

 skin-cancer-app/dataset/

 Example:

skin-cancer-app/
│
├── backend/
├── frontend/
└── dataset/
    └── Split_smol/

The dataset should already be organized in the following format:

Split_smol/
│
├── train/
│   ├── Actinic keratosis/
│   ├── Atopic Dermatitis/
│   ├── Benign keratosis/
│   ├── Dermatofibroma/
│   ├── Melanocytic nevus/
│   ├── Melanoma/
│   ├── Squamous cell carcinoma/
│   ├── Tinea Ringworm Candidiasis/
│   └── Vascular lesion/
│
└── val/
    ├── Actinic keratosis/
    ├── Atopic Dermatitis/
    ├── Benign keratosis/
    ├── Dermatofibroma/
    ├── Melanocytic nevus/
    ├── Melanoma/
    ├── Squamous cell carcinoma/
    ├── Tinea Ringworm Candidiasis/
    └── Vascular lesion/

 Each disease folder contains related images.

Example:

Melanoma/
    image1.jpg
    image2.jpg
    image3.jpg

 PyTorch automatically treats folder names as prediction classes.

The train folder is used for model training.

The val folder is used for validation and accuracy calculation.

Open:

backend/ml_service.py

 Find:

DATASET_PATH = r"YOUR_DATASET_PATH"

Replace it with your dataset location.

Example:

DATASET_PATH = r"D:\anaconda3\projects\skin-cancer-app\dataset\Split_smol"

Using r"" avoids Windows path escape issues.

Now write the complete Deep Learning logic inside:

backend/ml_service.py

This file contains:

Dataset loading
Image preprocessing
DataLoader creation
Model building
Transfer learning
Training loop
Validation loop
Prediction function
Model saving
Model loading
Backend logging

This file acts as the Deep Learning engine of the application.

It does not directly communicate with frontend.

Backend APIs will call functions from this file.

Open:

backend/main.py

This file creates the FastAPI backend server.

Write APIs for:

/train
/predict
/models

This file should:

Receive frontend requests
Accept uploaded images
Call train_model() from ml_service.py
Call predict_image() from ml_service.py
Return JSON responses
Enable CORS

This file acts as communication layer between frontend and Deep Learning logic.

Frontend runs on: 

http://localhost:5173

 Backend runs on:

 http://127.0.0.1:8000

 Since both run on different ports, browsers block requests by default.

CORS middleware allows frontend to communicate with backend.

Without CORS, Axios requests may fail.

Move to backend folder:

cd D:\anaconda3\projects\skin-cancer-app\backend

Run backend server:

python -m uvicorn main:app --reload

Explanation:

python -m        → runs Python module
uvicorn          → FastAPI server
main:app         → app object inside main.py
--reload         → auto restart after code changes

 If successful:

 Uvicorn running on http://127.0.0.1:8000

 Backend is now active.

Open browser:

http://127.0.0.1:8000/docs

 FastAPI automatically generates API documentation.

You can test APIs directly before creating frontend.

Test /models

Click:

GET /models

 Then click:

Try it out
Execute

 Expected output:

{
  "available_models": [
    "resnet18",
    "resnet50",
    "vgg16"
  ]
}

Open:

POST /train

Input:

model_name: resnet18
epochs: 2
train_split: 0.8
lr: 0.001

Click Execute.

Expected response contains:

model_id
model_path
history

Backend terminal displays training logs.

Use generated model_id.

Upload image.

Expected response:

prediction
confidence

After backend APIs work correctly, continue frontend setup.

cd D:\anaconda3\projects\skin-cancer-app

Create React frontend using Vite:

npm create vite@latest frontend

Select:

Framework: React
Variant: JavaScript

This creates the frontend project inside the frontend folder.

cd frontend

Now you are inside:

D:\anaconda3\projects\skin-cancer-app\frontend

Run:

npm install

This installs the default React and Vite packages from package.json.

Run:

npm install axios

Axios is used to send requests from React frontend to FastAPI backend.

For example:

React frontend → Axios request → FastAPI backend

After setup, frontend folder should look like this:

frontend/
│
├── src/
│   ├── App.jsx
│   └── main.jsx
│
├── package.json
├── vite.config.js
└── node_modules/

Open:

frontend/src/App.jsx

Replace the existing code with your final React frontend code.

This file handles:

Train Model tab
Predict Image tab
Training Results tab
Image upload
Model ID input
Axios API calls
Loading messages
Error messages
Prediction result display
Training history display

The important backend connection line is:

const API_URL = "http://127.0.0.1:8000";

This means the frontend will call the backend running at:

http://127.0.0.1:8000

When user clicks Start Training, React sends:

POST http://127.0.0.1:8000/train

with:

model_name
epochs
train_split
lr

When user clicks Predict Image, React sends:

POST http://127.0.0.1:8000/predict

with:

model_id
uploaded image

Backend processes the request and sends the result back to frontend.

From frontend folder:

npm run dev

If successful, terminal shows:

http://localhost:5173

Open this URL in browser.

You need two terminals.

Terminal 1 — Backend

conda activate skin-cancer-app

cd D:\anaconda3\projects\skin-cancer-app\backend

python -m uvicorn main:app --reload

Backend runs at:

http://127.0.0.1:8000

cd D:\anaconda3\projects\skin-cancer-app\frontend

npm run dev

Frontend runs at:

http://localhost:5173

Both backend and frontend must run together.