| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Multiple Classification</title>
|
| <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>
|
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.css">
|
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| <style>
|
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
|
|
| :root {
|
| --primary-color: #4f46e5;
|
| --primary-dark: #4338ca;
|
| --success-color: #22c55e;
|
| --error-color: #ef4444;
|
| --background-color: #1a1a2e;
|
| --card-background: rgba(255, 255, 255, 0.1);
|
| --text-primary: #ffffff;
|
| --text-secondary: #a5b4fc;
|
| --border-color: rgba(255, 255, 255, 0.18);
|
| }
|
|
|
| body {
|
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
| min-height: 100vh;
|
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
| display: flex;
|
| justify-content: center;
|
| align-items: center;
|
| margin: 0;
|
| color: var(--text-primary);
|
| overflow-x: hidden;
|
| }
|
|
|
| .container {
|
| max-width: 1200px;
|
| margin: 0 auto;
|
| padding: 2rem;
|
| position: relative;
|
| z-index: 1;
|
| width: 100%;
|
| }
|
|
|
| .glass-card {
|
| background: var(--card-background);
|
| backdrop-filter: blur(10px);
|
| border-radius: 20px;
|
| padding: 2rem;
|
| box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
| border: 1px solid var(--border-color);
|
| transform: translateY(0);
|
| transition: transform 0.3s ease;
|
| text-align: center;
|
| }
|
|
|
| .glass-card:hover {
|
| transform: translateY(-5px);
|
| }
|
|
|
| .header {
|
| text-align: center;
|
| margin-bottom: 1.5rem;
|
| }
|
|
|
| .header h1 {
|
| font-size: 2rem;
|
| color: var(--text-primary);
|
| margin-bottom: 0.25rem;
|
| font-weight: 700;
|
| }
|
|
|
| .header p {
|
| color: var(--text-secondary);
|
| font-size: 1rem;
|
| }
|
|
|
| .upload-section {
|
| background: var(--card-background);
|
| border-radius: 0.75rem;
|
| padding: 1.5rem;
|
| box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
| margin-bottom: 1.5rem;
|
| }
|
|
|
| .dropzone {
|
| border: 2px dashed var(--primary-color);
|
| border-radius: 1rem;
|
| background: rgba(255, 255, 255, 0.05);
|
| padding: 2rem;
|
| min-height: 200px;
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| justify-content: center;
|
| transition: all 0.3s ease;
|
| }
|
|
|
| .dropzone:hover {
|
| background: rgba(255, 255, 255, 0.1);
|
| border-color: var(--primary-dark);
|
| }
|
|
|
| .dropzone .dz-message {
|
| margin: 1rem 0;
|
| text-align: center;
|
| }
|
|
|
| .dropzone .dz-preview {
|
| background: var(--card-background);
|
| border-radius: 1rem;
|
| border: 1px solid var(--border-color);
|
| padding: 0.5rem;
|
| margin: 1rem;
|
| transition: transform 0.2s ease;
|
| }
|
|
|
| .dropzone .dz-preview:hover {
|
| transform: translateY(-2px);
|
| }
|
|
|
| .dropzone .dz-image {
|
| width: 120px !important;
|
| height: 120px !important;
|
| border-radius: 0.75rem !important;
|
| overflow: hidden;
|
| position: relative;
|
| }
|
|
|
| .dropzone .dz-image img {
|
| width: 100%;
|
| height: 100%;
|
| object-fit: cover;
|
| }
|
|
|
| .dropzone .dz-details {
|
| padding-top: 0.5rem;
|
| text-align: center;
|
| }
|
|
|
| .dropzone .dz-filename {
|
| color: var(--text-primary);
|
| font-size: 0.875rem;
|
| max-width: 120px;
|
| overflow: hidden;
|
| text-overflow: ellipsis;
|
| white-space: nowrap;
|
| }
|
|
|
| .dropzone .dz-remove {
|
| color: var(--error-color);
|
| text-decoration: none;
|
| font-size: 0.875rem;
|
| margin-top: 0.5rem;
|
| display: inline-block;
|
| transition: opacity 0.2s ease;
|
| }
|
|
|
| .dropzone .dz-remove:hover {
|
| opacity: 0.8;
|
| }
|
|
|
| .dropzone .dz-preview .dz-progress {
|
| height: 4px;
|
| background: rgba(255, 255, 255, 0.1);
|
| margin-top: 0.5rem;
|
| border-radius: 2px;
|
| }
|
|
|
| .dropzone .dz-preview .dz-progress .dz-upload {
|
| background: var(--primary-color);
|
| border-radius: 2px;
|
| }
|
|
|
| .preview-container {
|
| display: flex;
|
| flex-wrap: wrap;
|
| gap: 1rem;
|
| margin-top: 1rem;
|
| }
|
|
|
| .control-panel {
|
| display: flex;
|
| gap: 1rem;
|
| margin-top: 1rem;
|
| justify-content: center;
|
| }
|
|
|
| .btn {
|
| padding: 0.75rem 1.5rem;
|
| border-radius: 0.5rem;
|
| border: none;
|
| color: white;
|
| font-weight: 500;
|
| cursor: pointer;
|
| transition: all 0.2s ease;
|
| display: flex;
|
| align-items: center;
|
| gap: 0.5rem;
|
| font-size: 1rem;
|
| }
|
|
|
| .btn:hover {
|
| transform: translateY(-1px);
|
| }
|
|
|
| .btn-clear {
|
| background: var(--text-secondary);
|
| }
|
|
|
| .btn-classify {
|
| background: var(--primary-color);
|
| }
|
|
|
| .btn-classify:hover {
|
| background: var(--primary-dark);
|
| }
|
|
|
| .btn-download {
|
| background: var(--success-color);
|
| }
|
|
|
| .btn-download:hover {
|
| background: #1e9c4f;
|
| }
|
|
|
| .results-section {
|
| margin-top: 1.5rem;
|
| }
|
|
|
| .section-header {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| margin-bottom: 1rem;
|
| padding: 1rem;
|
| border-radius: 0.5rem;
|
| box-shadow: 0 2px 4px -1px rgb(0 0 0 / 0.1);
|
| background: var(--card-background);
|
| }
|
|
|
| .section-header h2 {
|
| margin: 0;
|
| display: flex;
|
| align-items: center;
|
| gap: 0.5rem;
|
| font-size: 1.25rem;
|
| color: var(--text-primary);
|
| }
|
|
|
| .pass-header {
|
| background: rgba(34, 197, 94, 0.1);
|
| color: var(--success-color);
|
| }
|
|
|
| .fail-header {
|
| background: rgba(239, 68, 68, 0.1);
|
| color: var(--error-color);
|
| }
|
|
|
| .download-btn {
|
| padding: 0.75rem 1.5rem;
|
| border-radius: 0.5rem;
|
| color: white;
|
| text-decoration: none;
|
| font-weight: 500;
|
| transition: all 0.2s ease;
|
| display: flex;
|
| align-items: center;
|
| gap: 0.5rem;
|
| font-size: 1rem;
|
| }
|
|
|
| .download-btn:hover {
|
| transform: translateY(-1px);
|
| }
|
|
|
| .download-btn.pass {
|
| background: var(--success-color);
|
| }
|
|
|
| .download-btn.fail {
|
| background: var(--error-color);
|
| }
|
|
|
| .image-list {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 0.75rem;
|
| margin-bottom: 1.5rem;
|
| }
|
|
|
| .image-ribbon {
|
| display: flex;
|
| align-items: center;
|
| padding: 0.75rem;
|
| background: var(--card-background);
|
| border-radius: 0.5rem;
|
| box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
|
| transition: all 0.2s ease;
|
| cursor: pointer;
|
| }
|
|
|
| .image-ribbon:hover {
|
| transform: translateX(4px);
|
| background: rgba(255, 255, 255, 0.1);
|
| }
|
|
|
| .thumbnail {
|
| width: 50px;
|
| height: 50px;
|
| border-radius: 0.375rem;
|
| object-fit: cover;
|
| margin-right: 1rem;
|
| }
|
|
|
| .image-info {
|
| flex: 1;
|
| }
|
|
|
| .filename {
|
| font-weight: 500;
|
| color: var(--text-primary);
|
| margin-top: 0.5rem;
|
| font-size: 1rem;
|
| white-space: normal;
|
| word-break: break-word;
|
| text-align: center;
|
| }
|
|
|
| .labels {
|
| display: flex;
|
| flex-wrap: wrap;
|
| gap: 0.5rem;
|
| justify-content: center;
|
| align-items: center;
|
| margin: 0 auto;
|
| position: relative;
|
| transition: all 0.3s ease;
|
| }
|
|
|
| .label {
|
| background: rgba(255, 255, 255, 0.1);
|
| padding: 0.5rem 1rem;
|
| border-radius: 9999px;
|
| font-size: 0.875rem;
|
| color: var(--text-secondary);
|
| white-space: nowrap;
|
| text-align: center;
|
| }
|
|
|
| #summary {
|
| background: var(--card-background);
|
| padding: 1rem;
|
| border-radius: 0.5rem;
|
| text-align: center;
|
| font-size: 1rem;
|
| font-weight: 500;
|
| margin-bottom: 1.5rem;
|
| box-shadow: 0 2px 4px -1px rgb(0 0 0 / 0.1);
|
| color: var(--text-primary);
|
| }
|
|
|
| .progress-container {
|
| margin-top: 1rem;
|
| background: rgba(255, 255, 255, 0.1);
|
| border-radius: 0.5rem;
|
| overflow: hidden;
|
| }
|
|
|
| .progress-bar {
|
| height: 6px;
|
| background: var(--primary-color);
|
| width: 0;
|
| transition: width 0.3s ease;
|
| }
|
|
|
| .loading-overlay {
|
| display: none;
|
| position: fixed;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| height: 100%;
|
| background: rgba(0, 0, 0, 0.95);
|
| z-index: 1000;
|
| justify-content: center;
|
| align-items: center;
|
| color: white;
|
| }
|
|
|
| .loading-content {
|
| background: var(--card-background);
|
| padding: 2rem;
|
| border-radius: 1rem;
|
| width: 90%;
|
| max-width: 500px;
|
| box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
| text-align: center;
|
| color: var(--text-primary);
|
| }
|
|
|
| .loading-header {
|
| text-align: center;
|
| margin-bottom: 1.5rem;
|
| }
|
|
|
| .loading-header h3 {
|
| color: var(--primary-color);
|
| margin: 0;
|
| margin-bottom: 0.5rem;
|
| }
|
|
|
| .loading-spinner {
|
| margin: 1rem 0;
|
| font-size: 2rem;
|
| color: var(--primary-color);
|
| }
|
|
|
| .loading-progress {
|
| font-size: 1.1rem;
|
| color: var(--text-primary);
|
| }
|
|
|
| .image-modal {
|
| display: none;
|
| position: fixed;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| height: 100%;
|
| background: rgba(0, 0, 0, 0.9);
|
| z-index: 2000;
|
| justify-content: center;
|
| align-items: center;
|
| }
|
|
|
| .modal-content {
|
| position: relative;
|
| max-width: 90%;
|
| max-height: 90vh;
|
| margin: auto;
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| }
|
|
|
| .modal-image {
|
| max-width: 100%;
|
| max-height: 80vh;
|
| object-fit: contain;
|
| border-radius: 0.5rem;
|
| }
|
|
|
| .modal-close {
|
| position: absolute;
|
| top: -2rem;
|
| right: 0;
|
| color: white;
|
| font-size: 1.5rem;
|
| cursor: pointer;
|
| background: none;
|
| border: none;
|
| padding: 0.5rem;
|
| }
|
|
|
| .results-table {
|
| width: 100%;
|
| border-collapse: collapse;
|
| margin-top: 1.5rem;
|
| background: var(--card-background);
|
| border-radius: 0.5rem;
|
| overflow: hidden;
|
| table-layout: fixed;
|
| }
|
|
|
| .results-table th,
|
| .results-table td {
|
| padding: 0.75rem 0.5rem;
|
| vertical-align: middle;
|
| text-align: center;
|
| border-bottom: 1px solid var(--border-color);
|
| }
|
|
|
| .results-table .serial {
|
| width: 80px;
|
| }
|
|
|
| .results-table .image-col {
|
| width: 200px;
|
| }
|
|
|
| .results-table .result-col {
|
| width: 180px;
|
| }
|
|
|
| .results-table .labels-col {
|
| width: auto;
|
| min-width: 150px;
|
| padding-left: 1rem;
|
| text-align: center !important;
|
| }
|
|
|
| .results-table td {
|
| padding: 0.75rem 0.5rem;
|
| vertical-align: middle;
|
| border-bottom: 1px solid var(--border-color);
|
| text-align: left;
|
| }
|
|
|
| .results-table td.serial,
|
| .results-table td.image-col,
|
| .results-table td.result-col {
|
| text-align: center;
|
| }
|
|
|
| .results-table th.labels-col {
|
| text-align: center;
|
| }
|
|
|
| .results-table td.labels-col {
|
| text-align: center !important;
|
| padding: 1rem;
|
| }
|
|
|
| .results-table tbody tr:last-child td {
|
| border-bottom: none;
|
| }
|
|
|
| .result-pass,
|
| .result-fail {
|
| display: inline-block;
|
| padding: 0.25rem 0.75rem;
|
| border-radius: 9999px;
|
| text-align: center;
|
| }
|
|
|
| .result-pass {
|
| background: rgba(34, 197, 94, 0.1);
|
| }
|
|
|
| .result-fail {
|
| background: rgba(239, 68, 68, 0.1);
|
| }
|
|
|
| .dropzone {
|
| border: 2px dashed var(--primary-color);
|
| border-radius: 0.5rem;
|
| background: rgba(255, 255, 255, 0.1);
|
| padding: 1rem;
|
| min-height: 150px;
|
| }
|
|
|
| .dropzone .dz-preview {
|
| margin: 1rem;
|
| }
|
|
|
| .dropzone .dz-preview .dz-image {
|
| border-radius: 0.5rem;
|
| }
|
|
|
| .dropzone .dz-preview .dz-details {
|
| color: var(--text-primary);
|
| }
|
|
|
| .dropzone .dz-preview {
|
| display: inline-block;
|
| margin: 1rem;
|
| position: relative;
|
| }
|
|
|
| .dropzone .dz-preview:nth-child(n+5) {
|
| opacity: 0.3;
|
| }
|
|
|
| .dropzone .dz-preview:nth-child(n+6) {
|
| display: none !important;
|
| }
|
|
|
| .dropzone .dz-preview.dz-file-preview .dz-image,
|
| .dropzone .dz-preview .dz-image {
|
| border-radius: 8px;
|
| width: 150px;
|
| height: 150px;
|
| }
|
|
|
| .dz-more-indicator {
|
| position: absolute;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| height: 100%;
|
| background: rgba(0, 0, 0, 0.7);
|
| color: white;
|
| display: flex;
|
| justify-content: center;
|
| align-items: center;
|
| font-size: 1.2rem;
|
| border-radius: 8px;
|
| display: none;
|
| }
|
|
|
| .dropzone .dz-preview:nth-child(5) .dz-more-indicator {
|
| display: flex;
|
| }
|
|
|
| .dropzone .dz-preview {
|
| display: none !important;
|
| }
|
|
|
| .upload-section {
|
| background: var(--card-background);
|
| border-radius: 1rem;
|
| padding: 2rem;
|
| margin-bottom: 2rem;
|
| }
|
|
|
| .dropzone {
|
| border: 2px dashed var(--primary-color);
|
| border-radius: 1rem;
|
| padding: 2rem;
|
| text-align: center;
|
| background: rgba(255, 255, 255, 0.05);
|
| transition: all 0.3s ease;
|
| min-height: 200px;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| }
|
|
|
| .dropzone .dz-message {
|
| margin: 0;
|
| }
|
|
|
| .dropzone:hover {
|
| background: rgba(255, 255, 255, 0.08);
|
| border-color: var(--primary-dark);
|
| }
|
|
|
| #thumbnail-preview-box {
|
| display: none;
|
| position: absolute;
|
| z-index: 9999;
|
| background: var(--card-background);
|
| border: 1px solid var(--border-color);
|
| border-radius: 0.75rem;
|
| padding: 1rem;
|
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
|
| max-width: 300px;
|
| }
|
|
|
| #thumbnail-preview-box img {
|
| max-width: 100%;
|
| border-radius: 0.5rem;
|
| display: block;
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <div class="container">
|
| <div class="glass-card">
|
| <div class="header">
|
| <h1>Multiple Images Classification</h1>
|
| <p>Classify and segregate multiple images at once...</p>
|
| </div>
|
|
|
| <div class="upload-section">
|
| <form action="/upload_multiple" class="dropzone" id="upload-form">
|
| <div class="dz-message">
|
| <i class="fas fa-cloud-upload-alt fa-3x" style="color: var(--primary-color); margin-bottom: 1rem;"></i>
|
| <h3 style="margin: 0.5rem 0; color: var(--text-primary);">Drop files here</h3>
|
| <p style="color: var(--text-secondary); margin: 0;">or click to browse</p>
|
| <div id="file-count" style="margin-top: 1rem; color: var(--text-secondary);"></div>
|
| </div>
|
| </form>
|
| <div class="progress-container">
|
| <div class="progress-bar" id="upload-progress"></div>
|
| </div>
|
| <div class="control-panel">
|
| <button class="btn btn-clear" onclick="clearAllImages()">
|
| <i class="fas fa-trash-alt"></i>
|
| Clear All
|
| </button>
|
| <button class="btn btn-classify" id="classify-btn" onclick="highlightClassification()">
|
| <i class="fas fa-tags"></i>
|
| Classify
|
| </button>
|
|
|
| <button class="btn btn-download" id="download-html-btn" onclick="downloadPageAsHTML()">
|
| <i class="fas fa-download"></i>
|
| Download HTML
|
| </button>
|
| </div>
|
| </div>
|
|
|
| <div id="summary"></div>
|
|
|
| <div class="results-section">
|
| <table class="results-table" id="results-table">
|
| <thead>
|
| <tr>
|
| <th class="serial">S.No</th>
|
| <th class="image-col">Image</th>
|
| <th class="result-col">Result</th>
|
| <th class="labels-col">Labels</th>
|
| </tr>
|
| </thead>
|
| <tbody id="results-tbody">
|
| </tbody>
|
| </table>
|
| </div>
|
|
|
|
|
| <div class="loading-overlay" id="loading-overlay">
|
| <div class="loading-content">
|
| <div class="loading-header">
|
| <h3>Classifying Images</h3>
|
| <p>Please wait while we process your images...</p>
|
| </div>
|
| <div class="loading-spinner">
|
| <i class="fas fa-spinner fa-spin"></i>
|
| </div>
|
| <div class="loading-files" id="loading-files">
|
|
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="image-modal" id="image-modal">
|
| <div class="modal-content">
|
| <button class="modal-close" onclick="closeModal()">
|
| <i class="fas fa-times"></i>
|
| </button>
|
| <img class="modal-image" id="modal-image" src="" alt="">
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <div id="thumbnail-preview-box">
|
| <img id="thumbnail-preview-img" src="" alt="">
|
| </div>
|
|
|
| <script>
|
| let isClassifying = false;
|
|
|
| Dropzone.options.uploadForm = {
|
| paramName: "file",
|
| maxFilesize: 16,
|
| acceptedFiles: "image/*",
|
| previewsContainer: false,
|
| init: function() {
|
| let myDropzone = this;
|
|
|
|
|
| this.on("addedfile", function(file) {
|
|
|
| if (myDropzone.files.length === 1) {
|
|
|
| document.getElementById('results-tbody').innerHTML = '';
|
| document.getElementById('summary').innerHTML = '';
|
| document.getElementById('upload-progress').style.width = '0';
|
|
|
|
|
| fetch('/clear_uploads', { method: 'POST' })
|
| .then(response => response.json())
|
| .catch(error => console.error('Error:', error));
|
| }
|
| updateFileCount(myDropzone.files.length);
|
| });
|
|
|
| this.on("success", function(file, response) {
|
| updateFileCount(this.files.length);
|
| });
|
|
|
| this.on("removedfile", function() {
|
| updateFileCount(this.files.length);
|
| });
|
|
|
| this.on("totaluploadprogress", function(progress) {
|
| document.getElementById('upload-progress').style.width = progress + "%";
|
| });
|
|
|
|
|
| this.element.querySelector(".dz-message").addEventListener("click", function() {
|
|
|
| myDropzone.removeAllFiles(true);
|
| document.getElementById('results-tbody').innerHTML = '';
|
| document.getElementById('summary').innerHTML = '';
|
| document.getElementById('upload-progress').style.width = '0';
|
|
|
|
|
| fetch('/clear_uploads', { method: 'POST' })
|
| .then(response => response.json())
|
| .catch(error => console.error('Error:', error));
|
| });
|
| }
|
| };
|
|
|
| function updateFileCount(count) {
|
| const fileCount = document.getElementById('file-count');
|
| if (count > 0) {
|
| fileCount.textContent = `${count} file${count === 1 ? '' : 's'} selected`;
|
| } else {
|
| fileCount.textContent = '';
|
| }
|
| }
|
|
|
| function updateSummary() {
|
| const passCount = document.querySelectorAll('.result-pass').length;
|
| const failCount = document.querySelectorAll('.result-fail').length;
|
| const totalFiles = passCount + failCount;
|
|
|
| document.getElementById('summary').innerHTML = `
|
| <i class="fas fa-chart-pie"></i> Results:
|
| <span style="color: var(--success-color)">${passCount} passed</span>,
|
| <span style="color: var(--error-color)">${failCount} failed</span>
|
| out of ${totalFiles} total images
|
| `;
|
| }
|
|
|
| function clearAllImages() {
|
| fetch('/clear_uploads', { method: 'POST' })
|
| .then(response => response.json())
|
| .then(data => {
|
|
|
| document.getElementById('results-tbody').innerHTML = '';
|
| document.getElementById('summary').innerHTML = '';
|
| document.getElementById('upload-progress').style.width = '0';
|
|
|
|
|
| let myDropzone = Dropzone.forElement("#upload-form");
|
| myDropzone.removeAllFiles(true);
|
|
|
|
|
| document.querySelectorAll('.dz-preview').forEach(el => el.remove());
|
| })
|
| .catch(error => console.error('Error:', error));
|
| }
|
|
|
| function createTableRow(result, index) {
|
| const labels = result.status === 'Fail' ? result.labels : [];
|
|
|
| return `
|
| <tr>
|
| <td class="serial">${index + 1}</td>
|
| <td class="image-col">
|
| <img src="data:image/jpeg;base64,${result.image}"
|
| alt="${result.filename}"
|
| class="thumbnail"
|
| onclick="openModal(this)"
|
| style="cursor: pointer;">
|
| <div class="filename">${result.filename}</div>
|
| </td>
|
| <td class="result-col">
|
| <span class="result-${result.status.toLowerCase()}">${result.status}</span>
|
| </td>
|
| <td class="labels-col">
|
| ${result.status === 'Fail' ? `
|
| <div class="labels">
|
| ${labels.map(label => `
|
| <span class="label">${label}</span>
|
| `).join('')}
|
| </div>
|
| ` : '-'}
|
| </td>
|
| </tr>
|
| `;
|
| }
|
|
|
| function openModal(imageElement) {
|
| const modal = document.getElementById('image-modal');
|
| const modalImage = document.getElementById('modal-image');
|
|
|
|
|
| modalImage.src = imageElement.src;
|
| modal.style.display = 'flex';
|
|
|
|
|
| document.addEventListener('click', closeModalOnClickOutside);
|
| }
|
|
|
| function closeModal() {
|
| const modal = document.getElementById('image-modal');
|
| modal.style.display = 'none';
|
|
|
|
|
| document.removeEventListener('click', closeModalOnClickOutside);
|
| }
|
|
|
| function closeModalOnClickOutside(event) {
|
| const modal = document.getElementById('image-modal');
|
| const modalContent = document.querySelector('.modal-content');
|
|
|
|
|
| if (!modalContent.contains(event.target)) {
|
| closeModal();
|
| }
|
| }
|
|
|
| function handleEscKey(event) {
|
| if (event.key === 'Escape') {
|
| closeModal();
|
| }
|
| }
|
|
|
|
|
| document.addEventListener('keydown', handleEscKey);
|
|
|
| async function processNextImage(filesProcessed, totalFiles) {
|
| try {
|
| const response = await fetch('/classify_multiple', { method: 'POST' });
|
| const result = await response.json();
|
|
|
| if (result.error) {
|
| throw new Error(result.error);
|
| }
|
|
|
| if (result.filename) {
|
|
|
| const row = document.getElementById(`result-row-${filesProcessed}`);
|
| if (row) {
|
| row.outerHTML = createTableRow(result, filesProcessed);
|
| updateSummary();
|
| }
|
|
|
|
|
| if (filesProcessed + 1 < totalFiles) {
|
| setTimeout(() => {
|
| processNextImage(filesProcessed + 1, totalFiles);
|
| }, 100);
|
| } else {
|
| finishClassification();
|
| }
|
| } else {
|
| finishClassification();
|
| }
|
| } catch (error) {
|
| console.error('Error processing image:', error);
|
| showError(filesProcessed);
|
| finishClassification();
|
| }
|
| }
|
|
|
| function finishClassification() {
|
| isClassifying = false;
|
| const classifyBtn = document.getElementById('classify-btn');
|
| classifyBtn.disabled = false;
|
| classifyBtn.innerHTML = '<i class="fas fa-tags"></i> Classify';
|
| }
|
|
|
| async function highlightClassification() {
|
| if (isClassifying) {
|
| alert('Classification in progress...');
|
| return;
|
| }
|
|
|
| const resultsBody = document.getElementById('results-tbody');
|
| const myDropzone = Dropzone.forElement("#upload-form");
|
|
|
| if (!myDropzone.files.length) {
|
| alert("Please upload some images first!");
|
| return;
|
| }
|
|
|
|
|
| isClassifying = true;
|
| const classifyBtn = document.getElementById('classify-btn');
|
| classifyBtn.disabled = true;
|
| classifyBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Classifying...';
|
|
|
|
|
| resultsBody.innerHTML = '';
|
|
|
|
|
| try {
|
| await fetch('/clear_uploads', { method: 'POST' });
|
|
|
|
|
| for (const file of myDropzone.files) {
|
| const formData = new FormData();
|
| formData.append('file', file);
|
| await fetch('/upload_multiple', {
|
| method: 'POST',
|
| body: formData
|
| });
|
| }
|
|
|
|
|
| myDropzone.files.forEach((file, index) => {
|
| resultsBody.insertAdjacentHTML('beforeend', `
|
| <tr id="result-row-${index}">
|
| <td class="serial">${index + 1}</td>
|
| <td class="image-col">
|
| <div class="filename">${file.name}</div>
|
| <div style="color: var(--text-secondary);">Waiting...</div>
|
| </td>
|
| <td class="result-col">
|
| <i class="fas fa-clock"></i>
|
| </td>
|
| <td class="labels-col">
|
| <i class="fas fa-clock"></i>
|
| </td>
|
| </tr>
|
| `);
|
| });
|
|
|
|
|
| processNextImage(0, myDropzone.files.length);
|
|
|
| } catch (error) {
|
| console.error('Error during classification:', error);
|
| alert('Error during classification. Please try again.');
|
| finishClassification();
|
| }
|
| }
|
|
|
| function showError(index) {
|
| const row = document.getElementById(`result-row-${index}`);
|
| if (row) {
|
| row.innerHTML = `
|
| <td class="serial">${index + 1}</td>
|
| <td colspan="3" style="color: var(--error-color);">
|
| Error processing image. Please try again.
|
| </td>
|
| `;
|
| }
|
| }
|
|
|
| function toggleLabels(labelsDiv) {
|
| labelsDiv.classList.toggle('expanded');
|
| }
|
|
|
| document.getElementById('image-modal').addEventListener('click', function(e) {
|
| if (e.target === this) {
|
| closeModal();
|
| }
|
| });
|
|
|
| document.addEventListener('click', function(e) {
|
| if (e.target.classList.contains('thumbnail')) {
|
| e.preventDefault();
|
| const box = document.getElementById('thumbnail-preview-box');
|
| const img = document.getElementById('thumbnail-preview-img');
|
| img.src = e.target.src;
|
| box.style.display = 'block';
|
| box.style.left = (e.pageX + 10) + 'px';
|
| box.style.top = (e.pageY + 10) + 'px';
|
|
|
| document.addEventListener('keydown', hideOnEscape);
|
| } else if (!e.target.closest('#thumbnail-preview-box')) {
|
| hidePreview();
|
| }
|
| });
|
|
|
| function hideOnEscape(e) {
|
| if (e.key === 'Escape') {
|
| hidePreview();
|
| }
|
| }
|
|
|
| function hidePreview() {
|
| const box = document.getElementById('thumbnail-preview-box');
|
| box.style.display = 'none';
|
| document.removeEventListener('keydown', hideOnEscape);
|
| }
|
|
|
|
|
| function downloadPageAsHTML() {
|
| const now = new Date();
|
| const date = now.toLocaleDateString('en-CA');
|
| const time = now.toLocaleTimeString('en-GB')
|
| .replace(/:/g, '-')
|
| .split('.')[0];
|
|
|
|
|
| const btn = document.getElementById('download-html-btn');
|
| const originalBtnText = btn.innerHTML;
|
| btn.disabled = true;
|
| btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Preparing report...';
|
|
|
| try {
|
|
|
| const summaryContent = document.getElementById('summary').innerHTML;
|
|
|
|
|
| const rows = document.querySelectorAll('#results-tbody tr');
|
| if (!rows.length) {
|
| throw new Error('No data to save');
|
| }
|
|
|
| const tableData = Array.from(rows)
|
| .filter(row => row.querySelector('.result-col span').textContent === 'Fail')
|
| .map(row => ({
|
| serialNo: row.querySelector('.serial').textContent,
|
| image: row.querySelector('.thumbnail').src,
|
| filename: row.querySelector('.filename').textContent,
|
| status: row.querySelector('.result-col span').textContent,
|
| labels: row.querySelector('.labels') ?
|
| Array.from(row.querySelector('.labels').querySelectorAll('.label'))
|
| .map(label => label.textContent) : []
|
| }));
|
|
|
| if (tableData.length === 0) {
|
| alert('No failed images to save!');
|
| return;
|
| }
|
|
|
|
|
| const CHUNK_SIZE = 5;
|
| const chunks = [];
|
| for (let i = 0; i < tableData.length; i += CHUNK_SIZE) {
|
| chunks.push(tableData.slice(i, i + CHUNK_SIZE));
|
| }
|
|
|
|
|
| let currentChunk = 0;
|
| const totalChunks = chunks.length;
|
|
|
| async function sendChunk() {
|
| try {
|
|
|
| btn.innerHTML = `<i class="fas fa-spinner fa-spin"></i> Saving ${currentChunk + 1}/${totalChunks}`;
|
|
|
| const response = await fetch('/save_report_chunk', {
|
| method: 'POST',
|
| headers: {
|
| 'Content-Type': 'application/json'
|
| },
|
| body: JSON.stringify({
|
| chunkNumber: currentChunk,
|
| totalChunks: totalChunks,
|
| date: date,
|
| time: time,
|
| summary: currentChunk === 0 ? summaryContent : '',
|
| chunk: chunks[currentChunk]
|
| })
|
| });
|
|
|
| if (!response.ok) {
|
| const error = await response.json();
|
| throw new Error(error.error || 'Failed to save report');
|
| }
|
|
|
| const result = await response.json();
|
|
|
| if (result.error) {
|
| throw new Error(result.error);
|
| }
|
|
|
| if (currentChunk < totalChunks - 1) {
|
| currentChunk++;
|
| await sendChunk();
|
| } else {
|
| alert(`Report saved successfully in Reports/${date}/Report_${date}_${time}.html`);
|
| btn.innerHTML = originalBtnText;
|
| btn.disabled = false;
|
| }
|
| } catch (error) {
|
| console.error('Error:', error);
|
| alert('Error saving report: ' + error.message);
|
| btn.innerHTML = originalBtnText;
|
| btn.disabled = false;
|
| }
|
| }
|
|
|
|
|
| sendChunk().catch(error => {
|
| console.error('Error in chunk processing:', error);
|
| alert('Error saving report: ' + error.message);
|
| btn.innerHTML = originalBtnText;
|
| btn.disabled = false;
|
| });
|
|
|
| } catch (error) {
|
| console.error('Error:', error);
|
| alert('Error preparing report: ' + error.message);
|
| btn.innerHTML = originalBtnText;
|
| btn.disabled = false;
|
| }
|
| }
|
| </script>
|
| </body>
|
| </html> |
