This website is based on a Vue.js frontend with a FastAPI backend, and is designed to render most transforms and filters used in my "Imaging Science" lecture. It is done using an interactive canvas (Fabric.js based) where objects and images are rendered, and then a series of buttons that render different operations on the image. The operations are done on the backend, using a mixture of numpy, scipy and PyWavelets. The render is exclusively on grayscale to avoid the struggle of multichannel images.
This website is only meant for desktop use. A mobile version could be considered in the future, but is not likely.
Features
- Edge detection using Canny's algorithm.
- Corner Detection
- Morphological Filters (Erosion, Dilation, Top Hats...)
- Denoising Filters (Diffusion Filter, NL-Means, Median Filter)
- Frequency Filters (Highpass, Lowpass) both in the Spatial Domain (convolving with Gaussian) and in the Fourier Domain (both hard cutoff and butterworth cutoff)
- Transforms (FFT, IFFT, DCT, IDCT, DWT)
- The ability to import images, shapes, and draw with your own brush. Some shapes include: Rects, Ellipses, Checkerboard patterns, sinusoidal shapes, gaussians, etc.
- Histogram Equalization, Gamma Correction, Affine Grayscale Transformations, etc...
- Global Variational Filters computed as a minimization of an energy functional.
- Visualization of the Mean, Variance and Histogram of the image
Explanation
To ensure the accuracy of the transforms and filters, instead of relying on the canvas.getImageData() (which is affected by anti-aliasing and more), all objects have their own custom rasterization algorithms onto a 32-bit imageBuffer, to ensure accuracy of the numbers and not be limited by 8 bits. Imported Images don't get a jump in accuracy (given that they were stored in 8 bits from the beginning) , but custom shapes like gaussians are preserved much better, so artifacts are minimized. This is because even though Gaussians are treated as simple images in the fabric canvas, they have some custom properties added to their fabric object so that when syncing the ImageBuffer, we can compute the actual value to a much higher accuracy.
There are multiple custom shapes:
- Gaussians
- Sinusoidal shapes
- Checkerboard pattern
- Grid pattern
Each of these transforms and filters allow to customize the parameters with it's inputs, so that you can tweak the thresholds of edge detection, the variance and mean of the frequency filters, etc. The updated filter/transform is requested as soon as an input is changed.
The canvas is also able to be resize to different settings, either the entire available screen, a factor of 2, or to fit the existing objects on the screen (to prevent wrap-around errors).
This is currently still a Work In Progress and is not finished, so lots of bugs are to be expected.
Try it out!
Try it out here
Local deployment
git clone https://github.com/Voranto/Imaging-Science-Project.git
cd Imaging-Science-Project
To deploy the frontend
To deploy the backend
cd ImagingScience
uv sync --frozen
uv run fastapi dev src/project/main.py
Examples
Edge/Corner Detection
|
Original Image 
|
Simple Edge Detector 
|
|
Canny's Edge Detector 
|
Corner Detection (Tomasi/Kanade) 
|
Denoising
|
Original Image
|
Salt-and-Pepper noise, 33% probability 
|
|
Regular lowpass filter, sensitive to the outliers 
|
Median Filter with radius 2 
|
Transforms
|
Circle 
|
Fourier Spectrum 
|
|
Original Image 
|
Fourier Spectrum 
|
|
Removing Higher Frequencies with a hard cutoff (not ideal) 
|
IFFT (Ringing Artifacts) 
|
|
Removing Higher Frequencies with a butterworth cutoff 
|
IFFT (Much better lowpass filter) 
|
|
Original Image 
|
Discrete Wavelet Transform (1 level) 
|
AI USAGE
AI has been exclusively used for the CSS design, nothing else, as I am too bad of a graphic designer to go through the effort of aligning divs.