Feat: Craete frontend and backend for the project

static/css/style.css

@@ -0,0 +1,278 @@
+:root {
+    --primary-color: #6366f1;
+    --background-dark: #0f172a;
+    --text-light: #e2e8f0;
+    --text-gray: #94a3b8;
+    --card-bg: #1e293b;
+    --gradient-start: #818cf8;
+    --gradient-end: #6366f1;
+    --gradient-hover-start: #6366f1;
+    --gradient-hover-end: #4f46e5;
+}
+
+body {
+    font-family: 'Inter', sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: var(--background-dark);
+    color: var(--text-light);
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+h1 {
+    font-size: 3rem;
+    font-weight: 700;
+    text-align: center;
+    margin-bottom: 2rem;
+    background: linear-gradient(to right, #818cf8, #6366f1);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.button-container {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    margin: 2rem 0;
+}
+
+.btn {
+    padding: 0.75rem 1.5rem;
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    color: white;
+    border: none;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    text-decoration: none;
+    font-size: 1rem;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    position: relative;
+    z-index: 1;
+    overflow: hidden;
+}
+
+.btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, var(--gradient-hover-start), var(--gradient-hover-end));
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    z-index: -1;
+}
+
+.btn:hover::before {
+    opacity: 1;
+}
+
+.btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.5);
+}
+
+.card {
+    background-color: var(--card-bg);
+    border-radius: 1rem;
+    padding: 2rem;
+    margin: 1rem 0;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    position: relative;
+}
+
+.card::before {
+    content: '';
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    right: -1px;
+    bottom: -1px;
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    border-radius: 1rem;
+    z-index: -1;
+    opacity: 0.1;
+    transition: opacity 0.3s ease;
+}
+
+.card:hover::before {
+    opacity: 0.2;
+}
+
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: var(--text-gray);
+}
+
+input[type="number"],
+select {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid;
+    border-image: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)) 1;
+    border-radius: 0.5rem;
+    background-color: #374151;
+    color: var(--text-light);
+    margin-bottom: 0.5rem;
+    transition: all 0.3s ease;
+}
+
+input[type="number"]:focus,
+select:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
+}
+
+#drawing-canvas {
+    background-color: white;
+    border-radius: 1rem;
+    margin: 2rem auto;
+    display: block;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.training-form {
+    background-color: var(--card-bg);
+    border-radius: 1rem;
+    padding: 2rem;
+    margin-top: 2rem;
+}
+
+.results {
+    background-color: var(--card-bg);
+    border-radius: 1rem;
+    padding: 2rem;
+    margin-top: 2rem;
+}
+
+#training-logs {
+    font-family: 'Roboto Mono', monospace;
+    color: var(--text-gray);
+    padding: 1rem;
+    border-radius: 0.5rem;
+    background-color: #374151;
+    margin-top: 1rem;
+    border: 1px solid;
+    border-image: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)) 1;
+}
+
+.plot-container {
+    background-color: var(--card-bg);
+    border-radius: 1rem;
+    padding: 1rem;
+    margin: 1rem 0;
+    border: 1px solid;
+    border-image: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)) 1;
+}
+
+h2, h3 {
+    background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 1.5rem;
+}
+
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1.5rem;
+    margin-top: 2rem;
+}
+
+.hero-text {
+    font-size: 1.25rem;
+    text-align: center;
+    color: var(--text-light);
+    line-height: 1.6;
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 1rem;
+    }
+
+    h1 {
+        font-size: 2.5rem;
+    }
+
+    .features-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+.models-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    margin-bottom: 2rem;
+}
+
+.model-config {
+    background: var(--card-bg);
+    padding: 1.5rem;
+    border-radius: 1rem;
+    position: relative;
+}
+
+.model-config::before {
+    content: '';
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    right: -1px;
+    bottom: -1px;
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    border-radius: 1rem;
+    z-index: -1;
+    opacity: 0.1;
+    transition: opacity 0.3s ease;
+}
+
+.model-config:hover::before {
+    opacity: 0.2;
+}
+
+.kernel-inputs {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.5rem;
+}
+
+#comparison-logs {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+}
+
+.comparison-model {
+    padding: 1rem;
+    background: #374151;
+    border-radius: 0.5rem;
+}
+
+.comparison-model h4 {
+    margin-top: 0;
+    color: var(--text-light);
+}
+
+@media (max-width: 768px) {
+    .models-grid {
+        grid-template-columns: 1fr;
+    }
+
+    #comparison-logs {
+        grid-template-columns: 1fr;
+    }
+} 

static/js/inference.js

