plant-cam — 국립중앙과학관 식물 AI 도감

카메라로 식물을 비추면 이름을 알려주는 웹앱. 티처블 머신(Teachable Machine) 이미지 모델 6개(구역 1~6)를 브라우저 안에서 @tensorflow/tfjs로 실행한다. 서버 없음 — 정적 파일만으로 동작하며 카메라 영상은 기기 밖으로 나가지 않는다.

명령

• 개발 서버: npm run dev → http://localhost:3000
• 테스트: npm test · 린트: npm run lint
• 로컬 빌드: npm run build (→ out/)
• GitHub Pages 배포: npm run deploy (하위경로 /plant-cam으로 빌드 후 gh-pages 브랜치에 게시)

첫 배포 (1회만)

1. github.com에서 새 저장소 plant-cam 생성(Public, README 없이).
2. 터미널:

   cd ~/plant-cam
   git branch -M main
   git remote add origin https://github.com/<아이디>/plant-cam.git
   git push -u origin main
   npm run deploy

3. 저장소 → Settings → Pages → Source: "Deploy from a branch", Branch: gh-pages / / (root) → Save.
4. 1~2분 뒤 https://<아이디>.github.io/plant-cam/ 접속. 이후에는 npm run deploy만 반복.

• git push가 로그인을 요구하면 비밀번호 칸에 GitHub Personal Access Token을 넣는다.
• npm run deploy가 캐시 오류로 실패하면 npx gh-pages-clean 후 다시 실행한다.

구조

• src/app/ — 홈(/), 구역 카메라(/zone/1~/zone/6), 내 모델(/custom)
• src/components/ — Scanner, ResultPanel, ZoneCard, ModelLoaderForm 등
• src/lib/model/ — 모델 불러오기(내장·zip·주소), 전처리, 예측, 평균화
• src/lib/plants.json — 식물 36종 목록(표시 이름·설명 자리)
• public/models/zone1..6/ — 티처블 머신 모델 파일

문서

• 설계: docs/superpowers/specs/2026-09-02-plant-cam-design.md
• 구현 계획: docs/superpowers/plans/2026-09-02-plant-cam.md