Web UI — Visual Pipeline Editor¶

The webui/ directory contains a browser-based node editor for building and running foreblocks forecasting pipelines without writing code. Nodes represent pipeline stages; edges connect outputs to inputs. Execution happens on a local FastAPI backend that streams progress back to the browser via WebSocket.

Starting the server¶

cd webui
npm install         # first time only
npm run build       # compile the React frontend into dist/
python server.py    # starts on http://localhost:8000

Open http://localhost:8000 in a browser. The static frontend is served from dist/.

Dependencies:

pip install fastapi uvicorn torch matplotlib

Architecture¶

Browser (React + ReactFlow)
  ↓  POST /execute  (generated Python code + workflow graph)
FastAPI server  →  ThreadPoolExecutor worker
  ↓  WebSocket /ws/{task_id}  (live events)
Browser receives: logs, progress, node results, artifacts

The frontend generates Python code from the node graph and sends it to the backend. The backend executes the code in a thread-pool worker and pushes structured events back to all connected WebSocket clients for that task.

REST API¶

`POST /execute`¶

Submit a pipeline for execution.

{
  "code": "# generated Python code\ntrainer = ...",
  "workflow": {"nodes": [...], "connections": [...]},
  "sync": false,
  "timeout_sec": 1.5
}

sync=false (default): returns immediately with a task_id; poll or subscribe via WebSocket for results
sync=true: waits up to timeout_sec and returns inline results if finished in time

Response:

{"success": true, "task_id": "uuid4", "results": null}

`GET /status/{task_id}`¶

Poll task state.

{
  "task_id": "...",
  "state": "running",
  "progress": 0.55,
  "message": "Generating plot",
  "results": null
}

States: queued → running → success | error

`GET /logs/{task_id}`¶

Retrieve timestamped execution logs.

{"task_id": "...", "logs": ["[10:42:01] ⏳ Starting execution", ...]}

`GET /artifact/{task_id}/{name}`¶

Download a saved artifact file (e.g., a PNG plot saved by user code).

WebSocket events¶

Connect to ws://localhost:8000/ws/{task_id} to receive live updates.

On connect, the server sends a snapshot event with current state and the last 50 log lines. Subsequent events:

Event type	Fields	Meaning
`log`	`line`	New log line from worker
`state`	`state`, `progress`, `message`	Progress update
`node_result`	`node_id`, `result`	A node has produced output
`artifact`	`name`	A file artifact was saved
`done`	`success`, `results`	Execution finished
`error`	`message`	Task not found or server error

Result types¶

The result field in node_result events has a type discriminator:

Type	Data format
`plot`	Base64-encoded PNG
`image`	Base64-encoded binary image
`metrics`	`{key: float}` dict
`table`	`{columns: [...], rows: [[...]]}`
`json`	Any JSON-serializable value
`array`	Flat or nested list
`text`	Plain string fallback

`report` object in user code¶

The worker injects a report object into the execution namespace. Use it to push structured results back to the UI from within your pipeline code:

# These are available without import inside the executed code:
# report, torch, numpy (as np)

report.log("Loading dataset...")
report.progress(0.2, "Data loaded")

metrics = {"mae": 0.042, "rmse": 0.071}
report.set_result("output_1", "metrics", metrics)

fig = trainer.plot_prediction(X_val, Y_val, show=False)
report.set_result("plot_node", "plot", fig)   # matplotlib figure → base64 PNG

report.artifact("forecast.png", fig)           # also saves file to artifacts/

set_result(node_id, result_type, data) — node_id should match the node's ID in the workflow graph. result_type is one of the type strings from the table above.

Auto-detection fallback¶

If user code does not call report.set_result(), the backend attempts automatic result extraction by looking for these variables in the execution namespace:

Variable	Action
`trainer`, `X_val`, `Y_val`	Calls `trainer.metrics(X_val, Y_val)` and `trainer.plot_prediction(...)`
`metrics`	Attaches as metrics result on the output node
`time_series`, `train_size`	Passed to `plot_prediction` as `full_series` / `offset`

Environment injected into user code¶

Name	Value
`torch`	`import torch`
`report`	`ReportBridge` instance for the current task
`__name__`	`"__main__"`

numpy, matplotlib.pyplot, and matplotlib (Agg backend) are imported inside the worker before exec() but are not injected into the namespace by default — import them explicitly in your code if needed.