Initial upload of Flask app with LFS and full project

.gitattributes

@@ -33,3 +33,6 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,18 @@
+# Use an official Python image
+FROM python:3.9-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy all files into the container
+COPY . .
+
+# Expose the port Flask will run on
+EXPOSE 7860
+
+# Run your Flask app
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,138 @@
+from flask import Flask, render_template, request, jsonify
+import tensorflow as tf
+import numpy as np
+from PIL import Image
+import pickle
+import io
+import os
+import zipfile
+import matplotlib.pyplot as plt
+import logging
+
+# Configure logging
+logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
+logger = logging.getLogger(__name__)
+
+app = Flask(__name__)
+
+MODEL_ZIP = "skin_lesions_model.zip"
+MODEL_PATH = "skin_lesion_model.h5"
+HISTORY_PATH = "training_history.pkl"
+
+# Extract model if not already extracted
+if not os.path.exists(MODEL_PATH):
+    try:
+        logger.info("Extracting model from zip: %s", MODEL_ZIP)
+        with zipfile.ZipFile(MODEL_ZIP, 'r') as zip_ref:
+            zip_ref.extractall()
+        logger.info("Model extracted successfully.")
+    except Exception as e:
+        logger.error("Failed to extract model: %s", str(e))
+        raise
+
+# Load model
+try:
+    logger.info("Loading model from %s", MODEL_PATH)
+    model = tf.keras.models.load_model(MODEL_PATH)
+except Exception as e:
+    logger.error("Failed to load model: %s", str(e))
+    raise
+
+# Load training history for plotting
+if os.path.exists(HISTORY_PATH):
+    try:
+        with open(HISTORY_PATH, "rb") as f:
+            history_dict = pickle.load(f)
+        logger.info("Loaded training history from %s", HISTORY_PATH)
+    except Exception as e:
+        logger.error("Failed to load training history: %s", str(e))
+        history_dict = {}
+else:
+    logger.warning("Training history file %s not found", HISTORY_PATH)
+    history_dict = {}
+
+# Plot accuracy history
+if "accuracy" in history_dict and "val_accuracy" in history_dict:
+    try:
+        plt.plot(history_dict['accuracy'], label='Train Accuracy')
+        plt.plot(history_dict['val_accuracy'], label='Val Accuracy')
+        plt.xlabel('Epochs')
+        plt.ylabel('Accuracy')
+        plt.title('Training History')
+        plt.legend()
+        plt.grid(True)
+        os.makedirs("static", exist_ok=True)
+        plt.savefig("static/training_plot.png")
+        plt.close()
+        logger.info("Generated training history plot at static/training_plot.png")
+    except Exception as e:
+        logger.error("Failed to generate training plot: %s", str(e))
+
+IMG_SIZE = (224, 224)
+CONFIDENCE_THRESHOLD = 0.30
+
+label_map = {
+    0: "Melanoma",
+    1: "Melanocytic nevus",
+    2: "Basal cell carcinoma",
+    3: "Actinic keratosis",
+    4: "Benign keratosis",
+    5: "Dermatofibroma",
+    6: "Vascular lesion",
+    7: "Squamous cell carcinoma"
+}
+
+def preprocess_image(image_bytes):
+    try:
+        image = Image.open(io.BytesIO(image_bytes)).convert("RGB")
+        image = image.resize(IMG_SIZE)
+        image_array = tf.keras.utils.img_to_array(image)
+        image_array = np.expand_dims(image_array, axis=0)
+        return image_array / 255.0
+    except Exception as e:
+        logger.error("Failed to preprocess image: %s", str(e))
+        raise
+
+@app.route("/form", methods=["GET"])
+def form():
+    logger.info("Serving form page at /form")
+    return render_template("form.html", history_plot="/static/training_plot.png")
+
+@app.route("/predict", methods=["POST"])
+def predict():
+    logger.info("Received prediction request")
+    if "image" not in request.files:
+        logger.warning("No image uploaded in request")
+        return jsonify({"error": "No image uploaded"}), 400
+
+    try:
+        image = request.files["image"].read()
+        img_array = preprocess_image(image)
+
+        logger.info("Running model prediction")
+        prediction = model.predict(img_array)[0]
+        predicted_index = int(np.argmax(prediction))
+        confidence = float(prediction[predicted_index])
+
+        if confidence < CONFIDENCE_THRESHOLD:
+            result = {
+                "prediction": "Low confidence",
+                "confidence": f"{confidence * 100:.2f}%",
+                "message": "⚠ This image is not confidently recognized. Please upload a clearer image."
+            }
+            logger.info("Prediction: Low confidence (%.2f%%)", confidence * 100)
+        else:
+            result = {
+                "prediction": label_map.get(predicted_index, "Unknown"),
+                "confidence": f"{confidence * 100:.2f}%"
+            }
+            logger.info("Prediction: %s (Confidence: %.2f%%)", result["prediction"], confidence * 100)
+
+        return jsonify(result), 200
+    except Exception as e:
+        logger.error("Error processing image: %s", str(e))
+        return jsonify({"error": f"Error processing image: {str(e)}"}), 500
+
+# Use fixed port for Hugging Face
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=7860)

