Fix file upload issues and add Swagger UI API documentation

✅ Frontend File Upload Fixes:
- Fixed file upload reset issue - can now upload multiple files without page reload
- Added 'Change File' and 'Upload Another Image' buttons for better UX
- Fixed double-click file selection issue with proper event handling
- Improved drag & drop functionality with proper event propagation
- Added visual feedback for file selection and processing states

✅ Swagger UI API Documentation:
- Created api_docs.py with comprehensive Swagger UI documentation
- Added Flask-RESTX for professional API documentation interface
- Documented all 3 detection endpoints with request/response models
- Added health check endpoint documentation
- Included detailed parameter descriptions and example responses
- Available at http://localhost:5003/docs/ for interactive API testing

✅ Enhanced User Experience:
- Seamless file upload workflow without page reloads
- Clear visual indicators for file selection and processing
- Professional API documentation for developers and QA testing
- Consistent 80% confidence threshold across all interfaces

✅ Technical Improvements:
- Better event handling for file inputs and drag & drop
- Proper cleanup of uploaded files and UI state
- Comprehensive error handling and user feedback
- Interactive API documentation with live testing capabilities

api_docs.py

@@ -0,0 +1,245 @@
+#!/usr/bin/env python3
+"""
+Swagger UI API Documentation for Memory Module Detection
+This creates a separate API documentation interface using Flask-RESTX
+"""
+
+from flask import Flask, request, jsonify
+from flask_restx import Api, Resource, fields, reqparse
+from flask_cors import CORS
+from werkzeug.datastructures import FileStorage
+import os
+from inference_utils import MemoryModuleDetector
+
+# Initialize Flask app with Swagger
+app = Flask(__name__)
+CORS(app)
+
+# Configure Swagger UI
+api = Api(
+    app,
+    version='1.0.0',
+    title='Memory Module Detection API',
+    description='AI-powered memory module detection in motherboard images using YOLOv8',
+    doc='/docs/',  # Swagger UI will be available at /docs/
+    prefix='/api/v1'
+)
+
+# Create namespaces
+ns_health = api.namespace('health', description='System health and status')
+ns_detect = api.namespace('detect', description='Memory module detection operations')
+
+# Initialize detector
+MODEL_PATH = 'runs/detect/memory_module_detection/weights/best.pt'
+detector = MemoryModuleDetector(MODEL_PATH)
+
+# Define models for Swagger documentation
+detection_model = api.model('Detection', {
+    'bbox': fields.List(fields.Float, description='Bounding box coordinates [x1, y1, x2, y2]'),
+    'confidence': fields.Float(description='Detection confidence score (0.0-1.0)'),
+    'class': fields.Integer(description='Class ID (0 for memory_module)'),
+    'class_name': fields.String(description='Class name (memory_module)')
+})
+
+detection_response = api.model('DetectionResponse', {
+    'success': fields.Boolean(description='Whether detection was successful'),
+    'detections': fields.List(fields.Nested(detection_model), description='List of detected memory modules'),
+    'num_detections': fields.Integer(description='Number of memory modules detected'),
+    'annotated_image': fields.String(description='Base64 encoded annotated image'),
+    'confidence_threshold': fields.Float(description='Confidence threshold used'),
+    'original_filename': fields.String(description='Original filename (for uploads)')
+})
+
+health_response = api.model('HealthResponse', {
+    'status': fields.String(description='System health status'),
+    'model_loaded': fields.Boolean(description='Whether the AI model is loaded'),
+    'model_path': fields.String(description='Path to the AI model file')
+})
+
+error_response = api.model('ErrorResponse', {
+    'success': fields.Boolean(description='Always false for errors'),
+    'error': fields.String(description='Error message')
+})
+
+# Health endpoint
+@ns_health.route('/')
+class Health(Resource):
+    @ns_health.doc('health_check')
+    @ns_health.marshal_with(health_response)
+    def get(self):
+        """Check system health and model status"""
+        return {
+            'status': 'healthy',
+            'model_loaded': detector.model is not None,
+            'model_path': MODEL_PATH
+        }
+
+# File upload parser
+upload_parser = reqparse.RequestParser()
+upload_parser.add_argument('image', location='files', type=FileStorage, required=True, 
+                          help='Motherboard image file (PNG, JPG, JPEG, GIF, BMP)')
+upload_parser.add_argument('confidence', type=float, default=0.8, 
+                          help='Confidence threshold (0.1-1.0, default: 0.8)')
+
+@ns_detect.route('/upload')
+class DetectUpload(Resource):
+    @ns_detect.doc('detect_upload')
+    @ns_detect.expect(upload_parser)
+    @ns_detect.marshal_with(detection_response, code=200)
+    @ns_detect.marshal_with(error_response, code=400)
+    @ns_detect.marshal_with(error_response, code=500)
+    def post(self):
+        """Upload and analyze motherboard image for memory modules"""
+        try:
+            if detector.model is None:
+                return {'success': False, 'error': 'Model not loaded'}, 500
+            
+            args = upload_parser.parse_args()
+            file = args['image']
+            confidence = args['confidence']
+            
+            if not file:
+                return {'success': False, 'error': 'No image file provided'}, 400
+            
+            # Save file temporarily
+            temp_path = f"temp_{file.filename}"
+            file.save(temp_path)
+            
+            try:
+                # Run detection
+                detections, annotated_image = detector.detect(temp_path, conf_threshold=confidence)
+                
+                # Convert annotated image to base64
+                import io
+                import base64
+                buffer = io.BytesIO()
+                annotated_image.save(buffer, format='PNG')
+                annotated_base64 = base64.b64encode(buffer.getvalue()).decode()
+                
+                return {
+                    'success': True,
+                    'detections': detections,
+                    'num_detections': len(detections),
+                    'annotated_image': annotated_base64,
+                    'confidence_threshold': confidence,
+                    'original_filename': file.filename
+                }
+            
+            finally:
+                # Clean up
+                if os.path.exists(temp_path):
+                    os.remove(temp_path)
+        
+        except Exception as e:
+            return {'success': False, 'error': str(e)}, 500
+
+# Hardcoded image parser
+hardcoded_parser = reqparse.RequestParser()
+hardcoded_parser.add_argument('confidence', type=float, default=0.8, location='args',
+                             help='Confidence threshold (0.1-1.0, default: 0.8)')
+
+@ns_detect.route('/hardcoded')
+class DetectHardcoded(Resource):
+    @ns_detect.doc('detect_hardcoded')
+    @ns_detect.expect(hardcoded_parser)
+    @ns_detect.marshal_with(detection_response, code=200)
+    @ns_detect.marshal_with(error_response, code=404)
+    @ns_detect.marshal_with(error_response, code=500)
+    def get(self):
+        """Analyze predefined test image for memory modules"""
+        try:
+            if detector.model is None:
+                return {'success': False, 'error': 'Model not loaded'}, 500
+            
+            args = hardcoded_parser.parse_args()
+            confidence = args['confidence']
+            
+            test_image_path = 'training/memory/out1.png'
+            if not os.path.exists(test_image_path):
+                return {'success': False, 'error': f'Test image not found at {test_image_path}'}, 404
+            
+            # Run detection
+            detections, annotated_image = detector.detect(test_image_path, conf_threshold=confidence)
+            
+            # Convert annotated image to base64
+            import io
+            import base64
+            buffer = io.BytesIO()
+            annotated_image.save(buffer, format='PNG')
+            annotated_base64 = base64.b64encode(buffer.getvalue()).decode()
+            
+            return {
+                'success': True,
+                'detections': detections,
+                'num_detections': len(detections),
+                'annotated_image': annotated_base64,
+                'confidence_threshold': confidence,
+                'test_image_path': test_image_path
+            }
+        
+        except Exception as e:
+            return {'success': False, 'error': str(e)}, 500
+
+# Base64 image model
+base64_model = api.model('Base64Request', {
+    'image': fields.String(required=True, description='Base64 encoded image data'),
+    'confidence': fields.Float(default=0.8, description='Confidence threshold (0.1-1.0)')
+})
+
+@ns_detect.route('/base64')
+class DetectBase64(Resource):
+    @ns_detect.doc('detect_base64')
+    @ns_detect.expect(base64_model)
+    @ns_detect.marshal_with(detection_response, code=200)
+    @ns_detect.marshal_with(error_response, code=400)
+    @ns_detect.marshal_with(error_response, code=500)
+    def post(self):
+        """Analyze base64 encoded image for memory modules"""
+        try:
+            if detector.model is None:
+                return {'success': False, 'error': 'Model not loaded'}, 500
+            
+            data = request.get_json()
+            if not data or 'image' not in data:
+                return {'success': False, 'error': 'No base64 image data provided'}, 400
+            
+            confidence = data.get('confidence', 0.8)
+            
+            # Decode base64 image
+            import base64
+            import io
+            from PIL import Image
+            import numpy as np
+            
+            try:
+                img_data = base64.b64decode(data['image'])
+                image = Image.open(io.BytesIO(img_data))
+            except Exception as e:
+                return {'success': False, 'error': f'Invalid base64 image data: {str(e)}'}, 400
+            
+            # Run detection
+            detections, annotated_image = detector.detect_from_array(np.array(image), conf_threshold=confidence)
+            
+            # Convert annotated image to base64
+            buffer = io.BytesIO()
+            annotated_image.save(buffer, format='PNG')
+            annotated_base64 = base64.b64encode(buffer.getvalue()).decode()
+            
+            return {
+                'success': True,
+                'detections': detections,
+                'num_detections': len(detections),
+                'annotated_image': annotated_base64,
+                'confidence_threshold': confidence
+            }
+        
+        except Exception as e:
+            return {'success': False, 'error': str(e)}, 500
+
+if __name__ == '__main__':
+    print("Starting Memory Module Detection API with Swagger UI...")
+    print(f"Model path: {MODEL_PATH}")
+    print(f"Model loaded: {detector.model is not None}")
+    print("Swagger UI available at: http://localhost:5003/docs/")
+    
+    app.run(host='0.0.0.0', port=5003, debug=True)

