Spaces:
Running
Running
File size: 2,703 Bytes
b03f016 47d3d12 b03f016 47d3d12 b03f016 47d3d12 b03f016 47d3d12 b03f016 47d3d12 b03f016 47d3d12 b03f016 | 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 | import { lazy, Suspense } from "react";
import { useHashRoute, navigateTo, useCopyLink } from "./hashRouter";
import ThemeToggle, { useTheme } from "./ThemeToggle";
const VisualizerApp = lazy(() => import("./visualizer/VisualizerApp"));
const ExperimentsApp = lazy(() => import("./experiments/ExperimentsApp"));
const SftDiffApp = lazy(() => import("./sft_diff/SftDiffApp"));
type PageId = "experiments" | "visualizer" | "sft-diff";
const PAGES: { id: PageId; label: string }[] = [
{ id: "experiments", label: "Experiments" },
{ id: "visualizer", label: "Visualizer" },
{ id: "sft-diff", label: "SFT Diff" },
];
export default function App() {
const route = useHashRoute();
const activePage: PageId =
route.page === "viz" ? "visualizer" :
route.page === "sft-diff" ? "sft-diff" :
"experiments";
const { copyLink, copied } = useCopyLink();
const { dark, toggle } = useTheme();
return (
<div className="h-screen flex flex-col bg-gray-950 text-gray-100">
{/* Top navigation bar */}
<div className="flex items-center border-b border-gray-700 bg-gray-900 px-4 shrink-0">
<span className="text-sm font-semibold text-gray-300 mr-6 py-2.5">
Research Dashboard
</span>
{PAGES.map((page) => (
<button
key={page.id}
onClick={() => navigateTo({ page: page.id === "visualizer" ? "viz" : page.id === "sft-diff" ? "sft-diff" : "experiments" })}
className={`px-4 py-2.5 text-sm font-medium border-b-2 transition-colors ${
activePage === page.id
? "border-cyan-500 text-cyan-400"
: "border-transparent text-gray-500 hover:text-gray-300"
}`}
>
{page.label}
</button>
))}
<div className="ml-auto flex items-center gap-3">
<ThemeToggle dark={dark} toggle={toggle} />
<button
onClick={copyLink}
className="px-2.5 py-1 text-xs font-medium rounded border border-gray-600 text-gray-400 hover:text-gray-200 hover:border-gray-400 transition-colors"
>
{copied ? "Copied!" : "Copy Link"}
</button>
</div>
</div>
{/* Active page */}
<div className="flex-1 overflow-hidden">
<Suspense
fallback={
<div className="flex items-center justify-center h-full text-gray-500">
Loading...
</div>
}
>
{activePage === "experiments" && <ExperimentsApp />}
{activePage === "visualizer" && <VisualizerApp />}
{activePage === "sft-diff" && <SftDiffApp />}
</Suspense>
</div>
</div>
);
}
|