requirements.txt

@@ -0,0 +1,5 @@
+flask
+tensorflow
+numpy
+Pillow
+matplotlib

skin_lesion_model.zip

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:91579e4e16ced55f3211edfc60b330b88c35730ee815038dc20272620328cd4c
+size 186018725

static/cursor-effect.js

@@ -0,0 +1,109 @@
+// Custom cursor effect
+document.addEventListener('DOMContentLoaded', function() {
+    // Use default browser cursor as fallback
+    document.body.classList.remove('custom-cursor');
+    
+    // Create cursor elements
+    const cursorGlow = document.createElement('div');
+    cursorGlow.classList.add('cursor-glow');
+    document.body.appendChild(cursorGlow);
+    
+    // Create delayed follow circle
+    const cursorFollow = document.createElement('div');
+    cursorFollow.classList.add('cursor-follow');
+    document.body.appendChild(cursorFollow);
+    
+    // Variables for storing mouse position
+    let mouseX = 0;
+    let mouseY = 0;
+    let cursorX = 0;
+    let cursorY = 0;
+    
+    // Update mouse position on mouse move
+    document.addEventListener('mousemove', function(e) {
+        mouseX = e.clientX;
+        mouseY = e.clientY;
+        
+        // Show the cursor glow and position it at the mouse coordinates
+        cursorGlow.style.opacity = '1';
+        cursorGlow.style.left = mouseX + 'px';
+        cursorGlow.style.top = mouseY + 'px';
+    });
+    
+    // Animate the follow cursor with delay
+    function animateFollowCursor() {
+        // Calculate the distance between current position and target position
+        const dx = mouseX - cursorX;
+        const dy = mouseY - cursorY;
+        
+        // Move the cursor a fraction of the distance (creates delay/easing effect)
+        cursorX += dx * 0.15;
+        cursorY += dy * 0.15;
+        
+        // Apply the position
+        cursorFollow.style.left = cursorX + 'px';
+        cursorFollow.style.top = cursorY + 'px';
+        
+        // Continue animation
+        requestAnimationFrame(animateFollowCursor);
+    }
+    
+    // Start the animation
+    animateFollowCursor();
+    
+    // Make cursor visible when mouse moves
+    document.addEventListener('mousemove', function() {
+        cursorFollow.style.opacity = '1';
+        cursorGlow.style.opacity = '0.9';
+    });
+    
+    // Increase cursor glow size when hovering clickable elements
+    const clickableElements = document.querySelectorAll('a, button, input[type="submit"], .cta-button, .submit-button, .feature-card, .testimonial-card, .step-number, nav ul li a, .footer-links ul li a, input[type="checkbox"], input[type="radio"], select, .color-label, .checkbox-option');
+    
+    clickableElements.forEach(element => {
+        element.addEventListener('mouseenter', function() {
+            cursorGlow.style.width = '70px';
+            cursorGlow.style.height = '70px';
+            cursorGlow.style.background = 'radial-gradient(circle, rgba(255, 143, 48, 0.6) 0%, rgba(255, 143, 48, 0) 70%)';
+            cursorFollow.style.borderColor = 'rgba(255, 143, 48, 1)';
+            cursorFollow.style.backgroundColor = 'rgba(255, 143, 48, 0.3)';
+            cursorFollow.style.width = '35px';
+            cursorFollow.style.height = '35px';
+        });
+        
+        element.addEventListener('mouseleave', function() {
+            cursorGlow.style.width = '50px';
+            cursorGlow.style.height = '50px';
+            cursorGlow.style.background = 'radial-gradient(circle, rgba(55, 199, 255, 0.5) 0%, rgba(55, 199, 255, 0) 70%)';
+            cursorFollow.style.borderColor = 'rgba(55, 199, 255, 0.9)';
+            cursorFollow.style.backgroundColor = 'rgba(55, 199, 255, 0.2)';
+            cursorFollow.style.width = '25px';
+            cursorFollow.style.height = '25px';
+        });
+    });
+    
+    // Hide cursor elements when mouse leaves the window
+    document.addEventListener('mouseout', function(e) {
+        if (e.relatedTarget === null) {
+            cursorGlow.style.opacity = '0';
+            cursorFollow.style.opacity = '0';
+        }
+    });
+    
+    // Show cursor elements when mouse enters the window
+    document.addEventListener('mouseover', function() {
+        cursorGlow.style.opacity = '1';
+        cursorFollow.style.opacity = '1';
+    });
+    
+    // Add cursor click effect
+    document.addEventListener('mousedown', function() {
+        cursorGlow.style.transform = 'translate(-50%, -50%) scale(0.9)';
+        cursorFollow.style.transform = 'translate(-50%, -50%) scale(0.5)';
+    });
+    
+    document.addEventListener('mouseup', function() {
+        cursorGlow.style.transform = 'translate(-50%, -50%) scale(1)';
+        cursorFollow.style.transform = 'translate(-50%, -50%) scale(1)';
+    });
+});

