hfjsdemo

Running

App Files Files Community

boazchung commited on Jan 29, 2024

Commit

193a47d

verified ·

1 Parent(s): 82efd6e

Update translation.html

Browse files

Files changed (1) hide show

translation.html +36 -57

translation.html CHANGED Viewed

@@ -3,14 +3,14 @@
 <head>
     <meta charset="UTF-8">
-    <title>Translation - Hugging Face Transformers.js</title>
     <script type="module">
         // Import the library
-        import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';
         // Make it available globally
-        window.pipeline = pipeline;
     </script>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
@@ -20,19 +20,6 @@
 <body>
     <div class="container-main">
-        <!-- Page Header -->
-        <div class="header">
-            <div class="header-logo">
-                <img src="images/logo.png" alt="logo">
-            </div>
-            <div class="header-main-text">
-                <h1>Hugging Face Transformers.js</h1>
-            </div>
-            <div class="header-sub-text">
-                <h3>Free AI Models for JavaScript Web Development</h3>
-            </div>
-        </div>
-        <hr> <!-- Separator -->
         <!-- Back to Home button -->
         <div class="row mt-5">
@@ -51,32 +38,15 @@
             </div>
             <!-- Actual Content of this page -->
-            <div id="translation-container" class="container mt-4">
-                <h5>Multilingual Translation w/ Xenova/nllb-200-distilled-600M:</h5>
-                <div class="d-flex align-items-center">
-                    <label for="translationText" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text to
-                        Translate:</label>
-                    <input type="text" class="form-control flex-grow-1" id="translationText"
-                        value="जीवन एक चॉकलेट बॉक्स की तरह है।" placeholder="Enter text"
-                        style="margin-right: 15px; margin-left: 15px;">
-                    <button id="translateButton" class="btn btn-primary" onclick="translateText()">Translate</button>
-                </div>
-                <div class="mt-4">
-                    <h4>Output:</h4>
-                    <pre id="outputArea"></pre>
-                </div>
-            </div>
-            <hr> <!-- Line Separator -->
             <div id="translation-container" class="container mt-4">
                 <h5>Multilingual Translation w/ Xenova/m2m100_418M:</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="生活就像一盒巧克力。"
                         placeholder="Enter text" style="margin-right: 15px; margin-left: 15px;">
-                    <button id="translateButton2" class="btn btn-primary" onclick="translateText2()">Translate</button>
                 </div>
                 <div class="mt-4">
                     <h4>Output:</h4>
@@ -94,40 +64,49 @@
         </div>
     </div>
-    <script>
         let translator;
         let translator2;
         // Initialize the sentiment analysis model
         async function initializeModel() {
-            translator = await pipeline('translation', 'Xenova/nllb-200-distilled-600M');
-            translator2 = await pipeline('translation', 'Xenova/m2m100_418M');
         }
         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);
-        }
-        async function translateText2() {
-            const textFieldValue = document.getElementById("translationText2").value.trim();
-            let result = await translator2(textFieldValue, {
-                src_lang: 'zh', // Chinese
-                tgt_lang: 'en', // English
-            })
-            document.getElementById("outputArea2").innerText = JSON.stringify(result, null, 2);
-        }
         // Initialize the model after the DOM is completely loaded
         window.addEventListener("DOMContentLoaded", initializeModel);
     </script>

 <head>
     <meta charset="UTF-8">
+    <title>Translation - huggingface.js</title>
     <script type="module">
         // Import the library
+        //import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';
         // Make it available globally
+        //window.pipeline = pipeline;
     </script>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
 <body>
     <div class="container-main">
         <!-- Back to Home button -->
         <div class="row mt-5">
             </div>
             <!-- Actual Content of this page -->
             <div id="translation-container" class="container mt-4">
                 <h5>Multilingual Translation w/ Xenova/m2m100_418M:</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" onclick="translateText()">Translate</button>
                 </div>
                 <div class="mt-4">
                     <h4>Output:</h4>
         </div>
     </div>
+    <script type="module">
+       import { HfInference } from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/+esm';
         let translator;
         let translator2;
         // Initialize the sentiment analysis model
         async function initializeModel() {
+            const token = document.getElementById('hf-token').value;
+            const hf = new HfInference(token);
         }
         async function translateText() {
             const textFieldValue = document.getElementById("translationText").value.trim();
+            let result = await hf.translation({
+                  model: 't5-base',
+                  inputs: textFieldValue,
+              document.getElementById("outputArea2").innerText = JSON.stringify(result, null, 2);
+          });
+        }
+/*
+          document.getElementById('hf-form').addEventListener('submit', async (event) => {
+              event.preventDefault();
+              // You can also omit "model" to use the recommended model for the task
+              let result = await hf.translation({
+                  model: 't5-base',
+                  inputs: textFieldValue,
+              document.getElementById("outputArea2").innerText = JSON.stringify(result, null, 2);
+          });
+          console.log(result);
+          });
+*/
         // Initialize the model after the DOM is completely loaded
         window.addEventListener("DOMContentLoaded", initializeModel);
     </script>