|
|
<!doctype html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="utf-8" /> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" /> |
|
|
<title>WebGPU · Transformers.js · Image Captioning</title> |
|
|
<style> |
|
|
body { font: 16px/1.45 system-ui, sans-serif; margin: 24px auto; max-width: 900px; padding: 0 16px; } |
|
|
.card { border:1px solid #4443; border-radius:12px; padding:16px; } |
|
|
.log { white-space:pre-wrap; background:#111; color:#0f0; padding:12px; border-radius:8px; min-height:80px; } |
|
|
img { max-width:100%; border-radius:8px; margin-top:10px; } |
|
|
.muted { opacity:.75; font-size:14px; } |
|
|
button,input { font:inherit; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<h2>Image → Text in your browser (Transformers.js + WebGPU)</h2> |
|
|
<p id="env">Probing environment…</p> |
|
|
|
|
|
<div class="card"> |
|
|
<h3>Caption an image (file upload)</h3> |
|
|
<input id="file" type="file" accept="image/*" /> |
|
|
<button id="run" disabled>Caption</button> |
|
|
<div><img id="preview" alt="preview will appear here" /></div> |
|
|
<h4>Output</h4> |
|
|
<div id="log" class="log">Loading model…</div> |
|
|
<p class="muted"> |
|
|
Model: <code>Xenova/vit-gpt2-image-captioning</code><br /> |
|
|
Backend: <span id="backend">…</span> |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<script type="module"> |
|
|
const envEl = document.getElementById('env'); |
|
|
const fileEl = document.getElementById('file'); |
|
|
const runBtn = document.getElementById('run'); |
|
|
const logEl = document.getElementById('log'); |
|
|
const imgEl = document.getElementById('preview'); |
|
|
const backendEl = document.getElementById('backend'); |
|
|
|
|
|
|
|
|
const hasWebGPU = 'gpu' in navigator; |
|
|
let device = hasWebGPU ? 'webgpu' : 'wasm'; |
|
|
backendEl.textContent = device.toUpperCase(); |
|
|
envEl.textContent = hasWebGPU ? '✅ WebGPU detected (will fallback if slow)…' : '⚠️ Using WASM (CPU).'; |
|
|
|
|
|
|
|
|
const { pipeline } = await import('https://cdn.jsdelivr.net/npm/@huggingface/transformers@3'); |
|
|
|
|
|
|
|
|
const LOAD_TIMEOUT_MS = 25000; |
|
|
let captioner; |
|
|
|
|
|
async function buildPipeline(targetDevice) { |
|
|
logEl.textContent = `Loading model… device=${targetDevice}`; |
|
|
backendEl.textContent = targetDevice.toUpperCase(); |
|
|
return await pipeline('image-to-text', 'Xenova/vit-gpt2-image-captioning', { device: targetDevice }); |
|
|
} |
|
|
|
|
|
try { |
|
|
if (device === 'webgpu') { |
|
|
const webgpuPromise = buildPipeline('webgpu'); |
|
|
const timeout = new Promise((_, rej) => setTimeout(() => rej(new Error('webgpu-timeout')), LOAD_TIMEOUT_MS)); |
|
|
captioner = await Promise.race([webgpuPromise, timeout]); |
|
|
} else { |
|
|
captioner = await buildPipeline('wasm'); |
|
|
} |
|
|
} catch (e) { |
|
|
if (hasWebGPU && (e.message === 'webgpu-timeout' || String(e).toLowerCase().includes('webgpu'))) { |
|
|
envEl.textContent = '⚠️ WebGPU load slow/failed → falling back to WASM.'; |
|
|
device = 'wasm'; |
|
|
captioner = await buildPipeline('wasm'); |
|
|
} else { |
|
|
logEl.textContent = 'Error loading model: ' + e; |
|
|
throw e; |
|
|
} |
|
|
} |
|
|
|
|
|
logEl.textContent = `Model ready · device=${device}`; |
|
|
runBtn.disabled = false; |
|
|
|
|
|
|
|
|
let imgDataURL = null; |
|
|
|
|
|
fileEl.addEventListener('change', () => { |
|
|
logEl.textContent = 'Image selected. Preparing preview…'; |
|
|
const f = fileEl.files?.[0]; |
|
|
if (!f) { logEl.textContent = 'No file chosen.'; return; } |
|
|
|
|
|
|
|
|
if (!f.type.startsWith('image/')) { |
|
|
logEl.textContent = `Unsupported file type: ${f.type || 'unknown'}. Use JPG/PNG.`; |
|
|
return; |
|
|
} |
|
|
|
|
|
const reader = new FileReader(); |
|
|
reader.onerror = () => { |
|
|
logEl.textContent = 'Failed to read file. Try another image.'; |
|
|
}; |
|
|
reader.onload = async () => { |
|
|
imgDataURL = reader.result; |
|
|
imgEl.src = imgDataURL; |
|
|
try { |
|
|
|
|
|
if (imgEl.decode) await imgEl.decode(); |
|
|
logEl.textContent = 'Preview ready. Click “Caption”.'; |
|
|
} catch { |
|
|
logEl.textContent = 'Could not decode image. Try a JPG/PNG under ~5 MB.'; |
|
|
} |
|
|
}; |
|
|
reader.readAsDataURL(f); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
runBtn.addEventListener('click', async () => { |
|
|
if (!captioner) return; |
|
|
if (!imgDataURL) { logEl.textContent = 'Pick an image first.'; return; } |
|
|
logEl.textContent = 'Running…'; |
|
|
try { |
|
|
const out = await captioner(imgDataURL, { |
|
|
max_new_tokens: 48, |
|
|
num_beams: 5, |
|
|
do_sample: false, |
|
|
no_repeat_ngram_size: 3 |
|
|
}); |
|
|
logEl.textContent = out[0].generated_text; |
|
|
} catch (e) { |
|
|
logEl.textContent = 'Inference error: ' + e; |
|
|
console.error(e); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
