<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://cdn.tailwindcss.com"></script>
<!-- polyfill for firefox + import maps -->
<script src="https://unpkg.com/es-module-shims@1.7.0/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"@huggingface/inference": "https://cdn.jsdelivr.net/npm/@huggingface/inference@2.1.1/+esm"
}
}
</script>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
<form class="w-[90%] max-w-md mx-auto bg-white p-8 rounded-lg shadow-md" onsubmit="launch(); return false;">
<h1 class="text-3xl font-bold mb-8 text-center text-gradient from-pink-500 to-violet-500">
Document & visual question answering demo with
<a href="https://github.com/huggingface/huggingface.js" class="text-blue-500">
<kbd>@huggingface/inference</kbd>
</a>
</h1>
<p class="text-center text-gray-500 mb-8">
First, input your token if you have one! Otherwise, you may encounter rate limiting.
You can create a token for free at
<a href="https://huggingface.co/settings/tokens" class="underline text-blue-500" target="_blank">
hf.co/settings/tokens
</a>
</p>
<input
type="text"
id="token"
class="rounded border-2 border-blue-500 shadow-md px-3 py-2 w-full mb-6"
placeholder="Token (optional)"
/>
<p class="text-center text-gray-500 mb-8">
Pick the model type and the model you want to run. Check out models for
<a href="https://huggingface.co/tasks/document-question-answering" class="underline text-blue-500" target="_blank">
document
</a> and
<a href="https://huggingface.co/tasks/visual-question-answering" class="underline text-blue-500" target="_blank">
image
</a> question answering.
</p>
<div class="space-x-2 flex text-sm mb-8 justify-center">
<label class="flex items-center">
<input class="sr-only peer" name="type" type="radio" value="document" onclick="update_model(this.value)" checked />
<div class="px-3 py-3 rounded-lg shadow-md flex items-center justify-center text-slate-700 bg-gradient-to-r peer-checked:font-semibold peer-checked:from-pink-500 peer-checked:to-violet-500 peer-checked:text-white">
Document
</div>
</label>
<label class="flex items-center">
<input class="sr-only peer" name="type" type="radio" value="image" onclick="update_model(this.value)" />
<div class="px-3 py-3 rounded-lg shadow-md flex items-center justify-center text-slate-700 bg-gradient-to-r peer-checked:font-semibold peer-checked:from-pink-500 peer-checked:to-violet-500 peer-checked:text-white">
Image
</div>
</label>
</div>
<input
id="model"
class="rounded border-2 border-blue-500 shadow-md px-3 py-2 w-full mb-6"
value="impira/layoutlm-document-qa"
required
/>
<p class="text-center text-gray-500 mb-8">The input image</p>
<input type="file" required accept="image/*" class="rounded border-blue-500 shadow-md px-3 py-2 w-full mb-6 block" id="image" />
<p class="text-center text-gray-500 mb-8">The question</p>
<input
type="text"
id="question"
class="rounded border-2 border-blue-500 shadow-md px-3 py-2 w-full mb-6"
required
/>
<button
id="submit"
class="my-8 bg-green-500 rounded py-3 px-5 text-white shadow-md disabled:bg-slate-300 w-full"
>
Run
</button>
<p class="text-gray-400 text-sm text-center">Output logs</p>
<div id="logs" class="bg-gray-100 rounded p-3 mb-8 text-sm">
Output will be here
</div>
<p class="text-center text-blue-500 text-sm">
Check out the
<a href="https://huggingface.co/spaces/huggingfacejs/doc-vis-qa/blob/main/index.html" class="underline" target="_blank">
source code
</a>
</p>
</form>
<script type="module">
import {HfInference} from "@huggingface/inference";
const default_models = {
"document": "impira/layoutlm-document-qa",
"image": "dandelin/vilt-b32-finetuned-vqa",
};
let running = false;
async function launch() {
if (running) {
return;
}
running = true;
try {
const hf = new HfInference(
document.getElementById("token").value.trim() || undefined
);
const model = document.getElementById("model").value.trim();
const model_type = document.querySelector("[name=type]:checked").value;
const image = document.getElementById("image").files[0];
const question = document.getElementById("question").value.trim();
document.getElementById("logs").textContent = "";
const method = model_type === "document" ? hf.documentQuestionAnswering : hf.visualQuestionAnswering;
const {answer, score} = await method({model, inputs: {
image, question
}});
document.getElementById("logs").textContent = answer + ": " + score;
} catch (err) {
alert("Error: " + err.message);
} finally {
running = false;
}
}
window.launch = launch;
window.update_model = (model_type) => {
const model_input = document.getElementById("model");
const cur_model = model_input.value.trim();
let new_model = "";
if (
model_type === "document" && cur_model === default_models["image"]
|| model_type === "image" && cur_model === default_models["document"]
|| cur_model === ""
) {
new_model = default_models[model_type];
}
model_input.value = new_model;
};
</script>
</body>
</html>