VenkateshRoshan
Added Webpage
8eeb5a3
<!DOCTYPE html>
<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>