# APNG Lip Sync Tool - 프롬프트 기록

## 초기 프로젝트 요청

### 사용자 요청 (프로젝트 생성)
```
20251208-make-apng-tool 이라는 새로운 디렉토리를 만들고 다음의 솔루션을 만들어주세요

1. 스트리밍을 모방하는 시스템입니다.

Input Part
- 유명인이나 애니메이션 케릭터의 이미지를 업로드합니다.
- gemini (nano banana) 가 이미지를 분석하고 얼굴 영역을 감지합니다.
- 입술 모양에 해당하는 다른 이미지를 생성해서 APNG파일로 저장합니다.

Output Part
- 캐릭터를 선택하고
- 텍스트를 입력하면
- 스트리밍과 같은 출력을 합니다.
- 음성과 입술 모양이 싱크가 되게 합니다.

개발 언어는 Python (uv) 를 사용하고
프론트엔드는 php 로 작성합니다.
gemini 설정은 같은 blog 디렉토리 안에 있는 batch/auto-post-ai-news/.env 의 설정을 카피해서 사용합니다.
gemini에서 이미지를 만드는 것은 nano banana 모드로 합니다.

블로그 형식으로 개발 과정을 기록합니다.
make-apng-tool-v1.md 에서 make-apng-tool-v16.md 까지요.
블로그 문서의 기록은 docs 디렉토리 안에 합니다.
```

### 추가 질문 및 답변

**Q: 립싱크 표준은 어떤 것을 사용할까요?**
A: 업계 표준 (8-10 visemes)

**Q: 스트리밍 스타일은?**
A: TTS + 립싱크

**Q: Nano Banana가 무엇인가요?**
A: Gemini 2.5 Flash Image 모델

**Q: 블로그 구조는?**
A: 16개 포스트에 자동 분배

---

## 배포 관련 요청

### URL 설정
```
/viseme URL로 접근하도록 설정해주세요
```

### 인증 정보
```
basic auth 가 필요하면 tkim / tkim 으로 시도해주세요
```

### 에러 해결
```
Analyze Face 버튼 클릭 시 JSON 에러 발생
Generate Visemes 90%에서 에러
playwright 로 접근해 보세요 https://tkim.planitai.co.jp/viseme/
```

---

## Streaming Avatar 확장 요청

### 사용자 요청
```
좀 더 진화한 버전을 만들고 싶습니다.
akool.com/ja-jp/apps/streaming-avatar 와 같은 버전을 만들기 위한
조사 및 기술 리서치를 하고
make-streaming-avatar-v1.md 에서 *-v10.md 까지 블로그를 작성해주세요
```

---

## SadTalker 논문 분석 요청

### 사용자 요청
```
APNG Lyp Sync Tool 에 다음의 논문의 내용을 가미할 수 있을까요?
먼저 논문의 내용을 읽어주세요
https://arxiv.org/pdf/2211.12194
```

---

## OpenAvatarChat 검토 요청

### 사용자 요청
```
https://github.com/HumanAIGC-Engineering/OpenAvatarChat
라는 것이 있다는 것을 알게 되었다. APNG의 한계를 넘어서는 솔루션인 것 같은데
이를 이용한 구현의 가능할 지 검토하라. LLM은 역시 gemini 를 사용하는 것으로 하자.

모델은 https://modelscope.cn/models/HumanAIGC-Engineering/LiteAvatarGallery/file/view/master/20250408%2Favatar.md?status=1
에서 소개하고 있는 모델 중에 20250408/P1czPSfo17eENn3VqGqNaT-A 를 사용하고 싶다.
```

---

## 문서화 요청

### 사용자 요청
```
좋습니다. 구현을 진행하기 전에 이 과정을 어떻게 하면 좋을 지 블로그를 먼저 써봅시다.
그 전에 먼저 현재의 기록 디렉토리에 현재까지의 과정을 progress.md 로, prompts 들을 prompts.md 로 기록합시다.

그리고 새로운 기록 디렉토리를 만듭시다. 20251208-make-open-avatar-chat-demo 로 합시다.
이 디렉토리 안에 블로그를 기록합시다.
make-open-avatar-chat-demo-v1.md 부터 make-open-avatar-chat-demo-v10.md 까지 해봅시다.
OpenAvatarChat은 OpenAI를 이용하니 0251128-stripe-chatgpt 디렉토리 안에 있는 OpenAPIKey를 사용합시다.
```

---

## Gemini 프롬프트 (이미지 분석)

### 얼굴 영역 감지
```python
prompt = """Analyze this image and detect the face region.
Return a JSON object with:
{
    "has_face": true/false,
    "face_box": {"x": int, "y": int, "width": int, "height": int},
    "mouth_box": {"x": int, "y": int, "width": int, "height": int},
    "confidence": float (0-1)
}

Focus on finding the mouth region for lip-sync animation purposes.
"""
```

### Viseme 이미지 생성
```python
prompt = f"""Based on this reference face image, generate a new image
showing the same face with the mouth in the '{viseme}' position.

Viseme '{viseme}' description: {description}

Keep the face identity, expression, and style consistent.
Only modify the mouth/lip area to match the viseme.
Maintain the same image size and quality.
"""
```

---

## 시스템 프롬프트 (LLM 대화)

### Streaming Avatar용
```
당신은 친절하고 자연스러운 AI 아바타입니다.

규칙:
1. 응답은 2-3문장으로 간결하게 작성합니다.
2. 자연스러운 구어체를 사용합니다.
3. 감정을 적절히 표현합니다.
4. 질문에는 직접적으로 답변합니다.

당신의 이름은 "아이리스"입니다.
```

### OpenAvatarChat용 (예정)
```
당신은 친절한 AI 어시스턴트입니다.
사용자의 질문에 2-3문장으로 간결하게 답변하세요.
한국어로 대화합니다.
```

---

## 기술 조사 검색 쿼리

### Streaming Avatar 기술
```
streaming avatar real-time lip sync technology
AKOOL streaming avatar architecture
HeyGen interactive avatar API
WebRTC low latency video streaming
MuseTalk real-time lip sync
```

### SadTalker
```
arxiv 2211.12194 SadTalker paper audio driven talking head
```

### OpenAvatarChat
```
OpenAvatarChat LiteAvatar Gemini LLM integration configuration
OpenAvatarChat LiteAvatar GPU requirements CPU only mode
```