tutorial.md

# Tutorial



## Keep separation between "production code" (library / not interactive) & interactivity
- 💡 One of the strength of interactive pipe is to avoid adding hundreds of lines of code dedicated to GUI (graphical user interfaces). 
- With interactive pipe, you have the choice to keep this design choice. Each processing block can be defined as a regular function, without even importing the `interactive` decorator. In a separate file, you'll add sliders.

### Several ways to decorate building blocks


#### 1.Decorate afterward   🏆 *= Recommended approach*
- ➖ Less elegant to read (`add_interactivity` may be in a different file)
- ➕ The decorated function can't be re-used somewhere else.
- ➕ Possibility to add conditions (`debug` flag)
 
```python
def gen_color(frequency=0, isotropy=0.):
    ...


def add_interactivity(debug=True):
    interactive(
        frequency=(80, [1, 100]),
        isotropy=(0.8, [0.1, 1.]) if debug else 0.8
    )(gen_color)
```


#### 2.Decorate using `@`


```python
@interactive(
    frequency=(80, [1, 100]),
    isotropy=(0.8, [0.1, 1.])
)
def gen_color(frequency=0, isotropy=0.):
    ...
```
- ➕ Easy to read
- ➖ The decorated function can't be re-used somewhere else.
- ➖ No possibility to add condition to hide/show slider. To hide the slider, you need to comment!


#### 3. Shorter code using `@`

```python
@interactive()
def gen_color(
    frequency=(80, [1, 100]),
    isotropy=(0.8, [0.1, 1.])
):
```

- ➕ Shortest code
- ➖ The decorated function can't be re-used somewhere else

## Pipeline visualization
Internally, `interactive_pipe` builds an execution graph of the pipeline. 
| pipeline's execution graph |
| :--:| 
| ![Pipeline](/pipeline.png) |

## Backend choice
| 🚀  Qt | 🐢 Gradio |
|:---:|:---:|
| ![QT](pyqt.gif) | ![Gradio](gradio.gif) |