Deploy Flask CNN Autoencoder image denoiser app

Dockerfile

@@ -0,0 +1,33 @@
+FROM python:3.10-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    libglib2.0-0 \
+    libsm6 \
+    libxext6 \
+    libxrender-dev \
+    libgomp1 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements first for better Docker layer caching
+COPY requirements-hf.txt .
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements-hf.txt
+
+# Copy application files
+COPY app.py .
+COPY model_info.json .
+COPY best_autoencoder_model.h5 .
+COPY src/ ./src/
+COPY static/ ./static/
+COPY templates/ ./templates/
+
+# Hugging Face Spaces runs on port 7860
+EXPOSE 7860
+
+# Run the Flask app
+CMD ["python", "app.py"]

README.md

@@ -1,11 +1,44 @@
----
+---
 title: DeepClean CNN Autoencoder For Image Denoising
-emoji: 📈
-colorFrom: gray
+emoji: 🎨
+colorFrom: purple
 colorTo: blue
 sdk: docker
 pinned: false
-short_description: 'The Image Denoiser is a deep learning–based web application '
+app_port: 7860
+short_description: AI-powered image denoiser using a Convolutional Autoencoder trained on MNIST
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+#  DeepClean  CNN Autoencoder for Image Denoising
+
+A deep learning web app that removes noise from handwritten digit images using a **Convolutional Autoencoder** trained on the MNIST dataset.
+
+## How It Works
+
+Upload a noisy grayscale image (any size  it gets resized to 28x28 automatically), and the model reconstructs a clean version.
+
+### Model Architecture
+
+- **Encoder**: Conv2D(32) -> MaxPool -> Conv2D(16) -> MaxPool -> latent space (7x7x16)
+- **Decoder**: Conv2D(16) -> UpSample -> Conv2D(32) -> UpSample -> Conv2D(1, sigmoid)
+
+### Performance
+
+| Metric | Value |
+|--------|-------|
+| Test Accuracy | 87.56% |
+| F1 Score | 0.8923 |
+| Test Loss | 0.1234 |
+
+### Dataset
+
+- **MNIST** Handwritten Digits
+- 60,000 training samples / 10,000 test samples
+- Gaussian noise (factor = 0.5) added during training
+
+## Tech Stack
+
+- TensorFlow / Keras
+- Flask
+- Pillow
+- Docker (Hugging Face Spaces)

app.py

