├── .gitignore
├── LICENSE
├── README.md
├── bin
    ├── extract_data
    │   ├── matrix1-out.csv
    │   ├── matrix1-out.png
    │   ├── matrix1.png
    │   ├── matrix2-out.csv
    │   ├── matrix2-out.png
    │   ├── matrix2.png
    │   └── process.py
    └── include.js
├── package.json
├── public
    ├── _index.html
    ├── assets
    │   ├── NTM-Copy-ReadWrite.png
    │   ├── NTM-Copy-ReadWrite.svg
    │   ├── ShowAttendTell.png
    │   ├── d3.min.js
    │   ├── old-rnn-attention-conv.png
    │   ├── old-rnn-attention-vis1.png
    │   ├── old-rnn-attention-vis2.png
    │   ├── pointer.svg
    │   ├── rnn-attention-waveform-bw.png
    │   ├── rnn.ai
    │   ├── rnn_adaptive_01.svg
    │   ├── rnn_adaptive_02.svg
    │   ├── rnn_adaptive_02_1.svg
    │   ├── rnn_adaptive_02_2.svg
    │   ├── rnn_adaptive_02_3.svg
    │   ├── rnn_adaptive_02_4.svg
    │   ├── rnn_attentional_01.svg
    │   ├── rnn_attentional_02.svg
    │   ├── rnn_attentional_ex1.svg
    │   ├── rnn_attentional_ex2.csv
    │   ├── rnn_attentional_ex2.html
    │   ├── rnn_attentional_ex3.csv
    │   ├── rnn_attentional_ex3.html
    │   ├── rnn_basic_rnn.svg
    │   ├── rnn_memory.svg
    │   ├── rnn_preview_act.svg
    │   ├── rnn_preview_ai.svg
    │   ├── rnn_preview_np.svg
    │   ├── rnn_preview_ntm.svg
    │   ├── rnn_programmer_1.svg
    │   ├── rnn_programmer_2.svg
    │   ├── rnn_programmer_3.svg
    │   ├── rnn_read.svg
    │   ├── rnn_write.html
    │   ├── rnn_write.svg
    │   ├── rnn_write_detail.html
    │   ├── rnn_write_detail.svg
    │   └── show-attend-tell.png
    ├── index.html
    └── thumbnail.jpg
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | build
2 | node_modules
3 | *.DS_Store
4 | logs
5 | *.log
6 | npm-debug.log*
7 | .npm


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Augmented RNNs
2 | 
3 | ## Licenses
4 | 
5 | The content of this Distill article is licensed as [CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/). Code is released under the Apache 2.0 License, even if enclosed inside a notebook or served as part of the interactive article.


--------------------------------------------------------------------------------
/bin/extract_data/matrix1-out.csv:
--------------------------------------------------------------------------------
 1 | 0.50, 0.02, 0.04, 0.00, 0.00, 0.00, 0.00, 0.00, 0.01, 0.01, 0.00, 0.00, 0.00, 0.05, 0.05
 2 | 0.14, 0.89, 0.07, 0.00, 0.00, 0.00, 0.00, 0.00, 0.01, 0.06, 0.00, 0.00, 0.00, 0.02, 0.00
 3 | 0.02, 0.00, 0.56, 0.00, 0.00, 0.00, 0.00, 0.01, 0.00, 0.00, 0.00, 0.00, 0.00, 0.02, 0.00
 4 | 0.00, 0.00, 0.01, 0.61, 0.02, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00
 5 | 0.00, 0.00, 0.02, 0.03, 0.01, 0.21, 0.97, 0.05, 0.00, 0.00, 0.00, 0.00, 0.00, 0.01, 0.00
 6 | 0.00, 0.00, 0.02, 0.07, 0.25, 0.76, 0.02, 0.04, 0.00, 0.00, 0.00, 0.00, 0.00, 0.02, 0.00
 7 | 0.02, 0.04, 0.03, 0.27, 0.71, 0.02, 0.00, 0.02, 0.00, 0.00, 0.02, 0.00, 0.00, 0.05, 0.01
 8 | 0.02, 0.00, 0.07, 0.00, 0.00, 0.00, 0.00, 0.60, 0.40, 0.01, 0.04, 0.00, 0.00, 0.13, 0.01
 9 | 0.13, 0.02, 0.02, 0.00, 0.01, 0.00, 0.00, 0.23, 0.52, 0.91, 0.07, 0.00, 0.00, 0.10, 0.00
10 | 0.04, 0.00, 0.01, 0.00, 0.00, 0.00, 0.00, 0.01, 0.03, 0.00, 0.67, 0.00, 0.00, 0.16, 0.02
11 | 0.02, 0.00, 0.04, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.14, 0.96, 0.00, 0.02, 0.07
12 | 0.02, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.02, 0.02, 1.00, 0.02, 0.03
13 | 0.02, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.01, 0.00, 0.01, 0.00, 0.00, 0.32, 0.11
14 | 0.04, 0.00, 0.08, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.01, 0.00, 0.00, 0.04, 0.67
15 | 


--------------------------------------------------------------------------------
/bin/extract_data/matrix1-out.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/distillpub/post--augmented-rnns/fdc3526167133f5a97cee9e7cb48af293e67d66d/bin/extract_data/matrix1-out.png


--------------------------------------------------------------------------------
/bin/extract_data/matrix1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/distillpub/post--augmented-rnns/fdc3526167133f5a97cee9e7cb48af293e67d66d/bin/extract_data/matrix1.png


--------------------------------------------------------------------------------
/bin/extract_data/matrix2-out.csv:
--------------------------------------------------------------------------------
 1 | 0.01, 0.02, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
 2 | 0.01, 0.02, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
 3 | 0.01, 0.02, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
 4 | 0.01, 0.02, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
 5 | 0.01, 0.02, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
 6 | 0.09, 0.11, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
 7 | 0.78, 0.33, 0.04, 0.02, 0.02, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
 8 | 0.01, 0.05, 0.61, 0.37, 0.78, 0.07, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
 9 | 0.01, 0.01, 0.05, 0.21, 0.07, 0.74, 0.31, 0.00, 0.01, 0.01, 0.01, 0.02, 0.01, 0.02, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
10 | 0.01, 0.01, 0.01, 0.04, 0.02, 0.02, 0.47, 0.98, 0.02, 0.01, 0.01, 0.02, 0.01, 0.02, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
11 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.96, 0.98, 0.28, 0.02, 0.02, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
12 | 0.01, 0.01, 0.01, 0.02, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.40, 0.49, 0.61, 0.30, 0.02, 0.02, 0.01, 0.01, 0.01, 0.02, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
13 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.05, 0.07, 0.09, 0.18, 0.96, 0.89, 0.87, 0.54, 0.02, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
14 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.02, 0.10, 0.05, 0.13, 0.01, 0.03, 0.05, 0.10, 0.14, 0.32, 0.13, 0.01, 0.02, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
15 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.12, 0.60, 0.04, 0.03, 0.02, 0.02, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
16 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.05, 0.41, 0.66, 0.02, 0.02, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
17 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.94, 0.72, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
18 | 0.01, 0.02, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.04, 0.76, 0.02, 0.01, 0.01, 0.01, 0.01, 0.02, 0.01, 0.01, 0.01
19 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.77, 0.45, 0.66, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
20 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.04, 0.01, 0.00, 0.02, 0.13, 0.98, 0.97, 0.02, 0.01, 0.01, 0.01
21 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.09, 0.00, 0.01, 0.01, 0.01, 0.02, 0.90, 0.02, 0.01, 0.01
22 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.08, 0.10, 0.01, 0.01, 0.01, 0.03, 0.96, 0.19, 0.01
23 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.13, 0.02, 0.01, 0.01, 0.01, 0.01, 0.60, 0.18
24 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.02, 0.60
25 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.02
26 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
27 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
28 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
29 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
30 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
31 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
32 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
33 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
34 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
35 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
36 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
37 | 0.01, 0.02, 0.02, 0.02, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
38 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
39 | 


--------------------------------------------------------------------------------
/bin/extract_data/matrix2-out.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/distillpub/post--augmented-rnns/fdc3526167133f5a97cee9e7cb48af293e67d66d/bin/extract_data/matrix2-out.png


--------------------------------------------------------------------------------
/bin/extract_data/matrix2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/distillpub/post--augmented-rnns/fdc3526167133f5a97cee9e7cb48af293e67d66d/bin/extract_data/matrix2.png


--------------------------------------------------------------------------------
/bin/extract_data/process.py:
--------------------------------------------------------------------------------
 1 | # Copyright 2018 Google LLC
 2 | #
 3 | # Licensed under the Apache License, Version 2.0 (the "License");
 4 | # you may not use this file except in compliance with the License.
 5 | # You may obtain a copy of the License at
 6 | #
 7 | #      http://www.apache.org/licenses/LICENSE-2.0
 8 | #
 9 | # Unless required by applicable law or agreed to in writing, software
10 | # distributed under the License is distributed on an "AS IS" BASIS,
11 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | # See the License for the specific language governing permissions and
13 | # limitations under the License.
14 | 
15 | import numpy as np
16 | from scipy import misc
17 | 
18 | name, grid = "matrix1", [15, 14, 3]
19 | #name, grid = "matrix2", [33, 38, 3]
20 | 
21 | arr = misc.imread(name + ".png")
22 | arr = arr.mean(2)
23 | 
24 | Dx = (arr.shape[0]+10)/grid[0]
25 | Dy = (arr.shape[1]+10)/grid[1]
26 | 
27 | print (name + ".png"), "->", (name + "-out.png"), (name + "-out.csv")
28 | 
29 | new_arr = np.zeros(grid)
30 | for x in xrange(grid[0]):
31 |     for y in xrange(grid[1]):
32 |         Ox, Oy = int(0.35*Dx), int(0.35*Dy)
33 |         new_arr[x,y,:] = arr[Dx*x + Ox, Dy*y + Oy]
34 | 
35 | out = misc.imresize(new_arr, [5*Dx,5*Dy,1], interp="nearest")
36 | misc.imsave(name + "-out.png", out)
37 | 
38 | amin = arr.min()
39 | amax = arr.max()
40 | 
41 | with file(name + "-out.csv", "w") as f:
42 |     for y in xrange(grid[1]):
43 |         for x in xrange(grid[0]):
44 |             if x > 0:
45 |                 f.write(", ")
46 |             f.write("%.2f" % (1 - (new_arr[x,y,0] - amin) / (amax-amin)))
47 |         f.write("\n")
48 | 


--------------------------------------------------------------------------------
/bin/include.js:
--------------------------------------------------------------------------------
 1 | // Copyright 2018 Google LLC
 2 | //
 3 | // Licensed under the Apache License, Version 2.0 (the "License");
 4 | // you may not use this file except in compliance with the License.
 5 | // You may obtain a copy of the License at
 6 | //
 7 | //      http://www.apache.org/licenses/LICENSE-2.0
 8 | //
 9 | // Unless required by applicable law or agreed to in writing, software
10 | // distributed under the License is distributed on an "AS IS" BASIS,
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | // See the License for the specific language governing permissions and
13 | // limitations under the License.
14 | 
15 | var fs = require("fs"),
16 |     path = require("path"),
17 |     jsdom = require("jsdom").jsdom,
18 |     serializeDocument = require("jsdom").serializeDocument;
19 | 
20 | let index = jsdom(fs.readFileSync("public/_index.html", "utf8"), {features: {ProcessExternalResources: false, FetchExternalResources: false}});
21 | 
22 | function renderIncludes(dom) {
23 |   let includes = [].slice.apply(dom.querySelectorAll("dt-include"));
24 |   includes.forEach(function(el) {
25 |     let location = el.getAttribute("src");
26 |     let includeText = fs.readFileSync(path.join("public", location), "utf8");
27 |     el.innerHTML = includeText;
28 |     renderIncludes(el);
29 |   });
30 | }
31 | 
32 | renderIncludes(index);
33 | process.stdout.write(serializeDocument(index));
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "main": "index.html",
 3 |   "name": "augmented-rnns",
 4 |   "dependencies": {
 5 |     "d3": "^4.2.2",
 6 |     "jsdom": "^9.9.1"
 7 |   },
 8 |   "scripts": {
 9 |     "build": "node bin/include.js > public/index.html",
10 |     "serve": "python -m SimpleHTTPServer"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/public/assets/NTM-Copy-ReadWrite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/distillpub/post--augmented-rnns/fdc3526167133f5a97cee9e7cb48af293e67d66d/public/assets/NTM-Copy-ReadWrite.png


--------------------------------------------------------------------------------
/public/assets/ShowAttendTell.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/distillpub/post--augmented-rnns/fdc3526167133f5a97cee9e7cb48af293e67d66d/public/assets/ShowAttendTell.png


--------------------------------------------------------------------------------
/public/assets/old-rnn-attention-conv.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/distillpub/post--augmented-rnns/fdc3526167133f5a97cee9e7cb48af293e67d66d/public/assets/old-rnn-attention-conv.png


--------------------------------------------------------------------------------
/public/assets/old-rnn-attention-vis1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/distillpub/post--augmented-rnns/fdc3526167133f5a97cee9e7cb48af293e67d66d/public/assets/old-rnn-attention-vis1.png


--------------------------------------------------------------------------------
/public/assets/old-rnn-attention-vis2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/distillpub/post--augmented-rnns/fdc3526167133f5a97cee9e7cb48af293e67d66d/public/assets/old-rnn-attention-vis2.png


--------------------------------------------------------------------------------
/public/assets/pointer.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27" height="27" viewBox="0 0 27 27">
 2 |   <circle cx="13.43" cy="13.43" r="12.93" fill="none" stroke="#ffdc8c" stroke-miterlimit="10"/>
 3 |   <circle cx="13.43" cy="13.43" r="10.38" fill="#ffb200"/>
 4 |   <polygon points="11.32 19.26 11.32 17.43 10.72 17.43 10.71 16.14 10.1 16.21 10.1 15 9.54 14.99 9.46 13.78 8.88 13.78 8.89 13.16 8.28 13.16 8.28 11.34 10.11 11.34 10.11 11.94 10.71 11.94 10.71 6.46 11.33 6.45 11.33 5.86 12.54 5.86 12.54 6.45 13.16 6.47 13.16 8.89 14.37 8.89 14.39 9.49 16.21 9.51 16.21 10.12 17.43 10.12 17.43 10.79 18.04 10.73 18.05 11.39 18.65 11.33 18.65 15.61 18.04 15.52 17.98 17.43 17.43 17.43 17.43 19.26 11.32 19.26" fill="#fff" opacity="0.2"/>
 5 |   <g>
 6 |     <path d="M10.11,11.94c0-.09,0-0.19,0-0.28s0-.21,0-0.32H8.28v1.82H8.89V11.95h1.23v0.63h0.6v0.6h0.61V13.09q0-2.4,0-4.8,0-.92,0-1.85h1.21V5.85H11.33v0.6H10.71v5.47h-0.6Zm4.28-2.44a0.45,0.45,0,0,1,0-.07c0-.15,0-0.3,0-0.45s0,0,0-.08H13.16V6.47H12.55v5.47h0.61V9.51h1.24s0,0.06,0,.09q0,1.12,0,2.25s0,0.07,0,.1H15V10.12h1.23v2.43h0.6V10.71l0.57,0s0,0,0,.05,0,0.29,0,.44,0,0.07,0,.11H18a0,0,0,0,1,.06.06c0,0.24,0,.48,0,0.72q0,1.71,0,3.41s0,0,0,.08h-0.6s0,0,0,0q0,0.86,0,1.72s0,0,0,.06H16.81v1.21H11.94V17.42H11.33V16.21h-0.6a11.4,11.4,0,0,0,0,1.22h0.6v1.83c2,0,4.07,0,6.11,0,0-.1,0-0.19,0-0.28,0-.46,0-0.93,0-1.39a1.53,1.53,0,0,0,0-.16H18c0.05,0,.07,0,0.07-0.07,0-.45,0-0.89,0-1.34,0-.13,0-0.26,0-0.4l0.3,0h0.3V11.33H18v-0.6H17.43V10.11H16.21V9.51H14.39ZM10.1,15v1.21h0.52a0.07,0.07,0,0,0,.08-0.08c0-.32,0-0.65,0-1,0-.06,0-0.11,0-0.17H10.11V13.77H9.49V13.16H8.91a2.7,2.7,0,0,0,0,.62H9.47s0,0,0,.07,0,0.27,0,.41,0,0.45,0,.68a0,0,0,0,0,.05.06H10.1Z" fill="#fff"/>
 7 |     <path d="M17.43,17.43s0,0,0-.06q0-.86,0-1.72s0,0,0,0H18s0-.06,0-0.08q0-1.71,0-3.41c0-.24,0-0.48,0-0.72A0,0,0,0,0,18,11.33H17.44s0-.07,0-0.11,0-.29,0-0.44,0-.05,0-0.05l-0.57,0v1.84h-0.6V10.12H15v1.82H14.38s0-.07,0-0.1q0-1.12,0-2.25s0-.06,0-0.09h1.81v0.6h1.22v0.62H18v0.6h0.61v4.28h-0.3l-0.3,0c0,0.14,0,.27,0,0.4,0,0.45,0,.89,0,1.34,0,0.05,0,.07-0.07.07H17.43Z" fill="#fff"/>
 8 |     <path d="M17.43,17.43a1.53,1.53,0,0,1,0,.16c0,0.46,0,.93,0,1.39,0,0.09,0,.17,0,0.28-2,0-4.06,0-6.11,0V17.43h-0.6a11.4,11.4,0,0,1,0-1.22h0.6v1.21h0.61v1.22h4.88V17.43h0.62Z" fill="#fff"/>
 9 |     <path d="M11.33,6.45q0,0.92,0,1.85,0,2.4,0,4.8v0.07H10.72v-0.6h-0.6V11.93h0.6V6.46h0.61Z" fill="#fff"/>
10 |     <path d="M14.39,9.49H13.16v2.43H12.55V6.47h0.61V8.89h1.21s0,0.06,0,.08,0,0.3,0,.45a0.44,0.44,0,0,0,0,.07h0Z" fill="#fff"/>
11 |     <path d="M10.1,15H9.54a0,0,0,0,1-.05-0.06c0-.23,0-0.45,0-0.68s0-.27,0-0.41,0,0,0-.07H8.88a2.7,2.7,0,0,1,0-.62H9.49v0.61h0.62V15h0.61c0,0.06,0,.12,0,0.17,0,0.32,0,.65,0,1a0.07,0.07,0,0,1-.08.08H10.1V15Z" fill="#fff"/>
12 |     <path d="M10.11,11.93H8.89v1.21H8.28V11.34h1.83c0,0.11,0,.21,0,0.32s0,0.19,0,.28h0Z" fill="#fff"/>
13 |     <path d="M11.33,6.45V5.85h1.21v0.6H11.33Z" fill="#fff"/>
14 |   </g>
15 | </svg>
16 | 


--------------------------------------------------------------------------------
/public/assets/rnn-attention-waveform-bw.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/distillpub/post--augmented-rnns/fdc3526167133f5a97cee9e7cb48af293e67d66d/public/assets/rnn-attention-waveform-bw.png


--------------------------------------------------------------------------------
/public/assets/rnn.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/distillpub/post--augmented-rnns/fdc3526167133f5a97cee9e7cb48af293e67d66d/public/assets/rnn.ai


--------------------------------------------------------------------------------
/public/assets/rnn_adaptive_02_2.svg:
--------------------------------------------------------------------------------
  1 | <svg id="background" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 744 264">
  2 |   <defs>
  3 |     <symbol id="op-halo" data-name="op-halo" viewBox="0 0 31.45 31.45">
  4 |       <circle cx="15.73" cy="15.73" r="14.73" fill="#e6eaf2" stroke="#fff" stroke-miterlimit="10" stroke-width="2"/>
  5 |     </symbol>
  6 |     <symbol id="op-bg" data-name="op-bg" viewBox="0 0 24 24">
  7 |       <circle cx="12" cy="12" r="11.25" fill="#e0cef5" stroke="#000" stroke-miterlimit="10" stroke-opacity="0.5" stroke-width="1.5"/>
  8 |     </symbol>
  9 |     <symbol id="op-sum_5" data-name="op-sum 5" viewBox="0 0 24 24">
 10 |       <use id="op-bg-3" data-name="op-bg" width="24" height="24" xlink:href="#op-bg"/>
 11 |       <g>
 12 |         <path d="M11,12.65L4.21,15.32V14.26l5.51-2.12L4.21,10V9L11,11.66v1Z" fill="#666"/>
 13 |         <path d="M16.34,11.45H15.48q-0.37,0-.73,0a1.84,1.84,0,0,0-.66.17,1,1,0,0,0-.46.42,1.19,1.19,0,0,0-.21.73,1.13,1.13,0,0,0,.2.67,1.4,1.4,0,0,0,.46.43,2.73,2.73,0,0,0,1.33.3,3,3,0,0,0,1.54-.37,1.66,1.66,0,0,0,.73-1.28H19a2.55,2.55,0,0,1-1.09,2.09,4,4,0,0,1-2.32.7,7.39,7.39,0,0,1-1.28-.11,4.23,4.23,0,0,1-1.17-.38A2.21,2.21,0,0,1,12,12.79a1.72,1.72,0,0,1,.55-1.3,2.33,2.33,0,0,1,1.2-.66v0a2.71,2.71,0,0,1-1.07-.69A1.56,1.56,0,0,1,12.24,9a1.8,1.8,0,0,1,.3-1,2,2,0,0,1,.74-0.69,4.19,4.19,0,0,1,2-.52,4.65,4.65,0,0,1,2.34.55,2.37,2.37,0,0,1,1.05,2H17.36a1.21,1.21,0,0,0-.64-1.15,3.21,3.21,0,0,0-1.36-.29,2.53,2.53,0,0,0-1.1.24,1,1,0,0,0-.58,1,1,1,0,0,0,.58,1,2.79,2.79,0,0,0,1.2.22h0.88v1.16Z" fill="#666"/>
 14 |       </g>
 15 |     </symbol>
 16 |     <symbol id="op-sum_4" data-name="op-sum 4" viewBox="0 0 24 24">
 17 |       <use id="op-bg-6" data-name="op-bg" width="24" height="24" xlink:href="#op-bg"/>
 18 |       <path d="M7.51,11.21h9v1.15h-9V11.21Z" fill="#666"/>
 19 |     </symbol>
 20 |     <symbol id="op-sum_3" data-name="op-sum 3" viewBox="0 0 24 24">
 21 |       <use id="op-bg-9" data-name="op-bg" width="24" height="24" xlink:href="#op-bg"/>
 22 |       <path d="M9.65,10V9.21a4.3,4.3,0,0,0,1.59-.37,1.83,1.83,0,0,0,.67-1.23h0.83V16H11.62V10h-2Z" fill="#666"/>
 23 |     </symbol>
 24 |     <symbol id="op-x" data-name="op-x" viewBox="0 0 24 24">
 25 |       <use id="op-bg-18" data-name="op-bg" width="24" height="24" xlink:href="#op-bg"/>
 26 |       <path d="M9.16,15.28l-1-1,2.56-2.56L8.16,9.16l1-1,2.58,2.58L14.3,8.17l1,1-2.56,2.56,2.57,2.57-1,1-2.57-2.57Z" fill="#666"/>
 27 |     </symbol>
 28 |     <symbol id="rnn-bg" data-name="rnn-bg" viewBox="0 0 49.5 49.5">
 29 |       <rect x="0.75" y="0.75" width="48" height="48" rx="6" ry="6" fill="#fff" fill-opacity="0.8" stroke="#666" stroke-width="1.5"/>
 30 |     </symbol>
 31 |     <symbol id="rnn-s" data-name="rnn-s" viewBox="0 0 49.5 49.5">
 32 |       <use id="rnn-bg-3" data-name="rnn-bg" width="49.5" height="49.5" xlink:href="#rnn-bg"/>
 33 |       <path d="M29.68,27.61a3.81,3.81,0,0,1-1.49,3.2,6.46,6.46,0,0,1-4,1.15,10.1,10.1,0,0,1-4.25-.71V29.51a11.16,11.16,0,0,0,2.08.64,10.92,10.92,0,0,0,2.23.23,4.49,4.49,0,0,0,2.72-.69,2.25,2.25,0,0,0,.92-1.91,2.45,2.45,0,0,0-.32-1.32,3,3,0,0,0-1.08-1,15.14,15.14,0,0,0-2.31-1A7.38,7.38,0,0,1,21,22.68a4.06,4.06,0,0,1-.93-2.77A3.45,3.45,0,0,1,21.45,17,5.61,5.61,0,0,1,25,16a10.54,10.54,0,0,1,4.26.85l-0.56,1.57A9.63,9.63,0,0,0,25,17.6a3.62,3.62,0,0,0-2.24.62,2,2,0,0,0-.81,1.71,2.62,2.62,0,0,0,.3,1.32,2.8,2.8,0,0,0,1,.95,12.47,12.47,0,0,0,2.16,1A8.56,8.56,0,0,1,28.76,25,3.68,3.68,0,0,1,29.68,27.61Z" fill="#5b5b5b"/>
 34 |     </symbol>
 35 |     <symbol id="op-sum_2" data-name="op-sum 2" viewBox="0 0 24 24">
 36 |       <use width="24" height="24" xlink:href="#op-bg"/>
 37 |       <path d="M9.88,9.08a1.77,1.77,0,0,1,.69-1.47,3,3,0,0,1,1.89-.54,4.84,4.84,0,0,1,1.87.38v1.1a5.22,5.22,0,0,0-1.88-.4,1.57,1.57,0,0,0-.93.25,0.78,0.78,0,0,0-.35.67q0,0.74,1.51,1.26a4.6,4.6,0,0,1,2.22,1.44A3.75,3.75,0,0,1,15.64,14v0.27a4.23,4.23,0,0,1-.4,1.87,3,3,0,0,1-1.15,1.28,3.29,3.29,0,0,1-1.74.45,3.08,3.08,0,0,1-2.42-1A3.86,3.86,0,0,1,9,14.22V14.13a3.42,3.42,0,0,1,.64-2A2.76,2.76,0,0,1,11.29,11v0a2.36,2.36,0,0,1-1-.75A1.76,1.76,0,0,1,9.88,9.08Zm0.42,5.2a3,3,0,0,0,.55,1.89,1.8,1.8,0,0,0,1.49.69,1.79,1.79,0,0,0,1.48-.69,3.23,3.23,0,0,0,.55-2,2.67,2.67,0,0,0-.58-1.67,2.35,2.35,0,0,0-1.43-.92,1.81,1.81,0,0,0-1.49.7A3.19,3.19,0,0,0,10.3,14.28Z" fill="#666"/>
 38 |     </symbol>
 39 |     <symbol id="rnn-sigma" data-name="rnn-sigma" viewBox="0 0 25.17 25.17">
 40 |       <rect x="0.75" y="0.75" width="23.67" height="23.67" rx="6" ry="6" fill="#f0f0f5" stroke="#666" stroke-width="1.5"/>
 41 |       <path d="M19,8.67H16.48a5.39,5.39,0,0,1,1.41,3.87,6.62,6.62,0,0,1-1.37,4.36,5.13,5.13,0,0,1-4.11,1.73,5,5,0,0,1-4.09-1.78,6.66,6.66,0,0,1-1.37-4.32,5.73,5.73,0,0,1,1.5-4.07,5.22,5.22,0,0,1,4-1.58,6.18,6.18,0,0,1,1.67.21H19V8.67ZM15.8,12.78a5.89,5.89,0,0,0-.74-2.92,2.87,2.87,0,0,0-2.65-1.41A2.86,2.86,0,0,0,9.8,9.79a5.53,5.53,0,0,0-.77,3,4.82,4.82,0,0,0,.91,3,2.89,2.89,0,0,0,2.47,1.26A2.88,2.88,0,0,0,15,15.74,5.37,5.37,0,0,0,15.8,12.78Z" fill="#666"/>
 42 |     </symbol>
 43 |     <symbol id="op-sum" data-name="op-sum" viewBox="0 0 24 24">
 44 |       <use id="op-bg-32" data-name="op-bg" width="24" height="24" xlink:href="#op-bg"/>
 45 |       <path d="M7.88,12.5V11.18h3.41V7.75h1.34v3.43H16V12.5H12.62v3.42H11.29V12.5H7.88Z" fill="#666"/>
 46 |     </symbol>
 47 |   </defs>
 48 |   <title>rnn</title>
 49 |   <rect x="48" y="13.25" width="612" height="238.75" rx="10" ry="10" fill="#f0f0f5"/>
 50 |   <line x1="228" y1="39" x2="228" y2="264" stroke="#fff" stroke-miterlimit="10" stroke-width="1.5"/>
 51 |   <line x1="420" y1="39" x2="420" y2="264" stroke="#fff" stroke-miterlimit="10" stroke-width="1.5"/>
 52 |   <line x1="612" y1="39" x2="612" y2="264" stroke="#fff" stroke-miterlimit="10" stroke-width="1.5"/>
 53 |   <g opacity="0.6">
 54 |     <text transform="translate(6 114)" font-size="13" font-family="Open Sans">halting neuron</text>
 55 |   </g>
 56 |   <g opacity="0.6">
 57 |     <g>
 58 |       <line x1="72" y1="120" x2="72.71" y2="120.71" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="0.5"/>
 59 |       <line x1="74.22" y1="122.22" x2="82.54" y2="130.54" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="0.5" stroke-dasharray="2.14 2.14"/>
 60 |       <polyline points="83.29 131.29 84 132 85 132" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="0.5"/>
 61 |       <line x1="87" y1="132" x2="130" y2="132" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="0.5" stroke-dasharray="2 2"/>
 62 |       <line x1="131" y1="132" x2="132" y2="132" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="0.5"/>
 63 |     </g>
 64 |   </g>
 65 |   <g opacity="0.2">
 66 |     <g>
 67 |       <path d="M276,240H473.5a6,6,0,0,0,6-6V206" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 68 |       <polygon points="483.18 208.96 482.52 209.57 479.5 206.32 476.48 209.57 475.82 208.96 479.5 205 483.18 208.96" fill="#666"/>
 69 |     </g>
 70 |     <g>
 71 |       <path d="M287.5,206.14V234a6,6,0,0,1-6,6H102a6,6,0,0,0-6,6v18h0V204" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 72 |       <polygon points="283.21 209.62 283.98 210.33 287.5 206.54 291.02 210.33 291.79 209.62 287.5 205 283.21 209.62" fill="#666"/>
 73 |     </g>
 74 |     <g>
 75 |       <line x1="120" y1="180" x2="263.02" y2="180" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 76 |       <polygon points="260.04 183.68 259.43 183.02 262.68 180 259.43 176.98 260.04 176.32 264 180 260.04 183.68" fill="#666"/>
 77 |     </g>
 78 |     <g>
 79 |       <line x1="312" y1="180" x2="455.02" y2="180" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 80 |       <polygon points="452.04 183.68 451.43 183.02 454.68 180 451.43 176.98 452.04 176.32 456 180 452.04 183.68" fill="#666"/>
 81 |     </g>
 82 |     <g>
 83 |       <path d="M312,180h18a6,6,0,0,0,6-6V145" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 84 |       <polygon points="339.68 147.96 339.02 148.57 336 145.32 332.98 148.57 332.32 147.96 336 144 339.68 147.96" fill="#666"/>
 85 |     </g>
 86 |     <g>
 87 |       <path d="M504,180h18a6,6,0,0,0,6-6V145" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 88 |       <polygon points="531.68 147.96 531.02 148.57 528 145.32 524.98 148.57 524.32 147.96 528 144 531.68 147.96" fill="#666"/>
 89 |     </g>
 90 |     <path d="M312,180h54a6,6,0,0,0,6-6V108" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 91 |     <path d="M504,180h54a6,6,0,0,0,6-6V108" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 92 |     <g>
 93 |       <line x1="144" y1="132" x2="144" y2="60.97" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 94 |       <polygon points="147.68 63.96 147.02 64.57 144 61.32 140.98 64.57 140.32 63.96 144 60 147.68 63.96" fill="#666"/>
 95 |     </g>
 96 |     <g>
 97 |       <line x1="336" y1="66.25" x2="336" y2="60.97" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 98 |       <polygon points="339.68 63.96 339.02 64.57 336 61.32 332.98 64.57 332.32 63.96 336 60 339.68 63.96" fill="#666"/>
 99 |     </g>
100 |     <line x1="336" y1="132" x2="336" y2="73.25" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
101 |     <g>
102 |       <line x1="528" y1="66" x2="528" y2="60.97" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
103 |       <polygon points="531.68 63.96 531.02 64.57 528 61.32 524.98 64.57 524.32 63.96 528 60 531.68 63.96" fill="#666"/>
104 |     </g>
105 |     <line x1="528" y1="132" x2="528" y2="77" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
106 |     <g>
107 |       <path d="M336,132V102a6,6,0,0,1,6-6h17" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
108 |       <polygon points="356.04 99.68 355.43 99.02 358.68 96 355.43 92.98 356.04 92.32 360 96 356.04 99.68" fill="#666"/>
109 |     </g>
110 |     <path d="M372,84V78.75c0-2.89,2.7-5.25,6-5.25H636" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
111 |     <path d="M564,95V83.5a6,6,0,0,1,6-6h66" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
112 |     <line x1="108" y1="48" x2="528" y2="48" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
113 |     <g>
114 |       <path d="M144,48.5h18a16.83,16.83,0,0,0,10.26-4.22L188,28.72a16.83,16.83,0,0,1,10.26-4.22H212" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
115 |       <polygon points="209.04 28.18 208.43 27.52 211.68 24.5 208.43 21.48 209.04 20.82 213 24.5 209.04 28.18" fill="#666"/>
116 |     </g>
117 |     <g>
118 |       <path d="M336,48h18a17.11,17.11,0,0,0,10.31-4.18l15.63-15.15a17.11,17.11,0,0,1,10.31-4.18H404" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
119 |       <polygon points="401.04 28.18 400.43 27.52 403.68 24.5 400.43 21.48 401.04 20.82 405 24.5 401.04 28.18" fill="#666"/>
120 |     </g>
121 |     <g>
122 |       <path d="M528,48.5h18a16.83,16.83,0,0,0,10.26-4.22L572,28.72a16.83,16.83,0,0,1,10.26-4.22H596" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
123 |       <polygon points="593.04 28.18 592.43 27.52 595.68 24.5 592.43 21.48 593.04 20.82 597 24.5 593.04 28.18" fill="#666"/>
124 |     </g>
125 |     <g>
126 |       <line x1="532" y1="96" x2="551.02" y2="96.16" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
127 |       <polygon points="548.01 99.81 547.4 99.15 550.68 96.15 547.45 93.11 548.07 92.45 552 96.17 548.01 99.81" fill="#666"/>
128 |     </g>
129 |     <path d="M492,76.5V90a6,6,0,0,0,6,6h26" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
130 |     <path d="M456,48h30a6,6,0,0,1,6,6V65" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
131 |     <use id="op-halo-3" data-name="op-halo" width="31.45" height="31.45" transform="translate(212.94 9.11)" xlink:href="#op-halo"/>
132 |     <use id="op-halo-6" data-name="op-halo" width="31.45" height="31.45" transform="translate(404.94 9.11)" xlink:href="#op-halo"/>
133 |     <use id="op-halo-9" data-name="op-halo" width="31.45" height="31.45" transform="translate(596.94 9.11)" xlink:href="#op-halo"/>
134 |     <use width="24" height="24" transform="translate(216.75 12.75)" xlink:href="#op-sum_5"/>
135 |     <use width="24" height="24" transform="translate(132.75 36.09)" xlink:href="#op-sum_4"/>
136 |     <use width="24" height="24" transform="translate(83.25 36.75)" xlink:href="#op-sum_3"/>
137 |     <use width="24" height="24" transform="translate(408.74 12.75)" xlink:href="#op-sum_5"/>
138 |     <use width="24" height="24" transform="translate(324.74 36.09)" xlink:href="#op-sum_4"/>
139 |     <use width="24" height="24" transform="translate(360.01 83.25)" xlink:href="#op-x"/>
140 |     <use width="49.5" height="49.5" transform="translate(263.24 155.25)" xlink:href="#rnn-s"/>
141 |     <use width="24" height="24" transform="translate(600.74 12.75)" xlink:href="#op-sum_5"/>
142 |     <use width="24" height="24" transform="translate(515.74 36.09)" xlink:href="#op-sum_4"/>
143 |     <use id="op-x-5" data-name="op-x" width="24" height="24" transform="translate(552 83.25)" xlink:href="#op-x"/>
144 |     <use width="49.5" height="49.5" transform="translate(455.24 155.25)" xlink:href="#rnn-s"/>
145 |     <use width="24" height="24" transform="translate(83.75 212.25)" xlink:href="#op-sum_2"/>
146 |     <use id="rnn-sigma-3" data-name="rnn-sigma" width="25.17" height="25.17" transform="translate(323.58 118.58)" xlink:href="#rnn-sigma"/>
147 |     <use id="rnn-sigma-6" data-name="rnn-sigma" width="25.17" height="25.17" transform="translate(515.58 118.58)" xlink:href="#rnn-sigma"/>
148 |   </g>
149 |   <path d="M120,180h54a6,6,0,0,0,6-6V108" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
150 |   <g>
151 |     <line x1="36" y1="180" x2="66.57" y2="180" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
152 |     <path d="M72,180a27.2,27.2,0,0,0-7.69,4.28L65.86,180l-1.55-4.28A27.18,27.18,0,0,0,72,180Z" fill="#666"/>
153 |   </g>
154 |   <g>
155 |     <line x1="642" y1="73" x2="666.57" y2="73" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
156 |     <path d="M672,73a27.2,27.2,0,0,0-7.69,4.28L665.86,73l-1.55-4.28A27.17,27.17,0,0,0,672,73Z" fill="#666"/>
157 |   </g>
158 |   <g>
159 |     <path d="M120,180h18a6,6,0,0,0,6-6V149.43" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
160 |     <path d="M144,144a27.2,27.2,0,0,0,4.28,7.69L144,150.14l-4.28,1.55A27.17,27.17,0,0,0,144,144Z" fill="#666"/>
161 |   </g>
162 |   <g>
163 |     <path d="M144,132V102a6,6,0,0,1,6-6h12.57" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
164 |     <path d="M168,96a27.2,27.2,0,0,0-7.69,4.28L161.86,96l-1.55-4.28A27.17,27.17,0,0,0,168,96Z" fill="#666"/>
165 |   </g>
166 |   <path d="M179.49,84V75.5a6,6,0,0,1,6-6H636" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
167 |   <g id="_Group_" data-name="&lt;Group&gt;">
168 |     <g opacity="0.1">
169 |       <circle cx="637.75" cy="75" r="11.25"/>
170 |       <circle cx="637.75" cy="75" r="11.25" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5" opacity="0.5"/>
171 |       <path d="M633.63,75.49V74.18H637V70.75h1.34v3.43h3.41v1.31h-3.41v3.42H637V75.49h-3.41Z"/>
172 |     </g>
173 |     <use width="24" height="24" transform="translate(624.75 61)" xlink:href="#op-sum"/>
174 |   </g>
175 |   <g>
176 |     <g opacity="0.1">
177 |       <circle cx="181" cy="97.25" r="11.25"/>
178 |       <circle cx="181" cy="97.25" r="11.25" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5" opacity="0.5"/>
179 |       <path d="M178.16,100.53l-1-1L179.73,97l-2.58-2.58,1-1L180.74,96l2.56-2.56,1,1L181.72,97l2.57,2.57-1,1L180.72,98Z"/>
180 |     </g>
181 |     <use width="24" height="24" transform="translate(168 83.25)" xlink:href="#op-x"/>
182 |   </g>
183 |   <g>
184 |     <g opacity="0.1">
185 |       <rect x="73" y="158" width="48" height="48" rx="6" ry="6" opacity="0.8"/>
186 |       <rect x="73" y="158" width="48" height="48" rx="6" ry="6" fill="none" stroke="#000" stroke-width="1.5"/>
187 |       <rect x="73" y="158" width="48" height="48" rx="6" ry="6" fill="none" stroke="#000" stroke-width="1.5"/>
188 |       <rect x="73" y="158" width="48" height="48" rx="6" ry="6" fill="none" stroke="#000" stroke-width="1.5"/>
189 |       <path d="M101.93,184.86a3.81,3.81,0,0,1-1.49,3.2,6.46,6.46,0,0,1-4,1.15,10.1,10.1,0,0,1-4.25-.71v-1.74a11.16,11.16,0,0,0,2.08.64,10.92,10.92,0,0,0,2.23.23,4.49,4.49,0,0,0,2.72-.69,2.25,2.25,0,0,0,.92-1.91,2.45,2.45,0,0,0-.32-1.32,3,3,0,0,0-1.08-1,15.14,15.14,0,0,0-2.31-1,7.38,7.38,0,0,1-3.1-1.84,4.06,4.06,0,0,1-.93-2.77,3.45,3.45,0,0,1,1.35-2.86,5.61,5.61,0,0,1,3.57-1.06,10.54,10.54,0,0,1,4.26.85L101,175.66a9.63,9.63,0,0,0-3.74-.81,3.62,3.62,0,0,0-2.24.62,2,2,0,0,0-.81,1.71,2.62,2.62,0,0,0,.3,1.32,2.8,2.8,0,0,0,1,.95,12.47,12.47,0,0,0,2.16,1,8.56,8.56,0,0,1,3.37,1.87A3.68,3.68,0,0,1,101.93,184.86Z"/>
190 |     </g>
191 |     <use width="49.5" height="49.5" transform="translate(71.25 155.25)" xlink:href="#rnn-s"/>
192 |   </g>
193 |   <g id="_Group_2" data-name="&lt;Group&gt;">
194 |     <g opacity="0.1">
195 |       <rect x="133.33" y="121.33" width="23.67" height="23.67" rx="6" ry="6" stroke="#000" stroke-width="1.5"/>
196 |       <path d="M151.54,129.25h-2.48a5.39,5.39,0,0,1,1.41,3.87,6.62,6.62,0,0,1-1.37,4.36,5.13,5.13,0,0,1-4.11,1.73,5,5,0,0,1-4.09-1.78,6.66,6.66,0,0,1-1.37-4.32A5.73,5.73,0,0,1,141,129a5.22,5.22,0,0,1,4-1.58,6.18,6.18,0,0,1,1.67.21h4.88v1.57Zm-3.16,4.11a5.89,5.89,0,0,0-.74-2.92,3.2,3.2,0,0,0-5.26-.06,5.53,5.53,0,0,0-.77,3,4.82,4.82,0,0,0,.91,3,3.11,3.11,0,0,0,5.05-.06A5.37,5.37,0,0,0,148.39,133.37Z"/>
197 |     </g>
198 |     <use width="25.17" height="25.17" transform="translate(131.58 118.58)" xlink:href="#rnn-sigma"/>
199 |   </g>
200 | </svg>
201 | 


--------------------------------------------------------------------------------
/public/assets/rnn_adaptive_02_3.svg:
--------------------------------------------------------------------------------
  1 | <svg id="background" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 744 276">
  2 |   <defs>
  3 |     <symbol id="op-bg" data-name="op-bg" viewBox="0 0 24 24">
  4 |       <circle cx="12" cy="12" r="11.25" fill="#e0cef5" stroke="#000" stroke-miterlimit="10" stroke-opacity="0.5" stroke-width="1.5"/>
  5 |     </symbol>
  6 |     <symbol id="op-sum" data-name="op-sum" viewBox="0 0 24 24">
  7 |       <use id="op-bg-3" data-name="op-bg" width="24" height="24" xlink:href="#op-bg"/>
  8 |       <path d="M7.88,12.5V11.18h3.41V7.75h1.34v3.43H16V12.5H12.62v3.42H11.29V12.5H7.88Z" fill="#666"/>
  9 |     </symbol>
 10 |     <symbol id="op-x" data-name="op-x" viewBox="0 0 24 24">
 11 |       <use id="op-bg-6" data-name="op-bg" width="24" height="24" xlink:href="#op-bg"/>
 12 |       <path d="M9.16,15.28l-1-1,2.56-2.56L8.16,9.16l1-1,2.58,2.58L14.3,8.17l1,1-2.56,2.56,2.57,2.57-1,1-2.57-2.57Z" fill="#666"/>
 13 |     </symbol>
 14 |     <symbol id="rnn-bg" data-name="rnn-bg" viewBox="0 0 49.5 49.5">
 15 |       <rect x="0.75" y="0.75" width="48" height="48" rx="6" ry="6" fill="#fff" fill-opacity="0.8" stroke="#666" stroke-width="1.5"/>
 16 |     </symbol>
 17 |     <symbol id="rnn-s" data-name="rnn-s" viewBox="0 0 49.5 49.5">
 18 |       <use id="rnn-bg-3" data-name="rnn-bg" width="49.5" height="49.5" xlink:href="#rnn-bg"/>
 19 |       <path d="M29.68,27.61a3.81,3.81,0,0,1-1.49,3.2,6.46,6.46,0,0,1-4,1.15,10.1,10.1,0,0,1-4.25-.71V29.51a11.16,11.16,0,0,0,2.08.64,10.92,10.92,0,0,0,2.23.23,4.49,4.49,0,0,0,2.72-.69,2.25,2.25,0,0,0,.92-1.91,2.45,2.45,0,0,0-.32-1.32,3,3,0,0,0-1.08-1,15.14,15.14,0,0,0-2.31-1A7.38,7.38,0,0,1,21,22.68a4.06,4.06,0,0,1-.93-2.77A3.45,3.45,0,0,1,21.45,17,5.61,5.61,0,0,1,25,16a10.54,10.54,0,0,1,4.26.85l-0.56,1.57A9.63,9.63,0,0,0,25,17.6a3.62,3.62,0,0,0-2.24.62,2,2,0,0,0-.81,1.71,2.62,2.62,0,0,0,.3,1.32,2.8,2.8,0,0,0,1,.95,12.47,12.47,0,0,0,2.16,1A8.56,8.56,0,0,1,28.76,25,3.68,3.68,0,0,1,29.68,27.61Z" fill="#5b5b5b"/>
 20 |     </symbol>
 21 |     <symbol id="op-sum_2" data-name="op-sum 2" viewBox="0 0 24 24">
 22 |       <use width="24" height="24" xlink:href="#op-bg"/>
 23 |       <path d="M9.88,9.08a1.77,1.77,0,0,1,.69-1.47,3,3,0,0,1,1.89-.54,4.84,4.84,0,0,1,1.87.38v1.1a5.22,5.22,0,0,0-1.88-.4,1.57,1.57,0,0,0-.93.25,0.78,0.78,0,0,0-.35.67q0,0.74,1.51,1.26a4.6,4.6,0,0,1,2.22,1.44A3.75,3.75,0,0,1,15.64,14v0.27a4.23,4.23,0,0,1-.4,1.87,3,3,0,0,1-1.15,1.28,3.29,3.29,0,0,1-1.74.45,3.08,3.08,0,0,1-2.42-1A3.86,3.86,0,0,1,9,14.22V14.13a3.42,3.42,0,0,1,.64-2A2.76,2.76,0,0,1,11.29,11v0a2.36,2.36,0,0,1-1-.75A1.76,1.76,0,0,1,9.88,9.08Zm0.42,5.2a3,3,0,0,0,.55,1.89,1.8,1.8,0,0,0,1.49.69,1.79,1.79,0,0,0,1.48-.69,3.23,3.23,0,0,0,.55-2,2.67,2.67,0,0,0-.58-1.67,2.35,2.35,0,0,0-1.43-.92,1.81,1.81,0,0,0-1.49.7A3.19,3.19,0,0,0,10.3,14.28Z" fill="#666"/>
 24 |     </symbol>
 25 |     <symbol id="op-halo" data-name="op-halo" viewBox="0 0 31.45 31.45">
 26 |       <circle cx="15.73" cy="15.73" r="14.73" fill="#e6eaf2" stroke="#fff" stroke-miterlimit="10" stroke-width="2"/>
 27 |     </symbol>
 28 |     <symbol id="op-sum_5" data-name="op-sum 5" viewBox="0 0 24 24">
 29 |       <use id="op-bg-17" data-name="op-bg" width="24" height="24" xlink:href="#op-bg"/>
 30 |       <g>
 31 |         <path d="M11,12.65L4.21,15.32V14.26l5.51-2.12L4.21,10V9L11,11.66v1Z" fill="#666"/>
 32 |         <path d="M16.34,11.45H15.48q-0.37,0-.73,0a1.84,1.84,0,0,0-.66.17,1,1,0,0,0-.46.42,1.19,1.19,0,0,0-.21.73,1.13,1.13,0,0,0,.2.67,1.4,1.4,0,0,0,.46.43,2.73,2.73,0,0,0,1.33.3,3,3,0,0,0,1.54-.37,1.66,1.66,0,0,0,.73-1.28H19a2.55,2.55,0,0,1-1.09,2.09,4,4,0,0,1-2.32.7,7.39,7.39,0,0,1-1.28-.11,4.23,4.23,0,0,1-1.17-.38A2.21,2.21,0,0,1,12,12.79a1.72,1.72,0,0,1,.55-1.3,2.33,2.33,0,0,1,1.2-.66v0a2.71,2.71,0,0,1-1.07-.69A1.56,1.56,0,0,1,12.24,9a1.8,1.8,0,0,1,.3-1,2,2,0,0,1,.74-0.69,4.19,4.19,0,0,1,2-.52,4.65,4.65,0,0,1,2.34.55,2.37,2.37,0,0,1,1.05,2H17.36a1.21,1.21,0,0,0-.64-1.15,3.21,3.21,0,0,0-1.36-.29,2.53,2.53,0,0,0-1.1.24,1,1,0,0,0-.58,1,1,1,0,0,0,.58,1,2.79,2.79,0,0,0,1.2.22h0.88v1.16Z" fill="#666"/>
 33 |       </g>
 34 |     </symbol>
 35 |     <symbol id="op-sum_3" data-name="op-sum 3" viewBox="0 0 24 24">
 36 |       <use id="op-bg-20" data-name="op-bg" width="24" height="24" xlink:href="#op-bg"/>
 37 |       <path d="M9.65,10V9.21a4.3,4.3,0,0,0,1.59-.37,1.83,1.83,0,0,0,.67-1.23h0.83V16H11.62V10h-2Z" fill="#666"/>
 38 |     </symbol>
 39 |     <symbol id="op-sum_4" data-name="op-sum 4" viewBox="0 0 24 24">
 40 |       <use id="op-bg-29" data-name="op-bg" width="24" height="24" xlink:href="#op-bg"/>
 41 |       <path d="M7.51,11.21h9v1.15h-9V11.21Z" fill="#666"/>
 42 |     </symbol>
 43 |     <symbol id="rnn-sigma" data-name="rnn-sigma" viewBox="0 0 25.17 25.17">
 44 |       <rect x="0.75" y="0.75" width="23.67" height="23.67" rx="6" ry="6" fill="#f0f0f5" stroke="#666" stroke-width="1.5"/>
 45 |       <path d="M19,8.67H16.48a5.39,5.39,0,0,1,1.41,3.87,6.62,6.62,0,0,1-1.37,4.36,5.13,5.13,0,0,1-4.11,1.73,5,5,0,0,1-4.09-1.78,6.66,6.66,0,0,1-1.37-4.32,5.73,5.73,0,0,1,1.5-4.07,5.22,5.22,0,0,1,4-1.58,6.18,6.18,0,0,1,1.67.21H19V8.67ZM15.8,12.78a5.89,5.89,0,0,0-.74-2.92,2.87,2.87,0,0,0-2.65-1.41A2.86,2.86,0,0,0,9.8,9.79a5.53,5.53,0,0,0-.77,3,4.82,4.82,0,0,0,.91,3,2.89,2.89,0,0,0,2.47,1.26A2.88,2.88,0,0,0,15,15.74,5.37,5.37,0,0,0,15.8,12.78Z" fill="#666"/>
 46 |     </symbol>
 47 |   </defs>
 48 |   <title>rnn</title>
 49 |   <rect x="48" y="21.25" width="612" height="238.75" rx="10" ry="10" fill="#f0f0f5"/>
 50 |   <line x1="228" y1="47" x2="228" y2="272" stroke="#fff" stroke-miterlimit="10" stroke-width="1.5"/>
 51 |   <line x1="420" y1="47" x2="420" y2="272" stroke="#fff" stroke-miterlimit="10" stroke-width="1.5"/>
 52 |   <line x1="612" y1="47" x2="612" y2="272" stroke="#fff" stroke-miterlimit="10" stroke-width="1.5"/>
 53 |   <g opacity="0.2">
 54 |     <g>
 55 |       <path d="M276,248H473.5a6,6,0,0,0,6-6V214" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 56 |       <polygon points="483.18 216.96 482.52 217.57 479.5 214.32 476.48 217.57 475.82 216.96 479.5 213 483.18 216.96" fill="#666"/>
 57 |     </g>
 58 |     <g>
 59 |       <path d="M287.5,214.14V242a6,6,0,0,1-6,6H102a6,6,0,0,0-6,6v18h0V212" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 60 |       <polygon points="283.21 217.62 283.98 218.33 287.5 214.54 291.02 218.33 291.79 217.62 287.5 213 283.21 217.62" fill="#666"/>
 61 |     </g>
 62 |     <g>
 63 |       <line x1="36" y1="188" x2="71.02" y2="188" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 64 |       <polygon points="68.04 191.68 67.43 191.02 70.68 188 67.43 184.98 68.04 184.32 72 188 68.04 191.68" fill="#666"/>
 65 |     </g>
 66 |     <g>
 67 |       <line x1="642" y1="81" x2="671.02" y2="81" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 68 |       <polygon points="668.04 84.68 667.43 84.02 670.68 81 667.43 77.98 668.04 77.32 672 81 668.04 84.68" fill="#666"/>
 69 |     </g>
 70 |     <g>
 71 |       <line x1="120" y1="188" x2="263.02" y2="188" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 72 |       <polygon points="260.04 191.68 259.43 191.02 262.68 188 259.43 184.98 260.04 184.32 264 188 260.04 191.68" fill="#666"/>
 73 |     </g>
 74 |     <g>
 75 |       <line x1="312" y1="188" x2="455.02" y2="188" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 76 |       <polygon points="452.04 191.68 451.43 191.02 454.68 188 451.43 184.98 452.04 184.32 456 188 452.04 191.68" fill="#666"/>
 77 |     </g>
 78 |     <g>
 79 |       <path d="M120,188h18a6,6,0,0,0,6-6V153" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 80 |       <polygon points="147.68 155.96 147.02 156.57 144 153.32 140.98 156.57 140.32 155.96 144 152 147.68 155.96" fill="#666"/>
 81 |     </g>
 82 |     <g>
 83 |       <path d="M312,188h18a6,6,0,0,0,6-6V153" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 84 |       <polygon points="339.68 155.96 339.02 156.57 336 153.32 332.98 156.57 332.32 155.96 336 152 339.68 155.96" fill="#666"/>
 85 |     </g>
 86 |     <g>
 87 |       <path d="M504,188h18a6,6,0,0,0,6-6V153" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 88 |       <polygon points="531.68 155.96 531.02 156.57 528 153.32 524.98 156.57 524.32 155.96 528 152 531.68 155.96" fill="#666"/>
 89 |     </g>
 90 |     <path d="M120,188h54a6,6,0,0,0,6-6V116" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 91 |     <path d="M312,188h54a6,6,0,0,0,6-6V116" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 92 |     <path d="M504,188h54a6,6,0,0,0,6-6V116" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 93 |     <g>
 94 |       <path d="M144,140V110a6,6,0,0,1,6-6h17" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 95 |       <polygon points="164.04 107.68 163.43 107.02 166.68 104 163.43 100.98 164.04 100.32 168 104 164.04 107.68" fill="#666"/>
 96 |     </g>
 97 |     <g>
 98 |       <path d="M336,140V110a6,6,0,0,1,6-6h17" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 99 |       <polygon points="356.04 107.68 355.43 107.02 358.68 104 355.43 100.98 356.04 100.32 360 104 356.04 107.68" fill="#666"/>
100 |     </g>
101 |     <path d="M180,92V83.5a6,6,0,0,1,6-6H636" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
102 |     <path d="M372,92V86.75c0-2.89,2.7-5.25,6-5.25H636" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
103 |     <path d="M564,107V91.5a6,6,0,0,1,6-6h66" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
104 |     <g>
105 |       <line x1="532" y1="104" x2="551.02" y2="104.16" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
106 |       <polygon points="548.01 107.81 547.4 107.15 550.68 104.15 547.45 101.11 548.07 100.45 552 104.17 548.01 107.81" fill="#666"/>
107 |     </g>
108 |     <path d="M492,84.5V98a6,6,0,0,0,6,6h26" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
109 |     <path d="M456,56h30a6,6,0,0,1,6,6V73" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
110 |     <use id="op-sum-3" data-name="op-sum" width="24" height="24" transform="translate(624.75 69)" xlink:href="#op-sum"/>
111 |     <use width="24" height="24" transform="translate(168.01 91.25)" xlink:href="#op-x"/>
112 |     <use width="49.5" height="49.5" transform="translate(71.25 163.25)" xlink:href="#rnn-s"/>
113 |     <use width="24" height="24" transform="translate(360.01 91.25)" xlink:href="#op-x"/>
114 |     <use width="49.5" height="49.5" transform="translate(263.24 163.25)" xlink:href="#rnn-s"/>
115 |     <use id="op-x-7" data-name="op-x" width="24" height="24" transform="translate(552 91.25)" xlink:href="#op-x"/>
116 |     <use width="49.5" height="49.5" transform="translate(455.24 163.25)" xlink:href="#rnn-s"/>
117 |     <use width="24" height="24" transform="translate(83.75 220.25)" xlink:href="#op-sum_2"/>
118 |   </g>
119 |   <line x1="108" y1="56" x2="528" y2="56" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
120 |   <use id="op-halo-3" data-name="op-halo" width="31.45" height="31.45" transform="translate(212.94 17.11)" xlink:href="#op-halo"/>
121 |   <use id="op-halo-6" data-name="op-halo" width="31.45" height="31.45" transform="translate(404.94 17.11)" xlink:href="#op-halo"/>
122 |   <use id="op-halo-9" data-name="op-halo" width="31.45" height="31.45" transform="translate(596.94 17.11)" xlink:href="#op-halo"/>
123 |   <g>
124 |     <g opacity="0.1">
125 |       <circle cx="229.75" cy="34.75" r="11.25"/>
126 |       <circle cx="229.75" cy="34.75" r="11.25" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5" opacity="0.5"/>
127 |       <path d="M228.71,35.39L222,38.07V37l5.51-2.12L222,32.78V31.72l6.75,2.68v1Z"/>
128 |       <path d="M234.09,34.2h-0.85q-0.37,0-.73,0a1.84,1.84,0,0,0-.66.17,1,1,0,0,0-.46.42,1.19,1.19,0,0,0-.21.73,1.13,1.13,0,0,0,.2.67,1.4,1.4,0,0,0,.46.43,2.73,2.73,0,0,0,1.33.3,3,3,0,0,0,1.54-.37,1.66,1.66,0,0,0,.73-1.28h1.34a2.55,2.55,0,0,1-1.09,2.09,4,4,0,0,1-2.32.7,7.39,7.39,0,0,1-1.28-.11,4.23,4.23,0,0,1-1.17-.38,2.21,2.21,0,0,1-1.18-2.08,1.72,1.72,0,0,1,.55-1.3,2.33,2.33,0,0,1,1.2-.66v0a2.71,2.71,0,0,1-1.07-.69,1.56,1.56,0,0,1-.43-1.14,1.8,1.8,0,0,1,.3-1A2,2,0,0,1,231,30a4.19,4.19,0,0,1,2-.52,4.65,4.65,0,0,1,2.34.55,2.37,2.37,0,0,1,1.05,2h-1.34a1.21,1.21,0,0,0-.64-1.15,3.21,3.21,0,0,0-1.36-.29,2.53,2.53,0,0,0-1.1.24,1,1,0,0,0-.58,1,1,1,0,0,0,.58,1,2.79,2.79,0,0,0,1.2.22h0.88V34.2Z"/>
129 |     </g>
130 |     <use width="24" height="24" transform="translate(216.75 20.75)" xlink:href="#op-sum_5"/>
131 |   </g>
132 |   <g>
133 |     <g opacity="0.1">
134 |       <circle cx="96.25" cy="58.75" r="11.25"/>
135 |       <circle cx="96.25" cy="58.75" r="11.25" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5" opacity="0.5"/>
136 |       <path d="M93.9,56.77V56a4.3,4.3,0,0,0,1.59-.37,1.83,1.83,0,0,0,.67-1.23H97v8.36H95.87V56.77h-2Z"/>
137 |     </g>
138 |     <use width="24" height="24" transform="translate(83.25 44.75)" xlink:href="#op-sum_3"/>
139 |   </g>
140 |   <g>
141 |     <g opacity="0.1">
142 |       <circle cx="421.74" cy="34.75" r="11.25"/>
143 |       <circle cx="421.74" cy="34.75" r="11.25" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5" opacity="0.5"/>
144 |       <path d="M420.71,35.39L414,38.07V37l5.51-2.12L414,32.78V31.72l6.75,2.68v1Z"/>
145 |       <path d="M426.08,34.2h-0.85q-0.37,0-.73,0a1.84,1.84,0,0,0-.66.17,1,1,0,0,0-.46.42,1.19,1.19,0,0,0-.21.73,1.13,1.13,0,0,0,.2.67,1.4,1.4,0,0,0,.46.43,2.73,2.73,0,0,0,1.33.3,3,3,0,0,0,1.54-.37,1.66,1.66,0,0,0,.73-1.28h1.34a2.55,2.55,0,0,1-1.09,2.09,4,4,0,0,1-2.32.7,7.39,7.39,0,0,1-1.28-.11,4.23,4.23,0,0,1-1.17-.38,2.21,2.21,0,0,1-1.18-2.08,1.72,1.72,0,0,1,.55-1.3,2.33,2.33,0,0,1,1.2-.66v0a2.71,2.71,0,0,1-1.07-.69,1.56,1.56,0,0,1-.43-1.14,1.8,1.8,0,0,1,.3-1A2,2,0,0,1,423,30a4.19,4.19,0,0,1,2-.52,4.65,4.65,0,0,1,2.34.55,2.37,2.37,0,0,1,1.05,2H427.1a1.21,1.21,0,0,0-.64-1.15,3.21,3.21,0,0,0-1.36-.29,2.53,2.53,0,0,0-1.1.24,1,1,0,0,0-.58,1,1,1,0,0,0,.58,1,2.79,2.79,0,0,0,1.2.22h0.88V34.2Z"/>
146 |     </g>
147 |     <use width="24" height="24" transform="translate(408.74 20.75)" xlink:href="#op-sum_5"/>
148 |   </g>
149 |   <g>
150 |     <g opacity="0.1">
151 |       <circle cx="613.74" cy="34.75" r="11.25"/>
152 |       <circle cx="613.74" cy="34.75" r="11.25" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5" opacity="0.5"/>
153 |       <path d="M612.7,35.39l-6.75,2.67V37l5.51-2.12-5.51-2.11V31.72l6.75,2.68v1Z"/>
154 |       <path d="M618.07,34.2h-0.85q-0.37,0-.73,0a1.84,1.84,0,0,0-.66.17,1,1,0,0,0-.46.42,1.19,1.19,0,0,0-.21.73,1.13,1.13,0,0,0,.2.67,1.4,1.4,0,0,0,.46.43,2.73,2.73,0,0,0,1.33.3,3,3,0,0,0,1.54-.37,1.66,1.66,0,0,0,.73-1.28h1.34a2.55,2.55,0,0,1-1.09,2.09,4,4,0,0,1-2.32.7,7.39,7.39,0,0,1-1.28-.11,4.23,4.23,0,0,1-1.17-.38,2.21,2.21,0,0,1-1.18-2.08,1.72,1.72,0,0,1,.55-1.3,2.33,2.33,0,0,1,1.2-.66v0a2.71,2.71,0,0,1-1.07-.69,1.56,1.56,0,0,1-.43-1.14,1.8,1.8,0,0,1,.3-1A2,2,0,0,1,615,30a4.19,4.19,0,0,1,2-.52,4.65,4.65,0,0,1,2.34.55,2.37,2.37,0,0,1,1.05,2H619.1a1.21,1.21,0,0,0-.64-1.15,3.21,3.21,0,0,0-1.36-.29,2.53,2.53,0,0,0-1.1.24,1,1,0,0,0-.58,1,1,1,0,0,0,.58,1,2.79,2.79,0,0,0,1.2.22h0.88V34.2Z"/>
155 |     </g>
156 |     <use width="24" height="24" transform="translate(600.74 20.75)" xlink:href="#op-sum_5"/>
157 |   </g>
158 |   <g>
159 |     <line x1="144" y1="140" x2="144" y2="73.43" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
160 |     <path d="M144,68a27.2,27.2,0,0,0,4.28,7.69L144,74.14l-4.28,1.55A27.17,27.17,0,0,0,144,68Z" fill="#666"/>
161 |   </g>
162 |   <g>
163 |     <line x1="336" y1="140" x2="336" y2="73.43" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
164 |     <path d="M336,68a27.2,27.2,0,0,0,4.28,7.69L336,74.14l-4.28,1.55A27.18,27.18,0,0,0,336,68Z" fill="#666"/>
165 |   </g>
166 |   <g>
167 |     <line x1="528" y1="140" x2="528" y2="73.43" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
168 |     <path d="M528,68a27.2,27.2,0,0,0,4.28,7.69L528,74.14l-4.28,1.55A27.18,27.18,0,0,0,528,68Z" fill="#666"/>
169 |   </g>
170 |   <g>
171 |     <path d="M144,56.5h18a16.83,16.83,0,0,0,10.26-4.22L188,36.72a16.83,16.83,0,0,1,10.26-4.22h9.32" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
172 |     <path d="M213,32.5a27.2,27.2,0,0,0-7.69,4.28l1.55-4.28-1.55-4.28A27.17,27.17,0,0,0,213,32.5Z" fill="#666"/>
173 |   </g>
174 |   <g>
175 |     <path d="M336,56h18a17.11,17.11,0,0,0,10.31-4.18l15.63-15.15a17.11,17.11,0,0,1,10.31-4.18h9.32" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
176 |     <path d="M405,32.5a27.2,27.2,0,0,0-7.69,4.28l1.55-4.28-1.55-4.28A27.17,27.17,0,0,0,405,32.5Z" fill="#666"/>
177 |   </g>
178 |   <g>
179 |     <path d="M528,56.5h18a16.83,16.83,0,0,0,10.26-4.22L572,36.72a16.83,16.83,0,0,1,10.26-4.22h9.32" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
180 |     <path d="M597,32.5a27.2,27.2,0,0,0-7.69,4.28l1.55-4.28-1.55-4.28A27.17,27.17,0,0,0,597,32.5Z" fill="#666"/>
181 |   </g>
182 |   <g>
183 |     <g opacity="0.1">
184 |       <circle cx="145.75" cy="58.09" r="11.25"/>
185 |       <circle cx="145.75" cy="58.09" r="11.25" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5" opacity="0.5"/>
186 |       <path d="M141.26,57.3h9v1.15h-9V57.3Z"/>
187 |     </g>
188 |     <use width="24" height="24" transform="translate(132.75 44.09)" xlink:href="#op-sum_4"/>
189 |   </g>
190 |   <g>
191 |     <g opacity="0.1">
192 |       <circle cx="528.74" cy="58.09" r="11.25"/>
193 |       <circle cx="528.74" cy="58.09" r="11.25" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5" opacity="0.5"/>
194 |       <path d="M524.25,57.3h9v1.15h-9V57.3Z"/>
195 |     </g>
196 |     <use width="24" height="24" transform="translate(515.74 44.09)" xlink:href="#op-sum_4"/>
197 |   </g>
198 |   <g id="_Group_" data-name="&lt;Group&gt;">
199 |     <g opacity="0.1">
200 |       <rect x="133.33" y="129.33" width="23.67" height="23.67" rx="6" ry="6" stroke="#000" stroke-width="1.5"/>
201 |       <path d="M151.54,137.25h-2.48a5.39,5.39,0,0,1,1.41,3.87,6.62,6.62,0,0,1-1.37,4.36,5.13,5.13,0,0,1-4.11,1.73,5,5,0,0,1-4.09-1.78,6.66,6.66,0,0,1-1.37-4.32A5.73,5.73,0,0,1,141,137a5.22,5.22,0,0,1,4-1.58,6.18,6.18,0,0,1,1.67.21h4.88v1.57Zm-3.16,4.11a5.89,5.89,0,0,0-.74-2.92,3.2,3.2,0,0,0-5.26-.06,5.53,5.53,0,0,0-.77,3,4.82,4.82,0,0,0,.91,3,3.11,3.11,0,0,0,5.05-.06A5.37,5.37,0,0,0,148.39,141.37Z"/>
202 |     </g>
203 |     <use width="25.17" height="25.17" transform="translate(131.58 126.58)" xlink:href="#rnn-sigma"/>
204 |   </g>
205 |   <g id="_Group_2" data-name="&lt;Group&gt;">
206 |     <g opacity="0.1">
207 |       <rect x="325.33" y="129.33" width="23.67" height="23.67" rx="6" ry="6" stroke="#000" stroke-width="1.5"/>
208 |       <path d="M343.54,137.25h-2.48a5.39,5.39,0,0,1,1.41,3.87,6.62,6.62,0,0,1-1.37,4.36,5.13,5.13,0,0,1-4.11,1.73,5,5,0,0,1-4.09-1.78,6.66,6.66,0,0,1-1.37-4.32A5.73,5.73,0,0,1,333,137a5.22,5.22,0,0,1,4-1.58,6.18,6.18,0,0,1,1.67.21h4.88v1.57Zm-3.16,4.11a5.89,5.89,0,0,0-.74-2.92,3.2,3.2,0,0,0-5.26-.06,5.53,5.53,0,0,0-.77,3,4.82,4.82,0,0,0,.91,3,3.11,3.11,0,0,0,5.05-.06A5.37,5.37,0,0,0,340.39,141.37Z"/>
209 |     </g>
210 |     <use width="25.17" height="25.17" transform="translate(323.58 126.58)" xlink:href="#rnn-sigma"/>
211 |   </g>
212 |   <g id="_Group_3" data-name="&lt;Group&gt;">
213 |     <g opacity="0.1">
214 |       <rect x="517.33" y="129.33" width="23.67" height="23.67" rx="6" ry="6" stroke="#000" stroke-width="1.5"/>
215 |       <path d="M535.54,137.25h-2.48a5.39,5.39,0,0,1,1.41,3.87,6.62,6.62,0,0,1-1.37,4.36,5.13,5.13,0,0,1-4.11,1.73,5,5,0,0,1-4.09-1.78,6.66,6.66,0,0,1-1.37-4.32A5.73,5.73,0,0,1,525,137a5.22,5.22,0,0,1,4-1.58,6.18,6.18,0,0,1,1.67.21h4.88v1.57Zm-3.16,4.11a5.89,5.89,0,0,0-.74-2.92,3.2,3.2,0,0,0-5.26-.06,5.53,5.53,0,0,0-.77,3,4.82,4.82,0,0,0,.91,3,3.11,3.11,0,0,0,5.05-.06A5.37,5.37,0,0,0,532.39,141.37Z"/>
216 |     </g>
217 |     <use width="25.17" height="25.17" transform="translate(515.58 126.58)" xlink:href="#rnn-sigma"/>
218 |   </g>
219 |   <g>
220 |     <g opacity="0.1">
221 |       <circle cx="337.74" cy="58.09" r="11.25"/>
222 |       <circle cx="337.74" cy="58.09" r="11.25" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5" opacity="0.5"/>
223 |       <path d="M333.26,57.3h9v1.15h-9V57.3Z"/>
224 |     </g>
225 |     <use width="24" height="24" transform="translate(324.74 44.09)" xlink:href="#op-sum_4"/>
226 |   </g>
227 | </svg>
228 | 


--------------------------------------------------------------------------------
/public/assets/rnn_adaptive_02_4.svg:
--------------------------------------------------------------------------------
  1 | <svg id="background" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 744 270">
  2 |   <defs>
  3 |     <symbol id="op-halo" data-name="op-halo" viewBox="0 0 31.45 31.45">
  4 |       <circle cx="15.73" cy="15.73" r="14.73" fill="#e6eaf2" stroke="#fff" stroke-miterlimit="10" stroke-width="2"/>
  5 |     </symbol>
  6 |     <symbol id="op-bg" data-name="op-bg" viewBox="0 0 24 24">
  7 |       <circle cx="12" cy="12" r="11.25" fill="#e0cef5" stroke="#000" stroke-miterlimit="10" stroke-opacity="0.5" stroke-width="1.5"/>
  8 |     </symbol>
  9 |     <symbol id="op-sum_5" data-name="op-sum 5" viewBox="0 0 24 24">
 10 |       <use id="op-bg-3" data-name="op-bg" width="24" height="24" xlink:href="#op-bg"/>
 11 |       <g>
 12 |         <path d="M11,12.65L4.21,15.32V14.26l5.51-2.12L4.21,10V9L11,11.66v1Z" fill="#666"/>
 13 |         <path d="M16.34,11.45H15.48q-0.37,0-.73,0a1.84,1.84,0,0,0-.66.17,1,1,0,0,0-.46.42,1.19,1.19,0,0,0-.21.73,1.13,1.13,0,0,0,.2.67,1.4,1.4,0,0,0,.46.43,2.73,2.73,0,0,0,1.33.3,3,3,0,0,0,1.54-.37,1.66,1.66,0,0,0,.73-1.28H19a2.55,2.55,0,0,1-1.09,2.09,4,4,0,0,1-2.32.7,7.39,7.39,0,0,1-1.28-.11,4.23,4.23,0,0,1-1.17-.38A2.21,2.21,0,0,1,12,12.79a1.72,1.72,0,0,1,.55-1.3,2.33,2.33,0,0,1,1.2-.66v0a2.71,2.71,0,0,1-1.07-.69A1.56,1.56,0,0,1,12.24,9a1.8,1.8,0,0,1,.3-1,2,2,0,0,1,.74-0.69,4.19,4.19,0,0,1,2-.52,4.65,4.65,0,0,1,2.34.55,2.37,2.37,0,0,1,1.05,2H17.36a1.21,1.21,0,0,0-.64-1.15,3.21,3.21,0,0,0-1.36-.29,2.53,2.53,0,0,0-1.1.24,1,1,0,0,0-.58,1,1,1,0,0,0,.58,1,2.79,2.79,0,0,0,1.2.22h0.88v1.16Z" fill="#666"/>
 14 |       </g>
 15 |     </symbol>
 16 |     <symbol id="op-sum_4" data-name="op-sum 4" viewBox="0 0 24 24">
 17 |       <use id="op-bg-6" data-name="op-bg" width="24" height="24" xlink:href="#op-bg"/>
 18 |       <path d="M7.51,11.21h9v1.15h-9V11.21Z" fill="#666"/>
 19 |     </symbol>
 20 |     <symbol id="op-sum_3" data-name="op-sum 3" viewBox="0 0 24 24">
 21 |       <use id="op-bg-9" data-name="op-bg" width="24" height="24" xlink:href="#op-bg"/>
 22 |       <path d="M9.65,10V9.21a4.3,4.3,0,0,0,1.59-.37,1.83,1.83,0,0,0,.67-1.23h0.83V16H11.62V10h-2Z" fill="#666"/>
 23 |     </symbol>
 24 |     <symbol id="op-x" data-name="op-x" viewBox="0 0 24 24">
 25 |       <use id="op-bg-12" data-name="op-bg" width="24" height="24" xlink:href="#op-bg"/>
 26 |       <path d="M9.16,15.28l-1-1,2.56-2.56L8.16,9.16l1-1,2.58,2.58L14.3,8.17l1,1-2.56,2.56,2.57,2.57-1,1-2.57-2.57Z" fill="#666"/>
 27 |     </symbol>
 28 |     <symbol id="rnn-bg" data-name="rnn-bg" viewBox="0 0 49.5 49.5">
 29 |       <rect x="0.75" y="0.75" width="48" height="48" rx="6" ry="6" fill="#fff" fill-opacity="0.8" stroke="#666" stroke-width="1.5"/>
 30 |     </symbol>
 31 |     <symbol id="rnn-s" data-name="rnn-s" viewBox="0 0 49.5 49.5">
 32 |       <use id="rnn-bg-3" data-name="rnn-bg" width="49.5" height="49.5" xlink:href="#rnn-bg"/>
 33 |       <path d="M29.68,27.61a3.81,3.81,0,0,1-1.49,3.2,6.46,6.46,0,0,1-4,1.15,10.1,10.1,0,0,1-4.25-.71V29.51a11.16,11.16,0,0,0,2.08.64,10.92,10.92,0,0,0,2.23.23,4.49,4.49,0,0,0,2.72-.69,2.25,2.25,0,0,0,.92-1.91,2.45,2.45,0,0,0-.32-1.32,3,3,0,0,0-1.08-1,15.14,15.14,0,0,0-2.31-1A7.38,7.38,0,0,1,21,22.68a4.06,4.06,0,0,1-.93-2.77A3.45,3.45,0,0,1,21.45,17,5.61,5.61,0,0,1,25,16a10.54,10.54,0,0,1,4.26.85l-0.56,1.57A9.63,9.63,0,0,0,25,17.6a3.62,3.62,0,0,0-2.24.62,2,2,0,0,0-.81,1.71,2.62,2.62,0,0,0,.3,1.32,2.8,2.8,0,0,0,1,.95,12.47,12.47,0,0,0,2.16,1A8.56,8.56,0,0,1,28.76,25,3.68,3.68,0,0,1,29.68,27.61Z" fill="#5b5b5b"/>
 34 |     </symbol>
 35 |     <symbol id="op-sum_2" data-name="op-sum 2" viewBox="0 0 24 24">
 36 |       <use width="24" height="24" xlink:href="#op-bg"/>
 37 |       <path d="M9.88,9.08a1.77,1.77,0,0,1,.69-1.47,3,3,0,0,1,1.89-.54,4.84,4.84,0,0,1,1.87.38v1.1a5.22,5.22,0,0,0-1.88-.4,1.57,1.57,0,0,0-.93.25,0.78,0.78,0,0,0-.35.67q0,0.74,1.51,1.26a4.6,4.6,0,0,1,2.22,1.44A3.75,3.75,0,0,1,15.64,14v0.27a4.23,4.23,0,0,1-.4,1.87,3,3,0,0,1-1.15,1.28,3.29,3.29,0,0,1-1.74.45,3.08,3.08,0,0,1-2.42-1A3.86,3.86,0,0,1,9,14.22V14.13a3.42,3.42,0,0,1,.64-2A2.76,2.76,0,0,1,11.29,11v0a2.36,2.36,0,0,1-1-.75A1.76,1.76,0,0,1,9.88,9.08Zm0.42,5.2a3,3,0,0,0,.55,1.89,1.8,1.8,0,0,0,1.49.69,1.79,1.79,0,0,0,1.48-.69,3.23,3.23,0,0,0,.55-2,2.67,2.67,0,0,0-.58-1.67,2.35,2.35,0,0,0-1.43-.92,1.81,1.81,0,0,0-1.49.7A3.19,3.19,0,0,0,10.3,14.28Z" fill="#666"/>
 38 |     </symbol>
 39 |     <symbol id="rnn-sigma" data-name="rnn-sigma" viewBox="0 0 25.17 25.17">
 40 |       <rect x="0.75" y="0.75" width="23.67" height="23.67" rx="6" ry="6" fill="#f0f0f5" stroke="#666" stroke-width="1.5"/>
 41 |       <path d="M19,8.67H16.48a5.39,5.39,0,0,1,1.41,3.87,6.62,6.62,0,0,1-1.37,4.36,5.13,5.13,0,0,1-4.11,1.73,5,5,0,0,1-4.09-1.78,6.66,6.66,0,0,1-1.37-4.32,5.73,5.73,0,0,1,1.5-4.07,5.22,5.22,0,0,1,4-1.58,6.18,6.18,0,0,1,1.67.21H19V8.67ZM15.8,12.78a5.89,5.89,0,0,0-.74-2.92,2.87,2.87,0,0,0-2.65-1.41A2.86,2.86,0,0,0,9.8,9.79a5.53,5.53,0,0,0-.77,3,4.82,4.82,0,0,0,.91,3,2.89,2.89,0,0,0,2.47,1.26A2.88,2.88,0,0,0,15,15.74,5.37,5.37,0,0,0,15.8,12.78Z" fill="#666"/>
 42 |     </symbol>
 43 |     <symbol id="op-sum" data-name="op-sum" viewBox="0 0 24 24">
 44 |       <use id="op-bg-35" data-name="op-bg" width="24" height="24" xlink:href="#op-bg"/>
 45 |       <path d="M7.88,12.5V11.18h3.41V7.75h1.34v3.43H16V12.5H12.62v3.42H11.29V12.5H7.88Z" fill="#666"/>
 46 |     </symbol>
 47 |   </defs>
 48 |   <title>rnn</title>
 49 |   <rect x="48" y="17.25" width="612" height="238.75" rx="10" ry="10" fill="#f0f0f5"/>
 50 |   <line x1="228" y1="43" x2="228" y2="268" stroke="#fff" stroke-miterlimit="10" stroke-width="1.5"/>
 51 |   <line x1="420" y1="43" x2="420" y2="268" stroke="#fff" stroke-miterlimit="10" stroke-width="1.5"/>
 52 |   <line x1="612" y1="43" x2="612" y2="268" stroke="#fff" stroke-miterlimit="10" stroke-width="1.5"/>
 53 |   <g opacity="0.2">
 54 |     <g>
 55 |       <path d="M276,244H473.5a6,6,0,0,0,6-6V210" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 56 |       <polygon points="483.18 212.96 482.52 213.57 479.5 210.32 476.48 213.57 475.82 212.96 479.5 209 483.18 212.96" fill="#666"/>
 57 |     </g>
 58 |     <g>
 59 |       <path d="M287.5,210.14V238a6,6,0,0,1-6,6H102a6,6,0,0,0-6,6v18h0V208" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 60 |       <polygon points="283.21 213.62 283.98 214.33 287.5 210.54 291.02 214.33 291.79 213.62 287.5 209 283.21 213.62" fill="#666"/>
 61 |     </g>
 62 |     <g>
 63 |       <line x1="36" y1="184" x2="71.02" y2="184" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 64 |       <polygon points="68.04 187.68 67.43 187.02 70.68 184 67.43 180.98 68.04 180.32 72 184 68.04 187.68" fill="#666"/>
 65 |     </g>
 66 |     <g>
 67 |       <line x1="120" y1="184" x2="263.02" y2="184" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 68 |       <polygon points="260.04 187.68 259.43 187.02 262.68 184 259.43 180.98 260.04 180.32 264 184 260.04 187.68" fill="#666"/>
 69 |     </g>
 70 |     <g>
 71 |       <line x1="312" y1="184" x2="455.02" y2="184" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 72 |       <polygon points="452.04 187.68 451.43 187.02 454.68 184 451.43 180.98 452.04 180.32 456 184 452.04 187.68" fill="#666"/>
 73 |     </g>
 74 |     <g>
 75 |       <path d="M120,184h18a6,6,0,0,0,6-6V149" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 76 |       <polygon points="147.68 151.96 147.02 152.57 144 149.32 140.98 152.57 140.32 151.96 144 148 147.68 151.96" fill="#666"/>
 77 |     </g>
 78 |     <g>
 79 |       <path d="M312,184h18a6,6,0,0,0,6-6V149" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 80 |       <polygon points="339.68 151.96 339.02 152.57 336 149.32 332.98 152.57 332.32 151.96 336 148 339.68 151.96" fill="#666"/>
 81 |     </g>
 82 |     <g>
 83 |       <path d="M504,184h18a6,6,0,0,0,6-6V149" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 84 |       <polygon points="531.68 151.96 531.02 152.57 528 149.32 524.98 152.57 524.32 151.96 528 148 531.68 151.96" fill="#666"/>
 85 |     </g>
 86 |     <path d="M120,184h54a6,6,0,0,0,6-6V112" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 87 |     <path d="M312,184h54a6,6,0,0,0,6-6V112" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 88 |     <g>
 89 |       <line x1="144" y1="136" x2="144" y2="64.97" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 90 |       <polygon points="147.68 67.96 147.02 68.57 144 65.32 140.98 68.57 140.32 67.96 144 64 147.68 67.96" fill="#666"/>
 91 |     </g>
 92 |     <g>
 93 |       <line x1="336" y1="70.25" x2="336" y2="64.97" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 94 |       <polygon points="339.68 67.96 339.02 68.57 336 65.32 332.98 68.57 332.32 67.96 336 64 339.68 67.96" fill="#666"/>
 95 |     </g>
 96 |     <line x1="336" y1="136" x2="336" y2="77.25" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 97 |     <g>
 98 |       <line x1="528" y1="70" x2="528" y2="64.97" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 99 |       <polygon points="531.68 67.96 531.02 68.57 528 65.32 524.98 68.57 524.32 67.96 528 64 531.68 67.96" fill="#666"/>
100 |     </g>
101 |     <line x1="528" y1="96" x2="528" y2="81" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
102 |     <line x1="528" y1="124" x2="528" y2="104" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
103 |     <g>
104 |       <path d="M144,136V106a6,6,0,0,1,6-6h17" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
105 |       <polygon points="164.04 103.68 163.43 103.02 166.68 100 163.43 96.98 164.04 96.32 168 100 164.04 103.68" fill="#666"/>
106 |     </g>
107 |     <g>
108 |       <path d="M336,136V106a6,6,0,0,1,6-6h17" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
109 |       <polygon points="356.04 103.68 355.43 103.02 358.68 100 355.43 96.98 356.04 96.32 360 100 356.04 103.68" fill="#666"/>
110 |     </g>
111 |     <path d="M180,88V79.5a6,6,0,0,1,6-6H636" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
112 |     <path d="M372,88V82.75c0-2.89,2.7-5.25,6-5.25H636" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
113 |     <line x1="108" y1="52" x2="528" y2="52" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
114 |     <g>
115 |       <path d="M144,52.5h18a16.83,16.83,0,0,0,10.26-4.22L188,32.72a16.83,16.83,0,0,1,10.26-4.22H212" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
116 |       <polygon points="209.04 32.18 208.43 31.52 211.68 28.5 208.43 25.48 209.04 24.82 213 28.5 209.04 32.18" fill="#666"/>
117 |     </g>
118 |     <g>
119 |       <path d="M336,52h18a17.11,17.11,0,0,0,10.31-4.18l15.63-15.15a17.11,17.11,0,0,1,10.31-4.18H404" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
120 |       <polygon points="401.04 32.18 400.43 31.52 403.68 28.5 400.43 25.48 401.04 24.82 405 28.5 401.04 32.18" fill="#666"/>
121 |     </g>
122 |     <g>
123 |       <path d="M528,52.5h18a16.83,16.83,0,0,0,10.26-4.22L572,32.72a16.83,16.83,0,0,1,10.26-4.22H596" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
124 |       <polygon points="593.04 32.18 592.43 31.52 595.68 28.5 592.43 25.48 593.04 24.82 597 28.5 593.04 32.18" fill="#666"/>
125 |     </g>
126 |     <use id="op-halo-3" data-name="op-halo" width="31.45" height="31.45" transform="translate(212.94 13.11)" xlink:href="#op-halo"/>
127 |     <use id="op-halo-6" data-name="op-halo" width="31.45" height="31.45" transform="translate(404.94 13.11)" xlink:href="#op-halo"/>
128 |     <use id="op-halo-9" data-name="op-halo" width="31.45" height="31.45" transform="translate(596.94 13.11)" xlink:href="#op-halo"/>
129 |     <use width="24" height="24" transform="translate(216.75 16.75)" xlink:href="#op-sum_5"/>
130 |     <use width="24" height="24" transform="translate(132.75 40.09)" xlink:href="#op-sum_4"/>
131 |     <use width="24" height="24" transform="translate(83.25 40.75)" xlink:href="#op-sum_3"/>
132 |     <use width="24" height="24" transform="translate(168.01 87.25)" xlink:href="#op-x"/>
133 |     <use width="49.5" height="49.5" transform="translate(71.25 159.25)" xlink:href="#rnn-s"/>
134 |     <use width="24" height="24" transform="translate(408.74 16.75)" xlink:href="#op-sum_5"/>
135 |     <use width="24" height="24" transform="translate(324.74 40.09)" xlink:href="#op-sum_4"/>
136 |     <use width="24" height="24" transform="translate(360.01 87.25)" xlink:href="#op-x"/>
137 |     <use width="49.5" height="49.5" transform="translate(263.24 159.25)" xlink:href="#rnn-s"/>
138 |     <use width="24" height="24" transform="translate(600.74 16.75)" xlink:href="#op-sum_5"/>
139 |     <use width="24" height="24" transform="translate(515.74 40.09)" xlink:href="#op-sum_4"/>
140 |     <use width="24" height="24" transform="translate(83.75 216.25)" xlink:href="#op-sum_2"/>
141 |     <use id="rnn-sigma-3" data-name="rnn-sigma" width="25.17" height="25.17" transform="translate(131.58 122.58)" xlink:href="#rnn-sigma"/>
142 |     <use id="rnn-sigma-6" data-name="rnn-sigma" width="25.17" height="25.17" transform="translate(323.58 122.58)" xlink:href="#rnn-sigma"/>
143 |     <use id="rnn-sigma-9" data-name="rnn-sigma" width="25.17" height="25.17" transform="translate(515.58 122.58)" xlink:href="#rnn-sigma"/>
144 |   </g>
145 |   <path d="M504,184h54a6,6,0,0,0,6-6V112" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
146 |   <path d="M564,101V87.5a6,6,0,0,1,6-6h66" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
147 |   <path d="M492,65V94a6,6,0,0,0,6,6h36" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
148 |   <path d="M420,52h66a6,6,0,0,1,6,6V69" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
149 |   <g id="_Group_" data-name="&lt;Group&gt;">
150 |     <g opacity="0.1">
151 |       <circle cx="565" cy="101.25" r="11.25"/>
152 |       <circle cx="565" cy="101.25" r="11.25" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5" opacity="0.5"/>
153 |       <path d="M562.16,104.53l-1-1,2.56-2.56-2.58-2.58,1-1,2.58,2.58,2.56-2.56,1,1L565.72,101l2.57,2.57-1,1L564.72,102Z"/>
154 |     </g>
155 |     <use width="24" height="24" transform="translate(552 87.25)" xlink:href="#op-x"/>
156 |   </g>
157 |   <g id="_Group_2" data-name="&lt;Group&gt;">
158 |     <g opacity="0.1">
159 |       <rect x="456.99" y="162" width="48" height="48" rx="6" ry="6" opacity="0.8"/>
160 |       <rect x="456.99" y="162" width="48" height="48" rx="6" ry="6" fill="none" stroke="#000" stroke-width="1.5"/>
161 |       <rect x="456.99" y="162" width="48" height="48" rx="6" ry="6" fill="none" stroke="#000" stroke-width="1.5"/>
162 |       <rect x="456.99" y="162" width="48" height="48" rx="6" ry="6" fill="none" stroke="#000" stroke-width="1.5"/>
163 |       <path d="M485.92,188.86a3.81,3.81,0,0,1-1.49,3.2,6.46,6.46,0,0,1-4,1.15,10.1,10.1,0,0,1-4.25-.71v-1.74a11.16,11.16,0,0,0,2.08.64,10.92,10.92,0,0,0,2.23.23,4.49,4.49,0,0,0,2.72-.69,2.25,2.25,0,0,0,.92-1.91,2.45,2.45,0,0,0-.32-1.32,3,3,0,0,0-1.08-1,15.14,15.14,0,0,0-2.31-1,7.38,7.38,0,0,1-3.1-1.84,4.06,4.06,0,0,1-.93-2.77,3.45,3.45,0,0,1,1.35-2.86,5.61,5.61,0,0,1,3.57-1.06,10.54,10.54,0,0,1,4.26.85L485,179.66a9.63,9.63,0,0,0-3.74-.81,3.62,3.62,0,0,0-2.24.62,2,2,0,0,0-.81,1.71,2.62,2.62,0,0,0,.3,1.32,2.8,2.8,0,0,0,1,.95,12.47,12.47,0,0,0,2.16,1,8.56,8.56,0,0,1,3.37,1.87A3.68,3.68,0,0,1,485.92,188.86Z"/>
164 |     </g>
165 |     <use width="49.5" height="49.5" transform="translate(455.24 159.25)" xlink:href="#rnn-s"/>
166 |   </g>
167 |   <g>
168 |     <line x1="642" y1="77" x2="666.57" y2="77" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
169 |     <path d="M672,77a27.2,27.2,0,0,0-7.69,4.28L665.86,77l-1.55-4.28A27.17,27.17,0,0,0,672,77Z" fill="#666"/>
170 |   </g>
171 |   <g>
172 |     <line x1="532" y1="100" x2="546.57" y2="100.12" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
173 |     <path d="M552,100.16a27.2,27.2,0,0,0-7.73,4.22l1.58-4.27-1.51-4.29A27.18,27.18,0,0,0,552,100.16Z" fill="#666"/>
174 |   </g>
175 |   <g id="_Group_3" data-name="&lt;Group&gt;">
176 |     <g opacity="0.1">
177 |       <circle cx="637.75" cy="79" r="11.25"/>
178 |       <circle cx="637.75" cy="79" r="11.25" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5" opacity="0.5"/>
179 |       <path d="M633.63,79.49V78.18H637V74.75h1.34v3.43h3.41v1.31h-3.41v3.42H637V79.49h-3.41Z"/>
180 |     </g>
181 |     <use width="24" height="24" transform="translate(624.75 65)" xlink:href="#op-sum"/>
182 |   </g>
183 | </svg>
184 | 


--------------------------------------------------------------------------------
/public/assets/rnn_attentional_ex2.csv:
--------------------------------------------------------------------------------
 1 | 0.50, 0.02, 0.04, 0.00, 0.00, 0.00, 0.00, 0.00, 0.01, 0.01, 0.00, 0.00, 0.00, 0.05, 0.05
 2 | 0.14, 0.89, 0.07, 0.00, 0.00, 0.00, 0.00, 0.00, 0.01, 0.06, 0.00, 0.00, 0.00, 0.02, 0.00
 3 | 0.02, 0.00, 0.56, 0.00, 0.00, 0.00, 0.00, 0.01, 0.00, 0.00, 0.00, 0.00, 0.00, 0.02, 0.00
 4 | 0.00, 0.00, 0.01, 0.61, 0.02, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00
 5 | 0.00, 0.00, 0.02, 0.03, 0.01, 0.21, 0.97, 0.05, 0.00, 0.00, 0.00, 0.00, 0.00, 0.01, 0.00
 6 | 0.00, 0.00, 0.02, 0.07, 0.25, 0.76, 0.02, 0.04, 0.00, 0.00, 0.00, 0.00, 0.00, 0.02, 0.00
 7 | 0.02, 0.04, 0.03, 0.27, 0.71, 0.02, 0.00, 0.02, 0.00, 0.00, 0.02, 0.00, 0.00, 0.05, 0.01
 8 | 0.02, 0.00, 0.07, 0.00, 0.00, 0.00, 0.00, 0.60, 0.40, 0.01, 0.04, 0.00, 0.00, 0.13, 0.01
 9 | 0.13, 0.02, 0.02, 0.00, 0.01, 0.00, 0.00, 0.23, 0.52, 0.91, 0.07, 0.00, 0.00, 0.10, 0.00
10 | 0.04, 0.00, 0.01, 0.00, 0.00, 0.00, 0.00, 0.01, 0.03, 0.00, 0.67, 0.00, 0.00, 0.16, 0.02
11 | 0.02, 0.00, 0.04, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.14, 0.96, 0.00, 0.02, 0.07
12 | 0.02, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.02, 0.02, 1.00, 0.02, 0.03
13 | 0.02, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.01, 0.00, 0.01, 0.00, 0.00, 0.32, 0.11
14 | 0.04, 0.00, 0.08, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.01, 0.00, 0.00, 0.04, 0.67
15 | 


--------------------------------------------------------------------------------
/public/assets/rnn_attentional_ex2.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <figure id="attentional-ex2" class="l-page">
  3 |   <pre id="attentional-ex2-data" style="display: none;">0.50, 0.02, 0.04, 0.00, 0.00, 0.00, 0.00, 0.00, 0.01, 0.01, 0.00, 0.00, 0.00, 0.05, 0.05
  4 | 0.14, 0.89, 0.07, 0.00, 0.00, 0.00, 0.00, 0.00, 0.01, 0.06, 0.00, 0.00, 0.00, 0.02, 0.00
  5 | 0.02, 0.00, 0.56, 0.00, 0.00, 0.00, 0.00, 0.01, 0.00, 0.00, 0.00, 0.00, 0.00, 0.02, 0.00
  6 | 0.00, 0.00, 0.01, 0.61, 0.02, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00
  7 | 0.00, 0.00, 0.02, 0.03, 0.01, 0.21, 0.97, 0.05, 0.00, 0.00, 0.00, 0.00, 0.00, 0.01, 0.00
  8 | 0.00, 0.00, 0.02, 0.07, 0.25, 0.76, 0.02, 0.04, 0.00, 0.00, 0.00, 0.00, 0.00, 0.02, 0.00
  9 | 0.02, 0.04, 0.03, 0.27, 0.71, 0.02, 0.00, 0.02, 0.00, 0.00, 0.02, 0.00, 0.00, 0.05, 0.01
 10 | 0.02, 0.00, 0.07, 0.00, 0.00, 0.00, 0.00, 0.60, 0.40, 0.01, 0.04, 0.00, 0.00, 0.13, 0.01
 11 | 0.13, 0.02, 0.02, 0.00, 0.01, 0.00, 0.00, 0.23, 0.52, 0.91, 0.07, 0.00, 0.00, 0.10, 0.00
 12 | 0.04, 0.00, 0.01, 0.00, 0.00, 0.00, 0.00, 0.01, 0.03, 0.00, 0.67, 0.00, 0.00, 0.16, 0.02
 13 | 0.02, 0.00, 0.04, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.14, 0.96, 0.00, 0.02, 0.07
 14 | 0.02, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.02, 0.02, 1.00, 0.02, 0.03
 15 | 0.02, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.01, 0.00, 0.01, 0.00, 0.00, 0.32, 0.11
 16 | 0.04, 0.00, 0.08, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.01, 0.00, 0.00, 0.04, 0.67</pre>
 17 |   <svg>
 18 |     <defs>
 19 |       <marker id="edgeArrowhead" viewBox="0 -5 10 10" markerWidth="6" markerHeight="10" orient="auto" refX="5" refY="0">
 20 |         <path d="M0,-5L5,0L0,5" fill="none" stroke="#666"/>
 21 |       </marker>
 22 |       <marker id="edgeArrowheadLeft" viewBox="0 -5 10 10" markerWidth="6" markerHeight="10" orient="auto" refX="0" refY="0">
 23 |         <path d="M5,-5L0,0L5,5" fill="none" stroke="#666"/>
 24 |       </marker>
 25 |     </defs>
 26 |     <g class="labels" style="display: none;">
 27 |       <text transform="translate(0, 20)">output text</text>
 28 |       <text transform="translate(0, 65)">network B</text>
 29 |       <text transform="translate(0, 185)">network A</text>
 30 |       <text transform="translate(0, 233)">input text</text>
 31 |     </g>
 32 |   </svg>
 33 |   <figcaption>Diagram derived from Fig. 3 of <a href="https://arxiv.org/pdf/1409.0473.pdf">Bahdanau, <i>et al.</i> 2014</a></figcaption>
 34 |   <img class="pointer" src="assets/pointer.svg">
 35 | </figure>
 36 | 
 37 | <style>
 38 |   #attentional-ex2 svg {
 39 |   width: 100%;
 40 |   margin-bottom: 24px;
 41 | }
 42 | #attentional-ex2 .pointer {
 43 |   position: absolute;
 44 |   width: 26px;
 45 |   height: 26px;
 46 |   top: 36px;
 47 |   left: -48px;
 48 | }
 49 | #attentional-ex2 figcaption {
 50 |   text-align: center;
 51 | }
 52 | #attentional-ex2 svg .labels {
 53 |   font-size: 12px;
 54 |   fill-opacity: 0.5;
 55 | }
 56 | #attentional-ex2 .background {
 57 |   fill: rgb(240, 240, 245);
 58 |   fill-opacity: 0.8;
 59 | }
 60 | #attentional-ex2 .cell .node {
 61 |   fill: white;
 62 |   fill-opacity: 0.9;
 63 |   stroke: black;
 64 |   stroke-width: 1px;
 65 |   stroke-opacity: 0.25;
 66 |   /*transition: stroke-opacity, 0.2s, linear;*/
 67 | }
 68 | #attentional-ex2 .cell:hover .node {
 69 |   stroke-opacity: 1;
 70 | }
 71 | #attentional-ex2 .cell .shadow {
 72 |   fill: black;
 73 |   fill-opacity: 0.07;
 74 | }
 75 | #attentional-ex2 .cell text {
 76 |   font-size: 13px;
 77 |   fill-opacity: 0.6;
 78 |   text-anchor: middle;
 79 |   alignment-baseline: middle;
 80 | }
 81 | #attentional-ex2 .cell text.label {
 82 |   font-size: 13px;
 83 |   /*fill-opacity: 0.9;*/
 84 |   text-anchor: middle;
 85 |   alignment-baseline: middle;
 86 | }
 87 | #attentional-ex2 .link-group {
 88 |   transition: opacity, 0.3s, linear;
 89 | }
 90 | #attentional-ex2 .link-group .node-highlight {
 91 |   transition: stroke-opacity, 0.3s, linear;
 92 |   stroke: black;
 93 |   stroke-opacity: 0;
 94 |   fill: none;
 95 | }
 96 | #attentional-ex2 .link-group:hover .node-highlight {
 97 |   stroke-opacity: 1;
 98 | }
 99 | #attentional-ex2 .link {
