Upload 22 files

.gitattributes

@@ -33,3 +33,5 @@ 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
+models/efficientnetb0_skin_cancer_model_final_69.keras filter=lfs diff=lfs merge=lfs -text
+static/images/logo.svg filter=lfs diff=lfs merge=lfs -text

app.py

@@ -0,0 +1,364 @@
+from flask import Flask, render_template, request, jsonify, redirect, url_for
+import os
+import numpy as np
+from PIL import Image
+import tensorflow as tf
+from tensorflow.keras.applications.mobilenet_v2 import MobileNetV2, preprocess_input as mobilenet_preprocess
+from tensorflow.keras.applications.efficientnet import EfficientNetB0, preprocess_input as efficientnet_preprocess
+from tensorflow.keras.preprocessing import image
+import io
+
+app = Flask(__name__)
+
+# Load models
+models = {
+    'MobileNetV2': None,
+    'EfficientNetB0': None
+}
+
+# Class labels for HAM10000 dataset
+class_labels = {
+    'akiec': 'Actinic Keratosis',
+    'bcc': 'Basal Cell Carcinoma',
+    'bkl': 'Benign Keratosis',
+    'df': 'Dermatofibroma',
+    'mel': 'Melanoma',
+    'nv': 'Melanocytic Nevus',
+    'vasc': 'Vascular Lesion'
+}
+
+# Class descriptions
+class_descriptions = {
+    'akiec': {
+        'name': 'Actinic Keratosis',
+        'description': 'A precancerous growth caused by sun damage that may develop into skin cancer if left untreated.'
+    },
+    'bcc': {
+        'name': 'Basal Cell Carcinoma',
+        'description': 'The most common type of skin cancer, usually appearing as a shiny bump or pink patch on sun-exposed areas.'
+    },
+    'bkl': {
+        'name': 'Benign Keratosis',
+        'description': 'A non-cancerous growth that appears as a waxy, scaly, slightly raised growth on the skin.'
+    },
+    'df': {
+        'name': 'Dermatofibroma',
+        'description': 'A common benign skin growth that often appears as a small, firm bump on the skin.'
+    },
+    'mel': {
+        'name': 'Melanoma',
+        'description': 'The most serious form of skin cancer that develops in the cells that produce melanin.'
+    },
+    'nv': {
+        'name': 'Melanocytic Nevus',
+        'description': 'A common mole that appears as a small, dark brown spot caused by clusters of pigmented cells.'
+    },
+    'vasc': {
+        'name': 'Vascular Lesion',
+        'description': 'An abnormality of blood vessels that can appear as red or purple marks on the skin.'
+    }
+}
+
+def load_model(model_name):
+    """Load the specified model"""
+    global models
+
+    if model_name not in models:
+        # Initialize models dictionary if needed
+        initialize_models()
+
+    if models[model_name] is None:
+        if model_name == 'MobileNetV2':
+            try:
+                # Load the entire model instead of just weights
+                model_path = 'models/mobilenetv2_ham10000_finetuned_74.h5'
+                app.logger.info(f"Loading MobileNetV2 model from {model_path}")
+
+                # Check if file exists
+                if not os.path.exists(model_path):
+                    app.logger.error(f"Model file not found: {model_path}")
+                    raise FileNotFoundError(f"Model file not found: {model_path}")
+
+                # Load the model with custom objects if needed
+                models[model_name] = tf.keras.models.load_model(model_path, compile=False)
+
+                # Compile the model
+                models[model_name].compile(
+                    optimizer=tf.keras.optimizers.Adam(learning_rate=0.0001),
+                    loss='categorical_crossentropy',
+                    metrics=['accuracy']
+                )
+
+                app.logger.info("MobileNetV2 model loaded and compiled successfully")
+
+            except Exception as e:
+                app.logger.error(f"Error loading MobileNetV2 model: {str(e)}")
+                # Try an alternative approach - load model with custom_objects
+                try:
+                    app.logger.info("Attempting to load model with custom_objects...")
+                    models[model_name] = tf.keras.models.load_model(
+                        'models/mobilenetv2_ham10000_finetuned_74.h5',
+                        custom_objects={
+                            'Adam': tf.keras.optimizers.Adam,
+                            'categorical_crossentropy': tf.keras.losses.categorical_crossentropy
+                        },
+                        compile=False
+                    )
+
+                    # Compile the model
+                    models[model_name].compile(
+                        optimizer=tf.keras.optimizers.Adam(learning_rate=0.0001),
+                        loss='categorical_crossentropy',
+                        metrics=['accuracy']
+                    )
+
+                    app.logger.info("MobileNetV2 model loaded with custom_objects successfully")
+                except Exception as e2:
+                    app.logger.error(f"Second attempt failed: {str(e2)}")
+                    raise RuntimeError(f"Failed to load MobileNetV2 model: {str(e)} and {str(e2)}")
+
+        elif model_name == 'EfficientNetB0':
+            try:
+                # Load the entire model instead of just weights
+                model_path = 'models/efficientnetb0_skin_cancer_model_final_69.keras'
+                app.logger.info(f"Loading EfficientNetB0 model from {model_path}")
+
+                # Check if file exists
+                if not os.path.exists(model_path):
+                    app.logger.error(f"Model file not found: {model_path}")
+                    raise FileNotFoundError(f"Model file not found: {model_path}")
+
+                # Load the model with custom objects if needed
+                models[model_name] = tf.keras.models.load_model(model_path, compile=False)
+
+                # Compile the model
+                models[model_name].compile(
+                    optimizer=tf.keras.optimizers.Adam(learning_rate=0.0001),
+                    loss='categorical_crossentropy',
+                    metrics=['accuracy']
+                )
+
+                app.logger.info("EfficientNetB0 model loaded and compiled successfully")
+
+            except Exception as e:
+                app.logger.error(f"Error loading EfficientNetB0 model: {str(e)}")
+                # Try an alternative approach - load model with custom_objects
+                try:
+                    app.logger.info("Attempting to load model with custom_objects...")
+                    models[model_name] = tf.keras.models.load_model(
+                        model_path,
+                        custom_objects={
+                            'Adam': tf.keras.optimizers.Adam,
+                            'categorical_crossentropy': tf.keras.losses.categorical_crossentropy
+                        },
+                        compile=False
+                    )
+
+                    # Compile the model
+                    models[model_name].compile(
+                        optimizer=tf.keras.optimizers.Adam(learning_rate=0.0001),
+                        loss='categorical_crossentropy',
+                        metrics=['accuracy']
+                    )
+
+                    app.logger.info("EfficientNetB0 model loaded with custom_objects successfully")
+                except Exception as e2:
+                    app.logger.error(f"Second attempt failed: {str(e2)}")
+                    raise RuntimeError(f"Failed to load EfficientNetB0 model: {str(e)} and {str(e2)}")
+        else:
+            app.logger.error(f"Unknown model name: {model_name}")
+            raise ValueError(f"Unknown model name: {model_name}")
+
+    return models[model_name]
+
+def preprocess_image(img, model_name):
+    """Preprocess the image for the specified model"""
+    img = img.resize((224, 224))
+    img_array = image.img_to_array(img)
+    img_array = np.expand_dims(img_array, axis=0)
+
+    if model_name == 'MobileNetV2':
+        return mobilenet_preprocess(img_array)
+    elif model_name == 'EfficientNetB0':
+        return efficientnet_preprocess(img_array)
+
+def predict_image(img, model_name):
+    """Make a prediction on an image using the specified model"""
+    app.logger.info(f"Preparing image for prediction with {model_name}")
+
+    # Resize the image to the required input size
+    img = img.resize((224, 224))
+
+    # Convert to numpy array and preprocess
+    img_array = np.array(img)
+    img_array = img_array / 255.0  # Normalize to [0,1]
+    img_array = np.expand_dims(img_array, axis=0)  # Add batch dimension
+
+    # Load the model if not already loaded
+    model = load_model(model_name)
+
+    # Make prediction
+    app.logger.info("Running prediction...")
+    preds = model.predict(img_array)
+    app.logger.info(f"Raw prediction values: {preds}")
+
+    # Check for NaN values
+    if np.isnan(preds).any():
+        app.logger.warning("NaN values detected in predictions. Replacing with zeros.")
+        preds = np.nan_to_num(preds, nan=0.0)
+
+    # Define class names for HAM10000 dataset
+    class_names = ['akiec', 'bcc', 'bkl', 'df', 'mel', 'nv', 'vasc']
+    full_names = {
+        'akiec': 'Actinic Keratosis',
+        'bcc': 'Basal Cell Carcinoma',
+        'bkl': 'Benign Keratosis',
+        'df': 'Dermatofibroma',
+        'mel': 'Melanoma',
+        'nv': 'Melanocytic Nevus',
+        'vasc': 'Vascular Lesion'
+    }
+
+    # Format predictions
+    predictions = []
+    for i, class_name in enumerate(class_names):
+        confidence = float(preds[0][i])
+        # Ensure confidence is a valid number
+        if np.isnan(confidence) or np.isinf(confidence):
+            confidence = 0.0
+
+        predictions.append({
+            'class': class_name,
+            'name': full_names[class_name],
+            'confidence': confidence
+        })
+
+    # Sort by confidence (highest first)
+    predictions = sorted(predictions, key=lambda x: x['confidence'], reverse=True)
+
+    app.logger.info(f"Prediction completed: {predictions}")
+    return predictions
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/detect')
+def detect():
+    return render_template('detect.html',
+                          class_descriptions=class_descriptions,
+                          condition_info=class_descriptions)
+
+@app.route('/about')
+def about():
+    return render_template('about.html')
+
+@app.route('/faq')
+def faq():
+    return render_template('faq.html')
+
+@app.route('/contact')
+def contact():
+    return render_template('contact.html')
+
+@app.route('/predict', methods=['POST'])
+def predict():
+    # Debug information
+    app.logger.info(f"Request received: {request.method} {request.path}")
+    app.logger.info(f"Request form data: {request.form}")
+    app.logger.info(f"Request files: {request.files}")
+
+    if 'file' not in request.files:
+        app.logger.error("No file part in the request")
+        return jsonify({'error': 'No file part in the request'}), 400
+
+    file = request.files['file']
+    app.logger.info(f"File received: {file.filename}, content type: {file.content_type}")
+
+    if file.filename == '':
+        app.logger.error("No selected file (empty filename)")
+        return jsonify({'error': 'No selected file'}), 400
+
+    # Get the model name from the request and handle aliases
+    model_name = request.form.get('model', 'MobileNetV2')
+    app.logger.info(f"Using model: {model_name}")
+
+    # Handle model name aliases
+    if model_name.lower() in ['mobilenet', 'mobilenetv2', 'mobile']:
+        model_name = 'MobileNetV2'
+    elif model_name.lower() in ['efficientnet', 'efficientnetb0', 'efficient']:
+        model_name = 'EfficientNetB0'
+
+    # Check if the model is supported
+    if model_name not in models:
+        app.logger.error(f"Unsupported model: {model_name}")
+        return jsonify({'error': f'Unsupported model: {model_name}. Supported models are: {", ".join(models.keys())}'}), 400
+
+    try:
+        # Check if model files exist
+        if model_name == 'MobileNetV2' and not os.path.exists('models/mobilenetv2_ham10000_finetuned_74.h5'):
+            app.logger.error("MobileNetV2 model file not found")
+            return jsonify({'error': 'Model file not found. Please ensure the model is properly installed.'}), 500
+
+        if model_name == 'EfficientNetB0' and not os.path.exists('models/efficientnetb0_skin_cancer_model_final_69.keras'):
+            app.logger.error("EfficientNetB0 model file not found")
+            return jsonify({'error': 'Model file not found. Please ensure the model is properly installed.'}), 500
+
+        # Read and process the image
+        img_bytes = file.read()
+        if not img_bytes:
+            app.logger.error("Empty file content")
+            return jsonify({'error': 'Empty file content'}), 400
+
+        app.logger.info(f"Image bytes length: {len(img_bytes)}")
+
+        try:
+            img = Image.open(io.BytesIO(img_bytes)).convert('RGB')
+            app.logger.info(f"Image opened successfully: {img.size}")
+        except Exception as img_error:
+            app.logger.error(f"Failed to open image: {str(img_error)}")
+            return jsonify({'error': f'Failed to open image: {str(img_error)}'}), 400
+
+        # Make prediction
+        app.logger.info("Starting prediction...")
+        predictions = predict_image(img, model_name)
+        app.logger.info(f"Prediction completed: {predictions}")
+
+        return jsonify({
+            'predictions': predictions
+        })
+
+    except Exception as e:
+        import traceback
+        app.logger.error(f"Prediction error: {str(e)}")
+        app.logger.error(traceback.format_exc())
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/privacy')
+def privacy():
+    return render_template('privacy.html')
+
+@app.route('/terms')
+def terms():
+    return render_template('terms.html')
+
+@app.errorhandler(404)
+def page_not_found(e):
+    return render_template('404.html'), 404
+
+@app.errorhandler(500)
+def server_error(e):
+    return render_template('500.html'), 500
+
+if __name__ == '__main__':
+    # Create models directory if it doesn't exist
+    os.makedirs('models', exist_ok=True)
+
+    # Check if model files exist, otherwise print a warning
+    if not os.path.exists('models/mobilenetv2_ham10000_finetuned_74.h5'):
+        print("Warning: MobileNetV2 model file not found. Please download or train the model.")
+
+    if not os.path.exists('models/efficientnetb0_skin_cancer_model_final_69.keras'):
+        print("Warning: EfficientNetB0 model file not found. Please download or train the model.")
+
+    app.run(debug=True)

