Cisco VIPER: VIsual Pipeline EditoR

Contributors

Fredrik Pihl, Hongyu Teng, Everly Precia Suresh Kumar, Romy Sophia Richter, Ana Georgieska, Brandon Alexander and Frank Cruz.

Contribution

Client

Please install the precommit hooks for automatic linting and formatting:

cd client
npm install

How to Run

Frontend

cd client
npm install
npm run build
npm run start

Backend

cd server

uv run uvicorn main:app --reload

Scripts

There are also two scripts that can be used for deployment. You can deploy the server in the VM, the project is already installed there (inside test/mmrp).

Preparing the environment

This will install all dependencies and build the client.

./scripts/setup.sh

Starting the server

This will run the server. Once the server is deployed, you can run the application on http://<VM_IP>:8000/ as long as you are connected to the VPN. You can also pass command line arguments to the script (for example --workers 2).

./scripts/run.sh

Creating your own example pipeline configurations

Convert from Exported JSON

Draw the needed example configuration on the canvas and export it. When you export, the JSON contains extra frontend data that needs to be removed. To convert to Target JSON for storing in the backend, follow the steps below:

1. Remove wrapper metadata

{
  "metadata": { "version": "1.0", "timestamp": "" },
  "data": { "nodes": [], "edges": [] }
}

Target JSON:

{
  "name": "My Pipeline",
  "nodes": [],
  "edges": []
}

2. Rename keys (camelCase -> snake_case)

Convert field names:

• moduleClass -> module_class
• inputFormats -> input_formats
• outputFormats -> output_formats
• pixelFormat -> pixel_format
• colorSpace -> color_space
  and so on.

3. Drop UI-only fields

Remove properties that are frontend-only, e.g.:

• measured, flag, options (outside constraints), etc.

4. Edges

Ensure edges expose the following keys and remove other excess keys:

{
  "id": "e1-e2",
  "source": "n1",
  "target": "n2",
  "sourceHandle": "output-0-handle",
  "targetHandle": "input-0-handle"
}