Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>🤖 Image 🖼️ Captioning</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- ✅ Tailwind CDN --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body class="bg-gray-100 flex items-center justify-center min-h-screen"> | |
| <a href="/" class="absolute top-4 left-4 text-blue-600 hover:text-blue-800 text-sm font-semibold flex items-center"> | |
| <!-- back arrow --> | |
| <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" | |
| xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"></path> | |
| </svg> | |
| Back to Home | |
| </a> | |
| <div class="bg-white p-8 rounded-xl shadow-md w-full max-w-md text-center"> | |
| <h1 class="text-2xl font-bold mb-4 text-gray-800">AI Image Captioning</h1> | |
| <!-- Upload Form --> | |
| <form id="uploadForm" class="space-y-4"> | |
| <input | |
| type="file" | |
| id="fileInput" | |
| accept="image/*" | |
| required | |
| class="block w-full text-sm text-gray-700 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100" | |
| /> | |
| <!-- Live Image Preview --> | |
| <div id="previewContainer" class="mt-4 hidden"> | |
| <img id="previewImage" src="#" alt="Preview" class="mx-auto max-h-64 rounded-md shadow" /> | |
| </div> | |
| <button | |
| id="generateButton" | |
| type="submit" | |
| class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition" | |
| > | |
| Generate Captions | |
| </button> | |
| </form> | |
| <!-- Captions --> | |
| <div id="result" class="mt-6 text-left hidden"> | |
| <h2 class="text-lg font-semibold mb-2 text-gray-700">Captions:</h2> | |
| <p><strong>Factual 🤖:</strong> <span id="greedy" class="text-gray-800"></span></p> | |
| <p><strong>Creative 🤪:</strong> <span id="topk" class="text-gray-800"></span></p> | |
| <p><strong>Human like 🫀:</strong> <span id="topp" class="text-gray-800"></span></p> | |
| </div> | |
| </div> | |
| <script> | |
| const fileInput = document.getElementById('fileInput'); | |
| const previewContainer = document.getElementById('previewContainer'); | |
| const previewImage = document.getElementById('previewImage'); | |
| const form = document.getElementById('uploadForm'); | |
| const result = document.getElementById('result'); | |
| const generateButton = document.getElementById('generateButton'); | |
| // ✅ Live preview + clear old captions | |
| fileInput.addEventListener('change', () => { | |
| const file = fileInput.files[0]; | |
| if (file) { | |
| const reader = new FileReader(); | |
| reader.onload = e => { | |
| previewImage.src = e.target.result; | |
| previewContainer.classList.remove('hidden'); | |
| }; | |
| reader.readAsDataURL(file); | |
| // Clear old captions | |
| document.getElementById('greedy').innerText = ""; | |
| document.getElementById('topk').innerText = ""; | |
| document.getElementById('topp').innerText = ""; | |
| result.classList.add('hidden'); | |
| } else { | |
| previewContainer.classList.add('hidden'); | |
| } | |
| }); | |
| // ✅ Submit form | |
| form.addEventListener('submit', async e => { | |
| e.preventDefault(); | |
| // Disable button while generating | |
| generateButton.disabled = true; | |
| generateButton.innerText = "Generating..."; | |
| const file = fileInput.files[0]; | |
| const formData = new FormData(); | |
| formData.append('file', file); | |
| try { | |
| const res = await fetch('/generate', { | |
| method: 'POST', | |
| body: formData | |
| }); | |
| const data = await res.json(); | |
| document.getElementById('greedy').innerText = data.greedy || "N/A"; | |
| document.getElementById('topk').innerText = data.topk || "N/A"; | |
| document.getElementById('topp').innerText = data.topp || "N/A"; | |
| result.classList.remove('hidden'); | |
| } catch (error) { | |
| alert("⚠️ Error generating captions. Please try again."); | |
| } finally { | |
| // Re-enable button with new text | |
| generateButton.disabled = false; | |
| generateButton.innerText = "Generate Captions (can repeat)"; | |
| } | |
| }); | |
| </script> | |
| <!-- Floating Help Button --> | |
| <button id="helpButton" | |
| class="fixed bottom-4 right-4 bg-blue-600 text-white rounded-full w-12 h-12 text-2xl font-bold shadow-lg hover:bg-blue-700 transition"> | |
| ? | |
| </button> | |
| <!-- Help Modal --> | |
| <div id="helpModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden"> | |
| <div class="bg-white rounded-lg p-6 max-w-sm w-full shadow-lg text-left"> | |
| <h2 class="text-xl font-semibold mb-4">🤖 Image Captioning</h2> | |
| <p class="text-gray-700 mb-4"> | |
| Please upload a picture / image and press "Generate Captions", the model will generate captions for it. | |
| The model uses google/vit-base-patch16-224-in21k or openai/clip-vit-base-patch32 | |
| as image encoder, trained together with a customer transformer decoder to generate captions.<br> | |
| The available caption styles are: "Factual 🤖", "Creative 🤪", and "Human like 🫀", | |
| which are actually argmax (greedy), top-K and top-P respectively. | |
| </p> | |
| <button id="closeModal" | |
| class="mt-2 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"> | |
| Close | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| const helpButton = document.getElementById('helpButton'); | |
| const helpModal = document.getElementById('helpModal'); | |
| const closeModal = document.getElementById('closeModal'); | |
| helpButton.addEventListener('click', () => { | |
| helpModal.classList.remove('hidden'); | |
| }); | |
| closeModal.addEventListener('click', () => { | |
| helpModal.classList.add('hidden'); | |
| }); | |
| // Optional: close modal when clicking outside the modal box | |
| helpModal.addEventListener('click', (e) => { | |
| if (e.target === helpModal) { | |
| helpModal.classList.add('hidden'); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |