Spaces:
Sleeping
Sleeping
File size: 2,325 Bytes
903b170 0b83e8c 903b170 0b83e8c 903b170 0b83e8c 903b170 0b83e8c 903b170 | 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 | document.addEventListener('DOMContentLoaded', () => {
const dropZone = document.getElementById('drop-zone');
const fileInput = document.getElementById('file-input');
const uploadForm = document.getElementById('upload-form');
const previewImage = document.getElementById('preview-image');
const outputImage = document.getElementById('output-image');
const loadingIndicator = document.getElementById('loading-indicator');
const updatePreview = (file) => {
const reader = new FileReader();
reader.onload = (e) => {
previewImage.src = e.target.result;
previewImage.style.display = 'block';
};
reader.readAsDataURL(file);
};
dropZone.addEventListener('dragover', (event) => {
event.preventDefault();
dropZone.classList.add('bg-blue-50');
});
dropZone.addEventListener('dragleave', (event) => {
dropZone.classList.remove('bg-blue-50');
});
dropZone.addEventListener('drop', (event) => {
event.preventDefault();
dropZone.classList.remove('bg-blue-50');
const files = event.dataTransfer.files;
if (files.length > 0) {
fileInput.files = files;
updatePreview(files[0]);
}
});
fileInput.addEventListener('change', (event) => {
const files = event.target.files;
if (files.length > 0) {
updatePreview(files[0]);
}
});
uploadForm.addEventListener('submit', async (event) => {
event.preventDefault();
const formData = new FormData();
formData.append('file', fileInput.files[0]);
outputImage.classList.add('hidden'); // Hide output image
loadingIndicator.classList.remove('hidden'); // Show loading indicator
const response = await fetch('/predict/', {
method: 'POST',
body: formData
});
loadingIndicator.classList.add('hidden'); // Hide loading indicator
if (response.ok) {
const imageBlob = await response.blob();
const imageUrl = URL.createObjectURL(imageBlob);
outputImage.src = imageUrl;
outputImage.classList.remove('hidden'); // Show output image
} else {
alert('Failed to upload image.');
}
});
});
|