hfjsdemo

Running

App Files Files Community

boazchung commited on Jan 31

Commit

788cea5

•

1 Parent(s): 7105662

Update translation.html

Browse files

Files changed (1) hide show

translation.html +129 -102

translation.html CHANGED Viewed

@@ -1,114 +1,141 @@
 <!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Translation - huggingface.js</title>
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="css/styles.css">
-</head>
-<body>
-    <div class="container-main">
-        <!-- Back to Home button -->
-        <div class="row mt-5">
-            <div class="col-md-12 text-center">
-                <a href="index.html" class="btn btn-outline-secondary"
-                    style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
-            </div>
-        </div>
-        <!-- Content -->
-        <div class="container mt-5">
-            <!-- Centered Titles -->
-            <div class="text-center">
-                <h2>Natural Language Processing</h2>
-                <h4>Translation</h4>
-            </div>
-            <!-- Actual Content of this page -->
-          <form id="hf-form">
-            <input
-                type="text"
-                style="display:none"
-                autocomplete="username"
-                value="user"
-            />
-            <div>
-                <label for="hf-token">Hugging Face Token (optional but limited if absent)</label>
-                <input
-                    id="hf-token"
-                    placeholder="HF-TOKEN"
-                    type="password"
-                    autocomplete="new-password"
-                />
-            </div>
-            <div id="translation-container" class="container mt-4">
-                <h5>Translation w/ Xenova/t5-base:</h5>
-                <div class="d-flex align-items-center">
-                    <label for="translationText2" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text to
-                        Translate:</label>
-                    <input type="text" class="form-control flex-grow-1" id="translationText2" value="My name is Wolfgang and I live in Amsterdam"
-                        placeholder="Enter text" style="margin-right: 15px; margin-left: 15px;">
-                    <button id="translateButton2" class="btn btn-primary">Translate</button>
-                </div>
-                <div class="mt-4">
-                    <h4>Output:</h4>
-                    <pre id="outputArea2"></pre>
-                </div>
-            </div>
-            <!-- Back to Home button -->
-            <div class="row mt-5">
-                <div class="col-md-12 text-center">
-                    <a href="index.html" class="btn btn-outline-secondary"
-                        style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
-                </div>
-            </div>
-        </div>
-    </div>
-</form>
-    <script type="module">
-       import { HfInference } from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/+esm';
-       let hf;
-        // Initialize the sentiment analysis model
-        async function initializeModel() {
-            const token = document.getElementById("hf-token").value;
-            console.log("TOKEN: ", token);
-            hf = new HfInference();
-            //console.log(hf);
-        }
-        async function translateText() {
-        // Ensure that hf is initialized before this function is called
-        if (!hf) {
-            console.error("HfInference is not initialized.");
-            return;
-        }
-        const textFieldValue = document.getElementById("translationText2").value.trim();
-        console.log(textFieldValue)
-        try {
-            const result = await hf.translation({
-                model: 't5-base',
-                inputs: textFieldValue,
             });
-            document.getElementById("outputArea2").innerText = JSON.stringify(result, null, 2);
-        } catch (error) {
-            console.error("Error during translation:", error);
         }
-    }
-        window.addEventListener("DOMContentLoaded", (event) => {
-          initializeModel();
-          document.getElementById("translateButton2").addEventListener("click", translateText);
-        });
-    </script>
-</body>
 </html>

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