Aidge GUI tutorial

This tutorial introduces aidge_gui, an interactive visualization and edition interface for Aidge computation graphs.

The goal is not to cover every feature of the GUI. Instead, we will create a small graph with aidge_core, open it in the browser with aidge_gui, and then walk through the main features using screenshots or GIFs.

Install requirements

Make sure the required Aidge modules are installed in your Python environment. If you are running this tutorial in an environment where Aidge is already installed, you can skip this cell.

%pip install aidge-core aidge-backend-cpu aidge-onnx aidge-gui

Import modules

We use:

• aidge_core to create and manipulate the graph;

• aidge_backend_cpu to register the CPU backend;

• aidge_onnx to import and export graphs with ONNX;

• numpy to create simple tensor values;

• aidge_gui.visualize to open the interactive GUI.

import numpy as np

import aidge_core
import aidge_backend_cpu
import aidge_onnx

from aidge_gui import visualize

aidge_core.Log.set_console_level(aidge_core.Level.Warn)

Create a small Aidge graph

We will create a small GraphView that can be visualized and edited in the GUI.

The graph contains a few simple operators and two constant inputs represented by Producer nodes. This keeps the example small while still showing nodes, edges and tensors in the interface.

a_value = np.array([3.0], dtype=np.float32)
b_value = np.array([7.0], dtype=np.float32)

a = aidge_core.Producer(aidge_core.Tensor(a_value), "add_prod")
b = aidge_core.Producer(aidge_core.Tensor(b_value), "mul_prod")

relu0 = aidge_core.ReLU("relu0")
add = aidge_core.Add("add")
mul = aidge_core.Mul("mul")
quant = aidge_core.Quantizer(
    20,
    1,
    "node1",
    internal_type=aidge_core.dtype.float32,
    to_type=aidge_core.dtype.int8,
)
relu1 = aidge_core.ReLU("relu1")

graph = (((relu0 | a) >> add) | b) >> mul >> quant >> relu1
graph.set_name("tutorial_graph")

Optional: run a simple inference

This step is not required to open the graph in the GUI.

However, running a forward pass can be useful before visualization because it populates tensor values. These values can then be inspected from the GUI, for example by inspecting an edge.

x_value = np.array([5.0], dtype=np.float32)
x_tensor = aidge_core.Tensor(x_value)

graph.set_backend("cpu")
graph.forward_dims([[1]])
graph.forward_dtype(aidge_core.dtype.float32)

scheduler = aidge_core.SequentialScheduler(graph)
outputs = scheduler.forward(data=[x_tensor])

Visualize the graph with Aidge GUI

The visualize function starts a local web server and opens the graph in the browser. In a notebook, it is usually better to use block=False, otherwise the cell may keep running until the server is stopped.

Important: unlike aidge_model_explorer.visualize, aidge_gui.visualize does not take a graph name as a second argument. If you want to name the graph, use graph.set_name(...).

visualize(
    graph,
    port=8765,
    open_browser=True,
    block=True,
)

You should see the following:

First look at the interface

The GUI displays the Aidge graph as an interactive node-edge GraphView.

The browser is the interface, while the actual graph remains in the Python backend. When you interact with the GUI, actions are sent back to the backend and applied to the Aidge GraphView.

On the canvas, you can zoom, pan and drag nodes to explore the graph more comfortably.

Inspecting a node or edge

Click on a node or an edge to inspect it. When an object is selected a side panel appears with relevant information.

For a node, the panel can show the node name, operator type, input and output ports and available attributes. For an edge, the panel can show connection information and tensor data when available.

Tensor values are available when the graph has already been executed or when the backend contains tensor data for that edge.

Selecting nodes

Use Ctrl + Click on a node to add it to the current selection. Several nodes can be selected at the same time.

Selections are useful when you want to focus on a group of nodes, create a view from them or apply an action to several nodes.

Searching nodes

The GUI provides a search dialog to quickly find nodes in larger graphs.

Search is useful when:

• the graph has many nodes

• you know part of a node name

• you want to find operators of a given type

• you want to create a selection from a pattern.

Matching nodes are automatically selected, making them easier to locate in the graph.

Here is an example of search by operator type

Work with views

Aidge uses GraphView objects to represent a graph or a subgraph.

The GUI exposes these views as tabs. Each view can contain its own nodes, inputs and outputs.

Views are useful when a graph is too large to understand at once. Instead of displaying everything, you can focus on a smaller part of the graph. They are also useful when several graphs are opened in the same GUI session, because you can switch between them from the tab bar.

In this example, we will create a new view from selected nodes.

Explore meta-operators

Some Aidge operators can contain an internal graph. These are meta-operators.

The GUI can help inspect this structure by expanding or collapsing meta-operators. This makes it possible to move between a compact high-level representation and a more detailed internal representation.

Edit the graph

The GUI can be used not only to inspect but also to edit the graph.

Typical edition actions include:

• editing node attributes;

• creating a new node;

• cloning selected nodes;

• deleting nodes;

• applying graph recipes.

These operations are sent to the Python backend, which updates the real Aidge GraphView.

Basic manipulation

Existing nodes and edges can be edited from contextual menus or from the side panel, depending on the action.

The following examples show some basic graph edition operations.

To delete a node, right-click on it and select the delete action. Also, the delete-and-reconnect action removes the node while reconnecting the surrounding graph.

To edit an attribute, inspect the node and edit it in the side panel

To add a node, open the node creation menu and select the operator you want to create. The GUI will ask for the required constructor parameters before adding the node to the graph.

Importing and exporting models

There are several ways to open a model in aidge_gui:

• calling visualize directly on a python script (like we did on this tutorial)

• importing from an Aidge file

• importing from an ONNX file

After editing a graph, several workflows are possible:

• exporting the graph to an Aidge file;

• exporting the graph to an ONNX file;

• closing or unblocking the GUI and continuing the Python script with the updated graph.

Exporting to an Aidge file is recommended when you want to preserve Aidge-specific information. Exporting to ONNX is useful when interoperability with ONNX-compatible tools is needed.