Spaces:

IbrahimaThioye
/

sam_yolo_flask

Running

App Files Files Community

IThioye commited on 3 days ago

Commit

4874e86

•

1 Parent(s): cb72b38

added templates

Browse files

Files changed (3) hide show

templates/index.html +554 -0
templates/retrain.html +242 -0
templates/yolo.html +355 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,554 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Segmentation Tool</title>
+    <style>
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        .controls {
+            margin-bottom: 20px;
+            position: sticky;
+            top: 0;
+            background: white;
+            z-index: 100;
+            padding: 10px 0;
+        }
+        .button {
+            padding: 8px 16px;
+            margin-right: 10px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        .button.active {
+            background-color: #45a049;
+        }
+        .button:disabled {
+            background-color: #cccccc;
+            cursor: not-allowed;
+        }
+        .image-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+        }
+        .image-wrapper {
+            position: relative;
+            border: 1px solid #ddd;
+            padding: 10px;
+        }
+        .canvas-wrapper {
+            position: relative;
+            overflow: hidden;
+            width: 100%;
+            height: 100%;
+        }
+        canvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+            width: 100%;
+            height: 100%;
+        }
+        img {
+            max-width: 100%;
+            height: auto;
+            display: block;
+        }
+        .status {
+            margin-top: 10px;
+            padding: 20px; /* Increased padding for larger size */
+            border-radius: 8px; /* More rounded corners */
+            display: none;
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            z-index: 1000;
+            width: 300px; /* Define a width for consistency */
+            font-size: 1.2em; /* Larger font size */
+            background-color: #333; /* Dark background for visibility */
+            color: #fff; /* White text color for contrast */
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Shadow effect for emphasis */
+            text-align: center; /* Center-align the text */
+        }
+        .status.error {
+            background-color: #ffebee;
+            color: #c62828;
+            display: block;
+        }
+        .status.success {
+            background-color: #e8f5e9;
+            color: #2e7d32;
+            display: block;
+        }
+        .status.wait {
+            background-color: #fff3e0;
+            color: #f57c00;
+            display: block;
+        }
+        .top-right-buttons {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            display: flex;
+            gap: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Image Annotation Tool</h1>
+        <div class="controls">
+            <input type="file" id="fileInput" accept="image/*">
+            <button id="voidButton" class="button">Mark Voids</button>
+            <button id="componentButton" class="button">Draw Components</button>
+            <button id="clearButton"  class="button" disabled>Clear All</button>
+            <button id="generateMaskButton" class="button" disabled>Generate Mask</button>
+            <button id="retrainButton" class="button" disabled>Retrain Model</button>
+        </div>
+        <div id="status" class="status"></div>
+        <div class="image-container">
+            <div class="image-wrapper">
+                <h2>Original Image</h2>
+                <div class="canvas-wrapper" id="canvasWrapper">
+                    <img id="image" src="" alt="Upload an image" draggable="false">
+                    <canvas id="overlayCanvas"></canvas>
+                </div>
+            </div>
+            <div class="image-wrapper">
+                <h2>Segmented Result</h2>
+                <img id="segmentedImage" src="" alt="Segmented image will appear here">
+            </div>
+        </div>
+    </div>
+    <div class="top-right-buttons">
+        <button class="button" disabled>Go to SAM</button>
+        <a href="{{ url_for('yolo') }}" class="button">Go to Yolo</a>
+    </div>
+    <script>
+        class SegmentationTool {
+            constructor() {
+                this.initializeElements();
+                this.initializeState();
+                this.setupEventListeners();
+            }
+            initializeElements() {
+                this.fileInput = document.getElementById('fileInput');
+                this.image = document.getElementById('image');
+                this.overlayCanvas = document.getElementById('overlayCanvas');
+                this.overlayCtx = this.overlayCanvas.getContext('2d');
+                this.segmentedImage = document.getElementById('segmentedImage');
+                this.status = document.getElementById('status');
+                this.canvasWrapper = document.getElementById('canvasWrapper');
+                this.buttons = {
+                    void: document.getElementById('voidButton'),
+                    component: document.getElementById('componentButton'),
+                    clear: document.getElementById('clearButton'),
+                    generate: document.getElementById('generateMaskButton'),
+                    retrain: document.getElementById('retrainButton')
+                };
+            }
+            initializeState() {
+                this.normalizedVoidPoints = [];
+                this.normalizedComponentBoxes = [];
+                this.currentMode = null;
+                this.hoverStart = null;
+                this.uploadedFilename = '';
+                this.isDrawing = false;
+                this.tempBox = null; // Store the current box being drawn
+            }
+            setupEventListeners() {
+                this.fileInput.addEventListener('change', (e) => this.handleFileUpload(e));
+                this.image.addEventListener('load', () => this.handleImageLoad());
+                this.buttons.void.addEventListener('click', () => this.setMode('void'));
+                this.buttons.component.addEventListener('click', () => this.setMode('component'));
+                this.buttons.clear.addEventListener('click', () => this.clearAll());
+                this.buttons.generate.addEventListener('click', () => this.generateMask());
+                this.buttons.retrain.addEventListener('click', () => this.retrainModel());
+                this.canvasWrapper.addEventListener('click', (e) => this.handleImageClick(e));
+                this.canvasWrapper.addEventListener('mousedown', (e) => this.handleMouseDown(e));
+                this.canvasWrapper.addEventListener('mousemove', (e) => this.handleMouseMove(e));
+                this.canvasWrapper.addEventListener('mouseup', (e) => this.handleMouseUp(e));
+                // Add ResizeObserver
+                const resizeObserver = new ResizeObserver(() => {
+                    this.updateCanvasSize();
+                    this.redrawAllPoints();
+                });
+                resizeObserver.observe(this.canvasWrapper);
+            }
+            getImageCoordinates(event) {
+                const rect = this.image.getBoundingClientRect();
+                const x = event.clientX - rect.left;
+                const y = event.clientY - rect.top;
+                return {
+                    display: [x, y],
+                    normalized: [x / rect.width, y / rect.height]
+                };
+            }
+            updateCanvasSize() {
+                const rect = this.image.getBoundingClientRect();
+                this.overlayCanvas.style.width = `${rect.width}px`;
+                this.overlayCanvas.style.height = `${rect.height}px`;
+                this.overlayCanvas.width = rect.width;
+                this.overlayCanvas.height = rect.height;
+            }
+            handleImageLoad() {
+                this.updateCanvasSize();
+                this.redrawAllPoints();
+            }
+            setMode(mode) {
+                this.currentMode = this.currentMode === mode ? null : mode;
+                Object.values(this.buttons).forEach(button => button.classList.remove('active'));
+                if (this.currentMode) {
+                    this.buttons[this.currentMode].classList.add('active');
+                }
+                this.canvasWrapper.style.cursor = this.currentMode ? 'crosshair' : 'default';
+            }
+            handleImageClick(event) {
+                if (this.currentMode !== 'void') return;
+                const coords = this.getImageCoordinates(event);
+                this.normalizedVoidPoints.push(coords.normalized);
+                this.drawVoidPoint(coords.display);
+            }
+            handleMouseDown(event) {
+                if (this.currentMode !== 'component') return;
+                event.preventDefault();
+                this.isDrawing = true;
+                const coords = this.getImageCoordinates(event);
+                this.hoverStart = coords; // Start point of the box
+                this.tempBox = null; // Reset temporary box
+            }
+            handleMouseMove(event) {
+                if (!this.isDrawing || this.currentMode !== 'component') return;
+                const coords = this.getImageCoordinates(event);
+                this.clearOverlay();
+                this.redrawAllPoints();
+                // Draw the temporary box
+                if (this.hoverStart) {
+                    this.tempBox = {
+                        start: this.hoverStart.display,
+                        end: coords.display
+                    };
+                    this.drawComponentBox(this.tempBox.start, this.tempBox.end);
+                }
+            }
+            handleMouseUp(event) {
+                if (this.currentMode !== 'component' || !this.isDrawing) return;
+                const coords = this.getImageCoordinates(event);
+                // Calculate normalized coordinates for the box
+                const normalizedBox = [
+                    Math.min(this.hoverStart.normalized[0], coords.normalized[0]),
+                    Math.min(this.hoverStart.normalized[1], coords.normalized[1]),
+                    Math.max(this.hoverStart.normalized[0], coords.normalized[0]),
+                    Math.max(this.hoverStart.normalized[1], coords.normalized[1])
+                ];
+                // Ensure box size is valid
+                const minSize = 0.01; // 1% of image size
+                if (Math.abs(normalizedBox[2] - normalizedBox[0]) > minSize &&
+                    Math.abs(normalizedBox[3] - normalizedBox[1]) > minSize) {
+                    this.normalizedComponentBoxes.push(normalizedBox);
+                    console.log('Added box:', normalizedBox); // Debug logging
+                }
+                // Reset drawing state
+                this.isDrawing = false;
+                this.hoverStart = null;
+                this.tempBox = null; // Clear temp box
+                this.redrawAllPoints(); // Redraw all points and boxes
+            }
+            normalizedToDisplay(point) {
+                const rect = this.image.getBoundingClientRect();
+                return [
+                    point[0] * rect.width,
+                    point[1] * rect.height
+                ];
+            }
+            normalizedToDisplayBox(box) {
+                const rect = this.image.getBoundingClientRect();
+                return [
+                    box[0] * rect.width,
+                    box[1] * rect.height,
+                    box[2] * rect.width,
+                    box[3] * rect.height
+                ];
+            }
+            drawVoidPoint([x, y]) {
+                this.overlayCtx.fillStyle = 'rgba(255, 0, 0, 0.5)';
+                this.overlayCtx.beginPath();
+                this.overlayCtx.arc(x, y, 5, 0, Math.PI * 2);
+                this.overlayCtx.fill();
+            }
+            drawComponentBox([startX, startY], [endX, endY]) {
+                // Draw the box outline
+                this.overlayCtx.strokeStyle = 'rgba(0, 255, 0, 0.8)';
+                this.overlayCtx.lineWidth = 2;
+                this.overlayCtx.strokeRect(
+                    startX,
+                    startY,
+                    endX - startX,
+                    endY - startY
+                );
+                // Add semi-transparent fill
+                this.overlayCtx.fillStyle = 'rgba(0, 255, 0, 0.1)';
+                this.overlayCtx.fillRect(
+                    startX,
+                    startY,
+                    endX - startX,
+                    endY - startY
+                );
+            }
+            clearOverlay() {
+                this.overlayCtx.clearRect(0, 0, this.overlayCanvas.width, this.overlayCanvas.height);
+            }
+            redrawAllPoints() {
+                this.clearOverlay();
+                // Draw all void points
+                this.normalizedVoidPoints.forEach(point => {
+                    const displayPoint = this.normalizedToDisplay(point);
+                    this.drawVoidPoint(displayPoint);
+                });
+                // Draw all component boxes
+                this.normalizedComponentBoxes.forEach(box => {
+                    const displayBox = this.normalizedToDisplayBox(box);
+                    this.drawComponentBox(
+                        [displayBox[0], displayBox[1]],
+                        [displayBox[2], displayBox[3]]
+                    );
+                });
+                // Draw the temporary box if it exists
+                if (this.tempBox) {
+                    this.drawComponentBox(this.tempBox.start, this.tempBox.end);
+                }
+            }
+            clearAll() {
+                // Reset only the data points and visual elements
+                this.normalizedVoidPoints = [];
+                this.normalizedComponentBoxes = [];
+                this.clearOverlay();
+                this.currentMode = null;
+                this.hoverStart = null;
+                this.isDrawing = false;
+                this.tempBox = null;
+                // Reset button states
+                Object.values(this.buttons).forEach(button => button.classList.remove('active'));
+                this.canvasWrapper.style.cursor = 'default';
+                // Clear the segmented image
+                this.segmentedImage.src = '';
+                // Make sure the generate button is still enabled if we have an image
+                this.buttons.generate.disabled = !this.uploadedFilename;
+                this.buttons.clear.disabled = true;
+                // Redraw the canvas to ensure it's clear
+                this.redrawAllPoints();
+                this.showStatus('All markings cleared', 'success');
+            }
+            async handleFileUpload(event) {
+                const file = event.target.files[0];
+                if (!file) return;
+                this.clearAll();
+                // Show "please wait" message
+                this.showStatus('Uploading and embedding image, please wait...', 'wait');
+                try {
+                    const formData = new FormData();
+                    formData.append('file', file);
+                    const response = await fetch('/upload_sam', {
+                        method: 'POST',
+                        body: formData
+                    });
+                    const result = await response.json();
+                    if (result.error) throw new Error(result.error);
+                    this.image.src = result.image_url;
+                    this.uploadedFilename = result.filename;
+                    this.originalDimensions = result.dimensions;
+                    this.buttons.generate.disabled = false;
+                    // Show success message after upload is complete
+                    this.showStatus('Image uploaded successfully', 'success');
+                } catch (error) {
+                    this.showStatus(`Upload failed: ${error.message}`, 'error');
+                }
+            }
+            async generateMask() {
+                if (!this.uploadedFilename) {
+                    this.showStatus('Please upload an image first', 'error');
+                    return;
+                }
+                try {
+                    this.buttons.generate.disabled = true;
+                    const requestData = {
+                        void_points: this.normalizedVoidPoints,
+                        component_boxes: this.normalizedComponentBoxes,
+                        filename: this.uploadedFilename,
+                        original_dimensions: this.originalDimensions
+                    };
+                    console.log('Sending data to backend:', requestData); // Debug logging
+                    const response = await fetch('/generate_mask', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(requestData),
+                    });
+                    const result = await response.json();
+                    if (result.error) throw new Error(result.error);
+                    this.segmentedImage.src = result.result_path + '?t=' + new Date().getTime();
+                    this.showStatus('Mask generated successfully', 'success');
+                } catch (error) {
+                    this.showStatus(`Failed to generate mask: ${error.message}`, 'error');
+                    console.error('Mask generation error:', error); // Debug logging
+                } finally {
+                    this.buttons.generate.disabled = false;
+                    this.buttons.retrain.disabled = false;
+                    this.buttons.clear.style.backgroundColor = '#c62828';
+                    this.buttons.clear.disabled = false;
+                }
+            }
+            async retrainModel() {
+                try {
+                    this.buttons.retrain.disabled = true;
+                    this.showStatus('Starting model retraining...', 'wait');
+                    // First make the POST request to start the training
+                    const response = await fetch('/start_retraining', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        }
+                    });
+                    if (!response.ok) {
+                        throw new Error('Failed to start retraining');
+                    }
+                    // If POST was successful, open the monitoring page in a new window
+                    window.open('/start_retraining', '_blank');
+                    // Connect to Socket.IO to receive updates in the main window
+                    const socket = io();
+                    socket.on('training_update', (data) => {
+                        this.showStatus(`Retraining progress: ${data.status}`, 'wait');
+                    });
+                    socket.on('training_complete', (data) => {
+                        this.showStatus('Model retraining completed successfully!', 'success');
+                        this.buttons.retrain.disabled = false;
+                        socket.disconnect();
+                    });
+                    socket.on('training_error', (data) => {
+                        this.showStatus(data.status, 'error');
+                        this.buttons.retrain.disabled = false;
+                        socket.disconnect();
+                    });
+                    socket.on('connect_error', (error) => {
+                        this.showStatus('Connection error: ' + error, 'error');
+                        this.buttons.retrain.disabled = false;
+                        socket.disconnect();
+                    });
+                } catch (error) {
+                    this.showStatus(`Failed to start retraining: ${error.message}`, 'error');
+                    this.buttons.retrain.disabled = false;
+                }
+            }
+            showStatus(message, type) {
+                this.status.className = `status ${type}`;
+                this.status.textContent = message;
+                this.status.style.display = 'block';
+                if (type === 'success' || type === 'error') {
+                    setTimeout(() => {
+                        this.status.style.display = 'none';
+                    }, 6000);
+                }
+            }
+        }
+        // Initialize the tool when the page loads
+        window.addEventListener('load', () => {
+            new SegmentationTool();
+        });
+    </script>
+</body>
+</html>

