Spaces:
Sleeping
Sleeping
File size: 2,636 Bytes
0e24aff | 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 | import { useState } from "react";
import { HeroIntro } from "@/components/HeroIntro";
import { OpenEnvExplorerPane } from "@/components/OpenEnvExplorerPane";
import { RunWithLlmPane } from "@/components/RunWithLlmPane";
import { cn } from "@/lib/cn";
type TabId = "run" | "openenv";
interface TabDef {
id: TabId;
label: string;
}
const TABS: TabDef[] = [
{ id: "run", label: "Run with LLM" },
{ id: "openenv", label: "OpenEnv API" },
];
export function App(): JSX.Element {
const [activeTab, setActiveTab] = useState<TabId>("run");
return (
<main className="mx-auto flex w-full max-w-7xl flex-col gap-8 px-6 py-10">
<header className="flex flex-col gap-6">
<div className="flex flex-col gap-2">
<p className="heading-eyebrow text-primary">PhysiX-Live</p>
<h1 className="text-3xl font-semibold leading-tight md:text-4xl">
Discover equations of motion from a noisy trajectory.
</h1>
<p className="max-w-3xl text-sm leading-relaxed text-textMuted">
An OpenEnv RL environment where a language model proposes
ordinary differential equations and a verifier scores them by
forward-simulating each proposal and comparing to observation. No
LLM-as-judge, no hidden side-information — the same scoring
pipeline drives training, evaluation, and this demo.
</p>
</div>
<HeroIntro />
</header>
{/* Tab bar — segmented-control style for unmistakable active state. */}
<nav aria-label="View">
<div
role="tablist"
className="inline-flex rounded-xl border border-border bg-surfaceMuted p-1"
>
{TABS.map((tab) => (
<button
key={tab.id}
type="button"
role="tab"
aria-selected={activeTab === tab.id}
aria-controls={`panel-${tab.id}`}
id={`tab-${tab.id}`}
onClick={() => setActiveTab(tab.id)}
className={cn(
"rounded-lg px-4 py-2 text-sm font-medium transition",
activeTab === tab.id
? "bg-primary text-background shadow-sm"
: "text-textMuted hover:text-textPrimary",
)}
>
{tab.label}
</button>
))}
</div>
</nav>
<div
role="tabpanel"
id={`panel-${activeTab}`}
aria-labelledby={`tab-${activeTab}`}
>
{activeTab === "run" ? <RunWithLlmPane /> : <OpenEnvExplorerPane />}
</div>
</main>
);
}
|