Spaces:
Sleeping
Sleeping
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Image Inference</title> | |
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"> | |
<style> | |
/* Drag and drop area styles */ | |
#drop-area { | |
border: 2px dashed #ccc; | |
border-radius: 20px; | |
width: 300px; | |
height: 300px; | |
margin: 20px auto; | |
text-align: center; | |
padding: 20px; | |
transition: border 0.3s; | |
position: relative; | |
} | |
#drop-area.highlight { | |
border-color: #666; | |
} | |
#drop-area p { | |
margin: 0; | |
font-weight: bold; | |
} | |
#drop-area img { | |
max-width: 100%; | |
max-height: 100%; | |
display: none; | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
margin: auto; | |
} | |
#caption-box { | |
margin-top: 20px; | |
width: 300px; | |
height: 100px; | |
resize: none; | |
} | |
#caption-container { | |
text-align: center; | |
} | |
#upload-container { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
flex-direction: column; | |
margin-top: 20px; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>Image Inference App</h1> | |
<div id="upload-container"> | |
<div id="drop-area"> | |
<p>Drag & drop your image here or click to select</p> | |
<input type="file" name="image" accept="image/*" required style="display:none;"> | |
<img id="uploaded-image" src="" alt="Uploaded Image"> <!-- Image will appear here --> | |
</div> | |
</div> | |
<div id="caption-container"> | |
<h2>Generated Caption:</h2> | |
<textarea id="caption-box" readonly></textarea> <!-- This will display the caption --> | |
</div> | |
<script> | |
const dropArea = document.getElementById('drop-area'); | |
const input = dropArea.querySelector('input[type="file"]'); | |
const uploadedImage = document.getElementById('uploaded-image'); | |
const captionBox = document.getElementById('caption-box'); | |
// Prevent default drag behaviors | |
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { | |
dropArea.addEventListener(eventName, preventDefaults, false); | |
document.body.addEventListener(eventName, preventDefaults, false); | |
}); | |
// Highlight the drop area when an item is dragged over it | |
;['dragenter', 'dragover'].forEach(eventName => { | |
dropArea.classList.add('highlight'); | |
}); | |
;['dragleave', 'drop'].forEach(eventName => { | |
dropArea.classList.remove('highlight'); | |
}); | |
// Handle dropped files | |
dropArea.addEventListener('drop', handleDrop, false); | |
dropArea.addEventListener('click', () => input.click()); | |
function preventDefaults(e) { | |
e.preventDefault(); | |
e.stopPropagation(); | |
} | |
// Handle file input change | |
input.addEventListener('change', () => { | |
handleFiles(input.files); | |
}); | |
function handleDrop(e) { | |
const dt = e.dataTransfer; | |
const files = dt.files; | |
handleFiles(files); | |
} | |
function handleFiles(files) { | |
if (files.length > 0) { | |
// Clear previous outputs | |
captionBox.value = ''; | |
uploadedImage.style.display = 'none'; | |
const formData = new FormData(); | |
formData.append('image', files[0]); | |
// Show the uploaded image in the container | |
uploadedImage.src = URL.createObjectURL(files[0]); | |
uploadedImage.style.display = 'block'; // Make the image visible | |
// Perform AJAX request to upload image without refreshing the page | |
fetch("/upload-image", { | |
method: "POST", | |
body: formData, | |
}) | |
.then(response => response.json()) | |
.then(result => { | |
captionBox.value = result.generated_caption || result.error; // Display caption in the text area | |
}) | |
.catch(error => { | |
console.error('Error:', error); | |
}); | |
} | |
} | |
</script> | |
</body> | |
</html> | |