templates/retrain.html ADDED Viewed

	@@ -0,0 +1,242 @@

+<!-- <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Model Retraining</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background-color: #f4f4f9;
+        }
+        .container {
+            text-align: center;
+        }
+        .status {
+            padding: 10px;
+            margin-top: 20px;
+            border-radius: 5px;
+            display: none;
+            position: absolute;
+            bottom: 20px;
+            width: 80%;
+            left: 10%;
+        }
+        .status.success {
+            background-color: #4CAF50;
+            color: white;
+        }
+        .status.error {
+            background-color: #f44336;
+            color: white;
+        }
+        .status.info {
+            background-color: #2196F3;
+            color: white;
+        }
+        .progress {
+            width: 100%;
+            background-color: #ddd;
+            height: 25px;
+            margin-top: 20px;
+            border-radius: 5px;
+        }
+        .progress-bar {
+            height: 100%;
+            width: 0;
+            background-color: #4CAF50;
+            text-align: center;
+            color: white;
+            line-height: 25px;
+            border-radius: 5px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Model Retraining Progress</h1>
+        <div class="status" id="statusMessage"></div>
+        <div class="progress">
+            <div class="progress-bar" id="progressBar">0%</div>
+        </div>
+    </div>
+    <script src="https://cdn.socket.io/4.6.0/socket.io.min.js"></script>
+    <script>
+        // Connect to the WebSocket server
+        var socket = io.connect('http://' + document.domain + ':' + location.port + '/start_retraining');
+        // Get elements for updates
+        var statusMessage = document.getElementById('statusMessage');
+        var progressBar = document.getElementById('progressBar');
+        // Handle 'training_update' event
+        socket.on('training_update', function(data) {
+            var epoch = data.epoch;
+            var status = data.status;
+            statusMessage.className = "status info";  // Add info class to style
+            statusMessage.textContent = status;
+            statusMessage.style.display = "block";
+            // Update progress bar
+            var progress = (epoch / 5) * 100;  // Assuming 5 epochs for this test
+            progressBar.style.width = progress + '%';
+            progressBar.textContent = Math.round(progress) + '%';
+        });
+        // Handle 'training_complete' event
+        socket.on('training_complete', function(data) {
+            statusMessage.className = "status success";  // Add success class
+            statusMessage.textContent = data.status;
+            setTimeout(function() {
+                statusMessage.style.display = "none";  // Hide status after a few seconds
+            }, 3000);
+        });
+    </script>
+</body>
+</html> -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Model Retraining</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
+    <style>
+        .container {
+            max-width: 800px;
+            margin: 40px auto;
+            padding: 20px;
+            text-align: center;
+        }
+        .status-box {
+            padding: 20px;
+            margin: 20px 0;
+            border-radius: 8px;
+            background-color: #f5f5f5;
+        }
+        .progress-bar {
+            width: 100%;
+            height: 20px;
+            background-color: #f0f0f0;
+            border-radius: 10px;
+            overflow: hidden;
+            margin: 20px 0;
+        }
+        .progress-fill {
+            height: 100%;
+            background-color: #4CAF50;
+            width: 0%;
+            transition: width 0.3s ease-in-out;
+        }
+        .loader {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #3498db;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            margin: 20px auto;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .back-button {
+            padding: 10px 20px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            text-decoration: none;
+            display: inline-block;
+            margin-top: 20px;
+        }
+        .back-button:hover {
+            background-color: #45a049;
+        }
+        #status-text {
+            font-size: 1.1em;
+            margin: 10px 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Model Retraining Status</h1>
+        <div class="status-box">
+            <div class="loader" id="loader"></div>
+            <div class="progress-bar">
+                <div class="progress-fill" id="progress"></div>
+            </div>
+            <p id="status-text">Initializing retraining process...</p>
+            <p>You can safely navigate away from this page. The retraining will continue in the background.</p>
+        </div>
+        <a href="/" class="back-button">Back to Image Segmentation Tool</a>
+    </div>
+    <script>
+        // Connect to Socket.IO server
+        const socket = io();
+        const progressBar = document.getElementById('progress');
+        const statusText = document.getElementById('status-text');
+        const loader = document.getElementById('loader');
+        // Handle training updates
+        socket.on('training_update', function(data) {
+            // Calculate progress percentage (5 epochs total)
+            const progress = (data.epoch / 5) * 100;
+            progressBar.style.width = `${progress}%`;
+            statusText.textContent = data.status;
+        });
+        // Handle training completion
+        socket.on('training_complete', function(data) {
+            progressBar.style.width = '100%';
+            statusText.textContent = data.status;
+            loader.style.display = 'none';
+            // Optional: Show completion message
+            setTimeout(() => {
+                alert('Retraining completed successfully!');
+            }, 500);
+        });
+        // Handle connection errors
+        socket.on('connect_error', function(error) {
+            statusText.textContent = 'Connection error: ' + error;
+            loader.style.display = 'none';
+        });
+        // Start the retraining process when the page loads
+        window.addEventListener('load', function() {
+            fetch('/start_retraining', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            }).catch(error => {
+                statusText.textContent = 'Failed to start retraining: ' + error;
+                loader.style.display = 'none';
+            });
+        });
+    </script>
+</body>
+</html>

