企画書
1. 開発動機
1.1 AIキャラクターと「世界モデル」の必要性
プロンプトで人格を付与したAIキャラクターが活躍するためには、そのキャラクターが存在する「世界モデル」が必要である。単に言葉遣いや口調を定義するだけでは、AIキャラクターは会話の背景となる文脈を持たず、実体感の薄い存在にとどまる。キャラクターが「どこにいて」「何を見て」「どこへ向かっているのか」という空間的・状況的なコンテキストがあって初めて、AIは没入感のあるロールプレイを行うことができる。
1.2 豊富かつ動的なコンテキストの必要性
AIキャラクターとの多様な会話を生み出すには、豊富かつ動的なコンテキストが必要である。静的な設定情報だけでは会話のパターンは限られ、ユーザーはすぐに飽きてしまう。会話のたびに変化する状況、移動に伴って変わる風景、到達した場所に応じた話題——こうした動的な要素が会話の幅を広げ、リプレイ性を高める。
1.3 本プロジェクトの目的
本プロジェクト「テイワット移動シミュレーション おともAI版」は、原神の主要ランドマークのネットワークを簡易的に再現し、AIチャットと一体化することを目的とする。これにより：
- AIキャラクターがテイワット大陸を「旅する」体験を提供
- 移動に伴って変化する場所情報を会話のコンテキストとして活用
- ランドマークを起点とした多様な会話トピックを生成
2. 実現手法
2.1 ランドマーク座標の推定とマッピング
taywat_mapper.py により、全体マップ画像とランドマーク表記からランドマークの座標を推定してマッピングする仕組みを構築した。
技術的詳細：
- タイル分割: 高解像度の全体マップを15×15のオーバーラップ付きタイルに分割
- 複数特徴点検出器: SIFT、ORB、AKAZE、BRISKを併用し、堅牢なマッチングを実現
- 色記述子によるフィルタリング: LAB色空間を用いた色類似度で誤マッチングを低減
- OCR処理: EasyOCRで地名テキストを検出し、座標変換行列を用いてグローバル座標に変換
- DuckDuckGo検索による補正: 検出テキストを原神Wikiと照合し、正確な地名に補正
2.2 ランドマーク情報の作成
抽出されたランドマーク情報は landmarks.csv に保存される：
元テキスト,修正テキスト,信頼度,ローカルX,ローカルY,グローバルX,グローバルY
ロマリタイムハーバー,ロマリタイムハーバー,99.60,207.5,577.0,2596,1465
ペトリコール町,ペトリコール町,98.33,928.0,1125.0,2752,15832.3 ネットワーク構造の構築
add_neighborhoods.py により、各ランドマークから距離に基づいて近傍ランドマークを計算し、taywat_landmarks_neighborhoods.csv としてネットワーク構造を作成した。
構造例：
Region,Landmark,X,Y,neighborhood01,neighborhood02,...
スメール,スメールシティ,3096,1945,"ヤザダハ池(SSW,55)","チンワト峡谷(SE,62)",...各ランドマークは最大10個の近傍ランドマーク（方角と距離付き）を持つ。
2.4 移動シミュレーションとAIチャットの統合
作成したネットワーク構造を用いて、ランドマーク間の移動をシミュレーションし、AIチャットと組み合わせることで、ランドマーク情報を起点とした会話を可能にした。
実装機能：
- 地図上のクリックによる移動先選択
- 現在地から目的地への経路計算（近傍ランドマークを経由）
- 移動に伴う現在位置のリアルタイム更新
- 移動完了時のAIチャット自動送信
2.5 RAGによるナレッジ蓄積
LLMのAPIプロキシ（chutes_proxy.py）にChroma DBのRAG（Retrieval-Augmented Generation）を組み込み、ランドマークに関するナレッジを蓄積し、システムが取得してAIに引き渡せるようにしている。
RAGの役割：
- ランドマークの背景知識（ゲーム内情報、設定、豆知識）の検索
- 会話コンテキストに適した情報の動的取得
- AIの応答生成における事実性の向上
仕様書
1. システムアーキテクチャ
┌─────────────────────────────────────────────────────────────────┐
│ ユーザーインターフェース │
│ (teyvat_travel.html) │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────────┐ │
│ │ 地図表示 │ │ チャット │ │ 設定パネル │ │
│ │ (Canvas) │ │ (DOM) │ │ (API URL, Model等) │ │
│ └─────────────┘ └─────────────┘ └─────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ CORSプロキシサーバー │
│ (cors_proxy.py) │
│ - ポート: 8000 │
│ - 機能: クロスオリジンリクエストの処理 │
│ - 動的API URL対応 (X-Target-API-Base-URLヘッダー) │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ APIプロキシサーバー │
│ (chutes_proxy.py) │
│ - ポート: 8080 │
│ - フレームワーク: Flask │
│ - RAG: ChromaDB + sentence-transformers │
│ - エンドポイント: │
│ • /api/chat (Ollama形式) │
│ • /v1/chat/completions (OpenAI形式) │
│ • /v1/models (モデル一覧) │
│ • /api/tags (Ollamaモデル一覧) │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ LLM (外部API) │
│ - OpenAI API互換エンドポイント │
│ - Ollama API互換エンドポイント │
└─────────────────────────────────────────────────────────────────┘2. 技術スタック
2.1 フロントエンド
| 技術 | 用途 |
|---|---|
| HTML5 Canvas | 地図の描画、現在地マーカー、移動アニメーション |
| CSS3 | UIデザイン、アニメーション、レスポンシブレイアウト |
| JavaScript (ES6+) | 非同期通信、DOM操作、状態管理 |
| Fetch API | LLM APIとの通信 |
| AbortSignal.timeout() | APIリクエストのタイムアウト制御 (360秒) |
2.2 バックエンド
| 技術 | 用途 |
|---|---|
| Python 3.x | サーバーサイド処理 |
| Flask | APIプロキシサーバーのフレームワーク |
| ChromaDB | ベクトルデータベース (RAG用) |
| sentence-transformers | テキストのベクトル埋め込み |
| http.client | HTTPリクエスト処理 |
2.3 画像処理・データ抽出
| 技術 | 用途 |
|---|---|
| OpenCV | 画像読み込み、特徴点抽出、ホモグラフィ変換 |
| SIFT/ORB/AKAZE/BRISK | 特徴点検出アルゴリズム |
| FLANN Matcher | 特徴点マッチング |
| EasyOCR | 地名テキストのOCR |
| DuckDuckGo Search | 地名の補正・検証 |
2.4 データ形式
| ファイル | 形式 | 内容 |
|---|---|---|
| taywat_landmarks_neighborhoods.csv | CSV | ランドマーク情報と近傍関係 |
| tiles/*.png | PNG | 分割された地図タイル |
3. 主要コンポーネント
3.1 teyvat_travel.html
地図表示機能：
- 600×600ピクセル固定サイズのCanvas
- タイル画像による地図描画
- 現在地の赤い円形マーカー
- クリックによる移動先指定
チャット機能：
- メッセージ履歴の表示
- ユーザー/AIメッセージの区別
- 自動スクロール
- 移動完了時の自動メッセージ送信
設定機能：
- API URLの動的変更
- モデル名の指定
- システムプロンプトのカスタマイズ
3.2 cors_proxy.py
機能：
- ポート8000で動作
- クロスオリジンリクエストのプロキシ
X-Target-API-Base-URLヘッダーによる動的ルーティング/api/パスのサポート
3.3 chutes_proxy.py
機能：
- ポート8080で動作
- OpenAI形式とOllama形式の両エンドポイントをサポート
- ChromaDBによるRAG実装
- ストリーミング応答のサポート
4. データフロー
1. ユーザーが地図上のランドマークをクリック
↓
2. フロントエンドが近傍ランドマークを探索し移動経路を計算
↓
3. 移動アニメーション実行
↓
4. 移動完了時、現在のランドマーク情報を含むメッセージを生成
↓
5. CORSプロキシ経由でAPIプロキシにリクエスト送信
↓
6. APIプロキシがRAGで関連情報を検索
↓
7. LLM APIにリクエスト送信
↓
8. AIの応答をフロントエンドに返却・表示まとめ・今後の課題
課題1: コンテンツの大幅な拡充
ゲーム性を高めるには、ランドマークにまつわるコンテンツの大幅な拡充が必要である。現在のシステムは移動と会話の基盤を持つが、各ランドマークには「何があるのか」「何が起こるのか」というコンテンツが不足している。具体的には：
- ランドマークごとの詳細な説明文
- イベント、クエスト、発見要素
- アイテム、キャラクター、敵の配置
- 地域固有のストーリー、伝承
課題2: 「面白さ」の設計
システムとして完成しても、人間が「面白い」と感じる仕組みがないとゲームとしては成り立たない。技術的な実装とは別に、以下のゲームデザイン的要素が必要である：
- プレイヤーの動機付け（何のために旅するのか）
- 報酬システム（移動や会話の成果）
- 難易度とチャレンジ（単なる移動以上の要素）
- サプライズと発見（予期せぬ出来事）
- 感情的な没入（キャラクターへの愛着）
本書は「テイワット移動シミュレーション おともAI版」の企画・仕様を記述したものであり、プロジェクトの方向性と技術的基盤を定義する。