Spaces:
Running
Running
| import { useState } from 'react' | |
| import { Tabs } from "@elvis/ui"; | |
| import ConvolutionVisualizer from "./ConvolutionVisualizer.tsx" | |
| import PoolingVisualizer from "./PoolingVisualizer.tsx" | |
| import NetworkVisualizer from "./NetworkVisualizer.tsx" | |
| function App() { | |
| const tabs = ["Convolution", "Pooling", "Network"]; | |
| const [activeTab, setActiveTab] = useState<string>(tabs[0]); | |
| return ( | |
| <div className="grid grid-cols-[1fr_12fr_1fr] h-dvh bg-stone-50"> | |
| <div/> | |
| <div className="flex flex-col min-h-0 p-6"> | |
| <div className="title">CNN Visualizer</div> | |
| {/* <div className="desc"></div> */} | |
| <Tabs | |
| tabs={tabs} | |
| activeTab={activeTab} | |
| onChange={setActiveTab} | |
| /> | |
| <div className="min-h-0 flex-1 overflow-auto mt-4"> | |
| <div className={activeTab === "Convolution" ? "h-full" : "hidden"}> | |
| <ConvolutionVisualizer /> | |
| </div> | |
| <div className={activeTab === "Pooling" ? "h-full" : "hidden"}> | |
| <PoolingVisualizer /> | |
| </div> | |
| { activeTab === "Network" && ( | |
| <NetworkVisualizer /> | |
| )} | |
| </div> | |
| </div> | |
| <div/> | |
| </div> | |
| ); | |
| } | |
| export default App; | |