# VariationalAutoencoder

> VariationalAutoencoder draws ManimML's autoencoder as a NeuralNetwork: the image input, the feed-forward layers of the encoder (neurons per layer, [5, 3]…

Page: https://fframes-kit.pages.dev/docs/machine-learning/variational-autoencoder/
Cargo feature: `ml` (`fframes-kit = { version = "..", features = ["ml"] }`)

`VariationalAutoencoder` draws ManimML's autoencoder as a `NeuralNetwork`: the image `input`,
the feed-forward layers of the `encoder` (neurons per layer, `[5, 3]` by default), the latent
space, the `decoder` (`[3, 5]`) and the image `output`, both `size` cells square. `layers()`
gives these layers and `latent_index()` the place of the latent space among them.

- **Latent space.** An embedding box with a cloud of `points` points for `seed` and the 1σ
  and 2σ rings of its Gaussian in `ring_color`.
- **Code.** The image's point in the latent space, drawn in `pulse_color`, is `μ + L·epsilon`
  (`L` the Cholesky factor of the covariance, the reparameterisation trick). `epsilon` is in
  units of the standard normal distribution, `(1.3, -0.7)` by default; the point stays inside
  the box.
- **Forward pass.** With `forward_pass` the pulses run from the input to the output, and the
  point appears as they reach the latent space. Without one it is always shown.

Gallery scenes: `VariationalAutoencoder`, `Vae`.

Gallery clip of `VariationalAutoencoder`: https://fframes-kit.pages.dev/media/scenes/VariationalAutoencoder-ecfbc00b.mp4

Gallery clip of `Vae`: https://fframes-kit.pages.dev/media/scenes/Vae-11d9e805.mp4

```rust
use fframes_kit::prelude::*;

fn autoencoder<'a>(ui: &mut Ui<'a, '_, '_>) -> Svgr<'a> {
    ui.show(VariationalAutoencoder {
        input: "digit.png",
        output: "digit.png",
        epsilon: (0.4, 1.1),
        forward_pass: Some(ForwardPass { start: 0.9, duration: 3.2 }),
        enter: Some(FadeIn::default()),
        ..ui.defaults()
    })
}
```

## API

Components are plain structs. Set the fields you need and fill the rest with `..ui.defaults()`: the defaults below come from the current theme (`theme.` values are fields of `Theme`).

### VariationalAutoencoder

| Field | Type | Default | Description |
| --- | --- | --- | --- |
| `input` | `&str` | `""` | File name of the input image in the media folder. |
| `output` | `&str` | `""` | File name of the reconstructed output image in the media folder. |
| `size` | `usize` | `8` | Width and height of the images in cells, for the convolution-style maps. |
| `encoder` | `Vec<usize>` | `vec![5, 3]` | Neurons in each feed-forward layer of the encoder, from the input towards the latent space. |
| `decoder` | `Vec<usize>` | `vec![3, 5]` | Neurons in each feed-forward layer of the decoder, from the latent space towards the output. |
| `points` | `usize` | `120` | Number of points in the cloud drawn in the latent box. |
| `seed` | `u64` | `1` | Seed of the point cloud; the same seed gives the same cloud on every frame and machine. |
| `epsilon` | `(f64, f64)` | `(1.3, -0.7)` | Noise of this image's latent point, in units of the standard normal distribution (the point is the mean plus the noise scaled by the Gaussian). |
| `center` | `(f64, f64)` | `(0.0, 0.0)` | The middle of the network, in units of `ui.space`. |
| `spacing` | `f32` | `130.0` | Pixels between neighbouring layers. |
| `node_radius` | `f32` | `16.0` | Radius in pixels of a neuron. |
| `node_spacing` | `f32` | `46.0` | Pixels between neighbouring neurons of a layer. |
| `cell` | `f32` | `14.0` | Size in pixels of one cell of an image. |
| `forward_pass` | `Option<ForwardPass>` | `None` | Pulses that run from the input to the output; the latent point appears when they reach it. `None` for none. |
| `node_color` | `Color` | `theme.colors.text` | Colour of the neuron and box outlines and of the text. |
| `node_fill` | `Color` | `theme.colors.surface` | Fill colour inside the neurons and boxes. |
| `edge_color` | `Color` | `theme.colors.muted` | Colour of the connection lines. |
| `pulse_color` | `Color` | `theme.colors.highlight` | Colour of the pulses and of this image's latent point. |
| `ring_color` | `Color` | `theme.colors.accent` | Colour of the Gaussian's 1σ and 2σ rings in the latent box. |
| `stroke_width` | `f32` | `2.5` | Width in pixels of the outlines and connection lines. |
| `enter` | `Option<FadeIn>` | `None` | Fade in at the start; `None` for none. |
| `exit` | `Option<FadeOut>` | `None` | Fade out before the end; `None` for none. |

Methods:

- `fn layers(&self) -> Vec<Layer>`: The layers from the input image to the output image.
- `fn latent_index(&self) -> usize`: The place of the latent space among `layers`.

Feature `ml` · [Source](https://github.com/khanhthanhdev/fframes-kit/blob/main/fframes-kit/src/kits/ml/vae.rs#L28)