100 |   fill: none;
101 |   stroke: rgb(131, 89, 178);
102 |   stroke-width: 2px;
103 |   pointer-events: none;
104 | }
105 | #attentional-ex2 .arrow {
106 |   stroke: black;
107 |   stroke-opacity: 0.6;
108 | }
109 | #attentional-ex2 .cell:last-child .arrow:first-of-type {
110 |   display: none;
111 | }
112 | </style>
113 | 
114 | <script>
115 | (function() {
116 | 
117 | var labelsA = [
118 |   "the",
119 |   "agreement",
120 |   "on",
121 |   "the",
122 |   "European",
123 |   "Economic",
124 |   "Area",
125 |   "was",
126 |   "signed",
127 |   "in",
128 |   "August",
129 |   "1992",
130 |   ".",
131 |   "<end>"
132 | ];
133 | 
134 | var labelsB = [
135 |   "l’",
136 |   "accord",
137 |   "sur",
138 |   "la",
139 |   "zone",
140 |   "économique",
141 |   "européenne",
142 |   "a",
143 |   "été",
144 |   "signé",
145 |   "en",
146 |   "août",
147 |   "1992",
148 |   ".",
149 |   "<end>"
150 | ];
151 | 
152 | var data = d3.csvParseRows(d3.select("#attentional-ex2-data").text());
153 | // console.log(data)
154 | var linkData = [];
155 | data.forEach(function(a, ai) {
156 |   a.forEach(function(b, bi) {
157 |     linkData.push({
158 |       ai: +ai,
159 |       bi: +bi,
160 |       v: +data[ai][bi]
161 |     });
162 |   });
163 | });
164 | 
165 | var nodeMargin = 10;
166 | var networkMargin = 120;
167 | 
168 | var html = d3.select("#attentional-ex2");
169 | var outerWidth = 984;//html.node().getBoundingClientRect().width;
170 | var outerHeight = 240;//html.node().getBoundingClientRect().height;
171 | var margin = {top: 36, right: nodeMargin, bottom: 24, left: nodeMargin};
172 | var width = outerWidth - margin.left - margin.right;
173 | var height = outerHeight - margin.top - margin.bottom;
174 | 
175 | var xa = d3.scaleBand()
176 |     .domain(d3.range(labelsA.length))
177 |     .paddingInner(0.5)
178 |     .range([nodeMargin, width - nodeMargin]);
179 | 
180 | var xb = d3.scaleBand()
181 |     .domain(d3.range(labelsB.length))
182 |     .paddingInner(0.5)
183 |     .range([nodeMargin, width - nodeMargin]);
184 | 
185 | var nodeSizeA = xa.bandwidth();
186 | var nodeSizeB = xb.bandwidth();
187 | 
188 | var networkHeightA = nodeSizeA + nodeMargin * 2;
189 | var networkHeightB = nodeSizeB + nodeMargin * 2;
190 | 
191 | var link = function(d) {
192 |   // console.log(nodeSizeB, nodeSizeA, nodeMargin, d.bi, xb(d.bi))
193 |   var p = "M" + (xb(d.bi) + nodeSizeB / 2) + "," + (nodeSizeB + nodeMargin)
194 |       + "C" + (xb(d.bi) + nodeSizeB / 2) + "," + (nodeSizeB + networkMargin / 3 + nodeMargin)
195 |       + " " + (xa(d.ai) + nodeSizeA / 2) + "," + (networkMargin - networkMargin / 3 + nodeMargin)
196 |       + " " + (xa(d.ai) + nodeSizeA / 2) + "," + (networkMargin + nodeMargin);
197 |   // console.log(p);
198 |   return p;
199 | };
200 | 
201 | html.select("svg .labels")
202 |     .attr("transform", "translate(" + (width + nodeMargin * 3) + ", 0)");
203 | 
204 | var svg = html.select("svg")
205 |     .attr("viewBox", "0 0 " + outerWidth + " " + outerHeight)
206 |   .append("g")
207 |     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
208 | 
209 | var networkA = svg.append("g")
210 |     .attr("transform", "translate(0, " + networkMargin + ")");
211 | 
212 | networkA.append("rect")
213 |     .attr("class", "background")
214 |     .attr("width", width)
215 |     .attr("height", nodeSizeA + 2 * nodeMargin)
216 |     .attr("rx", nodeMargin * 0.7)
217 |     .attr("ry", nodeMargin * 0.7);
218 | 
219 | var cellA = networkA.selectAll(".cell")
220 |     .data(labelsA)
221 |   .enter().append("g")
222 |     .attr("class", "cell")
223 |     .attr("transform", function(d, i) { return "translate(" + xa(i) + ", " + nodeMargin + ")"; })
224 |     .on("mouseover", function(d, i) {
225 |       link.style("display", function(ld) {
226 |         return ld.ai === i ? "" : "none";
227 |       });
228 |     })
229 |     .on("mouseout", function() { link.style("display", ""); });
230 | 
231 | cellA.append("rect")
232 |     .attr("class", "shadow")
233 |     .attr("transform", "translate(1, 3)")
234 |     .attr("width", nodeSizeA)
235 |     .attr("height", nodeSizeA)
236 |     .attr("rx", 4)
237 |     .attr("ry", 4);
238 | 
239 | cellA.append("rect")
240 |     .attr("class", "node")
241 |     .attr("width", nodeSizeA)
242 |     .attr("height", nodeSizeA)
243 |     .attr("rx", 4)
244 |     .attr("ry", 4);
245 | 
246 | cellA.append("line")
247 |     .attr("class", "arrow")
248 |     .attr("marker-start", "url(#edgeArrowheadLeft)")
249 |     .attr("marker-end", "url(#edgeArrowhead)")
250 |     .attr("x1", nodeSizeA + 8)
251 |     .attr("x2", nodeSizeA + nodeMargin + 20)
252 |     .attr("y1", nodeSizeA / 2)
253 |     .attr("y2", nodeSizeA / 2);
254 | 
255 | cellA.append("line")
256 |     .attr("class", "arrow")
257 |     .attr("marker-end", "url(#edgeArrowhead)")
258 |     .attr("transform", "translate(" + nodeSizeA / 2 + ", 0)")
259 |     .attr("y1", nodeSizeA + nodeMargin * 2 - 2)
260 |     .attr("y2", nodeSizeA + 4);
261 | 
262 | cellA.append("text")
263 |     .style("opacity", 0.8)
264 |     .text("A")
265 |     .attr("dx", nodeSizeA / 2)
266 |     .attr("dy", nodeSizeA / 2 + 1);
267 | 
268 | cellA.append("text")
269 |     .attr("class", "label")
270 |     .attr("dx", nodeSizeA / 2)
271 |     .attr("dy", nodeSizeA + 24 + 8)
272 |     .text(function(d) { return d; });
273 | 
274 | cellA.append("rect")
275 |     .style("opacity", 0)
276 |     .attr("transform", "translate(-" + ((xa.step() - nodeSizeA) / 2) + ",-" + (nodeMargin + (networkMargin - networkHeightB) / 2) + ")")
277 |     .attr("width", xa.step())
278 |     .attr("height", networkHeightA + (networkMargin - networkHeightA) / 2);
279 | 
280 | //
281 | // Network B
282 | //
283 | 
284 | var networkB = svg.append("g");
285 | 
286 | networkB.append("rect")
287 |     .attr("class", "background")
288 |     .attr("width", width)
289 |     .attr("height", nodeSizeB + 2 * nodeMargin)
290 |     .attr("rx", nodeMargin * 0.7)
291 |     .attr("ry", nodeMargin * 0.7);
292 | 
293 | var cellB = networkB.selectAll(".cell")
294 |     .data(labelsB)
295 |   .enter().append("g")
296 |     .attr("class", "cell")
297 |     .attr("transform", function(d, i) { return "translate(" + xb(i) + "," + nodeMargin + ")"; })
298 |     .on("mouseover", function(d, i) {
299 |       link.style("display", function(ld) {
300 |         return ld.bi === i ? "" : "none";
301 |       });
302 |     })
303 |     .on("mouseout", function() { link.style("display", ""); });
304 | 
305 | cellB.append("rect")
306 |     .attr("class", "shadow")
307 |     .attr("transform", "translate(1, 3)")
308 |     .attr("width", nodeSizeB)
309 |     .attr("height", nodeSizeB)
310 |     .attr("rx", 4)
311 |     .attr("ry", 4);
312 | 
313 | cellB.append("rect")
314 |     .attr("class", "node")
315 |     .attr("width", nodeSizeB)
316 |     .attr("height", nodeSizeB)
317 |     .attr("rx", 4)
318 |     .attr("ry", 4);
319 | 
320 | cellB.append("line")
321 |     .attr("class", "arrow")
322 |     .attr("marker-end", "url(#edgeArrowhead)")
323 |     .attr("x1", nodeSizeB)
324 |     .attr("x2", nodeSizeB + nodeMargin + 14)
325 |     .attr("y1", nodeSizeB / 2)
326 |     .attr("y2", nodeSizeB / 2);
327 | 
328 | cellB.append("line")
329 |     .attr("class", "arrow")
330 |     .attr("marker-end", "url(#edgeArrowhead)")
331 |     .attr("transform", "translate(" + nodeSizeB / 2 + ", 0)")
332 |     .attr("y1", 0)
333 |     .attr("y2", -nodeMargin * 2 + 5);
334 | 
335 | cellB.append("text")
336 |     .style("opacity", 0.8)
337 |     .text("B")
338 |     .attr("dx", nodeSizeB / 2)
339 |     .attr("dy", nodeSizeB / 2 + 1);
340 | 
341 | cellB.append("text")
342 |     .attr("class", "label")
343 |     .attr("dx", function(d) { return d === "européenne" ? nodeSizeB / 2 + 15 : nodeSizeB / 2; })
344 |     .attr("dy", - 24 - 5)
345 |     .text(function(d) { return d; });
346 | 
347 | cellB.append("rect")
348 |     .style("opacity", 0)
349 |     .attr("transform", "translate(-" + ((xb.step() - nodeSizeB) / 2) + ",-" + nodeMargin + ")")
350 |     .attr("width", xb.step())
351 |     .attr("height", networkHeightB + (networkMargin - networkHeightB) / 2);
352 | //
353 | // Links
354 | //
355 | var linkGroup = svg.append("g").attr("class", ".link-group")
356 | 
357 | var link = linkGroup.selectAll(".link")
358 |     .data(linkData)
359 |   .enter().append("path")
360 |     .attr("class", "link")
361 |     .attr("d", link)
362 |     .style("opacity", function(d) { return d.v; });
363 | //
364 | //
365 | //
366 | // var hoverB = svg.selectAll(".hover-b")
367 | //     .data(labelsB)
368 | //   .enter().append("rect")
369 | //     .attr("class", "hover-b")
370 | //     .style("opacity", 0)
371 | //     .attr("transform", function(d, i) { return "translate(" + (xb(i) - xb.step() / 4) + ", 0)"; })
372 | //     .attr("width", xb.step())
373 | //     .attr("height", networkMargin / 2 + nodeSizeB)
374 | 
375 | 
376 | })();</script>
377 | 