models/efficientnetb0_skin_cancer_model_final_69.keras

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

models/mobilenetv2_ham10000_finetuned_74.h5

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

requirements.txt

@@ -0,0 +1,43 @@
+absl-py==2.1.0
+astunparse==1.6.3
+blinker==1.9.0
+certifi==2025.1.31
+charset-normalizer==3.4.1
+click==8.1.8
+Flask==3.1.0
+flatbuffers==25.2.10
+gast==0.6.0
+google-pasta==0.2.0
+grpcio==1.71.0
+h5py==3.13.0
+idna==3.10
+itsdangerous==2.2.0
+Jinja2==3.1.6
+keras==3.9.0
+libclang==18.1.1
+Markdown==3.7
+markdown-it-py==3.0.0
+MarkupSafe==3.0.2
+mdurl==0.1.2
+ml_dtypes==0.5.1
+namex==0.0.8
+numpy==2.1.3
+opt_einsum==3.4.0
+optree==0.14.1
+packaging==24.2
+pillow==11.1.0
+protobuf==5.29.3
+Pygments==2.19.1
+requests==2.32.3
+rich==13.9.4
+setuptools==76.0.0
+six==1.17.0
+tensorboard==2.19.0
+tensorboard-data-server==0.7.2
+tensorflow==2.19.0
+termcolor==2.5.0
+typing_extensions==4.12.2
+urllib3==2.3.0
+Werkzeug==3.1.3
+wheel==0.45.1
+wrapt==1.17.2

static/css/detect.css

@@ -0,0 +1,620 @@
+/* Detection Page Specific Styles */
+.detect-header {
+    background-color: var(--primary-color);
+    color: white;
+    padding: var(--spacing-xl) 0;
+    text-align: center;
+}
+
+.detect-header h1 {
+    color: white;
+    margin-bottom: var(--spacing-sm);
+}
+
+.detection-tool {
+    padding: var(--spacing-xl) 0;
+    background-color: var(--background-color);
+}
+
+.tool-container {
+    display: flex;
+    gap: var(--spacing-xl);
+    margin-bottom: var(--spacing-xl);
+}
+
+.tool-sidebar {
+    flex: 0 0 300px;
+}
+
+.tool-main {
+    flex: 1;
+    background-color: white;
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-xl);
+    box-shadow: var(--shadow-md);
+}
+
+.info-box {
+    background-color: #e3f2fd;
+    border-radius: var(--radius-md);
+    padding: var(--spacing-lg);
+    margin-bottom: var(--spacing-lg);
+}
+
+.info-box h3 {
+    display: flex;
+    align-items: center;
+    color: var(--primary-color);
+    font-size: var(--font-size-lg);
+    margin-bottom: var(--spacing-md);
+}
+
+.info-box h3 i {
+    margin-right: var(--spacing-sm);
+}
+
+.info-box ul {
+    list-style-type: disc;
+    padding-left: var(--spacing-lg);
+}
+
+.info-box ul li {
+    margin-bottom: var(--spacing-sm);
+}
+
+.model-info {
+    background-color: white;
+    border-radius: var(--radius-md);
+    padding: var(--spacing-lg);
+    box-shadow: var(--shadow-sm);
+}
+
+.model-info h3 {
+    font-size: var(--font-size-lg);
+    margin-bottom: var(--spacing-md);
+}
+
+.model-info-item {
+    margin-bottom: var(--spacing-md);
+}
+
+.model-info-item h4 {
+    font-size: var(--font-size-md);
+    color: var(--primary-color);
+    margin-bottom: var(--spacing-xs);
+}
+
+.model-info-item p {
+    font-size: var(--font-size-sm);
+    margin-bottom: 0;
+}
+
+.form-group {
+    margin-bottom: var(--spacing-lg);
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: var(--spacing-sm);
+    font-weight: var(--font-weight-medium);
+}
+
+.model-select {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    font-family: var(--font-family);
+    font-size: var(--font-size-md);
+    background-color: white;
+    transition: border-color var(--transition-fast);
+}
+
+.model-select:focus {
+    outline: none;
+    border-color: var(--primary-color);
+}
+
+.upload-container {
+    margin-bottom: var(--spacing-lg);
+}
+
+.upload-box {
+    border: 2px dashed var(--border-color);
+    border-radius: var(--radius-md);
+    padding: var(--spacing-xl);
+    text-align: center;
+    cursor: pointer;
+    transition: border-color var(--transition-fast);
+    position: relative;
+    min-height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.upload-box:hover {
+    border-color: var(--primary-color);
+}
+
+.upload-prompt {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.upload-icon {
+    font-size: 3rem;
+    color: var(--primary-color);
+    margin-bottom: var(--spacing-md);
+}
+
+.browse-text {
+    color: var(--primary-color);
+    font-weight: var(--font-weight-medium);
+}
+
+.file-types {
+    font-size: var(--font-size-sm);
+    color: var(--text-tertiary);
+    margin-top: var(--spacing-sm);
+}
+
+.preview-container {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-md);
+}
+
+.preview-container img {
+    max-height: 200px;
+    max-width: 100%;
+    border-radius: var(--radius-sm);
+}
+
+.remove-image {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    border: none;
+    width: 30px;
+    height: 30px;
+    border-radius: var(--radius-round);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background-color var(--transition-fast);
+}
+
+.remove-image:hover {
+    background-color: var(--danger-color);
+}
+
+.analyze-button {
+    width: 100%;
+    padding: 1rem;
+    font-size: var(--font-size-lg);
+}
+
+.analyze-button:disabled {
+    background-color: var(--text-tertiary);
+    border-color: var(--text-tertiary);
+    cursor: not-allowed;
+}
+
+.loading {
+    display: none;
+    text-align: center;
+    margin: var(--spacing-xl) 0;
+}
+
+.spinner {
+    margin: 0 auto;
+    width: 70px;
+    text-align: center;
+}
+
+.spinner > div {
+    width: 18px;
+    height: 18px;
+    background-color: var(--primary-color);
+    border-radius: 100%;
+    display: inline-block;
+    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+
+.spinner .bounce1 {
+    animation-delay: -0.32s;
+}
+
+.spinner .bounce2 {
+    animation-delay: -0.16s;
+}
+
+@keyframes sk-bouncedelay {
+    0%, 80%, 100% {
+        transform: scale(0);
+    } 40% {
+        transform: scale(1.0);
+    }
+}
+
+.error-message {
+    display: flex;
+    align-items: center;
+    background-color: #ffebee;
+    border-radius: var(--radius-md);
+    padding: var(--spacing-lg);
+    margin: var(--spacing-lg) 0;
+}
+
+.error-icon {
+    font-size: 2rem;
+    color: var(--danger-color);
+    margin-right: var(--spacing-lg);
+}
+
+.error-content h3 {
+    color: var(--danger-color);
+    margin-bottom: var(--spacing-xs);
+}
+
+.result-card {
+    margin-top: var(--spacing-xl);
+    background-color: white;
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-md);
+    overflow: hidden;
+}
+
+.result-header {
+    background-color: var(--primary-color);
+    color: white;
+    padding: var(--spacing-lg);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.result-header h2 {
+    color: white;
+    margin-bottom: 0;
+    display: flex;
+    align-items: center;
+}
+
+.result-header h2 i {
+    margin-right: var(--spacing-sm);
+}
+
+.model-badge {
+    background-color: rgba(255, 255, 255, 0.2);
+    padding: 0.25rem 0.75rem;
+    border-radius: var(--radius-md);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+}
+
+.result-summary {
+    display: flex;
+    padding: var(--spacing-lg);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.result-image-container {
+    flex: 0 0 40%;
+    margin-right: var(--spacing-lg);
+}
+
+.result-image-container img {
+    width: 100%;
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-sm);
+}
+
+.result-details {
+    flex: 1;
+}
+
+.prediction-box {
+    background-color: #f5f5f5;
+    border-radius: var(--radius-md);
+    padding: var(--spacing-lg);
+    margin-bottom: var(--spacing-lg);
+}
+
+.prediction-box h3 {
+    font-size: var(--font-size-md);
+    color: var(--text-secondary);
+    margin-bottom: var(--spacing-sm);
+}
+
+.prediction-name {
+    font-size: var(--font-size-xl);
+    font-weight: var(--font-weight-bold);
+    margin-bottom: var(--spacing-sm);
+    color: var(--primary-color);
+}
+
+.prediction-description {
+    margin-bottom: var(--spacing-md);
+    font-size: var(--font-size-md);
+}
+
+.confidence-meter {
+    display: flex;
+    align-items: center;
+    margin-top: var(--spacing-md);
+}
+
+.confidence-label {
+    margin-right: var(--spacing-sm);
+    font-weight: var(--font-weight-medium);
+    font-size: var(--font-size-sm);
+}
+
+.confidence-bar {
+    flex: 1;
+    height: 10px;
+    background-color: #e0e0e0;
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    margin-right: var(--spacing-sm);
+}
+
+.confidence-fill {
+    height: 100%;
+    background-color: var(--primary-color);
+    width: 0%;
+    transition: width var(--transition-normal);
+}
+
+.confidence-value {
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-sm);
+}
+
+.severity-indicator {
+    background-color: #f5f5f5;
+    border-radius: var(--radius-md);
+    padding: var(--spacing-lg);
+}
+
+.severity-indicator h3 {
+    font-size: var(--font-size-md);
+    margin-bottom: var(--spacing-sm);
+}
+
+.severity-level {
+    display: flex;
+    align-items: center;
+}
+
+.severity-level i {
+    margin-right: var(--spacing-sm);
+}
+
+.severity-text {
+    font-weight: var(--font-weight-medium);
+}
+
+.severity-low {
+    color: var(--success-color);
+}
+
+.severity-moderate {
+    color: var(--warning-color);
+}
+
+.severity-high, .severity-very-high {
+    color: var(--danger-color);
+}
+
+.result-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.tab-button {
+    padding: var(--spacing-md) var(--spacing-lg);
+    background: none;
+    border: none;
+    border-bottom: 3px solid transparent;
+    cursor: pointer;
+    font-weight: var(--font-weight-medium);
+    transition: all var(--transition-fast);
+}
+
+.tab-button:hover {
+    background-color: rgba(0, 0, 0, 0.02);
+}
+
+.tab-button.active {
+    color: var(--primary-color);
+    border-bottom-color: var(--primary-color);
+}
+
+.tab-content {
+    padding: var(--spacing-lg);
+}
+
+.tab-pane {
+    display: none;
+}
+
+.tab-pane.active {
+    display: block;
+}
+
+.tab-pane h3 {
+    margin-bottom: var(--spacing-md);
+    font-size: var(--font-size-lg);
+}
+
+.probabilities-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: var(--spacing-md);
+}
+
+.probability-item {
+    background-color: #f5f5f5;
+    border-radius: var(--radius-md);
+    padding: var(--spacing-md);
+    display: flex;
+    flex-direction: column;
+}
+
+.probability-class {
+    font-weight: var(--font-weight-medium);
+    margin-bottom: var(--spacing-xs);
+}
+
+.probability-bar {
+    height: 8px;
+    background-color: #e0e0e0;
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    margin: var(--spacing-xs) 0;
+}
+
+.probability-fill {
+    height: 100%;
+    background-color: var(--primary-color);
+}
+
+.probability-value {
+    font-size: var(--font-size-sm);
+    color: var(--text-secondary);
+    align-self: flex-end;
+}
+
+.info-resources ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.info-resources ul li {
+    margin-bottom: var(--spacing-sm);
+}
+
+.info-resources ul li a {
+    display: flex;
+    align-items: center;
+    padding: var(--spacing-sm);
+    background-color: #f5f5f5;
+    border-radius: var(--radius-md);
+    transition: background-color var(--transition-fast);
+}
+
+.info-resources ul li a:hover {
+    background-color: #e0e0e0;
+}
+
+.info-resources ul li a i {
+    margin-right: var(--spacing-sm);
+    color: var(--primary-color);
+}
+
+.next-steps-content {
+    margin-bottom: var(--spacing-lg);
+}
+
+.next-step {
+    display: flex;
+    margin-bottom: var(--spacing-md);
+    padding: var(--spacing-md);
+    background-color: #f5f5f5;
+    border-radius: var(--radius-md);
+}
+
+.step-icon {
+    flex: 0 0 50px;
+    height: 50px;
+    background-color: var(--primary-light);
+    color: white;
+    border-radius: var(--radius-round);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.25rem;
+    margin-right: var(--spacing-md);
+}
+
+.step-content {
+    flex: 1;
+}
+
+.step-content h4 {
+    margin-bottom: var(--spacing-xs);
+}
+
+.step-content p {
+    margin-bottom: 0;
+    font-size: var(--font-size-sm);
+}
+
+.disclaimer-box {
+    background-color: #fff8e1;
+    border-left: 4px solid var(--warning-color);
+    padding: var(--spacing-md);
+    border-radius: var(--radius-md);
+}
+
+.disclaimer-box p {
+    margin-bottom: 0;
+    font-size: var(--font-size-sm);
+}
+
+.result-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--spacing-md);
+    padding: var(--spacing-lg);
+    border-top: 1px solid var(--border-color);
+}
+
+@media (max-width: 992px) {
+    .tool-container {
+        flex-direction: column;
+    }
+
+    .tool-sidebar {
+        flex: 0 0 auto;
+        width: 100%;
+    }
+}
+
+@media (max-width: 768px) {
+    .result-summary {
+        flex-direction: column;
+    }
+
+    .result-image-container {
+        flex: 0 0 auto;
+        margin-right: 0;
+        margin-bottom: var(--spacing-lg);
+    }
+
+    .result-tabs {
+        overflow-x: auto;
+        white-space: nowrap;
+    }
+
+    .tab-button {
+        padding: var(--spacing-md) var(--spacing-sm);
+    }
+
+    .probabilities-grid {
+        grid-template-columns: 1fr;
+    }
+}

