Spaces:
Running
Running
File size: 6,781 Bytes
7ac2545 |
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 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 |
import { useEffect, useRef } from "react";
interface Dot {
x: number;
y: number;
vx: number;
vy: number;
radius: number;
opacity: number;
}
export const LoadingScreen = ({
isLoading,
progress,
error,
onLoad,
}: {
isLoading: boolean;
progress: number;
error: string | null;
onLoad: () => void;
}) => {
const canvasRef = useRef<HTMLCanvasElement>(null);
useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) return;
const ctx = canvas.getContext("2d");
if (!ctx) return;
let animationFrameId: number;
let dots: Dot[] = [];
const setup = () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
dots = [];
const numDots = Math.floor((canvas.width * canvas.height) / 22000);
for (let i = 0; i < numDots; ++i) {
dots.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
vx: (Math.random() - 0.5) * 0.3,
vy: (Math.random() - 0.5) * 0.3,
radius: Math.random() * 1.5 + 0.5,
opacity: Math.random() * 0.4 + 0.15,
});
}
};
const draw = () => {
if (!ctx) return;
ctx.clearRect(0, 0, canvas.width, canvas.height);
dots.forEach((dot) => {
dot.x += dot.vx;
dot.y += dot.vy;
if (dot.x <= 0 || dot.x >= canvas.width) dot.vx *= -1;
if (dot.y <= 0 || dot.y >= canvas.height) dot.vy *= -1;
ctx.beginPath();
ctx.arc(dot.x, dot.y, dot.radius, 0, Math.PI * 2);
ctx.fillStyle = `rgba(74, 222, 128, ${dot.opacity})`;
ctx.fill();
});
const maxDist = 120;
ctx.lineWidth = 0.5;
for (let i = 0; i < dots.length; i++) {
for (let j = i + 1; j < dots.length; j++) {
const dx = dots[i].x - dots[j].x;
const dy = dots[i].y - dots[j].y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < maxDist) {
const opacity = 1 - distance / maxDist;
ctx.strokeStyle = `rgba(74, 222, 128, ${opacity * 0.2})`;
ctx.beginPath();
ctx.moveTo(dots[i].x, dots[i].y);
ctx.lineTo(dots[j].x, dots[j].y);
ctx.stroke();
}
}
}
animationFrameId = requestAnimationFrame(draw);
};
const handleResize = () => {
cancelAnimationFrame(animationFrameId);
setup();
draw();
};
setup();
draw();
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
cancelAnimationFrame(animationFrameId);
};
}, []);
return (
<div className="relative flex flex-col items-center justify-center h-screen bg-gradient-to-br from-[#0a0f1a] via-[#0d1520] to-[#060a12] text-gray-100 p-8 overflow-hidden">
<canvas
ref={canvasRef}
className="absolute top-0 left-0 w-full h-full z-0"
/>
<div className="absolute top-0 left-0 w-full h-full z-10 bg-[radial-gradient(ellipse_at_center,_rgba(10,15,26,0)_30%,_rgba(6,10,18,0.9)_95%)]" />
<div className="relative z-20 max-w-2xl w-full flex flex-col items-center bg-white/5 border border-white/10 backdrop-blur-xl rounded-3xl p-10 shadow-[0_35px_65px_rgba(0,0,0,0.5)] space-y-8">
<div className="flex flex-col items-center gap-3">
<div className="text-6xl">💻</div>
<h1 className="text-4xl md:text-5xl font-bold text-white tracking-tight">
Maincoder <span className="text-emerald-400">1B</span>
</h1>
<p className="text-lg text-emerald-300/80">
In-browser code generation, powered by WebGPU
</p>
</div>
<div className="w-full text-left text-gray-300 space-y-3 text-base">
<p>
Run{" "}
<a
href="https://huggingface.co/Maincode/Maincoder-1B-ONNX"
target="_blank"
rel="noopener noreferrer"
className="text-emerald-400 hover:underline font-medium"
>
Maincoder-1B
</a>{" "}
entirely in your browser using{" "}
<a
href="https://huggingface.co/docs/transformers.js"
target="_blank"
rel="noopener noreferrer"
className="text-emerald-400 hover:underline font-medium"
>
Transformers.js
</a>{" "}
and WebGPU. No server, no data leaves your device.
</p>
<p className="text-sm text-gray-400">
A 1B-parameter code generation model achieving 76.2% on HumanEval
(~600MB download, int4 quantized). Requires a WebGPU-capable browser
(Chrome 113+).
</p>
</div>
<div className="w-full max-w-md">
<button
onClick={isLoading ? undefined : onLoad}
disabled={isLoading}
className={`w-full flex items-center justify-center font-semibold transition-all text-lg rounded-2xl border ${
isLoading
? "bg-white/5 text-gray-400 cursor-not-allowed border-white/10"
: "bg-emerald-600 hover:bg-emerald-500 text-white border-emerald-500/50 shadow-[0_15px_35px_rgba(16,185,129,0.25)]"
}`}
>
<div className="px-6 py-3.5">
{isLoading ? (
<div className="flex items-center">
<span className="inline-block w-5 h-5 border-2 border-emerald-400/80 border-t-transparent rounded-full animate-spin" />
<span className="ml-3 text-md font-medium text-emerald-300">
Downloading model... ({progress}%)
</span>
</div>
) : (
"Load Maincoder-1B"
)}
</div>
</button>
{isLoading && (
<div className="mt-4 w-full bg-white/10 rounded-full h-2 overflow-hidden">
<div
className="h-full bg-gradient-to-r from-emerald-500 to-emerald-400 rounded-full transition-all duration-300"
style={{ width: `${progress}%` }}
/>
</div>
)}
</div>
{error && (
<div className="bg-red-900/30 border border-red-500/40 rounded-2xl p-4 w-full text-center">
<p className="text-sm text-red-300">Error: {error}</p>
<button
onClick={onLoad}
className="mt-3 text-sm px-4 py-2 rounded-full bg-white/15 hover:bg-white/25 border border-white/20 text-white font-semibold transition-all"
>
Retry
</button>
</div>
)}
</div>
</div>
);
};
|