ImageEmbedder
비슷한 사진 찾기
해결하는 문제
사진이 많아 비슷한 것끼리 모으거나 중복을 찾기 어렵다.
사진을 숫자 묶음(임베딩)으로 바꾸고, 하나를 고르면 나머지를 닮은 순서로 정렬합니다.
서버 의존도
외부 라이브러리나 AI 모델을 CDN에서 받아 옵니다. 서버는 필요 없고, 오프라인용은 ./libs/에 넣어 둡니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것사진 여러 장
브라우저가 하는 일사진마다 특징 벡터 계산, 코사인 유사도 비교
나오는 것닮은 순서 목록과 유사도
쓰는 브라우저 기술
File APIImage decode
라이브러리와 모델
MediaPipe Tasks (로컬 우선 로딩)mobilenet_v3_small.tflite (약 4MB)
바꿀 수 있는 옵션
- l2Normalize
- 유사도 기준값
- 비교 기준 사진
자주 막히는 곳
- 색과 구도가 비슷하면 다른 물건도 비슷하게 나온다
- 사진이 수천 장이면 처음 계산에 시간이 걸린다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 사진으로 사진 찾기 검색
웹 서비스
- 현장 사진 정리 도구
피지컬 AI
- 부품 사진으로 같은 부품 찾기
넓히는 방법
- IndexedDB에 벡터 저장해 사진 검색기로
- 중복 사진 자동 묶기
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
MediaPipe ImageEmbedder로 여러 사진의 임베딩을 만들고, 사진 하나를 누르면 나머지를 비슷한 순서로 정렬하는 웹페이지를 만들어줘.
같은 분류의 능력
05 데이터 분석·대시보드에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md