Spaces:
Runtime error
Runtime error
| <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> | |