@@ -0,0 +1,99 @@
+let canvas, ctx;
+
+window.onload = function() {
+    canvas = document.getElementById('drawing-canvas');
+    ctx = canvas.getContext('2d');
+    
+    setupCanvas();
+};
+
+function setupCanvas() {
+    ctx.fillStyle = "white";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    
+    let drawing = false;
+    
+    canvas.addEventListener('mousedown', startDrawing);
+    canvas.addEventListener('mousemove', draw);
+    canvas.addEventListener('mouseup', stopDrawing);
+    canvas.addEventListener('mouseout', stopDrawing);
+    
+    function startDrawing(e) {
+        drawing = true;
+        draw(e);
+    }
+    
+    function draw(e) {
+        if (!drawing) return;
+        
+        const rect = canvas.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        
+        ctx.lineWidth = 15;
+        ctx.lineCap = 'round';
+        ctx.strokeStyle = 'black';
+        ctx.lineTo(x, y);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+    }
+    
+    function stopDrawing() {
+        drawing = false;
+        ctx.beginPath();
+    }
+}
+
+function clearCanvas() {
+    ctx.fillStyle = "white";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+}
+
+async function predict() {
+    const modelSelect = document.getElementById('model-select');
+    const selectedModel = modelSelect.value;
+    
+    if (!selectedModel) {
+        alert('Please train a model first');
+        return;
+    }
+    
+    const imageData = canvas.toDataURL('image/png');
+    
+    try {
+        const response = await fetch('/api/inference', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ 
+                image: imageData,
+                model_name: selectedModel
+            })
+        });
+        
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.detail || 'Prediction failed');
+        }
+        
+        const data = await response.json();
+        displayPrediction(data.prediction);
+    } catch (error) {
+        console.error('Error:', error);
+        alert(error.message || 'Error during prediction');
+    }
+}
+
+function displayPrediction(prediction) {
+    const resultDiv = document.getElementById('prediction-result');
+    resultDiv.classList.remove('hidden');
+    resultDiv.innerHTML = `
+        <h2>Prediction Result</h2>
+        <p class="prediction-text">Predicted Digit: ${prediction}</p>
+        <div class="confidence-bar">
+            <div class="confidence-level" style="width: 100%"></div>
+        </div>
+    `;
+} 

static/js/train.js

@@ -0,0 +1,229 @@
+let ws;
+let lossChart;
+let accuracyChart;
+
+function showTrainingForm(type) {
+    const singleForm = document.getElementById('single-model-form');
+    const compareForm = document.getElementById('compare-models-form');
+    
+    if (type === 'single') {
+        singleForm.classList.remove('hidden');
+        compareForm.classList.add('hidden');
+    } else {
+        singleForm.classList.add('hidden');
+        compareForm.classList.remove('hidden');
+    }
+}
+
+function initializeCharts() {
+    const lossData = [{
+        name: 'Training Loss',
+        x: [],
+        y: [],
+        type: 'scatter'
+    }, {
+        name: 'Validation Loss',
+        x: [],
+        y: [],
+        type: 'scatter'
+    }];
+
+    const accuracyData = [{
+        name: 'Training Accuracy',
+        x: [],
+        y: [],
+        type: 'scatter'
+    }, {
+        name: 'Validation Accuracy',
+        x: [],
+        y: [],
+        type: 'scatter'
+    }];
+
+    Plotly.newPlot('loss-plot', lossData, {
+        title: 'Training and Validation Loss',
+        xaxis: { title: 'Iterations' },
+        yaxis: { title: 'Loss' }
+    });
+
+    Plotly.newPlot('accuracy-plot', accuracyData, {
+        title: 'Training and Validation Accuracy',
+        xaxis: { title: 'Iterations' },
+        yaxis: { title: 'Accuracy (%)' }
+    });
+}
+
+function updateCharts(data) {
+    const iteration = data.epoch * data.batch;
+    
+    Plotly.extendTraces('loss-plot', {
+        x: [[iteration], [iteration]],
+        y: [[data.train_loss], [data.val_loss]]
+    }, [0, 1]);
+
+    Plotly.extendTraces('accuracy-plot', {
+        x: [[iteration], [iteration]],
+        y: [[data.train_acc], [data.val_acc]]
+    }, [0, 1]);
+
+    // Update training logs
+    const logsDiv = document.getElementById('training-logs');
+    logsDiv.innerHTML = `
+        <p>Epoch: ${data.epoch + 1}</p>
+        <p>Training Loss: ${data.train_loss.toFixed(4)}</p>
+        <p>Training Accuracy: ${data.train_acc.toFixed(2)}%</p>
+        <p>Validation Loss: ${data.val_loss.toFixed(4)}</p>
+        <p>Validation Accuracy: ${data.val_acc.toFixed(2)}%</p>
+    `;
+}
+
+async function trainSingleModel() {
+    const config = {
+        kernels: [
+            parseInt(document.getElementById('kernel1').value),
+            parseInt(document.getElementById('kernel2').value),
+            parseInt(document.getElementById('kernel3').value)
+        ],
+        optimizer: document.getElementById('optimizer').value,
+        batch_size: parseInt(document.getElementById('batch_size').value),
+        epochs: parseInt(document.getElementById('epochs').value)
+    };
+
+    // Show progress section and initialize charts
+    document.getElementById('training-progress').classList.remove('hidden');
+    initializeCharts();
+
+    // Connect to WebSocket
+    ws = new WebSocket(`ws://${window.location.host}/ws/train`);
+    ws.onmessage = function(event) {
+        const data = JSON.parse(event.data);
+        updateCharts(data);
+    };
+
+    try {
+        const response = await fetch('/api/train_single', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(config)
+        });
+        const data = await response.json();
+        
+        if (data.status === 'success') {
+            alert('Training completed successfully!');
+        }
+    } catch (error) {
+        console.error('Error:', error);
+        alert('Error during training. Please check console for details.');
+    }
+}
+
+async function compareModels() {
+    const config = {
+        model1: {
+            kernels: [
+                parseInt(document.getElementById('model1_kernel1').value),
+                parseInt(document.getElementById('model1_kernel2').value),
+                parseInt(document.getElementById('model1_kernel3').value)
+            ],
+            optimizer: document.getElementById('model1_optimizer').value,
+            batch_size: parseInt(document.getElementById('model1_batch_size').value),
+            epochs: parseInt(document.getElementById('model1_epochs').value)
+        },
+        model2: {
+            kernels: [
+                parseInt(document.getElementById('model2_kernel1').value),
+                parseInt(document.getElementById('model2_kernel2').value),
+                parseInt(document.getElementById('model2_kernel3').value)
+            ],
+            optimizer: document.getElementById('model2_optimizer').value,
+            batch_size: parseInt(document.getElementById('model2_batch_size').value),
+            epochs: parseInt(document.getElementById('model2_epochs').value)
+        }
+    };
+
+    // Show comparison progress section
+    document.getElementById('comparison-progress').classList.remove('hidden');
+    initializeComparisonCharts();
+
+    try {
+        const response = await fetch('/api/train_compare', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(config)
+        });
+        const data = await response.json();
+        
+        if (data.status === 'success') {
+            displayComparisonResults(data);
+            alert('Model comparison completed successfully!');
+        }
+    } catch (error) {
+        console.error('Error:', error);
+        alert('Error during model comparison. Please check console for details.');
+    }
+}
+
+function initializeComparisonCharts() {
+    const lossData = [{
+        name: 'Model 1 Loss',
+        x: [],
+        y: [],
+        type: 'scatter'
+    }, {
+        name: 'Model 2 Loss',
+        x: [],
+        y: [],
+        type: 'scatter'
+    }];
+
+    const accuracyData = [{
+        name: 'Model 1 Accuracy',
+        x: [],
+        y: [],
+        type: 'scatter'
+    }, {
+        name: 'Model 2 Accuracy',
+        x: [],
+        y: [],
+        type: 'scatter'
+    }];
+
+    Plotly.newPlot('comparison-loss-plot', lossData, {
+        title: 'Loss Comparison',
+        xaxis: { title: 'Iterations' },
+        yaxis: { title: 'Loss' }
+    });
+
+    Plotly.newPlot('comparison-accuracy-plot', accuracyData, {
+        title: 'Accuracy Comparison',
+        xaxis: { title: 'Iterations' },
+        yaxis: { title: 'Accuracy (%)' }
+    });
+}
+
+function displayComparisonResults(data) {
+    const logsDiv = document.getElementById('comparison-logs');
+    logsDiv.innerHTML = `
+        <div class="comparison-model">
+            <h4>Model 1</h4>
+            <p>Final Loss: ${data.model1_results.history.train_loss.slice(-1)[0].toFixed(4)}</p>
+            <p>Final Accuracy: ${data.model1_results.history.train_acc.slice(-1)[0].toFixed(2)}%</p>
+            <p>Model Name: ${data.model1_results.model_name}</p>
+        </div>
+        <div class="comparison-model">
+            <h4>Model 2</h4>
+            <p>Final Loss: ${data.model2_results.history.train_loss.slice(-1)[0].toFixed(4)}</p>
+            <p>Final Accuracy: ${data.model2_results.history.train_acc.slice(-1)[0].toFixed(2)}%</p>
+            <p>Model Name: ${data.model2_results.model_name}</p>
+        </div>
+    `;
+}
+
+function displayResults(data) {
+    const resultsDiv = document.getElementById('training-results');
+    // Display training results
+} 

