File size: 3,605 Bytes
d8d37b0
788cea5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d8d37b0
788cea5
 
 
 
 
 
 
 
 
 
d8d37b0
788cea5
 
 
 
 
 
d8d37b0
788cea5
3402263
788cea5
 
 
 
 
 
 
 
d8d37b0
788cea5
 
 
 
 
2be31d1
788cea5
 
d8d37b0
788cea5
d8d37b0
788cea5
 
 
 
2be31d1
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="KETI-AIR-Downstream/long-ke-t5-base-translation-aihub-bidirection"
				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"
			>translate_ko2en: IBM ์™“์ŠจX๋Š” AI ๋ฐ ๋ฐ์ดํ„ฐ ํ”Œ๋žซํผ์ด๋‹ค. ํŒŒ์šด๋ฐ์ด์…˜ ๋ชจ๋ธ์— ๋Œ€ํ•œ ๊ธฐ์ˆ ๊ณผ ์„œ๋น„์Šค๋ฅผ ์ œ๊ณตํ•œ๋‹ค
			</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>