static/form-handler.js

@@ -0,0 +1,115 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const fileInput = document.getElementById('image');
+    const fileUploadText = document.querySelector('.file-upload-text');
+    const uploadMessage = document.getElementById('upload-message');
+    const form = document.getElementById('patient-form');
+    const submitBtn = document.getElementById('submit-btn');
+    const resultSection = document.getElementById('result-section');
+    const resultContent = document.getElementById('result-content');
+
+    // Handle file input change
+    fileInput.addEventListener('change', () => {
+        if (fileInput.files && fileInput.files.length > 0) {
+            const file = fileInput.files[0];
+            const validTypes = ['image/jpeg', 'image/jpg', 'image/png'];
+            const maxSize = 20 * 1024 * 1024; // 20MB in bytes
+
+            // Validate file type and size
+            if (!validTypes.includes(file.type)) {
+                alert('Please upload an image in JPG, JPEG, or PNG format.');
+                fileInput.value = '';
+                fileUploadText.textContent = 'Choose Image';
+                uploadMessage.style.display = 'none';
+                return;
+            }
+
+            if (file.size > maxSize) {
+                alert('File size exceeds 20MB. Please upload a smaller image.');
+                fileInput.value = '';
+                fileUploadText.textContent = 'Choose Image';
+                uploadMessage.style.display = 'none';
+                return;
+            }
+
+            // Update file upload text with file name
+            fileUploadText.textContent = file.name;
+
+            // Show upload successful message
+            uploadMessage.innerHTML = `
+                <span class="message-text">Upload Successful: ${file.name}</span>
+                <button class="close-btn" aria-label="Close message">×</button>
+            `;
+            uploadMessage.style.display = 'flex';
+            uploadMessage.classList.add('show');
+
+            // Add event listener to close button
+            const closeBtn = uploadMessage.querySelector('.close-btn');
+            closeBtn.addEventListener('click', () => {
+                uploadMessage.style.display = 'none';
+                uploadMessage.classList.remove('show');
+            });
+        } else {
+            fileUploadText.textContent = 'Choose Image';
+            uploadMessage.style.display = 'none';
+            uploadMessage.classList.remove('show');
+        }
+    });
+
+    // Handle form submission
+    form.addEventListener('submit', async (e) => {
+        e.preventDefault(); // Prevent default form submission
+
+        // Disable submit button and show loading state
+        submitBtn.disabled = true;
+        submitBtn.textContent = 'Processing...';
+        resultSection.style.display = 'none';
+        resultContent.innerHTML = '';
+
+        try {
+            const formData = new FormData(form);
+
+            const response = await fetch('/predict', {
+                method: 'POST',
+                body: formData
+            });
+
+            const data = await response.json();
+
+            // Display result
+            resultSection.style.display = 'block';
+            if (data.error) {
+                resultContent.innerHTML = `
+                    <div class="result-error">
+                        <p>${data.error}</p>
+                    </div>
+                `;
+            } else if (data.prediction === 'Low confidence') {
+                resultContent.innerHTML = `
+                    <div class="result-warning">
+                        <p><strong>Warning:</strong> ${data.message}</p>
+                        <p><strong>Confidence:</strong> ${data.confidence}</p>
+                    </div>
+                `;
+            } else {
+                resultContent.innerHTML = `
+                    <div class="result-success">
+                        <p><strong>Prediction:</strong> ${data.prediction}</p>
+                        <p><strong>Confidence:</strong> ${data.confidence}</p>
+                    </div>
+                `;
+            }
+        } catch (error) {
+            console.error('Error:', error);
+            resultSection.style.display = 'block';
+            resultContent.innerHTML = `
+                <div class="result-error">
+                    <p>An error occurred while processing your request. Please try again.</p>
+                </div>
+            `;
+        } finally {
+            // Re-enable submit button
+            submitBtn.disabled = false;
+            submitBtn.textContent = 'Submit Details';
+        }
+    });
+});

static/form-styles.css