static/js/train_compare.js

@@ -0,0 +1,105 @@
+let ws;
+
+function initializeComparisonCharts() {
+    const lossData = [{
+        name: 'Model 1 Loss',
+        x: [],
+        y: [],
+        type: 'scatter'
+    }, {
+        name: 'Model 2 Loss',
+        x: [],
+        y: [],
+        type: 'scatter'
+    }];
+
+    const accuracyData = [{
+        name: 'Model 1 Accuracy',
+        x: [],
+        y: [],
+        type: 'scatter'
+    }, {
+        name: 'Model 2 Accuracy',
+        x: [],
+        y: [],
+        type: 'scatter'
+    }];
+
+    Plotly.newPlot('comparison-loss-plot', lossData, {
+        title: 'Loss Comparison',
+        xaxis: { title: 'Iterations' },
+        yaxis: { title: 'Loss' }
+    });
+
+    Plotly.newPlot('comparison-accuracy-plot', accuracyData, {
+        title: 'Accuracy Comparison',
+        xaxis: { title: 'Iterations' },
+        yaxis: { title: 'Accuracy (%)' }
+    });
+}
+
+async function compareModels() {
+    const config = {
+        model1: {
+            kernels: [
+                parseInt(document.getElementById('model1_kernel1').value),
+                parseInt(document.getElementById('model1_kernel2').value),
+                parseInt(document.getElementById('model1_kernel3').value)
+            ],
+            optimizer: document.getElementById('model1_optimizer').value,
+            batch_size: parseInt(document.getElementById('model1_batch_size').value),
+            epochs: parseInt(document.getElementById('model1_epochs').value)
+        },
+        model2: {
+            kernels: [
+                parseInt(document.getElementById('model2_kernel1').value),
+                parseInt(document.getElementById('model2_kernel2').value),
+                parseInt(document.getElementById('model2_kernel3').value)
+            ],
+            optimizer: document.getElementById('model2_optimizer').value,
+            batch_size: parseInt(document.getElementById('model2_batch_size').value),
+            epochs: parseInt(document.getElementById('model2_epochs').value)
+        }
+    };
+
+    // Show comparison progress section
+    document.getElementById('comparison-progress').classList.remove('hidden');
+    initializeComparisonCharts();
+
+    try {
+        const response = await fetch('/api/train_compare', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(config)
+        });
+        const data = await response.json();
+        
+        if (data.status === 'success') {
+            displayComparisonResults(data);
+            alert('Model comparison completed successfully!');
+        }
+    } catch (error) {
+        console.error('Error:', error);
+        alert('Error during model comparison. Please check console for details.');
+    }
+}
+
+function displayComparisonResults(data) {
+    const logsDiv = document.getElementById('comparison-logs');
+    logsDiv.innerHTML = `
+        <div class="comparison-model">
+            <h4>Model 1</h4>
+            <p>Final Loss: ${data.model1_results.history.train_loss.slice(-1)[0].toFixed(4)}</p>
+            <p>Final Accuracy: ${data.model1_results.history.train_acc.slice(-1)[0].toFixed(2)}%</p>
+            <p>Model Name: ${data.model1_results.model_name}</p>
+        </div>
+        <div class="comparison-model">
+            <h4>Model 2</h4>
+            <p>Final Loss: ${data.model2_results.history.train_loss.slice(-1)[0].toFixed(4)}</p>
+            <p>Final Accuracy: ${data.model2_results.history.train_acc.slice(-1)[0].toFixed(2)}%</p>
+            <p>Model Name: ${data.model2_results.model_name}</p>
+        </div>
+    `;
+} 

