pse-image

Context

pse-image started in the Image Processing and Analysis course at PUC Minas. Instead of a collection of scripts, the idea was to build a visual environment where each processing step is a block.

Problem

Image algorithms are usually studied one at a time. Chaining steps, such as reading an image, applying a convolution, and looking at the histogram, normally requires glue code, and it becomes hard to see the effect of each step.

Solution

A pipeline of blocks in the browser, built with React Flow:

• blocks to read PGM images, apply convolution, and compute a histogram, among others;
• the algorithms were implemented from scratch, without image-processing libraries;
• the pipeline state lives in Zustand, and the project runs on Vite and Bun;
• end-to-end tests with Playwright.

Outcome and lessons learned

pse-image is live at pse-image.pedrovilaca.dev (opens in a new tab). Implementing each algorithm without shortcuts forced me to understand what happens pixel by pixel, and the block interface makes that process visible to anyone using it.