퍼셉트론 시각화 기능 구현(feat/perceptron)

[Twince]

What's in this pull request(feat/perecptron)

Neural Network의 값에 따라 퍼셉트론을 real-time으로 렌더링하여 시각화하는 기능을 구현하였습니다.

주요작업

• Neural Network Engine의 값을 canvas를 사용하여 퍼셉트론 형태로 시각화합니다.
• 사용자의 질의에 따라 변경되는 값을 PerceptronController.ts를 통해 Orchestration 하여 Node와 Edge를 그립니다.
• 시각화된 퍼셉트론은 ScrollEventHanlder.ts를 통해 scroll, touch 회전이 가능합니다.
• 명확한 구조화와 모듈화를 위해Orchestration(PerceptronController.ts), Application(*handler.ts), effect(*renderer.ts) 레이어로 책임분리하여 아키텍쳐를 설계하였습니다.

리팩토링 및 기능추가

• 원활한 시각화를 위해 Input layer의 크기를 1/8사이즈로 압축하여 log scale로 표하였습니다.(기존 784개 -> 98개)
• HTML element의 id name을 kebab-case로 변경하였습니다.
• DataStore.ts를 싱클톤 클래스로 변경하였습니다.
• 노드 수에 따른 최대 스크롤 범위 제한 기능을 구현하였습니다.
• 직관적인 UX/UI를 위해 퍼셉트론 canvas에 대한 indicator를 추가하였습니다.
• node와 edge를 해당 모듈에서 직접 그리지 않고 Orchestration layer를 통해 위치를 계산하여 렌더링합니다.
• 렌더링 최적화 및 심미성을 위해 각 node간 edge의 연결 수를 제한합니다.
• ViewportAdaptor를 이용하여 크로스 브라우징 및 반응형을 지원합니다.(Partial responsive support)

이 글을 보실 리뷰어분께

• 한 PR에 너무 많은 내용을 한번에 담았습니다.. 죄송합니다.. 하하
• branch merge 문제로 chore: alias 수정에 따른 파일 변경SHA 이후 커밋 feat: perceptron 구현을 위한 아키텍처 적용(WIP)부터 해당 PR(feat/perceptron) 내용입니다.
• 해당 프로젝트에 대한 전반적인 내용은 Understanding Neural Network-Visualization 문서에서 더 확인하실 수 있습니다.(지속적으로 업데이트 중입니다)
• 해당 브랜치는 자동 배포를 지원합니다. 임시배포 된 내용은 여기에서 보실 수 있습니다.
• 궁금한 내용은 언제든지 여쭤봐주셔요!

감사합니다.

<예시 화면>

@TODO;

• 터치, 스크롤에 따른 햅틱 진동 피드백 구현
• 렌더링 최적화
• touch 엣지 케이스 찾기
• data flow 개선(nodeObjectSet 이중 참조 구조 바꾸기)