Create app.js

app.js

@@ -0,0 +1,41 @@
+import { useState } from "react";
+
+export default function Translator() {
+  const [text, setText] = useState("");
+  const [translation, setTranslation] = useState("");
+
+  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 }),
+    });
+    const data = await response.json();
+    setTranslation(data.translation);
+  };
+
+  return (
+    <div className="flex flex-col items-center min-h-screen bg-gray-100 p-6">
+      <h1 className="text-3xl font-bold mb-4">English to Ukrainian Translator</h1>
+      <textarea
+        className="w-full max-w-md p-3 border border-gray-300 rounded-md shadow-md"
+        placeholder="Enter English text..."
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+      />
+      <button
+        onClick={translateText}
+        className="mt-4 px-6 py-2 bg-blue-600 text-white rounded-lg shadow-md hover:bg-blue-700"
+      >
+        Translate
+      </button>
+      {translation && (
+        <div className="mt-4 p-4 bg-white rounded-lg shadow-md max-w-md">
+          <h2 className="text-xl font-semibold">Translation:</h2>
+          <p className="mt-2 text-gray-700">{translation}</p>
+        </div>
+      )}
+    </div>
+  );
+}