Skip to content

Commit df40c20

Browse files
faikitfaikit
committed
.
1 parent 7b58570 commit df40c20

32 files changed

+38015
-12
lines changed

‎app/(default)/(project)/(black_background)/kai0/chart-carousel.tsx‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import { ChevronLeft, ChevronRight } from "lucide-react"
5+
import {
6+
Carousel,
7+
CarouselContent,
8+
CarouselItem,
9+
type CarouselApi,
10+
} from "@/components/ui/carousel"
11+
import { ConsistencyBarChart1 } from "./chart/consistency/consistency1"
12+
import { ConsistencyBarChart2 } from "./chart/consistency/consistency2"
13+
import { ConsistencyBarChart11 } from "./chart/consistency/consistency11"
14+
import { ConsistencyBarChart12 } from "./chart/consistency/consistency12"
15+
import { ConsistencyBarChart8 } from "./chart/consistency/consistency8"
16+
import { ConsistencyBarChart9 } from "./chart/consistency/consistency9"
17+
18+
const chartSections = [
19+
{
20+
title: "DAgger",
21+
charts: [<ConsistencyBarChart1 key="1" />, <ConsistencyBarChart2 key="2" />],
22+
caption: "Improved data collection methods and on-policy recovery trajectories effectively enhance the model's error recovery capability, significantly increasing success rate and reducing recover cost (fewer retry attempts per failure). X-axis: baseline, improved baseline, + heuristic DAgger, + DAgger.",
23+
},
24+
{
25+
title: "Spatio-temporal Augmentation",
26+
charts: [<ConsistencyBarChart11 key="11" />, <ConsistencyBarChart12 key="12" />],
27+
caption: "Spatio-temporal augmentation substantially enhances model performance, increasing success rate and throughput (more task completions per unit time). X-axis: baseline, +spatio-temp. augment.",
28+
},
29+
{
30+
title: "Inference Optimization",
31+
charts: [<ConsistencyBarChart8 key="8" />, <ConsistencyBarChart9 key="9" />],
32+
caption: "Inference optimization through chunk-wise temporal smoothing and real-time chunking ensures the policy's intended actions are translated flawlessly into smooth, coherent real-robot execution, improving throughput (more task completions per unit time). X-axis: sync, + inchunk smooth, + temp smooth, + RTC.",
33+
},
34+
]
35+
36+
export function ChartCarousel() {
37+
const [api, setApi] = React.useState<CarouselApi>()
38+
const [current, setCurrent] = React.useState(0)
39+
const [canScrollPrev, setCanScrollPrev] = React.useState(false)
40+
const [canScrollNext, setCanScrollNext] = React.useState(true)
41+
42+
React.useEffect(() => {
43+
if (!api) {
44+
return
45+
}
46+
47+
setCurrent(api.selectedScrollSnap())
48+
// In loop mode, buttons are always enabled
49+
setCanScrollPrev(true)
50+
setCanScrollNext(true)
51+
52+
api.on("select", () => {
53+
setCurrent(api.selectedScrollSnap())
54+
// In loop mode, buttons are always enabled
55+
setCanScrollPrev(true)
56+
setCanScrollNext(true)
57+
})
58+
}, [api])
59+
60+
const scrollTo = (index: number) => {
61+
api?.scrollTo(index)
62+
}
63+
64+
return (
65+
<div className="w-full relative">
66+
<Carousel
67+
setApi={setApi}
68+
opts={{
69+
align: "start",
70+
loop: true,
71+
}}
72+
className="w-full relative"
73+
>
74+
<CarouselContent className="-ml-0">
75+
{chartSections.map((section, index) => (
76+
<CarouselItem key={index} className="pl-0 basis-full">
77+
<div className="w-full">
78+
{/* Charts */}
79+
<div className="mt-10 flex flex-row justify-center px-6">
80+
<div className="max-w-6xl w-full flex flex-col lg:flex-row gap-10 justify-center">
81+
{section.charts}
82+
</div>
83+
</div>
84+
{/* Caption */}
85+
<div className="mt-5 flex justify-center px-6">
86+
<p className="text-sm leading-relaxed text-muted-foreground/80 text-center max-w-3xl">
87+
{section.caption}
88+
</p>
89+
</div>
90+
</div>
91+
</CarouselItem>
92+
))}
93+
</CarouselContent>
94+
95+
{/* Apple-style Navigation Buttons */}
96+
<div className="absolute left-2 sm:left-4 lg:left-0 top-1/2 -translate-y-1/2 lg:-translate-x-12 z-20">
97+
<button
98+
onClick={() => api?.scrollPrev()}
99+
disabled={!canScrollPrev}
100+
className={`
101+
group relative w-10 h-10 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-full
102+
backdrop-blur-xl bg-black/10 border border-black/20
103+
flex items-center justify-center
104+
transition-all duration-300 ease-out
105+
${canScrollPrev
106+
? "hover:bg-black/20 hover:border-black/30 hover:scale-110 active:scale-95 cursor-pointer"
107+
: "opacity-30 cursor-not-allowed"
108+
}
109+
shadow-[0_8px_32px_rgba(0,0,0,0.12)]
110+
`}
111+
aria-label="Previous chart"
112+
>
113+
<ChevronLeft
114+
className={`
115+
w-4 h-4 sm:w-5 sm:h-5 lg:w-6 lg:h-6 text-black
116+
transition-transform duration-300
117+
${canScrollPrev ? "group-hover:-translate-x-0.5" : ""}
118+
`}
119+
/>
120+
{/* Subtle glow effect */}
121+
{canScrollPrev && (
122+
<div className="absolute inset-0 rounded-full bg-black/5 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
123+
)}
124+
</button>
125+
</div>
126+
127+
<div className="absolute right-2 sm:right-4 lg:right-0 top-1/2 -translate-y-1/2 lg:translate-x-12 z-20">
128+
<button
129+
onClick={() => api?.scrollNext()}
130+
disabled={!canScrollNext}
131+
className={`
132+
group relative w-10 h-10 sm:w-12 sm:h-12 lg:w-14 lg:h-14 rounded-full
133+
backdrop-blur-xl bg-black/10 border border-black/20
134+
flex items-center justify-center
135+
transition-all duration-300 ease-out
136+
${canScrollNext
137+
? "hover:bg-black/20 hover:border-black/30 hover:scale-110 active:scale-95 cursor-pointer"
138+
: "opacity-30 cursor-not-allowed"
139+
}
140+
shadow-[0_8px_32px_rgba(0,0,0,0.12)]
141+
`}
142+
aria-label="Next chart"
143+
>
144+
<ChevronRight
145+
className={`
146+
w-4 h-4 sm:w-5 sm:h-5 lg:w-6 lg:h-6 text-black
147+
transition-transform duration-300
148+
${canScrollNext ? "group-hover:translate-x-0.5" : ""}
149+
`}
150+
/>
151+
{/* Subtle glow effect */}
152+
{canScrollNext && (
153+
<div className="absolute inset-0 rounded-full bg-black/5 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
154+
)}
155+
</button>
156+
</div>
157+
</Carousel>
158+
159+
{/* Apple-style Page Indicators */}
160+
<div className="flex justify-center items-center gap-2 mt-8">
161+
{chartSections.map((_, index) => (
162+
<button
163+
key={index}
164+
onClick={() => scrollTo(index)}
165+
className={`
166+
transition-all duration-500 ease-out
167+
rounded-full
168+
${index === current
169+
? "w-8 h-2 bg-black shadow-[0_2px_8px_rgba(255,255,255,0.3)]"
170+
: "w-2 h-2 bg-black/30 hover:bg-black/50 hover:w-3"
171+
}
172+
`}
173+
aria-label={`Go to ${chartSections[index].title}`}
174+
aria-current={index === current ? "true" : "false"}
175+
/>
176+
))}
177+
</div>
178+
</div>
179+
)
180+
}
181+

