Spaces:
Runtime error
Runtime error
File size: 4,563 Bytes
79c7b05 |
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 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Describer</title>
<style>
body {
font-family: 'Courier New', monospace;
background-color: #000;
color: #00ff00;
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
color: #00ff00;
}
#imageContainer {
width: 500px;
height: 500px;
border: 1px solid #00ff00;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
#uploadedImage {
max-width: 100%;
max-height: 100%;
}
#descriptionContainer {
width: 500px;
min-height: 100px;
border: 1px solid #00ff00;
padding: 10px;
margin-bottom: 20px;
}
#uploadForm {
margin-bottom: 20px;
}
input[type="file"] {
display: none;
}
label, button {
background-color: #003300;
color: #00ff00;
border: 1px solid #00ff00;
padding: 5px 10px;
cursor: pointer;
}
label:hover, button:hover {
background-color: #004400;
}
a {
color: #00ff00;
text-decoration: none;
margin-bottom: 20px;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Image Describer</h1>
<a href="/">Back to Chat</a>
<div id="imageContainer">
<img id="uploadedImage" src="" alt="Uploaded image will appear here">
</div>
<form id="uploadForm" enctype="multipart/form-data">
<label for="imageFile">Choose Image</label>
<input type="file" id="imageFile" name="file" accept="image/*" required>
<button type="submit">Describe Image</button>
</form>
<div id="descriptionContainer">
Description will appear here...
</div>
<script>
const uploadForm = document.getElementById('uploadForm');
const imageFile = document.getElementById('imageFile');
const uploadedImage = document.getElementById('uploadedImage');
const descriptionContainer = document.getElementById('descriptionContainer');
uploadForm.addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(uploadForm);
try {
const response = await fetch('/describe_image', {
method: 'POST',
body: formData
});
if (!response.ok) {
throw new Error('Network response was not ok');
}
const reader = response.body.getReader();
descriptionContainer.textContent = '';
let buffer = '';
while (true) {
const { value, done } = await reader.read();
if (done) break;
buffer += new TextDecoder().decode(value);
const lines = buffer.split('\n');
buffer = lines.pop() || '';
for (const line of lines) {
if (line.startsWith('data:')) {
const content = line.slice(5);
if (content) {
appendToDescription(content);
}
}
}
}
} catch (error) {
console.error('Error:', error);
descriptionContainer.textContent = 'Error describing image';
}
});
function appendToDescription(content) {
descriptionContainer.textContent += content + '';
descriptionContainer.scrollTop = descriptionContainer.scrollHeight;
}
imageFile.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
uploadedImage.src = e.target.result;
};
reader.readAsDataURL(file);
}
});
</script>
</body>
</html>
|