@@ -0,0 +1,855 @@
+/* Global Styles */
+:root {
+    --primary-color: #7e54ff;
+    --secondary-color: #6c43ff;
+    --accent-color: #ff54b1;
+    --background-color: #0a0a14;
+    --dark-color: #050510;
+    --light-color: #151525;
+    --gray-color: #1a1a2a;
+    --text-color: #e0e0e0;
+    --border-color: #333333;
+    --success-color: #4caf50;
+    --error-color: #f44336;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.custom-cursor, .custom-cursor * {
+    cursor: none !important;
+}
+
+body:not(.custom-cursor) {
+    cursor: url('dna-cursor.svg'), auto;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: 'Roboto', sans-serif;
+    line-height: 1.6;
+    color: var(--text-color);
+    background-color: var(--background-color);
+    position: relative;
+}
+
+/* Custom Cursor Styles */
+body:not(.custom-cursor) a, 
+body:not(.custom-cursor) button, 
+body:not(.custom-cursor) input[type="submit"], 
+body:not(.custom-cursor) .submit-button, 
+body:not(.custom-cursor) input[type="checkbox"], 
+body:not(.custom-cursor) select, 
+body:not(.custom-cursor) .step-icon, 
+body:not(.custom-cursor) nav ul li a, 
+body:not(.custom-cursor) .footer-links ul li a {
+    cursor: url('dna-cursor-pointer.svg'), pointer;
+}
+
+/* Custom Cursor Effects */
+.cursor-glow {
+    position: fixed;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    pointer-events: none;
+    z-index: 9999;
+    opacity: 0.6;
+    background: radial-gradient(circle, rgba(55, 199, 255, 0.5) 0%, rgba(55, 199, 255, 0) 70%);
+    transform: translate(-50%, -50%);
+    transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
+}
+
+.cursor-follow {
+    position: fixed;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    pointer-events: none;
+    z-index: 9998;
+    opacity: 0.8;
+    border: 3px solid rgba(55, 199, 255, 0.9);
+    background-color: rgba(55, 199, 255, 0.2);
+    transform: translate(-50%, -50%);
+    transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
+}
+
+/* Preloader */
+.preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--dark-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+    transition: opacity 0.5s ease, visibility 0.5s ease;
+}
+
+.preloader.hidden {
+    opacity: 0;
+    visibility: hidden;
+}
+
+.dna-loader {
+    position: relative;
+    width: 100px;
+    height: 200px;
+}
+
+.dna-loader-strand {
+    position: absolute;
+    width: 2px;
+    height: 200px;
+    background-color: rgba(0, 80, 180, 0.3);
+    left: 30px;
+    transform: rotate(5deg);
+}
+
+.dna-loader-strand:nth-child(2) {
+    left: 70px;
+    transform: rotate(-5deg);
+}
+
+.dna-loader-rung {
+    position: absolute;
+    width: 40px;
+    height: 4px;
+    left: 30px;
+    background: linear-gradient(to right, #37c7ff, #ff8f30);
+    box-shadow: 0 0 10px rgba(55, 199, 255, 0.5);
+    transform-origin: center;
+    animation: dnaLoaderSpin 1.5s infinite ease-in-out;
+}
+
+.dna-loader-rung:nth-child(3) { top: 10%; animation-delay: -0.2s; }
+.dna-loader-rung:nth-child(4) { top: 20%; animation-delay: -0.4s; }
+.dna-loader-rung:nth-child(5) { top: 30%; animation-delay: -0.6s; }
+.dna-loader-rung:nth-child(6) { top: 40%; animation-delay: -0.8s; }
+.dna-loader-rung:nth-child(7) { top: 50%; animation-delay: -1.0s; }
+.dna-loader-rung:nth-child(8) { top: 60%; animation-delay: -1.2s; }
+.dna-loader-rung:nth-child(9) { top: 70%; animation-delay: -1.4s; }
+.dna-loader-rung:nth-child(10) { top: 80%; animation-delay: -1.6s; }
+.dna-loader-rung:nth-child(11) { top: 90%; animation-delay: -1.8s; }
+
+@keyframes dnaLoaderSpin {
+    0%, 100% {
+        transform: rotate(0deg) scaleX(1);
+    }
+    50% {
+        transform: rotate(180deg) scaleX(0.6);
+    }
+}
+
+.loader-text {
+    position: absolute;
+    bottom: -40px;
+    font-size: 1.2rem;
+    color: var(--text-color);
+    font-weight: 300;
+    letter-spacing: 2px;
+    animation: loaderTextPulse 1.5s infinite;
+}
+
+@keyframes loaderTextPulse {
+    0%, 100% {
+        opacity: 0.7;
+    }
+    50% {
+        opacity: 1;
+    }
+}
+
+.preloader-particles {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-image: 
+        radial-gradient(circle at 20% 30%, rgba(55, 199, 255, 0.4) 0%, transparent 10%),
+        radial-gradient(circle at 70% 60%, rgba(255, 143, 48, 0.4) 0%, transparent 10%),
+        radial-gradient(circle at 40% 80%, rgba(55, 199, 255, 0.4) 0%, transparent 10%),
+        radial-gradient(circle at 80% 40%, rgba(255, 143, 48, 0.4) 0%, transparent 10%);
+    opacity: 0.2;
+    filter: blur(2px);
+    animation: preloaderParticleFloat 5s ease-in-out infinite alternate;
+}
+
+@keyframes preloaderParticleFloat {
+    0% {
+        background-position: 0 0, 0 0, 0 0, 0 0;
+    }
+    100% {
+        background-position: 20px 20px, -20px 20px, 20px -20px, -20px -20px;
+    }
+}
+
+.container {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin-bottom: 20px;
+    line-height: 1.2;
+}
+
+p {
+    margin-bottom: 15px;
+}
+
+a {
+    text-decoration: none;
+    color: var(--primary-color);
+    transition: all 0.3s ease;
+}
+
+a:hover {
+    color: var(--secondary-color);
+}
+
+/* Header & Navigation */
+header {
+    background-color: var(--dark-color);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 1000;
+}
+
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.logo {
+    font-size: 1.8rem;
+    font-weight: 700;
+    color: var(--primary-color);
+    text-shadow: 0 0 8px rgba(126, 84, 255, 0.5);
+}
+
+.logo span {
+    color: var(--accent-color);
+    text-shadow: 0 0 8px rgba(255, 84, 177, 0.5);
+}
+
+nav ul {
+    display: flex;
+    list-style: none;
+}
+
+nav ul li {
+    margin-left: 30px;
+}
+
+nav ul li a {
+    color: var(--text-color);
+    font-weight: 500;
+    position: relative;
+}
+
+nav ul li a:after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 2px;
+    background: var(--primary-color);
+    left: 0;
+    bottom: -5px;
+    transition: width 0.3s ease;
+}
+
+nav ul li a:hover:after {
+    width: 100%;
+}
+
+/* Form Section */
+.form-section {
+    padding: 100px 0 60px;
+    background: linear-gradient(135deg, #050510 0%, #0c0c1a 100%);
+    position: relative;
+    overflow: hidden;
+}
+
+.form-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle at 30% 50%, rgba(0, 80, 180, 0.08) 0%, rgba(10, 10, 20, 0) 70%);
+    pointer-events: none;
+}
+
+.form-section .container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 40px;
+    position: relative;
+    z-index: 2;
+}
+
+.form-container {
+    flex: 2;
+    min-width: 300px;
+    background-color: var(--dark-color);
+    border-radius: 10px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(126, 84, 255, 0.1);
+    padding: 40px;
+    animation: fadeIn 0.8s ease;
+}
+
+.side-info {
+    flex: 1;
+    min-width: 300px;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+}
+
+.info-card {
+    background-color: var(--dark-color);
+    border-radius: 10px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(126, 84, 255, 0.1);
+    padding: 30px;
+    animation: fadeIn 1s ease;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.form-container h1 {
+    font-size: 2.2rem;
+    color: var(--primary-color);
+    margin-bottom: 20px;
+    text-align: center;
+    text-shadow: 0 0 10px rgba(126, 84, 255, 0.3);
+}
+
+.intro-text {
+    text-align: center;
+    color: #aaaaaa;
+    margin-bottom: 30px;
+    max-width: 700px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.form-wrapper {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+/* Form Elements */
+.form-group {
+    margin-bottom: 25px;
+}
+
+label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 500;
+    color: var(--text-color);
+}
+
+input[type="text"],
+input[type="email"],
+input[type="number"],
+input[type="file"],
+select {
+    width: 100%;
+    padding: 12px 15px;
+    border: 1px solid var(--border-color);
+    border-radius: 5px;
+    font-size: 1rem;
+    transition: all 0.3s ease;
+    background-color: rgba(42, 42, 42, 0.7);
+    color: var(--text-color);
+}
+
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="number"]:focus,
+input[type="file"]:focus,
+select:focus {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(126, 84, 255, 0.2);
+    outline: none;
+    background-color: rgba(42, 42, 42, 0.9);
+}
+
+select {
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 10px center;
+    background-size: 16px;
+}
+
+small.warning {
+    display: block;
+    color: var(--error-color);
+    margin-top: 8px;
+    font-size: 0.9rem;
+    font-weight: 500;
+    background: rgba(244, 67, 54, 0.1);
+    padding: 5px 10px;
+    border-radius: 3px;
+    border-left: 3px solid var(--error-color);
+}
+
+.form-row {
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+.form-group.half {
+    flex: 1;
+    min-width: 200px;
+}
+
+/* Consent Group */
+.consent-group {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+}
+
+.consent-group input[type="checkbox"] {
+    margin-top: 4px;
+    width: 18px;
+    height: 18px;
+    accent-color: var(--primary-color);
+}
+
+/* Submit Button */
+.form-actions {
+    text-align: center;
+    margin-top: 40px;
+}
+
+.submit-button {
+    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
+    color: #ffffff;
+    border: none;
+    padding: 15px 40px;
+    font-size: 1.1rem;
+    font-weight: 500;
+    border-radius: 50px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 0 20px rgba(126, 84, 255, 0.5);
+    position: relative;
+    overflow: hidden;
+}
+
+.submit-button::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+    transform: rotate(45deg);
+    transition: all 0.5s ease;
+    pointer-events: none;
+}
+
+.submit-button:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 0 30px rgba(126, 84, 255, 0.7);
+}
+
+.submit-button:hover::before {
+    left: 100%;
+}
+
+/* Upload Message */
+.upload-message {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 10px;
+    padding: 10px 15px;
+    background: rgba(76, 175, 80, 0.1);
+    border: 1px solid var(--success-color);
+    border-radius: 5px;
+    color: var(--success-color);
+    font-size: 0.9rem;
+    font-weight: 500;
+    animation: slideIn 0.3s ease;
+    position: relative;
+}
+
+.upload-message.show {
+    display: flex;
+}
+
+.upload-message .message-text {
+    flex-grow: 1;
+}
+
+.upload-message .close-btn {
+    background: none;
+    border: none;
+    color: var(--success-color);
+    font-size: 1rem;
+    cursor: pointer;
+    padding: 0 5px;
+    transition: color 0.3s ease;
+}
+
+.upload-message .close-btn:hover {
+    color: #ffffff;
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Side Info Styles */
+.info-card h2 {
+    color: var(--primary-color);
+    font-size: 1.5rem;
+    margin-bottom: 20px;
+    text-shadow: 0 0 10px rgba(126, 84, 255, 0.3);
+}
+
+.steps {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.step {
+    display: flex;
+    align-items: flex-start;
+    gap: 15px;
+}
+
+.step-icon {
+    width: 35px;
+    height: 35px;
+    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
+    color: #ffffff;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    flex-shrink: 0;
+    box-shadow: 0 0 15px rgba(126, 84, 255, 0.4);
+}
+
+.step-content h3 {
+    font-size: 1.1rem;
+    margin-bottom: 5px;
+    color: var(--primary-color);
+    text-shadow: 0 0 5px rgba(126, 84, 255, 0.3);
+}
+
+.step-content p {
+    color: #aaaaaa;
+    font-size: 0.95rem;
+}
+
+.contact-info {
+    margin-top: 20px;
+}
+
+.contact-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 15px;
+    color: #aaaaaa;
+}
+
+.contact-item svg {
+    color: var(--primary-color);
+    filter: drop-shadow(0 0 5px rgba(126, 84, 255, 0.5));
+}
+
+/* Footer */
+footer {
+    background-color: var(--dark-color);
+    color: var(--text-color);
+    padding: 60px 0 20px;
+    border-top: 1px solid rgba(126, 84, 255, 0.2);
+    position: relative;
+    overflow: hidden;
+}
+
+footer::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle at 20% 80%, rgba(126, 84, 255, 0.05) 0%, rgba(0, 0, 0, 0) 70%);
+    pointer-events: none;
+}
+
+.footer-content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin-bottom: 40px;
+    position: relative;
+    z-index: 2;
+}
+
+.footer-logo {
+    font-size: 1.8rem;
+    font-weight: 700;
+    color: var(--text-color);
+    margin-bottom: 20px;
+    text-shadow: 0 0 8px rgba(126, 84, 255, 0.5);
+}
+
+.footer-logo span {
+    color: var(--accent-color);
+    text-shadow: 0 0 8px rgba(255, 84, 177, 0.5);
+}
+
+.footer-links, .footer-contact {
+    margin-bottom: 20px;
+}
+
+.footer-links h3, .footer-contact h3 {
+    font-size: 1.3rem;
+    margin-bottom: 15px;
+    color: var(--primary-color);
+    text-shadow: 0 0 5px rgba(126, 84, 255, 0.3);
+}
+
+.footer-links ul {
+    list-style: none;
+}
+
+.footer-links ul li {
+    margin-bottom: 10px;
+}
+
+.footer-links ul li a {
+    color: rgba(224, 224, 224, 0.7);
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+.footer-links ul li a::before {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    width: 0;
+    height: 1px;
+    background-color: var(--primary-color);
+    transition: width 0.3s ease;
+}
+
+.footer-links ul li a:hover {
+    color: var(--primary-color);
+}
+
+.footer-links ul li a:hover::before {
+    width: 100%;
+}
+
+.footer-contact p {
+    color: rgba(224, 224, 224, 0.7);
+    margin-bottom: 10px;
+}
+
+.copyright {
+    text-align: center;
+    padding-top: 20px;
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    color: rgba(224, 224, 224, 0.4);
+    position: relative;
+    z-index: 2;
+}
+
+/* Responsive Styles */
+@media (max-width: 992px) {
+    .form-section .container {
+        flex-direction: column;
+    }
+    
+    .form-container, .side-info {
+        width: 100%;
+    }
+}
+
+@media (max-width: 768px) {
+    nav {
+        flex-direction: column;
+    }
+    
+    nav ul {
+        margin-top: 20px;
+    }
+    
+    nav ul li {
+        margin: 0 10px;
+    }
+    
+    .form-section {
+        padding-top: 150px;
+    }
+}
+
+@media (max-width: 576px) {
+    .form-container {
+        padding: 25px;
+    }
+    
+    .form-section {
+        padding: 120px 0 50px;
+    }
+    
+    .form-container h1 {
+        font-size: 1.8rem;
+    }
+}
+
+/* File Upload Styles */
+.file-upload-group {
+    position: relative;
+}
+
+.file-upload-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    background-color: rgba(42, 42, 42, 0.7);
+    border: 1px solid var(--border-color);
+    border-radius: 5px;
+    padding: 12px 15px;
+    transition: all 0.3s ease;
+}
+
+.file-upload-wrapper:hover,
+.file-upload-wrapper:focus-within {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(126, 84, 255, 0.2);
+    background-color: rgba(42, 42, 42, 0.9);
+}
+
+.file-upload-wrapper input[type="file"] {
+    opacity: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    cursor: pointer;
+}
+
+.file-upload-text {
+    flex-grow: 1;
+    color: var(--text-color);
+    font-size: 1rem;
+    font-weight: 400;
+}
+
+.file-upload-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    color: var(--primary-color);
+    filter: drop-shadow(0 0 5px rgba(126, 84, 255, 0.5));
+}
+
+.file-upload-icon svg {
+    width: 20px;
+    height: 20px;
+}
+
+/* Result Section Styles */
+.result-section {
+    background-color: rgba(42, 42, 42, 0.7);
+    border-radius: 10px;
+    padding: 20px;
+    border: 1px solid rgba(126, 84, 255, 0.1);
+    animation: slideIn 0.3s ease;
+}
+
+.result-section h2 {
+    color: var(--primary-color);
+    font-size: 1.5rem;
+    margin-bottom: 15px;
+    text-shadow: 0 0 10px rgba(126, 84, 255, 0.3);
+}
+
+.result-success, .result-warning, .result-error {
+    padding: 15px;
+    border-radius: 5px;
+    font-size: 1rem;
+    color: var(--text-color);
+}
+
+.result-success {
+    background: rgba(76, 175, 80, 0.1);
+    border: 1px solid var(--success-color);
+}
+
+.result-warning {
+    background: rgba(255, 193, 7, 0.1);
+    border: 1px solid #ffc107;
+    color: #ffc107;
+}
+
+.result-error {
+    background: rgba(244, 67, 54, 0.1);
+    border: 1px solid var(--error-color);
+    color: var(--error-color);
+}
+
+.result-success p, .result-warning p, .result-error p {
+    margin-bottom: 10px;
+}
+
+.result-success p strong, .result-warning p strong, .result-error p strong {
+    color: inherit;
+}