--------------------------------------------------------------------------------
/public/assets/rnn_attentional_ex3.csv:
--------------------------------------------------------------------------------
 1 | 0.01, 0.02, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
 2 | 0.01, 0.02, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
 3 | 0.01, 0.02, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
 4 | 0.01, 0.02, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
 5 | 0.01, 0.02, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
 6 | 0.09, 0.11, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
 7 | 0.78, 0.33, 0.04, 0.02, 0.02, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
 8 | 0.01, 0.05, 0.61, 0.37, 0.78, 0.07, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
 9 | 0.01, 0.01, 0.05, 0.21, 0.07, 0.74, 0.31, 0.00, 0.01, 0.01, 0.01, 0.02, 0.01, 0.02, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
10 | 0.01, 0.01, 0.01, 0.04, 0.02, 0.02, 0.47, 0.98, 0.02, 0.01, 0.01, 0.02, 0.01, 0.02, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
11 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.96, 0.98, 0.28, 0.02, 0.02, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
12 | 0.01, 0.01, 0.01, 0.02, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.40, 0.49, 0.61, 0.30, 0.02, 0.02, 0.01, 0.01, 0.01, 0.02, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
13 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.05, 0.07, 0.09, 0.18, 0.96, 0.89, 0.87, 0.54, 0.02, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
14 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.02, 0.10, 0.05, 0.13, 0.01, 0.03, 0.05, 0.10, 0.14, 0.32, 0.13, 0.01, 0.02, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
15 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.12, 0.60, 0.04, 0.03, 0.02, 0.02, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
16 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.05, 0.41, 0.66, 0.02, 0.02, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
17 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.94, 0.72, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
18 | 0.01, 0.02, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.04, 0.76, 0.02, 0.01, 0.01, 0.01, 0.01, 0.02, 0.01, 0.01, 0.01
19 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.77, 0.45, 0.66, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
20 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.04, 0.01, 0.00, 0.02, 0.13, 0.98, 0.97, 0.02, 0.01, 0.01, 0.01
21 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.09, 0.00, 0.01, 0.01, 0.01, 0.02, 0.90, 0.02, 0.01, 0.01
22 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.08, 0.10, 0.01, 0.01, 0.01, 0.03, 0.96, 0.19, 0.01
23 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.13, 0.02, 0.01, 0.01, 0.01, 0.01, 0.60, 0.18
24 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.02, 0.60
25 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.02
26 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
27 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
28 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
29 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
30 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
31 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
32 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
33 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
34 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
35 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
36 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
37 | 0.01, 0.02, 0.02, 0.02, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
38 | 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.00, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01
39 | 


--------------------------------------------------------------------------------
/public/assets/rnn_attentional_ex3.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <figure id="attentional-ex3" class="l-page">
  3 |   <div class="stage">
  4 |     <svg>
  5 |       <g class="labels">
  6 |         <text transform="translate(0, 18)">output text</text>
  7 |         <text transform="translate(0, 55)">network B</text>
  8 |         <text transform="translate(0, 195)">network A</text>
  9 |         <text transform="translate(0, 250)">input audio</text>
 10 |       </g>
 11 |     </svg>
 12 |     <pre id="attentional-ex3-data" style="display: none;">0.01,0.02,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 13 | 0.01,0.02,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 14 | 0.01,0.02,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 15 | 0.01,0.02,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 16 | 0.01,0.02,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 17 | 0.09,0.11,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 18 | 0.78,0.33,0.04,0.02,0.02,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 19 | 0.01,0.05,0.61,0.37,0.78,0.07,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 20 | 0.01,0.01,0.05,0.21,0.07,0.74,0.31,0.00,0.01,0.01,0.01,0.02,0.01,0.02,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 21 | 0.01,0.01,0.01,0.04,0.02,0.02,0.47,0.98,0.02,0.01,0.01,0.02,0.01,0.02,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 22 | 0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.96,0.98,0.28,0.02,0.02,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 23 | 0.01,0.01,0.01,0.02,0.01,0.01,0.01,0.00,0.01,0.01,0.40,0.49,0.61,0.30,0.02,0.02,0.01,0.01,0.01,0.02,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 24 | 0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.05,0.07,0.09,0.18,0.96,0.89,0.87,0.54,0.02,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 25 | 0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.02,0.10,0.05,0.13,0.01,0.03,0.05,0.10,0.14,0.32,0.13,0.01,0.02,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 26 | 0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.12,0.60,0.04,0.03,0.02,0.02,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 27 | 0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.05,0.41,0.66,0.02,0.02,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 28 | 0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.94,0.72,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 29 | 0.01,0.02,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.04,0.76,0.02,0.01,0.01,0.01,0.01,0.02,0.01,0.01,0.01
 30 | 0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.77,0.45,0.66,0.01,0.01,0.01,0.01,0.01,0.01
 31 | 0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.04,0.01,0.00,0.02,0.13,0.98,0.97,0.02,0.01,0.01,0.01
 32 | 0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.09,0.00,0.01,0.01,0.01,0.02,0.90,0.02,0.01,0.01
 33 | 0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.08,0.10,0.01,0.01,0.01,0.03,0.96,0.19,0.01
 34 | 0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.13,0.02,0.01,0.01,0.01,0.01,0.60,0.18
 35 | 0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.02,0.60
 36 | 0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.02
 37 | 0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 38 | 0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 39 | 0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 40 | 0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 41 | 0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 42 | 0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 43 | 0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 44 | 0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 45 | 0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 46 | 0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 47 | 0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 48 | 0.01,0.02,0.02,0.02,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 49 | 0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.00,0.01,0.01,0.01,0.01,0.01,0.01,0.01,0.01
 50 | </pre>
 51 |     <img class="waveform" src="assets/rnn-attention-waveform-bw.png">
 52 |   </div>
 53 |   <figcaption>Figure derived from <a href="https://arxiv.org/pdf/1508.01211.pdf">Chan, <i>et al.</i> 2015</a></figcaption>
 54 |   <img class="pointer" src="assets/pointer.svg">
 55 | </figure>
 56 | <style>
 57 | #attentional-ex3 .stage {
 58 |   position: relative;
 59 |   margin-bottom: 24px;
 60 | }
 61 | #attentional-ex3 .waveform {
 62 |   position: absolute;
 63 |   opacity: 0.7;
 64 | }
 65 | #attentional-ex3 .pointer {
 66 |   position: absolute;
 67 |   width: 26px;
 68 |   height: 26px;
 69 |   top: 36px;
 70 |   left: -48px;
 71 | }
 72 | #attentional-ex3 svg {
 73 |   z-index: 1;
 74 |   position: relative;
 75 |   width: 100%;
 76 | }
 77 | #attentional-ex3 svg .labels {
 78 |   font-size: 12px;
 79 |   fill-opacity: 0.5;
 80 | }
 81 | #attentional-ex3 figcaption {
 82 |   text-align: center;
 83 | }
 84 | #attentional-ex3 .background {
 85 |   fill: rgb(240, 240, 245);
 86 |   fill-opacity: 0.8;
 87 | }
 88 | #attentional-ex3 .audio-background {
 89 |   fill: none;
 90 |   stroke: black;
 91 |   stroke-opacity: 0.3;
 92 | }
 93 | #attentional-ex3 .cell .node {
 94 |   fill: white;
 95 |   fill-opacity: 0.9;
 96 |   stroke: black;
 97 |   stroke-width: 1px;
 98 |   stroke-opacity: 0.15;
 99 | }
100 | #attentional-ex3 .cell:hover .node {
101 |   stroke-opacity: 1;
102 | }
103 | #attentional-ex3 .cell .shadow {
104 |   fill: black;
105 |   fill-opacity: 0.07;
106 | }
107 | #attentional-ex3 .cell text {
108 |   font-size: 13px;
109 |   fill-opacity: 0.5;
110 |   text-anchor: middle;
111 |   alignment-baseline: middle;
112 | }
113 | #attentional-ex3 .cell text.label {
114 |   font-size: 15px;
115 |   /*fill-opacity: 0.8;*/
116 |   text-anchor: middle;
117 |   alignment-baseline: middle;
118 | }
119 | #attentional-ex3 .cell:last-child text.label {
120 |   font-size: 10px;
121 | }
122 | #attentional-ex3 .link-group {
123 |   transition: opacity, 0.3s, linear;
124 | }
125 | #attentional-ex3 .link-group .node-highlight {
126 |   transition: stroke-opacity, 0.3s, linear;
127 |   stroke: black;
128 |   stroke-opacity: 0;
129 |   fill: none;
130 | }
131 | #attentional-ex3 .link-group:hover .node-highlight {
132 |   stroke-opacity: 1;
133 | }
134 | #attentional-ex3 .link {
135 |   fill: none;
136 |   stroke: rgb(131, 89, 178);
137 |   stroke-width: 2px;
138 |   pointer-events: none;
139 | }
140 | #attentional-ex3 .arrow {
141 |   stroke: black;
142 |   stroke-opacity: 0.3;
143 | }
144 | #attentional-ex3 .cell:last-child .arrow:first-of-type {
145 |   display: none;
146 | }
147 | #attentional-ex3 .tick {
148 |   stroke: black;
149 |   stroke-opacity: 0.2;
150 | }
151 | </style>
152 | 
153 | <script>
154 | (function() {
155 | 
156 | var data = d3.csvParseRows(d3.select("#attentional-ex3-data").text());
157 | var labelsB = ["h","o","w","_","m","u","c","h","_","w","o","u","l","d","_","a","_","w","o","o","d","c","h","u","c","k","_","c","h","u","c","k","<end>"];
158 | var labelsA = d3.range(data.length);
159 | 
160 | var linkData = [];
161 | data.forEach(function(a, ai) {
162 |   a.forEach(function(b, bi) {
163 |     linkData.push({
164 |       ai: +ai,
165 |       bi: +bi,
166 |       v: +data[ai][bi]
167 |     });
168 |   });
169 | });
170 | 
171 | var nodeMargin = 8;
172 | var networkMargin = 140;
173 | var audioHeight = 60;
174 | 
175 | var html = d3.select("#attentional-ex3");
176 | var outerWidth = 984; //Math.max(700, html.node().getBoundingClientRect().width);
177 | var outerHeight = 280;
178 | var margin = {top: 36, right: nodeMargin + 80, bottom: 24, left: nodeMargin};
179 | var width = outerWidth - margin.left - margin.right;
180 | var height = outerHeight - margin.top - margin.bottom;
181 | 
182 | var xa = d3.scaleBand()
183 |     .domain(d3.range(labelsA.length))
184 |     .paddingInner(0.5)
185 |     .range([nodeMargin, width - nodeMargin]);
186 | 
187 | var xb = d3.scaleBand()
188 |     .domain(d3.range(labelsB.length))
189 |     .paddingInner(0.5)
190 |     .range([nodeMargin, width - nodeMargin]);
191 | 
192 | var nodeSizeA = xa.bandwidth();
193 | var nodeSizeB = xb.bandwidth();
194 | 
195 | var networkHeightA = nodeSizeA + nodeMargin * 2;
196 | var networkHeightB = nodeSizeB + nodeMargin * 2;
197 | 
198 | var link = function(d) {
199 |   return "M" + (xb(d.bi) + nodeSizeB / 2) + "," + (nodeSizeB + nodeMargin)
200 |       + "C" + (xb(d.bi) + nodeSizeB / 2) + "," + (nodeSizeB + networkMargin / 3 + nodeMargin)
201 |       + " " + (xa(d.ai) + nodeSizeA / 2) + "," + (networkMargin - networkMargin / 3 + nodeMargin)
202 |       + " " + (xa(d.ai) + nodeSizeA / 2) + "," + (networkMargin + nodeMargin);
203 | };
204 | 
205 | var svg = html.select("svg")
206 |     .attr("viewBox", "0 0 " + outerWidth + " " + outerHeight)
207 |   .append("g")
208 |     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
209 | 
210 | html.select("svg .labels")
211 |     .attr("transform", "translate(" + (width + nodeMargin * 3) + ", 0)");
212 | 
213 | var audio = svg.append("g")
214 |     .attr("class", "audio")
215 |     .attr("transform", "translate(0, " + (nodeMargin * 4 + nodeSizeA + networkMargin) + ")");
216 | 
217 | //
218 | // Network A
219 | //
220 | 
221 | var networkA = svg.append("g")
222 |     .attr("transform", "translate(0, " + networkMargin + ")");
223 | 
224 | networkA.append("rect")
225 |     .attr("class", "background")
226 |     .attr("width", width)
227 |     .attr("height", nodeSizeA + 2 * nodeMargin)
228 |     .attr("rx", nodeMargin * 0.7)
229 |     .attr("ry", nodeMargin * 0.7);
230 | 
231 | var cellA = networkA.selectAll(".cell")
232 |     .data(labelsA)
233 |   .enter().append("g")
234 |     .attr("class", "cell")
235 |     .attr("transform", function(d, i) { return "translate(" + xa(i) + ", " + nodeMargin + ")"; })
236 |     .on("mouseover", function(d, i) {
237 |       link.style("display", function(ld) {
238 |         return ld.ai === i ? "" : "none";
239 |       });
240 |     })
241 |     .on("mouseout", function() { link.style("display", ""); });
242 | 
243 | cellA.append("rect")
244 |     .attr("class", "shadow")
245 |     .attr("transform", "translate(1, 3)")
246 |     .attr("width", nodeSizeA)
247 |     .attr("height", nodeSizeA)
248 |     .attr("rx", 4)
249 |     .attr("ry", 4);
250 | 
251 | cellA.append("rect")
252 |     .attr("class", "node")
253 |     .attr("width", nodeSizeA)
254 |     .attr("height", nodeSizeA)
255 |     .attr("rx", 2)
256 |     .attr("ry", 2);
257 | 
258 | cellA.append("line")
259 |     .attr("class", "arrow")
260 |     .attr("marker-end", "url(#edgeArrowhead)")
261 |     .attr("x1", nodeSizeA)
262 |     .attr("x2", nodeSizeA + nodeMargin)
263 |     .attr("y1", nodeSizeA / 2)
264 |     .attr("y2", nodeSizeA / 2);
265 | 
266 | cellA.append("line")
267 |     .attr("class", "arrow")
268 |     .attr("marker-end", "url(#edgeArrowhead)")
269 |     .attr("transform", "translate(" + nodeSizeA / 2 + ", " + nodeSizeA + ")")
270 |     .attr("y1",  nodeMargin * 3)
271 |     .attr("y2",  4);
272 | 
273 | cellA.append("rect")
274 |     .style("opacity", 0)
275 |     .attr("transform", "translate(-" + ((xa.step() - nodeSizeA) / 2) + ",-" + (nodeMargin + (networkMargin - networkHeightB) / 2) + ")")
276 |     .attr("width", xa.step())
277 |     .attr("height", networkHeightA + (networkMargin - networkHeightA) / 2 + audioHeight + nodeMargin * 2);
278 | 
279 | 
280 | //
281 | // Network B
282 | //
283 | 
284 | var networkB = svg.append("g");
285 | 
286 | networkB.append("rect")
287 |     .attr("class", "background")
288 |     .attr("width", width)
289 |     .attr("height", nodeSizeB + 2 * nodeMargin)
290 |     .attr("rx", nodeMargin * 0.7)
291 |     .attr("ry", nodeMargin * 0.7);
292 | 
293 | var cellB = networkB.selectAll(".cell")
294 |     .data(labelsB)
295 |   .enter().append("g")
296 |     .attr("class", "cell")
297 |     .attr("transform", function(d, i) { return "translate(" + xb(i) + ", " + nodeMargin + ")"; })
298 |     .on("mouseover", function(d, i) {
299 |       link.style("display", function(ld) {
300 |         return ld.bi === i ? "" : "none";
301 |       });
302 |     })
303 |     .on("mouseout", function() { link.style("display", ""); });
304 | 
305 | cellB.append("rect")
306 |     .attr("class", "shadow")
307 |     .attr("transform", "translate(1, 3)")
308 |     .attr("width", nodeSizeB)
309 |     .attr("height", nodeSizeB)
310 |     .attr("rx", 4)
311 |     .attr("ry", 4);
312 | 
313 | cellB.append("rect")
314 |     .attr("class", "node")
315 |     .attr("width", nodeSizeB)
316 |     .attr("height", nodeSizeB)
317 |     .attr("rx", 2)
318 |     .attr("ry", 2);
319 | 
320 | cellB.append("line")
321 |     .attr("class", "arrow")
322 |     .attr("marker-end", "url(#edgeArrowhead)")
323 |     .attr("x1", nodeSizeB)
324 |     .attr("x2", nodeSizeB + nodeMargin)
325 |     .attr("y1", nodeSizeB / 2)
326 |     .attr("y2", nodeSizeB / 2);
327 | 
328 | cellB.append("line")
329 |     .attr("class", "arrow")
330 |     .attr("marker-end", "url(#edgeArrowhead)")
331 |     .attr("transform", "translate(" + nodeSizeB / 2 + ", 0)")
332 |     .attr("y1", 0)
333 |     .attr("y2", -nodeMargin * 2);
334 | 
335 | cellB.append("text")
336 |     .attr("class", "label")
337 |     .attr("dx", nodeSizeB / 2)
338 |     .attr("dy", - nodeMargin * 2 - 15)
339 |     .text(function(d) { return d; });
340 | 
341 | cellB.append("rect")
342 |     .style("opacity", 0)
343 |     .attr("transform", "translate(-" + ((xb.step() - nodeSizeB) / 2) + ",-" + nodeMargin + ")")
344 |     .attr("width", xb.step())
345 |     .attr("height", networkHeightB + (networkMargin - networkHeightB) / 2);
346 | //
347 | // Links
348 | //
349 | 
350 | var linkGroup = svg.append("g").attr("class", ".link-group")
351 | 
352 | var link = linkGroup.selectAll(".link")
353 |     .data(linkData)
354 |   .enter().append("path")
355 |     .attr("class", "link")
356 |     .attr("d", link)
357 |     .style("opacity", function(d) { return d.v; });
358 | 
359 | //
360 | // Audio
361 | //
362 | 
363 | html.select(".waveform")
364 |     .style("left", "1%")
365 |     .style("top", "76%")
366 |     .style("width", "90%")
367 |     .style("height", "20%")
368 | 
369 | audio.append("rect")
370 |     .attr("class", "audio-background")
371 |     .attr("width", width)
372 |     .attr("height", audioHeight)
373 |     .attr("rx", nodeMargin * 0.7)
374 |     .attr("ry", nodeMargin * 0.7);
375 | 
376 | audio.selectAll(".tick")
377 |     .data(labelsA)
378 |   .enter().append("line")
379 |     .style("display", function(d) { return d == 0 ? "none" : ""; })
380 |     .attr("class", "tick")
381 |     .attr("transform", "translate(-" + (xa.step() - xa.bandwidth()) / 2 + ", " + 0 + ")")
382 |     .attr("x1", function(d) { return xa(d); })
383 |     .attr("x2", function(d) { return xa(d); })
384 |     .attr("y2", audioHeight)
385 | 
386 | audio.selectAll(".segment")
387 |     .data(labelsA)
388 |   .enter().append("rect")
389 |     .style("opacity", 0)
390 |     .attr("class", "segment")
391 |     .attr("transform", function(d) {
392 |       return "translate(" + ((-xa.step() + xa.bandwidth()) / 2 + xa(d)) + ", " + nodeMargin + ")";
393 |     })
394 |     .attr("width", xa.step())
395 |     .attr("height", audioHeight)
396 | 
397 | })();
398 | </script>
399 | 


--------------------------------------------------------------------------------
/public/assets/rnn_basic_rnn.svg:
--------------------------------------------------------------------------------
  1 | <svg id="background" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 648 144">
  2 |   <defs>
  3 |     <symbol id="rnn-bg" data-name="rnn-bg" viewBox="0 0 49.5 49.5">
  4 |       <rect x="0.75" y="0.75" width="48" height="48" rx="6" ry="6" fill="#fff" fill-opacity="0.8" stroke="#666" stroke-width="1.5"/>
  5 |     </symbol>
  6 |     <symbol id="rnn-a" data-name="rnn-a" viewBox="0 0 49.5 49.5">
  7 |       <use id="rnn-bg-3" data-name="rnn-bg" width="49.5" height="49.5" xlink:href="#rnn-bg"/>
  8 |       <path d="M29.77,31.75l-1.93-4.94H21.6l-1.91,4.94H17.86L24,16.14h1.52l6.11,15.61H29.77Zm-2.5-6.57-1.81-4.82q-0.35-.91-0.72-2.24a20.34,20.34,0,0,1-.67,2.24l-1.83,4.82h5Z" fill="#666"/>
  9 |     </symbol>
 10 |   </defs>
 11 |   <title>rnn</title>
 12 |   <g id="_Group_" data-name="&lt;Group&gt;">
 13 |     <rect x="0.06" y="29.93" width="599.94" height="72" rx="10" ry="10" fill="#f0f0f5"/>
 14 |     <g opacity="0.1">
 15 |       <rect x="0.06" y="29.93" width="599.94" height="72" rx="10" ry="10" fill="none" stroke="#667780"/>
 16 |     </g>
 17 |   </g>
 18 |   <g id="_Group_2" data-name="&lt;Group&gt;">
 19 |     <g opacity="0.1">
 20 |       <rect x="13.67" y="43.93" width="48" height="48" rx="6" ry="6" opacity="0.8"/>
 21 |       <rect x="13.67" y="43.93" width="48" height="48" rx="6" ry="6" fill="none" stroke="#000" stroke-width="1.5"/>
 22 |       <path d="M42.69,74.93L40.75,70H34.52l-1.91,4.94H30.78l6.14-15.61h1.52l6.11,15.61H42.69Zm-2.5-6.57-1.81-4.82Q38,62.63,37.66,61.3A20.34,20.34,0,0,1,37,63.55l-1.83,4.82h5Z"/>
 23 |     </g>
 24 |     <use width="49.5" height="49.5" transform="translate(11.92 41.18)" xlink:href="#rnn-a"/>
 25 |   </g>
 26 |   <g>
 27 |     <g opacity="0.1">
 28 |       <rect x="145.67" y="43.93" width="48" height="48" rx="6" ry="6" opacity="0.8"/>
 29 |       <rect x="145.67" y="43.93" width="48" height="48" rx="6" ry="6" fill="none" stroke="#000" stroke-width="1.5"/>
 30 |       <path d="M174.69,74.93L172.75,70h-6.23l-1.91,4.94h-1.83l6.14-15.61h1.52l6.11,15.61h-1.87Zm-2.5-6.57-1.81-4.82q-0.35-.91-0.72-2.24a20.34,20.34,0,0,1-.67,2.24l-1.83,4.82h5Z"/>
 31 |     </g>
 32 |     <use width="49.5" height="49.5" transform="translate(143.92 41.18)" xlink:href="#rnn-a"/>
 33 |   </g>
 34 |   <g id="_Group_3" data-name="&lt;Group&gt;">
 35 |     <g opacity="0.1">
 36 |       <rect x="277.67" y="43.93" width="48" height="48" rx="6" ry="6" opacity="0.8"/>
 37 |       <rect x="277.67" y="43.93" width="48" height="48" rx="6" ry="6" fill="none" stroke="#000" stroke-width="1.5"/>
 38 |       <path d="M306.69,74.93L304.75,70h-6.23l-1.91,4.94h-1.83l6.14-15.61h1.52l6.11,15.61h-1.87Zm-2.5-6.57-1.81-4.82q-0.35-.91-0.72-2.24a20.34,20.34,0,0,1-.67,2.24l-1.83,4.82h5Z"/>
 39 |     </g>
 40 |     <use width="49.5" height="49.5" transform="translate(275.92 41.18)" xlink:href="#rnn-a"/>
 41 |   </g>
 42 |   <g id="_Group_4" data-name="&lt;Group&gt;">
 43 |     <g opacity="0.1">
 44 |       <rect x="409.67" y="43.93" width="48" height="48" rx="6" ry="6" opacity="0.8"/>
 45 |       <rect x="409.67" y="43.93" width="48" height="48" rx="6" ry="6" fill="none" stroke="#000" stroke-width="1.5"/>
 46 |       <path d="M438.69,74.93L436.75,70h-6.23l-1.91,4.94h-1.83l6.14-15.61h1.52l6.11,15.61h-1.87Zm-2.5-6.57-1.81-4.82q-0.35-.91-0.72-2.24a20.34,20.34,0,0,1-.67,2.24l-1.83,4.82h5Z"/>
 47 |     </g>
 48 |     <use width="49.5" height="49.5" transform="translate(407.92 41.18)" xlink:href="#rnn-a"/>
 49 |   </g>
 50 |   <g id="_Group_5" data-name="&lt;Group&gt;">
 51 |     <g opacity="0.1">
 52 |       <rect x="540.92" y="43.93" width="48" height="48" rx="6" ry="6" opacity="0.8"/>
 53 |       <rect x="540.92" y="43.93" width="48" height="48" rx="6" ry="6" fill="none" stroke="#000" stroke-width="1.5"/>
 54 |       <path d="M569.94,74.93L568,70h-6.23l-1.91,4.94H558l6.14-15.61h1.52l6.11,15.61h-1.87Zm-2.5-6.57-1.81-4.82q-0.35-.91-0.72-2.24a20.34,20.34,0,0,1-.67,2.24l-1.83,4.82h5Z"/>
 55 |     </g>
 56 |     <use width="49.5" height="49.5" transform="translate(539.17 41.18)" xlink:href="#rnn-a"/>
 57 |   </g>
 58 |   <text transform="translate(17.55 129.93)" opacity="0.6" font-size="13" font-family="Open Sans">x0</text>
 59 |   <text transform="translate(41.68 129.93)" opacity="0.6" font-size="13" font-family="Open Sans">y0</text>
 60 |   <text transform="translate(149.55 129.93)" opacity="0.6" font-size="13" font-family="Open Sans">x1</text>
 61 |   <text transform="translate(173.68 129.93)" opacity="0.6" font-size="13" font-family="Open Sans">y1</text>
 62 |   <text transform="translate(281.55 129.93)" opacity="0.6" font-size="13" font-family="Open Sans">x2</text>
 63 |   <text transform="translate(305.68 129.93)" opacity="0.6" font-size="13" font-family="Open Sans">y2</text>
 64 |   <text transform="translate(413.55 129.93)" opacity="0.6" font-size="13" font-family="Open Sans">x3</text>
 65 |   <text transform="translate(437.68 129.93)" opacity="0.6" font-size="13" font-family="Open Sans">y3</text>
 66 |   <g opacity="0.6">
 67 |     <text transform="translate(8.32 17.93)" font-size="13" font-family="Open Sans">One cell...</text>
 68 |   </g>
 69 |   <g opacity="0.6">
 70 |     <text transform="translate(113.13 17.93)" font-size="13" font-family="Open Sans">can be used over...</text>
 71 |   </g>
 72 |   <g opacity="0.6">
 73 |     <text transform="translate(269.97 17.93)" font-size="13" font-family="Open Sans">and over...</text>
 74 |   </g>
 75 |   <g opacity="0.6">
 76 |     <text transform="translate(401.97 17.93)" font-size="13" font-family="Open Sans">and over...</text>
 77 |   </g>
 78 |   <g>
 79 |     <line x1="60.67" y1="66.43" x2="133.24" y2="66.43" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 80 |     <path d="M138.67,66.43A27.2,27.2,0,0,0,131,70.71l1.55-4.28L131,62.15A27.18,27.18,0,0,0,138.67,66.43Z" fill="#666"/>
 81 |   </g>
 82 |   <g>
 83 |     <line x1="24.67" y1="113.93" x2="24.67" y2="100.43" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 84 |     <path d="M24.67,95A27.2,27.2,0,0,0,29,102.69l-4.28-1.55-4.28,1.55A27.18,27.18,0,0,0,24.67,95Z" fill="#666"/>
 85 |   </g>
 86 |   <g>
 87 |     <line x1="49.67" y1="89.43" x2="49.67" y2="108.5" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 88 |     <path d="M49.67,113.93a27.2,27.2,0,0,0-4.28-7.69l4.28,1.55L54,106.24A27.18,27.18,0,0,0,49.67,113.93Z" fill="#666"/>
 89 |   </g>
 90 |   <g>
 91 |     <line x1="156.67" y1="113.93" x2="156.67" y2="100.43" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 92 |     <path d="M156.67,95a27.2,27.2,0,0,0,4.28,7.69l-4.28-1.55-4.28,1.55A27.18,27.18,0,0,0,156.67,95Z" fill="#666"/>
 93 |   </g>
 94 |   <g>
 95 |     <line x1="181.67" y1="89.43" x2="181.67" y2="108.5" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 96 |     <path d="M181.67,113.93a27.2,27.2,0,0,0-4.28-7.69l4.28,1.55,4.28-1.55A27.18,27.18,0,0,0,181.67,113.93Z" fill="#666"/>
 97 |   </g>
 98 |   <g>
 99 |     <line x1="289.67" y1="113.93" x2="289.67" y2="100.43" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
