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