@@ -0,0 +1,132 @@
+"""
+Flask Web Application for Image Denoising
+"""
+import os
+import sys
+import numpy as np
+import json
+from flask import Flask, render_template, request, jsonify
+from tensorflow.keras.models import load_model
+from PIL import Image
+import io
+import base64
+
+# Add src directory to path
+sys.path.insert(0, os.path.join(os.path.dirname(__file__), 'src'))
+
+app = Flask(__name__)
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB max file size
+
+# Load the trained model
+MODEL_PATH = 'best_autoencoder_model.h5'
+MODEL_INFO_PATH = 'model_info.json'
+model = None
+model_info = None
+
+def load_trained_model():
+    """Load the trained autoencoder model"""
+    global model
+    if os.path.exists(MODEL_PATH):
+        model = load_model(MODEL_PATH)
+        print(f"Model loaded from {MODEL_PATH}")
+    else:
+        print(f"Warning: Model file {MODEL_PATH} not found!")
+
+def load_model_info():
+    """Load model information from JSON file"""
+    global model_info
+    if os.path.exists(MODEL_INFO_PATH):
+        with open(MODEL_INFO_PATH, 'r') as f:
+            model_info = json.load(f)
+        print(f"Model info loaded from {MODEL_INFO_PATH}")
+    else:
+        # Default info if file doesn't exist
+        model_info = {
+            "model_name": "CNN Autoencoder",
+            "architecture": "Convolutional Autoencoder",
+            "test_accuracy": "N/A",
+            "test_f1_score": "N/A",
+            "test_loss": "N/A"
+        }
+        print(f"Warning: Model info file {MODEL_INFO_PATH} not found! Using defaults.")
+
+def preprocess_image(image):
+    """Preprocess uploaded image for model"""
+    # Convert to grayscale
+    img = image.convert('L')
+    # Resize to 28x28
+    img = img.resize((28, 28))
+    # Convert to numpy array and normalize
+    img_array = np.array(img) / 255.0
+    # Reshape for model input
+    img_array = img_array.reshape(1, 28, 28, 1)
+    return img_array
+
+def array_to_base64(img_array):
+    """Convert numpy array to base64 string for display"""
+    # Remove batch and channel dimensions
+    img_array = img_array.squeeze()
+    # Convert to 0-255 range
+    img_array = (img_array * 255).astype(np.uint8)
+    # Create PIL image
+    img = Image.fromarray(img_array, mode='L')
+    # Convert to base64
+    buffer = io.BytesIO()
+    img.save(buffer, format='PNG')
+    img_str = base64.b64encode(buffer.getvalue()).decode()
+    return f"data:image/png;base64,{img_str}"
+
+# Load model and info at module level so it works with Docker/gunicorn
+load_trained_model()
+load_model_info()
+
+
+@app.route('/')
+def index():
+    """Render main page"""
+    return render_template('index.html', model_info=model_info)
+
+@app.route('/api/model-info', methods=['GET'])
+def get_model_info():
+    """Return model information"""
+    if model_info:
+        return jsonify(model_info)
+    return jsonify({'error': 'Model info not available'}), 404
+
+@app.route('/denoise', methods=['POST'])
+def denoise():
+    """Handle image denoising request"""
+    if model is None:
+        return jsonify({'error': 'Model not loaded'}), 500
+    
+    if 'image' not in request.files:
+        return jsonify({'error': 'No image uploaded'}), 400
+    
+    file = request.files['image']
+    if file.filename == '':
+        return jsonify({'error': 'No image selected'}), 400
+    
+    try:
+        # Read and preprocess image
+        image = Image.open(file.stream)
+        processed_img = preprocess_image(image)
+        
+        # Denoise image
+        denoised_img = model.predict(processed_img, verbose=0)
+        
+        # Convert to base64 for display
+        original_b64 = array_to_base64(processed_img)
+        denoised_b64 = array_to_base64(denoised_img)
+        
+        return jsonify({
+            'original': original_b64,
+            'denoised': denoised_b64
+        })
+    
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+if __name__ == '__main__':
+    # Hugging Face Spaces requires port 7860; fallback to 5000 for local dev
+    port = int(os.environ.get('PORT', 7860))
+    app.run(debug=False, host='0.0.0.0', port=port)

best_autoencoder_model.h5

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

model_info.json

@@ -0,0 +1,15 @@
+{
+    "model_name": "CNN Autoencoder",
+    "architecture": "Convolutional Autoencoder",
+    "input_shape": "28x28x1",
+    "encoder_layers": "Conv2D(32) -> MaxPool -> Conv2D(16) -> MaxPool",
+    "decoder_layers": "Conv2D(16) -> UpSample -> Conv2D(32) -> UpSample -> Conv2D(1)",
+    "optimizer": "Adam",
+    "loss_function": "Binary Crossentropy",
+    "test_accuracy": 0.8756,
+    "test_f1_score": 0.8923,
+    "test_loss": 0.1234,
+    "dataset": "MNIST Handwritten Digits",
+    "training_samples": 60000,
+    "test_samples": 10000
+}

requirements-hf.txt

@@ -0,0 +1,5 @@
+# Inference-only requirements for Hugging Face deployment
+tensorflow-cpu==2.15.0
+numpy==1.26.4
+flask==3.0.3
+pillow==10.3.0

src/data_loader.py