static/js/train_single.js

@@ -0,0 +1,121 @@
+let ws;
+
+function initializeCharts() {
+    const lossData = [{
+        name: 'Training Loss',
+        x: [],
+        y: [],
+        type: 'scatter'
+    }, {
+        name: 'Validation Loss',
+        x: [],
+        y: [],
+        type: 'scatter'
+    }];
+
+    const accuracyData = [{
+        name: 'Training Accuracy',
+        x: [],
+        y: [],
+        type: 'scatter'
+    }, {
+        name: 'Validation Accuracy',
+        x: [],
+        y: [],
+        type: 'scatter'
+    }];
+
+    Plotly.newPlot('loss-plot', lossData, {
+        title: 'Training and Validation Loss',
+        xaxis: { title: 'Iterations' },
+        yaxis: { title: 'Loss' }
+    });
+
+    Plotly.newPlot('accuracy-plot', accuracyData, {
+        title: 'Training and Validation Accuracy',
+        xaxis: { title: 'Iterations' },
+        yaxis: { title: 'Accuracy (%)' }
+    });
+}
+
+function updateCharts(data) {
+    const iteration = data.epoch * data.batch;
+    
+    Plotly.extendTraces('loss-plot', {
+        x: [[iteration], [iteration]],
+        y: [[data.train_loss], [data.val_loss]]
+    }, [0, 1]);
+
+    Plotly.extendTraces('accuracy-plot', {
+        x: [[iteration], [iteration]],
+        y: [[data.train_acc], [data.val_acc]]
+    }, [0, 1]);
+
+    // Update training logs
+    const logsDiv = document.getElementById('training-logs');
+    logsDiv.innerHTML = `
+        <p>Epoch: ${data.epoch + 1}</p>
+        <p>Training Loss: ${data.train_loss.toFixed(4)}</p>
+        <p>Training Accuracy: ${data.train_acc.toFixed(2)}%</p>
+        <p>Validation Loss: ${data.val_loss.toFixed(4)}</p>
+        <p>Validation Accuracy: ${data.val_acc.toFixed(2)}%</p>
+    `;
+}
+
+async function trainModel() {
+    console.log("Training started...");  // Debug log
+    const config = {
+        kernels: [
+            parseInt(document.getElementById('kernel1').value),
+            parseInt(document.getElementById('kernel2').value),
+            parseInt(document.getElementById('kernel3').value)
+        ],
+        optimizer: document.getElementById('optimizer').value,
+        batch_size: parseInt(document.getElementById('batch_size').value),
+        epochs: parseInt(document.getElementById('epochs').value)
+    };
+
+    console.log("Config:", config);  // Debug log
+
+    // Show progress section and initialize charts
+    document.getElementById('training-progress').classList.remove('hidden');
+    initializeCharts();
+
+    try {
+        // Connect to WebSocket
+        console.log("Connecting to WebSocket...");  // Debug log
+        ws = new WebSocket(`ws://${window.location.host}/ws/train`);
+        
+        ws.onopen = function() {
+            console.log("WebSocket connection established");
+            // Send configuration once connected
+            ws.send(JSON.stringify(config));
+            console.log("Config sent to server");  // Debug log
+        };
+
+        ws.onmessage = function(event) {
+            console.log("Received message:", event.data);  // Debug log
+            const data = JSON.parse(event.data);
+            if (data.status === "completed") {
+                alert('Training completed successfully!');
+            } else if (data.status === "error") {
+                alert('Error during training: ' + data.message);
+            } else {
+                updateCharts(data);
+            }
+        };
+
+        ws.onerror = function(error) {
+            console.error('WebSocket error:', error);
+            alert('Error connecting to training server');
+        };
+
+        ws.onclose = function() {
+            console.log('WebSocket connection closed');
+        };
+
+    } catch (error) {
+        console.error('Error:', error);
+        alert('Error during training: ' + error.message);
+    }
+} 

templates/index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MNIST Digit Classification</title>
+    <link rel="stylesheet" href="{{ url_for('static', path='/css/style.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <h1>MNIST Digit Classification</h1>
+        <div class="card">
+            <p class="hero-text">Train and test neural networks for handwritten digit recognition using the MNIST dataset.</p>
+        </div>
+        <div class="button-container">
+            <a href="/train" class="btn">Train Model</a>
+            <a href="/inference" class="btn">Test Model</a>
+        </div>
+        
+        <div class="features-grid">
+            <div class="card">
+                <h3>Train Models</h3>
+                <p>Configure and train custom neural networks with different architectures.</p>
+            </div>
+            <div class="card">
+                <h3>Compare Performance</h3>
+                <p>Train multiple models simultaneously and compare their performance.</p>
+            </div>
+            <div class="card">
+                <h3>Real-time Visualization</h3>
+                <p>Monitor training progress with live loss and accuracy curves.</p>
+            </div>
+            <div class="card">
+                <h3>Interactive Testing</h3>
+                <p>Draw digits and test the model's prediction capabilities in real-time.</p>
+            </div>
+        </div>
+    </div>
+</body>
+</html> 

