ObjectDetector
사물 인식 화재 안전 안내
해결하는 문제
카메라에 보이는 물건이 무엇인지 자동으로 알아보고 싶다.
카메라에 보이는 물체 80종의 위치와 이름을 찾고, 물체에 맞는 안전 안내를 그 위에 붙입니다.
서버 의존도
외부 라이브러리나 AI 모델을 CDN에서 받아 옵니다. 서버는 필요 없고, 오프라인용은 ./libs/에 넣어 둡니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것카메라 영상
브라우저가 하는 일EfficientDet이 물체 위치 상자, 이름, 확신도 계산
나오는 것물체별 이름표와 맞춤 안전 안내
쓰는 브라우저 기술
getUserMediaCanvas 2DWebAssembly
라이브러리와 모델
MediaPipe Tasks VisionEfficientDet-Lite0 모델 (약 7MB)
바꿀 수 있는 옵션
- scoreThreshold: 확신도 기준
- maxResults: 최대 개수
- categoryAllowlist: 원하는 물체만 찾기
자주 막히는 곳
- 기본 모델에 없는 물건(소화기 등)은 따로 학습시켜야 한다
- 작게 보이는 물체는 놓친다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 현장 사진 안전 점검 보조
- 시각장애인 물체 안내
웹 서비스
- 매장 진열 확인
- 분실물 사진 자동 분류
피지컬 AI
- 인식한 물체에 따라 분류함 작동
- 사람을 감지하면 조명·환풍기 제어
넓히는 방법
- MediaPipe Model Maker·Teachable Machine으로 소화기 같은 우리 물체 학습
- 물체 개수 세기 (재고, 출석)
- 물체가 사라지면 알림
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
MediaPipe ObjectDetector로 카메라에 보이는 물체를 인식해서 이름표와 화재 안전 안내를 그 물체 위에 띄우는 웹페이지를 만들어줘.
같은 분류의 능력
04 브라우저 속 AI에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md