File size: 4,040 Bytes
d8d37b0 788cea5 d8d37b0 788cea5 d8d37b0 788cea5 d8d37b0 788cea5 d8d37b0 788cea5 d8d37b0 788cea5 d8d37b0 788cea5 8803130 d8d37b0 788cea5 74e6aa1 242a562 788cea5 74e6aa1 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 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 |
<!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/es-module-shims@1.7.0/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"@huggingface/inference": "https://cdn.jsdelivr.net/npm/@huggingface/inference@1.7.1/+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">
Pick the model you want to run. Check out over 10k models for text to
text generation
<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 = "";
for await (const result of hf.tanslation({
model,
inputs: prompt,
parameters: { max_new_tokens: 250 }
}, {
use_cache: false
})) {
//document.getElementById("logs").textContent += output.token.text;
document.getElementById("logs").innerText = JSON.stringify(result, null, 2);
}
} catch (err) {
alert("Error: " + err.message);
} finally {
running = false;
}
}
window.launch = launch;
/*
async function translateText() {
const textFieldValue = document.getElementById("translationText").value.trim();
let result = await translator(textFieldValue, {
src_lang: 'hin_Deva', // Hindi
tgt_lang: 'fra_Latn', // French
});
document.getElementById("outputArea").innerText = JSON.stringify(result, null, 2);
}
*/
</script>
</body>
</html> |