‎app/(default)/(project)/(black_background)/kai0/chart/advantage/advantage1.tsx‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
"use client"
2+
3+
4+
5+
import { TrendingUp } from "lucide-react"
6+
import { Bar, BarChart, CartesianGrid, Rectangle, XAxis, LabelList, YAxis } from "recharts"
7+
8+
9+
10+
import {
11+
Card,
12+
CardContent,
13+
CardDescription,
14+
CardFooter,
15+
CardHeader,
16+
CardTitle,
17+
} from "@/components/ui/card"
18+
import {
19+
ChartContainer,
20+
ChartTooltip,
21+
ChartTooltipContent,
22+
ChartLegend,
23+
ChartLegendContent,
24+
type ChartConfig,
25+
} from "@/components/ui/chart"
26+
27+
28+
29+
const chartData = [
30+
{ trick: "chrome", MSTD: 0.0160, MSTDLabel: "0.0160", fill: "var(--color-chrome)" },
31+
{ trick: "safari", MSTD: 0.0151, MSTDLabel: "0.0151", fill: "var(--color-safari)" },
32+
{ trick: "firefox", MSTD: 0.0115, MSTDLabel: "0.0115", fill: "var(--color-firefox)" },
33+
]
34+
35+
36+
37+
const chartConfig = {
38+
chrome: {
39+
label: "Value-diff",
40+
color: "#4286F3",
41+
},
42+
safari: {
43+
label: "Direct",
44+
color: "#ebb017",
45+
},
46+
firefox: {
47+
label: "Direct+Stage",
48+
color: "#55AF7B",
49+
},
50+
} satisfies ChartConfig
51+
52+
53+
54+
export function AdvantageBarChart1() {
55+
return (
56+
<Card className="w-full lg:max-w-1/2 bg-transparent border-0 shadow-transparent p-0 m-0 gap-3 flex-1">
57+
58+
59+
60+
<CardHeader className="m-0 p-0 leading-relaxed font-normal text-sm">
61+
<CardDescription>Mean Squared Temporal Difference (MSTD) &#8595;</CardDescription>
62+
</CardHeader>
63+
64+
65+
66+
<CardContent className="px-0">
67+
<ChartContainer config={chartConfig}>
68+
<BarChart accessibilityLayer data={chartData} margin={{ top: 16, right: 0, left: 0, bottom: 0 }}>
69+
<CartesianGrid vertical={false} />
70+
<XAxis
71+
dataKey="trick"
72+
tickLine={false}
73+
tickMargin={6}
74+
axisLine={false}
75+
tickFormatter={(value) =>
76+
chartConfig[value as keyof typeof chartConfig]?.label
77+
}
78+
/>
79+
<YAxis
80+
yAxisId="left"
81+
orientation="left"
82+
tickLine={false}
83+
axisLine={false}
84+
tickMargin={6}
85+
width={48}
86+
/>
87+
<ChartTooltip
88+
cursor={false}
89+
content={<ChartTooltipContent hideLabel />}
90+
/>
91+
<ChartLegend content={<ChartLegendContent />} className="text-black"/>
92+
<Bar
93+
yAxisId="left"
94+
dataKey="MSTD"
95+
strokeWidth={2}
96+
radius={4}
97+
activeIndex={2}
98+
activeBar={({ ...props }) => <Rectangle {...props} fillOpacity={0.8} />}
99+
/>
100+
</BarChart>
101+
</ChartContainer>
102+
</CardContent>
103+
104+
105+
106+
{/* <CardFooter className="px-0 -mt-6">
107+
<div className="flex w-full justify-center">
108+
<i className="leading-relaxed font-normal text-black text-sm">
109+
desc
110+
</i>
111+
</div>
112+
</CardFooter> */}
113+
114+
115+
116+
</Card>
117+
)
118+
}

0 commit comments

Comments
 (0)