Spaces:
Running
Running
| import { useEffect, useState, useRef } from "react"; | |
| import OptimizationPlot from "./OptimizationPlot.tsx"; | |
| import Sidebar from "./Sidebar.tsx"; | |
| import ComparePanel from "./ComparePanel"; | |
| import type { BivariatePlotView, ComparisonEntry, SettingsUi } from "./types.ts"; | |
| import usePyodide from "./usePyodide.ts"; | |
| const INITIAL_SETTINGS_UI: SettingsUi = { | |
| mode: "Univariate", | |
| functionExpr: "x^2", | |
| algorithm: "Gradient Descent", | |
| x0: "0.5", | |
| y0: "0.5", | |
| learningRate: "0.1", | |
| momentum: "0.0", | |
| }; | |
| const INITIAL_XLIM: [number, number] = [-1, 1]; | |
| const INITIAL_YLIM: [number, number] = [-1, 1]; | |
| const COMPARISON_COLORS = [ | |
| "#0072B2", "#E69F00", "#009E73", "#D55E00", "#CC79A7", "#6F4EBA", | |
| "#A6761D", "#E7298A", "#1B9E77", "#7570B3", "#E6AB02", "#666666", | |
| ] as const; | |
| function comparisonColor(id: number): string { | |
| if (id <= COMPARISON_COLORS.length) return COMPARISON_COLORS[id - 1]; | |
| // Continue with non-repeating golden-angle hues for unusually large comparisons. | |
| return `hsl(${((id - 1) * 137.508) % 360}, 72%, 40%)`; | |
| } | |
| export default function App() { | |
| const [settingsUi, setSettingsUi] = useState<SettingsUi>(INITIAL_SETTINGS_UI); | |
| const [compareActive, setCompareActive] = useState(false); | |
| const [entries, setEntries] = useState<ComparisonEntry[]>([]); | |
| const [comparisonIteration, setComparisonIteration] = useState(0); | |
| const [comparisonAnimating, setComparisonAnimating] = useState(false); | |
| const nextId = useRef(1); | |
| const [isAnimating, setIsAnimating] = useState(false); | |
| const [showGradientField, setShowGradientField] = useState(false); | |
| const [bivariatePlotView, setBivariatePlotView] = useState<BivariatePlotView>("Contour heatmap"); | |
| const xlimRef = useRef<[number, number]>(INITIAL_XLIM); | |
| const ylimRef = useRef<[number, number]>(INITIAL_YLIM); | |
| const settings = { ...settingsUi, xlim: xlimRef.current, ylim: ylimRef.current }; | |
| function handleSettingsUiChange(newSettings: SettingsUi) { | |
| setIsAnimating(false); | |
| if (newSettings.mode !== settingsUi.mode || newSettings.functionExpr !== settingsUi.functionExpr | |
| || newSettings.x0 !== settingsUi.x0 || newSettings.y0 !== settingsUi.y0) { | |
| setComparisonAnimating(false); | |
| setComparisonIteration(0); | |
| setEntries(previous => previous.map(entry => ({ ...entry, settings: { ...entry.settings, mode: newSettings.mode, functionExpr: newSettings.functionExpr } }))); | |
| } | |
| setSettingsUi(newSettings); | |
| api.sendInit({ ...newSettings, xlim: xlimRef.current, ylim: ylimRef.current }); | |
| } | |
| function setAxisLimits(xlim: [number, number], ylim: [number, number]) { | |
| xlimRef.current = xlim; | |
| ylimRef.current = ylim; | |
| api.sendInit({ ...settingsUi, xlim, ylim }); | |
| } | |
| function handleRandomInitialPoint() { | |
| const xRange = xlimRef.current[1] - xlimRef.current[0]; | |
| const yRange = ylimRef.current[1] - ylimRef.current[0]; | |
| const newX0 = (xlimRef.current[0] + Math.random() * xRange * 0.95).toFixed(2); | |
| const newY0 = (ylimRef.current[0] + Math.random() * yRange * 0.95).toFixed(2); | |
| const newSettings = { ...settingsUi, x0: newX0, y0: newY0 }; | |
| handleSettingsUiChange(newSettings); | |
| } | |
| const api = usePyodide(settings); | |
| const { compare, comparisonBusy, isLoading } = api; | |
| useEffect(() => { | |
| if (!isLoading) compare(entries.map(entry => ({ ...entry.settings, xlim: xlimRef.current, ylim: ylimRef.current })), entries.map(entry => entry.id), comparisonIteration); | |
| }, [entries, comparisonIteration, compare, isLoading]); | |
| useEffect(() => { | |
| if (!comparisonAnimating || comparisonBusy || isLoading) return; | |
| const timeout = window.setTimeout(() => setComparisonIteration(value => value + 1), 200); | |
| return () => window.clearTimeout(timeout); | |
| }, [comparisonAnimating, comparisonBusy, isLoading, comparisonIteration]); | |
| const sendNextStep = api.sendNextStep; | |
| const currentIteration = api.currentIteration; | |
| const totalIterations = Math.max((api.plotData.trajectoryValues?.x.length ?? 1) - 1, 0); | |
| useEffect(() => { | |
| if (!isAnimating) return; | |
| const intervalId = window.setInterval(() => sendNextStep(), 200); | |
| return () => window.clearInterval(intervalId); | |
| }, [isAnimating, sendNextStep]); | |
| //if (api.isLoading) { | |
| //return <LoadingScreen message="Loading" />; | |
| //} | |
| return ( | |
| <div className="grid grid-cols-[1fr_12fr_1fr] lg:h-dvh bg-stone-50"> | |
| <div/> | |
| <div className="flex flex-col gap-6 p-6 min-h-0"> | |
| <header className="grid grid-cols-1 items-center gap-3 lg:grid-cols-[2fr_1fr] lg:gap-12"> | |
| <div className="title">Optimization Trajectory Visualizer</div> | |
| {/* <div className="desc"></div> */} | |
| <div | |
| id="runtime-status" | |
| className={`status translate-y-4 w-fit justify-self-end ${api.isLoading ? "loading" : "ready"}`} | |
| role="status" | |
| aria-live="polite" | |
| > | |
| <span></span> | |
| {api.isLoading ? "Loading Python runtime…" : "Python runtime ready"} | |
| </div> | |
| </header> | |
| <div className="grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-12 flex-1 min-h-0 overflow-auto"> | |
| <div className="flex h-full min-h-0 min-w-0 flex-col gap-2"> | |
| {settingsUi.mode === "Bivariate" && ( | |
| <div className="flex w-full border-b border-gray-200" role="tablist" aria-label="Bivariate plot view"> | |
| {(["Contour heatmap", "Function surface"] as const).map((view) => ( | |
| <button | |
| key={view} | |
| type="button" | |
| role="tab" | |
| aria-selected={bivariatePlotView === view} | |
| onClick={() => setBivariatePlotView(view)} | |
| className={`w-1/2 cursor-pointer rounded px-5 py-1 ${bivariatePlotView === view | |
| ? "border-b-2 border-orange-400 text-orange-400" | |
| : "text-gray-950 hover:bg-gray-200"}`} | |
| > | |
| {view} | |
| </button> | |
| ))} | |
| </div> | |
| )} | |
| <OptimizationPlot | |
| data={compareActive ? { functionValues: api.plotData.functionValues } : api.plotData} | |
| comparisons={compareActive ? entries.map(entry => ({ ...entry, values: api.comparison.find(item => item.id === entry.id)?.values })) : undefined} | |
| isLoading={api.isLoading} | |
| xlim={xlimRef.current} | |
| ylim={ylimRef.current} | |
| setAxisLimits={setAxisLimits} | |
| currentIteration={currentIteration} | |
| showGradientField={showGradientField} | |
| bivariatePlotView={bivariatePlotView} | |
| /> | |
| </div> | |
| <Sidebar | |
| onTabChange={(tab) => { setCompareActive(tab === "Compare"); setIsAnimating(false); setComparisonAnimating(false); }} | |
| comparison={<ComparePanel settings={settingsUi} entries={entries} trajectories={api.comparison} | |
| iteration={comparisonIteration} busy={comparisonBusy} ready={!api.isLoading} animating={comparisonAnimating} | |
| onAdd={(configured) => { | |
| const id = nextId.current++; | |
| setComparisonIteration(0); | |
| setEntries(previous => [...previous, { | |
| id, | |
| settings: configured, | |
| color: comparisonColor(id), | |
| visible: true, | |
| }]); | |
| }} | |
| onRemove={(id) => { setComparisonAnimating(false); setEntries(previous => previous.filter(entry => entry.id !== id)); }} | |
| onToggleVisibility={(id) => setEntries(previous => previous.map(entry => ( | |
| entry.id === id ? { ...entry, visible: !entry.visible } : entry | |
| )))} | |
| onAction={(action) => { | |
| if (action === "Animate") setComparisonAnimating(true); | |
| else if (action === "Pause") setComparisonAnimating(false); | |
| else if (action === "Reset") setComparisonIteration(0); | |
| else setComparisonIteration(value => Math.max(0, value + (action === "Next" ? 1 : -1))); | |
| }} | |
| />} | |
| settings={settingsUi} | |
| setSettings={handleSettingsUiChange} | |
| onRandomInitialPoint={handleRandomInitialPoint} | |
| trajectoryValues={api.plotData.trajectoryValues} | |
| onReset={() => { | |
| setIsAnimating(false); | |
| api.sendReset(); | |
| }} | |
| onNextStep={api.sendNextStep} | |
| onPrevStep={api.sendPrevStep} | |
| onAnimate={() => setIsAnimating(true)} | |
| onPause={() => setIsAnimating(false)} | |
| isAnimating={isAnimating} | |
| currentIteration={currentIteration} | |
| totalIterations={totalIterations} | |
| showGradientField={showGradientField} | |
| onShowGradientFieldChange={setShowGradientField} | |
| /> | |
| </div> | |
| </div> | |
| <div/> | |
| </div> | |
| ); | |
| } | |