static/preloader.js

@@ -0,0 +1,24 @@
+// Preloader Script
+document.addEventListener('DOMContentLoaded', function() {
+    // Get preloader element
+    const preloader = document.querySelector('.preloader');
+    
+    // Function to hide preloader
+    function hidePreloader() {
+        preloader.classList.add('hidden');
+        
+        // Remove preloader from DOM after transition completes
+        setTimeout(() => {
+            preloader.style.display = 'none';
+        }, 500);
+    }
+    
+    // Hide preloader after all content is loaded
+    window.addEventListener('load', function() {
+        // Add a small delay for visual effect
+        setTimeout(hidePreloader, 1500);
+    });
+    
+    // Fallback - hide preloader after 5 seconds even if content isn't fully loaded
+    setTimeout(hidePreloader, 5000);
+});

templates/form.html

@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Skin-Lesion-Diagnosis</title>
+    <link rel="stylesheet" href="/static/form-styles.css">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <script src="/static/preloader.js"></script>
+    <script src="/static/cursor-effect.js"></script>
+    <script src="/static/form-handler.js" defer></script>
+    <link href="/static/logo.jpg" rel="shortcut icon">
+</head>
+<body>
+    <div class="preloader">
+        <div class="preloader-particles"></div>
+        <div class="dna-loader">
+            <div class="dna-loader-strand"></div>
+            <div class="dna-loader-strand"></div>
+            <div class="dna-loader-rung"></div>
+            <div class="dna-loader-rung"></div>
+            <div class="dna-loader-rung"></div>
+            <div class="dna-loader-rung"></div>
+            <div class="dna-loader-rung"></div>
+            <div class="dna-loader-rung"></div>
+            <div class="dna-loader-rung"></div>
+            <div class="dna-loader-rung"></div>
+            <div class="dna-loader-rung"></div>
+            <div class="loader-text">LOADING...</div>
+        </div>
+    </div>
+    <header>
+        <nav>
+            <div class="logo" style="color: beige;">SKIN <span style="color: #00ffff;">ALGNOSIS</span></div>
+            <ul>
+                <li><a href="/templates/form.html">Home</a></li>
+                <li><a href="/templates/about.html">About</a></li>
+                <li><a href="/templates/features.html">Features</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <section class="form-section">
+        <div class="container">
+            <div class="form-container">
+                <h1 style="color: white;">ENTER PATIENT DETAILS</h1>
+                <p class="intro-text">Fill out the form below for the diagnosis of your skin disease. Our AI will process your image and generate a predicted report for you.</p>
+                
+                <div class="form-wrapper">
+                    <form id="patient-form" action="/predict" method="POST" enctype="multipart/form-data">
+                        <div class="form-group">
+                            <label for="name">Full Name</label>
+                            <input type="text" id="name" name="name" placeholder="Enter your name" required>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label for="email">Email Address</label>
+                            <input type="email" id="email" name="email" placeholder="Enter your email address" required>
+                        </div>
+                        
+                        <div class="form-row">
+                            <div class="form-group half">
+                                <label for="gender">Gender</label>
+                                <select id="gender" name="gender" required>
+                                    <option value="" disabled selected>Select gender</option>
+                                    <option value="male">Male</option>
+                                    <option value="female">Female</option>
+                                    <option value="other">Other</option>
+                                </select>
+                            </div>
+                            
+                            <div class="form-group half">
+                                <label for="age">Age</label>
+                                <input type="number" id="age" name="age" placeholder="Enter your age" min="1" max="120" required>
+                            </div>
+                        </div>
+                        
+                        <div class="form-group file-upload-group">
+                            <label for="image">Upload Image</label>
+                            <div class="file-upload-wrapper">
+                                <input type="file" id="image" name="image" accept=".jpg,.jpeg,.png" required>
+                                <span class="file-upload-text">Choose Image</span>
+                                <span class="file-upload-icon">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
+                                </span>
+                            </div>
+                            <small class="warning">Warning: Please upload images in JPG, JPEG, or PNG format only. Maximum file size: 20MB.</small>
+                            <div class="upload-message" id="upload-message" style="display: none;"></div>
+                        </div>
+                        
+                        <div class="form-group consent-group">
+                            <input type="checkbox" id="consent" name="consent" required>
+                            <label for="consent">I agree to the <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a></label>
+                        </div>
+                        
+                        <div class="form-actions">
+                            <button type="submit" class="submit-button" id="submit-btn">Submit Details</button>
+                        </div>
+                    </form>
+
+                    <!-- Result Display Section -->
+                    <div class="result-section" id="result-section" style="display: none; margin-top: 30px;">
+                        <h2>Diagnosis Result</h2>
+                        <div id="result-content"></div>
+                    </div>
+
+                    <!-- Training History Plot -->
+                    {% if history_plot %}
+                    <div class="history-plot" style="margin-top: 30px; text-align: center;">
+                        <h2>Model Training History</h2>
+                        <img src="{{ history_plot }}" alt="Training History Plot" style="max-width: 100%; border-radius: 10px;">
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+            
+            <div class="side-info">
+                <div class="info-card">
+                    <h2>How It Works</h2>
+                    <div class="steps">
+                        <div class="step">
+                            <div class="step-icon">1</div>
+                            <div class="step-content">
+                                <h3>Submit Your Data</h3>
+                                <p>Fill out the form with your details and image.</p>
+                            </div>
+                        </div>
+                        
+                        <div class="step">
+                            <div class="step-icon">2</div>
+                            <div class="step-content">
+                                <h3>AI Processing</h3>
+                                <p>Our AI model analyzes your image.</p>
+                            </div>
+                        </div>
+                        
+                        <div class="step">
+                            <div class="step-icon">3</div>
+                            <div class="step-content">
+                                <h3>Receive Your Report</h3>
+                                <p>Get your diagnosis report on the website.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="info-card">
+                    <h2>Need Help?</h2>
+                    <p>If you have any questions or need assistance, our support team is here to help.</p>
+                    <div class="contact-info">
+                        <div class="contact-item">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                            <span>info.skinalgnosiss@gmail.com</span>
+                        </div>
+                        <div class="contact-item">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
+                            <span>7817833974</span>
+                            <span>7983595318</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <footer>
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-logo">CODE<span>CATALYST</span></div>
+                <div class="footer-links">
+                    <h3>Quick Links</h3>
+                    <ul>
+                        <li><a href="/templates/form.html">Home</a></li>
+                        <li><a href="/templates/about.html">About</a></li>
+                        <li><a href="/templates/features.html">Features</a></li>
+                    </ul>
+                </div>
+                <div class="footer-contact">
+                    <h3>Support</h3>
+                    <p>Email: info.skinalgnosiss@gmail.com</p>
+                    <p>Phone: 7817833974</p>
+                    <p>7983595318</p>
+                </div>
+            </div>
+            <div class="copyright">
+                <p>© 2025 Skin Lesion Diagnosis. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+</body>
+</html>

training_history.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3af786ad065dd1a86367d84228fe92649f4b7bf0bb215548f43b4cb5ee171ac4
+size 976