CogniBlock docs

Overview

A pipeline is a set of blocks connected by wires. Each block does one job: it takes an image in, changes it, and passes an image out. Put an Image block at the start, a few filters in the middle, and an Output block at the end, and you have a pipeline.

The playground shows a small preview inside every block, so you can see exactly what each step does to the picture and change a setting to see it update straight away.

Quick start

1. Open the playground. It starts with a working example: an image goes through Canny Edge and Blur, then blends back over the original.
2. Move a slider on any block, for example Weak edges on Canny Edge. Every block after it updates.
3. Add a block by clicking it in the library on the left. It appears in the middle of your view.
4. Drag from the dot on the right edge of one block to the dot on the left edge of another to connect them.
5. Press Download PNG on an Output block to save the result, or Share link to send the pipeline to someone.

Using the playground

Connecting blocks

• Drag from an output dot (right edge) to an input dot (left edge). The target dot lights up when you are over it.
• An output can feed any number of blocks. An input accepts exactly one wire; connecting a new one replaces the old one.
• To disconnect, grab a connected input dot and drop the wire on empty space. To re-route, drop it on a different input.
• Loops are not allowed. If a connection would make a block depend on itself, it is refused with a message.
• A block with a missing input shows Connect an input instead of a preview.

Moving around

Examples

The Examples menu loads a ready-made pipeline: Glowing edges, Edge sketch, Blueprint and Brand pixels. Reset returns to the starter pipeline. Your work is saved in your browser automatically and comes back next time you visit.

Blocks

Every block takes images in on the left and passes one image out on the right, except Image (no inputs) and Output (no output).

Filter settings

Sharing and files

Share link

Press Share link to get a short URL such as pipelines.html?p=04d66a5ae8. Anyone who opens it gets your pipeline with the same blocks, wires and settings. Saving the same pipeline twice gives the same link.

Export and import

Export downloads your pipeline as a .json file you can keep, edit or send. Import loads one back. Unknown blocks are ignored and out-of-range settings are brought back into range, so an imported file can never break the page.

Pipeline format

A pipeline is a small JSON document. This one is the Edge sketch example reduced to three blocks:

{
  "v": 1,
  "nodes": [
    { "id": "n1", "type": "image",  "x": 0,   "y": 20, "params": { "sample": "shapes" } },
    { "id": "n2", "type": "canny",  "x": 250, "y": 20, "params": { "sigma": 1.4, "low": 6, "high": 18 } },
    { "id": "n3", "type": "output", "x": 500, "y": 20, "params": {} }
  ],
  "links": [
    { "from": "n1", "to": "n2", "port": 0 },
    { "from": "n2", "to": "n3", "port": 0 }
  ]
}

Sharing API

The share button talks to a small HTTP API at /api/pipelines. You can use it from your own tools. It is the same format described above.

Save a pipeline

POST /api/pipelines
Content-Type: application/json

{ "graph": { "v": 1, "nodes": [ ... ], "links": [ ... ] } }

201 { "id": "04d66a5ae8" }     // saved
200 { "id": "04d66a5ae8" }     // this exact pipeline was already saved

Load a pipeline

GET /api/pipelines?id=04d66a5ae8

200 { "graph": { ... } }

Errors

Every save is checked against the list of blocks and settings. Unknown blocks and settings are rejected, numbers outside a block's range are clamped, and colours must be #rrggbb.

Limits and privacy

What leaves your device

• Images you upload or generate stay in your browser. They are never sent anywhere.
• Pressing Share link sends the pipeline's blocks and settings to the sharing API. Nothing else.
• Your work is autosaved in your own browser's local storage so it is there when you come back. Clearing site data removes it.

FAQ

Are the blocks AI models?

Not yet. The current blocks use classic image-processing algorithms, such as Gaussian blur and Canny edge detection, running directly in your browser. They are real, fast and free to run. Blocks backed by machine-learning models are not available yet.

Why does my shared pipeline use a different picture?

Share links never include uploaded images. The link falls back to the Shapes sample. Send the image separately, and the other person can load it into the Image block.

My image looks small or soft.

Uploads are scaled to 420 px on the longest side so every block stays fast. Use Resize to scale a result up for preview, but note it cannot add detail that is not there.

A block shows “Connect an input”.

Its input has no wire, or the block before it has no input of its own. Follow the chain back to an Image block and make sure each step is connected.

The share button says links only work on the live site.

The sharing API is part of the deployed site. When you open pipelines.html straight from your computer, or from a basic local server, the API does not exist. Export and Import work everywhere.

Does it work on a phone?

Yes, the editor is usable with touch, but a larger screen makes wiring much easier.