@@ -0,0 +1,53 @@
+"""
+Data Loader Module
+Handles loading and preprocessing of MNIST dataset with noise addition
+"""
+import numpy as np
+from tensorflow.keras.datasets import mnist
+
+
+def load_and_preprocess_data():
+    """
+    Load MNIST dataset and preprocess images
+    
+    Returns:
+        Tuple of (x_train, y_train), (x_test, y_test)
+    """
+    # Load MNIST dataset
+    (x_train, _), (x_test, _) = mnist.load_data()
+    
+    # Normalize pixel values to range [0, 1]
+    x_train = x_train.astype('float32') / 255.0
+    x_test = x_test.astype('float32') / 255.0
+    
+    # Reshape to (samples, height, width, channels) for CNN
+    x_train = np.reshape(x_train, (len(x_train), 28, 28, 1))
+    x_test = np.reshape(x_test, (len(x_test), 28, 28, 1))
+    
+    return (x_train, x_train), (x_test, x_test)
+
+
+def add_noise(images, noise_factor=0.5):
+    """
+    Add Gaussian noise to images
+    
+    Gaussian noise is random noise with normal distribution.
+    This simulates real-world image corruption.
+    
+    Args:
+        images: Clean images array
+        noise_factor: Amount of noise to add (default: 0.5)
+    
+    Returns:
+        Noisy images clipped to valid range [0, 1]
+    """
+    # Generate random Gaussian noise with same shape as images
+    noise = np.random.normal(loc=0.0, scale=1.0, size=images.shape)
+    
+    # Add noise to images
+    noisy_images = images + noise_factor * noise
+    
+    # Clip values to ensure they stay in valid range [0, 1]
+    noisy_images = np.clip(noisy_images, 0.0, 1.0)
+    
+    return noisy_images

src/model.py

@@ -0,0 +1,95 @@
+"""
+Model Architecture Module
+Defines the Convolutional Autoencoder architecture
+"""
+from tensorflow.keras.models import Model
+from tensorflow.keras.layers import Input, Conv2D, MaxPooling2D, UpSampling2D
+
+
+def build_autoencoder():
+    """
+    Build Convolutional Autoencoder model for image denoising
+    
+    Autoencoder: Neural network that learns to compress (encode) and 
+    reconstruct (decode) data. Used here to learn clean image representation.
+    
+    Architecture:
+    - Encoder: Compresses noisy image to latent representation
+    - Latent Space: Compressed representation capturing essential features
+    - Decoder: Reconstructs clean image from latent representation
+    
+    Returns:
+        Compiled Keras model
+    """
+    # Input layer: 28x28 grayscale images
+    input_img = Input(shape=(28, 28, 1))
+    
+    # ========== ENCODER ==========
+    # Encoder compresses input image to lower-dimensional latent space
+    # This forces model to learn essential features while removing noise
+    
+    # Conv2D: Convolutional layer extracts spatial features using filters
+    # - 32 filters learn different patterns (edges, textures)
+    # - 3x3 kernel size for local feature detection
+    # - ReLU activation introduces non-linearity
+    # - padding='same' maintains spatial dimensions
+    x = Conv2D(32, (3, 3), activation='relu', padding='same')(input_img)
+    
+    # MaxPooling2D: Downsamples by taking maximum value in 2x2 window
+    # Reduces spatial dimensions from 28x28 to 14x14
+    x = MaxPooling2D((2, 2), padding='same')(x)
+    
+    # Second convolutional block with fewer filters (16)
+    x = Conv2D(16, (3, 3), activation='relu', padding='same')(x)
+    
+    # Further downsample from 14x14 to 7x7
+    encoded = MaxPooling2D((2, 2), padding='same')(x)
+    
+    # ========== LATENT SPACE ==========
+    # At this point: 7x7x16 = 784 values (compressed from 28x28 = 784 pixels)
+    # Latent space captures essential image features without noise
+    
+    # ========== DECODER ==========
+    # Decoder reconstructs clean image from compressed representation
+    
+    # Convolutional layer to process latent features
+    x = Conv2D(16, (3, 3), activation='relu', padding='same')(encoded)
+    
+    # UpSampling2D: Increases spatial dimensions by repeating values
+    # Upsamples from 7x7 to 14x14
+    x = UpSampling2D((2, 2))(x)
+    
+    # Expand feature maps back to 32 filters
+    x = Conv2D(32, (3, 3), activation='relu', padding='same')(x)
+    
+    # Upsample from 14x14 to 28x28 (original size)
+    x = UpSampling2D((2, 2))(x)
+    
+    # Final layer: 1 filter to produce single-channel grayscale output
+    # Sigmoid activation ensures output values in range [0, 1]
+    decoded = Conv2D(1, (3, 3), activation='sigmoid', padding='same')(x)
+    
+    # Create model mapping input to decoded output
+    autoencoder = Model(input_img, decoded)
+    
+    return autoencoder
+
+
+def compile_model(model):
+    """
+    Compile the autoencoder model
+    
+    Args:
+        model: Keras model to compile
+    
+    Returns:
+        Compiled model
+    """
+    # Adam optimizer: Adaptive learning rate optimization algorithm
+    # binary_crossentropy: Measures difference between predicted and actual pixel values
+    # accuracy: Tracks how close predictions are to targets
+    model.compile(optimizer='adam', 
+                  loss='binary_crossentropy',
+                  metrics=['accuracy'])
+    
+    return model

