File size: 2,324 Bytes
844cbc5 2e11f0f 844cbc5 2e11f0f 63419ab 2e11f0f a65c154 d5122cb c994fc3 844cbc5 c994fc3 2e11f0f 844cbc5 c994fc3 2e11f0f c994fc3 2e11f0f c994fc3 4371ebd c994fc3 58fd8ff c994fc3 2e11f0f c994fc3 2e11f0f 844cbc5 c994fc3 844cbc5 d5122cb |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Captioning</title>
</head>
<body>
<h1>Image Captioning</h1>
<form id="uploadForm" action="/predict/" method="post" enctype="multipart/form-data">
<label for="image">Upload Image:</label><br>
<input type="file" id="image" name="image" accept="image/*"><br>
<label for="context">Question:</label><br>
<input type="text" id="context" name="context"><br>
<button type="submit" id="submitBtn">Submit</button>
</form>
<div id="result" style="display: none;">
<h2>Result:</h2>
<p id="caption"></p>
</div>
<div id="loading" style="display: none;">
<p>Loading...</p>
</div>
<script>
document.getElementById('uploadForm').addEventListener('submit', async function(event) {
event.preventDefault();
showLoadingIndicator();
let formData = new FormData(this);
try {
let response = await fetch('/get_caption', {
method: 'POST',
body: formData
});
if (response.ok) {
let result = await response.json();
document.getElementById('caption').innerText = result.caption;
document.getElementById('result').style.display = 'block';
hideLoadingIndicator();
} else {
alert('An error occurred while processing the request.');
hideLoadingIndicator();
}
} catch (error) {
console.error('An error occurred:', error);
alert('An error occurred while processing the request.');
hideLoadingIndicator();
}
});
function showLoadingIndicator() {
document.getElementById('loading').style.display = 'block';
document.getElementById('submitBtn').disabled = true;
}
function hideLoadingIndicator() {
document.getElementById('loading').style.display = 'none';
document.getElementById('submitBtn').disabled = false;
}
</script>
</body>
</html>
|