A full-stack web application for AI-powered skin disease detection using a fine-tuned DenseNet121 model.
SkinARTify provides fast and reliable classification across 7 common skin lesion types through an intuitive and responsive interface. This tool is designed for educational and research purposes, demonstrating the power of deep learning in medical imaging.
- Frontend Web App: skinartify-frontend.vercel.app
- Backend API Host: Hugging Face Space
- Modern UI: A clean, medical-grade interface built with React, TypeScript, and Tailwind CSS.
- Easy Image Upload: Simple drag-and-drop functionality for uploading skin lesion images.
- Real-time Analysis: Get instant AI-powered classification results within seconds.
- Detailed Results: View comprehensive prediction results with confidence scores for each lesion type.
- Robust Error Handling: Clear feedback and guidance for users in case of errors.
- Developer-Friendly: Includes mock predictions for frontend testing without a live model.
The application is built with a decoupled architecture. This repository contains the React frontend code. The backend API and the machine learning model are hosted separately as a public API on Hugging Face Spaces.
The workflow is as follows:
- React Frontend (This Repo): The user interacts with the React application built with Vite and TypeScript, and uploads an image.
- API Call: The frontend sends the image to the public backend API endpoint hosted on Hugging Face.
- Backend & ML Model (Hugging Face): The remote server runs the Python script, performs inference using the DenseNet121 model, and returns the prediction.
- Display Results: The React frontend receives the JSON response and displays the classification results to the user.
To run the frontend on your local machine for development, follow these steps.
git clone [https://github.com/your-username/skinartify-frontend.git](https://github.com/your-username/skinartify-frontend.git)
cd skinartify-frontendThis project uses npm to manage dependencies. Run the following command in your terminal:
npm installThe frontend needs to know the URL of your deployed backend API.
- Create a new file in the root of the project named
.env.local. - Add the following line, replacing the URL with the link to your Hugging Face Space API.
# .env.local
VITE_API_URL=[https://aryan195a-skinartify-backend.hf.space](https://aryan195a-skinartify-backend.hf.space)
(Note: Vite requires environment variables to be prefixed with VITE_ to be accessible in the frontend code.)
Start the Vite development server with this command:
npm run devYour browser should automatically open to http://localhost:5173 (or another port if 5173 is busy), where you'll see the application running and communicating with your live Hugging Face backend.
This section describes the API the frontend communicates with.
- Input Shape:
(224, 224, 3) - Output Classes: 7 classes, with the following order:
akiec(Actinic keratoses)bcc(Basal cell carcinoma)bkl(Benign keratosis-like lesions)df(Dermatofibroma)melanoma(Melanoma)nevus(Melanocytic nevi)vasc(Vascular lesions)
| Method | Endpoint | Description |
|---|---|---|
GET |
/api/health |
Health check to confirm if the server is running. |
POST |
/api/predict |
Upload an image for prediction. Expects multipart/form-data. |
This application is for educational and research purposes only. The predictions are not a substitute for professional medical diagnosis. Always consult a qualified healthcare professional for any medical concerns or advice.
Contributions are welcome! Please follow these steps:
- Fork the repository.
- Create your feature branch (
git checkout -b feature/AmazingFeature). - Commit your changes (
git commit -m 'Add some AmazingFeature'). - Push to the branch (
git push origin feature/AmazingFeature). - Open a Pull Request.