Add application file

Dockerfile

@@ -0,0 +1,32 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+# Install system dependencies for OpenCV
+RUN apt-get update && apt-get install -y \
+    libglib2.0-0 \
+    libsm6 \
+    libxext6 \
+    libxrender-dev \
+    libgomp1 \
+    libgl1-mesa-glx \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements and install Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application files
+COPY app.py .
+COPY satellite_standard_unet_100epochs_7May2023.hdf5 .
+COPY templates/ templates/
+COPY image/ image/
+
+# Create uploads directory
+RUN mkdir -p uploads && chmod 777 uploads
+
+# Expose port
+EXPOSE 7860
+
+# Run the application
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,220 @@
+import os
+import cv2
+import numpy as np
+import base64
+from flask import Flask, render_template, request, jsonify
+from werkzeug.utils import secure_filename
+from io import BytesIO
+from PIL import Image
+import tensorflow as tf
+from tensorflow.keras.models import load_model
+
+# Suppress warnings
+os.environ['TF_CPP_MIN_LOG_LEVEL'] = '3'
+os.environ['MPLCONFIGDIR'] = '/tmp/matplotlib'
+
+app = Flask(__name__)
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB max
+app.config['UPLOAD_FOLDER'] = 'uploads'
+app.config['ALLOWED_EXTENSIONS'] = {'png', 'jpg', 'jpeg'}
+
+os.makedirs(app.config['UPLOAD_FOLDER'], mode=0o777, exist_ok=True)
+
+# Load U-Net model
+print("Loading U-Net model...")
+model = load_model('satellite_standard_unet_100epochs_7May2023.hdf5', compile=False)
+model.compile(optimizer='adam', loss='categorical_crossentropy', metrics=['accuracy'])
+print("✓ Model loaded successfully!")
+
+# Define color map for segmentation classes
+CLASS_COLORS = {
+    0: [60, 16, 152],      # Class 0 - Purple
+    1: [132, 41, 246],     # Class 1 - Light Purple  
+    2: [110, 193, 228],    # Class 2 - Light Blue
+    3: [254, 221, 58],     # Class 3 - Yellow
+}
+
+def allowed_file(filename):
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in app.config['ALLOWED_EXTENSIONS']
+
+def preprocess_image(image_path):
+    """Preprocess image for U-Net model (256x256 grayscale)"""
+    try:
+        # Read image
+        img = cv2.imread(image_path, cv2.IMREAD_GRAYSCALE)
+        
+        if img is None:
+            raise ValueError("Could not read image")
+        
+        print(f"Original image shape: {img.shape}")
+        
+        # Resize to 256x256
+        img_resized = cv2.resize(img, (256, 256))
+        
+        # Normalize to [0, 1]
+        img_normalized = img_resized / 255.0
+        
+        # Add dimensions: (1, 256, 256, 1)
+        img_input = np.expand_dims(img_normalized, axis=0)
+        img_input = np.expand_dims(img_input, axis=-1)
+        
+        print(f"Model input shape: {img_input.shape}")
+        
+        return img_input, img_resized
+        
+    except Exception as e:
+        raise ValueError(f"Failed to preprocess image: {str(e)}")
+
+def create_colored_mask(prediction, original_shape):
+    """Create colored segmentation mask from prediction"""
+    # Get class with highest probability for each pixel
+    pred_mask = np.argmax(prediction, axis=-1)[0]  # (256, 256)
+    
+    # Create RGB mask
+    colored_mask = np.zeros((256, 256, 3), dtype=np.uint8)
+    
+    for class_id, color in CLASS_COLORS.items():
+        colored_mask[pred_mask == class_id] = color
+    
+    return colored_mask
+
+def create_overlay(original, mask, alpha=0.5):
+    """Create overlay of original image and segmentation mask"""
+    # Convert grayscale to RGB
+    if len(original.shape) == 2:
+        original_rgb = cv2.cvtColor(original, cv2.COLOR_GRAY2RGB)
+    else:
+        original_rgb = original
+    
+    # Blend
+    overlay = cv2.addWeighted(original_rgb, 1 - alpha, mask, alpha, 0)
+    
+    return overlay
+
+def img_to_base64(img):
+    """Convert numpy image to base64 string"""
+    if len(img.shape) == 2:
+        img_pil = Image.fromarray(img)
+    else:
+        img_pil = Image.fromarray(cv2.cvtColor(img, cv2.COLOR_BGR2RGB))
+    
+    buf = BytesIO()
+    img_pil.save(buf, format='PNG')
+    buf.seek(0)
+    img_base64 = base64.b64encode(buf.getvalue()).decode('utf-8')
+    
+    return f'data:image/png;base64,{img_base64}'
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/predict', methods=['POST'])
+def predict():
+    try:
+        if 'file' not in request.files:
+            return jsonify({'error': 'No file uploaded'}), 400
+        
+        file = request.files['file']
+        
+        if file.filename == '':
+            return jsonify({'error': 'No file selected'}), 400
+        
+        if not allowed_file(file.filename):
+            return jsonify({'error': 'Invalid file type. Please upload PNG, JPG, or JPEG'}), 400
+        
+        # Save file
+        filename = secure_filename(file.filename)
+        filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+        file.save(filepath)
+        
+        print(f"Processing: {filename}")
+        
+        # Preprocess
+        img_input, original_resized = preprocess_image(filepath)
+        
+        # Predict
+        print("Making prediction...")
+        prediction = model.predict(img_input, verbose=0)
+        
+        # Create colored mask
+        colored_mask = create_colored_mask(prediction, original_resized.shape)
+        
+        # Create overlay
+        overlay = create_overlay(original_resized, colored_mask, alpha=0.6)
+        
+        # Convert to base64
+        original_base64 = img_to_base64(original_resized)
+        mask_base64 = img_to_base64(colored_mask)
+        overlay_base64 = img_to_base64(overlay)
+        
+        # Clean up
+        os.remove(filepath)
+        
+        result = {
+            'original': original_base64,
+            'mask': mask_base64,
+            'overlay': overlay_base64,
+            'image_size': '256x256'
+        }
+        
+        print(f"✓ Prediction completed successfully")
+        
+        return jsonify(result)
+        
+    except Exception as e:
+        print(f"Error during prediction: {e}")
+        import traceback
+        traceback.print_exc()
+        if os.path.exists(filepath):
+            os.remove(filepath)
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/test-example', methods=['POST'])
+def test_example():
+    """Test with example image"""
+    try:
+        example_path = 'image/045.png'
+        
+        if not os.path.exists(example_path):
+            return jsonify({'error': 'Example image not found'}), 404
+        
+        print(f"Testing with example: {example_path}")
+        
+        # Preprocess
+        img_input, original_resized = preprocess_image(example_path)
+        
+        # Predict
+        print("Making prediction on example...")
+        prediction = model.predict(img_input, verbose=0)
+        
+        # Create colored mask
+        colored_mask = create_colored_mask(prediction, original_resized.shape)
+        
+        # Create overlay
+        overlay = create_overlay(original_resized, colored_mask, alpha=0.6)
+        
+        # Convert to base64
+        original_base64 = img_to_base64(original_resized)
+        mask_base64 = img_to_base64(colored_mask)
+        overlay_base64 = img_to_base64(overlay)
+        
+        result = {
+            'original': original_base64,
+            'mask': mask_base64,
+            'overlay': overlay_base64,
+            'image_size': '256x256'
+        }
+        
+        print(f"✓ Example prediction completed")
+        
+        return jsonify(result)
+        
+    except Exception as e:
+        print(f"Error during example prediction: {e}")
+        import traceback
+        traceback.print_exc()
+        return jsonify({'error': str(e)}), 500
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860, debug=False)

