# AGENTS.md 생성
cat > AGENTS.md << 'EOF'
# 웹 메트로놈

## 기술 스택
- HTML5 + CSS3 + Vanilla JavaScript
- Web Audio API (소리 생성)
- 프레임워크 미사용

## 코딩 규칙
- 한국어 주석 필수
- 모든 코드는 단일 index.html 파일에 작성
- ES6+ 문법 사용

## 기능 요구사항
- BPM 조절 (40-240)
- 시작/정지 버튼
- 시각적 비트 표시 (깜빡임)
- 첫 박 강세 (다른 소리)
- 박자 선택 (4/4, 3/4, 6/8)
EOF

codex "index.html 파일 하나에 웹 메트로놈을 만들어줘.

요구사항:
1. Web Audio API로 클릭 소리를 생성 (오실레이터 사용, 파일 불필요)
2. BPM 슬라이더 (40-240, 기본값 120)
3. 시작/정지 토글 버튼
4. 현재 BPM 숫자 표시
5. 비트마다 화면에 원이 깜빡이는 시각적 피드백
6. 첫 박은 높은 음(880Hz), 나머지 박은 낮은 음(440Hz)
7. 4/4 박자 기본

CSS는 다크 테마로, 가운데 정렬, 모바일 반응형으로.
한국어 주석을 꼭 넣어줘."

codex "index.html의 메트로놈에 박자 선택 기능을 추가해줘.

- 드롭다운으로 4/4, 3/4, 6/8 선택
- 선택한 박자에 따라 비트 원의 개수가 바뀜
  (4/4는 원 4개, 3/4는 원 3개, 6/8는 원 6개)
- 강세 패턴도 박자에 맞게 변경
  (6/8은 1번째와 4번째 박에 강세)
- 기존 코드를 유지하면서 수정해줘"

mkdir -p hand-tracker-demo && cd hand-tracker-demo && git init

cat > AGENTS.md << 'EOF'
# MediaPipe Hand Tracker Demo

## 기술 스택
- HTML5 + CSS3 + JavaScript
- MediaPipe Hands (CDN)
- Canvas API (랜드마크 시각화)

## 주요 파일
- index.html: 메인 페이지 (단일 파일)

## 기능
1. 웹캠 연결 및 비디오 표시
2. MediaPipe Hands로 손 랜드마크 감지
3. Canvas 오버레이에 랜드마크 점과 선 그리기
4. 좌표값 실시간 텍스트 표시
5. FPS 카운터

## MediaPipe CDN
https://cdn.jsdelivr.net/npm/@mediapipe/hands
https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils
https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils
EOF

git add -A && git commit -m "hand-tracker 프로젝트 초기화"

codex "MediaPipe Hands를 사용한 손 추적 데모 페이지를 
index.html 하나로 만들어줘.

## 필수 기능:
1. 웹캠 비디오를 화면 중앙에 표시 (640x480)
2. 비디오 위에 Canvas를 겹쳐서 랜드마크를 그림
3. MediaPipe Hands CDN으로 로드 (npm 설치 불필요)
4. 감지된 손의 21개 랜드마크를 빨간 점으로 표시
5. 랜드마크 사이를 초록색 선으로 연결
6. 화면 우측에 실시간 좌표 패널:
   - 검지 끝(landmark 8)의 x, y 좌표
   - 엄지 끝(landmark 4)의 x, y 좌표
   - 검지-엄지 사이 거리
7. 좌측 상단에 FPS 카운터
8. 카메라 접근 실패 시 에러 메시지 표시

