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