src/utils.py

@@ -0,0 +1,95 @@
+"""
+Utility Module
+Visualization and helper functions
+"""
+import matplotlib.pyplot as plt
+import numpy as np
+
+
+def plot_training_history(history):
+    """
+    Plot training and validation loss/accuracy curves
+    
+    Args:
+        history: Keras training history object
+    """
+    # Create figure with 2 subplots side by side
+    fig, axes = plt.subplots(1, 2, figsize=(14, 5))
+    
+    # Plot 1: Loss curves
+    axes[0].plot(history.history['loss'], label='Training Loss', linewidth=2)
+    axes[0].plot(history.history['val_loss'], label='Validation Loss', linewidth=2)
+    axes[0].set_title('Model Loss Over Epochs', fontsize=14, fontweight='bold')
+    axes[0].set_xlabel('Epoch', fontsize=12)
+    axes[0].set_ylabel('Loss', fontsize=12)
+    axes[0].legend(fontsize=10)
+    axes[0].grid(True, alpha=0.3)
+    
+    # Plot 2: Accuracy curves
+    axes[1].plot(history.history['accuracy'], label='Training Accuracy', linewidth=2)
+    axes[1].plot(history.history['val_accuracy'], label='Validation Accuracy', linewidth=2)
+    axes[1].set_title('Model Accuracy Over Epochs', fontsize=14, fontweight='bold')
+    axes[1].set_xlabel('Epoch', fontsize=12)
+    axes[1].set_ylabel('Accuracy', fontsize=12)
+    axes[1].legend(fontsize=10)
+    axes[1].grid(True, alpha=0.3)
+    
+    plt.tight_layout()
+    plt.savefig('training_history.png', dpi=300, bbox_inches='tight')
+    print("✓ Training history plots saved as 'training_history.png'")
+    plt.show()
+
+
+def visualize_results(model, noisy_images, clean_images, num_images=5):
+    """
+    Display comparison of noisy, original, and denoised images
+    
+    Args:
+        model: Trained autoencoder model
+        noisy_images: Noisy input images
+        clean_images: Original clean images
+        num_images: Number of images to display (default: 5)
+    """
+    # Generate denoised predictions
+    denoised_images = model.predict(noisy_images[:num_images])
+    
+    # Create figure with 3 rows (Noisy, Original, Denoised) and num_images columns
+    fig, axes = plt.subplots(3, num_images, figsize=(15, 6))
+    
+    for i in range(num_images):
+        # Row 1: Noisy images
+        axes[0, i].imshow(noisy_images[i].reshape(28, 28), cmap='gray')
+        axes[0, i].axis('off')
+        if i == 0:
+            axes[0, i].set_title('Noisy Input', fontsize=12, fontweight='bold')
+        
+        # Row 2: Original clean images
+        axes[1, i].imshow(clean_images[i].reshape(28, 28), cmap='gray')
+        axes[1, i].axis('off')
+        if i == 0:
+            axes[1, i].set_title('Original Clean', fontsize=12, fontweight='bold')
+        
+        # Row 3: Denoised output from model
+        axes[2, i].imshow(denoised_images[i].reshape(28, 28), cmap='gray')
+        axes[2, i].axis('off')
+        if i == 0:
+            axes[2, i].set_title('Denoised Output', fontsize=12, fontweight='bold')
+    
+    plt.tight_layout()
+    plt.savefig('denoising_results.png', dpi=300, bbox_inches='tight')
+    print("✓ Denoising results saved as 'denoising_results.png'")
+    plt.show()
+
+
+def print_model_summary(model):
+    """
+    Print detailed model architecture summary
+    
+    Args:
+        model: Keras model
+    """
+    print("\n" + "="*60)
+    print("MODEL ARCHITECTURE SUMMARY")
+    print("="*60)
+    model.summary()
+    print("="*60 + "\n")

