Add sample images with one-click denoising UI

Dockerfile

@@ -29,6 +29,7 @@ COPY best_autoencoder_model.h5 .
 COPY src/ ./src/
 COPY static/ ./static/
 COPY templates/ ./templates/
+COPY test_images/ ./test_images/
 
 # Hugging Face Spaces runs on port 7860
 EXPOSE 7860

app.py

@@ -10,6 +10,7 @@ app.config["MAX_CONTENT_LENGTH"] = 16 * 1024 * 1024
 
 MODEL_PATH = "best_autoencoder_model.h5"
 MODEL_INFO_PATH = "model_info.json"
+SAMPLES_DIR = "test_images"
 model = None
 model_info = None
 
@@ -23,8 +24,6 @@ def load_trained_model():
     from tensorflow.keras.models import Model
     from tensorflow.keras.layers import Input, Conv2D, MaxPooling2D, UpSampling2D
     try:
-        # Rebuild the exact same architecture, then load weights only.
-        # This bypasses Keras version deserialization issues with InputLayer config.
         inp = Input(shape=(28, 28, 1))
         x = Conv2D(32, (3, 3), activation="relu", padding="same")(inp)
         x = MaxPooling2D((2, 2), padding="same")(x)
@@ -89,6 +88,48 @@ def get_model_info():
     return jsonify({"error": "not available"}), 404
 
 
+@app.route("/api/samples")
+def get_samples():
+    """Return list of sample images as base64 thumbnails"""
+    samples = []
+    if os.path.exists(SAMPLES_DIR):
+        for fname in sorted(os.listdir(SAMPLES_DIR)):
+            if fname.lower().endswith((".png", ".jpg", ".jpeg")):
+                fpath = os.path.join(SAMPLES_DIR, fname)
+                with open(fpath, "rb") as f:
+                    b64 = base64.b64encode(f.read()).decode()
+                # Parse label from filename e.g. noisy_digit_2_8.png -> Digit 2
+                parts = fname.replace(".png", "").split("_")
+                label = f"Digit {parts[2]}" if len(parts) >= 3 else fname
+                samples.append({
+                    "filename": fname,
+                    "label": label,
+                    "thumbnail": f"data:image/png;base64,{b64}"
+                })
+    return jsonify(samples)
+
+
+@app.route("/api/denoise-sample", methods=["POST"])
+def denoise_sample():
+    """Denoise a built-in sample image by filename"""
+    if model is None:
+        return jsonify({"error": "Model not loaded"}), 500
+    data = request.get_json()
+    filename = data.get("filename", "")
+    # Sanitize: only allow filenames, no path traversal
+    filename = os.path.basename(filename)
+    fpath = os.path.join(SAMPLES_DIR, filename)
+    if not os.path.exists(fpath):
+        return jsonify({"error": "Sample not found"}), 404
+    try:
+        image = Image.open(fpath)
+        proc = preprocess_image(image)
+        denoised = model.predict(proc, verbose=0)
+        return jsonify({"original": array_to_base64(proc), "denoised": array_to_base64(denoised)})
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+
 @app.route("/denoise", methods=["POST"])
 def denoise():
     if model is None:

static/script.js

@@ -7,112 +7,133 @@ const loading = document.getElementById('loading');
 const error = document.getElementById('error');
 const originalImg = document.getElementById('originalImg');
 const denoisedImg = document.getElementById('denoisedImg');
+const samplesGrid = document.getElementById('samplesGrid');
 
 let selectedFile = null;
 
-// Click to upload
-uploadBox.addEventListener('click', () => {
-    imageInput.click();
-});
+// ── Load sample images on page load ──────────────────────────────────────────
+async function loadSamples() {
+    try {
+        const res = await fetch('/api/samples');
+        const samples = await res.json();
+        samplesGrid.innerHTML = '';
+        samples.forEach(s => {
+            const card = document.createElement('div');
+            card.className = 'sample-card';
+            card.innerHTML = `
+                <img src="${s.thumbnail}" alt="${s.label}" title="Click to denoise">
+                <span>${s.label}</span>
+            `;
+            card.addEventListener('click', () => denoiseSample(s.filename, card));
+            samplesGrid.appendChild(card);
+        });
+    } catch (e) {
+        samplesGrid.innerHTML = '<p style="color:#999">Could not load samples.</p>';
+    }
+}
 
-// File selection
-imageInput.addEventListener('change', (e) => {
-    handleFile(e.target.files[0]);
-});
+async function denoiseSample(filename, card) {
+    // Highlight selected card
+    document.querySelectorAll('.sample-card').forEach(c => c.classList.remove('active'));
+    card.classList.add('active');
+
+    showLoading();
+    hideError();
+
+    try {
+        const res = await fetch('/api/denoise-sample', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ filename })
+        });
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error || 'Failed');
+        showResults(data.original, data.denoised);
+    } catch (err) {
+        hideLoading();
+        showError(err.message);
+    }
+}
+
+// ── Upload flow ───────────────────────────────────────────────────────────────
+uploadBox.addEventListener('click', () => imageInput.click());
+
+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('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;
-    }
-    
+    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>
+        <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';
+    showLoading();
     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';
+        const res = await fetch('/denoise', { method: 'POST', body: formData });
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error || 'Failed to denoise image');
+        showResults(data.original, data.denoised);
         denoiseBtn.disabled = false;
