Hugging Face's logo

Spaces:
huggingfacejs
/
doc-vis-qa
Running

App Files Community
2

Changed the Ui With Tailwind css

#2
by hardik90 - opened
base: refs/heads/main
←
from: refs/pr/2
Discussion Files changed
+80
-94
Files changed (1) hide show
  1. index.html +80 -94
index.html CHANGED
@@ -1,5 +1,5 @@
1
  <!DOCTYPE html>
2
- <html>
3
  <head>
4
  <meta charset="UTF-8"/>
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
@@ -7,115 +7,101 @@
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";
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
  <head>
4
  <meta charset="UTF-8"/>
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 
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 class="bg-gray-100 min-h-screen flex items-center justify-center">
18
+ <form class="w-[90%] max-w-md mx-auto bg-white p-8 rounded-lg shadow-md" onsubmit="launch(); return false;">
19
+ <h1 class="text-3xl font-bold mb-8 text-center text-gradient from-pink-500 to-violet-500">
20
+ Document & visual question answering demo with
21
+ <a href="https://github.com/huggingface/huggingface.js" class="text-blue-500">
22
+ <kbd>@huggingface/inference</kbd>
23
+ </a>
24
+ </h1>
25
+
26
+ <p class="text-center text-gray-500 mb-8">
27
+ First, input your token if you have one! Otherwise, you may encounter rate limiting.
28
+ You can create a token for free at
29
+ <a href="https://huggingface.co/settings/tokens" class="underline text-blue-500" target="_blank">
30
+ hf.co/settings/tokens
31
+ </a>
32
+ </p>
33
+
34
+ <input
 
 
 
 
 
 
 
35
  type="text"
36
  id="token"
37
+ class="rounded border-2 border-blue-500 shadow-md px-3 py-2 w-full mb-6"
38
+ placeholder="Token (optional)"
39
+ />
40
+
41
+ <p class="text-center text-gray-500 mb-8">
42
+ Pick the model type and the model you want to run. Check out models for
43
+ <a href="https://huggingface.co/tasks/document-question-answering" class="underline text-blue-500" target="_blank">
44
+ document
45
+ </a> and
46
+ <a href="https://huggingface.co/tasks/visual-question-answering" class="underline text-blue-500" target="_blank">
47
+ image
48
+ </a> question answering.
49
+ </p>
50
+
51
+ <div class="space-x-2 flex text-sm mb-8 justify-center">
52
+ <label class="flex items-center">
53
+ <input class="sr-only peer" name="type" type="radio" value="document" onclick="update_model(this.value)" checked />
54
+ <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">
55
+ Document
56
+ </div>
57
+ </label>
58
+ <label class="flex items-center">
59
+ <input class="sr-only peer" name="type" type="radio" value="image" onclick="update_model(this.value)" />
60
+ <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">
61
+ Image
62
+ </div>
63
+ </label>
64
+ </div>
65
+
66
+ <input
 
 
 
 
 
 
67
  id="model"
68
+ class="rounded border-2 border-blue-500 shadow-md px-3 py-2 w-full mb-6"
69
  value="impira/layoutlm-document-qa"
70
  required
71
+ />
72
 
73
+ <p class="text-center text-gray-500 mb-8">The input image</p>
74
 
75
+ <input type="file" required accept="image/*" class="rounded border-blue-500 shadow-md px-3 py-2 w-full mb-6 block" id="image" />
 
 
 
 
76
 
77
+ <p class="text-center text-gray-500 mb-8">The question</p>
78
 
79
+ <input
80
  type="text"
81
  id="question"
82
+ class="rounded border-2 border-blue-500 shadow-md px-3 py-2 w-full mb-6"
83
  required
84
+ />
85
 
86
+ <button
87
  id="submit"
88
+ class="my-8 bg-green-500 rounded py-3 px-5 text-white shadow-md disabled:bg-slate-300 w-full"
89
+ >
90
+ Run
91
+ </button>
92
+
93
+ <p class="text-gray-400 text-sm text-center">Output logs</p>
94
+ <div id="logs" class="bg-gray-100 rounded p-3 mb-8 text-sm">
95
+ Output will be here
96
+ </div>
97
+
98
+ <p class="text-center text-blue-500 text-sm">
99
+ Check out the
100
+ <a href="https://huggingface.co/spaces/huggingfacejs/doc-vis-qa/blob/main/index.html" class="underline" target="_blank">
101
+ source code
102
+ </a>
103
+ </p>
104
+ </form>
105
 
106
  <script type="module">
107
  import {HfInference} from "@huggingface/inference";