Spaces:
Running
Running
File size: 2,296 Bytes
576d07a | 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 | import { Loader2 } from "lucide-react";
import type { LoadingStatus } from "../hooks/LLMContext";
interface LoadingScreenProps {
status: LoadingStatus;
}
export function LoadingScreen({ status }: LoadingScreenProps) {
const progress =
status.state === "ready"
? 100
: status.state === "loading" && typeof status.progress === "number"
? status.progress
: 0;
const message =
status.state === "loading"
? status.message ?? "Loading model..."
: status.state === "error"
? "Failed to load model"
: "Initializing...";
return (
<div className="absolute inset-0 flex items-center justify-center bg-[#0a0a0a] text-white animate-fade-in">
<div className="w-full max-w-md px-6 flex flex-col items-center">
<div className="mb-10 flex items-center gap-3">
<div className="w-9 h-9 rounded-lg bg-[#1a73e8] flex items-center justify-center">
<svg viewBox="0 0 100 100" className="w-5 h-5">
<polygon
points="50,10 85,35 72,85 28,85 15,35"
fill="rgba(255,255,255,0.95)"
/>
<polygon
points="50,10 62,35 50,85 38,35"
fill="rgba(255,255,255,0.55)"
/>
</svg>
</div>
<span className="text-lg font-medium tracking-tight">Gemma 4</span>
</div>
{status.state !== "error" && (
<Loader2 className="h-8 w-8 animate-spin text-[#1a73e8] mb-4" />
)}
<p
className={`text-sm tracking-wide ${
status.state === "error"
? "text-red-400 font-medium"
: "text-white/70"
}`}
>
{message}
</p>
<div className="mt-6 h-1 w-full rounded-full bg-white/10 overflow-hidden">
<div
className="h-full rounded-full bg-[#1a73e8] transition-[width] duration-300 ease-out"
style={{ width: `${progress}%` }}
/>
</div>
<p className="mt-4 text-xs text-white/40">
Cached after first load · Runs 100% offline
</p>
{status.state === "error" && (
<p className="mt-3 text-sm text-red-400 text-center">{status.error}</p>
)}
</div>
</div>
);
}
|