boazchung commited on
Commit
75264b6
1 Parent(s): 0e36dff

Create visialqa.html

Browse files
Files changed (1) hide show
  1. visialqa.html +168 -0
visialqa.html ADDED
@@ -0,0 +1,168 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8"/>
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
+ <script src="https://cdn.tailwindcss.com"></script>
7
+ <!-- polyfill for firefox + import maps -->
8
+ <script src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
9
+ <script type="importmap">
10
+ {
11
+ "imports": {
12
+ "@huggingface/inference": "https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/+esm"
13
+ }
14
+ }
15
+ </script>
16
+ </head>
17
+ <body>
18
+ <form class="w-[90%] mx-auto pt-8" onsubmit="launch(); return false;">
19
+ <h1 class="text-3xl font-bold">
20
+ <span
21
+ class="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500"
22
+ >
23
+ Document & visual question answering demo with
24
+ <a href="https://github.com/huggingface/huggingface.js">
25
+ <kbd>@huggingface/inference</kbd>
26
+ </a>
27
+ </span>
28
+ </h1>
29
+
30
+ <p class="mt-8">
31
+ First, input your token if you have one! Otherwise, you may encounter
32
+ rate limiting. You can create a token for free at
33
+ <a
34
+ target="_blank"
35
+ href="https://huggingface.co/settings/tokens"
36
+ class="underline text-blue-500"
37
+ >hf.co/settings/tokens</a
38
+ >
39
+ </p>
40
+
41
+ <input
42
+ type="text"
43
+ id="token"
44
+ class="rounded border-2 border-blue-500 shadow-md px-3 py-2 w-96 mt-6"
45
+ placeholder="token (optional)"
46
+ />
47
+
48
+ <p class="mt-8">
49
+ Pick the model type and the model you want to run. Check out models for
50
+ <a
51
+ href="https://huggingface.co/tasks/document-question-answering"
52
+ class="underline text-blue-500"
53
+ target="_blank"
54
+ >
55
+ document</a
56
+ > and
57
+ <a
58
+ href="https://huggingface.co/tasks/visual-question-answering"
59
+ class="underline text-blue-500"
60
+ target="_blank"
61
+ >image</a> question answering.
62
+ </p>
63
+
64
+ <div class="space-x-2 flex text-sm mt-8">
65
+ <label>
66
+ <input class="sr-only peer" name="type" type="radio" value="document" onclick="update_model(this.value)" checked />
67
+ <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">
68
+ Document
69
+ </div>
70
+ </label>
71
+ <label>
72
+ <input class="sr-only peer" name="type" type="radio" value="image" onclick="update_model(this.value)" />
73
+ <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">
74
+ Image
75
+ </div>
76
+ </label>
77
+ </div>
78
+
79
+ <input
80
+ id="model"
81
+ class="rounded border-2 border-blue-500 shadow-md px-3 py-2 w-96 mt-6"
82
+ value="impira/layoutlm-document-qa"
83
+ required
84
+ />
85
+
86
+ <p class="mt-8">The input image</p>
87
+
88
+ <input type="file" required accept="image/*"
89
+ class="rounded border-blue-500 shadow-md px-3 py-2 w-96 mt-6 block"
90
+ rows="5"
91
+ id="image"
92
+ />
93
+
94
+ <p class="mt-8">The question</p>
95
+
96
+ <input
97
+ type="text"
98
+ id="question"
99
+ class="rounded border-2 border-blue-500 shadow-md px-3 py-2 w-96 mt-6"
100
+ required
101
+ />
102
+
103
+ <button
104
+ id="submit"
105
+ class="my-8 bg-green-500 rounded py-3 px-5 text-white shadow-md disabled:bg-slate-300"
106
+ >
107
+ Run
108
+ </button>
109
+
110
+ <p class="text-gray-400 text-sm">Output logs</p>
111
+ <div id="logs" class="bg-gray-100 rounded p-3 mb-8 text-sm">
112
+ Output will be here
113
+ </div>
114
+
115
+ <p>Check out the <a class="underline text-blue-500"
116
+ href="https://huggingface.co/spaces/huggingfacejs/doc-vis-qa/blob/main/index.html"
117
+ target="_blank">source code</a></p>
118
+ </form>
119
+
120
+ <script type="module">
121
+ import {HfInference} from "@huggingface/inference";
122
+ const default_models = {
123
+ "document": "impira/layoutlm-document-qa",
124
+ "image": "dandelin/vilt-b32-finetuned-vqa",
125
+ };
126
+ let running = false;
127
+ async function launch() {
128
+ if (running) {
129
+ return;
130
+ }
131
+ running = true;
132
+ try {
133
+ const hf = new HfInference(
134
+ document.getElementById("token").value.trim() || undefined
135
+ );
136
+ const model = document.getElementById("model").value.trim();
137
+ const model_type = document.querySelector("[name=type]:checked").value;
138
+ const image = document.getElementById("image").files[0];
139
+ const question = document.getElementById("question").value.trim();
140
+ document.getElementById("logs").textContent = "";
141
+ const method = model_type === "document" ? hf.documentQuestionAnswering : hf.visualQuestionAnswering;
142
+ const {answer, score} = await method({model, inputs: {
143
+ image, question
144
+ }});
145
+ document.getElementById("logs").textContent = answer + ": " + score;
146
+ } catch (err) {
147
+ alert("Error: " + err.message);
148
+ } finally {
149
+ running = false;
150
+ }
151
+ }
152
+ window.launch = launch;
153
+ window.update_model = (model_type) => {
154
+ const model_input = document.getElementById("model");
155
+ const cur_model = model_input.value.trim();
156
+ let new_model = "";
157
+ if (
158
+ model_type === "document" && cur_model === default_models["image"]
159
+ || model_type === "image" && cur_model === default_models["document"]
160
+ || cur_model === ""
161
+ ) {
162
+ new_model = default_models[model_type];
163
+ }
164
+ model_input.value = new_model;
165
+ };
166
+ </script>
167
+ </body>
168
+ </html>