|
|
<!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> |