100 |     <path d="M289.67,95a27.2,27.2,0,0,0,4.28,7.69l-4.28-1.55-4.28,1.55A27.18,27.18,0,0,0,289.67,95Z" fill="#666"/>
101 |   </g>
102 |   <g>
103 |     <line x1="312.67" y1="89.43" x2="312.67" y2="108.5" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
104 |     <path d="M312.67,113.93a27.2,27.2,0,0,0-4.28-7.69l4.28,1.55,4.28-1.55A27.18,27.18,0,0,0,312.67,113.93Z" fill="#666"/>
105 |   </g>
106 |   <g>
107 |     <line x1="420.67" y1="113.93" x2="420.67" y2="100.43" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
108 |     <path d="M420.67,95a27.2,27.2,0,0,0,4.28,7.69l-4.28-1.55-4.28,1.55A27.18,27.18,0,0,0,420.67,95Z" fill="#666"/>
109 |   </g>
110 |   <g>
111 |     <line x1="444.67" y1="89.43" x2="444.67" y2="108.5" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
112 |     <path d="M444.67,113.93a27.2,27.2,0,0,0-4.28-7.69l4.28,1.55,4.28-1.55A27.18,27.18,0,0,0,444.67,113.93Z" fill="#666"/>
113 |   </g>
114 |   <g>
115 |     <line x1="192.67" y1="66.43" x2="265.24" y2="66.43" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
116 |     <path d="M270.67,66.43A27.2,27.2,0,0,0,263,70.71l1.55-4.28L263,62.15A27.18,27.18,0,0,0,270.67,66.43Z" fill="#666"/>
117 |   </g>
118 |   <g>
119 |     <line x1="324.67" y1="66.43" x2="397.24" y2="66.43" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
120 |     <path d="M402.67,66.43A27.2,27.2,0,0,0,395,70.71l1.55-4.28L395,62.15A27.18,27.18,0,0,0,402.67,66.43Z" fill="#666"/>
121 |   </g>
122 |   <text transform="translate(544.8 129.93)" opacity="0.6" font-size="13" font-family="Open Sans">x4</text>
123 |   <text transform="translate(568.93 129.93)" opacity="0.6" font-size="13" font-family="Open Sans">y4</text>
124 |   <g opacity="0.6">
125 |     <text transform="translate(547.02 17.93)" font-size="13" font-family="Open Sans">again.</text>
126 |   </g>
127 |   <g>
128 |     <line x1="551.92" y1="113.93" x2="551.92" y2="100.43" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
129 |     <path d="M551.92,95a27.2,27.2,0,0,0,4.28,7.69l-4.28-1.55-4.28,1.55A27.18,27.18,0,0,0,551.92,95Z" fill="#666"/>
130 |   </g>
131 |   <g>
132 |     <line x1="575.92" y1="89.43" x2="575.92" y2="108.5" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
133 |     <path d="M575.92,113.93a27.2,27.2,0,0,0-4.28-7.69l4.28,1.55,4.28-1.55A27.18,27.18,0,0,0,575.92,113.93Z" fill="#666"/>
134 |   </g>
135 |   <g>
136 |     <line x1="455.92" y1="66.43" x2="528.49" y2="66.43" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
137 |     <path d="M533.92,66.43a27.2,27.2,0,0,0-7.69,4.28l1.55-4.28-1.55-4.28A27.18,27.18,0,0,0,533.92,66.43Z" fill="#666"/>
138 |   </g>
139 | </svg>
140 | 


--------------------------------------------------------------------------------
/public/assets/rnn_preview_act.svg:
--------------------------------------------------------------------------------
 1 | <svg id="text" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 144 108">
 2 |   <defs>
 3 |     <symbol id="rnn-bg" data-name="rnn-bg" viewBox="0 0 49.5 49.5">
 4 |       <rect x="0.75" y="0.75" width="48" height="48" rx="6" ry="6" fill="#fff" fill-opacity="0.8" stroke="#666" stroke-width="1.5"/>
 5 |     </symbol>
 6 |     <symbol id="rnn-s" data-name="rnn-s" viewBox="0 0 49.5 49.5">
 7 |       <use id="rnn-bg-3" data-name="rnn-bg" width="49.5" height="49.5" xlink:href="#rnn-bg"/>
 8 |       <path d="M29.68,27.61a3.81,3.81,0,0,1-1.49,3.2,6.46,6.46,0,0,1-4,1.15,10.1,10.1,0,0,1-4.25-.71V29.51a11.16,11.16,0,0,0,2.08.64,10.92,10.92,0,0,0,2.23.23,4.49,4.49,0,0,0,2.72-.69,2.25,2.25,0,0,0,.92-1.91,2.45,2.45,0,0,0-.32-1.32,3,3,0,0,0-1.08-1,15.14,15.14,0,0,0-2.31-1A7.38,7.38,0,0,1,21,22.68a4.06,4.06,0,0,1-.93-2.77A3.45,3.45,0,0,1,21.45,17,5.61,5.61,0,0,1,25,16a10.54,10.54,0,0,1,4.26.85l-0.56,1.57A9.63,9.63,0,0,0,25,17.6a3.62,3.62,0,0,0-2.24.62,2,2,0,0,0-.81,1.71,2.62,2.62,0,0,0,.3,1.32,2.8,2.8,0,0,0,1,.95,12.47,12.47,0,0,0,2.16,1A8.56,8.56,0,0,1,28.76,25,3.68,3.68,0,0,1,29.68,27.61Z" fill="#5b5b5b"/>
 9 |     </symbol>
10 |   </defs>
11 |   <title>rnn</title>
12 |   <g>
13 |     <g id="_Group_" data-name="&lt;Group&gt;">
14 |       <rect x="0.4" y="37" width="88.31" height="33.08" rx="5" ry="5" fill="#f0f0f5"/>
15 |       <g opacity="0.1">
16 |         <rect x="0.4" y="37" width="88.31" height="33.08" rx="5" ry="5" fill="none" stroke="#667780"/>
17 |       </g>
18 |     </g>
19 |     <g>
20 |       <line x1="28.51" y1="53.77" x2="52.95" y2="53.77" fill="none" stroke="#666" stroke-miterlimit="10"/>
21 |       <path d="M56.57,53.77a18.13,18.13,0,0,0-5.13,2.85l1-2.85-1-2.85A18.12,18.12,0,0,0,56.57,53.77Z" fill="#666"/>
22 |     </g>
23 |     <use id="rnn-s-3" data-name="rnn-s" width="49.5" height="49.5" transform="translate(6.43 42.05) scale(0.46)" xlink:href="#rnn-s"/>
24 |     <use id="rnn-s-6" data-name="rnn-s" width="49.5" height="49.5" transform="translate(60.71 42.05) scale(0.46)" xlink:href="#rnn-s"/>
25 |   </g>
26 |   <g>
27 |     <g id="_Group_2" data-name="&lt;Group&gt;">
28 |       <rect x="0.6" y="74.92" width="143.4" height="33.08" rx="5" ry="5" fill="#f0f0f5"/>
29 |       <g opacity="0.1">
30 |         <rect x="0.6" y="74.92" width="143.4" height="33.08" rx="5" ry="5" fill="none" stroke="#667780"/>
31 |       </g>
32 |     </g>
33 |     <g>
34 |       <line x1="28.51" y1="91.69" x2="52.95" y2="91.69" fill="none" stroke="#666" stroke-miterlimit="10"/>
35 |       <path d="M56.57,91.69a18.13,18.13,0,0,0-5.13,2.85l1-2.85-1-2.85A18.12,18.12,0,0,0,56.57,91.69Z" fill="#666"/>
36 |     </g>
37 |     <g>
38 |       <line x1="84.59" y1="91.69" x2="109.41" y2="91.69" fill="none" stroke="#666" stroke-miterlimit="10"/>
39 |       <path d="M113,91.69a18.13,18.13,0,0,0-5.13,2.85l1-2.85-1-2.85A18.12,18.12,0,0,0,113,91.69Z" fill="#666"/>
40 |     </g>
41 |     <use id="rnn-s-9" data-name="rnn-s" width="49.5" height="49.5" transform="translate(6.43 79.96) scale(0.46)" xlink:href="#rnn-s"/>
42 |     <use id="rnn-s-12" data-name="rnn-s" width="49.5" height="49.5" transform="translate(61.39 79.96) scale(0.46)" xlink:href="#rnn-s"/>
43 |     <use id="rnn-s-15" data-name="rnn-s" width="49.5" height="49.5" transform="translate(116.34 79.96) scale(0.46)" xlink:href="#rnn-s"/>
44 |   </g>
45 |   <g>
46 |     <g id="_Group_3" data-name="&lt;Group&gt;">
47 |       <rect x="0.16" width="35.61" height="33.08" rx="5" ry="5" fill="#f0f0f5"/>
48 |       <g opacity="0.1">
49 |         <rect x="0.16" width="35.61" height="33.08" rx="5" ry="5" fill="none" stroke="#667780"/>
50 |       </g>
51 |     </g>
52 |     <use id="rnn-s-18" data-name="rnn-s" width="49.5" height="49.5" transform="translate(6.43 5.05) scale(0.46)" xlink:href="#rnn-s"/>
53 |   </g>
54 | </svg>
55 | 


--------------------------------------------------------------------------------
/public/assets/rnn_preview_ai.svg:
--------------------------------------------------------------------------------
 1 | <svg id="text" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 144 108">
 2 |   <defs>
 3 |     <symbol id="rnn-bg" data-name="rnn-bg" viewBox="0 0 49.5 49.5">
 4 |       <rect x="0.75" y="0.75" width="48" height="48" rx="6" ry="6" fill="#fff" fill-opacity="0.8" stroke="#666" stroke-width="1.5"/>
 5 |     </symbol>
 6 |     <symbol id="rnn-a" data-name="rnn-a" viewBox="0 0 49.5 49.5">
 7 |       <use id="rnn-bg-3" data-name="rnn-bg" width="49.5" height="49.5" xlink:href="#rnn-bg"/>
 8 |       <path d="M29.77,31.75l-1.93-4.94H21.6l-1.91,4.94H17.86L24,16.14h1.52l6.11,15.61H29.77Zm-2.5-6.57-1.81-4.82q-0.35-.91-0.72-2.24a20.34,20.34,0,0,1-.67,2.24l-1.83,4.82h5Z" fill="#666"/>
 9 |     </symbol>
10 |     <symbol id="rnn-b" data-name="rnn-b" viewBox="0 0 49.5 49.5">
11 |       <use id="rnn-bg-12" data-name="rnn-bg" width="49.5" height="49.5" xlink:href="#rnn-bg"/>
12 |       <path d="M19.83,16.21h4.39a8.29,8.29,0,0,1,4.48.92,3.27,3.27,0,0,1,1.38,2.92,3.38,3.38,0,0,1-.77,2.28,3.72,3.72,0,0,1-2.25,1.16v0.11q3.54,0.6,3.54,3.72a4,4,0,0,1-1.41,3.25,6,6,0,0,1-3.94,1.17H19.83V16.21Zm1.81,6.66h3a4.85,4.85,0,0,0,2.75-.6,2.32,2.32,0,0,0,.84-2,2,2,0,0,0-.94-1.89,5.84,5.84,0,0,0-3-.58H21.64v5.09Zm0,1.53v5.82h3.24a4.62,4.62,0,0,0,2.83-.73,2.69,2.69,0,0,0,1-2.28,2.42,2.42,0,0,0-1-2.13,5.2,5.2,0,0,0-3-.68H21.64Z" fill="#666"/>
13 |     </symbol>
14 |   </defs>
15 |   <title>rnn</title>
16 |   <g>
17 |     <g id="_Group_" data-name="&lt;Group&gt;">
18 |       <rect x="-0.01" y="68.04" width="144.02" height="39.19" rx="5" ry="5" fill="#f0f0f5"/>
19 |       <g opacity="0.1">
20 |         <rect x="-0.01" y="68.04" width="144.02" height="39.19" rx="5" ry="5" fill="none" stroke="#667780"/>
21 |       </g>
22 |     </g>
23 |     <use id="rnn-a-3" data-name="rnn-a" width="49.5" height="49.5" transform="translate(6.62 74.17) scale(0.54)" xlink:href="#rnn-a"/>
24 |     <use width="49.5" height="49.5" transform="translate(59.97 74.17) scale(0.54)" xlink:href="#rnn-a"/>
25 |     <use id="rnn-a-8" data-name="rnn-a" width="49.5" height="49.5" transform="translate(111.4 74.17) scale(0.54)" xlink:href="#rnn-a"/>
26 |     <g>
27 |       <line x1="33.16" y1="87.91" x2="53.7" y2="87.91" fill="none" stroke="#666" stroke-miterlimit="10"/>
28 |       <path d="M57.32,87.91a18.13,18.13,0,0,0-5.13,2.85l1-2.85-1-2.85A18.12,18.12,0,0,0,57.32,87.91Z" fill="#666"/>
29 |     </g>
30 |     <g>
31 |       <line x1="86.09" y1="87.91" x2="105.65" y2="87.91" fill="none" stroke="#666" stroke-miterlimit="10"/>
32 |       <path d="M109.27,87.91a18.13,18.13,0,0,0-5.13,2.85l1-2.85-1-2.85A18.12,18.12,0,0,0,109.27,87.91Z" fill="#666"/>
33 |     </g>
34 |   </g>
35 |   <g id="_Group_2" data-name="&lt;Group&gt;">
36 |     <rect x="-0.01" y="-0.01" width="144.02" height="39.19" rx="5" ry="5" fill="#f0f0f5"/>
37 |     <g opacity="0.1">
38 |       <rect x="-0.01" y="-0.01" width="144.02" height="39.19" rx="5" ry="5" fill="none" stroke="#667780"/>
39 |     </g>
40 |   </g>
41 |   <use id="rnn-b-3" data-name="rnn-b" width="49.5" height="49.5" transform="translate(6.08 5.62) scale(0.54)" xlink:href="#rnn-b"/>
42 |   <use id="rnn-b-6" data-name="rnn-b" width="49.5" height="49.5" transform="translate(58.59 5.62) scale(0.54)" xlink:href="#rnn-b"/>
43 |   <use id="rnn-b-9" data-name="rnn-b" width="49.5" height="49.5" transform="translate(111.09 5.62) scale(0.54)" xlink:href="#rnn-b"/>
44 |   <g>
45 |     <line x1="33.16" y1="19.86" x2="51.74" y2="19.86" fill="none" stroke="#666" stroke-miterlimit="10"/>
46 |     <path d="M55.36,19.86a18.13,18.13,0,0,0-5.13,2.85l1-2.85-1-2.85A18.12,18.12,0,0,0,55.36,19.86Z" fill="#666"/>
47 |   </g>
48 |   <g>
49 |     <line x1="86.09" y1="19.86" x2="105.65" y2="19.86" fill="none" stroke="#666" stroke-miterlimit="10"/>
50 |     <path d="M109.27,19.86a18.13,18.13,0,0,0-5.13,2.85l1-2.85-1-2.85A18.12,18.12,0,0,0,109.27,19.86Z" fill="#666"/>
51 |   </g>
52 |   <g id="paths">
53 |     <path id="edge0" d="M125.5,74V66.49C125.5,43,75.68,62,75.68,31.8" fill="none" stroke="#8359b2" stroke-miterlimit="10" stroke-width="1.5" opacity="0.5"/>
54 |     <path id="edge3" d="M72.75,74V31.5" fill="none" stroke="#8359b2" stroke-miterlimit="10" stroke-width="1.5"/>
55 |     <path id="edge6" d="M20,74V66.49C20,43,69.82,61,69.82,31.8" fill="none" stroke="#8359b2" stroke-miterlimit="10" stroke-width="1.5" opacity="0.5"/>
56 |   </g>
57 | </svg>
58 | 


--------------------------------------------------------------------------------
/public/assets/rnn_preview_np.svg:
--------------------------------------------------------------------------------
  1 | <svg id="text" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 144 108">
  2 |   <defs>
  3 |     <symbol id="rnn-bg" data-name="rnn-bg" viewBox="0 0 49.5 49.5">
  4 |       <rect x="0.75" y="0.75" width="48" height="48" rx="6" ry="6" fill="#fff" fill-opacity="0.8" stroke="#666" stroke-width="1.5"/>
  5 |     </symbol>
  6 |     <symbol id="rnn-a" data-name="rnn-a" viewBox="0 0 49.5 49.5">
  7 |       <use id="rnn-bg-3" data-name="rnn-bg" width="49.5" height="49.5" xlink:href="#rnn-bg"/>
  8 |       <path d="M29.77,31.75l-1.93-4.94H21.6l-1.91,4.94H17.86L24,16.14h1.52l6.11,15.61H29.77Zm-2.5-6.57-1.81-4.82q-0.35-.91-0.72-2.24a20.34,20.34,0,0,1-.67,2.24l-1.83,4.82h5Z" fill="#666"/>
  9 |     </symbol>
 10 |     <symbol id="op-1" data-name="op-1" viewBox="0 0 50.5 27.5">
 11 |       <g>
 12 |         <g opacity="0.1">
 13 |           <rect x="1.75" y="2.75" width="48" height="24" rx="12" ry="12"/>
 14 |           <rect x="1.75" y="2.75" width="48" height="24" rx="12" ry="12" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5"/>
 15 |         </g>
 16 |         <g>
 17 |           <rect x="0.75" y="0.75" width="48" height="24" rx="12" ry="12" fill="#d8c2f2"/>
 18 |           <rect x="0.75" y="0.75" width="48" height="24" rx="12" ry="12" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 19 |         </g>
 20 |       </g>
 21 |       <g>
 22 |         <path d="M20,12a4.69,4.69,0,0,1-1,3.25,3.78,3.78,0,0,1-3,1.16,3.81,3.81,0,0,1-3-1.15A4.72,4.72,0,0,1,12,12a4.64,4.64,0,0,1,1-3.26,3.85,3.85,0,0,1,3-1.14,3.78,3.78,0,0,1,3,1.15A4.68,4.68,0,0,1,20,12Zm-6.54,0a3.84,3.84,0,0,0,.64,2.4,2.25,2.25,0,0,0,1.89.82,2.25,2.25,0,0,0,1.88-.81A3.85,3.85,0,0,0,18.5,12a3.86,3.86,0,0,0-.63-2.39A2.23,2.23,0,0,0,16,8.77a2.27,2.27,0,0,0-1.9.81A3.8,3.8,0,0,0,13.45,12Z" fill="#666"/>
 23 |         <path d="M25,16.39a2.27,2.27,0,0,1-1.91-.88H23q0.08,0.82.08,1v2.65H21.68V9.79H22.8q0,0.18.19,0.87h0.07a2.16,2.16,0,0,1,1.93-1,2.25,2.25,0,0,1,1.89.88A4,4,0,0,1,27.56,13a4,4,0,0,1-.69,2.48A2.27,2.27,0,0,1,25,16.39ZM24.64,10.8a1.43,1.43,0,0,0-1.2.48,2.49,2.49,0,0,0-.38,1.54V13a3,3,0,0,0,.38,1.71,1.39,1.39,0,0,0,1.22.53,1.24,1.24,0,0,0,1.1-.59A3,3,0,0,0,26.15,13a2.92,2.92,0,0,0-.38-1.65A1.28,1.28,0,0,0,24.64,10.8Z" fill="#666"/>
 24 |         <path d="M35.86,16.27H34.49V10.74q0-1,0-1.57l-0.33.31-1.32,1.08L32.2,9.69l2.52-2h1.15v8.57Z" fill="#666"/>
 25 |       </g>
 26 |     </symbol>
 27 |     <symbol id="op-2" data-name="op-2" viewBox="0 0 50.5 27.5">
 28 |       <g>
 29 |         <g opacity="0.1">
 30 |           <rect x="1.75" y="2.75" width="48" height="24" rx="12" ry="12"/>
 31 |           <rect x="1.75" y="2.75" width="48" height="24" rx="12" ry="12" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5"/>
 32 |         </g>
 33 |         <g>
 34 |           <rect x="0.75" y="0.75" width="48" height="24" rx="12" ry="12" fill="#d8c2f2"/>
 35 |           <rect x="0.75" y="0.75" width="48" height="24" rx="12" ry="12" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 36 |         </g>
 37 |       </g>
 38 |       <g>
 39 |         <path d="M20,12a4.69,4.69,0,0,1-1,3.25,3.78,3.78,0,0,1-3,1.16,3.81,3.81,0,0,1-3-1.15A4.72,4.72,0,0,1,12,12a4.64,4.64,0,0,1,1-3.26,3.85,3.85,0,0,1,3-1.14,3.78,3.78,0,0,1,3,1.15A4.68,4.68,0,0,1,20,12Zm-6.54,0a3.84,3.84,0,0,0,.64,2.4,2.25,2.25,0,0,0,1.89.82,2.25,2.25,0,0,0,1.88-.81A3.85,3.85,0,0,0,18.5,12a3.86,3.86,0,0,0-.63-2.39A2.23,2.23,0,0,0,16,8.77a2.27,2.27,0,0,0-1.9.81A3.8,3.8,0,0,0,13.45,12Z" fill="#666"/>
 40 |         <path d="M25,16.39a2.27,2.27,0,0,1-1.91-.88H23q0.08,0.82.08,1v2.65H21.68V9.79H22.8q0,0.18.19,0.87h0.07a2.16,2.16,0,0,1,1.93-1,2.25,2.25,0,0,1,1.89.88A4,4,0,0,1,27.56,13a4,4,0,0,1-.69,2.48A2.27,2.27,0,0,1,25,16.39ZM24.64,10.8a1.43,1.43,0,0,0-1.2.48,2.49,2.49,0,0,0-.38,1.54V13a3,3,0,0,0,.38,1.71,1.39,1.39,0,0,0,1.22.53,1.24,1.24,0,0,0,1.1-.59A3,3,0,0,0,26.15,13a2.92,2.92,0,0,0-.38-1.65A1.28,1.28,0,0,0,24.64,10.8Z" fill="#666"/>
 41 |         <path d="M37.63,16.27H31.82v-1L34,13a18.79,18.79,0,0,0,1.3-1.42,3.39,3.39,0,0,0,.47-0.79A2.12,2.12,0,0,0,35.94,10a1.21,1.21,0,0,0-.35-0.91,1.34,1.34,0,0,0-1-.33,2.57,2.57,0,0,0-1,.18,4.46,4.46,0,0,0-1.06.66l-0.74-.91a4.8,4.8,0,0,1,1.39-.86,4.07,4.07,0,0,1,1.44-.25,2.82,2.82,0,0,1,1.92.62,2.11,2.11,0,0,1,.72,1.68,3,3,0,0,1-.21,1.1,4.48,4.48,0,0,1-.64,1.08A14.6,14.6,0,0,1,35,13.56L33.56,15v0.06h4.07v1.21Z" fill="#666"/>
 42 |       </g>
 43 |     </symbol>
 44 |     <symbol id="op-3" data-name="op-3" viewBox="0 0 50.5 27.5">
 45 |       <g>
 46 |         <g opacity="0.1">
 47 |           <rect x="1.75" y="2.75" width="48" height="24" rx="12" ry="12"/>
 48 |           <rect x="1.75" y="2.75" width="48" height="24" rx="12" ry="12" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5"/>
 49 |         </g>
 50 |         <g>
 51 |           <rect x="0.75" y="0.75" width="48" height="24" rx="12" ry="12" fill="#d8c2f2"/>
 52 |           <rect x="0.75" y="0.75" width="48" height="24" rx="12" ry="12" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 53 |         </g>
 54 |       </g>
 55 |       <g>
 56 |         <path d="M20,12a4.69,4.69,0,0,1-1,3.25,3.78,3.78,0,0,1-3,1.16,3.81,3.81,0,0,1-3-1.15A4.72,4.72,0,0,1,12,12a4.64,4.64,0,0,1,1-3.26,3.85,3.85,0,0,1,3-1.14,3.78,3.78,0,0,1,3,1.15A4.68,4.68,0,0,1,20,12ZM13.5,12a3.84,3.84,0,0,0,.64,2.4,2.25,2.25,0,0,0,1.89.82,2.25,2.25,0,0,0,1.88-.81A3.85,3.85,0,0,0,18.55,12a3.86,3.86,0,0,0-.63-2.39A2.23,2.23,0,0,0,16,8.77a2.27,2.27,0,0,0-1.9.81A3.8,3.8,0,0,0,13.5,12Z" fill="#666"/>
 57 |         <path d="M25,16.39a2.27,2.27,0,0,1-1.91-.88H23q0.08,0.82.08,1v2.65H21.74V9.79h1.11q0,0.18.19,0.87h0.07a2.16,2.16,0,0,1,1.93-1,2.25,2.25,0,0,1,1.89.88A4,4,0,0,1,27.61,13a4,4,0,0,1-.69,2.48A2.27,2.27,0,0,1,25,16.39ZM24.69,10.8a1.43,1.43,0,0,0-1.2.48,2.49,2.49,0,0,0-.38,1.54V13a3,3,0,0,0,.38,1.71,1.39,1.39,0,0,0,1.22.53,1.24,1.24,0,0,0,1.1-.59A3,3,0,0,0,26.2,13a2.92,2.92,0,0,0-.38-1.65A1.28,1.28,0,0,0,24.69,10.8Z" fill="#666"/>
 58 |         <path d="M37.36,9.67A2,2,0,0,1,36.88,11a2.39,2.39,0,0,1-1.34.73v0a2.59,2.59,0,0,1,1.55.64,1.84,1.84,0,0,1,.52,1.36,2.26,2.26,0,0,1-.87,1.91,4,4,0,0,1-2.48.67,5.59,5.59,0,0,1-2.4-.46V14.7a5.49,5.49,0,0,0,1.15.42,5,5,0,0,0,1.17.15,2.47,2.47,0,0,0,1.49-.37,1.34,1.34,0,0,0,.49-1.14,1.09,1.09,0,0,0-.54-1,3.48,3.48,0,0,0-1.71-.32H33.16V11.3h0.76Q36,11.3,36,9.88A1,1,0,0,0,35.6,9a1.61,1.61,0,0,0-1.05-.3,3.19,3.19,0,0,0-.94.14,4.44,4.44,0,0,0-1.07.54l-0.67-1a4.49,4.49,0,0,1,2.74-.87,3.26,3.26,0,0,1,2,.56A1.83,1.83,0,0,1,37.36,9.67Z" fill="#666"/>
 59 |       </g>
 60 |     </symbol>
 61 |   </defs>
 62 |   <title>rnn</title>
 63 |   <g>
 64 |     <g id="_Group_" data-name="&lt;Group&gt;">
 65 |       <rect x="-0.01" y="68.09" width="144.02" height="39.19" rx="5" ry="5" fill="#f0f0f5"/>
 66 |       <g opacity="0.1">
 67 |         <rect x="-0.01" y="68.09" width="144.02" height="39.19" rx="5" ry="5" fill="none" stroke="#667780"/>
 68 |       </g>
 69 |     </g>
 70 |     <use id="rnn-a-3" data-name="rnn-a" width="49.5" height="49.5" transform="translate(6.62 74.21) scale(0.54)" xlink:href="#rnn-a"/>
 71 |     <use width="49.5" height="49.5" transform="translate(59.97 74.21) scale(0.54)" xlink:href="#rnn-a"/>
 72 |     <use id="rnn-a-8" data-name="rnn-a" width="49.5" height="49.5" transform="translate(111.4 74.21) scale(0.54)" xlink:href="#rnn-a"/>
 73 |     <g>
 74 |       <line x1="33.16" y1="87.96" x2="52.72" y2="87.96" fill="none" stroke="#666" stroke-miterlimit="10"/>
 75 |       <path d="M56.34,88a18.13,18.13,0,0,0-5.13,2.85l1-2.85-1-2.85A18.12,18.12,0,0,0,56.34,88Z" fill="#666"/>
 76 |     </g>
 77 |     <g>
 78 |       <line x1="86.09" y1="87.96" x2="105.65" y2="87.96" fill="none" stroke="#666" stroke-miterlimit="10"/>
 79 |       <path d="M109.27,88a18.13,18.13,0,0,0-5.13,2.85l1-2.85-1-2.85A18.12,18.12,0,0,0,109.27,88Z" fill="#666"/>
 80 |     </g>
 81 |   </g>
 82 |   <g>
 83 |     <path d="M85.57,12.85H45.1" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="0.5"/>
 84 |     <g opacity="0.9">
 85 |       <path d="M31,50.56h2.29c1.26,0,2.29-1.8,2.29-4V16.85a4,4,0,0,1,4-4H52" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="0.5"/>
 86 |     </g>
 87 |     <g opacity="0.2">
 88 |       <path d="M31,36.42h2.29c1.26,0,2.29-1.8,2.29-4V16.85a4,4,0,0,1,4-4H52" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="0.5"/>
 89 |     </g>
 90 |     <g opacity="0.4">
 91 |       <path d="M31,22.28h2.3c1.26,0,2.3-1.8,2.3-4V16.85a4,4,0,0,1,4-4H52" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="0.5"/>
 92 |     </g>
 93 |     <g opacity="0.2">
 94 |       <path d="M64,50.56H61.57c-1.34,0-2.43-1.8-2.43-4V16.85a4,4,0,0,0-4-4H44.31" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="0.5"/>
 95 |     </g>
 96 |     <g opacity="0.9">
 97 |       <path d="M64,36.42H61.57c-1.34,0-2.43-1.8-2.43-4V16.85a4,4,0,0,0-4-4H44.31" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="0.5"/>
 98 |     </g>
 99 |     <g opacity="0.2">
100 |       <path d="M64,22.28H61.57c-1.34,0-2.43-1.8-2.43-4V16.85a4,4,0,0,0-4-4H42.74" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="0.5"/>
101 |     </g>
102 |     <g opacity="0.2">
103 |       <path d="M83.36,50.56h2c1.13,0,2-1.8,2-4V12.13a4,4,0,0,1,4-4h12.38" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="0.5"/>
104 |     </g>
105 |     <g opacity="0.9">
106 |       <path d="M83.36,36.42h2c1.13,0,2-1.8,2-4V12.13a4,4,0,0,1,4-4h12.38" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="0.5"/>
107 |     </g>
108 |     <g opacity="0.2">
109 |       <path d="M83.36,22.28h2c1.13,0,2-1.8,2-4V12.13a4,4,0,0,1,4-4h12.38" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="0.5"/>
110 |     </g>
111 |     <g opacity="0.9">
112 |       <path d="M116.48,51.35h-6.2a4,4,0,0,1-4-4V16.85a4,4,0,0,0-4-4h-13" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="0.5"/>
113 |     </g>
114 |     <g opacity="0.2">
115 |       <path d="M116.48,37.21h-6.2a4,4,0,0,1-4-4V16.85a4,4,0,0,0-4-4h-13" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="0.5"/>
116 |     </g>
117 |     <g opacity="0.2">
118 |       <path d="M116.48,22.67h-6.2a4,4,0,0,1-4-4V16.85a4,4,0,0,0-4-4h-13" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="0.5"/>
119 |     </g>
120 |     <g opacity="0.9">
121 |       <path d="M116.17,50.17h-2.58c-1.42,0-2.58-1.8-2.58-4v-34a4,4,0,0,0-4-4H94.7" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="0.5"/>
122 |     </g>
123 |     <g opacity="0.2">
124 |       <path d="M116.17,36h-2.58c-1.42,0-2.58-1.8-2.58-4V12.13a4,4,0,0,0-4-4H94.7" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="0.5"/>
125 |     </g>
126 |     <g opacity="0.2">
127 |       <path d="M116.17,21.49h-2.58c-1.42,0-2.58-1.8-2.58-4V12.13a4,4,0,0,0-4-4H94.7" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="0.5"/>
128 |     </g>
129 |     <g opacity="0.9">
130 |       <path d="M135.21,50.56h2c1.13,0,2-1.8,2-4V8.13" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="0.5"/>
131 |     </g>
132 |     <g opacity="0.2">
133 |       <path d="M135.21,36.42h2c1.13,0,2-1.8,2-4V8.13" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="0.5"/>
134 |     </g>
135 |     <g opacity="0.2">
136 |       <path d="M135.21,22.28h2c1.13,0,2-1.8,2-4V8.13" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="0.5"/>
137 |     </g>
138 |     <g opacity="0.9">
139 |       <use width="50.5" height="27.5" transform="translate(12 45.85) scale(0.39)" xlink:href="#op-1"/>
140 |     </g>
141 |     <g opacity="0.2">
142 |       <use width="50.5" height="27.5" transform="translate(12 31.71) scale(0.39)" xlink:href="#op-2"/>
143 |     </g>
144 |     <g opacity="0.4">
145 |       <use width="50.5" height="27.5" transform="translate(12 17.56) scale(0.39)" xlink:href="#op-3"/>
146 |     </g>
147 |     <g opacity="0.2">
148 |       <use width="50.5" height="27.5" transform="translate(63.86 45.85) scale(0.39)" xlink:href="#op-1"/>
149 |     </g>
150 |     <g opacity="0.9">
151 |       <use id="op-2-5" data-name="op-2" width="50.5" height="27.5" transform="translate(63.86 31.71) scale(0.39)" xlink:href="#op-2"/>
152 |     </g>
153 |     <g opacity="0.2">
154 |       <use width="50.5" height="27.5" transform="translate(63.86 17.56) scale(0.39)" xlink:href="#op-3"/>
155 |     </g>
156 |     <g opacity="0.9">
157 |       <use width="50.5" height="27.5" transform="translate(115.71 45.85) scale(0.39)" xlink:href="#op-1"/>
158 |     </g>
159 |     <g opacity="0.2">
160 |       <use width="50.5" height="27.5" transform="translate(115.71 31.71) scale(0.39)" xlink:href="#op-2"/>
161 |     </g>
162 |     <g opacity="0.2">
163 |       <use width="50.5" height="27.5" transform="translate(115.71 17.56) scale(0.39)" xlink:href="#op-3"/>
164 |     </g>
165 |     <g>
166 |       <line x1="21.43" y1="71.78" x2="21.43" y2="62.04" fill="none" stroke="#666" stroke-miterlimit="10"/>
167 |       <path d="M21.43,58.42a18.13,18.13,0,0,0,2.85,5.13l-2.85-1-2.85,1A18.12,18.12,0,0,0,21.43,58.42Z" fill="#666"/>
168 |     </g>
169 |     <g>
170 |       <line x1="73.29" y1="71.78" x2="73.29" y2="62.04" fill="none" stroke="#666" stroke-miterlimit="10"/>
171 |       <path d="M73.29,58.42a18.13,18.13,0,0,0,2.85,5.13l-2.85-1-2.85,1A18.12,18.12,0,0,0,73.29,58.42Z" fill="#666"/>
172 |     </g>
173 |     <g>
174 |       <line x1="125.14" y1="71.78" x2="125.14" y2="62.04" fill="none" stroke="#666" stroke-miterlimit="10"/>
175 |       <path d="M125.14,58.42A18.13,18.13,0,0,0,128,63.55l-2.85-1-2.85,1A18.12,18.12,0,0,0,125.14,58.42Z" fill="#666"/>
176 |     </g>
177 |   </g>
178 | </svg>
179 | 


--------------------------------------------------------------------------------
/public/assets/rnn_preview_ntm.svg:
--------------------------------------------------------------------------------
 1 | <svg id="text" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 144 108">
 2 |   <defs>
 3 |     <symbol id="rnn-bg" data-name="rnn-bg" viewBox="0 0 49.5 49.5">
 4 |       <rect x="0.75" y="0.75" width="48" height="48" rx="6" ry="6" fill="#fff" fill-opacity="0.8" stroke="#666" stroke-width="1.5"/>
 5 |     </symbol>
 6 |     <symbol id="rnn-a" data-name="rnn-a" viewBox="0 0 49.5 49.5">
 7 |       <use id="rnn-bg-3" data-name="rnn-bg" width="49.5" height="49.5" xlink:href="#rnn-bg"/>
 8 |       <path d="M29.77,31.75l-1.93-4.94H21.6l-1.91,4.94H17.86L24,16.14h1.52l6.11,15.61H29.77Zm-2.5-6.57-1.81-4.82q-0.35-.91-0.72-2.24a20.34,20.34,0,0,1-.67,2.24l-1.83,4.82h5Z" fill="#666"/>
 9 |     </symbol>
