How it's built — Image Recognition

구축 방법 — Image Recognition · v1.0 · 2026-10-27

탭 5개: Images as Numbers / Image Classification / Object Detection / Segmentation / Limits in the Field. 탭마다 체험 2~4개
계산은 모두 브라우저에서: 직접 쓴 JavaScript(ir-core.js), 외부 라이브러리 없음. 사전 학습한 모델 없음
분류 CNN: 24×24 회색 → 3×3 합성곱 8 → ReLU → 2×2 max pooling → 3×3 합성곱 16 → ReLU → 2×2 max pooling → 완전연결 256→4 → softmax, 매개변수 2,276개, He 초기화(시드 1). Adam η 0.01, 묶음 32, 800단계(+400씩 더), 100단계마다 시험 600장 평가 (모두 정한 값)
기준선: 픽셀 576개를 그대로 쓰는 소프트맥스 회귀(매개변수 2,308개), 같은 묶음·같은 Adam 설정
검출: IoU, 같은 범주 NMS(점수 순 탐욕), 점수 순으로 정답과 짝짓기(한 정답에 하나만 TP, 나머지는 FP 중복), AP는 모든 점 보간(VOC2010 이후 방식), mAP@[.5:.95]는 0.05 간격 10개 평균
분할: 밝기 문턱과 Otsu(1979), RGB k-평균(k-means++ 시작, 시드 고정), 4-이웃 영역 키우기(누른 픽셀 색과 RGB 거리 ≤ 허용 거리), IoU·Dice
한계: 시험 그림 300장에 변화 하나씩(잡음, 밝기, 대비, 네모 가림, 상자 흐림, 부분 반전) 11단계. 윤곽선 도형 400장(시드 13)으로 다른 모양새 시험, 윤곽선 400장(시드 14)을 더해 같은 설정으로 다시 학습
LLM 없음

도형 그림: 원·네모·세모·십자, 24×24, 코드로 그림(3×3 슈퍼샘플링). 반지름 6.5–10.5픽셀, 위치·회전·밝고 어두운 색 무작위, 가우스 잡음 σ 0.08. 학습 2,000장(시드 11), 시험 600장(시드 12), 각 범주 같은 수. 성격: 합성
도형 장면(검출·분할): 360×240, 도형 7개를 색칠해 배치(시드 21), 정답 상자·마스크는 그린 픽셀에서 정확히 계산. 성격: 합성
예측 상자: 규칙으로 만든 예시(정답 상자를 흔들고 겹치게 복제, 틀린 상자 4개, 정답 하나는 놓침, 가끔 범주 틀림). 모델 출력이 아님
사진: scikit-image data.coffee(Rachel Michetti)·data.chelsea(Stefan van der Walt) · CC0 · Image Compression 주제의 같은 파일을 씀
사용자가 연 사진은 브라우저 안에서만 쓰고 저장·전송하지 않음

tests/image-recognition/core-test.mjs (Node 22.23):
CNN 기울기 28개를 수치 미분(중앙 차분, Float64)과 대조: 최대 상대오차 1.6e-8
800단계 × 32장: CNN 시험 정확도 89.5%, 소프트맥스 회귀 29.5%(찍기 25%) · 헤드리스 Chromium에서 같은 값(89.5%, 약 13초)
같은 CNN, 윤곽선 도형 400장: 63.7%
IoU 손계산 25/175, NMS 예(같은 범주 하나만 지움), AP 손계산 0.7556, 중복 FP, Otsu 문턱이 두 무리 사이, k-평균 중심, 영역 키우기와 IoU 0.5 · Dice 2/3 모두 일치
화면: Playwright로 375·1920px × 한·영 × 탭마다 콘솔 오류·넘침·빈 그림·남은 한글 검사