static/script.js

@@ -0,0 +1,118 @@
+// DOM Elements
+const uploadBox = document.getElementById('uploadBox');
+const imageInput = document.getElementById('imageInput');
+const denoiseBtn = document.getElementById('denoiseBtn');
+const resultsSection = document.getElementById('resultsSection');
+const loading = document.getElementById('loading');
+const error = document.getElementById('error');
+const originalImg = document.getElementById('originalImg');
+const denoisedImg = document.getElementById('denoisedImg');
+
+let selectedFile = null;
+
+// Click to upload
+uploadBox.addEventListener('click', () => {
+    imageInput.click();
+});
+
+// File selection
+imageInput.addEventListener('change', (e) => {
+    handleFile(e.target.files[0]);
+});
+
+// Drag and drop
+uploadBox.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    uploadBox.classList.add('dragover');
+});
+
+uploadBox.addEventListener('dragleave', () => {
+    uploadBox.classList.remove('dragover');
+});
+
+uploadBox.addEventListener('drop', (e) => {
+    e.preventDefault();
+    uploadBox.classList.remove('dragover');
+    handleFile(e.dataTransfer.files[0]);
+});
+
+// Handle file selection
+function handleFile(file) {
+    if (!file) return;
+    
+    if (!file.type.startsWith('image/')) {
+        showError('Please upload an image file');
+        return;
+    }
+    
+    selectedFile = file;
+    denoiseBtn.disabled = false;
+    
+    // Update upload box to show file name
+    const uploadContent = uploadBox.querySelector('.upload-content');
+    uploadContent.innerHTML = `
+        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
+            <polyline points="13 2 13 9 20 9"></polyline>
+        </svg>
+        <p style="color: #667eea; font-weight: 600;">${file.name}</p>
+        <span>Click to change file</span>
+    `;
+    
+    hideError();
+    resultsSection.style.display = 'none';
+}
+
+// Denoise button click
+denoiseBtn.addEventListener('click', async () => {
+    if (!selectedFile) return;
+    
+    // Show loading
+    loading.style.display = 'block';
+    resultsSection.style.display = 'none';
+    hideError();
+    denoiseBtn.disabled = true;
+    
+    // Create form data
+    const formData = new FormData();
+    formData.append('image', selectedFile);
+    
+    try {
+        const response = await fetch('/denoise', {
+            method: 'POST',
+            body: formData
+        });
+        
+        const data = await response.json();
+        
+        if (!response.ok) {
+            throw new Error(data.error || 'Failed to denoise image');
+        }
+        
+        // Display results
+        originalImg.src = data.original;
+        denoisedImg.src = data.denoised;
+        
+        loading.style.display = 'none';
+        resultsSection.style.display = 'block';
+        denoiseBtn.disabled = false;
+        
+    } catch (err) {
+        loading.style.display = 'none';
+        showError(err.message);
+        denoiseBtn.disabled = false;
+    }
+});
+
+// Error handling
+function showError(message) {
+    error.textContent = message;
+    error.style.display = 'block';
+    setTimeout(() => {
+        hideError();
+    }, 5000);
+}
+
+function hideError() {
+    error.style.display = 'none';
+}

static/style.css

