# rupaka


<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

rupaka (रूपक) means a form, a play that the audience sees, and the figure
of speech that shows one thing through another. A rupaka demo is one
interactive figure that teaches one idea. The learner changes the inputs
and sees the result change.

A demo never shows the answer first. Each demo follows one loop:

1.  Predict. The demo shows the inputs and asks one question. The result
    is hidden.
2.  Reveal. The learner locks in with ⌘↩. The demo shows the result and
    says if the prediction was right.
3.  Manipulate. Now the controls are live. The result changes when the
    inputs change.
4.  Explain. The caption ends with a new question that the learner
    answers with the controls.

The validator enforces step 1: a block that shows a value which the
answer depends on must wait for the gate.

## What a demo is

A demo is a JSON spec, not code. It has a small state, derived values
from named functions (fns), and a list of blocks. A model can write a
spec safely, because a spec cannot run code.

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<thead>
<tr>
<th>part</th>
<th>what it is</th>
</tr>
</thead>
<tbody>
<tr>
<td>block</td>
<td>a reusable UI part in <code>rupaka/blocks/&lt;name&gt;/</code>: its
JS, its CSS, a <code>block.json</code> manifest and an example</td>
</tr>
<tr>
<td>fn</td>
<td>a pure function that computes a derived value: <a
href="https://vedicreader.github.io/rupaka/spec.html#rules"><code>rules</code></a>,
<a
href="https://vedicreader.github.io/rupaka/spec.html#rrf"><code>rrf</code></a>,
<a
href="https://vedicreader.github.io/rupaka/spec.html#softmax"><code>softmax</code></a>,
<a
href="https://vedicreader.github.io/rupaka/spec.html#lookup"><code>lookup</code></a>,
<a
href="https://vedicreader.github.io/rupaka/spec.html#expr"><code>expr</code></a>,
<code>ids</code>, <code>pick</code>, <code>sort</code>, <a
href="https://vedicreader.github.io/rupaka/spec.html#fmt"><code>fmt</code></a></td>
</tr>
<tr>
<td>gate</td>
<td>the block that asks for the prediction and hides the result until
the lock in</td>
</tr>
<tr>
<td>spec</td>
<td>the JSON object: <code>state</code>, <code>derive</code>,
<code>blocks</code> and <code>tables</code></td>
</tr>
</tbody>
</table>

The blocks are
[`gate`](https://vedicreader.github.io/rupaka/spec.html#gate),
[`readout`](https://vedicreader.github.io/rupaka/spec.html#readout),
[`caption`](https://vedicreader.github.io/rupaka/spec.html#caption),
[`row`](https://vedicreader.github.io/rupaka/spec.html#row),
[`stack`](https://vedicreader.github.io/rupaka/spec.html#stack),
[`slider`](https://vedicreader.github.io/rupaka/spec.html#slider),
[`toggle`](https://vedicreader.github.io/rupaka/spec.html#toggle),
[`choice`](https://vedicreader.github.io/rupaka/spec.html#choice),
[`wheel`](https://vedicreader.github.io/rupaka/spec.html#wheel),
[`ranklist`](https://vedicreader.github.io/rupaka/spec.html#ranklist),
[`bars`](https://vedicreader.github.io/rupaka/spec.html#bars),
[`axis`](https://vedicreader.github.io/rupaka/spec.html#axis),
[`point`](https://vedicreader.github.io/rupaka/spec.html#point),
[`plot`](https://vedicreader.github.io/rupaka/spec.html#plot) and
[`grid`](https://vedicreader.github.io/rupaka/spec.html#grid).

## Install

``` sh
pip install rupaka
```

The headless check needs playwright: `pip install "rupaka[check]"`. It
uses the Chromium that `playwright install chromium` gives, or the
browser in `$FASTCDP_CHROME`. It never runs your everyday Chrome.

## How to use

Build a spec with the builders, or write the JSON.

``` python
from rupaka.spec import *
```

``` python
d = demo('sum', 'A sum', ask='Predict the sum before you see it.', state=dict(a=2, b=3), derive=[expr('a + b', 'sum')],
         blocks=[gate('s', 'What is {a} + {b}?', [4, 5, 6], 'sum', why='Say why, in one line.'),
                 readout('{a} + {b} = {sum}', after='s')])
```

[`validate`](https://vedicreader.github.io/rupaka/spec.html#validate)
returns the errors. An empty list means the spec is good.

``` python
assert validate(d) == []
```

A readout that shows the sum before the gate breaks the think rule:

``` python
bad = {**d, 'blocks': [d['blocks'][0], readout('{a} + {b} = {sum}')]}
validate(bad)
```

Then put the demo where the learner is:

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<thead>
<tr>
<th>where</th>
<th>how</th>
</tr>
</thead>
<tbody>
<tr>
<td>a notebook (leela, Jupyter)</td>
<td><code>show(spec)</code>: an HTML output in a sandboxed frame, and
the <code>application/vnd.rupaka+json</code> mime</td>
</tr>
<tr>
<td>Markdown</td>
<td><code>md(spec)</code> writes a <code>```rupaka</code> fence;
<code>md(spec, frame=True)</code> writes a frame that leela draws
today</td>
</tr>
<tr>
<td>a FastHTML page</td>
<td><code>Demo(spec)</code> and <code>Assets('/rupaka')</code>; serve
<code>bundle('js')</code> and <code>bundle('css')</code> at that
prefix</td>
</tr>
<tr>
<td>a file</td>
<td><code>save(spec, 'demo.html')</code> writes one page that works from
<code>file://</code> with no network</td>
</tr>
</tbody>
</table>

`check(spec)` draws the demo in headless Chrome and plays it.
`author(concept, ask)` asks a model for a demo, and checks and repairs
it.

## The gallery

`rupaka/demos/` holds hand-made demos: vowel sandhi, reciprocal rank
fusion, softmax and temperature, nakṣatra and pāda, and a parabola.

## Develop

The notebooks in `nbs/` are the source of the Python. The JS and CSS are
hand-written files under `rupaka/static/`, `rupaka/blocks/` and
`rupaka/fns/`.

``` sh
uv sync
uv run nbdev-prepare
uv run pytest
```