| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>DeepClean - Image Denoiser</title> |
| <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> |
| </head> |
| <body> |
| <div class="container"> |
| <header> |
| <h1>🎨 DeepClean</h1> |
| <p>CNN Autoencoder — Upload a noisy image or try a sample below</p> |
| </header> |
|
|
| |
| <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="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> |
|
|
| |
| <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"> |
| <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;"> |
| <h2>✨ Result</h2> |
| <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> |
|
|
