frontends/react/src/usage.md

Watch an optimiser walk downhill on a function you choose, one iteration at a time.

Steps

1. Function (Configure tab): pick a univariate f(x) or bivariate f(x, y) function from the list, or type your own in the box, e.g. x^4 - 2x^2 + 0.3x or sin(x) cos(y). A function that uses y has two variables. You can use sin, cos, tan, asin, acos, atan, exp, log (or ln), sqrt, abs, pi and e; 2x means 2*x.
2. Optimiser: pick an algorithm and change its settings in the boxes below it, e.g. η, the learning rate. Hover over a box for its name, or press ⓘ for every setting with a description. The reset arrow beside it puts the settings back to their defaults.
3. Initial point: type it, click on the plot, or press the dice for a random one. The reset arrow beside it goes back to the function's usual initial point.
4. Step (bottom of the panel, in every tab): press Play, or step forward and back. Type a number in the × box to move several iterations per step; each one is shown in turn.

The Metrics tab shows the current point with f, the gradient and the Hessian (or f′ and f″ with one variable), and a chart of f at each iteration. A run stops after 1000 iterations, or earlier if it diverges.

Two variables

The plot is a contour map of f, coloured from low (purple) to high (yellow). Tick Gradient field to draw ∇f as arrows (contour only); they point uphill, so the optimiser moves against them. Surface shows f in 3D; drag to turn it.

Compare

In the Compare tab, press + Add optimiser for another run on the same function. Click a run to open it and change its algorithm, settings and initial point; every run steps together, from the start again after a change. Click a run's colour to pick another, or × to remove it. Run 1 is the main run from Configure: editing it here changes it there too.

Plot

Drag to pan and scroll to zoom. The function is redrawn for the new view.