Workflow studio

The workflow studio is the canvas. A workflow is a directed graph: material nodes feed into transforms, transforms feed into further transforms or combinators, and the leaf nodes hold the final outputs you care about.

Composing a workflow

  1. Add materials. In Create mode, open the Smart Island Add toolbar and pick the modality you need (Text, Image, Video, Audio, Document, URL, 3D model). Each click drops one node at the viewport center.
  2. Select & transform. Click a material node. The Smart Island swaps the Add toolbar for contextual operations — e.g. with a text node selected, you’ll see Generate image, Generate video, Generate music, etc. Click one to drop the transform node already wired to your selection.
  3. Connect explicitly. You can also drag from an output handle (right edge of a node) to an input handle (left edge of another). The connection only forms if the modalities and shapes match — driven by the ABI.
  4. Configure inputs. Click into a node to edit its parameters: prompt text, model dropdowns, sliders, file pickers. The visible fields come from the ABI’s schema for that node.

Connection rules

  • An output handle is named out:<field> (e.g. out:image, out:text).
  • An input handle is named in:<field>.
  • A connection is valid when the modality and shape of out:<field> match in:<field> of the target. The canvas refuses to form invalid edges.
  • A single output can fan out to multiple inputs; a single input accepts at most one upstream edge.
  • For N-input nodes (e.g. image-fusion taking N images), there are N labeled input handles.

Saving

The workflow title sits at the top-center. Click it to open the title menu:

  • Save — writes the current canvas + node state to SQLite as a new workflow or overwrites the existing one.
  • Save as… — fork the canvas as a new named workflow.
  • Rename — change the workflow’s title.
  • Delete — drop the workflow from the database (the materials it referenced remain in the Portfolio).

The browser autosaves the canvas position and zoom; node parameter edits autosave on blur. The explicit Save action commits the whole graph to a versioned row in the DB.

Loading

Open the Workflow button in the left sidebar (first icon). The dialog lists saved workflows — click one to load it.

Running

Switch to Execute mode (Sparkles → Play toggle in the header).

  1. Click Play on the Smart Island.
  2. If there are unsaved edits, a confirm dialog asks whether to save first.
  3. The workflow exporter walks the graph topologically and issues one task per node that doesn’t have a cached result.
  4. Each task is dispatched to Modal (for transform nodes) or to your LLM provider (for gen-text and friends).
  5. Outputs return to your machine; the corresponding node updates with the result and lights up green. Errors light up red and the message appears in the Tasks panel.

The top-of-screen toast tracks total progress and lets you stop the run.

Caching

Unchanged upstream nodes return cached output on subsequent runs. To force re-execution of a single node:

  • Edit any of its input values (prompt, parameter, attached material), or
  • Right-click → Clear cache (when implemented; current alternative is to delete and re-add the node).

Importing / exporting

The workflow exporter (src/lib/workflow/exporter.ts in the tongflow repo) serializes the canvas + node specs into a JSON form that can be re-imported on another machine. Useful for sharing workflows in Discord or attaching to GitHub issues.

Panning, zooming, multi-select

  • Pan — middle-click drag, space + drag, or two-finger scroll.
  • Zoom — pinch or scroll wheel; use bottom-right controls for 100% / fit-to-screen.
  • Multi-select — drag-box, or shift-click.
  • Delete — select node(s), press Backspace or Delete. Edges between them are pruned automatically.
  • Copy / paste — Cmd/Ctrl+C, Cmd/Ctrl+V. Pasted nodes appear offset from the originals.