Update index.html

index.html

@@ -18,30 +18,34 @@
 			</p>
 		</div>
 
-        <div>
-          <label for="hf-token"
-            >Hugging Face Token (optional but limited if absent)</label
-          >
-          <input
-            id="hf-token"
-            v-model="token"
-            placeholder="HF-TOKEN"
-            type="password"
-          />
-        </div>
+        <form id="hf-form">
+            <div>
+                <label for="hf-token">Hugging Face Token (optional but limited if absent)</label>
+                <input
+                    id="hf-token"
+                    placeholder="HF-TOKEN"
+                    type="password"
+                />
+            </div>
+            <input type="submit" value="Translate"/>
+        </form>
       
       <script type="module">
           import { HfInference } from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/+esm';
-          const token = document.getElementById('hf-token').value;
-          console.log(token);
-          const hf = new HfInference(token);
-        
-          // You can also omit "model" to use the recommended model for the task
-          const result = await hf.translation({
-              model: 't5-base',
-              inputs: 'My name is Wolfgang and I live in Amsterdam',
+
+          document.getElementById('hf-form').addEventListener('submit', async (event) => {
+              event.preventDefault();
+              const token = document.getElementById('hf-token').value;
+              console.log(token);
+              const hf = new HfInference(token);
+
+              // You can also omit "model" to use the recommended model for the task
+              const result = await hf.translation({
+                  model: 't5-base',
+                  inputs: 'My name is Wolfgang and I live in Amsterdam',
+              });
+              console.log(result);
           });
-          console.log(result);
       </script>
 	</body>
 </html>