static/css/styles.css

@@ -0,0 +1,1556 @@
+:root {
+    --primary-color: #2A5C82;
+    --primary-light: #3a7cb2;
+    --primary-dark: #1d4060;
+    --secondary-color: #5BA4E6;
+    --secondary-light: #7bbcf7;
+    --secondary-dark: #4183c4;
+    --accent-color: #FF6B6B;
+    --success-color: #4CAF50;
+    --warning-color: #FFC107;
+    --danger-color: #F44336;
+    --info-color: #2196F3;
+    --background-color: #f8f9fa;
+    --surface-color: #ffffff;
+    --text-primary: #333333;
+    --text-secondary: #666666;
+    --text-tertiary: #999999;
+    --border-color: #e0e0e0;
+    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 16px;
+    --radius-xl: 24px;
+    --radius-round: 50%;
+    --spacing-xs: 0.25rem;
+    --spacing-sm: 0.5rem;
+    --spacing-md: 1rem;
+    --spacing-lg: 1.5rem;
+    --spacing-xl: 2rem;
+    --spacing-xxl: 3rem;
+    --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    --font-size-xs: 0.75rem;
+    --font-size-sm: 0.875rem;
+    --font-size-md: 1rem;
+    --font-size-lg: 1.125rem;
+    --font-size-xl: 1.25rem;
+    --font-size-xxl: 1.5rem;
+    --font-size-display: 2rem;
+    --font-size-jumbo: 2.5rem;
+    --font-weight-light: 300;
+    --font-weight-regular: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --line-height-tight: 1.2;
+    --line-height-normal: 1.5;
+    --line-height-loose: 1.8;
+    --transition-fast: 0.2s ease;
+    --transition-normal: 0.3s ease;
+    --transition-slow: 0.5s ease;
+    --container-max-width: 1200px;
+    --container-padding: 1rem;
+}
+
+/* Reset & Base Styles */
+*, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    font-size: 16px;
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: var(--font-family);
+    font-size: var(--font-size-md);
+    line-height: var(--line-height-normal);
+    color: var(--text-primary);
+    background-color: var(--background-color);
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+a {
+    color: var(--primary-color);
+    text-decoration: none;
+    transition: color var(--transition-fast);
+}
+
+a:hover {
+    color: var(--primary-light);
+}
+
+ul, ol {
+    list-style-position: inside;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+    margin-bottom: var(--spacing-md);
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--line-height-tight);
+    color: var(--text-primary);
+}
+
+h1 {
+    font-size: var(--font-size-jumbo);
+}
+
+h2 {
+    font-size: var(--font-size-display);
+}
+
+h3 {
+    font-size: var(--font-size-xxl);
+}
+
+h4 {
+    font-size: var(--font-size-xl);
+}
+
+h5 {
+    font-size: var(--font-size-lg);
+}
+
+h6 {
+    font-size: var(--font-size-md);
+}
+
+p {
+    margin-bottom: var(--spacing-md);
+}
+
+.text-center {
+    text-align: center;
+}
+
+.text-right {
+    text-align: right;
+}
+
+.text-primary {
+    color: var(--primary-color);
+}
+
+.text-secondary {
+    color: var(--secondary-color);
+}
+
+.text-accent {
+    color: var(--accent-color);
+}
+
+.text-success {
+    color: var(--success-color);
+}
+
+.text-warning {
+    color: var(--warning-color);
+}
+
+.text-danger {
+    color: var(--danger-color);
+}
+
+.text-info {
+    color: var(--info-color);
+}
+
+/* Layout */
+.container {
+    width: 100%;
+    max-width: var(--container-max-width);
+    margin: 0 auto;
+    padding: 0 var(--container-padding);
+}
+
+.section-title {
+    text-align: center;
+    margin-bottom: var(--spacing-xl);
+    position: relative;
+    padding-bottom: var(--spacing-md);
+}
+
+.section-title::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 60px;
+    height: 3px;
+    background-color: var(--primary-color);
+}
+
+/* Buttons */
+.btn {
+    display: inline-block;
+    font-weight: var(--font-weight-medium);
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    user-select: none;
+    border: 1px solid transparent;
+    padding: 0.75rem 1.5rem;
+    font-size: var(--font-size-md);
+    line-height: 1.5;
+    border-radius: var(--radius-md);
+    transition: all var(--transition-fast);
+    cursor: pointer;
+}
+
+.btn:focus, .btn:hover {
+    text-decoration: none;
+}
+
+.btn-primary {
+    color: white;
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+}
+
+.btn-primary:hover, .btn-primary:focus {
+    background-color: var(--primary-dark);
+    border-color: var(--primary-dark);
+    color: white;
+}
+
+.btn-secondary {
+    color: white;
+    background-color: var(--secondary-color);
+    border-color: var(--secondary-color);
+}
+
+.btn-secondary:hover, .btn-secondary:focus {
+    background-color: var(--secondary-dark);
+    border-color: var(--secondary-dark);
+    color: white;
+}
+
+.btn-accent {
+    color: white;
+    background-color: var(--accent-color);
+    border-color: var(--accent-color);
+}
+
+.btn-accent:hover, .btn-accent:focus {
+    background-color: #e55c5c;
+    border-color: #e55c5c;
+    color: white;
+}
+
+.btn-outline {
+    color: var(--primary-color);
+    background-color: transparent;
+    border-color: var(--primary-color);
+}
+
+.btn-outline:hover, .btn-outline:focus {
+    color: white;
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+}
+
+.btn-sm {
+    padding: 0.5rem 1rem;
+    font-size: var(--font-size-sm);
+}
+
+.btn-lg {
+    padding: 1rem 2rem;
+    font-size: var(--font-size-lg);
+}
+
+.btn-block {
+    display: block;
+    width: 100%;
+}
+
+.btn-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.btn-icon i {
+    margin-right: 0.5rem;
+}
+
+/* Navbar */
+.navbar {
+    background-color: var(--surface-color);
+    box-shadow: var(--shadow-sm);
+    padding: 1rem 0;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+}
+
+.navbar .container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-xl);
+    color: var(--primary-color);
+}
+
+.logo img {
+    height: 40px;
+    margin-right: var(--spacing-sm);
+}
+
+.nav-links {
+    display: flex;
+    align-items: center;
+}
+
+.nav-links a {
+    margin-left: var(--spacing-lg);
+    color: var(--text-primary);
+    font-weight: var(--font-weight-medium);
+    position: relative;
+}
+
+.nav-links a:hover {
+    color: var(--primary-color);
+}
+
+.nav-links a.active {
+    color: var(--primary-color);
+}
+
+.nav-links a.active::after {
+    content: '';
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: var(--primary-color);
+}
+
+.mobile-menu-toggle {
+    display: none;
+    background: none;
+    border: none;
+    cursor: pointer;
+}
+
+.bar {
+    display: block;
+    width: 25px;
+    height: 3px;
+    margin: 5px auto;
+    background-color: var(--text-primary);
+    transition: all var(--transition-fast);
+}
+
+/* Hero Section */
+.hero {
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    color: white;
+    padding: var(--spacing-xxl) 0;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+}
+
+.hero::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url('../images/hero-bg.jpg');
+    background-size: cover;
+    background-position: center;
+    opacity: 0.15;
+    z-index: 0;
+}
+
+.hero-content {
+    position: relative;
+    z-index: 1;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.hero h1 {
+    font-size: var(--font-size-jumbo);
+    margin-bottom: var(--spacing-md);
+    color: white;
+}
+
+.hero-subtitle {
+    font-size: var(--font-size-xl);
+    margin-bottom: var(--spacing-xl);
+    font-weight: var(--font-weight-light);
+}
+
+.hero-buttons {
+    display: flex;
+    justify-content: center;
+    gap: var(--spacing-md);
+}
+
+/* How It Works Section */
+.how-it-works {
+    padding: var(--spacing-xxl) 0;
+    background-color: var(--surface-color);
+}
+
+.steps {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--spacing-xl);
+}
+
+.step {
+    flex: 1;
+    text-align: center;
+    padding: var(--spacing-lg);
+    background-color: white;
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
+    transition: transform var(--transition-normal);
+}
+
+.step:hover {
+    transform: translateY(-5px);
+}
+
+.step-icon {
+    width: 80px;
+    height: 80px;
+    margin: 0 auto var(--spacing-md);
+    background-color: var(--primary-light);
+    color: white;
+    border-radius: var(--radius-round);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2rem;
+}
+
+.step h3 {
+    margin-bottom: var(--spacing-sm);
+}
+
+/* Models Section */
+.models {
+    padding: var(--spacing-xxl) 0;
+    background-color: var(--background-color);
+}
+
+.model-cards {
+    display: flex;
+    justify-content: center;
+    gap: var(--spacing-xl);
+}
+
+.model-card {
+    flex: 1;
+    max-width: 400px;
+    padding: var(--spacing-xl);
+    background-color: white;
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-md);
+    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
+}
+
+.model-card:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-lg);
+}
+
+.model-icon {
+    width: 70px;
+    height: 70px;
+    margin: 0 auto var(--spacing-md);
+    background-color: var(--secondary-light);
+    color: white;
+    border-radius: var(--radius-round);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.75rem;
+}
+
+.model-card h3 {
+    text-align: center;
+    margin-bottom: var(--spacing-md);
+}
+
+.model-features {
+    margin-top: var(--spacing-md);
+    list-style: none;
+}
+
+.model-features li {
+    padding: var(--spacing-sm) 0;
+    display: flex;
+    align-items: center;
+}
+
+.model-features li i {
+    color: var(--success-color);
+    margin-right: var(--spacing-sm);
+}
+
+/* Stats Section */
+.stats {
+    padding: var(--spacing-xxl) 0;
+    background-color: var(--primary-color);
+    color: white;
+}
+
+.stats-grid {
+    display: flex;
+    justify-content: space-around;
+    text-align: center;
+}
+
+.stat-item {
+    padding: var(--spacing-lg);
+}
+
+.stat-number {
+    font-size: 3rem;
+    font-weight: var(--font-weight-bold);
+    margin-bottom: var(--spacing-xs);
+    line-height: 1;
+}
+
+.stat-label {
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-medium);
+    margin-bottom: var(--spacing-sm);
+    color: var(--secondary-light);
+}
+
+.stat-desc {
+    font-size: var(--font-size-sm);
+    max-width: 200px;
+    margin: 0 auto;
+}
+
+/* CTA Section */
+.cta {
+    padding: var(--spacing-xxl) 0;
+    background-color: var(--secondary-color);
+    color: white;
+    text-align: center;
+}
+
+.cta h2 {
+    color: white;
+    margin-bottom: var(--spacing-sm);
+}
+
+.cta p {
+    margin-bottom: var(--spacing-lg);
+    font-size: var(--font-size-lg);
+}
+
+/* Disclaimer Section */
+.disclaimer {
+    padding: var(--spacing-xl) 0;
+    background-color: var(--surface-color);
+}
+
+.disclaimer-box {
+    background-color: #fff8e1;
+    border-left: 4px solid var(--warning-color);
+    padding: var(--spacing-lg);
+    border-radius: var(--radius-md);
+}
+
+.disclaimer-box h3 {
+    color: #856404;
+    display: flex;
+    align-items: center;
+    margin-bottom: var(--spacing-sm);
+}
+
+.disclaimer-box h3 i {
+    margin-right: var(--spacing-sm);
+}
+
+.disclaimer-box p {
+    margin-bottom: 0;
+    color: #856404;
+}
+
+/* Footer */
+footer {
+    background-color: #2c3e50;
+    color: white;
+    padding: var(--spacing-xl) 0 var(--spacing-md);
+}
+
+.footer-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: var(--spacing-xl);
+    margin-bottom: var(--spacing-xl);
+}
+
+.footer-col h3 {
+    color: white;
+    margin-bottom: var(--spacing-md);
+    font-size: var(--font-size-lg);
+}
+
+.footer-col p {
+    color: #b3b3b3;
+    margin-bottom: var(--spacing-md);
+}
+
+.footer-col ul {
+    list-style: none;
+}
+
+.footer-col ul li {
+    margin-bottom: var(--spacing-sm);
+}
+
+.footer-col ul li a {
+    color: #b3b3b3;
+    transition: color var(--transition-fast);
+}
+
+.footer-col ul li a:hover {
+    color: white;
+}
+
+.social-links {
+    display: flex;
+    gap: var(--spacing-sm);
+    margin-top: var(--spacing-md);
+}
+
+.social-links a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: var(--radius-round);
+    color: white;
+    transition: background-color var(--transition-fast);
+}
+
+.social-links a:hover {
+    background-color: var(--primary-color);
+}
+
+.footer-bottom {
+    text-align: center;
+    padding-top: var(--spacing-lg);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    color: #b3b3b3;
+    font-size: var(--font-size-sm);
+}
+
+/* Utility Classes */
+.hidden {
+    display: none !important;
+}
+
+.visible {
+    display: block !important;
+}
+
+.flex {
+    display: flex;
+}
+
+.flex-column {
+    flex-direction: column;
+}
+
+.items-center {
+    align-items: center;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.justify-between {
+    justify-content: space-between;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.mt-1 { margin-top: var(--spacing-xs); }
+.mt-2 { margin-top: var(--spacing-sm); }
+.mt-3 { margin-top: var(--spacing-md); }
+.mt-4 { margin-top: var(--spacing-lg); }
+.mt-5 { margin-top: var(--spacing-xl); }
+
+.mb-1 { margin-bottom: var(--spacing-xs); }
+.mb-2 { margin-bottom: var(--spacing-sm); }
+.mb-3 { margin-bottom: var(--spacing-md); }
+.mb-4 { margin-bottom: var(--spacing-lg); }
+.mb-5 { margin-bottom: var(--spacing-xl); }
+
+.mx-auto { margin-left: auto; margin-right: auto; }
+
+.p-1 { padding: var(--spacing-xs); }
+.p-2 { padding: var(--spacing-sm); }
+.p-3 { padding: var(--spacing-md); }
+.p-4 { padding: var(--spacing-lg); }
+.p-5 { padding: var(--spacing-xl); }
+
+/* Error Pages */
+.error-container {
+    text-align: center;
+    padding: var(--spacing-xxl) var(--spacing-lg);
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.error-container h1 {
+    font-size: var(--font-size-jumbo);
+    color: var(--danger-color);
+    margin-bottom: var(--spacing-lg);
+}
+
+.error-container p {
+    font-size: var(--font-size-lg);
+    margin-bottom: var(--spacing-xl);
+    color: var(--text-secondary);
+}
+
+.actions {
+    display: flex;
+    gap: var(--spacing-md);
+    justify-content: center;
+    margin-top: var(--spacing-xl);
+}
+
+/* FAQ Section */
+.faq-preview {
+    padding: var(--spacing-xxl) 0;
+    background-color: var(--background-color);
+}
+
+.faq-items {
+    margin-bottom: var(--spacing-xl);
+}
+
+.faq-item {
+    background-color: white;
+    border-radius: var(--radius-md);
+    margin-bottom: var(--spacing-md);
+    box-shadow: var(--shadow-sm);
+    overflow: hidden;
+}
+
+.faq-question {
+    padding: var(--spacing-lg);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    transition: background-color var(--transition-fast);
+}
+
+.faq-question:hover {
+    background-color: rgba(0, 0, 0, 0.02);
+}
+
+.faq-question h3 {
+    margin-bottom: 0;
+    font-size: var(--font-size-lg);
+}
+
+.faq-toggle {
+    color: var(--primary-color);
+    transition: transform var(--transition-fast);
+}
+
+.faq-item.active .faq-toggle {
+    transform: rotate(180deg);
+}
+
+.faq-answer {
+    padding: 0 var(--spacing-lg);
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height var(--transition-normal), padding var(--transition-normal);
+}
+
+.faq-item.active .faq-answer {
+    padding: 0 var(--spacing-lg) var(--spacing-lg);
+    max-height: 500px;
+}
+
+.faq-more {
+    text-align: center;
+}
+
+/* Responsive Design */
+@media (max-width: 992px) {
+    .steps, .model-cards {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .step, .model-card {
+        width: 100%;
+        max-width: 500px;
+        margin-bottom: var(--spacing-lg);
+    }
+
+    .stats-grid {
+        flex-wrap: wrap;
+    }
+
+    .stat-item {
+        flex: 0 0 50%;
+        margin-bottom: var(--spacing-lg);
+    }
+}
+
+@media (max-width: 768px) {
+    :root {
+        --font-size-jumbo: 2rem;
+        --font-size-display: 1.75rem;
+    }
+
+    .mobile-menu-toggle {
+        display: block;
+        z-index: 1001;
+    }
+
+    .nav-links {
+        position: fixed;
+        top: 0;
+        right: -100%;
+        width: 70%;
+        height: 100vh;
+        background-color: white;
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 80px var(--spacing-lg) var(--spacing-lg);
+        transition: right var(--transition-normal);
+        box-shadow: var(--shadow-lg);
+        z-index: 1000;
+    }
+
+    .nav-links.active {
+        right: 0;
+    }
+
+    .nav-links a {
+        margin: var(--spacing-sm) 0;
+        font-size: var(--font-size-lg);
+        width: 100%;
+        padding: var(--spacing-sm) 0;
+    }
+
+    .hero-buttons {
+        flex-direction: column;
+        gap: var(--spacing-sm);
+    }
+
+    .footer-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .stat-item {
+        flex: 0 0 100%;
+    }
+}
+
+@media (max-width: 576px) {
+    .container {
+        padding: 0 var(--spacing-md);
+    }
+
+    .hero {
+        padding: var(--spacing-xl) 0;
+    }
+
+    .hero h1 {
+        font-size: 1.75rem;
+    }
+
+    .hero-subtitle {
+        font-size: var(--font-size-md);
+    }
+
+    .section-title {
+        font-size: var(--font-size-xl);
+    }
+}
+/* Detection Page Specific Styles */
+.detect-header {
+    background-color: var(--primary-color);
+    color: white;
+    padding: var(--spacing-xl) 0;
+    text-align: center;
+}
+
+.detect-header h1 {
+    color: white;
+    margin-bottom: var(--spacing-sm);
+}
+
+.detection-tool {
+    padding: var(--spacing-xl) 0;
+    background-color: var(--background-color);
+}
+
+.tool-container {
+    display: flex;
+    gap: var(--spacing-xl);
+    margin-bottom: var(--spacing-xl);
+}
+
+.tool-sidebar {
+    flex: 0 0 300px;
+}
+
+.tool-main {
+    flex: 1;
+    background-color: white;
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-xl);
+    box-shadow: var(--shadow-md);
+}
+
+.info-box {
+    background-color: #e3f2fd;
+    border-radius: var(--radius-md);
+    padding: var(--spacing-lg);
+    margin-bottom: var(--spacing-lg);
+}
+
+.info-box h3 {
+    display: flex;
+    align-items: center;
+    color: var(--primary-color);
+    font-size: var(--font-size-lg);
+    margin-bottom: var(--spacing-md);
+}
+
+.info-box h3 i {
+    margin-right: var(--spacing-sm);
+}
+
+.info-box ul {
+    list-style-type: disc;
+    padding-left: var(--spacing-lg);
+}
+
+.info-box ul li {
+    margin-bottom: var(--spacing-sm);
+}
+
+.model-info {
+    background-color: white;
+    border-radius: var(--radius-md);
+    padding: var(--spacing-lg);
+    box-shadow: var(--shadow-sm);
+}
+
+.model-info h3 {
+    font-size: var(--font-size-lg);
+    margin-bottom: var(--spacing-md);
+}
+
+.model-info-item {
+    margin-bottom: var(--spacing-md);
+}
+
+.model-info-item h4 {
+    font-size: var(--font-size-md);
+    color: var(--primary-color);
+    margin-bottom: var(--spacing-xs);
+}
+
+.model-info-item p {
+    font-size: var(--font-size-sm);
+    margin-bottom: 0;
+}
+
+.form-group {
+    margin-bottom: var(--spacing-lg);
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: var(--spacing-sm);
+    font-weight: var(--font-weight-medium);
+}
+
+.model-select {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    font-family: var(--font-family);
+    font-size: var(--font-size-md);
+    background-color: white;
+    transition: border-color var(--transition-fast);
+}
+
+.model-select:focus {
+    outline: none;
+    border-color: var(--primary-color);
+}
+
+.upload-container {
+    margin-bottom: var(--spacing-lg);
+}
+
+.upload-box {
+    border: 2px dashed var(--border-color);
+    border-radius: var(--radius-md);
+    padding: var(--spacing-xl);
+    text-align: center;
+    cursor: pointer;
+    transition: border-color var(--transition-fast);
+    position: relative;
+    min-height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.upload-box:hover {
+    border-color: var(--primary-color);
+}
+
+.upload-prompt {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.upload-icon {
+    font-size: 3rem;
+    color: var(--primary-color);
+    margin-bottom: var(--spacing-md);
+}
+
+.browse-text {
+    color: var(--primary-color);
+    font-weight: var(--font-weight-medium);
+}
+
+.file-types {
+    font-size: var(--font-size-sm);
+    color: var(--text-tertiary);
+    margin-top: var(--spacing-sm);
+}
+
+.preview-container {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-md);
+}
+
+.preview-container img {
+    max-height: 200px;
+    max-width: 100%;
+    border-radius: var(--radius-sm);
+}
+
+.remove-image {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    border: none;
+    width: 30px;
+    height: 30px;
+    border-radius: var(--radius-round);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background-color var(--transition-fast);
+}
+
+.remove-image:hover {
+    background-color: var(--danger-color);
+}
+
+.analyze-button {
+    width: 100%;
+    padding: 1rem;
+    font-size: var(--font-size-lg);
+}
+
+.analyze-button:disabled {
+    background-color: var(--text-tertiary);
+    border-color: var(--text-tertiary);
+    cursor: not-allowed;
+}
+
+.loading {
+    display: none;
+    text-align: center;
+    margin: var(--spacing-xl) 0;
+}
+
+.spinner {
+    margin: 0 auto;
+    width: 70px;
+    text-align: center;
+}
+
+.spinner > div {
+    width: 18px;
+    height: 18px;
+    background-color: var(--primary-color);
+    border-radius: 100%;
+    display: inline-block;
+    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+
+.spinner .bounce1 {
+    animation-delay: -0.32s;
+}
+
+.spinner .bounce2 {
+    animation-delay: -0.16s;
+}
+
+@keyframes sk-bouncedelay {
+    0%, 80%, 100% {
+        transform: scale(0);
+    } 40% {
+        transform: scale(1.0);
+    }
+}
+
+.error-message {
+    display: flex;
+    align-items: center;
+    background-color: #ffebee;
+    border-radius: var(--radius-md);
+    padding: var(--spacing-lg);
+    margin: var(--spacing-lg) 0;
+}
+
+.error-icon {
+    font-size: 2rem;
+    color: var(--danger-color);
+    margin-right: var(--spacing-lg);
+}
+
+.error-content h3 {
+    color: var(--danger-color);
+    margin-bottom: var(--spacing-xs);
+}
+
+.result-card {
+    margin-top: var(--spacing-xl);
+    background-color: white;
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-md);
+    overflow: hidden;
+}
+
+.result-header {
+    background-color: var(--primary-color);
+    color: white;
+    padding: var(--spacing-lg);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.result-header h2 {
+    color: white;
+    margin-bottom: 0;
+    display: flex;
+    align-items: center;
+}
+
+.result-header h2 i {
+    margin-right: var(--spacing-sm);
+}
+
+.model-badge {
+    background-color: rgba(255, 255, 255, 0.2);
+    padding: 0.25rem 0.75rem;
+    border-radius: var(--radius-md);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+}
+
+.result-summary {
+    display: flex;
+    padding: var(--spacing-lg);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.result-image-container {
+    flex: 0 0 40%;
+    margin-right: var(--spacing-lg);
+}
+
+.result-image-container img {
+    width: 100%;
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-sm);
+}
+
+.result-details {
+    flex: 1;
+}
+
+.prediction-box {
+    background-color: #f5f5f5;
+    border-radius: var(--radius-md);
+    padding: var(--spacing-lg);
+    margin-bottom: var(--spacing-lg);
+}
+
+.prediction-box h3 {
+    font-size: var(--font-size-md);
+    color: var(--text-secondary);
+    margin-bottom: var(--spacing-sm);
+}
+
+.prediction-name {
+    font-size: var(--font-size-xl);
+    font-weight: var(--font-weight-bold);
+    margin-bottom: var(--spacing-sm);
+    color: var(--primary-color);
+}
+
+.prediction-description {
+    margin-bottom: var(--spacing-md);
+    font-size: var(--font-size-md);
+}
+
+.confidence-meter {
+    display: flex;
+    align-items: center;
+    margin-top: var(--spacing-md);
+}
+
+.confidence-label {
+    margin-right: var(--spacing-sm);
+    font-weight: var(--font-weight-medium);
+    font-size: var(--font-size-sm);
+}
+
+.confidence-bar {
+    flex: 1;
+    height: 10px;
+    background-color: #e0e0e0;
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    margin-right: var(--spacing-sm);
+}
+
+.confidence-fill {
+    height: 100%;
+    background-color: var(--primary-color);
+    width: 0%;
+    transition: width var(--transition-normal);
+}
+
+.confidence-value {
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-sm);
+}
+
+.severity-indicator {
+    background-color: #f5f5f5;
+    border-radius: var(--radius-md);
+    padding: var(--spacing-lg);
+}
+
+.severity-indicator h3 {
+    font-size: var(--font-size-md);
+    margin-bottom: var(--spacing-sm);
+}
+
+.severity-level {
+    display: flex;
+    align-items: center;
+}
+
+.severity-level i {
+    margin-right: var(--spacing-sm);
+}
+
+.severity-text {
+    font-weight: var(--font-weight-medium);
+}
+
+.severity-low {
+    color: var(--success-color);
+}
+
+.severity-moderate {
+    color: var(--warning-color);
+}
+
+.severity-high, .severity-very-high {
+    color: var(--danger-color);
+}
+
+.result-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.tab-button {
+    padding: var(--spacing-md) var(--spacing-lg);
+    background: none;
+    border: none;
+    border-bottom: 3px solid transparent;
+    cursor: pointer;
+    font-weight: var(--font-weight-medium);
+    transition: all var(--transition-fast);
+}
+
+.tab-button:hover {
+    background-color: rgba(0, 0, 0, 0.02);
+}
+
+.tab-button.active {
+    color: var(--primary-color);
+    border-bottom-color: var(--primary-color);
+}
+
+.tab-content {
+    padding: var(--spacing-lg);
+}
+
+.tab-pane {
+    display: none;
+}
+
+.tab-pane.active {
+    display: block;
+}
+
+.tab-pane h3 {
+    margin-bottom: var(--spacing-md);
+    font-size: var(--font-size-lg);
+}
+
+.probabilities-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: var(--spacing-md);
+}
+
+.probability-item {
+    background-color: #f5f5f5;
+    border-radius: var(--radius-md);
+    padding: var(--spacing-md);
+    display: flex;
+    flex-direction: column;
+}
+
+.probability-class {
+    font-weight: var(--font-weight-medium);
+    margin-bottom: var(--spacing-xs);
+}
+
+.probability-bar {
+    height: 8px;
+    background-color: #e0e0e0;
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    margin: var(--spacing-xs) 0;
+}
+
+.probability-fill {
+    height: 100%;
+    background-color: var(--primary-color);
+}
+
+.probability-value {
+    font-size: var(--font-size-sm);
+    color: var(--text-secondary);
+    align-self: flex-end;
+}
+
+.info-resources ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.info-resources ul li {
+    margin-bottom: var(--spacing-sm);
+}
+
+.info-resources ul li a {
+    display: flex;
+    align-items: center;
+    padding: var(--spacing-sm);
+    background-color: #f5f5f5;
+    border-radius: var(--radius-md);
+    transition: background-color var(--transition-fast);
+}
+
+.info-resources ul li a:hover {
+    background-color: #e0e0e0;
+}
+
+.info-resources ul li a i {
+    margin-right: var(--spacing-sm);
+    color: var(--primary-color);
+}
+
+.next-steps-content {
+    margin-bottom: var(--spacing-lg);
+}
+
+.next-step {
+    display: flex;
+    margin-bottom: var(--spacing-md);
+    padding: var(--spacing-md);
+    background-color: #f5f5f5;
+    border-radius: var(--radius-md);
+}
+
+.step-icon {
+    flex: 0 0 50px;
+    height: 50px;
+    background-color: var(--primary-light);
+    color: white;
+    border-radius: var(--radius-round);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.25rem;
+    margin-right: var(--spacing-md);
+}
+
+.step-content {
+    flex: 1;
+}
+
+.step-content h4 {
+    margin-bottom: var(--spacing-xs);
+}
+
+.step-content p {
+    margin-bottom: 0;
+    font-size: var(--font-size-sm);
+}
+
+.disclaimer-box {
+    background-color: #fff8e1;
+    border-left: 4px solid var(--warning-color);
+    padding: var(--spacing-md);
+    border-radius: var(--radius-md);
+}
+
+.disclaimer-box p {
+    margin-bottom: 0;
+    font-size: var(--font-size-sm);
+}
+
+.result-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--spacing-md);
+    padding: var(--spacing-lg);
+    border-top: 1px solid var(--border-color);
+}
+
+@media (max-width: 992px) {
+    .tool-container {
+        flex-direction: column;
+    }
+
+    .tool-sidebar {
+        flex: 0 0 auto;
+        width: 100%;
+    }
+}
+
+@media (max-width: 768px) {
+    .result-summary {
+        flex-direction: column;
+    }
+
+    .result-image-container {
+        flex: 0 0 auto;
+        margin-right: 0;
+        margin-bottom: var(--spacing-lg);
+    }
+
+    .result-tabs {
+        overflow-x: auto;
+        white-space: nowrap;
+    }
+
+    .tab-button {
+        padding: var(--spacing-md) var(--spacing-sm);
+    }
+
+    .probabilities-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Add to styles.css */
+.menu-open {
+    overflow: hidden;
+}
+
+.nav-links.active {
+    right: 0;
+}
+
+.mobile-menu-toggle.active .bar:nth-child(1) {
+    transform: translateY(8px) rotate(45deg);
+}
+
+.mobile-menu-toggle.active .bar:nth-child(2) {
+    opacity: 0;
+}
+
+.mobile-menu-toggle.active .bar:nth-child(3) {
+    transform: translateY(-8px) rotate(-45deg);
+}

static/js/detect.js

@@ -0,0 +1,550 @@
+
+// At the beginning of your file, add this to ensure CLASS_DESCRIPTIONS is defined
+// This assumes your class descriptions are passed from the Flask backend
+const CLASS_DESCRIPTIONS = window.CLASS_DESCRIPTIONS || {
+    'akiec': { name: 'Actinic Keratosis', description: 'A precancerous growth caused by sun damage.' },
+    'bcc': { name: 'Basal Cell Carcinoma', description: 'The most common type of skin cancer.' },
+    'bkl': { name: 'Benign Keratosis', description: 'A non-cancerous growth on the skin.' },
+    'df': { name: 'Dermatofibroma', description: 'A common benign skin growth.' },
+    'mel': { name: 'Melanoma', description: 'The most serious form of skin cancer.' },
+    'nv': { name: 'Melanocytic Nevus', description: 'A common mole.' },
+    'vasc': { name: 'Vascular Lesion', description: 'An abnormality of blood vessels.' }
+};
+
+// Define CONDITION_INFO if not already defined
+const CONDITION_INFO = window.CONDITION_INFO || {
+    'akiec': {
+        severity: 'moderate',
+        description: 'Actinic Keratosis is a precancerous growth caused by sun damage.',
+        resources: [{ name: 'Mayo Clinic', url: 'https://www.mayoclinic.org/diseases-conditions/actinic-keratosis/symptoms-causes/syc-20354969' }]
+    },
+    'bcc': {
+        severity: 'high',
+        description: 'Basal Cell Carcinoma is the most common type of skin cancer.',
+        resources: [{ name: 'Skin Cancer Foundation', url: 'https://www.skincancer.org/skin-cancer-information/basal-cell-carcinoma/' }]
+    },
+    'bkl': {
+        severity: 'low',
+        description: 'Benign Keratosis is a non-cancerous growth that appears as a waxy, scaly growth on the skin.',
+        resources: [{ name: 'American Academy of Dermatology', url: 'https://www.aad.org/public/diseases/bumps-and-growths/seborrheic-keratoses' }]
+    },
+    'df': {
+        severity: 'low',
+        description: 'Dermatofibroma is a common benign skin growth that often appears as a small, firm bump.',
+        resources: [{ name: 'DermNet NZ', url: 'https://dermnetnz.org/topics/dermatofibroma' }]
+    },
+    'mel': {
+        severity: 'very high',
+        description: 'Melanoma is the most serious form of skin cancer that develops in the cells that produce melanin.',
+        resources: [{ name: 'American Cancer Society', url: 'https://www.cancer.org/cancer/melanoma-skin-cancer.html' }]
+    },
+    'nv': {
+        severity: 'low',
+        description: 'Melanocytic Nevus is a common mole that appears as a small, dark brown spot caused by clusters of pigmented cells.',
+        resources: [{ name: 'Cleveland Clinic', url: 'https://my.clevelandclinic.org/health/diseases/21880-moles' }]
+    },
+    'vasc': {
+        severity: 'moderate',
+        description: 'Vascular Lesion is an abnormality of blood vessels that can appear as red or purple marks on the skin.',
+        resources: [{ name: 'Stanford Health Care', url: 'https://stanfordhealthcare.org/medical-conditions/skin-hair-and-nails/vascular-malformations.html' }]
+    }
+};
+
+
+document.addEventListener('DOMContentLoaded', function() {
+    // DOM Elements
+    const uploadBox = document.getElementById('upload-box');
+    const fileInput = document.getElementById('file-input');
+    const previewContainer = document.getElementById('preview-container');
+    const previewImage = document.getElementById('image-preview')
+    const removeImageBtn = document.getElementById('remove-image');
+    const analyzeBtn = document.getElementById('analyze-button');
+    const uploadForm = document.getElementById('upload-form');
+    const loadingIndicator = document.getElementById('loading');
+    const resultContainer = document.getElementById('result');
+    const errorMessage = document.getElementById('error-message');
+    const errorText = document.getElementById('error-text');
+    const modelSelect = document.getElementById('model-select');
+    const modelUsedBadge = document.getElementById('model-used-badge');
+
+    // Tab elements
+    const tabButtons = document.querySelectorAll('.tab-button');
+    const tabPanes = document.querySelectorAll('.tab-pane');
+
+    // Result elements
+    const resultImage = document.getElementById('result-image');
+    const predictionElement = document.getElementById('prediction');
+    const descriptionElement = document.getElementById('description');
+    const confidenceElement = document.getElementById('confidence');
+    const confidenceFill = document.getElementById('confidence-fill');
+    const probabilitiesContainer = document.getElementById('probabilities');
+    const severityIndicator = document.getElementById('severity-indicator');
+    const infoConditionName = document.getElementById('info-condition-name');
+    const conditionInformation = document.getElementById('condition-information');
+    const resourcesList = document.getElementById('resources-list');
+    const saveResultBtn = document.getElementById('save-result');
+    const newAnalysisBtn = document.getElementById('new-analysis');
+
+    // State
+    let fileSelected = false;
+
+    // Event Listeners
+    uploadBox.addEventListener('click', function() {
+        fileInput.click();
+    });
+
+    fileInput.addEventListener('change', handleFileSelect);
+
+    removeImageBtn.addEventListener('click', function(e) {
+        e.stopPropagation();
+        resetUpload();
+    });
+
+    uploadForm.addEventListener('submit', handleFormSubmit);
+
+    tabButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const tabName = this.getAttribute('data-tab');
+            switchTab(tabName);
+        });
+    });
+
+    newAnalysisBtn.addEventListener('click', resetAll);
+
+    saveResultBtn.addEventListener('click', saveResults);
+
+    // Functions
+    function handleFileSelect(e) {
+        const file = e.target.files[0];
+
+        if (!file) return;
+
+        if (!file.type.match('image.*')) {
+            showError('Please select an image file (JPEG, PNG, etc.)');
+            return;
+        }
+
+        const reader = new FileReader();
+
+        reader.onload = function(e) {
+            previewImage.src = e.target.result;
+            previewContainer.classList.remove('hidden');
+            removeImageBtn.classList.remove('hidden');
+            uploadBox.classList.add('has-image');
+            fileSelected = true;
+            analyzeBtn.disabled = false;
+        };
+
+        reader.readAsDataURL(file);
+    }
+
+    function resetUpload() {
+        fileInput.value = '';
+        previewContainer.classList.add('hidden');
+        removeImageBtn.classList.add('hidden');
+        uploadBox.classList.remove('has-image');
+        fileSelected = false;
+        analyzeBtn.disabled = true;
+    }
+
+    function handleFormSubmit(e) {
+        e.preventDefault();
+
+        if (!fileSelected) {
+            showError('Please select an image to analyze');
+            return;
+        }
+
+        // Hide any previous results or errors
+        resultContainer.classList.add('hidden');
+        errorMessage.classList.add('hidden');
+
+        // Show loading indicator
+        loadingIndicator.style.display = 'block';
+
+        // Get the selected model
+        const selectedModel = modelSelect.value;
+
+        // Create form data
+        const formData = new FormData();
+        formData.append('file', fileInput.files[0]);
+        formData.append('model', selectedModel);
+
+        console.log('Uploading file:', fileInput.files[0].name);
+        console.log('Selected model:', selectedModel);
+
+        // Send the request
+        fetch('/predict', {
+            method: 'POST',
+            body: formData
+        })
+        .then(response => {
+            if (!response.ok) {
+                return response.json().then(data => {
+                    throw new Error(data.error || `Server error: ${response.status}`);
+                }).catch(e => {
+                    // If we can't parse JSON, use the status text
+                    throw new Error(`Server error: ${response.status} ${response.statusText}`);
+                });
+            }
+            return response.json();
+        })
+        .then(data => {
+            // Hide loading indicator
+            loadingIndicator.style.display = 'none';
+
+            // Check if we have predictions
+            if (!data.predictions || data.predictions.length === 0) {
+                throw new Error('No predictions returned from the server');
+            }
+
+            // Display results
+            displayResults(data, selectedModel);
+        })
+        .catch(error => {
+            // Hide loading indicator
+            loadingIndicator.style.display = 'none';
+
+            // Show error message
+            showError(`Error: ${error.message}`);
+            console.error('Error:', error);
+        });
+    }
+
+    function displayResults(data, modelName) {
+        // Set the model badge
+        modelUsedBadge.textContent = modelName;
+
+        // Set the result image
+        resultImage.src = previewImage.src;
+
+        // Get the top prediction
+        const topPrediction = data.predictions[0];
+        const predictionClass = topPrediction.class;
+        const confidence = topPrediction.confidence;
+
+        // Set prediction details
+        predictionElement.textContent = CLASS_DESCRIPTIONS[predictionClass].name;
+        descriptionElement.textContent = CLASS_DESCRIPTIONS[predictionClass].description;
+
+        // Set confidence
+        const confidencePercent = Math.round(confidence * 100);
+        confidenceElement.textContent = confidencePercent + '%';
+        confidenceFill.style.width = confidencePercent + '%';
+
+        // Set confidence color based on value
+        if (confidencePercent >= 80) {
+            confidenceFill.style.backgroundColor = 'var(--success-color)';
+        } else if (confidencePercent >= 50) {
+            confidenceFill.style.backgroundColor = 'var(--warning-color)';
+        } else {
+            confidenceFill.style.backgroundColor = 'var(--danger-color)';
+        }
+
+        // Display severity indicator
+        const conditionInfo = CONDITION_INFO[predictionClass];
+        let severityHTML = '';
+
+        if (conditionInfo && conditionInfo.severity) {
+            let severityClass = '';
+            let severityIcon = '';
+
+            switch (conditionInfo.severity) {
+                case 'low':
+                    severityClass = 'severity-low';
+                    severityIcon = 'fa-check-circle';
+                    break;
+                case 'moderate':
+                    severityClass = 'severity-moderate';
+                    severityIcon = 'fa-exclamation-circle';
+                    break;
+                case 'high':
+                    severityClass = 'severity-high';
+                    severityIcon = 'fa-exclamation-triangle';
+                    break;
+                case 'very high':
+                    severityClass = 'severity-very-high';
+                    severityIcon = 'fa-radiation';
+                    break;
+            }
+
+            severityHTML = `
+            <h3>Severity Level</h3>
+            <div class="severity-level ${severityClass}">
+            <i class="fas ${severityIcon}"></i>
+            <span class="severity-text">${conditionInfo.severity.charAt(0).toUpperCase() + conditionInfo.severity.slice(1)}</span>
+            </div>
+            <p class="mt-2">This is based on typical characteristics of this condition.</p>
+            `;
+        }
+
+        severityIndicator.innerHTML = severityHTML;
+
+        // Display all probabilities
+        probabilitiesContainer.innerHTML = '';
+        data.predictions.forEach(prediction => {
+            const probabilityPercent = Math.round(prediction.confidence * 100);
+            const probabilityHTML = `
+            <div class="probability-item">
+            <div class="probability-class">${CLASS_DESCRIPTIONS[prediction.class].name}</div>
+            <div class="probability-bar">
+            <div class="probability-fill" style="width: ${probabilityPercent}%"></div>
+            </div>
+            <div class="probability-value">${probabilityPercent}%</div>
+            </div>
+            `;
+            probabilitiesContainer.innerHTML += probabilityHTML;
+        });
+
+        // Set condition information
+        infoConditionName.textContent = CLASS_DESCRIPTIONS[predictionClass].name;
+
+        if (conditionInfo && conditionInfo.description) {
+            conditionInformation.textContent = conditionInfo.description;
+        } else {
+            conditionInformation.textContent = CLASS_DESCRIPTIONS[predictionClass].description;
+        }
+
+        // Set resources
+        resourcesList.innerHTML = '';
+        if (conditionInfo && conditionInfo.resources) {
+            conditionInfo.resources.forEach(resource => {
+                const resourceHTML = `
+                <li>
+                <a href="${resource.url}" target="_blank">
+                <i class="fas fa-external-link-alt"></i>
+                ${resource.name}
+                </a>
+                </li>
+                `;
+                resourcesList.innerHTML += resourceHTML;
+            });
+        }
+
+        // Show the result container
+        resultContainer.classList.remove('hidden');
+
+        // Switch to the first tab
+        switchTab('probabilities');
+
+        // Scroll to results
+        resultContainer.scrollIntoView({ behavior: 'smooth' });
+    }
+
+    function showError(message) {
+        errorText.textContent = message;
+        errorMessage.classList.remove('hidden');
+    }
+
+    function switchTab(tabName) {
+        // Update active tab button
+        tabButtons.forEach(button => {
+            if (button.getAttribute('data-tab') === tabName) {
+                button.classList.add('active');
+            } else {
+                button.classList.remove('active');
+            }
+        });
+
+        // Update active tab pane
+        tabPanes.forEach(pane => {
+            if (pane.id === tabName + '-tab') {
+                pane.classList.add('active');
+            } else {
+                pane.classList.remove('active');
+            }
+        });
+    }
+
+    function resetAll() {
+        resetUpload();
+        resultContainer.classList.add('hidden');
+        errorMessage.classList.add('hidden');
+    }
+
+    function saveResults() {
+        // Create a canvas element
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+
+        // Set canvas dimensions
+        canvas.width = 800;
+        canvas.height = 1200;
+
+        // Fill background
+        ctx.fillStyle = '#ffffff';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+        // Draw header
+        ctx.fillStyle = '#2A5C82';
+        ctx.fillRect(0, 0, canvas.width, 100);
+
+        // Draw header text
+        ctx.font = 'bold 30px Poppins, sans-serif';
+        ctx.fillStyle = '#ffffff';
+        ctx.textAlign = 'center';
+        ctx.fillText('SkinAI Analysis Results', canvas.width / 2, 60);
+
+        // Load and draw the image
+        const img = new Image();
+        img.onload = function() {
+            // Calculate image dimensions to maintain aspect ratio
+            const maxWidth = 400;
+            const maxHeight = 300;
+            let width = img.width;
+            let height = img.height;
+
+            if (width > height) {
+                if (width > maxWidth) {
+                    height *= maxWidth / width;
+                    width = maxWidth;
+                }
+            } else {
+                if (height > maxHeight) {
+                    width *= maxHeight / height;
+                    height = maxHeight;
+                }
+            }
+
+            // Draw image
+            const x = (canvas.width - width) / 2;
+            ctx.drawImage(img, x, 130, width, height);
+
+            // Draw prediction info
+            ctx.fillStyle = '#333333';
+            ctx.font = 'bold 24px Poppins, sans-serif';
+            ctx.textAlign = 'center';
+            ctx.fillText('Primary Prediction', canvas.width / 2, 480);
+
+            ctx.font = 'bold 28px Poppins, sans-serif';
+            ctx.fillStyle = '#2A5C82';
+            ctx.fillText(predictionElement.textContent, canvas.width / 2, 520);
+
+            // Draw confidence
+            ctx.font = '18px Poppins, sans-serif';
+            ctx.fillStyle = '#333333';
+            ctx.fillText(`Confidence: ${confidenceElement.textContent}`, canvas.width / 2, 550);
+
+            // Draw description
+            ctx.font = '16px Poppins, sans-serif';
+            ctx.fillStyle = '#666666';
+            ctx.textAlign = 'left';
+
+            // Wrap text function
+            const wrapText = function(context, text, x, y, maxWidth, lineHeight) {
+                const words = text.split(' ');
+                let line = '';
+                let testLine = '';
+                let lineArray = [];
+
+                for (let n = 0; n < words.length; n++) {
+                    testLine = line + words[n] + ' ';
+                    const metrics = context.measureText(testLine);
+                    const testWidth = metrics.width;
+
+                    if (testWidth > maxWidth && n > 0) {
+                        lineArray.push([line, x, y]);
+                        line = words[n] + ' ';
+                        y += lineHeight;
+                    } else {
+                        line = testLine;
+                    }
+                }
+
+                lineArray.push([line, x, y]);
+                return lineArray;
+            };
+
+            const descriptionLines = wrapText(ctx, descriptionElement.textContent, 100, 600, canvas.width - 200, 25);
+
+            for (let i = 0; i < descriptionLines.length; i++) {
+                ctx.fillText(descriptionLines[i][0], descriptionLines[i][1], descriptionLines[i][2]);
+            }
+
+            // Draw probabilities title
+            ctx.font = 'bold 24px Poppins, sans-serif';
+            ctx.fillStyle = '#333333';
+            ctx.textAlign = 'center';
+            ctx.fillText('Class Probabilities', canvas.width / 2, 700);
+
+            // Draw probabilities
+            const predictions = Array.from(document.querySelectorAll('.probability-item'));
+            let yPos = 740;
+
+            predictions.slice(0, 5).forEach(prediction => {
+                const className = prediction.querySelector('.probability-class').textContent;
+                const probabilityValue = prediction.querySelector('.probability-value').textContent;
+
+                ctx.font = '16px Poppins, sans-serif';
+                ctx.fillStyle = '#333333';
+                ctx.textAlign = 'left';
+                ctx.fillText(className, 200, yPos);
+
+                ctx.textAlign = 'right';
+                ctx.fillText(probabilityValue, canvas.width - 200, yPos);
+
+                // Draw probability bar background
+                ctx.fillStyle = '#e0e0e0';
+                ctx.fillRect(200, yPos + 10, 400, 10);
+
+                // Draw probability bar fill
+                ctx.fillStyle = '#2A5C82';
+                const width = parseInt(probabilityValue) * 4; // Scale to 400px max width
+                ctx.fillRect(200, yPos + 10, width, 10);
+
+                yPos += 40;
+            });
+
+            // Draw disclaimer
+            ctx.fillStyle = '#fff8e1';
+            ctx.fillRect(100, 1000, canvas.width - 200, 100);
+
+            ctx.font = 'bold 16px Poppins, sans-serif';
+            ctx.fillStyle = '#856404';
+            ctx.textAlign = 'center';
+            ctx.fillText('Important Disclaimer', canvas.width / 2, 1030);
+
+            ctx.font = '14px Poppins, sans-serif';
+            ctx.fillText('This AI analysis is for educational purposes only and is not a medical diagnosis.', canvas.width / 2, 1060);
+            ctx.fillText('Always consult a healthcare professional for medical concerns.', canvas.width / 2, 1080);
+
+            // Draw date
+            const date = new Date();
+            ctx.font = '12px Poppins, sans-serif';
+            ctx.fillStyle = '#999999';
+            ctx.textAlign = 'right';
+            ctx.fillText(`Generated on: ${date.toLocaleDateString()} ${date.toLocaleTimeString()}`, canvas.width - 100, 1150);
+
+            // Convert to image and download
+            const dataUrl = canvas.toDataURL('image/png');
+            const link = document.createElement('a');
+            link.download = 'skinai-analysis.png';
+            link.href = dataUrl;
+            link.click();
+        };
+
+        img.src = resultImage.src;
+    }
+});
+
+// FAQ Accordion
+document.addEventListener('DOMContentLoaded', function() {
+    const faqItems = document.querySelectorAll('.faq-item');
+
+    faqItems.forEach(item => {
+        const question = item.querySelector('.faq-question');
+
+        question.addEventListener('click', () => {
+            // Toggle active class on the clicked item
+            item.classList.toggle('active');
+
+            // Close other items
+            faqItems.forEach(otherItem => {
+                if (otherItem !== item) {
+                    otherItem.classList.remove('active');
+                }
+            });
+        });
+    });
+});
+

