Spaces:
Sleeping
Sleeping
File size: 4,878 Bytes
ebf0780 631be60 ebf0780 98cebf7 ebf0780 98cebf7 ebf0780 631be60 98cebf7 631be60 98cebf7 ebf0780 631be60 98cebf7 ebf0780 631be60 ebf0780 631be60 ebf0780 631be60 98cebf7 631be60 98cebf7 631be60 ebf0780 631be60 98cebf7 ebf0780 631be60 ebf0780 631be60 98cebf7 631be60 98cebf7 631be60 98cebf7 631be60 ebf0780 631be60 98cebf7 631be60 98cebf7 631be60 ebf0780 631be60 98cebf7 631be60 98cebf7 631be60 98cebf7 ebf0780 631be60 98cebf7 ebf0780 631be60 ebf0780 98cebf7 631be60 98cebf7 56b1c5f 98cebf7 631be60 ebf0780 631be60 98cebf7 631be60 ebf0780 631be60 98cebf7 631be60 ebf0780 98cebf7 631be60 98cebf7 ebf0780 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 | <!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Image Classifier</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
#drop-area {
border: 2px dashed #6c757d;
border-radius: 10px;
padding: 30px;
text-align: center;
color: #adb5bd;
background-color: #343a40;
cursor: pointer;
}
#drop-area.hover {
border-color: #0d6efd;
color: #fff;
}
#preview-container img {
max-width: 100px;
max-height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="container py-5">
<h2 class="text-center mb-4 text-info">Upload Images for Classification</h2>
<form id="uploadForm">
<div id="drop-area" class="mb-3">
<p>Drag & Drop Images Here or Click to Select</p>
<input type="file" id="imageInput" class="form-control d-none" accept="image/*" multiple>
</div>
<button type="submit" class="btn btn-primary">Predict</button>
</form>
<div id="preview-container" class="d-flex flex-wrap justify-content-start mt-4"></div>
<div id="results-container" class="mt-4"></div>
<h5 class="text-warning mt-5">Upload History</h5>
<canvas id="uploadChart" height="100"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const form = document.getElementById('uploadForm');
const imageInput = document.getElementById('imageInput');
const dropArea = document.getElementById('drop-area');
const previewContainer = document.getElementById('preview-container');
const resultsContainer = document.getElementById('results-container');
const chartData = [];
dropArea.addEventListener('click', () => imageInput.click());
dropArea.addEventListener('dragover', (e) => {
e.preventDefault();
dropArea.classList.add('hover');
});
dropArea.addEventListener('dragleave', () => dropArea.classList.remove('hover'));
dropArea.addEventListener('drop', (e) => {
e.preventDefault();
dropArea.classList.remove('hover');
imageInput.files = e.dataTransfer.files;
displayPreviews(imageInput.files);
});
imageInput.addEventListener('change', () => displayPreviews(imageInput.files));
function displayPreviews(files) {
previewContainer.innerHTML = '';
for (const file of files) {
const reader = new FileReader();
reader.onload = () => {
const img = document.createElement('img');
img.src = reader.result;
img.classList.add('img-thumbnail');
previewContainer.appendChild(img);
};
reader.readAsDataURL(file);
}
}
form.addEventListener('submit', async (e) => {
e.preventDefault();
const files = imageInput.files;
if (!files.length) return;
resultsContainer.innerHTML = '';
for (const file of files) {
const formData = new FormData();
formData.append('file', file);
const resDiv = document.createElement('div');
resDiv.className = 'alert alert-info mt-2';
resDiv.textContent = `Predicting ${file.name}...`;
resultsContainer.appendChild(resDiv);
try {
const response = await fetch(`${window.location.origin}/predict`, {
method: 'POST',
body: formData
});
const data = await response.json();
resDiv.classList.replace('alert-info', 'alert-success');
resDiv.textContent = `${file.name}: ${data.prediction}`;
chartData.push({ name: file.name, label: data.prediction });
updateChart();
} catch (err) {
resDiv.classList.replace('alert-info', 'alert-danger');
resDiv.textContent = `${file.name}: Error occurred`;
}
}
});
const ctx = document.getElementById('uploadChart').getContext('2d');
const uploadChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [],
datasets: [{
label: 'Predicted Labels',
data: [],
backgroundColor: 'rgba(13, 110, 253, 0.6)'
}]
},
options: {
scales: {
y: { beginAtZero: true, ticks: { stepSize: 1, precision: 0 } }
}
}
});
function updateChart() {
const labelCounts = {};
chartData.forEach(item => labelCounts[item.label] = (labelCounts[item.label] || 0) + 1);
uploadChart.data.labels = Object.keys(labelCounts);
uploadChart.data.datasets[0].data = Object.values(labelCounts);
uploadChart.update();
}
</script>
</body>
</html>
|