Update app.js

Updated app.js

app.js

@@ -3,16 +3,27 @@ import { useState } from "react";
 export default function Translator() {
   const [text, setText] = useState("");
   const [translation, setTranslation] = useState("");
+  const [loading, setLoading] = useState(false);
 
   const translateText = async () => {
     if (!text) return;
-    const response = await fetch("http://localhost:8501/translate", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ text }),
-    });
+    setLoading(true);
+
+    const response = await fetch(
+      "https://api-inference.huggingface.co/models/Helsinki-NLP/opus-mt-en-uk",
+      {
+        method: "POST",
+        headers: {
+          "Authorization": `Bearer YOUR_HUGGINGFACE_API_KEY`, // Replace with your API key
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ inputs: text }),
+      }
+    );
+
     const data = await response.json();
-    setTranslation(data.translation);
+    setTranslation(data[0]?.translation_text || "Translation failed.");
+    setLoading(false);
   };
 
   return (
@@ -28,7 +39,7 @@ export default function Translator() {
         onClick={translateText}
         className="mt-4 px-6 py-2 bg-blue-600 text-white rounded-lg shadow-md hover:bg-blue-700"
       >
-        Translate
+        {loading ? "Translating..." : "Translate"}
       </button>
       {translation && (
         <div className="mt-4 p-4 bg-white rounded-lg shadow-md max-w-md">