-        
     } catch (err) {
-        loading.style.display = 'none';
+        hideLoading();
         showError(err.message);
         denoiseBtn.disabled = false;
     }
 });
 
-// Error handling
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function showResults(original, denoised) {
+    originalImg.src = original;
+    denoisedImg.src = denoised;
+    hideLoading();
+    resultsSection.style.display = 'block';
+    resultsSection.scrollIntoView({ behavior: 'smooth' });
+}
+
+function showLoading() {
+    loading.style.display = 'block';
+    resultsSection.style.display = 'none';
+}
+
+function hideLoading() { loading.style.display = 'none'; }
+
 function showError(message) {
     error.textContent = message;
     error.style.display = 'block';
-    setTimeout(() => {
-        hideError();
-    }, 5000);
+    setTimeout(hideError, 5000);
 }
 
-function hideError() {
-    error.style.display = 'none';
-}
+function hideError() { error.style.display = 'none'; }
+
+// Init
+loadSamples();

static/style.css

@@ -304,3 +304,87 @@ header p {
         padding: 20px;
     }
 }
+
+/* ── Sample images section ─────────────────────────────────────── */
+.samples-section {
+    background: white;
+    border-radius: 20px;
+    padding: 40px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+    margin-bottom: 30px;
+}
+
+.samples-section h2 {
+    color: #333;
+    font-size: 1.8rem;
+    font-weight: 700;
+    margin-bottom: 8px;
+    text-align: center;
+}
+
+.samples-subtitle {
+    text-align: center;
+    color: #666;
+    margin-bottom: 24px;
+    font-size: 1rem;
+}
+
+.samples-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    justify-content: center;
+}
+
+.samples-loading {
+    color: #999;
+    font-size: 1rem;
+}
+
+.sample-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    padding: 12px;
+    border-radius: 12px;
+    border: 2px solid #e8e9ff;
+    background: #f8f9ff;
+    transition: all 0.2s ease;
+    width: 100px;
+}
+
+.sample-card:hover {
+    border-color: #667eea;
+    transform: translateY(-4px);
+    box-shadow: 0 6px 16px rgba(102,126,234,0.25);
+}
+
+.sample-card.active {
+    border-color: #764ba2;
+    background: #f0eaff;
+    box-shadow: 0 6px 16px rgba(118,75,162,0.3);
+}
+
+.sample-card img {
+    width: 64px;
+    height: 64px;
+    image-rendering: pixelated;
+    border-radius: 6px;
+}
+
+.sample-card span {
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: #555;
+}
+
+.upload-section h2,
+.results-section h2 {
+    color: #333;
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 20px;
+    text-align: center;
+}

templates/index.html

@@ -3,14 +3,14 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Image Denoiser - AI Powered</title>
+    <title>DeepClean - Image Denoiser</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>
+            <h1>🎨 DeepClean</h1>
+            <p>CNN Autoencoder — Upload a noisy image or try a sample below</p>
         </header>
 
         <!-- Model Info Section -->
@@ -18,7 +18,6 @@
             <div class="info-header">
                 <h2>📊 Model Performance</h2>
             </div>
-            
             <div class="metrics-grid">
                 <div class="metric-box">
                     <div class="metric-icon">🎯</div>
@@ -27,13 +26,10 @@
                         <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 %}
+                            {% else %}N/A{% endif %}
                         </div>
                     </div>
                 </div>
-
                 <div class="metric-box">
                     <div class="metric-icon">📈</div>
                     <div class="metric-content">
@@ -41,13 +37,10 @@
                         <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 %}
+                            {% else %}N/A{% endif %}
                         </div>
                     </div>
                 </div>
-
                 <div class="metric-box">
                     <div class="metric-icon">📉</div>
                     <div class="metric-content">
@@ -55,14 +48,11 @@
                         <div class="metric-value">
                             {% if model_info and model_info.test_loss != 'N/A' %}
                                 {{ "%.4f"|format(model_info.test_loss) }}
-                            {% else %}
-                                N/A
-                            {% endif %}
+                            {% else %}N/A{% endif %}
                         </div>
                     </div>
                 </div>
             </div>
-
             <div class="dataset-section">
                 <h3>📚 Training Information</h3>
                 <div class="dataset-grid">
@@ -98,7 +88,18 @@
             </div>
         </div>
 
+        <!-- Sample Images Section -->
+        <div class="samples-section">
+            <h2>🖼️ Try a Sample Image</h2>
+            <p class="samples-subtitle">Click any noisy digit below to instantly denoise it</p>
+            <div class="samples-grid" id="samplesGrid">
+                <div class="samples-loading">Loading samples...</div>
+            </div>
+        </div>
+
+        <!-- Upload Section -->
         <div class="upload-section">
+            <h2>📤 Or Upload Your Own</h2>
             <div class="upload-box" id="uploadBox">
                 <input type="file" id="imageInput" accept="image/*" hidden>
                 <div class="upload-content">
@@ -114,7 +115,9 @@
             <button id="denoiseBtn" class="btn-primary" disabled>Denoise Image</button>
         </div>
 
+        <!-- Results Section -->
         <div class="results-section" id="resultsSection" style="display: none;">
+            <h2>✨ Result</h2>
             <div class="image-comparison">
                 <div class="image-box">
                     <h3>Original (Noisy)</h3>