File size: 1,702 Bytes
9c69fdb fdc81e6 9c69fdb fdc81e6 9c69fdb fdc81e6 9c69fdb fdc81e6 9c69fdb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
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;
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[0]?.translation_text || "Translation failed.");
setLoading(false);
};
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"
>
{loading ? "Translating..." : "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>
);
}
|