# Visualizer Node

Neural networks are made up of components that process generic, undefined data. In order to make sense of the data, Tensorleap enables you to visualize the data contained in any node, using a **Visualizer** node. You can visualize the input(s), output(s) (prediction), ground truth(s), and intermediate tensors.  

These visualization would be present at multiple segments of the [Dashboard](https://docs.tensorleap.ai/user-interface/project/dashboards) view.

When performing [**Sample Analysis**](https://docs.tensorleap.ai/user-interface/dashboards/dashlets/sample-analysis#sample-analysis), error analysis algorithms analyze the sample's error throughout the model and project it to each input. This will generate various heat-maps highlighting different features. Therefore, at least one connection of the [**Dataset Node**](https://docs.tensorleap.ai/user-interface/project/network/network-mapping/create-a-mapping-deprecated/input-node) (model-graph input) must be connected to a **Visualizer**.

You can write your own **Custom Visualizers** in the **Integration Script** (see [custom visualizers](https://docs.tensorleap.ai/tensorleap-integration/python-api/code_loader/visualizer_classes)), or use one of the following out-of-the-box Decoders:

* **HorizontalBar** - visualize numeric data as horizontal bar with labels
* **Image** - visualize 2D image
* **Video -** visualize 3D data
* **Graph** - visualize numeric data as a graph
* **Raw data** - presents the raw data as is
* **Text** - tokens representation of text (for *token-to-text* **Visualizer**, use the [**Decoder Function**](https://docs.tensorleap.ai/tensorleap-integration/writing-integration-code/visualizer-function) with your tokenizer)
* **ImageMask** - visualize an image and an overlay mask (commonly used in image segmentation)
* **TextMask** - visualize text and an overlay mask (commonly used in text segmentation)

{% hint style="success" %}
It is highly recommended to use your own custom visualizers in the [integration script](https://docs.tensorleap.ai/tensorleap-integration/writing-integration-code). This would allow you to test results in your[ local development environment](https://docs.tensorleap.ai/tensorleap-integration/integration-test) before you upload the model to Tensorleap.  This helps to ensure the visualized results are as you would have expected, and to quickly adjust any normalizations, conversion, and display settings.
{% endhint %}

{% hint style="info" %}
Adding a custom visualization is only possible after registering it in the [integration script](https://docs.tensorleap.ai/tensorleap-integration/writing-integration-code) and parsing it successfully through the system. To make sure you can add your visualizer ensure that the correct [code integration](https://docs.tensorleap.ai/user-interface/project/network/code-integration) that defines your loss is registered in the system.
{% endhint %}

### Custom Visualizer Example

Adding the following custom visualizer in the script:

```python
@tensorleap_custom_visualizer('image_visualizer', LeapDataType.Image)
def image_visualizer(image: np.ndarray) -> LeapImage:
    image = rescale_min_max(image.squeeze(0))
    return LeapImage(image.transpose(1,2,0))
```

Would add the following option in the visualizer selection dropdown menu:

<figure><img src="https://3509361326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9UXeOlFqlw8pl79U2HGU%2Fuploads%2FuoNlfoVyVhUS3zYgv3Ws%2Fimage.png?alt=media&#x26;token=a82ed5b9-9435-429c-b751-2a7ddc5e3d8c" alt=""><figcaption></figcaption></figure>

To add a visualizer, select visualizer when [adding nodes](https://docs.tensorleap.ai/user-interface/project/network/network-mapping/create-a-mapping-deprecated/..#adding-nodes) to the mapping. This visualizer would have the same arguments as your [custom visualizer](https://docs.tensorleap.ai/tensorleap-integration/writing-integration-code/visualizer-function) defined in your [integration script](https://docs.tensorleap.ai/tensorleap-integration/writing-integration-code) in the case of a custom visualizer.

## Setup

<figure><img src="https://3509361326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9UXeOlFqlw8pl79U2HGU%2Fuploads%2F8DimiMbOMdKbLIGWTZcf%2Fimage.png?alt=media&#x26;token=ba25b1fa-76f6-4c41-bb54-fe7a1c38f36b" alt=""><figcaption><p>Visualizer Node and its properties</p></figcaption></figure>

The **Visualizer** node have several properties:

* **Selected Visualizer**: a dropdown from which a custom or default visualizer can be selected. The list would include all registered [custom visualizers](https://docs.tensorleap.ai/tensorleap-integration/writing-integration-code/visualizer-function) from your [integration script](https://docs.tensorleap.ai/tensorleap-integration/writing-integration-code).
* **Name**: The name of the selected visualizer.
* **Type:** They [type](https://docs.tensorleap.ai/tensorleap-integration/python-api/code_loader/visualizer_classes) of the selected visualizer.
* **Labels**: The expected arguments for your visualizer.