| <!DOCTYPE html>
|
| <html lang="en" class="dark">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Single Classification</title>
|
| <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
| <style>
|
| html.dark {
|
| --bg-color: #1a202c;
|
| --text-color: #e2e8f0;
|
| --card-bg-color: #2d3748;
|
| --card-border-color: #4a5568;
|
| --btn-bg-color: #4a5568;
|
| --btn-hover-bg-color: #2c5282;
|
| --btn-text-color: #e2e8f0;
|
| }
|
|
|
| html.light {
|
| --bg-color: #f7fafc;
|
| --text-color: #2d3748;
|
| --card-bg-color: #ffffff;
|
| --card-border-color: #e2e8f0;
|
| --btn-bg-color: #3182ce;
|
| --btn-hover-bg-color: #2c5282;
|
| --btn-text-color: #ffffff;
|
| }
|
|
|
| body {
|
| background-color: var(--bg-color);
|
| color: var(--text-color);
|
| }
|
|
|
| .card {
|
| background-color: var(--card-bg-color);
|
| border: 1px solid var(--card-border-color);
|
| }
|
|
|
| .btn {
|
| background-color: var(--btn-bg-color);
|
| color: var(--btn-text-color);
|
| }
|
|
|
| .btn:hover {
|
| background-color: var(--btn-hover-bg-color);
|
| }
|
|
|
| .loading {
|
| display: none;
|
| position: fixed;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| height: 100%;
|
| background: rgba(0, 0, 0, 0.5);
|
| z-index: 1000;
|
| }
|
|
|
| .result-table {
|
| font-family: monospace;
|
| white-space: pre;
|
| }
|
|
|
| .classification-text {
|
| font-size: 1.5rem;
|
| font-weight: bold;
|
| }
|
|
|
| .btn-classify {
|
| background-color: #10b981;
|
| color: white;
|
| font-size: 1.1rem;
|
| padding: 0.75rem 1.5rem;
|
| border-radius: 9999px;
|
| }
|
|
|
| .btn-classify:hover {
|
| background-color: #059669;
|
| }
|
|
|
| .btn-remove {
|
| background-color: #ef4444;
|
| color: white;
|
| font-size: 1.1rem;
|
| padding: 0.75rem 1.5rem;
|
| border-radius: 9999px;
|
| }
|
|
|
| .btn-remove:hover {
|
| background-color: #dc2626;
|
| }
|
|
|
| .results-container {
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| text-align: center;
|
| }
|
|
|
| .classification-result {
|
| margin: 1.5rem 0;
|
| text-align: center;
|
| }
|
|
|
| .table-container {
|
| width: 100%;
|
| display: flex;
|
| justify-content: center;
|
| text-align: left;
|
| }
|
|
|
|
|
| .loading-overlay {
|
| background: rgba(0, 0, 0, 0.7);
|
| color: white;
|
| }
|
|
|
| .loading-text {
|
| color: white;
|
| font-size: 1.2rem;
|
| font-weight: 500;
|
| }
|
| </style>
|
| </head>
|
| <body class="min-h-screen">
|
| <div class="container mx-auto px-4 py-8">
|
| <div class="flex justify-end mb-4">
|
| <button id="themeToggle" class="bg-gray-800 text-white px-4 py-2 rounded hover:bg-gray-600">
|
| ☀️
|
| </button>
|
| </div>
|
| <h1 class="text-3xl font-bold text-center mb-8">Single Image Classification</h1>
|
|
|
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
|
| <div class="card p-6 rounded-lg shadow-md">
|
| <div id="uploadSection" class="mb-4">
|
| <label class="block text-sm font-bold mb-2">Upload Image</label>
|
| <input type="file" id="imageInput" accept=".jpg,.jpeg,.png" class="hidden">
|
| <button onclick="document.getElementById('imageInput').click()" class="btn w-full py-2 px-4 rounded">
|
| Select Image
|
| </button>
|
| </div>
|
|
|
| <div id="imagePreview" class="mt-4 hidden">
|
| <img id="preview" class="max-w-full h-auto rounded-lg">
|
| <div class="mt-4 flex space-x-4">
|
| <button onclick="removeImage()" class="btn btn-remove flex-1">
|
| Remove
|
| </button>
|
| <button onclick="classifyImage()" class="btn btn-classify flex-1">
|
| Classify
|
| </button>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="card p-6 rounded-lg shadow-md">
|
| <h2 class="text-xl font-bold mb-4 text-center">Classification Results</h2>
|
| <div id="results" class="results-container"></div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="loading" class="loading flex items-center justify-center">
|
| <div class="loading-overlay p-8 rounded-lg text-center">
|
| <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-white mx-auto"></div>
|
| <p id="loadingText" class="mt-4 loading-text">Processing...</p>
|
| </div>
|
| </div>
|
|
|
| <script>
|
|
|
| const themeToggle = document.getElementById('themeToggle');
|
| const htmlElement = document.documentElement;
|
|
|
|
|
| if (!localStorage.getItem('theme')) {
|
| localStorage.setItem('theme', 'dark');
|
| }
|
|
|
|
|
| const currentTheme = localStorage.getItem('theme') || 'dark';
|
| htmlElement.classList.remove('light', 'dark');
|
| htmlElement.classList.add(currentTheme);
|
| themeToggle.textContent = currentTheme === 'dark' ? '☀️' : '🌙';
|
|
|
|
|
| themeToggle.addEventListener('click', () => {
|
| const isDark = htmlElement.classList.contains('dark');
|
| htmlElement.classList.remove('dark', 'light');
|
| const newTheme = isDark ? 'light' : 'dark';
|
| htmlElement.classList.add(newTheme);
|
| localStorage.setItem('theme', newTheme);
|
| themeToggle.textContent = newTheme === 'dark' ? '☀️' : '🌙';
|
| });
|
|
|
|
|
| let currentFile = null;
|
|
|
| document.getElementById('imageInput').addEventListener('change', function(e) {
|
| const file = e.target.files[0];
|
| if (file) {
|
| uploadFile(file);
|
| }
|
| });
|
|
|
| function uploadFile(file) {
|
| const formData = new FormData();
|
| formData.append('file', file);
|
|
|
| showLoading('Uploading...');
|
|
|
| fetch('/upload_single', {
|
| method: 'POST',
|
| body: formData
|
| })
|
| .then(response => response.json())
|
| .then(data => {
|
| if (data.filename) {
|
| currentFile = data.filename;
|
| document.getElementById('preview').src = `/static/uploads/single/${data.filename}`;
|
| document.getElementById('imagePreview').classList.remove('hidden');
|
| document.getElementById('uploadSection').classList.add('hidden');
|
| } else {
|
| alert(data.error || 'Upload failed');
|
| }
|
| })
|
| .catch(error => {
|
| console.error('Error:', error);
|
| alert('Upload failed');
|
| })
|
| .finally(() => {
|
| hideLoading();
|
| });
|
| }
|
|
|
| function removeImage() {
|
| document.getElementById('imageInput').value = '';
|
| document.getElementById('imagePreview').classList.add('hidden');
|
| document.getElementById('uploadSection').classList.remove('hidden');
|
| document.getElementById('results').innerHTML = '';
|
| currentFile = null;
|
| }
|
|
|
| function classifyImage() {
|
| if (!currentFile) {
|
| alert('Please upload an image first');
|
| return;
|
| }
|
|
|
| showLoading('Classifying...');
|
|
|
| fetch('/classify_single', {
|
| method: 'POST',
|
| headers: {
|
| 'Content-Type': 'application/json',
|
| },
|
| body: JSON.stringify({ filename: currentFile })
|
| })
|
| .then(response => response.json())
|
| .then(data => {
|
| if (data.error) {
|
| throw new Error(data.error);
|
| }
|
| const resultsDiv = document.getElementById('results');
|
| resultsDiv.innerHTML = `
|
| <div class="classification-result">
|
| <span class="font-bold">Classification: </span>
|
| <span class="classification-text ${data.classification === 'Pass' ? 'text-green-600' : 'text-red-600'}">
|
| ${data.classification}
|
| </span>
|
| </div>
|
| <div class="table-container">
|
| <pre class="whitespace-pre-wrap font-mono text-sm">${data.result_table}</pre>
|
| </div>
|
| `;
|
| })
|
| .catch(error => {
|
| console.error('Error:', error);
|
| alert('Classification failed: ' + error.message);
|
| })
|
| .finally(() => {
|
| hideLoading();
|
| });
|
| }
|
|
|
| function showLoading(text) {
|
| document.getElementById('loading').style.display = 'flex';
|
| document.getElementById('loadingText').textContent = text;
|
| }
|
|
|
| function hideLoading() {
|
| document.getElementById('loading').style.display = 'none';
|
| }
|
| </script>
|
| </body>
|
| </html> |