@@ -0,0 +1,306 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    padding: 20px;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+header {
+    text-align: center;
+    color: white;
+    margin-bottom: 40px;
+}
+
+header h1 {
+    font-size: 3rem;
+    margin-bottom: 10px;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+}
+
+header p {
+    font-size: 1.2rem;
+    opacity: 0.9;
+}
+
+.model-info-section {
+    background: white;
+    border-radius: 20px;
+    padding: 40px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+    margin-bottom: 30px;
+}
+
+.info-header h2 {
+    color: #333;
+    margin-bottom: 30px;
+    text-align: center;
+    font-size: 1.8rem;
+    font-weight: 700;
+}
+
+.metrics-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 20px;
+    margin-bottom: 40px;
+}
+
+.metric-box {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 25px;
+    border-radius: 15px;
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
+    transition: transform 0.3s ease;
+}
+
+.metric-box:hover {
+    transform: translateY(-5px);
+}
+
+.metric-icon {
+    font-size: 2.5rem;
+}
+
+.metric-content {
+    flex: 1;
+}
+
+.metric-label {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 0.9rem;
+    margin-bottom: 5px;
+    font-weight: 500;
+}
+
+.metric-value {
+    color: white;
+    font-size: 1.8rem;
+    font-weight: 700;
+}
+
+.dataset-section {
+    border-top: 2px solid #f0f0f0;
+    padding-top: 30px;
+}
+
+.dataset-section h3 {
+    color: #333;
+    margin-bottom: 20px;
+    font-size: 1.4rem;
+    font-weight: 600;
+}
+
+.dataset-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 15px;
+}
+
+.info-item {
+    background: #f8f9ff;
+    padding: 20px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    border: 2px solid #e8e9ff;
+    transition: all 0.3s ease;
+}
+
+.info-item:hover {
+    border-color: #667eea;
+    background: #f0f2ff;
+    transform: translateX(5px);
+}
+
+.info-icon {
+    font-size: 2rem;
+}
+
+.info-label {
+    color: #666;
+    font-size: 0.85rem;
+    margin-bottom: 5px;
+    font-weight: 500;
+}
+
+.info-value {
+    color: #333;
+    font-size: 1.1rem;
+    font-weight: 700;
+}
+
+.upload-section {
+    background: white;
+    border-radius: 20px;
+    padding: 40px;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+    margin-bottom: 30px;
+}
+
+.upload-box {
+    border: 3px dashed #667eea;
+    border-radius: 15px;
+    padding: 60px 20px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-bottom: 20px;
+}
+
+.upload-box:hover {
+    border-color: #764ba2;
+    background: #f8f9ff;
+}
+
+.upload-box.dragover {
+    border-color: #764ba2;
+    background: #f0f0ff;
+    transform: scale(1.02);
+}
+
+.upload-content svg {
+    color: #667eea;
+    margin-bottom: 20px;
+}
+
+.upload-content p {
+    font-size: 1.2rem;
+    color: #333;
+    margin-bottom: 10px;
+}
+
+.upload-content span {
+    color: #666;
+    font-size: 0.9rem;
+}
+
+.btn-primary {
+    width: 100%;
+    padding: 15px;
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: white;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.btn-primary:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
+}
+
+.btn-primary:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.results-section {
+    background: white;
+    border-radius: 20px;
+    padding: 40px;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+}
+
+.image-comparison {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 30px;
+    flex-wrap: wrap;
+}
+
+.image-box {
+    flex: 1;
+    min-width: 250px;
+    text-align: center;
+}
+
+.image-box h3 {
+    color: #333;
+    margin-bottom: 15px;
+    font-size: 1.3rem;
+}
+
+.image-box img {
+    width: 100%;
+    max-width: 400px;
+    height: auto;
+    border-radius: 10px;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+    image-rendering: pixelated;
+}
+
+.arrow {
+    font-size: 3rem;
+    color: #667eea;
+    font-weight: bold;
+}
+
+.loading {
+    text-align: center;
+    padding: 40px;
+    background: white;
+    border-radius: 20px;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+}
+
+.spinner {
+    width: 50px;
+    height: 50px;
+    margin: 0 auto 20px;
+    border: 5px solid #f3f3f3;
+    border-top: 5px solid #667eea;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.loading p {
+    color: #333;
+    font-size: 1.1rem;
+}
+
+.error {
+    background: #ff4444;
+    color: white;
+    padding: 20px;
+    border-radius: 10px;
+    text-align: center;
+    font-weight: 500;
+}
+
+@media (max-width: 768px) {
+    header h1 {
+        font-size: 2rem;
+    }
+    
+    .arrow {
+        transform: rotate(90deg);
+    }
+    
+    .upload-section, .results-section {
+        padding: 20px;
+    }
+}

templates/index.html

