File size: 2,015 Bytes
6e10499 dfa2874 6e10499 | 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 54 55 56 57 58 59 60 61 | import cn from "../utils/classnames.ts";
export default function Introduction({
className = "",
}: {
className?: string;
}) {
return (
<div className={cn("space-y-4 text-left w-full", className)}>
<div
className="animate-fade-in-up"
style={{ animationDelay: "0.1s", opacity: 0 }}
>
<h3 className="font-semibold text-base mb-1">
About TranslateGemma 4B
</h3>
<p className="text-sm text-secondary-foreground">
TranslateGemma is a family of translation models from Google, built on
top of Gemma 3. This 4B parameter model supports translations across
100+ languages with state-of-the-art quality.{" "}
<a
href="https://blog.google/innovation-and-ai/technology/developers-tools/translategemma/"
target="_blank"
rel="noopener noreferrer"
className="text-primary hover:underline underline-offset-2 transition-all hover:underline-offset-4"
>
Learn more
</a>
</p>
</div>
<div
className="animate-fade-in-up"
style={{ animationDelay: "0.2s", opacity: 0 }}
>
<h3 className="font-semibold text-base mb-1">
Completely private & offline-capable
</h3>
<p className="text-sm text-secondary-foreground">
Everything runs entirely in your browser with 🤗 Transformers.js and
ONNX Runtime Web — no data is ever sent to a server. Once loaded, it
works offline.
</p>
</div>
<div
className="animate-fade-in-up"
style={{ animationDelay: "0.3s", opacity: 0 }}
>
<h3 className="font-semibold text-base mb-1">
Experimental — WebGPU required
</h3>
<p className="text-sm text-secondary-foreground">
This is experimental and requires a browser with WebGPU support and
enough VRAM to run the model.
</p>
</div>
</div>
);
}
|