File size: 2,464 Bytes
169b2fd
74f19b4
 
4f6789c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
74f19b4
 
c72cfef
 
 
 
80f08b9
c72cfef
74f19b4
80f08b9
 
 
 
 
 
 
 
 
 
74f19b4
80f08b9
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
# Advice


## 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](https://huggingface.co/spaces/balthou/interactive-pipe-tutorial/resolve/main/pipeline.png) |

## Backend choice
|Backend | πŸš€  `Qt` | 🐒 `Gradio` |
|:---|:---|:---|
| Responsiveness | βž• Very fast | βž– Slower  |
| Shareable | βž– No, only 1 local Qt Window | βž• Share a link with others,  (βž• Optional: standalone hosting on  HF spaces πŸ€— ) |
| Keyboard controls |  βž• Yes | βž– No |
| Full screen |  βž• Yes | βž– No |
| Image compression |  βž• No image compression | βž– Some image compression |


| πŸš€  `Qt` | 🐒 `Gradio` |
|:---:|:---:|
| ![QT](https://huggingface.co/spaces/balthou/interactive-pipe-tutorial/resolve/main/pyqt.gif) | ![Gradio](https://huggingface.co/spaces/balthou/interactive-pipe-tutorial/resolve/main/gradio.gif) |