File size: 2,878 Bytes
5ba40ca 4c62db4 5ba40ca 4c62db4 5ba40ca 4c62db4 5ba40ca 4c62db4 82ca2ac 4c62db4 5ba40ca 4c62db4 5ba40ca 4c62db4 | 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 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | import { useEffect, useState } from "react";
import cn from "../utils/classnames.ts";
import { ExternalLink } from "lucide-react";
const ALL_TITLES = [
"Why TranslateGemma?",
"为什么选择 TranslateGemma？",
"Pourquoi TranslateGemma ?",
"Warum TranslateGemma?",
"¿Por qué TranslateGemma?",
"TranslateGemma はなぜ？",
"왜 TranslateGemma인가요?",
"لماذا TranslateGemma؟",
"Почему TranslateGemma?",
"TranslateGemma কেন?",
];
function shuffle<T>(arr: T[]): T[] {
const a = [...arr];
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
export default function Waiting({ className = "" }: { className?: string }) {
const [titles, setTitles] = useState(ALL_TITLES);
const [titleIndex, setTitleIndex] = useState(0);
const [visible, setVisible] = useState(true);
useEffect(() => {
const [first, ...rest] = ALL_TITLES;
setTitles([first, ...shuffle(rest)]);
}, []);
useEffect(() => {
const interval = setInterval(() => {
setVisible(false);
setTimeout(() => {
setTitleIndex((i) => (i + 1) % titles.length);
setVisible(true);
}, 400);
}, 1700);
return () => clearInterval(interval);
}, [titles]);
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 transition-opacity duration-400"
style={{ opacity: visible ? 1 : 0 }}
>
{titles[titleIndex]}
</h3>
<p className="text-sm text-secondary-foreground">
TranslateGemma is built on Gemma 3 from Google, and outperforms
classic translation models thanks to its strong understanding of
language semantics and context, not just statistical mappings between
word pairs. This improves quality on nuanced and low-resource
translation without needing massive amounts of parallel training data
for every language pair.
</p>
</div>
<div
className="animate-fade-in-up"
style={{ animationDelay: "0.2s", opacity: 0 }}
>
<p className="text-sm text-secondary-foreground">
While you're waiting,{" "}
<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 gap-1 inline-flex items-center transition-all hover:underline-offset-4"
>
learn more about TranslateGemma <ExternalLink size={14} />
</a>
.
</p>
</div>
</div>
);
}
|