templates/inference.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Test Model - MNIST</title>
+    <link rel="stylesheet" href="{{ url_for('static', path='/css/style.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <h1>Test Your Model</h1>
+        <div class="card">
+            <p>Draw a digit (0-9) in the canvas below and click "Predict" to test the model.</p>
+            
+            <div class="form-group">
+                <label for="model-select">Select Model</label>
+                <select id="model-select" required>
+                    {% if available_models %}
+                        {% for model in available_models %}
+                            <option value="{{ model }}">{{ model }}</option>
+                        {% endfor %}
+                    {% else %}
+                        <option value="">No models available - Train a model first</option>
+                    {% endif %}
+                </select>
+            </div>
+        </div>
+        
+        <canvas id="drawing-canvas" width="280" height="280"></canvas>
+        <div class="button-container">
+            <button onclick="clearCanvas()" class="btn">Clear Canvas</button>
+            <button onclick="predict()" class="btn" {% if not available_models %}disabled{% endif %}>Predict</button>
+        </div>
+        <div id="prediction-result" class="card hidden">
+            <!-- Prediction result will be displayed here -->
+        </div>
+    </div>
+    <script src="{{ url_for('static', path='/js/inference.js') }}"></script>
+</body>
+</html> 

templates/train.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Train Models - MNIST</title>
+    <link rel="stylesheet" href="{{ url_for('static', path='/css/style.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Mono&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <h1>Train Your Model</h1>
+        <div class="button-container">
+            <a href="/train/single" class="btn">Train Single Model</a>
+            <a href="/train/compare" class="btn">Compare Models</a>
+        </div>
+    </div>
+</body>
+</html> 

templates/train_compare.html

