File size: 1,684 Bytes
0842d68 6e10499 82a3cd7 4c62db4 0842d68 82a3cd7 0842d68 82a3cd7 6e10499 4c62db4 6e10499 4c62db4 0842d68 82a3cd7 0842d68 6e10499 0842d68 b2425fb 0842d68 6e10499 0842d68 | 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 { Button } from "./theme";
import cn from "./utils/classnames.ts";
import { formatBytes } from "./utils/format.ts";
import Translator from "./ai/Translator.ts";
import Card from "./theme/misc/Card.tsx";
import Introduction from "./components/Introduction.tsx";
import ModelLoader from "./components/ModelLoader.tsx";
import { flushSync } from "react-dom";
import Waiting from "./components/Waiting.tsx";
interface InitializeProps {
progress: number;
onInitialize: () => Promise<void>;
isInitializing?: boolean;
className?: string;
}
export default function Initialize({
progress,
onInitialize,
isInitializing = false,
className = "",
}: InitializeProps) {
const handleInitialize = async () => {
if (document.startViewTransition) {
document.startViewTransition(() => {
flushSync(() => {
onInitialize();
});
});
} else {
await onInitialize();
}
};
return (
<div className={cn("max-w-2xl w-full mx-auto px-8", className)}>
<Card className="flex flex-col items-center gap-6">
{isInitializing ? (
<div className="w-full space-y-8">
<Waiting />
<ModelLoader className="w-full" progress={progress} />
</div>
) : (
<div className="w-full space-y-8">
<Introduction />
<Button
variant="primary"
onClick={handleInitialize}
disabled={isInitializing}
className="text-lg! w-full"
>
Download TranslateGemma 4B ({formatBytes(Translator.size)})
</Button>
</div>
)}
</Card>
</div>
);
}
|