Spaces:
Sleeping
Sleeping
File size: 4,330 Bytes
b89c27d 4a535ea b89c27d | 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 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 | import { useState } from 'react'
import Plot from 'react-plotly.js'
import { Swords } from 'lucide-react'
import { runArena } from '../lib/api.js'
import { RewardBreakdown } from '../components/RewardBreakdown.jsx'
const SAMPLE = `class Optimizer:
def __init__(self, dim):
self.lr = 0.05
self.beta = 0.9
self.v = np.zeros(dim)
def step(self, x, f_val, grad):
# SGD with heavy-ball momentum
self.v = self.beta * self.v - self.lr * grad
return x + self.v
`
const TEMPLATES = [
'quadratic', 'rosenbrock', 'styblinski_tang', 'huber',
'gaussian_mix', 'himmelblau', 'plateau', 'cliff',
]
export function OptimizerArena() {
const [template, setTemplate] = useState('quadratic')
const [dim, setDim] = useState(5)
const [seed, setSeed] = useState(42)
const [code, setCode] = useState(SAMPLE)
const [data, setData] = useState(null)
const [loading, setLoading] = useState(false)
const [err, setErr] = useState(null)
async function run() {
setLoading(true); setErr(null); setData(null)
try {
const r = await runArena({ template, dim, seed, code })
if (r.error) {
setErr(r.error)
} else {
setData(r)
}
} catch (e) {
setErr(e.message)
} finally {
setLoading(false)
}
}
return (
<div className="grid grid-cols-[340px_1fr] gap-5">
<aside className="card space-y-4 h-fit">
<div>
<h3 className="mb-1">Optimizer arena</h3>
<p className="text-xs text-muted">
Paste an <code>Optimizer</code> class. We run it through the full
Phase-D arena vs tuned Adam on the chosen landscape.
<br /><span className="text-subtle">np is pre-injected — no import lines.</span>
</p>
</div>
<div>
<label className="label">Template</label>
<select className="input" value={template}
onChange={e => setTemplate(e.target.value)}>
{TEMPLATES.map(t => <option key={t}>{t}</option>)}
</select>
</div>
<div>
<label className="label">Dim: {dim}</label>
<input type="range" min={2} max={10} step={1} value={dim}
onChange={e => setDim(Number(e.target.value))}
className="w-full accent-accent" />
</div>
<div>
<label className="label">Seed: {seed}</label>
<input type="range" min={0} max={100} step={1} value={seed}
onChange={e => setSeed(Number(e.target.value))}
className="w-full accent-accent" />
</div>
<button className="btn-primary w-full" onClick={run} disabled={loading}>
<Swords size={14} /> {loading ? 'Running…' : 'Run arena'}
</button>
</aside>
<div className="space-y-4">
<div className="card">
<h3 className="mb-2">Your Optimizer class</h3>
<textarea className="input font-mono text-xs h-72 leading-relaxed"
value={code} onChange={e => setCode(e.target.value)} spellCheck={false} />
</div>
{err && (
<div className="card border-bad/40 bg-bad/10 text-bad">
<strong>Compile error:</strong>
<pre className="mt-1 text-xs whitespace-pre-wrap">{err}</pre>
</div>
)}
{data?.summary_md && (
<div className="card prose prose-invert max-w-none text-sm"
dangerouslySetInnerHTML={{ __html: data.summary_md }} />
)}
{data && (
<div className="grid grid-cols-2 gap-4">
{data.contour && (
<div className="card"><Plot data={data.contour.data} layout={data.contour.layout}
config={{ displayModeBar: false }} style={{ width: '100%' }} useResizeHandler /></div>
)}
{data.progress && (
<div className="card"><Plot data={data.progress.data} layout={data.progress.layout}
config={{ displayModeBar: false }} style={{ width: '100%' }} useResizeHandler /></div>
)}
</div>
)}
{data?.breakdown && (
<div className="card">
<RewardBreakdown breakdown={data.breakdown} total={data.total} />
</div>
)}
</div>
</div>
)
}
|