Skip to content

Commit a1e362a

Browse files
committed
tamen
1 parent 4b101c7 commit a1e362a

40 files changed

Lines changed: 5246 additions & 1 deletion
46.7 MB
Binary file not shown.
Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
"use client";
2+
3+
import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts";
4+
5+
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
6+
import { ChartContainer, ChartTooltip } from "../ui/chart";
7+
8+
const chartData = [
9+
{ phase: "Herbal Transfer", vision: 0, ours: 60 },
10+
{ phase: "Cable Mounting", vision: 0, ours: 30 },
11+
{ phase: "Binder Clip Removal", vision: 30, ours: 60 },
12+
];
13+
14+
const chartConfig = {
15+
vision: { label: "Ours (Vision-Only)", color: "#B8C9F0" },
16+
ours: { label: "Ours (+ Pretrain + DAgger)", color: "#3D56C8" },
17+
};
18+
19+
const robustnessWholeTaskData = [
20+
{
21+
task: "Herbal Transfer",
22+
visionFull: 0,
23+
visionPost: 10,
24+
oursFull: 0,
25+
oursPost: 70,
26+
},
27+
{
28+
task: "Cable Mounting",
29+
visionFull: 0,
30+
visionPost: 0,
31+
oursFull: 30,
32+
oursPost: 40,
33+
},
34+
];
35+
36+
const robustnessConfig = {
37+
visionFull: { label: "Vision-Only (Full Dist.)", color: "#DDE8FF" },
38+
visionPost: { label: "Vision-Only (Post-Grasp Dist.)", color: "#8FB2FF" },
39+
oursFull: { label: "Ours (+ Pretrain + DAgger) Full Dist.", color: "#4F7BFF" },
40+
oursPost: { label: "Ours (+ Pretrain + DAgger) Post-Grasp Dist.", color: "#1E3FAF" },
41+
};
42+
43+
export function GeneralizationUnseenChart() {
44+
return (
45+
<Card className="border border-white/20 bg-black/60 text-white">
46+
<CardHeader className="pb-2 md:pb-3">
47+
<CardTitle className="text-sm md:text-base">
48+
Generalization to unseen objects
49+
</CardTitle>
50+
<p className="text-[11px] md:text-xs text-white/70">
51+
Visuo-tactile learning with tactile pretraining and DAgger significantly
52+
improves performance on unseen objects.
53+
</p>
54+
</CardHeader>
55+
<CardContent className="p-2 md:p-3">
56+
<ChartContainer config={chartConfig} className="!aspect-auto h-[210px] md:h-[235px]">
57+
<BarChart
58+
data={chartData}
59+
margin={{ top: 12, bottom: 6, left: 4, right: 4 }}
60+
barCategoryGap="18%"
61+
barGap={2}
62+
>
63+
<CartesianGrid vertical={false} />
64+
<XAxis
65+
dataKey="phase"
66+
tickLine={false}
67+
axisLine={false}
68+
tickMargin={8}
69+
angle={0}
70+
textAnchor="middle"
71+
interval={0}
72+
height={28}
73+
/>
74+
<YAxis domain={[0, 100]} tickLine={false} axisLine={false} />
75+
<ChartTooltip
76+
cursor={false}
77+
shared={false}
78+
content={({ active, payload, label }) => {
79+
if (!active || !payload?.length) return null;
80+
const entry = payload[payload.length - 1];
81+
const key = String(entry.dataKey) as keyof typeof chartConfig;
82+
const fullLabel = chartConfig[key]?.label || key;
83+
return (
84+
<div className="rounded-md border border-white/20 bg-black/95 px-3 py-2 text-xs text-white shadow-md">
85+
<div className="font-semibold mb-1">{label}</div>
86+
<div className="flex items-center justify-between gap-3">
87+
<span className="text-white/80">{fullLabel}</span>
88+
<span className="font-semibold">{entry.value}%</span>
89+
</div>
90+
</div>
91+
);
92+
}}
93+
/>
94+
<Bar dataKey="vision" fill="#B8C9F0" radius={6} minPointSize={4} maxBarSize={34}>
95+
<LabelList
96+
dataKey="vision"
97+
position="top"
98+
className="fill-foreground"
99+
fontSize={9}
100+
formatter={(value: number) => `${value}%`}
101+
/>
102+
</Bar>
103+
<Bar dataKey="ours" fill="#3D56C8" radius={6} minPointSize={4} maxBarSize={34}>
104+
<LabelList
105+
dataKey="ours"
106+
position="top"
107+
className="fill-foreground"
108+
fontSize={9}
109+
formatter={(value: number) => `${value}%`}
110+
/>
111+
</Bar>
112+
</BarChart>
113+
</ChartContainer>
114+
</CardContent>
115+
<CardFooter className="pt-0 pb-3 md:pb-4 text-[11px] md:text-xs text-white/70 flex gap-4">
116+
<span className="inline-flex items-center gap-2">
117+
<span className="inline-block h-2.5 w-2.5 rounded-sm bg-[#B8C9F0]" />
118+
Ours (Vision-Only)
119+
</span>
120+
<span className="inline-flex items-center gap-2">
121+
<span className="inline-block h-2.5 w-2.5 rounded-sm bg-[#3D56C8]" />
122+
Ours (+ Pretrain + DAgger)
123+
</span>
124+
</CardFooter>
125+
</Card>
126+
);
127+
}
128+
129+
export function RobustnessDisturbanceChart() {
130+
return (
131+
<Card className="border border-white/20 bg-black/60 text-white">
132+
<CardHeader className="pb-2 md:pb-3">
133+
<CardTitle className="text-sm md:text-base">
134+
Robustness in disturbed conditions
135+
</CardTitle>
136+
<p className="text-[11px] md:text-xs text-white/70">
137+
Tactile pretrain and DAgger improve robustness in contact-rich stages.
138+
</p>
139+
</CardHeader>
140+
<CardContent className="p-2 md:p-3">
141+
<ChartContainer config={robustnessConfig} className="!aspect-auto h-[220px] md:h-[245px]">
142+
<BarChart
143+
data={robustnessWholeTaskData}
144+
margin={{ top: 12, bottom: 6, left: 4, right: 4 }}
145+
barCategoryGap="10%"
146+
barGap={1}
147+
>
148+
<CartesianGrid vertical={false} />
149+
<XAxis dataKey="task" tickLine={false} axisLine={false} tickMargin={8} height={28} />
150+
<YAxis domain={[0, 100]} tickLine={false} axisLine={false} />
151+
<ChartTooltip
152+
cursor={false}
153+
shared={false}
154+
content={({ active, payload, label }) => {
155+
if (!active || !payload?.length) return null;
156+
const entry = payload[payload.length - 1];
157+
const key = String(entry.dataKey) as keyof typeof robustnessConfig;
158+
const fullLabel = robustnessConfig[key]?.label || key;
159+
return (
160+
<div className="rounded-md border border-white/20 bg-black/95 px-3 py-2 text-xs text-white shadow-md">
161+
<div className="font-semibold mb-1">{label}</div>
162+
<div className="flex items-center justify-between gap-3">
163+
<span className="text-white/80">{fullLabel}</span>
164+
<span className="font-semibold">{entry.value}%</span>
165+
</div>
166+
</div>
167+
);
168+
}}
169+
/>
170+
<Bar dataKey="visionFull" fill="#DDE8FF" radius={5} minPointSize={4} maxBarSize={32}>
171+
<LabelList dataKey="visionFull" position="top" className="fill-foreground" fontSize={9} formatter={(value: number) => `${value}%`} />
172+
</Bar>
173+
<Bar dataKey="visionPost" fill="#8FB2FF" radius={5} minPointSize={4} maxBarSize={32}>
174+
<LabelList dataKey="visionPost" position="top" className="fill-foreground" fontSize={9} formatter={(value: number) => `${value}%`} />
175+
</Bar>
176+
<Bar dataKey="oursFull" fill="#4F7BFF" radius={5} minPointSize={4} maxBarSize={32}>
177+
<LabelList dataKey="oursFull" position="top" className="fill-foreground" fontSize={9} formatter={(value: number) => `${value}%`} />
178+
</Bar>
179+
<Bar dataKey="oursPost" fill="#1E3FAF" radius={5} minPointSize={4} maxBarSize={32}>
180+
<LabelList dataKey="oursPost" position="top" className="fill-foreground" fontSize={9} formatter={(value: number) => `${value}%`} />
181+
</Bar>
182+
</BarChart>
183+
</ChartContainer>
184+
</CardContent>
185+
<CardFooter className="pt-0 pb-3 md:pb-4 text-[11px] md:text-xs text-white/70 grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-1.5">
186+
<span className="inline-flex items-center gap-2">
187+
<span className="inline-block h-2.5 w-2.5 rounded-sm bg-[#DDE8FF]" />
188+
Vision-Only (Full Dist.)
189+
</span>
190+
<span className="inline-flex items-center gap-2">
191+
<span className="inline-block h-2.5 w-2.5 rounded-sm bg-[#8FB2FF]" />
192+
Vision-Only (Post-Grasp Dist.)
193+
</span>
194+
<span className="inline-flex items-center gap-2">
195+
<span className="inline-block h-2.5 w-2.5 rounded-sm bg-[#4F7BFF]" />
196+
Ours (+ Pretrain + DAgger) Full Dist.
197+
</span>
198+
<span className="inline-flex items-center gap-2">
199+
<span className="inline-block h-2.5 w-2.5 rounded-sm bg-[#1E3FAF]" />
200+
Ours (+ Pretrain + DAgger) Post-Grasp Dist.
201+
</span>
202+
</CardFooter>
203+
</Card>
204+
);
205+
}
206+
Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
"use client"
2+
3+
import { TrendingUp } from "lucide-react"
4+
import { Bar, BarChart, CartesianGrid, Rectangle, XAxis, LabelList } from "recharts"
5+
6+
import {
7+
Card,
8+
CardContent,
9+
CardDescription,
10+
CardFooter,
11+
CardHeader,
12+
CardTitle,
13+
} from "@/components/ui/card"
14+
import {
15+
ChartConfig,
16+
ChartContainer,
17+
ChartTooltip,
18+
ChartTooltipContent,
19+
} from "../ui/chart"
20+
const chartData = [
21+
{ browser: "1", visitors: 35, fill: "var(--color-1)" },
22+
{ browser: "2", visitors: 75, fill: "var(--color-2)" },
23+
{ browser: "3", visitors: 80, fill: "var(--color-3)" },
24+
]
25+
26+
const chartConfig = {
27+
visitors: {
28+
label: "Success Rate (%):",
29+
},
30+
1: {
31+
label: "ACT",
32+
color: "#9BB4F0",
33+
},
34+
2: {
35+
label: "Ours-α",
36+
color: "#6B8CE8",
37+
},
38+
3: {
39+
label: "Ours-β",
40+
color: "#4169D9",
41+
},
42+
} satisfies ChartConfig
43+
44+
export function PolicyRollouts1() {
45+
return (
46+
<Card className="border border-white/20 bg-black text-white w-[275px] md:w-[300px] mx-auto">
47+
<CardHeader className="pb-1 md:pb-2">
48+
<CardTitle className="text-sm md:text-base">Policy Success Rate (%)</CardTitle>
49+
</CardHeader>
50+
<CardContent className="px-2 md:px-3 pt-0 pb-1">
51+
<ChartContainer config={chartConfig} className="!aspect-auto h-[185px] md:h-[210px] w-[245px] md:w-[270px] mx-auto">
52+
<BarChart accessibilityLayer data={chartData} barCategoryGap="0%" margin={{
53+
top: 10,
54+
left: 0,
55+
right: 0,
56+
}}>
57+
<CartesianGrid vertical={false} />
58+
<XAxis className="select-none"
59+
dataKey="browser"
60+
tickLine={false}
61+
tickMargin={10}
62+
axisLine={false}
63+
tickFormatter={(value) =>
64+
chartConfig[value as keyof typeof chartConfig]?.label
65+
}
66+
/>
67+
<ChartTooltip
68+
cursor={false}
69+
content={<ChartTooltipContent />}
70+
/>
71+
<Bar className="select-none"
72+
dataKey="visitors"
73+
barSize={34}
74+
strokeWidth={1.5}
75+
radius={6}
76+
activeIndex={2}
77+
activeBar={({ ...props }) => {
78+
return (
79+
<Rectangle
80+
{...props}
81+
/>
82+
)
83+
}}
84+
>
85+
<LabelList
86+
position="top"
87+
offset={8}
88+
className="fill-foreground"
89+
fontSize={10}
90+
/>
91+
</Bar>
92+
</BarChart>
93+
</ChartContainer>
94+
</CardContent>
95+
<CardFooter className="flex-col items-start gap-1.5 text-xs pt-1">
96+
<div className="text-muted-foreground/90 leading-relaxed select-none">
97+
ACT(Vision-only)
98+
<br />
99+
Ours-a (+Tactile +Pretrained)
100+
<br />
101+
Ours-B (+Tactile +Pretrained +DAgger)
102+
</div>
103+
</CardFooter>
104+
</Card>
105+
)
106+
}

0 commit comments

Comments
 (0)