static/js/main.js

@@ -0,0 +1,35 @@
+// main.js - Core site functionality
+
+// Mobile menu toggle
+document.addEventListener('DOMContentLoaded', function() {
+    const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
+    const navLinks = document.querySelector('.nav-links');
+
+    if (mobileMenuToggle && navLinks) {
+        mobileMenuToggle.addEventListener('click', function() {
+            this.classList.toggle('active');
+            navLinks.classList.toggle('active');
+            document.body.classList.toggle('menu-open');
+        });
+    }
+
+    // Close menu when clicking outside
+    document.addEventListener('click', function(e) {
+        if (!e.target.closest('.nav-links') &&
+            !e.target.closest('.mobile-menu-toggle')) {
+            mobileMenuToggle.classList.remove('active');
+        navLinks.classList.remove('active');
+        document.body.classList.remove('menu-open');
+            }
+    });
+});
+
+// Smooth scroll for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function(e) {
+        e.preventDefault();
+        document.querySelector(this.getAttribute('href')).scrollIntoView({
+            behavior: 'smooth'
+        });
+    });
+});

templates/404.html

@@ -0,0 +1,9 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="error-container">
+    <h1>404 - Page Not Found</h1>
+    <p>The page you're looking for doesn't exist.</p>
+    <a href="{{ url_for('index') }}" class="cta-button">Return Home</a>
+</div>
+{% endblock %}

