Spaces:
Sleeping
Sleeping
File size: 2,277 Bytes
1dc2504 | 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 | import {
LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ReferenceLine, ResponsiveContainer,
} from "recharts";
export default function FrameChart({ scores }) {
if (!scores || scores.length === 0) return null;
const data = scores.map((score, i) => ({ seq: i + 1, score: Math.round(score * 100) }));
return (
<div className="w-full bg-white rounded-3xl border border-slate-100 p-10 shadow-sm">
<p className="text-sm text-slate-400 mb-8 text-center">Sequence scores(How fake does each short clip look)</p>
<ResponsiveContainer width="100%" height={220}>
<LineChart data={data} margin={{ top: 8, right: 16, left: 0, bottom: 8 }}>
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" vertical={false} />
<XAxis
dataKey="seq"
tick={{ fill: "#94a3b8", fontSize: 12 }}
axisLine={false}
tickLine={false}
/>
<YAxis
domain={[0, 100]}
tickFormatter={(v) => `${v}%`}
tick={{ fill: "#94a3b8", fontSize: 12 }}
axisLine={false}
tickLine={false}
width={40}
/>
<Tooltip
formatter={(v) => [`${v}%`, "Fake"]}
contentStyle={{
background: "#fff",
border: "1px solid #e2e8f0",
borderRadius: 12,
boxShadow: "0 4px 12px rgba(0,0,0,0.06)",
fontSize: 13,
}}
labelFormatter={(l) => `#${l}`}
/>
<ReferenceLine y={50} stroke="#fca5a5" strokeDasharray="4 4" />
<Line
type="monotone"
dataKey="score"
stroke="#6366f1"
strokeWidth={2.5}
dot={(props) => {
const { cx, cy, payload } = props;
return (
<circle
key={payload.seq}
cx={cx}
cy={cy}
r={5}
fill={payload.score >= 50 ? "#ef4444" : "#6366f1"}
stroke="#fff"
strokeWidth={2}
/>
);
}}
activeDot={{ r: 7, strokeWidth: 0 }}
/>
</LineChart>
</ResponsiveContainer>
</div>
);
}
|