static/script.js

@@ -23,7 +23,14 @@ function setupEventListeners() {
     uploadArea.addEventListener('dragover', handleDragOver);
     uploadArea.addEventListener('dragleave', handleDragLeave);
     uploadArea.addEventListener('drop', handleDrop);
-    uploadArea.addEventListener('click', () => document.getElementById('fileInput').click());
+
+    // Click to upload (only on the upload area, not buttons inside it)
+    uploadArea.addEventListener('click', function(event) {
+        // Only trigger file input if clicking on the upload area itself, not buttons
+        if (event.target === uploadArea || event.target.closest('.upload-content') && !event.target.closest('button')) {
+            document.getElementById('fileInput').click();
+        }
+    });
 }
 
 async function checkApiStatus() {
@@ -94,17 +101,21 @@ function handleFileSelect(event) {
 
 function handleDragOver(event) {
     event.preventDefault();
+    event.stopPropagation();
     event.currentTarget.classList.add('dragover');
 }
 
 function handleDragLeave(event) {
+    event.preventDefault();
+    event.stopPropagation();
     event.currentTarget.classList.remove('dragover');
 }
 
 function handleDrop(event) {
     event.preventDefault();
+    event.stopPropagation();
     event.currentTarget.classList.remove('dragover');
-    
+
     const files = event.dataTransfer.files;
     if (files.length > 0) {
         handleFile(files[0]);
@@ -116,23 +127,53 @@ function handleFile(file) {
         alert('Please select an image file');
         return;
     }
-    
+
     uploadedFile = file;
-    
+
-    // Show file info
+    // Show file info with change file option
     const uploadArea = document.getElementById('uploadArea');
     uploadArea.innerHTML = `
         <div class="upload-content">
             <i class="fas fa-check-circle upload-icon" style="color: #28a745;"></i>
             <p><strong>File selected:</strong> ${file.name}</p>
             <p class="upload-hint">Size: ${(file.size / 1024 / 1024).toFixed(2)} MB</p>
+            <button class="btn btn-outline" onclick="resetFileUpload()" style="margin-top: 10px;">
+                <i class="fas fa-sync-alt"></i> Change File
+            </button>
         </div>
     `;
-    
+
     // Show controls
     document.getElementById('uploadControls').style.display = 'block';
 }
 
+function resetFileUpload() {
+    uploadedFile = null;
+
+    // Reset file input
+    const fileInput = document.getElementById('fileInput');
+    fileInput.value = '';
+
+    // Reset upload area
+    const uploadArea = document.getElementById('uploadArea');
+    uploadArea.innerHTML = `
+        <div class="upload-content">
+            <i class="fas fa-cloud-upload-alt upload-icon"></i>
+            <p>Drag and drop an image here or click to select</p>
+            <p class="upload-hint">Supported formats: PNG, JPG, JPEG, GIF, BMP</p>
+            <button class="btn btn-outline" onclick="document.getElementById('fileInput').click()">
+                Select Image
+            </button>
+        </div>
+    `;
+
+    // Hide controls
+    document.getElementById('uploadControls').style.display = 'none';
+
+    // Hide results if showing
+    document.getElementById('resultsSection').style.display = 'none';
+}
+
 async function processUploadedImage() {
     if (!uploadedFile) {
         alert('Please select an image first');
@@ -157,6 +198,8 @@ async function processUploadedImage() {
 
         if (result.success) {
             displayResults(result, 'Uploaded Image Detection');
+            // Add option to upload another file
+            addUploadAnotherOption();
         } else {
             alert(`Detection failed: ${result.error}`);
         }
@@ -166,6 +209,18 @@ async function processUploadedImage() {
     }
 }
 
+function addUploadAnotherOption() {
+    const uploadControls = document.getElementById('uploadControls');
+    if (!uploadControls.querySelector('.upload-another')) {
+        const uploadAnotherBtn = document.createElement('button');
+        uploadAnotherBtn.className = 'btn btn-secondary upload-another';
+        uploadAnotherBtn.style.marginLeft = '10px';
+        uploadAnotherBtn.innerHTML = '<i class="fas fa-plus"></i> Upload Another Image';
+        uploadAnotherBtn.onclick = resetFileUpload;
+        uploadControls.appendChild(uploadAnotherBtn);
+    }
+}
+
 async function testHardcodedImage() {
     showLoading('Testing hardcoded image...');