templates/500.html

@@ -0,0 +1,12 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="error-container">
+    <h1>500 - Server Error</h1>
+    <p>Something went wrong on our end. We're working to fix it!</p>
+    <div class="actions">
+<a href="{{ url_for('index') }}" class="cta-button">Return Home</a>
+        <a href="{{ url_for('detect') }}" class="cta-button">Try Again</a>
+    </div>
+</div>
+{% endblock %}

templates/about.html

@@ -0,0 +1,8 @@
+{% extends "base.html" %}
+
+{% block content %}
+<section class="container">
+    <h1>About SkinAI</h1>
+    <p>Your about page content here...</p>
+</section>
+{% endblock %}

templates/base.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="SkinAI - Advanced AI-powered skin lesion analysis for early detection of skin cancer">
+    <meta name="keywords" content="skin cancer, melanoma, AI detection, dermatology, machine learning">
+    <meta name="author" content="SkinAI Team">
+
+    <title>{% block title %}SkinAI - AI-Powered Skin Cancer Detection{% endblock %}</title>
+
+    <!-- Favicon -->
+    <link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.ico') }}" type="image/x-icon">
+
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
+    <!-- CSS -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
+    {% block extra_css %}{% endblock %}
+</head>
+<body>
+    <header>
+        <nav class="navbar">
+            <div class="container">
+                <a href="{{ url_for('index') }}" class="logo">
+                    <img src="{{ url_for('static', filename='images/logo.svg') }}" alt="SkinAI Logo">
+                    <span>SkinAI</span>
+                </a>
+
+                <button class="mobile-menu-toggle" aria-label="Toggle menu">
+                    <span class="bar"></span>
+                    <span class="bar"></span>
+                    <span class="bar"></span>
+                </button>
+
+                <div class="nav-links">
+                    <a href="{{ url_for('index') }}" class="{% if request.path == url_for('index') %}active{% endif %}">Home</a>
+                    <a href="{{ url_for('detect') }}" class="{% if request.path == url_for('detect') %}active{% endif %}">Detect</a>
+                    <a href="{{ url_for('about') }}" class="{% if request.path == url_for('about') %}active{% endif %}">About</a>
+                    <a href="{{ url_for('faq') }}" class="{% if request.path == url_for('faq') %}active{% endif %}">FAQ</a>
+                </div>
+            </div>
+        </nav>
+    </header>
+
+    <main>
+        {% block content %}{% endblock %}
+    </main>
+
+    <footer>
+        <div class="container">
+            <div class="footer-grid">
+                <div class="footer-col">
+                    <h3>SkinAI</h3>
+                    <p>Advanced AI-powered skin lesion analysis for early detection of skin cancer.</p>
+                    <div class="social-links">
+                        <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
+                        <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
+                        <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
+                        <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
+                    </div>
+                </div>
+
+                <div class="footer-col">
+                    <h3>Quick Links</h3>
+                    <ul>
+                        <li><a href="{{ url_for('index') }}">Home</a></li>
+                        <li><a href="{{ url_for('detect') }}">Detect</a></li>
+                        <li><a href="{{ url_for('about') }}">About</a></li>
+                        <li><a href="{{ url_for('faq') }}">FAQ</a></li>
+                    </ul>
+                </div>
+
+                <div class="footer-col">
+                    <h3>Legal</h3>
+                    <ul>
+                        <li><a href="{{ url_for('privacy') }}">Privacy Policy</a></li>
+                        <li><a href="{{ url_for('terms') }}">Terms of Service</a></li>
+                        <li><a href="#">Cookie Policy</a></li>
+                    </ul>
+                </div>
+
+                <div class="footer-col">
+                    <h3>Important Notice</h3>
+                    <p>This tool is for educational purposes only and is not a substitute for professional medical advice. Always consult with a healthcare professional for medical concerns.</p>
+                </div>
+            </div>
+
+            <div class="footer-bottom">
+                <p>&copy; 2023 SkinAI. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Core JavaScript -->
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+
+    {% block extra_js %}{% endblock %}
+
+    <!-- Analytics (replace with your own) -->
+    <script async defer>
+        // Google Analytics or other analytics code
+    </script>
+</body>
+</html>

