Aherobo Ovie Victor
100 lines
3.2 KiB
JavaScript
100 lines
3.2 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
const dropZone = document.getElementById('dropZone');
|
|
const fileInput = document.getElementById('fileInput');
|
|
const detectButton = document.getElementById('detectButton');
|
|
const testButton = document.getElementById('testButton');
|
|
const originalImage = document.getElementById('originalImage');
|
|
const resultImage = document.getElementById('resultImage');
|
|
const loading = document.getElementById('loading');
|
|
|
|
// Handle drag and drop
|
|
dropZone.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
dropZone.style.borderColor = '#2980b9';
|
|
});
|
|
|
|
dropZone.addEventListener('dragleave', (e) => {
|
|
e.preventDefault();
|
|
dropZone.style.borderColor = '#3498db';
|
|
});
|
|
|
|
dropZone.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
dropZone.style.borderColor = '#3498db';
|
|
|
|
const file = e.dataTransfer.files[0];
|
|
if (file && file.type.startsWith('image/')) {
|
|
handleImageSelection(file);
|
|
}
|
|
});
|
|
|
|
// Handle click to upload
|
|
dropZone.addEventListener('click', () => {
|
|
fileInput.click();
|
|
});
|
|
|
|
fileInput.addEventListener('change', (e) => {
|
|
const file = e.target.files[0];
|
|
if (file) {
|
|
handleImageSelection(file);
|
|
}
|
|
});
|
|
|
|
function handleImageSelection(file) {
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
originalImage.src = e.target.result;
|
|
originalImage.style.display = 'block';
|
|
detectButton.disabled = false;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
|
|
// Handle detect button click
|
|
detectButton.addEventListener('click', async () => {
|
|
const formData = new FormData();
|
|
formData.append('image', fileInput.files[0]);
|
|
|
|
try {
|
|
loading.style.display = 'flex';
|
|
const response = await fetch('/detect', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
if (response.ok) {
|
|
const blob = await response.blob();
|
|
resultImage.src = URL.createObjectURL(blob);
|
|
resultImage.style.display = 'block';
|
|
} else {
|
|
alert('Error processing image');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
alert('Error processing image');
|
|
} finally {
|
|
loading.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// Handle test button click
|
|
testButton.addEventListener('click', async () => {
|
|
try {
|
|
loading.style.display = 'flex';
|
|
const response = await fetch('/detect/test');
|
|
|
|
if (response.ok) {
|
|
const blob = await response.blob();
|
|
resultImage.src = URL.createObjectURL(blob);
|
|
resultImage.style.display = 'block';
|
|
} else {
|
|
alert('Error running test detection');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
alert('Error running test detection');
|
|
} finally {
|
|
loading.style.display = 'none';
|
|
}
|
|
});
|
|
}); |