| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Upload PDF for Sprite Extraction</title> |
| <style> |
| body { font-family: Arial; padding: 20px; background: #f5f5f5; } |
| .sprite { margin: 20px; padding: 10px; background: white; border: 1px solid #ccc; display: inline-block; width: 250px; } |
| .sprite img { width: 100%; } |
| #status { margin-top: 15px; font-weight: bold; } |
| </style> |
| </head> |
| <body> |
| <h2>Upload PDF for Image Extraction and Captioning</h2> |
| <form id="pdfForm" enctype="multipart/form-data"> |
| <input type="file" id="pdfFile" name="pdf_file" accept="application/pdf"> |
| <button type="submit">Upload & Process</button> |
| </form> |
|
|
| <div id="status"></div> |
| <div id="result-container"></div> |
|
|
| <script> |
| const form = document.getElementById('pdfForm'); |
| const statusEl = document.getElementById('status'); |
| const resultEl = document.getElementById('result-container'); |
| |
| form.addEventListener('submit', async (e) => { |
| e.preventDefault(); |
| const fileInput = document.getElementById('pdfFile'); |
| if (!fileInput.files[0]) { |
| alert('Please select a PDF file.'); |
| return; |
| } |
| |
| statusEl.textContent = 'Uploading and processing...'; |
| resultEl.innerHTML = ''; |
| |
| const formData = new FormData(); |
| formData.append('pdf_file', fileInput.files[0]); |
| |
| try { |
| const res = await fetch('/process_pdf', { |
| method: 'POST', |
| body: formData |
| }); |
| |
| const data = await res.json(); |
| if (!res.ok) throw new Error(data.error || 'Upload failed'); |
| |
| statusEl.textContent = data.message; |
| |
| const sprites = data.sprites; |
| for (const [key, sprite] of Object.entries(sprites)) { |
| const div = document.createElement('div'); |
| div.className = 'sprite'; |
| |
| const img = document.createElement('img'); |
| img.src = `data:image/png;base64,${sprite.base64}`; |
| |
| const name = document.createElement('h4'); |
| name.textContent = sprite.name; |
| |
| const desc = document.createElement('p'); |
| desc.textContent = sprite.description; |
| |
| div.appendChild(img); |
| div.appendChild(name); |
| div.appendChild(desc); |
| resultEl.appendChild(div); |
| } |
| |
| } catch (err) { |
| statusEl.textContent = `❌ Error: ${err.message}`; |
| } |
| }); |
| </script> |
| </body> |
| </html> |