templates/contact.html

@@ -0,0 +1,9 @@
+{% extends "base.html" %}
+
+{% block content %}
+<section class="container">
+    <h1>Contact Us</h1>
+    <!-- Add contact form -->
+</section>
+{% endblock %}
+

templates/detect.html

@@ -0,0 +1,249 @@
+{% extends "base.html" %}
+
+{% block title %}Skin Lesion Analysis - SkinAI{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/detect.css') }}">
+{% endblock %}
+
+{% block content %}
+<section class="detect-header">
+    <div class="container">
+        <h1>Skin Lesion Analysis</h1>
+        <p>Upload a clear image of your skin lesion for AI-powered analysis</p>
+    </div>
+</section>
+
+<section class="detection-tool">
+    <div class="container">
+        <div class="tool-container">
+            <div class="tool-sidebar">
+                <div class="info-box">
+                    <h3><i class="fas fa-info-circle"></i> How to get the best results</h3>
+                    <ul>
+                        <li>Use good lighting conditions</li>
+                        <li>Keep the lesion centered in the image</li>
+                        <li>Use a clear, in-focus image</li>
+                        <li>Include only the area of concern</li>
+                    </ul>
+                </div>
+
+                <div class="model-info">
+                    <h3>About Our Models</h3>
+                    <div class="model-info-item">
+                        <h4>MobileNetV2</h4>
+                        <p>Optimized for speed and efficiency with 74% accuracy on the HAM10000 dataset.</p>
+                    </div>
+                    <div class="model-info-item">
+                        <h4>EfficientNetB0</h4>
+                        <p>Higher accuracy model with 69% accuracy on skin cancer classification.</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="tool-main">
+ <form id="upload-form" enctype="multipart/form-data" action="/predict" method="POST">
+                    <div class="form-group">
+                        <label for="model-select">Select AI Model:</label>
+                        <select id="model-select" name="model" class="model-select">
+                            <option value="mobilenet">MobileNetV2</option>
+                            <option value="efficientnet">EfficientNetB0</option>
+                        </select>
+                    </div>
+
+                    <div class="upload-container">
+                        <div id="upload-box" class="upload-box">
+                            <input type="file" name="file" id="file-input" hidden accept=".jpg,.jpeg,.png">
+                            <div id="preview-container" class="preview-container hidden">
+              <img id="image-preview" src="#" alt="Image preview">
+                                <button type="button" id="remove-image" class="remove-image" aria-label="Remove image">
+                                    <i class="fas fa-times"></i>
+                                </button>
+                            </div>
+                            <div id="upload-prompt" class="upload-prompt">
+                                <div class="upload-icon">
+                                    <i class="fas fa-cloud-upload-alt"></i>
+                                </div>
+                                <p>Drag & drop your image here or <span class="browse-text">browse</span></p>
+                                <p class="file-types">Supported formats: JPG, JPEG, PNG</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <button type="submit" id="analyze-button" class="btn btn-primary analyze-button" disabled>
+                        <i class="fas fa-search"></i> Analyze Image
+                    </button>
+                </form>
+
+                                <div id="loading" class="loading">
+                    <div class="spinner">
+                        <div class="bounce1"></div>
+                        <div class="bounce2"></div>
+                        <div class="bounce3"></div>
+                    </div>
+                    <p>Analyzing your image...</p>
+                </div>
+
+                <div id="error-message" class="error-message hidden">
+                    <div class="error-icon">
+                        <i class="fas fa-exclamation-circle"></i>
+                    </div>
+                    <div class="error-content">
+                        <h3>Error</h3>
+                        <p id="error-text">An error occurred. Please try again.</p>
+                    </div>
+                </div>
+
+                <div id="result" class="result-card hidden">
+                    <div class="result-header">
+                        <h2><i class="fas fa-chart-pie"></i> Analysis Results</h2>
+                        <span class="model-badge" id="model-used-badge">MobileNetV2</span>
+                    </div>
+
+                    <div class="result-summary">
+                        <div class="result-image-container">
+                            <img id="result-image" src="#" alt="Analyzed image">
+                        </div>
+
+                        <div class="result-details">
+                            <div class="prediction-box">
+                                <h3>Primary Prediction</h3>
+                                <div class="prediction-name" id="prediction"></div>
+                                <div class="prediction-description" id="description"></div>
+                                <div class="confidence-meter">
+                                    <div class="confidence-label">Confidence:</div>
+                                    <div class="confidence-bar">
+                                        <div id="confidence-fill" class="confidence-fill"></div>
+                                    </div>
+                                    <div id="confidence" class="confidence-value">0%</div>
+                                </div>
+                            </div>
+
+                            <div class="severity-indicator" id="severity-indicator">
+                                <!-- Will be populated by JS based on prediction -->
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="result-tabs">
+                        <button class="tab-button active" data-tab="probabilities">Probabilities</button>
+                        <button class="tab-button" data-tab="information">Information</button>
+                        <button class="tab-button" data-tab="next-steps">Next Steps</button>
+                    </div>
+
+                    <div class="tab-content">
+                        <div id="probabilities-tab" class="tab-pane active">
+                            <h3>Class Probabilities</h3>
+                            <div id="probabilities" class="probabilities-grid"></div>
+                        </div>
+
+                        <div id="information-tab" class="tab-pane">
+                            <h3>About <span id="info-condition-name"></span></h3>
+                            <div id="condition-information"></div>
+
+                            <div class="info-resources">
+                                <h4>Additional Resources</h4>
+                                <ul id="resources-list">
+                                    <!-- Will be populated by JS based on prediction -->
+                                </ul>
+                            </div>
+                        </div>
+
+                        <div id="next-steps-tab" class="tab-pane">
+                            <h3>Recommended Next Steps</h3>
+                            <div class="next-steps-content">
+                                <div class="next-step">
+                                    <div class="step-icon"><i class="fas fa-user-md"></i></div>
+                                    <div class="step-content">
+                                        <h4>Consult a Dermatologist</h4>
+                                        <p>This AI analysis is not a medical diagnosis. If you have concerns about a skin lesion, please consult with a dermatologist or healthcare provider.</p>
+                                    </div>
+                                </div>
+
+                                <div class="next-step">
+                                    <div class="step-icon"><i class="fas fa-notes-medical"></i></div>
+                                    <div class="step-content">
+                                        <h4>Keep Records</h4>
+                                        <p>Save this analysis and take regular photos of the lesion to track any changes over time.</p>
+                                    </div>
+                                </div>
+
+                                <div class="next-step">
+                                    <div class="step-icon"><i class="fas fa-shield-alt"></i></div>
+                                    <div class="step-content">
+                                        <h4>Sun Protection</h4>
+                                        <p>Regardless of the analysis result, practice sun safety by using sunscreen, wearing protective clothing, and avoiding peak sun hours.</p>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="disclaimer-box">
+                                <p><strong>Important:</strong> SkinAI is an educational tool and not a substitute for professional medical advice. Always consult healthcare professionals for medical concerns.</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="result-actions">
+                        <button id="save-result" class="btn btn-secondary">
+                            <i class="fas fa-download"></i> Save Results
+                        </button>
+                        <button id="new-analysis" class="btn btn-primary">
+                            <i class="fas fa-redo"></i> New Analysis
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section class="faq-preview">
+    <div class="container">
+        <h2>Frequently Asked Questions</h2>
+        <div class="faq-items">
+            <div class="faq-item">
+                <div class="faq-question">
+                    <h3>How accurate is the AI analysis?</h3>
+                    <span class="faq-toggle"><i class="fas fa-chevron-down"></i></span>
+                </div>
+                <div class="faq-answer">
+                    <p>Our models have been trained on large datasets of dermatological images. MobileNetV2 has approximately 74% accuracy on the HAM10000 dataset, while EfficientNetB0 has about 69% accuracy on skin cancer classification. However, AI analysis should never replace professional medical diagnosis.</p>
+                </div>
+            </div>
+
+            <div class="faq-item">
+                <div class="faq-question">
+                    <h3>Is my data private and secure?</h3>
+                    <span class="faq-toggle"><i class="fas fa-chevron-down"></i></span>
+                </div>
+                <div class="faq-answer">
+                    <p>Yes. We do not store your uploaded images on our servers. All processing is done in real-time, and images are not saved after analysis. Your privacy is our priority.</p>
+                </div>
+            </div>
+
+            <div class="faq-item">
+                <div class="faq-question">
+                    <h3>Which skin conditions can the AI detect?</h3>
+                    <span class="faq-toggle"><i class="fas fa-chevron-down"></i></span>
+                </div>
+                <div class="faq-answer">
+                    <p>Our AI models can analyze seven types of skin lesions: Actinic keratoses, Basal cell carcinoma, Benign keratosis-like lesions, Dermatofibroma, Melanoma, Melanocytic nevi, and Vascular lesions.</p>
+                </div>
+            </div>
+        </div>
+
+        <div class="faq-more">
+            <a href="{{ url_for('faq') }}" class="btn btn-outline">View All FAQs</a>
+        </div>
+    </div>
+</section>
+{% endblock %}
+
+{% block extra_js %}
+<script src="{{ url_for('static', filename='js/detect.js') }}"></script>
+<script>
+    // Make class descriptions available to JavaScript
+    window.CLASS_DESCRIPTIONS = {{ class_descriptions|tojson }};
+    window.CONDITION_INFO = {{ condition_info|tojson }};
+</script>
+{% endblock %}

templates/faq.html

@@ -0,0 +1,9 @@
+{% extends "base.html" %}
+
+{% block content %}
+<section class="container">
+    <h1>Frequently Asked Questions</h1>
+    <!-- Add FAQ content -->
+</section>
+{% endblock %}
+

templates/index.html

@@ -0,0 +1,119 @@
+{% extends "base.html" %}
+
+{% block title %}SkinAI - AI-Powered Skin Cancer Detection{% endblock %}
+
+{% block content %}
+<section class="hero">
+    <div class="container">
+        <div class="hero-content">
+            <h1>Early Detection Saves Lives</h1>
+            <p class="hero-subtitle">Advanced AI-powered analysis of skin lesions using state-of-the-art deep learning models</p>
+            <div class="hero-buttons">
+                <a href="{{ url_for('detect') }}" class="btn btn-primary">Analyze Your Skin</a>
+                <a href="{{ url_for('about') }}" class="btn btn-secondary">Learn More</a>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section class="how-it-works">
+    <div class="container">
+        <h2 class="section-title">How It Works</h2>
+        <div class="steps">
+            <div class="step">
+                <div class="step-icon">
+                    <i class="fas fa-camera"></i>
+                </div>
+                <h3>Upload Image</h3>
+                <p>Take a clear photo of your skin lesion or upload an existing image</p>
+            </div>
+            <div class="step">
+                <div class="step-icon">
+                    <i class="fas fa-robot"></i>
+                </div>
+                <h3>AI Analysis</h3>
+                <p>Our advanced AI models analyze the image with high precision</p>
+            </div>
+            <div class="step">
+                <div class="step-icon">
+                    <i class="fas fa-chart-bar"></i>
+                </div>
+                <h3>Get Results</h3>
+                <p>Receive detailed analysis with probability scores for different conditions</p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section class="models">
+    <div class="container">
+        <h2 class="section-title">Our AI Models</h2>
+        <div class="model-cards">
+            <div class="model-card">
+                <div class="model-icon">
+                    <i class="fas fa-mobile-alt"></i>
+                </div>
+                <h3>MobileNetV2</h3>
+                <p>Lightweight CNN model optimized for mobile devices with 74% accuracy on the HAM10000 dataset</p>
+                <ul class="model-features">
+                    <li><i class="fas fa-check"></i> Fast processing</li>
+                    <li><i class="fas fa-check"></i> Low resource usage</li>
+                    <li><i class="fas fa-check"></i> Optimized for mobile</li>
+                </ul>
+            </div>
+
+            <div class="model-card">
+                <div class="model-icon">
+                    <i class="fas fa-brain"></i>
+                </div>
+                <h3>EfficientNetB0</h3>
+                <p>State-of-the-art architecture with optimal accuracy of 69% on skin cancer classification</p>
+                <ul class="model-features">
+                    <li><i class="fas fa-check"></i> Higher accuracy</li>
+                    <li><i class="fas fa-check"></i> Advanced feature extraction</li>
+                    <li><i class="fas fa-check"></i> Balanced performance</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section class="stats">
+    <div class="container">
+        <div class="stats-grid">
+            <div class="stat-item">
+                <div class="stat-number">5+</div>
+                <div class="stat-label">Million</div>
+                <div class="stat-desc">Skin cancer cases diagnosed yearly worldwide</div>
+            </div>
+            <div class="stat-item">
+                <div class="stat-number">99%</div>
+                <div class="stat-label">Survival Rate</div>
+                <div class="stat-desc">When melanoma is detected early</div>
+            </div>
+            <div class="stat-item">
+                <div class="stat-number">7</div>
+                <div class="stat-label">Types</div>
+                <div class="stat-desc">Of skin lesions our AI can detect</div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section class="cta">
+    <div class="container">
+        <h2>Ready to check your skin?</h2>
+        <p>Early detection is key to successful treatment of skin cancer.</p>
+        <a href="{{ url_for('detect') }}" class="btn btn-primary">Get Started Now</a>
+    </div>
+</section>
+
+<section class="disclaimer">
+    <div class="container">
+        <div class="disclaimer-box">
+            <h3><i class="fas fa-exclamation-triangle"></i> Medical Disclaimer</h3>
+            <p>SkinAI is designed to be an educational tool only and is not a substitute for professional medical advice, diagnosis, or treatment. Always seek the advice of your physician or other qualified health provider with any questions you may have regarding a medical condition.</p>
+        </div>
+    </div>
+</section>
+{% endblock %}

templates/privacy.html

@@ -0,0 +1,8 @@
+{% extends "base.html" %}
+
+{% block content %}
+<section class="container">
+    <h1>Privacy</h1>
+    <!-- Add contact form -->
+</section>
+{% endblock %}

templates/terms.html

@@ -0,0 +1,8 @@
+{% extends "base.html" %}
+
+{% block content %}
+<section class="container">
+    <h1>Terms</h1>
+    <!-- Add contact form -->
+</section>
+{% endblock %}