templates/yolo.html ADDED Viewed

	@@ -0,0 +1,355 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Segmentation Tool</title>
+    <style>
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        /* Additional styles for the area table */
+        .area-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 20px;
+        }
+        .area-table th, .area-table td {
+            border: 1px solid #ddd;
+            padding: 8px;
+            text-align: center;
+        }
+        .area-table th {
+            background-color: #f2f2f2;
+            font-weight: bold;
+        }
+        .controls {
+            margin-bottom: 20px;
+            position: sticky;
+            top: 0;
+            background: white;
+            z-index: 100;
+            padding: 10px 0;
+        }
+        .button {
+            padding: 8px 16px;
+            margin-right: 10px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        .button.active {
+            background-color: #45a049;
+        }
+        .button:disabled {
+            background-color: #cccccc;
+            cursor: not-allowed;
+        }
+        .image-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+        }
+        .image-wrapper {
+            position: relative;
+            border: 1px solid #ddd;
+            padding: 10px;
+        }
+        .canvas-wrapper {
+            position: relative;
+            overflow: hidden;
+            width: 100%;
+            height: 100%;
+        }
+        canvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+            width: 100%;
+            height: 100%;
+        }
+        img {
+            max-width: 100%;
+            height: auto;
+            display: block;
+        }
+        .status {
+            margin-top: 10px;
+            padding: 10px;
+            border-radius: 4px;
+            display: none;
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            z-index: 1000;
+        }
+        .status.error {
+            background-color: #ffebee;
+            color: #c62828;
+            display: block;
+        }
+        .status.success {
+            background-color: #e8f5e9;
+            color: #2e7d32;
+            display: block;
+        }
+        .status.wait {
+            background-color: #fff3e0;
+            color: #f57c00;
+            display: block;
+        }
+        .top-right-buttons {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            display: flex;
+            gap: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Voids and Components Classification</h1>
+        <div class="controls">
+            <input type="file" id="fileInput" accept="image/*">
+            <button id="classifyButton" class="button" disabled>Classify</button>
+        </div>
+        <div id="status" class="status"></div>
+        <div class="image-container">
+            <div class="image-wrapper">
+                <h2>Original Image</h2>
+                <div class="canvas-wrapper" id="canvasWrapper">
+                    <img id="image" src="" alt="Upload an image" draggable="false">
+                    <canvas id="overlayCanvas"></canvas>
+                </div>
+            </div>
+            <div class="image-wrapper">
+                <h2>Segmentation Prediction</h2>
+                <img id="classifiedImage" src="" alt="Classified image will appear here">
+            </div>
+        </div>
+        <table class="area-table" id="areaTable">
+            <caption><strong>Segmentation Area Table</strong></caption>
+            <thead>
+                <tr>
+                    <th>Image</th>
+                    <th>Component</th>
+                    <th>Area</th>
+                    <th>Void Area %</th>
+                    <th>Max Void Area %</th>
+                </tr>
+            </thead>
+            <tbody>
+                <!-- Rows will be dynamically added here using JavaScript -->
+            </tbody>
+        </table>
+        <button id="exportButton" class="button" disabled>Export to CSV</button>
+    </div>
+    <div class="top-right-buttons">
+        <a href="{{ url_for('index') }}" class="button">Go to SAM</a>
+        <button class="button" disabled>Go to Yolo</button>
+    </div>
+    <script>
+        class ClassificationTool {
+            constructor() {
+                this.initializeElements();
+                this.initializeState();
+                this.setupEventListeners();
+            }
+            initializeElements() {
+                this.fileInput = document.getElementById('fileInput');
+                this.image = document.getElementById('image');
+                this.overlayCanvas = document.getElementById('overlayCanvas');
+                this.overlayCtx = this.overlayCanvas.getContext('2d');
+                this.classifiedImage = document.getElementById('classifiedImage');
+                this.status = document.getElementById('status');
+                this.canvasWrapper = document.getElementById('canvasWrapper');
+                this.buttons = {
+                    classify: document.getElementById('classifyButton'),
+                    export: document.getElementById('exportButton')
+                };
+            }
+            initializeState() {
+                this.currentMode = null;
+                this.uploadedFilename = '';
+            }
+            setupEventListeners() {
+                this.fileInput.addEventListener('change', (e) => this.handleFileUpload(e));
+                this.image.addEventListener('load', () => this.handleImageLoad());
+                this.buttons.classify.addEventListener('click', () => this.classify());
+                this.buttons.export.addEventListener('click', () => this.exportTableToCSV());
+            }
+            setMode(mode) {
+                this.currentMode = this.currentMode === mode ? null : mode;
+                Object.values(this.buttons).forEach(button => button.classList.remove('active'));
+                if (this.currentMode) {
+                    this.buttons[this.currentMode].classList.add('active');
+                }
+                this.canvasWrapper.style.cursor = this.currentMode ? 'crosshair' : 'default';
+            }
+            updateAreaTable(areaData) {
+                const areaTableBody = document.getElementById('areaTable').getElementsByTagName('tbody')[0];
+                areaTableBody.innerHTML = ''; // Clear existing rows
+                areaData.forEach(item => {
+                    const row = areaTableBody.insertRow();
+                    const cellImage = row.insertCell(0);
+                    const cellComponent = row.insertCell(1);
+                    const cellArea = row.insertCell(2);
+                    const cellVoidArea = row.insertCell(3);
+                    const cellMaxVoidArea = row.insertCell(4);
+                    cellImage.textContent = item['Image'];
+                    cellComponent.textContent = item.Component;
+                    cellArea.textContent = item['Area'];
+                    cellVoidArea.textContent = item['Void Area %'].toFixed(2) + '%'; // Format as percentage
+                    cellMaxVoidArea.textContent = item['Max Void Area %'].toFixed(2) + '%'; // Format as percentage
+                });
+            }
+            async exportTableToCSV() {
+                const table = document.getElementById('areaTable');
+                let csvContent = '';
+                const rows = table.querySelectorAll('tr');
+                rows.forEach(row => {
+                    const cols = row.querySelectorAll('th, td');
+                    const rowData = Array.from(cols).map(col => col.textContent).join(',');
+                    csvContent += rowData + '\n';
+                });
+                const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+                const url = URL.createObjectURL(blob);
+                const link = document.createElement('a');
+                link.href = url;
+                link.setAttribute('download', 'report.csv');
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            }
+            async handleFileUpload(event) {
+                const file = event.target.files[0];
+                if (!file) return;
+                // Show "please wait" message
+                this.showStatus('Uploading the image, please wait...', 'wait');
+                try {
+                    const formData = new FormData();
+                    formData.append('file', file);
+                    const response = await fetch('/upload_yolo', {
+                        method: 'POST',
+                        body: formData
+                    });
+                    const result = await response.json();
+                    if (result.error) throw new Error(result.error);
+                    this.image.src = result.image_url;
+                    this.uploadedFilename = result.filename;
+                    this.originalDimensions = result.dimensions;
+                    this.buttons.classify.disabled = false;
+                    // Show success message after upload is complete
+                    this.showStatus('Image uploaded successfully', 'success');
+                } catch (error) {
+                    this.showStatus(`Upload failed: ${error.message}`, 'error');
+                }
+            }
+            async classify() {
+                if (!this.uploadedFilename) {
+                    this.showStatus('Please upload an image first', 'error');
+                    return;
+                }
+                try {
+                    this.buttons.classify.disabled = true;
+                    const requestData = {
+                        filename: this.uploadedFilename
+                    };
+                    console.log('Sending data to backend:', requestData); // Debug logging
+                    const response = await fetch('/classify', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(requestData),
+                    });
+                    const result = await response.json();
+                    if (result.error) throw new Error(result.error);
+                    this.classifiedImage.src = result.result_path + '?t=' + new Date().getTime();
+                    this.showStatus('Classification completed successfully', 'success');
+                    // Check if area_data is defined and is an array before updating the table
+                    if (Array.isArray(result.area_data)) {
+                        this.updateAreaTable(result.area_data);
+                        this.buttons.export.disabled = false;
+                    } else {
+                        throw new Error('Area data is not available or is not an array.');
+                    }
+                } catch (error) {
+                    this.showStatus(`Failed to classify: ${error.message}`, 'error');
+                    console.error('Classification error:', error); // Debug logging
+                } finally {
+                    this.buttons.classify.disabled = false;
+                }
+            }
+            showStatus(message, type) {
+                this.status.className = `status ${type}`;
+                this.status.textContent = message;
+                this.status.style.display = 'block';
+                if (type === 'success' || type === 'error') {
+                    setTimeout(() => {
+                        this.status.style.display = 'none';
+                    }, 3000);
+                }
+            }
+        }
+        // Initialize the tool when the page loads
+        window.addEventListener('load', () => {
+            new ClassificationTool();
+        });
+    </script>
+</body>
+</html>