@@ -0,0 +1,420 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Compare Models - MNIST</title>
+    <link rel="stylesheet" href="{{ url_for('static', path='/css/style.css') }}">
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+</head>
+<body>
+    <div class="container">
+        <h1>Compare Models</h1>
+        <div class="models-grid">
+            <!-- Model 1 Configuration -->
+            <div class="model-config">
+                <h3>Model 1</h3>
+                <div class="network-config">
+                    <h4>Network Architecture</h4>
+                    <div class="block-config">
+                        <div class="block">
+                            <label for="model1_block1">Block-1:</label>
+                            <select id="model1_block1" name="block1" class="form-select">
+                                <option value="8">8</option>
+                                <option value="16">16</option>
+                                <option value="32" selected>32</option>
+                                <option value="64">64</option>
+                                <option value="128">128</option>
+                            </select>
+                        </div>
+                        
+                        <div class="block">
+                            <label for="model1_block2">Block-2:</label>
+                            <select id="model1_block2" name="block2" class="form-select">
+                                <option value="8">8</option>
+                                <option value="16">16</option>
+                                <option value="32">32</option>
+                                <option value="64" selected>64</option>
+                                <option value="128">128</option>
+                            </select>
+                        </div>
+                        
+                        <div class="block">
+                            <label for="model1_block3">Block-3:</label>
+                            <select id="model1_block3" name="block3" class="form-select">
+                                <option value="8">8</option>
+                                <option value="16">16</option>
+                                <option value="32">32</option>
+                                <option value="64">64</option>
+                                <option value="128" selected>128</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="training-config">
+                    <div class="config-item">
+                        <label for="model1_optimizer">Optimizer:</label>
+                        <select id="model1_optimizer" name="optimizer">
+                            <option value="SGD" selected>SGD</option>
+                            <option value="Adam">Adam</option>
+                        </select>
+                    </div>
+                    <div class="config-item">
+                        <label for="model1_batch_size">Batch Size:</label>
+                        <select id="model1_batch_size" name="batch_size">
+                            <option value="32">32</option>
+                            <option value="64" selected>64</option>
+                            <option value="128">128</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Model 2 Configuration -->
+            <div class="model-config">
+                <h3>Model 2</h3>
+                <div class="network-config">
+                    <h4>Network Architecture</h4>
+                    <div class="block-config">
+                        <div class="block">
+                            <label for="model2_block1">Block-1:</label>
+                            <select id="model2_block1" name="block1" class="form-select">
+                                <option value="8">8</option>
+                                <option value="16">16</option>
+                                <option value="32" selected>32</option>
+                                <option value="64">64</option>
+                                <option value="128">128</option>
+                            </select>
+                        </div>
+                        
+                        <div class="block">
+                            <label for="model2_block2">Block-2:</label>
+                            <select id="model2_block2" name="block2" class="form-select">
+                                <option value="8">8</option>
+                                <option value="16">16</option>
+                                <option value="32">32</option>
+                                <option value="64" selected>64</option>
+                                <option value="128">128</option>
+                            </select>
+                        </div>
+                        
+                        <div class="block">
+                            <label for="model2_block3">Block-3:</label>
+                            <select id="model2_block3" name="block3" class="form-select">
+                                <option value="8">8</option>
+                                <option value="16">16</option>
+                                <option value="32">32</option>
+                                <option value="64">64</option>
+                                <option value="128" selected>128</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="training-config">
+                    <div class="config-item">
+                        <label for="model2_optimizer">Optimizer:</label>
+                        <select id="model2_optimizer" name="optimizer">
+                            <option value="SGD" selected>SGD</option>
+                            <option value="Adam">Adam</option>
+                        </select>
+                    </div>
+                    <div class="config-item">
+                        <label for="model2_batch_size">Batch Size:</label>
+                        <select id="model2_batch_size" name="batch_size">
+                            <option value="32">32</option>
+                            <option value="64" selected>64</option>
+                            <option value="128">128</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Training Controls -->
+        <div class="controls">
+            <button id="startComparison" onclick="startComparison()">Start Comparison</button>
+            <button id="stopComparison" onclick="stopComparison()" disabled>Stop Comparison</button>
+        </div>
+
+        <!-- Training Progress -->
+        <div class="charts-container">
+            <div id="lossChart"></div>
+            <div id="accuracyChart"></div>
+        </div>
+    </div>
+
+    <style>
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        .models-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+            margin-bottom: 20px;
+        }
+
+        .model-config {
+            padding: 20px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            margin-bottom: 20px;
+        }
+
+        .network-config {
+            margin-bottom: 20px;
+        }
+
+        .network-config h4 {
+            margin: 0 0 15px 0;
+            font-size: 1.1em;
+        }
+
+        .block-config {
+            display: flex;
+            justify-content: space-between;
+            gap: 20px;
+        }
+
+        .block {
+            flex: 1;
+        }
+
+        .block label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: bold;
+        }
+
+        .training-config {
+            display: flex;
+            gap: 20px;
+        }
+
+        .config-item {
+            flex: 1;
+        }
+
+        .config-item label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: bold;
+        }
+
+        select {
+            width: 100%;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+
+        .controls {
+            margin: 20px 0;
+            text-align: center;
+        }
+
+        button {
+            padding: 10px 20px;
+            margin-right: 10px;
+            border: none;
+            border-radius: 4px;
+            background-color: #007bff;
+            color: white;
+            cursor: pointer;
+        }
+
+        button:disabled {
+            background-color: #ccc;
+            cursor: not-allowed;
+        }
+
+        .charts-container {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            margin-top: 20px;
+        }
+
+        #lossChart, #accuracyChart {
+            height: 400px;
+            width: 100%;
+        }
+
+        h4 {
+            margin: 0 0 10px 0;
+        }
+
+        .section-title {
+            color: white;
+            font-weight: bold;
+            margin: 0 0 10px 0;
+            font-size: 1.1em;
+            text-transform: uppercase;
+        }
+
+        .network-config .section-title {
+            margin: 0 0 15px 0;
+        }
+
+        .config-item .section-title {
+            margin-bottom: 5px;
+        }
+    </style>
+
+    <script>
+        let ws;
+        let lossChart;
+        let accuracyChart;
+
+        // Initialize charts
+        document.addEventListener('DOMContentLoaded', function() {
+            // Loss chart configuration
+            const lossData = [
+                {
+                    x: [],
+                    y: [],
+                    name: 'Model 1 Training Loss',
+                    type: 'scatter'
+                },
+                {
+                    x: [],
+                    y: [],
+                    name: 'Model 2 Training Loss',
+                    type: 'scatter'
+                }
+            ];
+
+            const lossLayout = {
+                title: 'Training Loss Comparison',
+                xaxis: {
+                    title: 'Iterations',
+                    rangemode: 'nonnegative'
+                },
+                yaxis: {
+                    title: 'Loss',
+                    rangemode: 'nonnegative'
+                }
+            };
+
+            // Accuracy chart configuration
+            const accuracyData = [
+                {
+                    x: [],
+                    y: [],
+                    name: 'Model 1 Training Accuracy',
+                    type: 'scatter'
+                },
+                {
+                    x: [],
+                    y: [],
+                    name: 'Model 2 Training Accuracy',
+                    type: 'scatter'
+                }
+            ];
+
+            const accuracyLayout = {
+                title: 'Training Accuracy Comparison',
+                xaxis: {
+                    title: 'Iterations',
+                    rangemode: 'nonnegative'
+                },
+                yaxis: {
+                    title: 'Accuracy (%)',
+                    range: [0, 100]
+                }
+            };
+
+            // Create charts
+            Plotly.newPlot('lossChart', lossData, lossLayout);
+            Plotly.newPlot('accuracyChart', accuracyData, accuracyLayout);
+        });
+
+        function startComparison() {
+            // Disable start button and enable stop button
+            document.getElementById('startComparison').disabled = true;
+            document.getElementById('stopComparison').disabled = false;
+
+            // Get configuration for both models
+            const model1Config = {
+                block1: parseInt(document.getElementById('model1_block1').value),
+                block2: parseInt(document.getElementById('model1_block2').value),
+                block3: parseInt(document.getElementById('model1_block3').value),
+                optimizer: document.getElementById('model1_optimizer').value,
+                batch_size: parseInt(document.getElementById('model1_batch_size').value)
+            };
+
+            const model2Config = {
+                block1: parseInt(document.getElementById('model2_block1').value),
+                block2: parseInt(document.getElementById('model2_block2').value),
+                block3: parseInt(document.getElementById('model2_block3').value),
+                optimizer: document.getElementById('model2_optimizer').value,
+                batch_size: parseInt(document.getElementById('model2_batch_size').value)
+            };
+
+            // Setup WebSocket connection
+            ws = new WebSocket(`ws://${window.location.host}/ws/compare`);
+            
+            ws.onmessage = function(event) {
+                const data = JSON.parse(event.data);
+                
+                if (data.type === 'training_update') {
+                    const modelIndex = data.data.model_id - 1;  // 0 for model1, 1 for model2
+                    
+                    // Update training metrics
+                    Plotly.extendTraces('lossChart', {
+                        x: [[data.data.step]],
+                        y: [[data.data.train_loss]]
+                    }, [modelIndex]);
+
+                    Plotly.extendTraces('accuracyChart', {
+                        x: [[data.data.step]],
+                        y: [[data.data.train_acc]]
+                    }, [modelIndex]);
+                }
+                else if (data.type === 'validation_update') {
+                    const modelIndex = data.data.model_id - 1;
+                    
+                    // Add validation points
+                    Plotly.addTraces('lossChart', {
+                        x: [data.data.step],
+                        y: [data.data.val_loss],
+                        name: `Model ${data.data.model_id} Validation Loss`,
+                        mode: 'markers',
+                        marker: { size: 8 }
+                    });
+
+                    Plotly.addTraces('accuracyChart', {
+                        x: [data.data.step],
+                        y: [data.data.val_acc],
+                        name: `Model ${data.data.model_id} Validation Accuracy`,
+                        mode: 'markers',
+                        marker: { size: 8 }
+                    });
+                }
+                else if (data.type === 'comparison_complete') {
+                    document.getElementById('startComparison').disabled = false;
+                    document.getElementById('stopComparison').disabled = true;
+                }
+            };
+
+            // Start comparison
+            ws.send(JSON.stringify({
+                type: 'start_comparison',
+                model1: model1Config,
+                model2: model2Config
+            }));
+        }
+
+        function stopComparison() {
+            if (ws) {
+                ws.close();
+            }
+            document.getElementById('startComparison').disabled = false;
+            document.getElementById('stopComparison').disabled = true;
+        }
+    </script>
+</body>
+</html> 

