# APNG Lip Sync Tool 개발기 - v3: 이미지 업로드 및 분석 통합

## 개요

v2에서 Gemini API 연동을 성공적으로 테스트했습니다. v3에서는 실제 웹 인터페이스를 통한 이미지 업로드와 분석 기능을 완성합니다.

## 구현 내용

### 1. PHP 프론트엔드 개선

드래그 앤 드롭 업로드, AJAX 기반 분석 요청, 진행 상태 표시 등을 추가했습니다.

```php
// AJAX 요청 처리
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_SERVER['HTTP_X_REQUESTED_WITH'])) {
    header('Content-Type: application/json');

    $action = $_POST['action'] ?? '';

    if ($action === 'analyze') {
        // Python 분석 스크립트 호출
        $cmd = escapeshellcmd($pythonPath) . ' -c "
            from src.gemini_client import analyze_face_image
            result = analyze_face_image(Path(\"' . $filepath . '\"))
            print(json.dumps(result))
        "';
        $output = shell_exec($cmd);
        echo $output;
    }
}
```

### 2. Viseme 생성 스크립트

```python
# generate_visemes.py
def generate_all_visemes(image_path: str, character_name: str) -> dict:
    """Generate all viseme images for a character."""
    char_dir = CHARACTERS_DIR / character_name
    char_dir.mkdir(parents=True, exist_ok=True)

    # Copy original as rest pose
    shutil.copy(image_path, char_dir / "rest.png")

    # Generate each viseme
    for viseme, description in VISEME_SET.items():
        if viseme == "rest":
            continue
        generate_viseme_image(
            original_image_path=image_path,
            viseme=viseme,
            viseme_description=description,
            output_path=char_dir / f"{viseme}.png"
        )

    return {"success": True, "generated": list(VISEME_SET.keys())}
```

### 3. UI 개선사항

- **드래그 앤 드롭**: 파일을 끌어다 놓으면 자동 업로드
- **진행 상태 바**: Viseme 생성 진행률 표시
- **캐릭터 카드**: 저장된 캐릭터를 시각적으로 표시
- **실시간 분석**: 업로드 후 바로 Gemini로 얼굴 분석

## 파일 구조

```
public/
└── index.php           # 메인 웹 인터페이스
    ├── 이미지 업로드 처리
    ├── AJAX 분석 요청
    ├── Viseme 생성 요청
    └── 립싱크 재생

generate_visemes.py     # CLI 도구 (PHP에서 호출)
```

## JavaScript 클라이언트 측 립싱크

간단한 텍스트-to-viseme 매핑을 JavaScript로 구현:

```javascript
function textToVisemes(text) {
    const visemes = [];
    const vowelMap = {
        'a': 'A', 'e': 'E', 'i': 'I', 'o': 'O', 'u': 'U',
        'ㅏ': 'A', 'ㅓ': 'A', 'ㅗ': 'O', 'ㅜ': 'U', 'ㅡ': 'I', 'ㅣ': 'I'
    };

    for (const char of text.toLowerCase()) {
        // 한글 음절 분해
        if (char.charCodeAt(0) >= 0xAC00 && char.charCodeAt(0) <= 0xD7A3) {
            const code = char.charCodeAt(0) - 0xAC00;
            const vowelIdx = Math.floor((code % (21 * 28)) / 28);
            // ...
        }
    }
    return visemes;
}
```

## 다음 단계 (v4-v5)

- v4: 얼굴/입 영역 감지 로직 개선
- v5: 립싱크 표준 입모양 세트 미세 조정

---

*이 시리즈는 총 16개의 포스트로 구성되어 있습니다.*