Aherobo Ovie Victor
55af293bb7
✅ File Input Reset Fix: - Completely recreate file input element on reset to clear all state - Remove and recreate DOM elements to eliminate cached event listeners - Add comprehensive logging for debugging file selection issues - Force clear file input value and recreate with fresh event handlers ✅ Event Listener Management: - Clone and replace upload area to remove stale event listeners - Reinitialize all drag & drop and click event handlers - Ensure file input click events work after multiple uploads - Add proper event propagation handling ✅ Upload Area Reinitialization: - Create initializeUploadArea() function for complete reset - Remove existing file input and create brand new element - Reattach all event listeners to fresh DOM elements - Add console logging for debugging upload flow ✅ Robust State Management: - Clear uploadedFile variable on reset - Hide upload controls and results sections - Remove 'Upload Another' buttons properly - Ensure clean state between file uploads This should completely resolve the file upload reset issue where users had to reload the page to upload a second file.
103 lines
4.5 KiB
HTML
103 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Memory Module Detection - QA Testing Interface</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1><i class="fas fa-microchip"></i> Memory Module Detection</h1>
|
|
<p>QA Testing Interface for Motherboard Memory Module Detection</p>
|
|
<div class="status-indicator" id="apiStatus">
|
|
<i class="fas fa-circle"></i> <span>Checking API...</span>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- API Information Panel -->
|
|
<section class="panel" id="apiInfoPanel">
|
|
<h2><i class="fas fa-info-circle"></i> API Information</h2>
|
|
<div class="api-info" id="apiInfo">
|
|
<div class="loading">Loading API information...</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Test Options -->
|
|
<section class="panel">
|
|
<h2><i class="fas fa-vial"></i> Test Options</h2>
|
|
<div class="test-options">
|
|
<button class="btn btn-primary" onclick="testHardcodedImage()">
|
|
<i class="fas fa-image"></i> Test Hardcoded Image
|
|
</button>
|
|
<button class="btn btn-secondary" onclick="showUploadSection()">
|
|
<i class="fas fa-upload"></i> Upload Custom Image
|
|
</button>
|
|
<button class="btn btn-info" onclick="runAllTests()">
|
|
<i class="fas fa-play"></i> Run All Tests
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Image Upload Section -->
|
|
<section class="panel" id="uploadSection" style="display: none;">
|
|
<h2><i class="fas fa-cloud-upload-alt"></i> Upload Image</h2>
|
|
<div class="upload-area" id="uploadArea">
|
|
<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>
|
|
<input type="file" id="fileInput" accept="image/*" style="display: none;" multiple="false">
|
|
<button class="btn btn-outline" onclick="document.getElementById('fileInput').click()">
|
|
Select Image
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upload-controls" style="display: none;" id="uploadControls">
|
|
<div class="confidence-info">
|
|
<p><strong>Confidence Threshold:</strong> 80% (High Precision Mode)</p>
|
|
</div>
|
|
<button class="btn btn-success" onclick="processUploadedImage()">
|
|
<i class="fas fa-search"></i> Detect Memory Modules
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Results Section -->
|
|
<section class="panel" id="resultsSection" style="display: none;">
|
|
<h2><i class="fas fa-chart-bar"></i> Detection Results</h2>
|
|
<div class="results-content" id="resultsContent">
|
|
<!-- Results will be populated here -->
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Test Results Section -->
|
|
<section class="panel" id="testResultsSection" style="display: none;">
|
|
<h2><i class="fas fa-clipboard-check"></i> Test Results</h2>
|
|
<div class="test-results" id="testResults">
|
|
<!-- Test results will be populated here -->
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<p>© 2024 Memory Module Detection Project - QA Testing Interface</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- Loading Overlay -->
|
|
<div class="loading-overlay" id="loadingOverlay" style="display: none;">
|
|
<div class="loading-content">
|
|
<i class="fas fa-spinner fa-spin"></i>
|
|
<p id="loadingText">Processing...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="{{ url_for('static', filename='script.js') }}"></script>
|
|
</body>
|
|
</html>
|