Create a full-stack web application for Skin Cancer Detection using a user-friendly, modern, and interactive UI.

🌟 Features to include: Image Upload & Analysis:

Allow users to upload a skin lesion image.

Integrate a pre-trained skin cancer detection ML model (can be a Vision Transformer or CNN model).

Display result: Benign, Malignant, or other predicted classes with confidence score.

Optionally show a heatmap or highlight on the image to indicate focus area (Grad-CAM/attention map).

Dashboard:

Summary of recent scans.

Insights into skin health and risk levels.

Latest News:

Section to fetch and display latest news about dermatology and skin cancer using a public news API (like NewsAPI).

Nearby Hospitals & Clinics:

Use user's location (with permission) to show a map with nearby dermatology hospitals or clinics using Google Maps API or OpenStreetMap.

Include search and filter options by specialization, ratings, and distance.

Health Tips & Preventive Measures:

Educational section about skin care, early signs of skin cancer, preventive measures, and healthy habits.

User Authentication:

Allow users to sign up / log in and securely save their reports.

Dark Mode Toggle and Responsive Design for all screen sizes.

Admin Panel:

Manage users and view system usage statistics.

Optional Advanced Features:

Chatbot assistant for skin care questions.

Multi-language support.

Accessibility options for visually impaired users.

💡 Tech Stack Suggestions: Frontend: React.js (with Tailwind CSS or Material UI for design)

Backend: .NET Core or Node.js (Express)

ML Integration: Load pre-trained model via Python Flask API or ONNX runtime

Database: MongoDB or SQL Server

APIs: Google Maps API, NewsAPI

Ensure the UI is modern, clean, and intuitive with clearly labeled menus for easy navigation.

Let me know if you want me to generate the React + .NET template or the Python API for model integration too!

You said: include good styling as well

ChatGPT said: Absolutely! Here's an enhanced and final version of the prompt that you can give to an AI code or UI generator. This version includes clear emphasis on professional styling, UI/UX polish, and advanced interactivity:

✅ Prompt: Build a full-stack web application for Skin Cancer Detection with a visually stunning, user-friendly, and responsive UI, designed with modern styling and advanced features for usability, interactivity, and accessibility.

🔍 Core Functionality: Image Upload & ML Prediction:

User uploads a skin lesion image.

Integrate a pre-trained ML model (like a Vision Transformer or CNN).

Display result with:

Prediction: Benign, Malignant, etc.

Confidence score

Grad-CAM / Attention map overlay for visual explanation.

User Dashboard:

Show history of past analyses.

Visualizations (charts, timelines) for risk tracking over time.

Nearby Hospitals/Clinics Map:

Fetch user location (with permission).

Display nearby dermatologists and hospitals using Google Maps API.

Include filter by rating, specialty, and distance.

Latest News & Research:

Pull news from NewsAPI or similar.

Auto-update with skin cancer and dermatology-related news.

Skin Health & Tips:

Provide curated content on:

Skin care best practices

Early signs of cancer

Prevention tips

Authentication & User Management:

Secure sign-up / log-in with JWT-based auth.

Users can save reports, track progress.

Admin Panel:

View system stats (users, uploads, predictions).

Manage content like health tips & news.

🎨 Styling & UI/UX Requirements: Clean, professional UI using Tailwind CSS, Material UI, or ShadCN/UI.

Use grid layouts, card-based design, and elegant typography.

Dark mode toggle with smooth transitions.

Add hover animations, loading skeletons, and smooth page transitions (e.g., Framer Motion).

Mobile-first responsive design.

Use icons (Lucide or HeroIcons) to enhance visual clarity.

Accessible (ARIA-compliant) and color-blind friendly.