TL;DR

  • Vue.js 프런트엔드와 FastAPI 백엔드로 구성된 Imaging Science 웹사이트가 강의에서 사용하는 대부분의 변환과 필터를 대화형으로 렌더링함.
  • Fabric.js 기반 캔버스와 numpy, scipy, PyWavelets를 활용해 이미지 처리 작업을 수행하며, 렌더링은 그레이스케일로 한정함.
  • 에지·코너 감지, 형태학적·노이즈 제거·주파수 필터, FFT·DCT·DWT 변환, 히스토그램 평활화와 통계 시각화 등을 제공함.
  • 자체 래스터화 알고리즘과 32비트 이미지 버퍼를 사용해 캔버스의 안티앨리어싱 영향을 피하고, 8비트에 한정되지 않는 사용자 정의 도형의 정밀도를 보존함.
  • 프로젝트는 아직 개발 중이며, 조정 가능한 매개변수와 로컬 배포 절차를 제공함.

개요

  • 이 웹사이트는 Imaging Science 강의에서 사용하는 대부분의 변환과 필터를 렌더링하도록 설계됨.
  • Vue.js 프런트엔드와 FastAPI 백엔드로 구성되며, Fabric.js 기반 대화형 캔버스에서 객체와 이미지를 표시하고 버튼으로 이미지 처리 작업을 실행함.
  • 처리 작업은 numpy, scipy, PyWavelets를 조합해 백엔드에서 수행함.
  • 다중 채널 이미지 처리의 복잡성을 피하기 위해 렌더링은 그레이스케일로만 수행함.

기능

  • Canny 알고리즘을 이용한 에지 감지
  • 코너 감지
  • 형태학적 필터: 침식, 팽창, 톱햇 등
  • 노이즈 제거 필터: 확산 필터, 비국소 평균(NL-Means), 중앙값 필터
  • 주파수 필터: 고역 통과 및 저역 통과 필터
  • 공간 영역에서 가우시안과 컨볼루션하는 방식
  • 푸리에 영역에서 하드 컷오프와 버터워스 컷오프를 적용하는 방식
  • 변환: FFT, IFFT, DCT, IDCT, DWT
  • 이미지와 도형 가져오기, 사용자 브러시로 그리기
  • 사각형, 타원, 체크무늬, 사인파 모양, 가우시안 등
  • 히스토그램 평활화, 감마 보정, 아핀 그레이스케일 변환 등
  • 이미지의 평균, 분산, 히스토그램 시각화

변환 및 필터의 정확도

  • 캔버스의 getImageData()는 안티앨리어싱 등의 영향을 받으므로, 해당 기능에 의존하지 않고 각 객체가 자체 래스터화 알고리즘을 사용해 32비트 이미지 버퍼에 렌더링함.
  • 이 방식은 수치의 정확성을 보장하고 8비트 정밀도 제한을 피함.
  • 가져온 이미지는 처음부터 8비트로 저장된 경우 정밀도가 높아지지 않지만, 가우시안 같은 사용자 정의 도형은 더 잘 보존돼 아티팩트가 줄어듦.

매개변수 조정

  • 각 변환과 필터는 입력값을 통해 매개변수를 조정할 수 있음.
  • 에지 감지의 임계값, 주파수 필터의 분산과 평균 등을 조정할 수 있으며, 입력값이 바뀌는 즉시 업데이트된 필터나 변환을 요청함.

로컬 배포

  • 저장소: https://github.com/Voranto/Imaging-Science-Project
  • 저장소를 복제하고 프로젝트 디렉터리로 이동함.
  • 프런트엔드 배포는 npm install과 npm run dev로 진행함.
  • 백엔드 배포는 ImagingScience 디렉터리로 이동한 뒤 uv sync --frozen과 uv run fastapi dev src/project/main.py를 실행함.

예시

  • 원본 이미지
  • Canny 에지 검출기
  • 코너 감지(Tomasi/Kanade)
  • 확산 필터

AI 사용

  • CSS 디자인에만 AI를 사용했으며, 그 외에는 사용하지 않음.
  • 그래픽 디자인 실력이 부족해 div 정렬 작업을 직접 수행하는 데 공을 들이기 어려웠음.

개발 상태

  • 현재 작업 진행 중이며 완성되지 않아 버그가 많이 있을 수 있음.
  • UI도 미완성 상태라 일부 요소가 어울리지 않아 보일 수 있음.