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> | |