Update index.html

index.html

@@ -17,7 +17,7 @@
 				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
 			</p>
 		</div>
-        <br/><br/><br/><br/><br/>
+        <br/><br/><br/>
         <form id="hf-form">
             <!-- Hidden username field for accessibility -->
             <input
@@ -35,6 +35,17 @@
                     autocomplete="new-password"
                 />
             </div>
+
+            <div>
+                <label for="text-to-translate">Text to Translate</label>
+                <input
+                    id="text-to-translate"
+                    placeholder='My name is Wolfgang and I live in Amsterdam'
+                    type="text"
+                    autocomplete="off"
+                />
+            </div>
+          
             <input type="submit" value="Translate"/>
         </form>
       
@@ -44,12 +55,13 @@
           document.getElementById('hf-form').addEventListener('submit', async (event) => {
               event.preventDefault();
               const token = document.getElementById('hf-token').value;
+              const textToTranslate = document.getElementById('text-to-translate').value;
               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',
+                  inputs: textToTranslate,
               });
               console.log(result);
           });