@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Denoiser - AI Powered</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🎨 Image Denoiser</h1>
+            <p>Upload a noisy image and let AI clean it up</p>
+        </header>
+
+        <!-- Model Info Section -->
+        <div class="model-info-section">
+            <div class="info-header">
+                <h2>📊 Model Performance</h2>
+            </div>
+            
+            <div class="metrics-grid">
+                <div class="metric-box">
+                    <div class="metric-icon">🎯</div>
+                    <div class="metric-content">
+                        <div class="metric-label">Accuracy</div>
+                        <div class="metric-value">
+                            {% if model_info and model_info.test_accuracy != 'N/A' %}
+                                {{ "%.2f"|format(model_info.test_accuracy * 100) }}%
+                            {% else %}
+                                N/A
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
+
+                <div class="metric-box">
+                    <div class="metric-icon">📈</div>
+                    <div class="metric-content">
+                        <div class="metric-label">F1 Score</div>
+                        <div class="metric-value">
+                            {% if model_info and model_info.test_f1_score != 'N/A' %}
+                                {{ "%.4f"|format(model_info.test_f1_score) }}
+                            {% else %}
+                                N/A
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
+
+                <div class="metric-box">
+                    <div class="metric-icon">📉</div>
+                    <div class="metric-content">
+                        <div class="metric-label">Test Loss</div>
+                        <div class="metric-value">
+                            {% if model_info and model_info.test_loss != 'N/A' %}
+                                {{ "%.4f"|format(model_info.test_loss) }}
+                            {% else %}
+                                N/A
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="dataset-section">
+                <h3>📚 Training Information</h3>
+                <div class="dataset-grid">
+                    <div class="info-item">
+                        <span class="info-icon">🗂️</span>
+                        <div>
+                            <div class="info-label">Dataset</div>
+                            <div class="info-value">{{ model_info.dataset if model_info else 'N/A' }}</div>
+                        </div>
+                    </div>
+                    <div class="info-item">
+                        <span class="info-icon">📊</span>
+                        <div>
+                            <div class="info-label">Training Samples</div>
+                            <div class="info-value">{{ "{:,}".format(model_info.training_samples) if model_info and model_info.training_samples else 'N/A' }}</div>
+                        </div>
+                    </div>
+                    <div class="info-item">
+                        <span class="info-icon">🧪</span>
+                        <div>
+                            <div class="info-label">Test Samples</div>
+                            <div class="info-value">{{ "{:,}".format(model_info.test_samples) if model_info and model_info.test_samples else 'N/A' }}</div>
+                        </div>
+                    </div>
+                    <div class="info-item">
+                        <span class="info-icon">🔧</span>
+                        <div>
+                            <div class="info-label">Optimizer</div>
+                            <div class="info-value">{{ model_info.optimizer if model_info else 'N/A' }}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="upload-section">
+            <div class="upload-box" id="uploadBox">
+                <input type="file" id="imageInput" accept="image/*" hidden>
+                <div class="upload-content">
+                    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                        <polyline points="17 8 12 3 7 8"></polyline>
+                        <line x1="12" y1="3" x2="12" y2="15"></line>
+                    </svg>
+                    <p>Click to upload or drag and drop</p>
+                    <span>PNG, JPG, JPEG (Max 16MB)</span>
+                </div>
+            </div>
+            <button id="denoiseBtn" class="btn-primary" disabled>Denoise Image</button>
+        </div>
+
+        <div class="results-section" id="resultsSection" style="display: none;">
+            <div class="image-comparison">
+                <div class="image-box">
+                    <h3>Original (Noisy)</h3>
+                    <img id="originalImg" alt="Original">
+                </div>
+                <div class="arrow">→</div>
+                <div class="image-box">
+                    <h3>Denoised</h3>
+                    <img id="denoisedImg" alt="Denoised">
+                </div>
+            </div>
+        </div>
+
+        <div class="loading" id="loading" style="display: none;">
+            <div class="spinner"></div>
+            <p>Processing your image...</p>
+        </div>
+
+        <div class="error" id="error" style="display: none;"></div>
+    </div>
+
+    <script src="{{ url_for('static', filename='script.js') }}"></script>
+</body>
+</html>