LeCun, Y. et al. (1998). Gradient-based learning applied to document recognition. Proc. IEEE 86(11)
Everingham, M. et al. (2010). The PASCAL VOC challenge. IJCV 88(2)
Lin, T.-Y. et al. (2014). Microsoft COCO. ECCV
Otsu, N. (1979). A threshold selection method from gray-level histograms. IEEE SMC 9(1)
Arthur, D., Vassilvitskii, S. (2007). k-means++. SODA
Hendrycks, D., Dietterich, T. (2019). Benchmarking neural network robustness to common corruptions and perturbations. ICLR
van der Walt, S. et al. (2014). scikit-image. PeerJ 2

5 tabs: Images as Numbers / Image Classification / Object Detection / Segmentation / Limits in the Field, each with 2–4 hands-on parts
Everything is computed in the browser with hand-written JavaScript (ir-core.js), no external libraries. No pre-trained models
Classification CNN: 24×24 grey → 3×3 conv ×8 → ReLU → 2×2 max pooling → 3×3 conv ×16 → ReLU → 2×2 max pooling → dense 256→4 → softmax, 2,276 parameters, He initialisation (seed 1). Adam η 0.01, batch 32, 800 steps (+400 at a time), test set of 600 evaluated every 100 steps (all fixed choices)
Baseline: softmax regression on the 576 raw pixels (2,308 parameters), same batches and Adam settings
Detection: IoU, per-class greedy NMS by score, matching to ground truth in score order (one TP per true box, further hits are duplicate FPs), all-point interpolated AP (VOC2010 onwards), mAP@[.5:.95] averaged over 10 thresholds in 0.05 steps
Segmentation: brightness threshold and Otsu (1979), RGB k-means (k-means++ start, fixed seed), 4-neighbour region growing (RGB distance to the clicked pixel ≤ tolerance), IoU and Dice
Limits: 300 test images with one change at a time (noise, brightness, contrast, square occlusion, box blur, partial inversion) at 11 levels. Different style: 400 outlined shapes (seed 13); retraining with 400 outlined images (seed 14) added, same settings
No LLM

Shape images: circle, square, triangle, cross, 24×24, drawn in code (3×3 supersampling). Radius 6.5–10.5 px, random position, rotation, light or dark colouring, Gaussian noise σ 0.08. Training 2,000 (seed 11), test 600 (seed 12), balanced. Synthetic
Shapes scene (detection, segmentation): 360×240, 7 coloured shapes (seed 21); true boxes and masks computed exactly from the drawn pixels. Synthetic
Predicted boxes: rule-made examples (true boxes jittered and duplicated, 4 false boxes, one true box missed, occasional wrong class). Not model output
Photos: scikit-image data.coffee (Rachel Michetti) and data.chelsea (Stefan van der Walt) · CC0 · the same files as the Image Compression topic
Photos opened by visitors are used only in the browser, never stored or sent

tests/image-recognition/core-test.mjs (Node 22.23):
28 CNN gradients against central differences (Float64): worst relative error 1.6e-8
800 steps × 32 images: CNN test accuracy 89.5%, softmax regression 29.5% (chance 25%) · the same in headless Chromium (89.5%, about 13 s)
Same CNN on 400 outlined shapes: 63.7%
IoU hand calculation 25/175, an NMS case (only the same class removed), AP hand calculation 0.7556, duplicate FP, Otsu threshold between two groups, k-means centres, region growing with IoU 0.5 and Dice 2/3: all match
Screens: Playwright at 375 and 1920 px × Korean/English × every tab, checking console errors, overflow, blank plots and leftover Korean

Small models and synthetic data to show principles; says nothing about real-photo recognition or detection performance. Scores are not probabilities

LeCun, Y. et al. (1998). Gradient-based learning applied to document recognition. Proc. IEEE 86(11)
Everingham, M. et al. (2010). The PASCAL VOC challenge. IJCV 88(2)
Lin, T.-Y. et al. (2014). Microsoft COCO. ECCV
Otsu, N. (1979). A threshold selection method from gray-level histograms. IEEE SMC 9(1)
Arthur, D., Vassilvitskii, S. (2007). k-means++. SODA
Hendrycks, D., Dietterich, T. (2019). Benchmarking neural network robustness to common corruptions and perturbations. ICLR
van der Walt, S. et al. (2014). scikit-image. PeerJ 2