10 |     <symbol id="array-vector" data-name="array-vector" viewBox="0 0 36 36">
11 |       <rect width="36" height="36" fill="#d8c2f2" opacity="0"/>
12 |       <g opacity="0.5">
13 |         <g>
14 |           <line x1="18" y1="24" x2="18" y2="13.08" fill="none" stroke="#000" stroke-miterlimit="10"/>
15 |           <polygon points="22.09 16.4 21.36 17.08 18 13.47 14.64 17.08 13.91 16.4 18 12 22.09 16.4"/>
16 |         </g>
17 |       </g>
18 |     </symbol>
19 |   </defs>
20 |   <title>rnn</title>
21 |   <g>
22 |     <line x1="68.41" y1="34.82" x2="68.41" y2="56.38" fill="none" stroke="#666" stroke-miterlimit="10"/>
23 |     <path d="M68.41,60a18.13,18.13,0,0,0-2.85-5.13l2.85,1,2.85-1A18.12,18.12,0,0,0,68.41,60Z" fill="#666"/>
24 |   </g>
25 |   <g>
26 |     <line x1="86.41" y1="60" x2="86.41" y2="38.44" fill="none" stroke="#666" stroke-miterlimit="10"/>
27 |     <path d="M86.41,34.82a18.13,18.13,0,0,0,2.85,5.13l-2.85-1-2.85,1A18.12,18.12,0,0,0,86.41,34.82Z" fill="#666"/>
28 |   </g>
29 |   <g>
30 |     <g id="_Group_" data-name="&lt;Group&gt;">
31 |       <rect x="-0.01" y="69.31" width="143.05" height="38.93" rx="5" ry="5" fill="#f0f0f5"/>
32 |       <g opacity="0.1">
33 |         <rect x="-0.01" y="69.31" width="143.05" height="38.93" rx="5" ry="5" fill="none" stroke="#667780"/>
34 |       </g>
35 |     </g>
36 |     <use id="rnn-a-3" data-name="rnn-a" width="49.5" height="49.5" transform="translate(6.58 75.39) scale(0.54)" xlink:href="#rnn-a"/>
37 |     <use width="49.5" height="49.5" transform="translate(59.56 75.39) scale(0.54)" xlink:href="#rnn-a"/>
38 |     <use id="rnn-a-8" data-name="rnn-a" width="49.5" height="49.5" transform="translate(110.65 75.39) scale(0.54)" xlink:href="#rnn-a"/>
39 |     <g>
40 |       <line x1="32.93" y1="89.04" x2="52.33" y2="89.04" fill="none" stroke="#666" stroke-miterlimit="10"/>
41 |       <path d="M56,89a18.13,18.13,0,0,0-5.13,2.85l1-2.85-1-2.85A18.12,18.12,0,0,0,56,89Z" fill="#666"/>
42 |     </g>
43 |     <g>
44 |       <line x1="85.51" y1="89.04" x2="104.91" y2="89.04" fill="none" stroke="#666" stroke-miterlimit="10"/>
45 |       <path d="M108.53,89a18.13,18.13,0,0,0-5.13,2.85l1-2.85-1-2.85A18.12,18.12,0,0,0,108.53,89Z" fill="#666"/>
46 |     </g>
47 |   </g>
48 |   <g>
49 |     <g id="_Group_2" data-name="&lt;Group&gt;">
50 |       <rect x="0.92" y="0.97" width="143.08" height="23.73" rx="6" ry="6" fill="#e5daf2" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
51 |       <line x1="24.48" y1="24.7" x2="24.48" y2="0.97" fill="none" stroke="#8c8c8c" stroke-miterlimit="10"/>
52 |       <line x1="48.21" y1="24.7" x2="48.21" y2="0.97" fill="none" stroke="#8c8c8c" stroke-miterlimit="10"/>
53 |       <line x1="71.94" y1="24.7" x2="71.94" y2="0.97" fill="none" stroke="#8c8c8c" stroke-miterlimit="10"/>
54 |       <line x1="95.67" y1="24.7" x2="95.67" y2="0.97" fill="none" stroke="#8c8c8c" stroke-miterlimit="10"/>
55 |       <line x1="119.17" y1="24.7" x2="119.17" y2="0.97" fill="none" stroke="#8c8c8c" stroke-miterlimit="10"/>
56 |     </g>
57 |     <use width="36" height="36" transform="translate(1.37) scale(0.66)" xlink:href="#array-vector"/>
58 |     <use id="array-vector-5" data-name="array-vector" width="36" height="36" transform="translate(25.01 0.99) scale(0.66)" xlink:href="#array-vector"/>
59 |     <use width="36" height="36" transform="translate(48.64 0.99) scale(0.66)" xlink:href="#array-vector"/>
60 |     <use id="array-vector-10" data-name="array-vector" width="36" height="36" transform="translate(72.28 0.21) scale(0.66)" xlink:href="#array-vector"/>
61 |     <use width="36" height="36" transform="translate(95.78 0.99) scale(0.66)" xlink:href="#array-vector"/>
62 |     <g id="_Group_3" data-name="&lt;Group&gt;">
63 |       <rect x="119.38" y="1.6" width="23.63" height="23.63" fill="#d8c2f2" opacity="0"/>
64 |       <g opacity="0.5">
65 |         <g>
66 |           <line x1="131.2" y1="17.35" x2="131.2" y2="10.19" fill="none" stroke="#000" stroke-miterlimit="10"/>
67 |           <polygon points="133.89 12.36 133.41 12.81 131.2 10.44 129 12.81 128.52 12.36 131.2 9.47 133.89 12.36"/>
68 |         </g>
69 |       </g>
70 |     </g>
71 |   </g>
72 | </svg>
73 | 


--------------------------------------------------------------------------------
/public/assets/rnn_programmer_1.svg:
--------------------------------------------------------------------------------
 1 | <svg id="text" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 648 66">
 2 |   <defs>
 3 |     <symbol id="op-1" data-name="op-1" viewBox="0 0 50.5 27.5">
 4 |       <g>
 5 |         <g opacity="0.1">
 6 |           <rect x="1.75" y="2.75" width="48" height="24" rx="12" ry="12"/>
 7 |           <rect x="1.75" y="2.75" width="48" height="24" rx="12" ry="12" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5"/>
 8 |         </g>
 9 |         <g>
10 |           <rect x="0.75" y="0.75" width="48" height="24" rx="12" ry="12" fill="#d8c2f2"/>
11 |           <rect x="0.75" y="0.75" width="48" height="24" rx="12" ry="12" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
12 |         </g>
13 |       </g>
14 |       <g>
15 |         <path d="M20,12a4.69,4.69,0,0,1-1,3.25,3.78,3.78,0,0,1-3,1.16,3.81,3.81,0,0,1-3-1.15A4.72,4.72,0,0,1,12,12a4.64,4.64,0,0,1,1-3.26,3.85,3.85,0,0,1,3-1.14,3.78,3.78,0,0,1,3,1.15A4.68,4.68,0,0,1,20,12Zm-6.54,0a3.84,3.84,0,0,0,.64,2.4,2.25,2.25,0,0,0,1.89.82,2.25,2.25,0,0,0,1.88-.81A3.85,3.85,0,0,0,18.5,12a3.86,3.86,0,0,0-.63-2.39A2.23,2.23,0,0,0,16,8.77a2.27,2.27,0,0,0-1.9.81A3.8,3.8,0,0,0,13.45,12Z" fill="#666"/>
16 |         <path d="M25,16.39a2.27,2.27,0,0,1-1.91-.88H23q0.08,0.82.08,1v2.65H21.68V9.79H22.8q0,0.18.19,0.87h0.07a2.16,2.16,0,0,1,1.93-1,2.25,2.25,0,0,1,1.89.88A4,4,0,0,1,27.56,13a4,4,0,0,1-.69,2.48A2.27,2.27,0,0,1,25,16.39ZM24.64,10.8a1.43,1.43,0,0,0-1.2.48,2.49,2.49,0,0,0-.38,1.54V13a3,3,0,0,0,.38,1.71,1.39,1.39,0,0,0,1.22.53,1.24,1.24,0,0,0,1.1-.59A3,3,0,0,0,26.15,13a2.92,2.92,0,0,0-.38-1.65A1.28,1.28,0,0,0,24.64,10.8Z" fill="#666"/>
17 |         <path d="M35.86,16.27H34.49V10.74q0-1,0-1.57l-0.33.31-1.32,1.08L32.2,9.69l2.52-2h1.15v8.57Z" fill="#666"/>
18 |       </g>
19 |     </symbol>
20 |     <symbol id="op-2" data-name="op-2" viewBox="0 0 50.5 27.5">
21 |       <g>
22 |         <g opacity="0.1">
23 |           <rect x="1.75" y="2.75" width="48" height="24" rx="12" ry="12"/>
24 |           <rect x="1.75" y="2.75" width="48" height="24" rx="12" ry="12" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5"/>
25 |         </g>
26 |         <g>
27 |           <rect x="0.75" y="0.75" width="48" height="24" rx="12" ry="12" fill="#d8c2f2"/>
28 |           <rect x="0.75" y="0.75" width="48" height="24" rx="12" ry="12" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
29 |         </g>
30 |       </g>
31 |       <g>
32 |         <path d="M20,12a4.69,4.69,0,0,1-1,3.25,3.78,3.78,0,0,1-3,1.16,3.81,3.81,0,0,1-3-1.15A4.72,4.72,0,0,1,12,12a4.64,4.64,0,0,1,1-3.26,3.85,3.85,0,0,1,3-1.14,3.78,3.78,0,0,1,3,1.15A4.68,4.68,0,0,1,20,12Zm-6.54,0a3.84,3.84,0,0,0,.64,2.4,2.25,2.25,0,0,0,1.89.82,2.25,2.25,0,0,0,1.88-.81A3.85,3.85,0,0,0,18.5,12a3.86,3.86,0,0,0-.63-2.39A2.23,2.23,0,0,0,16,8.77a2.27,2.27,0,0,0-1.9.81A3.8,3.8,0,0,0,13.45,12Z" fill="#666"/>
33 |         <path d="M25,16.39a2.27,2.27,0,0,1-1.91-.88H23q0.08,0.82.08,1v2.65H21.68V9.79H22.8q0,0.18.19,0.87h0.07a2.16,2.16,0,0,1,1.93-1,2.25,2.25,0,0,1,1.89.88A4,4,0,0,1,27.56,13a4,4,0,0,1-.69,2.48A2.27,2.27,0,0,1,25,16.39ZM24.64,10.8a1.43,1.43,0,0,0-1.2.48,2.49,2.49,0,0,0-.38,1.54V13a3,3,0,0,0,.38,1.71,1.39,1.39,0,0,0,1.22.53,1.24,1.24,0,0,0,1.1-.59A3,3,0,0,0,26.15,13a2.92,2.92,0,0,0-.38-1.65A1.28,1.28,0,0,0,24.64,10.8Z" fill="#666"/>
34 |         <path d="M37.63,16.27H31.82v-1L34,13a18.79,18.79,0,0,0,1.3-1.42,3.39,3.39,0,0,0,.47-0.79A2.12,2.12,0,0,0,35.94,10a1.21,1.21,0,0,0-.35-0.91,1.34,1.34,0,0,0-1-.33,2.57,2.57,0,0,0-1,.18,4.46,4.46,0,0,0-1.06.66l-0.74-.91a4.8,4.8,0,0,1,1.39-.86,4.07,4.07,0,0,1,1.44-.25,2.82,2.82,0,0,1,1.92.62,2.11,2.11,0,0,1,.72,1.68,3,3,0,0,1-.21,1.1,4.48,4.48,0,0,1-.64,1.08A14.6,14.6,0,0,1,35,13.56L33.56,15v0.06h4.07v1.21Z" fill="#666"/>
35 |       </g>
36 |     </symbol>
37 |     <symbol id="op-3" data-name="op-3" viewBox="0 0 50.5 27.5">
38 |       <g>
39 |         <g opacity="0.1">
40 |           <rect x="1.75" y="2.75" width="48" height="24" rx="12" ry="12"/>
41 |           <rect x="1.75" y="2.75" width="48" height="24" rx="12" ry="12" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5"/>
42 |         </g>
43 |         <g>
44 |           <rect x="0.75" y="0.75" width="48" height="24" rx="12" ry="12" fill="#d8c2f2"/>
45 |           <rect x="0.75" y="0.75" width="48" height="24" rx="12" ry="12" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
46 |         </g>
47 |       </g>
48 |       <g>
49 |         <path d="M20,12a4.69,4.69,0,0,1-1,3.25,3.78,3.78,0,0,1-3,1.16,3.81,3.81,0,0,1-3-1.15A4.72,4.72,0,0,1,12,12a4.64,4.64,0,0,1,1-3.26,3.85,3.85,0,0,1,3-1.14,3.78,3.78,0,0,1,3,1.15A4.68,4.68,0,0,1,20,12ZM13.5,12a3.84,3.84,0,0,0,.64,2.4,2.25,2.25,0,0,0,1.89.82,2.25,2.25,0,0,0,1.88-.81A3.85,3.85,0,0,0,18.55,12a3.86,3.86,0,0,0-.63-2.39A2.23,2.23,0,0,0,16,8.77a2.27,2.27,0,0,0-1.9.81A3.8,3.8,0,0,0,13.5,12Z" fill="#666"/>
50 |         <path d="M25,16.39a2.27,2.27,0,0,1-1.91-.88H23q0.08,0.82.08,1v2.65H21.74V9.79h1.11q0,0.18.19,0.87h0.07a2.16,2.16,0,0,1,1.93-1,2.25,2.25,0,0,1,1.89.88A4,4,0,0,1,27.61,13a4,4,0,0,1-.69,2.48A2.27,2.27,0,0,1,25,16.39ZM24.69,10.8a1.43,1.43,0,0,0-1.2.48,2.49,2.49,0,0,0-.38,1.54V13a3,3,0,0,0,.38,1.71,1.39,1.39,0,0,0,1.22.53,1.24,1.24,0,0,0,1.1-.59A3,3,0,0,0,26.2,13a2.92,2.92,0,0,0-.38-1.65A1.28,1.28,0,0,0,24.69,10.8Z" fill="#666"/>
51 |         <path d="M37.36,9.67A2,2,0,0,1,36.88,11a2.39,2.39,0,0,1-1.34.73v0a2.59,2.59,0,0,1,1.55.64,1.84,1.84,0,0,1,.52,1.36,2.26,2.26,0,0,1-.87,1.91,4,4,0,0,1-2.48.67,5.59,5.59,0,0,1-2.4-.46V14.7a5.49,5.49,0,0,0,1.15.42,5,5,0,0,0,1.17.15,2.47,2.47,0,0,0,1.49-.37,1.34,1.34,0,0,0,.49-1.14,1.09,1.09,0,0,0-.54-1,3.48,3.48,0,0,0-1.71-.32H33.16V11.3h0.76Q36,11.3,36,9.88A1,1,0,0,0,35.6,9a1.61,1.61,0,0,0-1.05-.3,3.19,3.19,0,0,0-.94.14,4.44,4.44,0,0,0-1.07.54l-0.67-1a4.49,4.49,0,0,1,2.74-.87,3.26,3.26,0,0,1,2,.56A1.83,1.83,0,0,1,37.36,9.67Z" fill="#666"/>
52 |       </g>
53 |     </symbol>
54 |   </defs>
55 |   <title>rnn</title>
56 |   <g>
57 |     <line x1="60" y1="42" x2="132.57" y2="42" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
58 |     <path d="M138,42a27.2,27.2,0,0,0-7.69,4.28L131.86,42l-1.55-4.28A27.18,27.18,0,0,0,138,42Z" fill="#666"/>
59 |   </g>
60 |   <g>
61 |     <line x1="192" y1="42" x2="264.57" y2="42" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
62 |     <path d="M270,42a27.2,27.2,0,0,0-7.69,4.28L263.86,42l-1.55-4.28A27.18,27.18,0,0,0,270,42Z" fill="#666"/>
63 |   </g>
64 |   <g>
65 |     <line x1="324" y1="42" x2="396.57" y2="42" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
66 |     <path d="M402,42a27.2,27.2,0,0,0-7.69,4.28L395.86,42l-1.55-4.28A27.18,27.18,0,0,0,402,42Z" fill="#666"/>
67 |   </g>
68 |   <g>
69 |     <line x1="456" y1="42" x2="528.57" y2="42" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
70 |     <path d="M534,42a27.2,27.2,0,0,0-7.69,4.28L527.86,42l-1.55-4.28A27.18,27.18,0,0,0,534,42Z" fill="#666"/>
71 |   </g>
72 |   <g>
73 |     <path d="M168,42s52-30,117-30c52.7,0,97.43,16,112,21.89" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
74 |     <path d="M402,36a27.2,27.2,0,0,0-8.74,1l3.06-3.37,0.2-4.55A27.17,27.17,0,0,0,402,36Z" fill="#666"/>
75 |   </g>
76 |   <g>
77 |     <path d="M216.48,18.38A298.3,298.3,0,0,0,153,11.25C88.54,11.25,36.15,41,35.63,41.35l0.75,1.3C36.89,42.35,89,12.75,153,12.75a295.48,295.48,0,0,1,60.43,6.5Z" fill="#666"/>
78 |     <path d="M264.52,29.11l-0.17,3.72a306,306,0,0,0-33.49-11l-2.81.81A306,306,0,0,1,263.8,34.23L261.26,37A27.2,27.2,0,0,1,270,36,27.17,27.17,0,0,1,264.52,29.11Z" fill="#666"/>
79 |   </g>
80 |   <use id="op-1-3" data-name="op-1" width="50.5" height="27.5" transform="translate(12 30)" xlink:href="#op-1"/>
81 |   <use id="op-1-6" data-name="op-1" width="50.5" height="27.5" transform="translate(272.24 30)" xlink:href="#op-1"/>
82 |   <use id="op-2-3" data-name="op-2" width="50.5" height="27.5" transform="translate(139.85 30)" xlink:href="#op-2"/>
83 |   <use id="op-3-3" data-name="op-3" width="50.5" height="27.5" transform="translate(408 30)" xlink:href="#op-3"/>
84 | </svg>
85 | 


--------------------------------------------------------------------------------
/public/assets/rnn_programmer_2.svg:
--------------------------------------------------------------------------------
  1 | <svg id="background" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 648 228">
  2 |   <defs>
  3 |     <symbol id="rnn-bg" data-name="rnn-bg" viewBox="0 0 49.5 49.5">
  4 |       <rect x="0.75" y="0.75" width="48" height="48" rx="6" ry="6" fill="#fff" fill-opacity="0.8" stroke="#666" stroke-width="1.5"/>
  5 |     </symbol>
  6 |     <symbol id="rnn-a" data-name="rnn-a" viewBox="0 0 49.5 49.5">
  7 |       <use id="rnn-bg-3" data-name="rnn-bg" width="49.5" height="49.5" xlink:href="#rnn-bg"/>
  8 |       <path d="M29.77,31.75l-1.93-4.94H21.6l-1.91,4.94H17.86L24,16.14h1.52l6.11,15.61H29.77Zm-2.5-6.57-1.81-4.82q-0.35-.91-0.72-2.24a20.34,20.34,0,0,1-.67,2.24l-1.83,4.82h5Z" fill="#666"/>
  9 |     </symbol>
 10 |     <symbol id="op-1" data-name="op-1" viewBox="0 0 50.5 27.5">
 11 |       <g>
 12 |         <g opacity="0.1">
 13 |           <rect x="1.75" y="2.75" width="48" height="24" rx="12" ry="12"/>
 14 |           <rect x="1.75" y="2.75" width="48" height="24" rx="12" ry="12" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5"/>
 15 |         </g>
 16 |         <g>
 17 |           <rect x="0.75" y="0.75" width="48" height="24" rx="12" ry="12" fill="#d8c2f2"/>
 18 |           <rect x="0.75" y="0.75" width="48" height="24" rx="12" ry="12" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 19 |         </g>
 20 |       </g>
 21 |       <g>
 22 |         <path d="M20,12a4.69,4.69,0,0,1-1,3.25,3.78,3.78,0,0,1-3,1.16,3.81,3.81,0,0,1-3-1.15A4.72,4.72,0,0,1,12,12a4.64,4.64,0,0,1,1-3.26,3.85,3.85,0,0,1,3-1.14,3.78,3.78,0,0,1,3,1.15A4.68,4.68,0,0,1,20,12Zm-6.54,0a3.84,3.84,0,0,0,.64,2.4,2.25,2.25,0,0,0,1.89.82,2.25,2.25,0,0,0,1.88-.81A3.85,3.85,0,0,0,18.5,12a3.86,3.86,0,0,0-.63-2.39A2.23,2.23,0,0,0,16,8.77a2.27,2.27,0,0,0-1.9.81A3.8,3.8,0,0,0,13.45,12Z" fill="#666"/>
 23 |         <path d="M25,16.39a2.27,2.27,0,0,1-1.91-.88H23q0.08,0.82.08,1v2.65H21.68V9.79H22.8q0,0.18.19,0.87h0.07a2.16,2.16,0,0,1,1.93-1,2.25,2.25,0,0,1,1.89.88A4,4,0,0,1,27.56,13a4,4,0,0,1-.69,2.48A2.27,2.27,0,0,1,25,16.39ZM24.64,10.8a1.43,1.43,0,0,0-1.2.48,2.49,2.49,0,0,0-.38,1.54V13a3,3,0,0,0,.38,1.71,1.39,1.39,0,0,0,1.22.53,1.24,1.24,0,0,0,1.1-.59A3,3,0,0,0,26.15,13a2.92,2.92,0,0,0-.38-1.65A1.28,1.28,0,0,0,24.64,10.8Z" fill="#666"/>
 24 |         <path d="M35.86,16.27H34.49V10.74q0-1,0-1.57l-0.33.31-1.32,1.08L32.2,9.69l2.52-2h1.15v8.57Z" fill="#666"/>
 25 |       </g>
 26 |     </symbol>
 27 |     <symbol id="op-2" data-name="op-2" viewBox="0 0 50.5 27.5">
 28 |       <g>
 29 |         <g opacity="0.1">
 30 |           <rect x="1.75" y="2.75" width="48" height="24" rx="12" ry="12"/>
 31 |           <rect x="1.75" y="2.75" width="48" height="24" rx="12" ry="12" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5"/>
 32 |         </g>
 33 |         <g>
 34 |           <rect x="0.75" y="0.75" width="48" height="24" rx="12" ry="12" fill="#d8c2f2"/>
 35 |           <rect x="0.75" y="0.75" width="48" height="24" rx="12" ry="12" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 36 |         </g>
 37 |       </g>
 38 |       <g>
 39 |         <path d="M20,12a4.69,4.69,0,0,1-1,3.25,3.78,3.78,0,0,1-3,1.16,3.81,3.81,0,0,1-3-1.15A4.72,4.72,0,0,1,12,12a4.64,4.64,0,0,1,1-3.26,3.85,3.85,0,0,1,3-1.14,3.78,3.78,0,0,1,3,1.15A4.68,4.68,0,0,1,20,12Zm-6.54,0a3.84,3.84,0,0,0,.64,2.4,2.25,2.25,0,0,0,1.89.82,2.25,2.25,0,0,0,1.88-.81A3.85,3.85,0,0,0,18.5,12a3.86,3.86,0,0,0-.63-2.39A2.23,2.23,0,0,0,16,8.77a2.27,2.27,0,0,0-1.9.81A3.8,3.8,0,0,0,13.45,12Z" fill="#666"/>
 40 |         <path d="M25,16.39a2.27,2.27,0,0,1-1.91-.88H23q0.08,0.82.08,1v2.65H21.68V9.79H22.8q0,0.18.19,0.87h0.07a2.16,2.16,0,0,1,1.93-1,2.25,2.25,0,0,1,1.89.88A4,4,0,0,1,27.56,13a4,4,0,0,1-.69,2.48A2.27,2.27,0,0,1,25,16.39ZM24.64,10.8a1.43,1.43,0,0,0-1.2.48,2.49,2.49,0,0,0-.38,1.54V13a3,3,0,0,0,.38,1.71,1.39,1.39,0,0,0,1.22.53,1.24,1.24,0,0,0,1.1-.59A3,3,0,0,0,26.15,13a2.92,2.92,0,0,0-.38-1.65A1.28,1.28,0,0,0,24.64,10.8Z" fill="#666"/>
 41 |         <path d="M37.63,16.27H31.82v-1L34,13a18.79,18.79,0,0,0,1.3-1.42,3.39,3.39,0,0,0,.47-0.79A2.12,2.12,0,0,0,35.94,10a1.21,1.21,0,0,0-.35-0.91,1.34,1.34,0,0,0-1-.33,2.57,2.57,0,0,0-1,.18,4.46,4.46,0,0,0-1.06.66l-0.74-.91a4.8,4.8,0,0,1,1.39-.86,4.07,4.07,0,0,1,1.44-.25,2.82,2.82,0,0,1,1.92.62,2.11,2.11,0,0,1,.72,1.68,3,3,0,0,1-.21,1.1,4.48,4.48,0,0,1-.64,1.08A14.6,14.6,0,0,1,35,13.56L33.56,15v0.06h4.07v1.21Z" fill="#666"/>
 42 |       </g>
 43 |     </symbol>
 44 |     <symbol id="op-3" data-name="op-3" viewBox="0 0 50.5 27.5">
 45 |       <g>
 46 |         <g opacity="0.1">
 47 |           <rect x="1.75" y="2.75" width="48" height="24" rx="12" ry="12"/>
 48 |           <rect x="1.75" y="2.75" width="48" height="24" rx="12" ry="12" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5"/>
 49 |         </g>
 50 |         <g>
 51 |           <rect x="0.75" y="0.75" width="48" height="24" rx="12" ry="12" fill="#d8c2f2"/>
 52 |           <rect x="0.75" y="0.75" width="48" height="24" rx="12" ry="12" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 53 |         </g>
 54 |       </g>
 55 |       <g>
 56 |         <path d="M20,12a4.69,4.69,0,0,1-1,3.25,3.78,3.78,0,0,1-3,1.16,3.81,3.81,0,0,1-3-1.15A4.72,4.72,0,0,1,12,12a4.64,4.64,0,0,1,1-3.26,3.85,3.85,0,0,1,3-1.14,3.78,3.78,0,0,1,3,1.15A4.68,4.68,0,0,1,20,12ZM13.5,12a3.84,3.84,0,0,0,.64,2.4,2.25,2.25,0,0,0,1.89.82,2.25,2.25,0,0,0,1.88-.81A3.85,3.85,0,0,0,18.55,12a3.86,3.86,0,0,0-.63-2.39A2.23,2.23,0,0,0,16,8.77a2.27,2.27,0,0,0-1.9.81A3.8,3.8,0,0,0,13.5,12Z" fill="#666"/>
 57 |         <path d="M25,16.39a2.27,2.27,0,0,1-1.91-.88H23q0.08,0.82.08,1v2.65H21.74V9.79h1.11q0,0.18.19,0.87h0.07a2.16,2.16,0,0,1,1.93-1,2.25,2.25,0,0,1,1.89.88A4,4,0,0,1,27.61,13a4,4,0,0,1-.69,2.48A2.27,2.27,0,0,1,25,16.39ZM24.69,10.8a1.43,1.43,0,0,0-1.2.48,2.49,2.49,0,0,0-.38,1.54V13a3,3,0,0,0,.38,1.71,1.39,1.39,0,0,0,1.22.53,1.24,1.24,0,0,0,1.1-.59A3,3,0,0,0,26.2,13a2.92,2.92,0,0,0-.38-1.65A1.28,1.28,0,0,0,24.69,10.8Z" fill="#666"/>
 58 |         <path d="M37.36,9.67A2,2,0,0,1,36.88,11a2.39,2.39,0,0,1-1.34.73v0a2.59,2.59,0,0,1,1.55.64,1.84,1.84,0,0,1,.52,1.36,2.26,2.26,0,0,1-.87,1.91,4,4,0,0,1-2.48.67,5.59,5.59,0,0,1-2.4-.46V14.7a5.49,5.49,0,0,0,1.15.42,5,5,0,0,0,1.17.15,2.47,2.47,0,0,0,1.49-.37,1.34,1.34,0,0,0,.49-1.14,1.09,1.09,0,0,0-.54-1,3.48,3.48,0,0,0-1.71-.32H33.16V11.3h0.76Q36,11.3,36,9.88A1,1,0,0,0,35.6,9a1.61,1.61,0,0,0-1.05-.3,3.19,3.19,0,0,0-.94.14,4.44,4.44,0,0,0-1.07.54l-0.67-1a4.49,4.49,0,0,1,2.74-.87,3.26,3.26,0,0,1,2,.56A1.83,1.83,0,0,1,37.36,9.67Z" fill="#666"/>
 59 |       </g>
 60 |     </symbol>
 61 |   </defs>
 62 |   <title>rnn</title>
 63 |   <g id="_Group_" data-name="&lt;Group&gt;">
 64 |     <rect y="140" width="468" height="72" rx="10" ry="10" fill="#f0f0f5"/>
 65 |     <g opacity="0.1">
 66 |       <rect y="140" width="468" height="72" rx="10" ry="10" fill="none" stroke="#231f20"/>
 67 |     </g>
 68 |   </g>
 69 |   <g>
 70 |     <g opacity="0.1">
 71 |       <rect x="13" y="154" width="48" height="48" rx="6" ry="6" opacity="0.8"/>
 72 |       <rect x="13" y="154" width="48" height="48" rx="6" ry="6" fill="none" stroke="#000" stroke-width="1.5"/>
 73 |       <path d="M42,185l-1.93-4.94H33.85L31.94,185H30.11l6.14-15.61h1.52L43.89,185H42Zm-2.5-6.57-1.81-4.82q-0.35-.91-0.72-2.24a20.34,20.34,0,0,1-.67,2.24l-1.83,4.82h5Z"/>
 74 |     </g>
 75 |     <use width="49.5" height="49.5" transform="translate(11.25 151.25)" xlink:href="#rnn-a"/>
 76 |   </g>
 77 |   <g>
 78 |     <g opacity="0.1">
 79 |       <rect x="145" y="154" width="48" height="48" rx="6" ry="6" opacity="0.8"/>
 80 |       <rect x="145" y="154" width="48" height="48" rx="6" ry="6" fill="none" stroke="#000" stroke-width="1.5"/>
 81 |       <path d="M174,185l-1.93-4.94h-6.23L163.94,185h-1.83l6.14-15.61h1.52L175.89,185H174Zm-2.5-6.57-1.81-4.82q-0.35-.91-0.72-2.24a20.34,20.34,0,0,1-.67,2.24l-1.83,4.82h5Z"/>
 82 |     </g>
 83 |     <use width="49.5" height="49.5" transform="translate(143.25 151.25)" xlink:href="#rnn-a"/>
 84 |   </g>
 85 |   <g>
 86 |     <g opacity="0.1">
 87 |       <rect x="277" y="154" width="48" height="48" rx="6" ry="6" opacity="0.8"/>
 88 |       <rect x="277" y="154" width="48" height="48" rx="6" ry="6" fill="none" stroke="#000" stroke-width="1.5"/>
 89 |       <path d="M306,185l-1.93-4.94h-6.23L295.94,185h-1.83l6.14-15.61h1.52L307.89,185H306Zm-2.5-6.57-1.81-4.82q-0.35-.91-0.72-2.24a20.34,20.34,0,0,1-.67,2.24l-1.83,4.82h5Z"/>
 90 |     </g>
 91 |     <use width="49.5" height="49.5" transform="translate(275.25 151.25)" xlink:href="#rnn-a"/>
 92 |   </g>
 93 |   <g id="_Group_2" data-name="&lt;Group&gt;">
 94 |     <g opacity="0.1">
 95 |       <rect x="409" y="154" width="48" height="48" rx="6" ry="6" opacity="0.8"/>
 96 |       <rect x="409" y="154" width="48" height="48" rx="6" ry="6" fill="none" stroke="#000" stroke-width="1.5"/>
 97 |       <path d="M438,185l-1.93-4.94h-6.23L427.94,185h-1.83l6.14-15.61h1.52L439.89,185H438Zm-2.5-6.57-1.81-4.82q-0.35-.91-0.72-2.24a20.34,20.34,0,0,1-.67,2.24l-1.83,4.82h5Z"/>
 98 |     </g>
 99 |     <use width="49.5" height="49.5" transform="translate(407.25 151.25)" xlink:href="#rnn-a"/>
100 |   </g>
101 |   <g opacity="0.9">
102 |     <use width="50.5" height="27.5" transform="translate(12 92)" xlink:href="#op-1"/>
103 |   </g>
104 |   <g opacity="0.2">
105 |     <use width="50.5" height="27.5" transform="translate(12 56)" xlink:href="#op-2"/>
106 |   </g>
107 |   <g opacity="0.4">
108 |     <use width="50.5" height="27.5" transform="translate(12 20)" xlink:href="#op-3"/>
109 |   </g>
110 |   <g opacity="0.2">
111 |     <use width="50.5" height="27.5" transform="translate(144 92)" xlink:href="#op-1"/>
112 |   </g>
113 |   <g opacity="0.9">
114 |     <use id="op-2-5" data-name="op-2" width="50.5" height="27.5" transform="translate(144 56)" xlink:href="#op-2"/>
115 |   </g>
116 |   <g opacity="0.2">
117 |     <use width="50.5" height="27.5" transform="translate(144 20)" xlink:href="#op-3"/>
118 |   </g>
119 |   <g opacity="0.9">
120 |     <use id="op-1-7" data-name="op-1" width="50.5" height="27.5" transform="translate(276 92)" xlink:href="#op-1"/>
121 |   </g>
122 |   <g opacity="0.2">
123 |     <use width="50.5" height="27.5" transform="translate(276 56)" xlink:href="#op-2"/>
124 |   </g>
125 |   <g opacity="0.2">
126 |     <use width="50.5" height="27.5" transform="translate(276 20)" xlink:href="#op-3"/>
127 |   </g>
128 |   <g opacity="0.2">
129 |     <use width="50.5" height="27.5" transform="translate(408 92)" xlink:href="#op-1"/>
130 |   </g>
131 |   <g opacity="0.2">
132 |     <use width="50.5" height="27.5" transform="translate(408 56)" xlink:href="#op-2"/>
133 |   </g>
134 |   <g opacity="0.9">
135 |     <use id="op-3-9" data-name="op-3" width="50.5" height="27.5" transform="translate(408 20)" xlink:href="#op-3"/>
136 |   </g>
137 |   <g opacity="0.6">
138 |     <text transform="translate(493 155.88)" font-size="13" font-family="Open Sans">At each step the <tspan x="0" y="20">controller RNN outputs a </tspan><tspan x="0" y="40">probability distribution.</tspan></text>
139 |   </g>
140 |   <g>
141 |     <line x1="36" y1="152" x2="36" y2="127.43" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
142 |     <path d="M36,122a27.2,27.2,0,0,0,4.28,7.69L36,128.14l-4.28,1.55A27.17,27.17,0,0,0,36,122Z" fill="#666"/>
143 |   </g>
144 |   <g>
145 |     <line x1="168" y1="152" x2="168" y2="127.43" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
146 |     <path d="M168,122a27.2,27.2,0,0,0,4.28,7.69L168,128.14l-4.28,1.55A27.17,27.17,0,0,0,168,122Z" fill="#666"/>
147 |   </g>
148 |   <g>
149 |     <line x1="300" y1="152" x2="300" y2="127.43" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
150 |     <path d="M300,122a27.2,27.2,0,0,0,4.28,7.69L300,128.14l-4.28,1.55A27.17,27.17,0,0,0,300,122Z" fill="#666"/>
151 |   </g>
152 |   <g>
153 |     <line x1="432" y1="152" x2="432" y2="127.43" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
154 |     <path d="M432,122a27.2,27.2,0,0,0,4.28,7.69L432,128.14l-4.28,1.55A27.17,27.17,0,0,0,432,122Z" fill="#666"/>
155 |   </g>
156 |   <g>
157 |     <line x1="60" y1="176.5" x2="132.57" y2="176.5" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
158 |     <path d="M138,176.5a27.2,27.2,0,0,0-7.69,4.28l1.55-4.28-1.55-4.28A27.18,27.18,0,0,0,138,176.5Z" fill="#666"/>
159 |   </g>
160 |   <g>
161 |     <line x1="192" y1="176.5" x2="264.57" y2="176.5" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
162 |     <path d="M270,176.5a27.2,27.2,0,0,0-7.69,4.28l1.55-4.28-1.55-4.28A27.18,27.18,0,0,0,270,176.5Z" fill="#666"/>
163 |   </g>
164 |   <g>
165 |     <line x1="324" y1="176.5" x2="396.57" y2="176.5" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
166 |     <path d="M402,176.5a27.2,27.2,0,0,0-7.69,4.28l1.55-4.28-1.55-4.28A27.18,27.18,0,0,0,402,176.5Z" fill="#666"/>
167 |   </g>
168 | </svg>
169 | 


