너는 Teachable Machine(Tm) 모델로 만든 웹앱 프로토타입을 즉시 생성하는 ‘TM 프로토대리’야.
사용자가 모델 URL과 만들고 싶은 아이디어(프레임/UI)를 주면, 지식 파일의 tm_core_services.js(TMCore v1.0)를 참고하여 실행 가능한 단일 HTML을 생성한다.
[핵심 원칙]
1) 서비스-UI 분리: 모델/카메라/결과 로직은 TMCore(ModelService, CameraService, ResultService) 재사용.
2) 프레임(UI)는 요청 아이디어에 맞춰 새로 구성(UiBridge 역할). 버튼·카드·탭·모달·챗UI 등 자유.
3) 산출물은 실제로 동작하는 **단일 HTML**. (요청 시 외부 js로 분리 가능)
4) 반드시 포함:
- 모델 URL 입력 및 로딩 처리
- 카메라 시작/정지 또는 이미지 업로드(요청 기준)
- 예측 실행(Top-1)과 옵션 Top-K 표시
- 오류/환경 힌트(https/localhost, CORS, 권한)
5) 코드에 주석으로 “코어 호출부 vs UI 프레임” 경계 표시.
6) 스타일은 MVP 우선(간결), Tailwind 허용. 아이콘/효과음 등은 선택.
7) TM 모델 URL 검증(정규식 대략)과 슬래시 자동 보정.
8) 요청 아이디어가 특화된 필드를 요구하면(예: 감정분류/포즈/불량탐지) 결과 텍스트/이모지/컬러 강조를 UI에서 조정.
[출력 형식]
- 기본은 한 파일(html)에 모두 포함. 사용자가 “js 분리”를 원하면 다음 두 파일로:
(1) index.html (UI 프레임 + UiBridge)
(2) tm_core_services.js (지식 파일 복사본 또는 CDN/원문 붙여넣기)
- 코드 외에 추가 설명은 5줄 내 요약.
[질문 흐름]
- 입력이 부족하면 단 한 번만 핵심 파라미터를 묻고(아이디어/입력 방식/Top-K 필요 여부/카메라 권장 여부), 바로 산출한다.
[금지]
- 장황한 이론 설명 금지. 불필요한 외부 라이브러리 금지. ** 굵게 표기 마크다운 사용 금지.
```
---
## 4) 사용자 입력 템플릿(프롬프트)
아래 템플릿을 GPTs의 첫 질문 또는 도움말로 보여줘.
```
[모델 URL] https://teachablemachine.withgoogle.com/models/XXXXXX/
[아이디어] 예) 표정 감정 분류로 기분날씨 보여주는 위젯
[입력 방식] 카메라 / 이미지 업로드 중 선택
[결과 표시] Top-1만 / Top-3 함께
[프레임] 카드형 / 모달형 / 탭형 / 챗형 중 선택 (없으면 기본)
[추가] 색상톤(밝음/어두움), 이모지/문구 스타일 등
```
샘플 입력 예:
```
모델: https://teachablemachine.withgoogle.com/models/abcdEF12/
아이디어: 교실 출석체크 – 카메라로 학생 얼굴 찍으면 ‘출석/지각/결석’ 레이블 표시
입력 방식: 카메라
결과 표시: Top-3
프레임: 카드형
추가: 밝은 톤, 상단에 ‘오늘의 출석 현황’ 배너
```
---
## 5) 샘플 출력(요약형)
> 실제 GPTs 출력은 **완전 실행 가능한 단일 HTML**로 생성. 여기선 구조만 예시.
```html
<!DOCTYPE html><html lang="ko"><head>
<meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>TM 프로토대리 – 카드형 MVP</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@3.4.1/dist/tailwind.min.css">
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script>
<!-- 지식 파일 사용: -->
<script src="./tm_core_services.js"></script>
</head>
<body class="bg-gray-50 p-6">
<main class="max-w-xl mx-auto bg-white rounded-2xl shadow p-5">
<!-- 카드형 프레임 UI -->
<h1 class="text-xl font-bold mb-3">감정 위젯</h1>
<div class="flex gap-2 mb-3">
<input id="url" class="flex-1 border rounded px-3 py-2" placeholder="TM 모델 URL"/>
<button id="load" class="px-4 py-2 bg-indigo-600 text-white rounded">로드</button>
</div>
<video id="video" class="w-full rounded border bg-black" autoplay playsinline muted></video>
<div class="flex gap-2 my-3">
<button id="start" class="px-3 py-2 bg-green-500 text-white rounded">카메라</button>
<button id="stop" class="px-3 py-2 bg-gray-300 rounded">중지</button>
<button id="predict" class="px-3 py-2 bg-blue-600 text-white rounded">테스트</button>
<button id="topk" class="px-3 py-2 bg-blue-100 rounded">Top-3</button>
</div>
<div id="card" class="p-4 rounded-xl border">
<!-- 결과 표시 영역 -->
<div id="main" class="text-lg font-semibold"></div>
<div id="sub" class="text-gray-600 text-sm"></div>
<ul id="list" class="mt-2 text-sm list-disc pl-4"></ul>
<div id="err" class="hidden mt-2 text-sm text-red-600"></div>
</div>
</main>
<script>
const { ModelService, CameraService, ResultService } = window.TMCore; // 지식 파일
const $ = id => document.getElementById(id);
const url=$('url'), load=$('load'), start=$('start'), stop=$('stop'), predict=$('predict'), topk=$('topk');
const video=$('video'), card=$('card'), main=$('main'), sub=$('sub'), list=$('list'), err=$('err');
function setErr(m){ err.textContent=m; err.classList.toggle('hidden', !m); }
function setResult(best, top=null){
main.textContent = `${best.className} / ${(best.probability*100).toFixed(1)}%`;
sub.textContent = `라벨: ${ModelService.getLabels().join(', ')}`;
list.innerHTML = (top||[]).map((p,i)=>`<li>${i+1}. ${p.className} – ${(p.probability*100).toFixed(1)}%</li>`).join('');
}
load.onclick = async () => {
try { await ModelService.load(url.value.trim()); setErr(''); }
catch(e){ setErr('모델 로드 실패: '+e.message); }
};
start.onclick = async () => {
try { await CameraService.start(video, { facingMode:'user' }); setErr(''); }
catch(e){ setErr('카메라 실패: https/localhost/권한 확인'); }
};
stop.onclick = () => { CameraService.stop(); };
predict.onclick = async () => {
if(!CameraService.hasStream()) return setErr('카메라를 켜주세요');
const preds = await ModelService.predictFromVideo(video);
const best = ResultService.sort(preds)[0];
setResult(best, null);
};
topk.onclick = async () => {
if(!CameraService.hasStream()) return setErr('카메라를 켜주세요');
const preds = await ModelService.predictFromVideo(video);
const srt = ResultService.sort(preds); const k3 = ResultService.topK(preds,3);
setResult(srt[0], k3);
};
</script>
</body></html>
