Spaces:
Running
Running
| import { useEffect } from "react"; | |
| import { AppLayout, Button, DatasetPicker, describePlot, Divider, useDataset } from "@elvis/ui"; | |
| // import { LoadingScreen } from "@elvis/ui"; | |
| import { OKABE_ITO_COLORS } from "./colors.ts"; | |
| import { DATASETS } from "./datasets.ts"; | |
| import DecisionBoundaryPlot from "./DecisionBoundaryPlot.tsx"; | |
| import Sidebar from "./Sidebar.tsx"; | |
| import Usage from "./Usage.tsx"; | |
| import useAppLogic from "./useAppLogic.ts"; | |
| const MANUAL_CLASSES = OKABE_ITO_COLORS.map(({ name, value }) => ({ name, color: value })); | |
| export default function App() { | |
| const app = useAppLogic(); | |
| const dataset = useDataset({ task: "classification", builtins: DATASETS, classes: MANUAL_CLASSES }); | |
| const processed = dataset.result?.ok ? dataset.result.dataset : null; | |
| // Plot whatever the picker produces and send it to Python. Drawing points by | |
| // hand keeps the view still; loading a table zooms to fit it. | |
| useEffect(() => { | |
| app.handleSetDataset(processed, dataset.source !== "manual"); | |
| }, [dataset.result]); | |
| //if (!app.backendReady) { | |
| //return <LoadingScreen message="Loading" />; | |
| //} | |
| return ( | |
| <AppLayout | |
| title="Decision Boundary" | |
| usage={<Usage />} | |
| examples={<p>Examples are coming soon.</p>} | |
| panel={ | |
| <> | |
| <DatasetPicker dataset={dataset} /> | |
| <Divider /> | |
| <Sidebar | |
| modelSettings={app.modelSettings} | |
| setModelSettings={app.handleModelSettingsChange} | |
| /> | |
| <Divider /> | |
| {app.pythonStatus === "loading" && ( | |
| <p className="text-sm text-ink-muted">Loading Python… actions will run once it is ready.</p> | |
| )} | |
| {app.pythonStatus === "failed" && ( | |
| <p className="text-red-600 font-semibold">Python failed to load. Try reloading the page.</p> | |
| )} | |
| <section className="flex flex-col gap-4"> | |
| <h3 className="text-xs font-semibold uppercase tracking-widest text-ink-muted">Fit</h3> | |
| <Button | |
| label="Get Decision Boundary" | |
| onClick={app.handleGetDecisionBoundary} | |
| variant="primary" | |
| /> | |
| <label className="flex items-center gap-2 text-sm text-gray-700 cursor-pointer"> | |
| <input | |
| type="checkbox" | |
| checked={app.autoFit} | |
| onChange={(e) => app.handleAutoFitChange(e.target.checked)} | |
| className="size-4 accent-ink" | |
| /> | |
| Fit automatically | |
| </label> | |
| {app.modelError && ( | |
| <p className="text-red-600 font-semibold">{app.modelError}</p> | |
| )} | |
| </section> | |
| </> | |
| } | |
| > | |
| <DecisionBoundaryPlot | |
| dataPoints={app.dataPoints} | |
| onDataClick={dataset.source === "manual" ? dataset.manual.add : null} | |
| decisionBoundaryResult={app.decisionBoundaryResult} | |
| xRangeRef={app.xRangeRef} | |
| yRangeRef={app.yRangeRef} | |
| setRanges={app.handleRangeChange} | |
| labelColors={app.labelColors} | |
| plotHandle={app.plotHandle} | |
| /> | |
| {dataset.source !== "manual" && dataset.result?.ok && ( | |
| <p className="mt-2 text-xs text-ink-muted">{describePlot(dataset.result.dataset)}</p> | |
| )} | |
| </AppLayout> | |
| ); | |
| } | |