File size: 3,456 Bytes
d8d37b0
788cea5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d8d37b0
788cea5
 
 
 
 
 
 
 
 
 
d8d37b0
788cea5
 
 
 
 
 
d8d37b0
788cea5
3402263
788cea5
 
 
 
 
 
 
 
d8d37b0
788cea5
 
 
 
 
 
 
 
d8d37b0
788cea5
d8d37b0
788cea5
 
 
 
 
8803130
d8d37b0
788cea5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4962d88
ca250ec
788cea5
ca250ec
788cea5
 
4962d88
74746c5
788cea5
 
 
 
 
 
 
 
 
 
d8d37b0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html>
	<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/[email protected]/dist/es-module-shims.js"></script>
		<script type="importmap">
			{
				"imports": {
					"@huggingface/inference": "https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/+esm"
				}
			}
		</script>
	</head>
	<body>
		<form class="w-[90%] mx-auto pt-8" onsubmit="launch(); return false;">
			<h1 class="text-3xl font-bold">
				<span
					class="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500"
				>
					Translation demo with
					<a href="https://github.com/huggingface/huggingface.js">
						<kbd>@huggingface/inference</kbd>
					</a>
				</span>
			</h1>

			<p class="mt-8">
				First, input your token if you have one! Otherwise, you may encounter
				rate limiting. You can create a token for free at
				<a
					target="_blank"
					href="https://huggingface.co/settings/tokens"
					class="underline text-blue-500"
					>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-96 mt-6"
				placeholder="token (optional)"
			/>

			<p class="mt-8">
				Enter the model you want to run. 
				<a
					href="https://huggingface.co/models?pipeline_tag=text2text-generation&sort=likes"
					class="underline text-blue-500"
					target="_blank"
				>
					here</a
				>
			</p>

			<!-- Default model: https://huggingface.co/google/flan-t5-xxl -->
			<input
				type="text"
				id="model"
				class="rounded border-2 border-blue-500 shadow-md px-3 py-2 w-96 mt-6"
				value="t5-base"
				required
			/>

			<p class="mt-8">Finally the prompt</p>

			<textarea
				class="rounded border-blue-500 shadow-md px-3 py-2 w-96 mt-6 block"
				rows="5"
				id="prompt"
			>My name is Wolfgang and I live in Amsterdam
			</textarea>

			<button
				id="submit"
				class="my-8 bg-green-500 rounded py-3 px-5 text-white shadow-md disabled:bg-slate-300"
			>
				Run
			</button>

			<p class="text-gray-400 text-sm">Translation</p>
			<div id="logs" class="bg-gray-100 rounded p-3 mb-8 text-sm">
				Output will be here
			</div>

			<p>Check out the <a class="underline text-blue-500" href="https://huggingface.co/spaces/huggingfacejs/streaming-text-generation/blob/main/index.html" target="_blank">source code</a></p>
		</form>

		<script type="module">
			import { HfInference } from "@huggingface/inference";
			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 prompt = document.getElementById("prompt").value.trim();
					document.getElementById("logs").textContent = "";
					
                    let result = await hf.translation({
						model,
						inputs: prompt
					}, {
						use_cache: false
					}); 
                        document.getElementById("logs").innerText = JSON.stringify(result["translation_text"], null, 2);
				} catch (err) {
					alert("Error: " + err.message);
				} finally {
					running = false;
				}
			}
			window.launch = launch;

		</script>
	</body>
</html>