Talking Avatar

Talking Avatar 使用マニュアル

Talking Avatar は、入力した文章を読み上げながら、2Dアバターや写真が一緒に喋るアプリケーション（Web版 & macOS / Windows デスクトップアプリ版）です。

声に合わせて口がリアルタイムに動き、まばたきをし、頭が自然に揺れます。

内蔵アバターのほか、お手持ちの顔写真や自作のイラストアバターを読み込んで喋らせることができ、動画ファイル（WebM / MP4）としての保存も可能です。

すべての処理はお使いのブラウザ / デバイスローカル上で行われます。文章や写真が外部サーバーへ送信されることはありません。

---

## 1. 動作環境とアプリの入手

- **Web 版**: Chrome, Edge, Safari, Firefox 等のモダンブラウザ

- **デスクトップアプリ版 (macOS / Windows)**:

- GitHub リポジトリ（[tztechno/talking-avatar-desktop](https://github.com/tztechno/talking-avatar-desktop)）の Releases または Actions Artifacts よりダウンロード可能です。

- **macOS**: `Talking-Avatar_x.x.x_aarch64.dmg`（Apple Silicon）または `x64.dmg`（Intel）

- **Windows**: `Talking-Avatar_x.x.x_x64-setup.exe` または `.msi`

- **WebGL**: 写真アバターの動作に必要です（近年のPCでは標準で有効）。

- **インターネット接続**: 初回のみ AI 音声モデル（約 90MB）や顔認識モデルのキャッシュダウンロードに使用します。

---

## 2. 起動のしかた

### デスクトップアプリ版（推奨）

- **macOS**: DMG ファイルを開き、`Talking Avatar.app` を `Applications` フォルダへドラッグ＆ドロップして起動します。

- **Windows**: インストーラー（`.exe`）を実行し、画面の指示に従ってインストールして起動します。

### Web 開発版

自分のパソコンで Web 版の開発サーバーを動かす場合は、[Node.js](https://nodejs.org/) 20 以上を用意して、次を実行します。

```sh

cd talking-avatar

npm install # 初回のみ

npm run dev

```

ターミナルに表示されたアドレス（通常は `http://localhost:5173`）をブラウザで開きます。

---

## 3. 画面構成と説明

| 場所 | 役割 |

|---|---|

| **ステージ**（左） | アバターが表示されます。写真やアバターのファイルをここにドロップできます。 |

| **Background** | 背景を選びます。透明（Transparent）、好きな色（Colour）、グリーンバック（Chroma green）の3種類です。 |

| **Load photo / Load folder / Load .zip** | 自分の顔写真や自作アバターを読み込みます（5章）。 |

| **アバター選択欄** | 内蔵の *Sample photo*（写真）と *Illustration*（イラスト）を切り替えます。 |

| **Mark mouth** | 写真のときだけ表示されます。口の位置を手動で指定し直します。 |

| **Mouth shapes (debug)** | 口の形（A, I, U, E, O, X）を1つずつ手動で表示確認できます。フレームレート（FPS）も表示されます。 |

| **音声エンジン / Voice** | ・**デスクトップ版**: **Edge Neural Voice**（日・英合わせて50種近い高品質Neural音声、Nanami/Keita/Jenny等）または **OS System Voice**（オフライン用）<br>・**Web版**: Kokoro AI 音声（英語・WebGPU）または Browser voice（日本語対応） |

| **Voice / Speed** | 声の種類と、読み上げの速さ（0.5〜2倍）を選びます。 |

| **テキスト欄** | 読み上げる文章を入力します。読んでいる文が強調表示されます。 |

| **Speak / Pause / Stop** | 読み上げの開始・一時停止・停止です。 |

| **Speak & record video** | 読み上げながらアバターを録画し、音声付き動画ファイルとしてダウンロードします。 |

| **ステータス欄** | メッセージ、進み具合、エラーが表示されます。 |

---

## 4. 文章を読み上げる

1. **音声（話者）を選びます**:

- **デスクトップアプリ版**: **Speech engine** で **Edge Neural Voice**（推奨・高品質AI音声）または **OS System Voice**（オフライン）を選び、**Voice** ドロップダウンからお好みの日本語・英語音声（Nanami, Keita, Jenny, Guy 等）を選択します。

- **Web版**:

- **Browser voice**: ブラウザ内蔵音声（日本語対応）。

- **Kokoro (AI voice, English)**: 高品質 AI 音声（英語のみ）。初回のみ「Download & load model」を実行します。

2. **Speed** で読み上げ速度（0.5〜2倍）を調整します。

3. テキスト欄に文章を入力・貼り付けます。

4. **「Speak」** を押すと読み上げが始まり、アバターが連動して喋ります。

---

## 5. 顔写真や自作アバターを読み込む

### 5.1 顔写真を使う（Photo Avatar）

- 正面を向いた顔写真（JPG / PNG / WebP）をステージにドラッグ＆ドロップするか、「Load photo」から選びます。

- 自動的に目・口・あごが認識され、喋るようになります。

- うまく認識されない場合は「Mark mouth」を押し、写真上の口の「左端」と「右端」をクリックしてください。

### 5.2 自作イラストアバターを使う（Custom Avatar）

- パーツ分けされた自作アバター画像を含むフォルダまたは `.zip` ファイルを読み込みます。

- 構成例：`avatar.json`, `base.png`, `eyes_open.png`, `eyes_closed.png`, `mouth_A.png`, `mouth_I.png`, `mouth_U.png`, `mouth_E.png`, `mouth_O.png`, `mouth_X.png`

---

## 6. 動画として書き出す

1. 必要に応じて背景を「Chroma green（グリーンバック）」にします。

2. **「Speak & record video」** を押します。

3. 読み上げ終了後、動画ファイル（`.webm`）が自動的にダウンロード・保存されます。