requirements.txt

@@ -0,0 +1,6 @@
+flask==2.3.0
+tensorflow==2.13.0
+opencv-python-headless==4.8.0.74
+numpy==1.24.3
+pillow==10.0.0
+werkzeug==2.3.0

templates/index.html

@@ -0,0 +1,553 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>U-Net Semantic Segmentation</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+            overflow: hidden;
+        }
+
+        .header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 40px;
+            text-align: center;
+        }
+
+        .header h1 {
+            font-size: 2.5em;
+            margin-bottom: 10px;
+        }
+
+        .header p {
+            font-size: 1.2em;
+            opacity: 0.9;
+            margin-bottom: 20px;
+        }
+
+        .github-link {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            color: white;
+            text-decoration: none;
+            font-weight: 600;
+            font-size: 1.1em;
+            padding: 12px 24px;
+            background: rgba(255, 255, 255, 0.2);
+            border: 2px solid white;
+            border-radius: 10px;
+            transition: all 0.3s;
+        }
+
+        .github-link:hover {
+            background: white;
+            color: #667eea;
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+        }
+
+        .content {
+            padding: 40px;
+        }
+
+        .info-section {
+            background: #f8f9fa;
+            border-radius: 15px;
+            padding: 30px;
+            margin-bottom: 30px;
+            border-left: 5px solid #667eea;
+        }
+
+        .info-section h2 {
+            color: #667eea;
+            margin-bottom: 15px;
+            font-size: 1.8em;
+        }
+
+        .info-section p {
+            color: #495057;
+            line-height: 1.8;
+            font-size: 1.05em;
+            margin-bottom: 15px;
+        }
+
+        .features {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 15px;
+            margin-top: 20px;
+        }
+
+        .feature-item {
+            background: white;
+            padding: 15px;
+            border-radius: 10px;
+            border: 2px solid #e9ecef;
+            text-align: center;
+        }
+
+        .feature-item strong {
+            color: #667eea;
+            display: block;
+            margin-bottom: 5px;
+            font-size: 1.1em;
+        }
+
+        .upload-section {
+            background: #f8f9fa;
+            border-radius: 15px;
+            padding: 40px;
+            text-align: center;
+            margin-bottom: 30px;
+            border: 3px dashed #667eea;
+            transition: all 0.3s;
+        }
+
+        .upload-section:hover {
+            border-color: #764ba2;
+            background: #f0f2ff;
+        }
+
+        .upload-icon {
+            font-size: 4em;
+            color: #667eea;
+            margin-bottom: 20px;
+        }
+
+        .file-input {
+            display: none;
+        }
+
+        .upload-button {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 15px 40px;
+            border: none;
+            border-radius: 30px;
+            font-size: 1.2em;
+            font-weight: bold;
+            cursor: pointer;
+            transition: transform 0.2s;
+            margin: 10px;
+        }
+
+        .upload-button:hover {
+            transform: scale(1.05);
+        }
+
+        .test-button {
+            background: #28a745;
+            color: white;
+            padding: 15px 40px;
+            border: none;
+            border-radius: 30px;
+            font-size: 1.2em;
+            font-weight: bold;
+            cursor: pointer;
+            transition: transform 0.2s;
+            margin: 10px;
+        }
+
+        .test-button:hover {
+            background: #218838;
+            transform: scale(1.05);
+        }
+
+        .preview-section {
+            display: none;
+            text-align: center;
+            margin-bottom: 30px;
+        }
+
+        .preview-image {
+            max-width: 100%;
+            max-height: 400px;
+            border-radius: 10px;
+            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
+        }
+
+        .results-grid {
+            display: none;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 30px;
+            margin-top: 30px;
+        }
+
+        .result-card {
+            background: white;
+            border-radius: 15px;
+            padding: 20px;
+            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
+            text-align: center;
+        }
+
+        .result-card h3 {
+            color: #667eea;
+            margin-bottom: 15px;
+            font-size: 1.5em;
+        }
+
+        .result-image {
+            width: 100%;
+            border-radius: 10px;
+            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
+        }
+
+        .loading {
+            display: none;
+            text-align: center;
+            padding: 40px;
+        }
+
+        .spinner {
+            border: 5px solid #f3f3f3;
+            border-top: 5px solid #667eea;
+            border-radius: 50%;
+            width: 60px;
+            height: 60px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 20px;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .error {
+            display: none;
+            background: #f8d7da;
+            color: #721c24;
+            padding: 20px;
+            border-radius: 10px;
+            border-left: 5px solid #dc3545;
+            margin-bottom: 20px;
+        }
+
+        .legend {
+            background: white;
+            padding: 20px;
+            border-radius: 10px;
+            margin-top: 30px;
+        }
+
+        .legend h3 {
+            color: #667eea;
+            margin-bottom: 15px;
+        }
+
+        .legend-items {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 15px;
+        }
+
+        .legend-item {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .legend-color {
+            width: 40px;
+            height: 40px;
+            border-radius: 5px;
+            border: 2px solid #dee2e6;
+        }
+
+        .reset-button {
+            background: #6c757d;
+            color: white;
+            padding: 12px 30px;
+            border: none;
+            border-radius: 25px;
+            font-size: 1.1em;
+            cursor: pointer;
+            margin-top: 20px;
+            transition: transform 0.2s;
+        }
+
+        .reset-button:hover {
+            background: #5a6268;
+            transform: scale(1.05);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🛰️ U-Net Semantic Segmentation</h1>
+            <p>AI-Powered Drone Imagery Segmentation</p>
+            <a href="https://github.com/koesan/U-Net" target="_blank" class="github-link">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                </svg>
+                View on GitHub
+            </a>
+        </div>
+
+        <div class="content">
+            <!-- Info Section -->
+            <div class="info-section">
+                <h2>📖 About This Project</h2>
+                <p>
+                    This application uses a <strong>U-Net deep learning model</strong> trained on aerial drone imagery 
+                    to perform <strong>semantic segmentation</strong>. The model identifies and classifies different 
+                    regions in satellite/drone images into 4 distinct classes, enabling precise pixel-level analysis 
+                    of geographic features.
+                </p>
+                <p>
+                    <strong>🎯 How it works:</strong> Upload a drone or satellite image (PNG, JPG, or JPEG), 
+                    and the U-Net model will automatically segment it into different semantic classes, 
+                    displaying the original image, segmentation mask, and an overlay visualization.
+                </p>
+                
+                <div class="features">
+                    <div class="feature-item">
+                        <strong>🖼️ Input</strong>
+                        <span>256×256 pixels</span>
+                    </div>
+                    <div class="feature-item">
+                        <strong>🧠 Architecture</strong>
+                        <span>U-Net (5 levels)</span>
+                    </div>
+                    <div class="feature-item">
+                        <strong>��� Classes</strong>
+                        <span>4 Semantic Categories</span>
+                    </div>
+                    <div class="feature-item">
+                        <strong>⚡ Speed</strong>
+                        <span>~1-2 seconds</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Error Message -->
+            <div class="error" id="errorMessage"></div>
+
+            <!-- Upload Section -->
+            <div class="upload-section" id="uploadSection">
+                <div class="upload-icon">📤</div>
+                <h2 style="color: #667eea; margin-bottom: 15px;">Upload Drone/Satellite Image</h2>
+                <p style="color: #6c757d; margin-bottom: 20px;">
+                    Supported formats: PNG, JPG, JPEG<br>
+                    Images will be automatically resized to 256×256 pixels
+                </p>
+                <input type="file" id="fileInput" class="file-input" accept="image/*">
+                <button class="upload-button" onclick="document.getElementById('fileInput').click()">
+                    Choose Image
+                </button>
+                <button class="test-button" onclick="testExample()">
+                    🧪 Test Example
+                </button>
+            </div>
+
+            <!-- Preview Section -->
+            <div class="preview-section" id="previewSection">
+                <h3 style="margin-bottom: 15px; color: #667eea;">Selected Image:</h3>
+                <img id="previewImage" class="preview-image" alt="Preview">
+                <div style="margin-top: 20px;">
+                    <button class="upload-button" onclick="analyzeImage()">
+                        🔍 Analyze Image
+                    </button>
+                </div>
+            </div>
+
+            <!-- Loading -->
+            <div class="loading" id="loading">
+                <div class="spinner"></div>
+                <p style="color: #667eea; font-size: 1.2em;">Analyzing image with U-Net...</p>
+            </div>
+
+            <!-- Results -->
+            <div class="results-grid" id="resultsGrid">
+                <div class="result-card">
+                    <h3>📷 Original Image</h3>
+                    <img id="originalImage" class="result-image" alt="Original">
+                </div>
+                <div class="result-card">
+                    <h3>🎨 Segmentation Mask</h3>
+                    <img id="maskImage" class="result-image" alt="Mask">
+                </div>
+                <div class="result-card">
+                    <h3>✨ Overlay</h3>
+                    <img id="overlayImage" class="result-image" alt="Overlay">
+                </div>
+            </div>
+
+            <!-- Legend -->
+            <div class="legend" id="legend" style="display: none;">
+                <h3>🏷️ Segmentation Classes</h3>
+                <div class="legend-items">
+                    <div class="legend-item">
+                        <div class="legend-color" style="background-color: rgb(60, 16, 152);"></div>
+                        <span><strong>Class 0</strong></span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-color" style="background-color: rgb(132, 41, 246);"></div>
+                        <span><strong>Class 1</strong></span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-color" style="background-color: rgb(110, 193, 228);"></div>
+                        <span><strong>Class 2</strong></span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-color" style="background-color: rgb(254, 221, 58);"></div>
+                        <span><strong>Class 3</strong></span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Reset Button -->
+            <div style="text-align: center; margin-top: 30px;" id="resetSection" style="display: none;">
+                <button class="reset-button" onclick="resetAnalysis()">
+                    🔄 Analyze Another Image
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let selectedFile = null;
+
+        // File input handler
+        document.getElementById('fileInput').addEventListener('change', function(e) {
+            const file = e.target.files[0];
+            if (file) {
+                handleFile(file);
+            }
+        });
+
+        function handleFile(file) {
+            if (!file.type.startsWith('image/')) {
+                showError('Please upload a valid image file (PNG, JPG, JPEG)');
+                return;
+            }
+
+            selectedFile = file;
+
+            // Show preview
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                document.getElementById('previewImage').src = e.target.result;
+                document.getElementById('uploadSection').style.display = 'none';
+                document.getElementById('previewSection').style.display = 'block';
+                document.getElementById('errorMessage').style.display = 'none';
+            };
+            reader.readAsDataURL(file);
+        }
+
+        async function analyzeImage() {
+            if (!selectedFile) return;
+
+            // Show loading
+            document.getElementById('loading').style.display = 'block';
+            document.getElementById('previewSection').style.display = 'none';
+            document.getElementById('resultsGrid').style.display = 'none';
+            document.getElementById('legend').style.display = 'none';
+
+            const formData = new FormData();
+            formData.append('file', selectedFile);
+
+            try {
+                const response = await fetch('/predict', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                const data = await response.json();
+
+                document.getElementById('loading').style.display = 'none';
+
+                if (data.error) {
+                    showError(data.error);
+                } else {
+                    showResults(data);
+                }
+            } catch (error) {
+                document.getElementById('loading').style.display = 'none';
+                showError('An error occurred: ' + error.message);
+            }
+        }
+
+        async function testExample() {
+            // Show loading
+            document.getElementById('loading').style.display = 'block';
+            document.getElementById('uploadSection').style.display = 'none';
+            document.getElementById('previewSection').style.display = 'none';
+            document.getElementById('resultsGrid').style.display = 'none';
+            document.getElementById('legend').style.display = 'none';
+            document.getElementById('errorMessage').style.display = 'none';
+
+            try {
+                const response = await fetch('/test-example', {
+                    method: 'POST'
+                });
+
+                const data = await response.json();
+
+                document.getElementById('loading').style.display = 'none';
+
+                if (data.error) {
+                    showError(data.error);
+                } else {
+                    showResults(data);
+                }
+            } catch (error) {
+                document.getElementById('loading').style.display = 'none';
+                showError('An error occurred: ' + error.message);
+            }
+        }
+
+        function showResults(data) {
+            document.getElementById('originalImage').src = data.original;
+            document.getElementById('maskImage').src = data.mask;
+            document.getElementById('overlayImage').src = data.overlay;
+            
+            document.getElementById('resultsGrid').style.display = 'grid';
+            document.getElementById('legend').style.display = 'block';
+            document.getElementById('resetSection').style.display = 'block';
+        }
+
+        function showError(message) {
+            const errorElement = document.getElementById('errorMessage');
+            errorElement.textContent = '❌ Error: ' + message;
+            errorElement.style.display = 'block';
+            document.getElementById('uploadSection').style.display = 'block';
+        }
+
+        function resetAnalysis() {
+            selectedFile = null;
+            document.getElementById('fileInput').value = '';
+            document.getElementById('uploadSection').style.display = 'block';
+            document.getElementById('previewSection').style.display = 'none';
+            document.getElementById('resultsGrid').style.display = 'none';
+            document.getElementById('legend').style.display = 'none';
+            document.getElementById('resetSection').style.display = 'none';
+            document.getElementById('errorMessage').style.display = 'none';
+            document.getElementById('loading').style.display = 'none';
+        }
+    </script>
+</body>
+</html>