Hugging Face's logo

Spaces:
seonoh12
/
hfjsdemo
Running

App Files Community
boazchung commited on
Commit
9bad34e
•
1 Parent(s): 0cd8dcd

Create image2text.html

Browse files
Files changed (1) hide show
  1. image2text.html +117 -0
image2text.html ADDED
@@ -0,0 +1,117 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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/es-module-shims@1.7.0/dist/es-module-shims.js"></script>
9
+ <script type="importmap">
10
+ {
11
+ "imports": {
12
+ "@huggingface/inference": "https://cdn.jsdelivr.net/npm/@huggingface/inference@1.8.0/+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
+ Image to text 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 you want to run. Check out over 100 models for image to text
50
+ <a
51
+ href="https://huggingface.co/tasks/image-to-text"
52
+ class="underline text-blue-500"
53
+ target="_blank"
54
+ >
55
+ here</a
56
+ >. The default model is for image captioning, but you can do text extraction, ...
57
+ </p>
58
+
59
+ <!-- Default model: https://huggingface.co/nlpconnect/vit-gpt2-image-captioning -->
60
+ <input
61
+ type="text"
62
+ id="model"
63
+ class="rounded border-2 border-blue-500 shadow-md px-3 py-2 w-96 mt-6"
64
+ value="nlpconnect/vit-gpt2-image-captioning"
65
+ required
66
+ />
67
+
68
+ <p class="mt-8">Finally the input image</p>
69
+
70
+ <input type="file" required accept="image/*"
71
+ class="rounded border-blue-500 shadow-md px-3 py-2 w-96 mt-6 block"
72
+ rows="5"
73
+ id="prompt"
74
+ />
75
+
76
+ <button
77
+ id="submit"
78
+ class="my-8 bg-green-500 rounded py-3 px-5 text-white shadow-md disabled:bg-slate-300"
79
+ >
80
+ Run
81
+ </button>
82
+
83
+ <p class="text-gray-400 text-sm">Output logs</p>
84
+ <div id="logs" class="bg-gray-100 rounded p-3 mb-8 text-sm">
85
+ Output will be here
86
+ </div>
87
+
88
+ <p>Check out the <a class="underline text-blue-500" href="https://huggingface.co/spaces/huggingfacejs/image-to-text/blob/main/index.html" target="_blank">source code</a></p>
89
+ </form>
90
+
91
+ <script type="module">
92
+ import { HfInference } from "@huggingface/inference";
93
+ let running = false;
94
+ async function launch() {
95
+ if (running) {
96
+ return;
97
+ }
98
+ running = true;
99
+ try {
100
+ const hf = new HfInference(
101
+ document.getElementById("token").value.trim() || undefined
102
+ );
103
+ const model = document.getElementById("model").value.trim();
104
+ const prompt = document.getElementById("prompt").files[0];
105
+ document.getElementById("logs").textContent = "";
106
+ const {generated_text} = await hf.imageToText({model, data: prompt});
107
+ document.getElementById("logs").textContent = generated_text;
108
+ } catch (err) {
109
+ alert("Error: " + err.message);
110
+ } finally {
111
+ running = false;
112
+ }
113
+ }
114
+ window.launch = launch;
115
+ </script>
116
+ </body>
117
+ </html>