Voranto/Imaging-Science-Project
A website to render and show different filters, transforms and more regarding the lecture "Imaging Science" - Voranto/Imaging-Science-Project
0 stars · 0 forks
README
IMAGING SCIENCE WEBSITE 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 an assortment 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. Some features include:
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... Visualization of the Mean, Variance and Histogram of the image
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. 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. This is currently still a Work In Progress and is not finished, so lots of bugs are to be expected. The UI is also not finished, some some elements may look out of place. 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 npm install npm run dev
To deploy the backend cd ImagingScience uv sync --frozen uv run fastapi dev src/project/main.py
Examples Original Image:
Canny's Edge Detector
Corner Detection (Tomasi/Kanade)
Diffusion Filter
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.