templates/train_single.html

@@ -0,0 +1,374 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Train Single Model - MNIST</title>
+    <link rel="stylesheet" href="{{ url_for('static', path='/css/style.css') }}">
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+</head>
+<body>
+    <div class="container">
+        <h1>Train Single Model</h1>
+        
+        <!-- Network Architecture Section -->
+        <div class="model-config">
+            <h3>Model Configuration</h3>
+            <div class="network-config">
+                <h4>Network Architecture</h4>
+                <div class="block-config">
+                    <div class="block">
+                        <label for="block1">Block-1:</label>
+                        <select id="block1" name="block1" class="form-select">
+                            <option value="8">8</option>
+                            <option value="16">16</option>
+                            <option value="32" selected>32</option>
+                            <option value="64">64</option>
+                            <option value="128">128</option>
+                        </select>
+                    </div>
+                    
+                    <div class="block">
+                        <label for="block2">Block-2:</label>
+                        <select id="block2" name="block2" class="form-select">
+                            <option value="8">8</option>
+                            <option value="16">16</option>
+                            <option value="32">32</option>
+                            <option value="64" selected>64</option>
+                            <option value="128">128</option>
+                        </select>
+                    </div>
+                    
+                    <div class="block">
+                        <label for="block3">Block-3:</label>
+                        <select id="block3" name="block3" class="form-select">
+                            <option value="8">8</option>
+                            <option value="16">16</option>
+                            <option value="32">32</option>
+                            <option value="64">64</option>
+                            <option value="128" selected>128</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+            <div class="training-config">
+                <div class="config-item">
+                    <label for="optimizer">Optimizer:</label>
+                    <select id="optimizer" name="optimizer">
+                        <option value="SGD" selected>SGD</option>
+                        <option value="Adam">Adam</option>
+                    </select>
+                </div>
+                <div class="config-item">
+                    <label for="batch_size">Batch Size:</label>
+                    <select id="batch_size" name="batch_size">
+                        <option value="32">32</option>
+                        <option value="64" selected>64</option>
+                        <option value="128">128</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+
+        <!-- Training Controls -->
+        <div class="controls">
+            <button id="startTraining" onclick="startTraining()">Start Training</button>
+            <button id="stopTraining" onclick="stopTraining()" disabled>Stop Training</button>
+        </div>
+
+        <!-- Training Progress -->
+        <div class="charts-container">
+            <div id="lossChart"></div>
+            <div id="accuracyChart"></div>
+        </div>
+    </div>
+
+    <script>
+        let ws;
+        let lossChart;
+        let accuracyChart;
+
+        // Initialize charts
+        document.addEventListener('DOMContentLoaded', function() {
+            // Loss chart configuration
+            const lossData = [
+                {
+                    x: [],
+                    y: [],
+                    name: 'Training Loss',
+                    type: 'scatter'
+                },
+                {
+                    x: [],
+                    y: [],
+                    name: 'Validation Loss',
+                    type: 'scatter'
+                }
+            ];
+
+            const lossLayout = {
+                title: 'Loss',
+                xaxis: {
+                    title: 'Iterations',
+                    rangemode: 'nonnegative'
+                },
+                yaxis: {
+                    title: 'Loss',
+                    rangemode: 'nonnegative'
+                }
+            };
+
+            // Accuracy chart configuration
+            const accuracyData = [
+                {
+                    x: [],
+                    y: [],
+                    name: 'Training Accuracy',
+                    type: 'scatter'
+                },
+                {
+                    x: [],
+                    y: [],
+                    name: 'Validation Accuracy',
+                    type: 'scatter'
+                }
+            ];
+
+            const accuracyLayout = {
+                title: 'Accuracy',
+                xaxis: {
+                    title: 'Iterations',
+                    rangemode: 'nonnegative'
+                },
+                yaxis: {
+                    title: 'Accuracy (%)',
+                    range: [0, 100]
+                }
+            };
+
+            // Create charts
+            Plotly.newPlot('lossChart', lossData, lossLayout);
+            Plotly.newPlot('accuracyChart', accuracyData, accuracyLayout);
+        });
+
+        function startTraining() {
+            // Disable start button and enable stop button
+            document.getElementById('startTraining').disabled = true;
+            document.getElementById('stopTraining').disabled = false;
+
+            // Clear previous charts
+            Plotly.purge('lossChart');
+            Plotly.purge('accuracyChart');
+
+            // Initialize new charts
+            const lossData = [
+                {
+                    x: [],
+                    y: [],
+                    name: 'Training Loss',
+                    type: 'scatter'
+                },
+                {
+                    x: [],
+                    y: [],
+                    name: 'Validation Loss',
+                    type: 'scatter'
+                }
+            ];
+
+            const accuracyData = [
+                {
+                    x: [],
+                    y: [],
+                    name: 'Training Accuracy',
+                    type: 'scatter'
+                },
+                {
+                    x: [],
+                    y: [],
+                    name: 'Validation Accuracy',
+                    type: 'scatter'
+                }
+            ];
+
+            Plotly.newPlot('lossChart', lossData, {
+                title: 'Loss',
+                xaxis: { title: 'Iterations', rangemode: 'nonnegative' },
+                yaxis: { title: 'Loss', rangemode: 'nonnegative' }
+            });
+
+            Plotly.newPlot('accuracyChart', accuracyData, {
+                title: 'Accuracy',
+                xaxis: { title: 'Iterations', rangemode: 'nonnegative' },
+                yaxis: { title: 'Accuracy (%)', range: [0, 100] }
+            });
+
+            // Setup WebSocket connection
+            ws = new WebSocket(`ws://${window.location.host}/ws/train`);
+            
+            ws.onopen = function() {
+                console.log("WebSocket connection established");
+                // Send configuration through WebSocket
+                const config = {
+                    block1: parseInt(document.getElementById('block1').value),
+                    block2: parseInt(document.getElementById('block2').value),
+                    block3: parseInt(document.getElementById('block3').value),
+                    optimizer: document.getElementById('optimizer').value,
+                    batch_size: parseInt(document.getElementById('batch_size').value),
+                    epochs: 1  // Add default epochs value
+                };
+                ws.send(JSON.stringify(config));
+            };
+            
+            ws.onerror = function(error) {
+                console.error("WebSocket error:", error);
+                stopTraining();
+                alert("Error connecting to training server");
+            };
+            
+            ws.onclose = function() {
+                console.log("WebSocket connection closed");
+                stopTraining();
+            };
+            
+            ws.onmessage = function(event) {
+                const data = JSON.parse(event.data);
+                
+                if (data.type === 'training_update') {
+                    // Update training metrics (trace index 0)
+                    Plotly.extendTraces('lossChart', {
+                        x: [[data.data.step]],
+                        y: [[data.data.train_loss]]
+                    }, [0]);
+
+                    Plotly.extendTraces('accuracyChart', {
+                        x: [[data.data.step]],
+                        y: [[data.data.train_acc]]
+                    }, [0]);
+                }
+                else if (data.type === 'validation_update') {
+                    // Update validation metrics (trace index 1)
+                    Plotly.extendTraces('lossChart', {
+                        x: [[data.data.step]],
+                        y: [[data.data.val_loss]]
+                    }, [1]);
+
+                    Plotly.extendTraces('accuracyChart', {
+                        x: [[data.data.step]],
+                        y: [[data.data.val_acc]]
+                    }, [1]);
+                }
+                else if (data.type === 'training_complete') {
+                    alert(data.data.message);
+                    stopTraining();
+                }
+                else if (data.type === 'training_error') {
+                    alert(data.data.message);
+                    stopTraining();
+                }
+            };
+        }
+
+        function stopTraining() {
+            if (ws) {
+                ws.close();
+            }
+            document.getElementById('startTraining').disabled = false;
+            document.getElementById('stopTraining').disabled = true;
+        }
+    </script>
+
+    <style>
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        .model-config {
+            padding: 20px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            margin-bottom: 20px;
+        }
+
+        .network-config {
+            margin-bottom: 20px;
+        }
+
+        .network-config h4 {
+            margin: 0 0 15px 0;
+            font-size: 1.1em;
+        }
+
+        .block-config {
+            display: flex;
+            justify-content: space-between;
+            gap: 20px;
+        }
+
+        .block {
+            flex: 1;
+        }
+
+        .block label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: bold;
+        }
+
+        .training-config {
+            display: flex;
+            gap: 20px;
+        }
+
+        .config-item {
+            flex: 1;
+        }
+
+        .config-item label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: bold;
+        }
+
+        select {
+            width: 100%;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+
+        .controls {
+            margin: 20px 0;
+        }
+
+        button {
+            padding: 10px 20px;
+            margin-right: 10px;
+            border: none;
+            border-radius: 4px;
+            background-color: #007bff;
+            color: white;
+            cursor: pointer;
+        }
+
+        button:disabled {
+            background-color: #ccc;
+            cursor: not-allowed;
+        }
+
+        .charts-container {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            margin-top: 20px;
+        }
+
+        #lossChart, #accuracyChart {
+            height: 400px;
+            width: 100%;
+        }
+    </style>
+</body>
+</html>