<!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"> 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>