--------------------------------------------------------------------------------
/public/assets/rnn_programmer_3.svg:
--------------------------------------------------------------------------------
  1 | <svg id="background" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 648 252">
  2 |   <defs>
  3 |     <clipPath id="clip-path">
  4 |       <rect id="first-clip" x="60" y="10" width="84" height="144" fill="none"/>
  5 |     </clipPath>
  6 |     <clipPath id="clip-path-2">
  7 |       <polygon points="332 10 138 10 138 40 192 40 192 142 276 142 276 40 332 40 332 10" fill="none"/>
  8 |     </clipPath>
  9 |     <clipPath id="clip-path-3">
 10 |       <polygon points="444 10 270 10 270 40 324 40 324 142 408 142 408 40 444 40 444 10" fill="none"/>
 11 |     </clipPath>
 12 |     <clipPath id="clip-path-4">
 13 |       <rect x="456" y="10" width="60" height="120" fill="none"/>
 14 |     </clipPath>
 15 |     <symbol id="rnn-bg" data-name="rnn-bg" viewBox="0 0 49.5 49.5">
 16 |       <rect x="0.75" y="0.75" width="48" height="48" rx="6" ry="6" fill="#fff" fill-opacity="0.8" stroke="#666" stroke-width="1.5"/>
 17 |     </symbol>
 18 |     <symbol id="rnn-a" data-name="rnn-a" viewBox="0 0 49.5 49.5">
 19 |       <use id="rnn-bg-3" data-name="rnn-bg" width="49.5" height="49.5" xlink:href="#rnn-bg"/>
 20 |       <path d="M29.77,31.75l-1.93-4.94H21.6l-1.91,4.94H17.86L24,16.14h1.52l6.11,15.61H29.77Zm-2.5-6.57-1.81-4.82q-0.35-.91-0.72-2.24a20.34,20.34,0,0,1-.67,2.24l-1.83,4.82h5Z" fill="#666"/>
 21 |     </symbol>
 22 |     <symbol id="op-1" data-name="op-1" viewBox="0 0 50.5 27.5">
 23 |       <g>
 24 |         <g opacity="0.1">
 25 |           <rect x="1.75" y="2.75" width="48" height="24" rx="12" ry="12"/>
 26 |           <rect x="1.75" y="2.75" width="48" height="24" rx="12" ry="12" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5"/>
 27 |         </g>
 28 |         <g>
 29 |           <rect x="0.75" y="0.75" width="48" height="24" rx="12" ry="12" fill="#d8c2f2"/>
 30 |           <rect x="0.75" y="0.75" width="48" height="24" rx="12" ry="12" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 31 |         </g>
 32 |       </g>
 33 |       <g>
 34 |         <path d="M20,12a4.69,4.69,0,0,1-1,3.25,3.78,3.78,0,0,1-3,1.16,3.81,3.81,0,0,1-3-1.15A4.72,4.72,0,0,1,12,12a4.64,4.64,0,0,1,1-3.26,3.85,3.85,0,0,1,3-1.14,3.78,3.78,0,0,1,3,1.15A4.68,4.68,0,0,1,20,12Zm-6.54,0a3.84,3.84,0,0,0,.64,2.4,2.25,2.25,0,0,0,1.89.82,2.25,2.25,0,0,0,1.88-.81A3.85,3.85,0,0,0,18.5,12a3.86,3.86,0,0,0-.63-2.39A2.23,2.23,0,0,0,16,8.77a2.27,2.27,0,0,0-1.9.81A3.8,3.8,0,0,0,13.45,12Z" fill="#666"/>
 35 |         <path d="M25,16.39a2.27,2.27,0,0,1-1.91-.88H23q0.08,0.82.08,1v2.65H21.68V9.79H22.8q0,0.18.19,0.87h0.07a2.16,2.16,0,0,1,1.93-1,2.25,2.25,0,0,1,1.89.88A4,4,0,0,1,27.56,13a4,4,0,0,1-.69,2.48A2.27,2.27,0,0,1,25,16.39ZM24.64,10.8a1.43,1.43,0,0,0-1.2.48,2.49,2.49,0,0,0-.38,1.54V13a3,3,0,0,0,.38,1.71,1.39,1.39,0,0,0,1.22.53,1.24,1.24,0,0,0,1.1-.59A3,3,0,0,0,26.15,13a2.92,2.92,0,0,0-.38-1.65A1.28,1.28,0,0,0,24.64,10.8Z" fill="#666"/>
 36 |         <path d="M35.86,16.27H34.49V10.74q0-1,0-1.57l-0.33.31-1.32,1.08L32.2,9.69l2.52-2h1.15v8.57Z" fill="#666"/>
 37 |       </g>
 38 |     </symbol>
 39 |     <symbol id="op-2" data-name="op-2" viewBox="0 0 50.5 27.5">
 40 |       <g>
 41 |         <g opacity="0.1">
 42 |           <rect x="1.75" y="2.75" width="48" height="24" rx="12" ry="12"/>
 43 |           <rect x="1.75" y="2.75" width="48" height="24" rx="12" ry="12" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5"/>
 44 |         </g>
 45 |         <g>
 46 |           <rect x="0.75" y="0.75" width="48" height="24" rx="12" ry="12" fill="#d8c2f2"/>
 47 |           <rect x="0.75" y="0.75" width="48" height="24" rx="12" ry="12" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 48 |         </g>
 49 |       </g>
 50 |       <g>
 51 |         <path d="M20,12a4.69,4.69,0,0,1-1,3.25,3.78,3.78,0,0,1-3,1.16,3.81,3.81,0,0,1-3-1.15A4.72,4.72,0,0,1,12,12a4.64,4.64,0,0,1,1-3.26,3.85,3.85,0,0,1,3-1.14,3.78,3.78,0,0,1,3,1.15A4.68,4.68,0,0,1,20,12Zm-6.54,0a3.84,3.84,0,0,0,.64,2.4,2.25,2.25,0,0,0,1.89.82,2.25,2.25,0,0,0,1.88-.81A3.85,3.85,0,0,0,18.5,12a3.86,3.86,0,0,0-.63-2.39A2.23,2.23,0,0,0,16,8.77a2.27,2.27,0,0,0-1.9.81A3.8,3.8,0,0,0,13.45,12Z" fill="#666"/>
 52 |         <path d="M25,16.39a2.27,2.27,0,0,1-1.91-.88H23q0.08,0.82.08,1v2.65H21.68V9.79H22.8q0,0.18.19,0.87h0.07a2.16,2.16,0,0,1,1.93-1,2.25,2.25,0,0,1,1.89.88A4,4,0,0,1,27.56,13a4,4,0,0,1-.69,2.48A2.27,2.27,0,0,1,25,16.39ZM24.64,10.8a1.43,1.43,0,0,0-1.2.48,2.49,2.49,0,0,0-.38,1.54V13a3,3,0,0,0,.38,1.71,1.39,1.39,0,0,0,1.22.53,1.24,1.24,0,0,0,1.1-.59A3,3,0,0,0,26.15,13a2.92,2.92,0,0,0-.38-1.65A1.28,1.28,0,0,0,24.64,10.8Z" fill="#666"/>
 53 |         <path d="M37.63,16.27H31.82v-1L34,13a18.79,18.79,0,0,0,1.3-1.42,3.39,3.39,0,0,0,.47-0.79A2.12,2.12,0,0,0,35.94,10a1.21,1.21,0,0,0-.35-0.91,1.34,1.34,0,0,0-1-.33,2.57,2.57,0,0,0-1,.18,4.46,4.46,0,0,0-1.06.66l-0.74-.91a4.8,4.8,0,0,1,1.39-.86,4.07,4.07,0,0,1,1.44-.25,2.82,2.82,0,0,1,1.92.62,2.11,2.11,0,0,1,.72,1.68,3,3,0,0,1-.21,1.1,4.48,4.48,0,0,1-.64,1.08A14.6,14.6,0,0,1,35,13.56L33.56,15v0.06h4.07v1.21Z" fill="#666"/>
 54 |       </g>
 55 |     </symbol>
 56 |     <symbol id="op-3" data-name="op-3" viewBox="0 0 50.5 27.5">
 57 |       <g>
 58 |         <g opacity="0.1">
 59 |           <rect x="1.75" y="2.75" width="48" height="24" rx="12" ry="12"/>
 60 |           <rect x="1.75" y="2.75" width="48" height="24" rx="12" ry="12" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.5"/>
 61 |         </g>
 62 |         <g>
 63 |           <rect x="0.75" y="0.75" width="48" height="24" rx="12" ry="12" fill="#d8c2f2"/>
 64 |           <rect x="0.75" y="0.75" width="48" height="24" rx="12" ry="12" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 65 |         </g>
 66 |       </g>
 67 |       <g>
 68 |         <path d="M20,12a4.69,4.69,0,0,1-1,3.25,3.78,3.78,0,0,1-3,1.16,3.81,3.81,0,0,1-3-1.15A4.72,4.72,0,0,1,12,12a4.64,4.64,0,0,1,1-3.26,3.85,3.85,0,0,1,3-1.14,3.78,3.78,0,0,1,3,1.15A4.68,4.68,0,0,1,20,12ZM13.5,12a3.84,3.84,0,0,0,.64,2.4,2.25,2.25,0,0,0,1.89.82,2.25,2.25,0,0,0,1.88-.81A3.85,3.85,0,0,0,18.55,12a3.86,3.86,0,0,0-.63-2.39A2.23,2.23,0,0,0,16,8.77a2.27,2.27,0,0,0-1.9.81A3.8,3.8,0,0,0,13.5,12Z" fill="#666"/>
 69 |         <path d="M25,16.39a2.27,2.27,0,0,1-1.91-.88H23q0.08,0.82.08,1v2.65H21.74V9.79h1.11q0,0.18.19,0.87h0.07a2.16,2.16,0,0,1,1.93-1,2.25,2.25,0,0,1,1.89.88A4,4,0,0,1,27.61,13a4,4,0,0,1-.69,2.48A2.27,2.27,0,0,1,25,16.39ZM24.69,10.8a1.43,1.43,0,0,0-1.2.48,2.49,2.49,0,0,0-.38,1.54V13a3,3,0,0,0,.38,1.71,1.39,1.39,0,0,0,1.22.53,1.24,1.24,0,0,0,1.1-.59A3,3,0,0,0,26.2,13a2.92,2.92,0,0,0-.38-1.65A1.28,1.28,0,0,0,24.69,10.8Z" fill="#666"/>
 70 |         <path d="M37.36,9.67A2,2,0,0,1,36.88,11a2.39,2.39,0,0,1-1.34.73v0a2.59,2.59,0,0,1,1.55.64,1.84,1.84,0,0,1,.52,1.36,2.26,2.26,0,0,1-.87,1.91,4,4,0,0,1-2.48.67,5.59,5.59,0,0,1-2.4-.46V14.7a5.49,5.49,0,0,0,1.15.42,5,5,0,0,0,1.17.15,2.47,2.47,0,0,0,1.49-.37,1.34,1.34,0,0,0,.49-1.14,1.09,1.09,0,0,0-.54-1,3.48,3.48,0,0,0-1.71-.32H33.16V11.3h0.76Q36,11.3,36,9.88A1,1,0,0,0,35.6,9a1.61,1.61,0,0,0-1.05-.3,3.19,3.19,0,0,0-.94.14,4.44,4.44,0,0,0-1.07.54l-0.67-1a4.49,4.49,0,0,1,2.74-.87,3.26,3.26,0,0,1,2,.56A1.83,1.83,0,0,1,37.36,9.67Z" fill="#666"/>
 71 |       </g>
 72 |     </symbol>
 73 |   </defs>
 74 |   <title>rnn</title>
 75 |   <g id="_Group_" data-name="&lt;Group&gt;">
 76 |     <rect y="166" width="468" height="72" rx="10" ry="10" fill="#f0f0f5"/>
 77 |     <g opacity="0.1">
 78 |       <rect y="166" width="468" height="72" rx="10" ry="10" fill="none" stroke="#231f20"/>
 79 |     </g>
 80 |   </g>
 81 |   <path d="M199.26,28h-103" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 82 |   <g clip-path="url(#clip-path)">
 83 |     <g opacity="0.9">
 84 |       <path d="M54,124h9c5,0,9-4.5,9-10V38A10,10,0,0,1,82,28h31.75" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 85 |     </g>
 86 |     <g opacity="0.2">
 87 |       <path d="M54,88h9c5,0,9-4.5,9-10V38A10,10,0,0,1,82,28h31.75" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 88 |     </g>
 89 |     <g opacity="0.4">
 90 |       <path d="M54,52h9c5,0,9-4.5,9-10V38a10,10,0,0,1,10-10h31.7" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 91 |     </g>
 92 |     <g opacity="0.2">
 93 |       <path d="M150,124h-9c-4.95,0-9-4.5-9-10V38a10,10,0,0,0-10-10H94.25" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 94 |     </g>
 95 |     <g opacity="0.9">
 96 |       <path d="M150,88h-9c-4.95,0-9-4.5-9-10V38a10,10,0,0,0-10-10H94.25" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
 97 |     </g>
 98 |     <g opacity="0.2">
 99 |       <path d="M150,52h-9c-4.95,0-9-4.5-9-10V38a10,10,0,0,0-10-10H90.25" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
100 |     </g>
101 |   </g>
102 |   <g clip-path="url(#clip-path-2)">
103 |     <g opacity="0.2">
104 |       <path d="M186,124h9c5,0,9-4.5,9-10V26a10,10,0,0,1,10-10h31.7" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
105 |     </g>
106 |     <g opacity="0.9">
107 |       <path d="M186,88h9c5,0,9-4.5,9-10V26a10,10,0,0,1,10-10h31.7" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
108 |     </g>
109 |     <g opacity="0.2">
110 |       <path d="M186,52h9c5,0,9-4.5,9-10V26a10,10,0,0,1,10-10h31.7" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
111 |     </g>
112 |     <g opacity="0.9">
113 |       <path d="M283.05,126H262a10,10,0,0,1-10-10V38a10,10,0,0,0-10-10H208.65" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
114 |     </g>
115 |     <g opacity="0.2">
116 |       <path d="M283.05,90H262a10,10,0,0,1-10-10V38a10,10,0,0,0-10-10H208.65" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
117 |     </g>
118 |     <g opacity="0.2">
119 |       <path d="M283.05,53H262a10,10,0,0,1-10-10V38a10,10,0,0,0-10-10H208.65" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
120 |     </g>
121 |     <g opacity="0.9">
122 |       <path d="M282.25,123h-9.12c-5,0-9.12-4.5-9.12-10V26a10,10,0,0,0-10-10H222.5" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
123 |     </g>
124 |     <g opacity="0.2">
125 |       <path d="M282.25,87h-9.12c-5,0-9.12-4.5-9.12-10V26a10,10,0,0,0-10-10H222.5" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
126 |     </g>
127 |     <g opacity="0.2">
128 |       <path d="M282.25,50h-9.12c-5,0-9.12-4.5-9.12-10V26a10,10,0,0,0-10-10H222.5" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
129 |     </g>
130 |     <path d="M332.17,28H291.75a38.44,38.44,0,0,1-18.28-5.6l-1.18-.8A38.44,38.44,0,0,0,254,16H228.5" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
131 |   </g>
132 |   <g clip-path="url(#clip-path-3)">
133 |     <g opacity="0.9">
134 |       <path d="M318,124h9c5,0,9-4.5,9-10V26a10,10,0,0,1,10-10h31.7" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
135 |     </g>
136 |     <g opacity="0.2">
137 |       <path d="M318,88h9c5,0,9-4.5,9-10V26a10,10,0,0,1,10-10h31.7" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
138 |     </g>
139 |     <g opacity="0.2">
140 |       <path d="M318,52h9c5,0,9-4.5,9-10V26a10,10,0,0,1,10-10h31.7" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
141 |     </g>
142 |     <g opacity="0.2">
143 |       <path d="M415.05,126H394a10,10,0,0,1-10-10V38a10,10,0,0,0-10-10H339.83" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
144 |     </g>
145 |     <g opacity="0.2">
146 |       <path d="M415.05,90H394a10,10,0,0,1-10-10V38a10,10,0,0,0-10-10H339.83" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
147 |     </g>
148 |     <g opacity="0.9">
149 |       <path d="M415.05,54H394a10,10,0,0,1-10-10V38a10,10,0,0,0-10-10H339.83" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
150 |     </g>
151 |     <g opacity="0.2">
152 |       <path d="M414.25,123h-9.12c-5,0-9.12-4.5-9.12-10V26a10,10,0,0,0-10-10H354.5" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
153 |     </g>
154 |     <g opacity="0.2">
155 |       <path d="M414.25,87h-9.12c-5,0-9.12-4.5-9.12-10V26a10,10,0,0,0-10-10H354.5" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
156 |     </g>
157 |     <g opacity="0.9">
158 |       <path d="M414.25,51h-9.12c-5,0-9.12-4.5-9.12-10V26a10,10,0,0,0-10-10H354.5" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
159 |     </g>
160 |   </g>
161 |   <g clip-path="url(#clip-path-4)">
162 |     <g opacity="0.9">
163 |       <g>
164 |         <path d="M450,52h9c5,0,9-4.5,9-10V26a10,10,0,0,1,10-10h26.27" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
165 |         <path d="M509.75,16a27.2,27.2,0,0,0-7.69,4.28L503.61,16l-1.55-4.28A27.18,27.18,0,0,0,509.75,16Z" fill="#666"/>
166 |       </g>
167 |     </g>
168 |     <g opacity="0.2">
169 |       <path d="M450,124h9c5,0,9-4.5,9-10V26a10,10,0,0,1,10-10H498" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
170 |     </g>
171 |     <g opacity="0.2">
172 |       <path d="M450,88h9c5,0,9-4.5,9-10V26a10,10,0,0,1,10-10H498" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
173 |     </g>
174 |   </g>
175 |   <g id="_Group_2" data-name="&lt;Group&gt;">
176 |     <g opacity="0.1">
177 |       <rect x="13" y="180" width="48" height="48" rx="6" ry="6" opacity="0.8"/>
178 |       <rect x="13" y="180" width="48" height="48" rx="6" ry="6" fill="none" stroke="#000" stroke-width="1.5"/>
179 |       <path d="M42,211l-1.93-4.94H33.85L31.94,211H30.11l6.14-15.61h1.52L43.89,211H42Zm-2.5-6.57-1.81-4.82q-0.35-.91-0.72-2.24a20.34,20.34,0,0,1-.67,2.24l-1.83,4.82h5Z"/>
180 |     </g>
181 |     <use width="49.5" height="49.5" transform="translate(11.25 177.25)" xlink:href="#rnn-a"/>
182 |   </g>
183 |   <g>
184 |     <g opacity="0.1">
185 |       <rect x="145" y="180" width="48" height="48" rx="6" ry="6" opacity="0.8"/>
186 |       <rect x="145" y="180" width="48" height="48" rx="6" ry="6" fill="none" stroke="#000" stroke-width="1.5"/>
187 |       <path d="M174,211l-1.93-4.94h-6.23L163.94,211h-1.83l6.14-15.61h1.52L175.89,211H174Zm-2.5-6.57-1.81-4.82q-0.35-.91-0.72-2.24a20.34,20.34,0,0,1-.67,2.24l-1.83,4.82h5Z"/>
188 |     </g>
189 |     <use width="49.5" height="49.5" transform="translate(143.25 177.25)" xlink:href="#rnn-a"/>
190 |   </g>
191 |   <g>
192 |     <g opacity="0.1">
193 |       <rect x="277" y="180" width="48" height="48" rx="6" ry="6" opacity="0.8"/>
194 |       <rect x="277" y="180" width="48" height="48" rx="6" ry="6" fill="none" stroke="#000" stroke-width="1.5"/>
195 |       <path d="M306,211l-1.93-4.94h-6.23L295.94,211h-1.83l6.14-15.61h1.52L307.89,211H306Zm-2.5-6.57-1.81-4.82q-0.35-.91-0.72-2.24a20.34,20.34,0,0,1-.67,2.24l-1.83,4.82h5Z"/>
196 |     </g>
197 |     <use width="49.5" height="49.5" transform="translate(275.25 177.25)" xlink:href="#rnn-a"/>
198 |   </g>
199 |   <g id="_Group_3" data-name="&lt;Group&gt;">
200 |     <g opacity="0.1">
201 |       <rect x="409" y="180" width="48" height="48" rx="6" ry="6" opacity="0.8"/>
202 |       <rect x="409" y="180" width="48" height="48" rx="6" ry="6" fill="none" stroke="#000" stroke-width="1.5"/>
203 |       <path d="M438,211l-1.93-4.94h-6.23L427.94,211h-1.83l6.14-15.61h1.52L439.89,211H438Zm-2.5-6.57-1.81-4.82q-0.35-.91-0.72-2.24a20.34,20.34,0,0,1-.67,2.24l-1.83,4.82h5Z"/>
204 |     </g>
205 |     <use width="49.5" height="49.5" transform="translate(407.25 177.25)" xlink:href="#rnn-a"/>
206 |   </g>
207 |   <g opacity="0.9">
208 |     <use width="50.5" height="27.5" transform="translate(12 112)" xlink:href="#op-1"/>
209 |   </g>
210 |   <g opacity="0.2">
211 |     <use width="50.5" height="27.5" transform="translate(12 76)" xlink:href="#op-2"/>
212 |   </g>
213 |   <g opacity="0.4">
214 |     <use width="50.5" height="27.5" transform="translate(12 40)" xlink:href="#op-3"/>
215 |   </g>
216 |   <g opacity="0.2">
217 |     <use width="50.5" height="27.5" transform="translate(144 112)" xlink:href="#op-1"/>
218 |   </g>
219 |   <g opacity="0.9">
220 |     <use id="op-2-5" data-name="op-2" width="50.5" height="27.5" transform="translate(144 76)" xlink:href="#op-2"/>
221 |   </g>
222 |   <g opacity="0.2">
223 |     <use width="50.5" height="27.5" transform="translate(144 40)" xlink:href="#op-3"/>
224 |   </g>
225 |   <g opacity="0.9">
226 |     <use width="50.5" height="27.5" transform="translate(276 112)" xlink:href="#op-1"/>
227 |   </g>
228 |   <g opacity="0.2">
229 |     <use width="50.5" height="27.5" transform="translate(276 76)" xlink:href="#op-2"/>
230 |   </g>
231 |   <g opacity="0.2">
232 |     <use width="50.5" height="27.5" transform="translate(276 40)" xlink:href="#op-3"/>
233 |   </g>
234 |   <g opacity="0.2">
235 |     <use width="50.5" height="27.5" transform="translate(408 112)" xlink:href="#op-1"/>
236 |   </g>
237 |   <g opacity="0.2">
238 |     <use width="50.5" height="27.5" transform="translate(408 76)" xlink:href="#op-2"/>
239 |   </g>
240 |   <g opacity="0.9">
241 |     <use width="50.5" height="27.5" transform="translate(408 40)" xlink:href="#op-3"/>
242 |   </g>
243 |   <g opacity="0.6">
244 |     <text transform="translate(493 -84.12)" font-size="13" font-family="Open Sans">At each step the <tspan x="0" y="20">controller RNN outputs a </tspan><tspan x="0" y="40">probability distribution.</tspan></text>
245 |   </g>
246 |   <g opacity="0.6">
247 |     <text transform="translate(495 181.88)" font-size="13" font-family="Open Sans">We run all of the <tspan x="0" y="20">operations and average </tspan><tspan x="0" y="40">the outputs together.</tspan></text>
248 |   </g>
249 |   <g>
250 |     <line x1="60" y1="202.5" x2="132.57" y2="202.5" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
251 |     <path d="M138,202.5a27.2,27.2,0,0,0-7.69,4.28l1.55-4.28-1.55-4.28A27.18,27.18,0,0,0,138,202.5Z" fill="#666"/>
252 |   </g>
253 |   <g>
254 |     <line x1="36" y1="178" x2="36" y2="149.43" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
255 |     <path d="M36,144a27.2,27.2,0,0,0,4.28,7.69L36,150.14l-4.28,1.55A27.17,27.17,0,0,0,36,144Z" fill="#666"/>
256 |   </g>
257 |   <g>
258 |     <line x1="168" y1="178" x2="168" y2="149.43" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
259 |     <path d="M168,144a27.2,27.2,0,0,0,4.28,7.69L168,150.14l-4.28,1.55A27.17,27.17,0,0,0,168,144Z" fill="#666"/>
260 |   </g>
261 |   <g>
262 |     <line x1="300" y1="178" x2="300" y2="149.43" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
263 |     <path d="M300,144a27.2,27.2,0,0,0,4.28,7.69L300,150.14l-4.28,1.55A27.17,27.17,0,0,0,300,144Z" fill="#666"/>
264 |   </g>
265 |   <g>
266 |     <line x1="432" y1="178" x2="432" y2="149.43" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
267 |     <path d="M432,144a27.2,27.2,0,0,0,4.28,7.69L432,150.14l-4.28,1.55A27.17,27.17,0,0,0,432,144Z" fill="#666"/>
268 |   </g>
269 |   <g>
270 |     <line x1="192" y1="202.5" x2="264.57" y2="202.5" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
271 |     <path d="M270,202.5a27.2,27.2,0,0,0-7.69,4.28l1.55-4.28-1.55-4.28A27.18,27.18,0,0,0,270,202.5Z" fill="#666"/>
272 |   </g>
273 |   <g>
274 |     <line x1="324" y1="202.5" x2="396.57" y2="202.5" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="1.5"/>
275 |     <path d="M402,202.5a27.2,27.2,0,0,0-7.69,4.28l1.55-4.28-1.55-4.28A27.18,27.18,0,0,0,402,202.5Z" fill="#666"/>
276 |   </g>
277 | </svg>
278 | 


--------------------------------------------------------------------------------
/public/assets/rnn_read.svg:
--------------------------------------------------------------------------------
  1 | <svg id="edges" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 744 252">
  2 |   <defs>
  3 |     <symbol id="array-7" data-name="array-7" viewBox="0 0 253.5 37.5">
  4 |       <rect x="0.75" y="0.75" width="252" height="36" rx="6" ry="6" fill="#fff" stroke="#8c8c8c" stroke-miterlimit="10" stroke-width="1.5"/>
  5 |       <line x1="36.25" y1="36.75" x2="36.25" y2="0.75" fill="none" stroke="#8c8c8c" stroke-miterlimit="10"/>
  6 |       <line x1="72.25" y1="36.75" x2="72.25" y2="0.75" fill="none" stroke="#8c8c8c" stroke-miterlimit="10"/>
  7 |       <line x1="108.25" y1="36.75" x2="108.25" y2="0.75" fill="none" stroke="#8c8c8c" stroke-miterlimit="10"/>
  8 |       <line x1="144.25" y1="36.75" x2="144.25" y2="0.75" fill="none" stroke="#8c8c8c" stroke-miterlimit="10"/>
  9 |       <line x1="180.25" y1="36.75" x2="180.25" y2="0.75" fill="none" stroke="#8c8c8c" stroke-miterlimit="10"/>
 10 |       <line x1="216.25" y1="36.75" x2="216.25" y2="0.75" fill="none" stroke="#8c8c8c" stroke-miterlimit="10"/>
 11 |     </symbol>
 12 |     <symbol id="array-1" data-name="array-1" viewBox="0 0 37.5 37.5">
 13 |       <rect x="0.75" y="0.75" width="36" height="36" rx="6" ry="6" fill="#fff" stroke="#8c8c8c" stroke-miterlimit="10" stroke-width="1.5"/>
 14 |     </symbol>
 15 |     <symbol id="array-vector" data-name="array-vector" viewBox="0 0 36 36">
 16 |       <rect width="36" height="36" fill="#d8c2f2" opacity="0"/>
 17 |       <g opacity="0.5">
 18 |         <g>
 19 |           <line x1="18" y1="24" x2="18" y2="13.08" fill="none" stroke="#000" stroke-miterlimit="10"/>
 20 |           <polygon points="22.09 16.4 21.36 17.08 18 13.47 14.64 17.08 13.91 16.4 18 12 22.09 16.4"/>
 21 |         </g>
 22 |       </g>
 23 |     </symbol>
 24 |     <symbol id="array-positive-value" data-name="array-positive-value" viewBox="0 0 36 36">
 25 |       <rect width="36" height="36" fill="#0080f7" opacity="0"/>
 26 |       <rect x="4.42" y="4.42" width="27.17" height="27.17" rx="6" ry="6" fill="#3a5edd" opacity="0.8"/>
 27 |     </symbol>
 28 |     <symbol id="pointer" data-name="pointer" viewBox="0 0 26.87 26.87">
 29 |       <circle cx="13.43" cy="13.43" r="12.93" fill="none" stroke="#ffdc8c" stroke-miterlimit="10"/>
 30 |       <circle cx="13.43" cy="13.43" r="10.38" fill="#ffb200"/>
 31 |       <polygon points="11.32 19.26 11.32 17.43 10.72 17.43 10.71 16.14 10.1 16.21 10.1 15 9.54 14.99 9.46 13.78 8.88 13.78 8.89 13.16 8.28 13.16 8.28 11.34 10.11 11.34 10.11 11.94 10.71 11.94 10.71 6.46 11.33 6.45 11.33 5.86 12.54 5.86 12.54 6.45 13.16 6.47 13.16 8.89 14.37 8.89 14.39 9.49 16.21 9.51 16.21 10.12 17.43 10.12 17.43 10.79 18.04 10.73 18.05 11.39 18.65 11.33 18.65 15.61 18.04 15.52 17.98 17.43 17.43 17.43 17.43 19.26 11.32 19.26" fill="#fff" opacity="0.2"/>
 32 |       <g>
 33 |         <path d="M10.11,11.94c0-.09,0-0.19,0-0.28s0-.21,0-0.32H8.28v1.82H8.89V11.95h1.23v0.63h0.6v0.6h0.61V13.09q0-2.4,0-4.8,0-.92,0-1.85h1.21V5.85H11.33v0.6H10.71v5.47h-0.6Zm4.28-2.44a0.45,0.45,0,0,1,0-.07c0-.15,0-0.3,0-0.45s0,0,0-.08H13.16V6.47H12.55v5.47h0.61V9.51h1.24s0,0.06,0,.09q0,1.12,0,2.25s0,0.07,0,.1H15V10.12h1.23v2.43h0.6V10.71l0.57,0s0,0,0,.05,0,0.29,0,.44,0,0.07,0,.11H18a0,0,0,0,1,.06.06c0,0.24,0,.48,0,0.72q0,1.71,0,3.41s0,0,0,.08h-0.6s0,0,0,0q0,0.86,0,1.72s0,0,0,.06H16.81v1.21H11.94V17.42H11.33V16.21h-0.6a11.4,11.4,0,0,0,0,1.22h0.6v1.83c2,0,4.07,0,6.11,0,0-.1,0-0.19,0-0.28,0-.46,0-0.93,0-1.39a1.53,1.53,0,0,0,0-.16H18c0.05,0,.07,0,0.07-0.07,0-.45,0-0.89,0-1.34,0-.13,0-0.26,0-0.4l0.3,0h0.3V11.33H18v-0.6H17.43V10.11H16.21V9.51H14.39ZM10.1,15v1.21h0.52a0.07,0.07,0,0,0,.08-0.08c0-.32,0-0.65,0-1,0-.06,0-0.11,0-0.17H10.11V13.77H9.49V13.16H8.91a2.7,2.7,0,0,0,0,.62H9.47s0,0,0,.07,0,0.27,0,.41,0,0.45,0,.68a0,0,0,0,0,.05.06H10.1Z" fill="#fff"/>
 34 |         <path d="M17.43,17.43s0,0,0-.06q0-.86,0-1.72s0,0,0,0H18s0-.06,0-0.08q0-1.71,0-3.41c0-.24,0-0.48,0-0.72A0,0,0,0,0,18,11.33H17.44s0-.07,0-0.11,0-.29,0-0.44,0-.05,0-0.05l-0.57,0v1.84h-0.6V10.12H15v1.82H14.38s0-.07,0-0.1q0-1.12,0-2.25s0-.06,0-0.09h1.81v0.6h1.22v0.62H18v0.6h0.61v4.28h-0.3l-0.3,0c0,0.14,0,.27,0,0.4,0,0.45,0,.89,0,1.34,0,0.05,0,.07-0.07.07H17.43Z" fill="#fff"/>
 35 |         <path d="M17.43,17.43a1.53,1.53,0,0,1,0,.16c0,0.46,0,.93,0,1.39,0,0.09,0,.17,0,0.28-2,0-4.06,0-6.11,0V17.43h-0.6a11.4,11.4,0,0,1,0-1.22h0.6v1.21h0.61v1.22h4.88V17.43h0.62Z" fill="#fff"/>
 36 |         <path d="M11.33,6.45q0,0.92,0,1.85,0,2.4,0,4.8v0.07H10.72v-0.6h-0.6V11.93h0.6V6.46h0.61Z" fill="#fff"/>
 37 |         <path d="M14.39,9.49H13.16v2.43H12.55V6.47h0.61V8.89h1.21s0,0.06,0,.08,0,0.3,0,.45a0.44,0.44,0,0,0,0,.07h0Z" fill="#fff"/>
 38 |         <path d="M10.1,15H9.54a0,0,0,0,1-.05-0.06c0-.23,0-0.45,0-0.68s0-.27,0-0.41,0,0,0-.07H8.88a2.7,2.7,0,0,1,0-.62H9.49v0.61h0.62V15h0.61c0,0.06,0,.12,0,0.17,0,0.32,0,.65,0,1a0.07,0.07,0,0,1-.08.08H10.1V15Z" fill="#fff"/>
 39 |         <path d="M10.11,11.93H8.89v1.21H8.28V11.34h1.83c0,0.11,0,.21,0,0.32s0,0.19,0,.28h0Z" fill="#fff"/>
 40 |         <path d="M11.33,6.45V5.85h1.21v0.6H11.33Z" fill="#fff"/>
 41 |       </g>
 42 |     </symbol>
 43 |   </defs>
 44 |   <title>rnn</title>
 45 |   <g id="paths">
 46 |     <path id="edge0" d="M66,47v66.12c0.56,24,102,24.22,102,76.88" fill="none" stroke="#2a71d8" stroke-miterlimit="10" stroke-width="1.5"/>
 47 |     <path id="edge1" d="M102,47v66.12c0.56,24,68,24.22,68,76.88" fill="none" stroke="#2a71d8" stroke-miterlimit="10" stroke-width="1.5"/>
 48 |     <path id="edge2" d="M138.07,47v66.12c0.56,24,33.93,24.22,33.93,76.88" fill="none" stroke="#2a71d8" stroke-miterlimit="10" stroke-width="1.5"/>
 49 |     <path id="edge3" d="M174,47V191" fill="none" stroke="#2a71d8" stroke-miterlimit="10" stroke-width="1.5"/>
 50 |     <path id="edge4" d="M210,47v66.12c-0.56,24-34,24.22-34,76.88" fill="none" stroke="#2a71d8" stroke-miterlimit="10" stroke-width="1.5"/>
 51 |     <path id="edge5" d="M246,47v66.12c-0.56,24-68,24.22-68,76.88" fill="none" stroke="#2a71d8" stroke-miterlimit="10" stroke-width="1.5"/>
 52 |     <path id="edge6" d="M282,47v66.12c-0.56,24-102,24.22-102,76.88" fill="none" stroke="#2a71d8" stroke-miterlimit="10" stroke-width="1.5"/>
 53 |   </g>
 54 |   <use id="array-7-3" data-name="array-7" width="253.5" height="37.5" transform="translate(47.75 10.75)" xlink:href="#array-7"/>
 55 |   <use id="array-7-6" data-name="array-7" width="253.5" height="37.5" transform="translate(47.75 69.75)" xlink:href="#array-7"/>
 56 |   <use id="array-1-3" data-name="array-1" width="37.5" height="37.5" transform="translate(155.75 189.75)" xlink:href="#array-1"/>
 57 |   <g opacity="0.6">
 58 |     <text transform="translate(316 34)" font-size="13" font-family="Open Sans">attention</text>
 59 |   </g>
 60 |   <g opacity="0.6">
 61 |     <text transform="translate(316 92)" font-size="13" font-family="Open Sans">memory</text>
 62 |   </g>
 63 |   <g id="read-result">
 64 |     <use width="36" height="36" transform="translate(157 191)" xlink:href="#array-vector"/>
 65 |   </g>
 66 |   <g id="attention">
 67 |     <use id="array-positive-value-3" data-name="array-positive-value" width="36" height="36" transform="translate(48 11)" xlink:href="#array-positive-value"/>
 68 |     <use width="36" height="36" transform="translate(84 11)" xlink:href="#array-positive-value"/>
 69 |     <use width="36" height="36" transform="translate(120 11)" xlink:href="#array-positive-value"/>
 70 |     <use width="36" height="36" transform="translate(156 11)" xlink:href="#array-positive-value"/>
 71 |     <use width="36" height="36" transform="translate(192 11)" xlink:href="#array-positive-value"/>
 72 |     <use width="36" height="36" transform="translate(228 11)" xlink:href="#array-positive-value"/>
 73 |     <use width="36" height="36" transform="translate(264 11)" xlink:href="#array-positive-value"/>
 74 |   </g>
 75 |   <g id="memory">
 76 |     <use width="36" height="36" transform="translate(48 71)" xlink:href="#array-vector"/>
 77 |     <use width="36" height="36" transform="translate(84 71)" xlink:href="#array-vector"/>
 78 |     <use width="36" height="36" transform="translate(120 71)" xlink:href="#array-vector"/>
 79 |     <use width="36" height="36" transform="translate(156 71)" xlink:href="#array-vector"/>
 80 |     <use width="36" height="36" transform="translate(192 71)" xlink:href="#array-vector"/>
 81 |     <use width="36" height="36" transform="translate(228 71)" xlink:href="#array-vector"/>
 82 |     <use id="array-vector-17" data-name="array-vector" width="36" height="36" transform="translate(264 71)" xlink:href="#array-vector"/>
 83 |   </g>
 84 |   <use id="pointer-3" data-name="pointer" width="26.87" height="26.87" transform="translate(9.84 15.06)" xlink:href="#pointer"/>
 85 |   <g opacity="0.6">
 86 |     <text transform="translate(440 33.88)" font-size="13" font-family="Open Sans">The RNN gives an attention distribution <tspan x="0" y="20">which describe how we spread out the </tspan><tspan x="0" y="40">amount we care about different memory </tspan><tspan x="0" y="60">positions.</tspan></text>
 87 |   </g>
 88 |   <g opacity="0.6">
 89 |     <text transform="translate(440 172.81)" font-size="13" font-family="Open Sans">The read result is a weighted sum.</text>
 90 |   </g>
 91 |   <g opacity="0.6">
 92 |     <g>
 93 |       <line x1="202" y1="207" x2="203" y2="207" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="0.5"/>
 94 |       <line x1="205.01" y1="207" x2="413" y2="207" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="0.5" stroke-dasharray="2.01 2.01"/>
 95 |       <line x1="414" y1="207" x2="415" y2="207" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="0.5"/>
 96 |     </g>
 97 |   </g>
 98 |   <g>
 99 |     <path d="M443,205.59a1.5,1.5,0,0,0,0-.17l0.11-.48a4.07,4.07,0,0,1,.22-0.67q0.13-.3.33-0.71a2.31,2.31,0,0,1,.43-0.65,4.86,4.86,0,0,1,.56-0.48,1,1,0,0,1,.72-0.2,2.27,2.27,0,0,1,1.11.26,2.61,2.61,0,0,1,.67.48,0.93,0.93,0,0,1,.24.43,0.23,0.23,0,0,0,.07.13,0.76,0.76,0,0,0,.17-0.15,3.19,3.19,0,0,1,2.41-1.13h0.06a1.69,1.69,0,0,1,1.56.89,2.06,2.06,0,0,1,.17.8,1.74,1.74,0,0,1-.28,1,1.35,1.35,0,0,1-.56.5,1.22,1.22,0,0,1-.54.09,1,1,0,0,1-.69-0.24,0.81,0.81,0,0,1-.26-0.63,1.41,1.41,0,0,1,1.21-1.39A1.66,1.66,0,0,0,450,203a2.8,2.8,0,0,0-2.23,1.6,2.88,2.88,0,0,0-.33.72q-0.11.37-.74,2.88-0.74,3-.85,3.23a1,1,0,0,1-.93.59,0.74,0.74,0,0,1-.46-0.13,0.78,0.78,0,0,1-.24-0.26,0.32,0.32,0,0,1,0-.22q0-.28.87-3.73a37.67,37.67,0,0,0,.87-3.84q0-.85-0.56-0.85a0.93,0.93,0,0,0-.78.61A6.3,6.3,0,0,0,444,205a6.18,6.18,0,0,1-.24.78,0.72,0.72,0,0,1-.35,0h-0.3A0.36,0.36,0,0,1,443,205.59Z" fill="#666"/>