## 스타일:
- 다크 테마 (배경 #1a1a2e)
- 좌표 텍스트는 모노스페이스 폰트
- 모바일에서도 사용 가능하게 반응형

## MediaPipe 설정:
- maxNumHands: 2 (양손)
- minDetectionConfidence: 0.7
- minTrackingConfidence: 0.5

한국어 주석을 반드시 넣어줘."

codex "index.html에 제스처 인식 기능을 추가해줘.

다음 3가지 제스처를 인식:
1. '주먹' - 모든 손가락이 접혀있을 때
   (각 손가락 끝 landmark가 해당 MCP landmark보다 아래)
2. '펼침' - 모든 손가락이 펴져있을 때
3. '피스' - 검지와 중지만 펴져있을 때

인식 결과:
- 화면에 큰 텍스트로 현재 제스처 이름 표시
- 제스처별로 다른 색 배경 효과 (주먹=빨강, 펼침=초록, 피스=파랑)
- 제스처가 바뀔 때 부드러운 전환 효과

기존 랜드마크 표시는 유지하면서 추가해줘."

# 에러 로그 확인 요청
codex "index.html의 콘솔에 에러가 나와. 
'Failed to load MediaPipe Hands model'이라는 에러야. 
원인을 분석하고 수정해줘. 
CDN URL이 최신인지도 확인해줘."

# HTTPS 문제인 경우
codex "카메라가 'NotAllowedError'로 안 켜져. 
localhost가 아닌 환경에서 테스트할 때 
HTTPS가 필요한 것 같은데, 
간단한 해결 방법을 알려줘."

mkdir -p osc-sender && cd osc-sender && git init && npm init -y

cat > AGENTS.md << 'EOF'
# OSC 메시지 전송기

## 기술 스택
- 프론트엔드: HTML + JavaScript
- 서버: Node.js + Express + osc.js
- 통신: WebSocket (브라우저 ↔ 서버), UDP (서버 ↔ Ableton/TD)

## 구조
- public/index.html: 웹 UI
- server.js: WebSocket-to-OSC 브릿지 서버

## OSC 대상 포트
- Ableton Live (via Max4Live): UDP 11000
- TouchDesigner: UDP 7000

## 필요 npm 패키지
- express: 웹 서버
- osc: OSC 프로토콜 라이브러리
- ws: WebSocket 서버
EOF

git add -A && git commit -m "OSC 전송기 프로젝트 초기화"

codex "Node.js로 OSC 브릿지 서버를 만들어줘.

## server.js 요구사항:
1. Express로 public/ 폴더의 정적 파일 서빙 (포트 3000)
2. WebSocket 서버를 같은 포트에 연결
3. 웹소켓으로 받은 메시지를 OSC UDP로 변환하여 전송
4. OSC 전송 대상:
   - 기본: localhost:11000 (Ableton)
   - 설정 가능하게 (환경변수 또는 URL 파라미터)
5. 에러 핸들링 (포트 사용 중, UDP 전송 실패 등)
6. 콘솔에 송수신 로그 표시

## package.json 의존성:
- osc, express, ws

한국어 주석 필수."

codex "public/index.html에 OSC 전송 UI를 만들어줘.

## UI 구성:
1. 연결 상태 표시 (WebSocket 연결/끊김)
2. OSC 주소 입력 필드 (기본값: /live/track/1/volume)
3. 값 슬라이더 (0.0 ~ 1.0, 기본값: 0.5)
4. 전송 버튼 + 슬라이더 실시간 전송 토글
5. 최근 전송 메시지 로그 (최대 20개)
6. 프리셋 버튼 3개:
   - 'Volume' → /live/track/1/volume
   - 'Pan' → /live/track/1/pan  
   - 'Tempo' → /live/tempo

## 스타일:
- 다크 테마 (Ableton 느낌의 UI)
- 슬라이더는 크게 (터치 친화적)
- 연결 상태: 초록/빨강 LED 아이콘

## 동작:
- 페이지 로드 시 자동으로 WebSocket 연결
- 슬라이더 변경 시 실시간 전송 모드이면 즉시 전송
- 전송된 메시지를 로그에 타임스탬프와 함께 표시

한국어 주석 필수."

# TouchDesigner에서 테스트하기 더 쉬움
# TouchDesigner > Add Operator > CHOP > OSC In
# Port: 7000 으로 설정
# 서버의 OSC 전송 포트도 7000으로 변경

codex "server.js에서 OSC 전송 포트를 환경변수로 
설정할 수 있게 해줘. 
기본값은 7000 (TouchDesigner)으로 변경.
OSC_PORT=11000 node server.js 형태로 사용."