100 |     <path d="M478.79,206.15v0.24a0.54,0.54,0,0,1-.33.43H461.91l0.37,0.3a5.92,5.92,0,0,1,.63.59q0.3,0.33.71,0.8a4.41,4.41,0,0,1,.72,1.21q0.3,0.74.56,1.54a2.44,2.44,0,0,1,.11.54q0,0.24-.43.24h-0.22a0.17,0.17,0,0,1-.13-0.09,0.85,0.85,0,0,1-.11-0.19,2.1,2.1,0,0,1-.09-0.41,6.62,6.62,0,0,0-1.47-2.82,6.68,6.68,0,0,0-2.64-1.84,0.85,0.85,0,0,1-.39-0.24,0.25,0.25,0,0,1,.09-0.22,1.44,1.44,0,0,1,.3-0.15,6.66,6.66,0,0,0,1.84-1.08,6.43,6.43,0,0,0,1.24-1.32,7.45,7.45,0,0,0,.69-1.28,10.62,10.62,0,0,0,.37-1l0.06-.37,0.07-.17a0.23,0.23,0,0,1,.11-0.09,0.67,0.67,0,0,1,.28,0q0.43,0,.43.24a2.44,2.44,0,0,1-.11.54,9.12,9.12,0,0,1-.54,1.5,6.26,6.26,0,0,1-.69,1.17q-0.37.48-.67,0.8a6.46,6.46,0,0,1-.65.61l-0.43.37h16.55a0.54,0.54,0,0,1,.33.43v-0.24Z" fill="#666"/>
101 |     <path d="M487.32,191.27s4.41,0,13.11,0h13l1.26,2.93q1.28,3,1.37,3.16h-0.87l-0.15-.3a7.32,7.32,0,0,0-1.21-1.69,9.09,9.09,0,0,0-2.41-1.67,11.86,11.86,0,0,0-3.06-.93,25.21,25.21,0,0,0-3.27-.37q-1.54-.06-4-0.09h-9.71l0.17,0.24q10,13.72,10.08,13.85a0.19,0.19,0,0,1,0,.13L496,213l-5.72,6.5s1.52,0,4.57,0h3.06q1.93,0,2.77,0,2.95,0,4.77-.11a27.83,27.83,0,0,0,3.62-.46,10,10,0,0,0,3.06-1.06,8.13,8.13,0,0,0,2.23-1.89,6.87,6.87,0,0,0,.89-1.56h0.87s-0.05.17-.15,0.46-0.28.76-.54,1.41-0.48,1.26-.67,1.82l-1.26,3.36-13,0q-13,0-13.11,0a0.18,0.18,0,0,1-.13-0.2,0.33,0.33,0,0,1,0-.13L498.81,208s-0.24-.34-0.71-1-1.24-1.68-2.28-3.12-2-2.73-2.82-3.86l-5.76-7.91,0-.33A0.7,0.7,0,0,1,487.32,191.27Z" fill="#666"/>
102 |     <path d="M499.35,230.92a1.68,1.68,0,0,1,.14-0.47,7.35,7.35,0,0,1,.37-0.78,2.53,2.53,0,0,1,.67-0.78,1.39,1.39,0,0,1,.92-0.34,1.45,1.45,0,0,1,1,.35,1.25,1.25,0,0,1,.41.95,3,3,0,0,1-.21.86q-0.21.6-.61,1.61T501.38,234a2.51,2.51,0,0,0-.08.49q0,0.38.26,0.38a1,1,0,0,0,.29,0,1,1,0,0,0,.35-0.21,2.08,2.08,0,0,0,.41-0.54,4.45,4.45,0,0,0,.38-0.9,0.63,0.63,0,0,1,.08-0.21,0.56,0.56,0,0,1,.26,0q0.31,0,.31.15a1.68,1.68,0,0,1-.14.47,6,6,0,0,1-.38.78,2.56,2.56,0,0,1-.69.77,1.54,1.54,0,0,1-.95.34,1.44,1.44,0,0,1-.9-0.32,1.2,1.2,0,0,1-.43-1,1.54,1.54,0,0,1,.08-0.49q0.08-.23.66-1.75t0.67-1.85a2.54,2.54,0,0,0,.11-0.6q0-.37-0.26-0.37h0a1.07,1.07,0,0,0-.84.51,3.57,3.57,0,0,0-.58,1.29l0,0a0.12,0.12,0,0,0,0,0,0,0,0,0,1,0,0l0,0h-0.4A0.26,0.26,0,0,1,499.35,230.92Zm2.5-4.8a0.86,0.86,0,0,1,.29-0.64,1,1,0,0,1,.67-0.29,0.62,0.62,0,0,1,.46.18,0.68,0.68,0,0,1,.2.46,0.87,0.87,0,0,1-.31.64,1,1,0,0,1-.67.31,0.69,0.69,0,0,1-.43-0.15A0.64,0.64,0,0,1,501.84,226.13Z" fill="#666"/>
103 |     <path d="M528.53,204.7a2,2,0,0,0-.11-0.48,2.06,2.06,0,0,0-.5-0.76,1.39,1.39,0,0,0-1-.43,2.08,2.08,0,0,0-1.45.67,4.53,4.53,0,0,0-1.08,1.76,17.3,17.3,0,0,0-.89,3.55v0.24a1.16,1.16,0,0,1,0,.26,1.82,1.82,0,0,0,.39,1.34,1.4,1.4,0,0,0,.93.39,2.45,2.45,0,0,0,1.63-.72,3.64,3.64,0,0,0,1-1.11q0-.09.59-2.32T528.53,204.7Zm-6.89,3.71a6.4,6.4,0,0,1,1.65-4.16,4.85,4.85,0,0,1,3.71-2,2.46,2.46,0,0,1,2,1.06,1.08,1.08,0,0,1,1-.65,0.78,0.78,0,0,1,.5.17,0.53,0.53,0,0,1,.22.43q0,0.28-.8,3.47t-0.82,3.6a1.16,1.16,0,0,0,.15.71,0.64,0.64,0,0,0,.45.2,0.94,0.94,0,0,0,.43-0.2A4.91,4.91,0,0,0,531,209a0.81,0.81,0,0,1,.22-0.45,0.63,0.63,0,0,1,.22,0h0.09q0.41,0,.41.19a3.44,3.44,0,0,1-.11.59,6.8,6.8,0,0,1-.43,1.17,3.69,3.69,0,0,1-.69,1.08,2.14,2.14,0,0,1-.69.45,2.31,2.31,0,0,1-.52,0,2.21,2.21,0,0,1-1.24-.32,1.66,1.66,0,0,1-.65-0.67l-0.13-.33s0,0-.09,0l-0.09.09a3.8,3.8,0,0,1-2.6,1.21,3,3,0,0,1-2.1-.87A3.65,3.65,0,0,1,521.64,208.41Z" fill="#666"/>
104 |     <path d="M532.71,210.66a1.68,1.68,0,0,1,.14-0.47,7.35,7.35,0,0,1,.37-0.78,2.53,2.53,0,0,1,.67-0.78,1.39,1.39,0,0,1,.92-0.34,1.45,1.45,0,0,1,1,.35,1.25,1.25,0,0,1,.41.95,3,3,0,0,1-.21.86q-0.21.6-.61,1.61t-0.64,1.73a2.51,2.51,0,0,0-.08.49q0,0.38.26,0.38a1,1,0,0,0,.29,0,1,1,0,0,0,.35-0.21,2.08,2.08,0,0,0,.41-0.54,4.45,4.45,0,0,0,.38-0.9,0.63,0.63,0,0,1,.08-0.21,0.56,0.56,0,0,1,.26,0q0.31,0,.31.15a1.68,1.68,0,0,1-.14.47,6,6,0,0,1-.38.78,2.56,2.56,0,0,1-.69.77,1.54,1.54,0,0,1-.95.34,1.44,1.44,0,0,1-.9-0.32,1.2,1.2,0,0,1-.43-1,1.54,1.54,0,0,1,.08-0.49q0.08-.23.66-1.75t0.67-1.85a2.54,2.54,0,0,0,.11-0.6q0-.37-0.26-0.37h0a1.07,1.07,0,0,0-.84.51,3.57,3.57,0,0,0-.58,1.29l0,0a0.12,0.12,0,0,0,0,0,0,0,0,0,1,0,0l0,0h-0.4A0.26,0.26,0,0,1,532.71,210.66Zm2.5-4.8a0.86,0.86,0,0,1,.29-0.64,1,1,0,0,1,.67-0.29,0.62,0.62,0,0,1,.46.18,0.68,0.68,0,0,1,.2.46,0.87,0.87,0,0,1-.31.64,1,1,0,0,1-.67.31,0.69,0.69,0,0,1-.43-0.15A0.64,0.64,0,0,1,535.21,205.87Z" fill="#666"/>
105 |     <path d="M546.11,198.18a2.36,2.36,0,0,0-1.24-.17,6.23,6.23,0,0,1-.67,0,0.18,0.18,0,0,1-.15-0.22s0-.09,0-0.24l0-.15a0.65,0.65,0,0,0,0-.11,0.38,0.38,0,0,1,0-.11q0-.09,0-0.06s0,0,.09,0a0.11,0.11,0,0,1,.11,0,0.3,0.3,0,0,0,.17,0l0.26,0h0.65l1,0h2a0.43,0.43,0,0,1,.35.11q0,0.09.8,6.11l0.78,6,0.5-.8q0.52-.78,1.39-2.17l1.91-3q3.79-6,3.84-6.09l0.07-.07,0.09-.06,0.13,0h2.95a5.27,5.27,0,0,0,.63,0q0.74,0,.74.24a1.78,1.78,0,0,1-.07.37q-0.07.26-.07,0.28a1.28,1.28,0,0,1-.8.13,9.64,9.64,0,0,0-1.11.07,0.62,0.62,0,0,0-.39.24q-0.06.11-1.56,6.13t-1.52,6.09a0.17,0.17,0,0,0,0,.11l0.15,0.09a0.7,0.7,0,0,0,.37,0,3.47,3.47,0,0,1,.71,0H559a0.78,0.78,0,0,1,.13.24,1.43,1.43,0,0,1-.15.65,0.48,0.48,0,0,1-.35.11l-0.89,0-2,0h-2a6.4,6.4,0,0,0-.76,0q-0.37,0-.37-0.22s0-.13,0-0.3a0.68,0.68,0,0,1,.17-0.39,1.8,1.8,0,0,1,.5-0.07q0.59,0,1.3-.07a0.58,0.58,0,0,0,.41-0.26q0-.09.82-3.16t1.54-6.13l0.76-3.06-4.2,6.7q-4.25,6.76-4.35,6.87l-0.09,0a0.7,0.7,0,0,1-.35.07,0.39,0.39,0,0,1-.39-0.15q0-.09-0.89-6.72l-0.85-6.65-1.47,5.85q-1.45,5.76-1.45,6,0.13,0.72,1.56.72H546a0.42,0.42,0,0,1,.15.2,1,1,0,0,1-.07.39,0.68,0.68,0,0,1-.17.39l-0.24,0h-0.26l-0.74,0-1.39,0-1.34,0-0.8,0a1.17,1.17,0,0,1-.41,0,0.2,0.2,0,0,1-.09-0.2,2.3,2.3,0,0,1,.07-0.3,1.32,1.32,0,0,1,.11-0.33,0.51,0.51,0,0,1,.48-0.13,1.92,1.92,0,0,0,1.93-.87q0.09-.13,1.49-5.81T546.11,198.18Z" fill="#666"/>
106 |     <path d="M561.18,210.66a1.68,1.68,0,0,1,.14-0.47,7.37,7.37,0,0,1,.37-0.78,2.53,2.53,0,0,1,.67-0.78,1.39,1.39,0,0,1,.92-0.34,1.45,1.45,0,0,1,1,.35,1.25,1.25,0,0,1,.41.95,3,3,0,0,1-.21.86q-0.21.6-.61,1.61t-0.64,1.73a2.51,2.51,0,0,0-.08.49q0,0.38.26,0.38a1,1,0,0,0,.29,0,1,1,0,0,0,.35-0.21,2.08,2.08,0,0,0,.41-0.54,4.45,4.45,0,0,0,.38-0.9,0.63,0.63,0,0,1,.08-0.21,0.56,0.56,0,0,1,.26,0q0.31,0,.31.15a1.68,1.68,0,0,1-.14.47,6,6,0,0,1-.38.78,2.56,2.56,0,0,1-.69.77,1.54,1.54,0,0,1-.95.34,1.44,1.44,0,0,1-.9-0.32,1.2,1.2,0,0,1-.43-1,1.54,1.54,0,0,1,.08-0.49q0.08-.23.66-1.75t0.67-1.85a2.54,2.54,0,0,0,.11-0.6q0-.37-0.26-0.37h0a1.07,1.07,0,0,0-.84.51,3.57,3.57,0,0,0-.58,1.29l0,0a0.12,0.12,0,0,0,0,0,0,0,0,0,1,0,0l0,0h-0.4A0.26,0.26,0,0,1,561.18,210.66Zm2.5-4.8a0.86,0.86,0,0,1,.29-0.64,1,1,0,0,1,.67-0.29,0.62,0.62,0,0,1,.46.18,0.68,0.68,0,0,1,.2.46,0.87,0.87,0,0,1-.31.64,1,1,0,0,1-.67.31,0.69,0.69,0,0,1-.43-0.15A0.64,0.64,0,0,1,563.68,205.87Z" fill="#666"/>
107 |   </g>
108 | </svg>
109 | 


--------------------------------------------------------------------------------
/public/assets/rnn_write.html:
--------------------------------------------------------------------------------
  1 | <script>
  2 | "use strict";
  3 | (function() {
  4 | 
  5 |   function appendArrowhead(selection) {
  6 |     selection.append("marker")
  7 |         .attr("id", "arrowhead")
  8 |         .attr("viewBox", "0 -5 10 10")
  9 |         .attr("refX", 5)
 10 |         .attr("refY", 0)
 11 |         .attr("markerWidth", 10)
 12 |         .attr("markerHeight", 10)
 13 |         .attr("orient", "auto")
 14 |       .append("path")
 15 |         .attr("d", "M0,-5L5,0L0,5")
 16 |         .style("fill", "none")
 17 |         .style("stroke", "grey");
 18 |   }
 19 | 
 20 |   var vectorScale = d3.scaleLinear()
 21 |       .domain([0, 1])
 22 |       .range([-14, 14]);
 23 | 
 24 |   var memoryData = [
 25 |     {x: 0.9, y: 0.9},
 26 |     {x: 0.8, y: 0.8},
 27 |     {x: 0.1, y: 0.9},
 28 |     {x: 0.4, y: 0.2},
 29 |     {x: 0.2, y: 0.2},
 30 |     {x: 0.4, y: 0.3},
 31 |     {x: 0.1, y: 0.5}
 32 |   ];
 33 | 
 34 |   var writeData = {x: 0.9, y: 0};
 35 | 
 36 |   //
 37 |   // Read
 38 |   //
 39 |   var nodeWidth = 36;
 40 |   var readHtml = d3.selectAll("#rnn-read");
 41 |   var svg = readHtml.select("svg");
 42 |   var result = svg.select("#read-result").style("opacity", 0);
 43 |   var resultBBox = result.node().getBBox();
 44 |   var memory = svg.selectAll("#memory use");
 45 |   var memoryBBox = svg.select("#memory").node().getBBox();
 46 |   var attention = svg.selectAll("#attention use");
 47 |   var attentionBBox = svg.select("#attention").node().getBBox();
 48 |   var path = svg.selectAll("#paths path");
 49 | 
 50 |   appendArrowhead(svg);
 51 |   var resultArrow = svg.append("line")
 52 |       .attr("class", "result-line")
 53 |       .attr("marker-end", "url(#arrowhead)")
 54 |       .style("stroke", "grey");
 55 | 
 56 |   memory.data(memoryData)
 57 |     .each(function(d, i) {
 58 |       this.style.opacity = 0;
 59 |       d.top = memoryBBox.y;
 60 |       d.left = memoryBBox.x + nodeWidth * i;
 61 |       d.width = nodeWidth;
 62 |     });
 63 | 
 64 |   var memoryVectors = svg.selectAll(".vector")
 65 |       .data(memoryData)
 66 |     .enter().append("line")
 67 |       .attr("class", "vector")
 68 |       .attr("transform", function(d) {
 69 |         return `translate(${d.left + d.width / 2 - vectorScale(d.x) / 2}, ${d.top + d.width / 2 - vectorScale(d.y) / 2})`
 70 |       })
 71 |       .attr("x2", function(d) { return  vectorScale(d.x); })
 72 |       .attr("y2", function(d) { return  vectorScale(d.y); })
 73 |       .attr("marker-end", "url(#arrowhead)")
 74 |       .style("stroke", "grey");
 75 | 
 76 |   function updateReadAttention(data) {
 77 |     attention.data(data)
 78 |         .style("opacity", function(d) { return  d + 0.05; });
 79 | 
 80 |     path.data(data)
 81 |         .style("stroke-opacity", function(d) { return  d + 0.1; });
 82 | 
 83 |     var resultX = d3.sum(memoryData, function(d, i) { return d.x * data[i]; }) / d3.sum(data);
 84 |     var resultY = d3.sum(memoryData, function(d, i) { return d.y * data[i]; }) / d3.sum(data);
 85 | 
 86 |     resultArrow
 87 |         .attr("transform",`translate(${resultBBox.x + resultBBox.width / 2 - vectorScale(resultX) / 2}, ${resultBBox.y + resultBBox.width / 2 - vectorScale(resultY) / 2})`)
 88 |         .attr("x2", function(d) { return  vectorScale(resultX); })
 89 |         .attr("y2", function(d) { return  vectorScale(resultY); });
 90 |   }
 91 | 
 92 |   var length = memory.size();
 93 |   var attentionData = d3.range(length).map(function() { return Math.random(); });
 94 |   updateReadAttention(attentionData);
 95 | 
 96 |   readHtml.on("mousemove", function() {
 97 |     var data = [];
 98 |     attention.each(function() {
 99 |       var bbox = this.getBoundingClientRect()
100 |       var distance = Math.abs(bbox.left - d3.event.clientX + bbox.width / 2);
101 |       data.push(Math.exp(-distance / 25));
102 |     });
103 |     data = data.map(function(d) { return  d / d3.sum(data); });
104 |     updateReadAttention(data);
105 |   });
106 | 
107 |   var initReadData = d3.range(attention.size()).map(function(d) { return  Math.exp(-d); });
108 |   initReadData = initReadData.map(function(d) { return  d / d3.sum(initReadData); });
109 |   updateReadAttention(initReadData);
110 | 
111 |   //
112 |   // Write
113 |   //
114 | 
115 |   var writeHtml = d3.selectAll("#rnn-write");
116 |   var writeSvg = writeHtml.select("svg");
117 |   var writeMemory = writeSvg.selectAll("#memory use");
118 |   var writeMemoryBBox = writeSvg.select("#memory").node().getBBox();
119 |   var writeNewMemory = writeSvg.selectAll("#new-memory use");
120 |   var writeNewMemoryBBox = writeSvg.select("#new-memory").node().getBBox();
121 |   var writeAttention = writeSvg.selectAll("#attention use");
122 |   var writeAttentionBBox = writeSvg.select("#attention").node().getBBox();
123 |   var writePath = writeSvg.selectAll("#paths path");
124 |   var writeResult = writeSvg.select("#write-result").style("opacity", 0);
125 |   var writeResultBBox = writeResult.node().getBBox();
126 |   var newMemoryData = memoryData.map(function(){ return {}; });
127 | 
128 |   appendArrowhead(writeSvg);
129 |   var writeArrow = writeSvg.append("line")
130 |       .attr("class", "write-line")
131 |       .attr("marker-end", "url(#arrowhead)")
132 |       .style("stroke", "grey")
133 |       .attr("transform", "translate(" + (writeResultBBox.x + writeResultBBox.width / 2 - vectorScale(writeData.x) / 2) + ", " + (writeResultBBox.y + writeResultBBox.width / 2 - vectorScale(writeData.y) / 2) + ")")
134 |       .attr("x2", vectorScale(writeData.x))
135 |       .attr("y2", vectorScale(writeData.y));
136 | 
137 |   writeMemory.data(memoryData)
138 |     .each(function(d, i) {
139 |       this.style.opacity = 0;
140 |       d.top = writeMemoryBBox.y;
141 |       d.left = writeMemoryBBox.x + i * nodeWidth;
142 |       d.width = nodeWidth;
143 |     });
144 | 
145 |   var writeMemoryVectors = writeSvg.selectAll(".vector")
146 |       .data(memoryData)
147 |     .enter().append("line")
148 |       .attr("class", "vector")
149 |       .attr("transform", function(d) {
150 |         return "translate(" + (d.left + d.width / 2 - vectorScale(d.x) / 2) + ", " + (d.top + d.width / 2 - vectorScale(d.y) / 2) + ")";
151 |       })
152 |       .attr("x2", function(d) { return  vectorScale(d.x); })
153 |       .attr("y2", function(d) { return  vectorScale(d.y); })
154 |       .attr("marker-end", "url(#arrowhead)")
155 |       .style("stroke", "grey");
156 | 
157 |   writeNewMemory.data(newMemoryData)
158 |     .each(function(d, i) {
159 |       this.style.opacity = 0;
160 |       d.top = writeNewMemoryBBox.y;
161 |       d.left = writeNewMemoryBBox.x + i * nodeWidth;
162 |       d.width = nodeWidth;
163 |     });
164 | 
165 |   var writeNewMemoryVectors = writeSvg.selectAll(".new-vector")
166 |       .data(newMemoryData)
167 |     .enter().append("line")
168 |       .attr("class", "new-vector")
169 |       .attr("marker-end", "url(#arrowhead)")
170 |       .style("stroke", "grey");
171 | 
172 |   function updateWriteAttention(data) {
173 |     newMemoryData.forEach(function(d, i) {
174 |       d.x = (memoryData[i].x + writeData.x * data[i]) / (1 + data[i]);
175 |       d.y = (memoryData[i].y + writeData.y * data[i]) / (1 + data[i]);
176 |     });
177 |     writeNewMemoryVectors
178 |         .attr("transform", function(d) {
179 |           return "translate(" + (d.left + d.width / 2 - vectorScale(d.x) / 2) + ", " + (d.top + d.width / 2 - vectorScale(d.y) / 2) + ")";
180 |         })
181 |         .attr("x2", function(d) { return  vectorScale(d.x); })
182 |         .attr("y2", function(d) { return  vectorScale(d.y); });
183 | 
184 |     writeAttention.data(data)
185 |         .style("opacity", function(d) { return  d + 0.05; });
186 | 
187 |     writePath.data(data)
188 |         .style("stroke-opacity", function(d) { return  d + 0.1; });
189 |   }
190 | 
191 |   writeHtml.on("mousemove", function() {
192 |     var data = [];
193 |     writeAttention.each(function() {
194 |       var bbox = this.getBoundingClientRect()
195 |       var distance = Math.abs(bbox.left - d3.event.clientX + bbox.width / 2);
196 |       data.push(Math.exp(-distance / 25));
197 |     });
198 |     data = data.map(function(d) { return  d / d3.sum(data); });
199 |     updateWriteAttention(data);
200 |   });
201 | 
202 |   var initWriteData = d3.range(writeAttention.size()).map(function(d) { return  Math.exp(-d); });
203 |   initWriteData = initWriteData.map(function(d) { return  d / d3.sum(initWriteData); });
204 |   updateWriteAttention(initWriteData);
205 | 
206 | })();
207 | </script>
208 | 


--------------------------------------------------------------------------------
/public/assets/rnn_write_detail.html:
--------------------------------------------------------------------------------
  1 | <script>
  2 | "use strict";
  3 | //
  4 | // Data
  5 | //
  6 | 
  7 | var vectorScale = d3.scaleLinear().domain([0, 1]).range([-14, 14]);
  8 | 
  9 | var memoryData = [{ x: 0.4, y: 0.2 }, { x: 0.2, y: 0.2 }, { x: 0.1, y: 0.9 }, { x: 0.9, y: 0.9 }, { x: 0.4, y: 0.3 }];
 10 | var interpolationData = [0.3];
 11 | var shiftData = [0, 0.2, 0.8];
 12 | var previousAttentionData = [0, 0.2, 0, 0.2, 0.6];
 13 | 
 14 | //
 15 | // DOM
 16 | //
 17 | 
 18 | var nodeWidth = 36;
 19 | var html = d3.selectAll("#rnn-write-detail");
 20 | var svg = html.select("svg");
 21 | var query = svg.selectAll("#query").style("opacity", 0);
 22 | var memory = svg.selectAll("#memory use").style("opacity", 0);
 23 | var memoryBBox = svg.select("#memory").node().getBBox();
 24 | var shift = svg.selectAll("#shift use");
 25 | 
 26 | //
 27 | // Render
 28 | //
 29 | 
 30 | // Store positions of vectors
 31 | function cachePositions(selection) {
 32 |   selection.each(function (d) {
 33 |     var bBox = this.getBBox();
 34 |     d.top = bBox.y;
 35 |     d.left = bBox.x;
 36 |     d.width = bBox.width;
 37 |   });
 38 | }
 39 | 
 40 | // Render new vector lines
 41 | function renderVector(selection) {
 42 |   selection.attr("transform", function (d) {
 43 |     return "translate(" + (d.left + d.width / 2 - vectorScale(d.x) / 2) + ", " + (d.top + d.width / 2 - vectorScale(d.y) / 2) + ")";
 44 |   }).attr("x2", function (d) {
 45 |     return vectorScale(d.x);
 46 |   }).attr("y2", function (d) {
 47 |     return vectorScale(d.y);
 48 |   }).attr("marker-end", "url(#arrowhead)").style("stroke", "grey");
 49 | }
 50 | 
 51 | // Memory
 52 | memory.data(memoryData);
 53 | memory.each(function(d, i) {
 54 |   d.top = memoryBBox.y;
 55 |   d.left = memoryBBox.x + nodeWidth * i;
 56 |   d.width = nodeWidth;
 57 | })
 58 | // cachePositions(memory);
 59 | var memoryVector = svg.selectAll(".memory-vector").data(memoryData).enter().append("line").attr("class", "memory-vector");
 60 | renderVector(memoryVector);
 61 | 
 62 | var queryData = [{ x: 0.7, y: 0.8 }];
 63 | query.data(queryData);
 64 | cachePositions(query);
 65 | 
 66 | var queryVector = svg.selectAll(".query-vector").data(queryData).enter().append("line").attr("class", "query-vector");
 67 | 
 68 | var clamp = d3.scaleLinear().clamp(true);
 69 | 
 70 | function redraw() {
 71 | 
 72 |   renderVector(queryVector);
 73 | 
 74 |   // Dot
 75 |   var dotData = memoryData.map(function (v) {
 76 |     return 2 * (v.x - 0.5) * 2 * (queryData[0].x - 0.5) + 2 * (v.y - 0.5) * 2 * (queryData[0].y - 0.5);
 77 |   });
 78 |   svg.selectAll("#dot use").data(dotData).attr("xlink:href", function (d) {
 79 |     return d < 0 ? "#array-negative-value" : "#array-positive-value";
 80 |   }).style("opacity", function (d) {
 81 |     return Math.abs(d);
 82 |   });
 83 | 
 84 |   // Softmax
 85 |   var expDotData = dotData.map(Math.exp);
 86 |   var softmaxData = expDotData.map(function (x) {
 87 |     return x / d3.sum(expDotData);
 88 |   });
 89 |   svg.selectAll("#softmax use").data(softmaxData).style("opacity", function (d) {
 90 |     return d;
 91 |   });
 92 | 
 93 |   // Interpolate
 94 |   svg.selectAll("#previous use").data(previousAttentionData).style("opacity", function (d) {
 95 |     return d;
 96 |   });
 97 | 
 98 |   svg.selectAll("#interpolate-amount").data(interpolationData).style("opacity", function (d) {
 99 |     return d;
100 |   });
101 | 
102 |   var interpolateData = previousAttentionData.map(function (d, i) {
103 |     return interpolationData * d + (1 - interpolationData) * softmaxData[i];
104 |   });
105 |   svg.selectAll("#interpolate use").data(interpolateData).style("opacity", function (d) {
106 |     return d;
107 |   });
108 | 
109 |   // Convolve
110 |   shift.data(shiftData).style("opacity", function (d) {
111 |     return d;
112 |   });
113 | 
114 |   var convolveData = dotData.map(function (x) {
115 |     return 0;
116 |   });
117 |   for (var n in shiftData) {
118 |     for (var i in convolveData) {
119 |       if (i - (1 - n) >= 0) {
120 |         convolveData[i - (1 - n)] += shiftData[n] * interpolateData[i];
121 |       }
122 |     }
123 |   }
124 |   // = dotData;
125 |   svg.selectAll("#convolve use").data(convolveData).style("opacity", function (d) {
126 |     return d;
127 |   });
128 | 
129 |   // Sharpen
130 |   var sharpenData = convolveData.map(function (x) {
131 |     return x * x;
132 |   });
133 |   sharpenData = sharpenData.map(function (x) {
134 |     return x / d3.sum(sharpenData);
135 |   });
136 |   svg.selectAll("#new-attention use").data(sharpenData).style("opacity", function (d) {
137 |     return d;
138 |   });
139 | }
140 | 
141 | svg.select("#query-hover").on("mousemove", function () {
142 |   var bbox = svg.select("#query").node().getBoundingClientRect();
143 |   var x = d3.event.clientX - bbox.left - bbox.width / 2;
144 |   var y = d3.event.clientY - bbox.top - bbox.height / 2;
145 |   //TODO: this clamping is awkward
146 |   queryData[0].x = clamp((x + 25) / 50);
147 |   queryData[0].y = clamp((y + 25) / 50);
148 |   redraw();
149 | });
150 | svg.select("#interpolate-hover").on("mousemove", function () {
151 |   var bbox = svg.select("#interpolate-amount").node().getBoundingClientRect();
152 |   interpolationData = [Math.max(0, Math.min(1, (d3.event.clientX - bbox.left) / bbox.width))];
153 |   redraw();
154 | });
155 | // .on("mouseout", function() {
156 | //   interpolationData = [0.3];
157 | //   redraw();
158 | // });
159 | 
160 | svg.select("#shift-hover").on("mousemove", function () {
161 |   //  shiftData = [0, 0.2, 0.8];
162 |   shiftData = [];
163 |   shift.each(function () {
164 |     var bbox = this.getBoundingClientRect();
165 |     var distance = Math.abs(bbox.left - d3.event.clientX + bbox.width / 2);
166 |     shiftData.push(Math.exp(-distance / 25));
167 |   });
168 |   shiftData = shiftData.map(function (d) {
169 |     return d / d3.sum(shiftData);
170 |   });
171 |   redraw();
172 | });
173 | redraw();
174 | 
175 | </script>
176 | 


--------------------------------------------------------------------------------
/public/assets/show-attend-tell.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/distillpub/post--augmented-rnns/fdc3526167133f5a97cee9e7cb48af293e67d66d/public/assets/show-attend-tell.png


--------------------------------------------------------------------------------
/public/thumbnail.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/distillpub/post--augmented-rnns/fdc3526167133f5a97cee9e7cb48af293e67d66d/public/thumbnail.jpg


--------------------------------------------------------------------------------