Interview Editor - Phase 0

リアルタイムインタビューエディター（ローカル実験版）

📋 概要

Phase 0は、3パネルエディタ（原稿・文字起こし・メモ）の基本機能とWebSocketでのリアルタイム同期を検証することを目的としたローカル開発版です。

主な機能

• ✅ 3パネルレイアウト（原稿・文字起こし・メモ）
• ✅ WebSocketによるリアルタイム双方向通信
• ✅ セッション管理（作成・一覧・編集）
• ✅ JSON形式でのデータ永続化
• ✅ Mock Transcriberによるダミー文字起こし（5秒ごと）

🏗️ アーキテクチャ

Frontend (Next.js)          Backend (FastAPI)
    localhost:3000              localhost:8000
         |                           |
         |---- WebSocket ----→  WebSocket Handler
         |                           ↓
         |                    Session Manager
         |                           ↓
         |                    JSON Files (data/sessions/)

🚀 セットアップ

前提条件

• Python 3.9以上
• Node.js 18以上

1. バックエンドのセットアップ

cd backend

# 仮想環境作成
python -m venv venv

# 仮想環境の有効化（Mac/Linux）
source venv/bin/activate

# 仮想環境の有効化（Windows）
venv\Scripts\activate

# 依存パッケージのインストール
pip install -r requirements.txt

# サーバー起動
python main.py

ブラウザで http://localhost:8000 にアクセスし、以下が表示されればOK:

{
  "status": "ok",
  "message": "Interview Editor API",
  "version": "0.1.0 (Phase 0)"
}

2. フロントエンドのセットアップ

cd frontend

# 依存パッケージのインストール
npm install

# 開発サーバー起動
npm run dev

ブラウザで http://localhost:3000 にアクセス

📖 使い方

1. セッション作成

1. ホームページで「新規セッション作成」をクリック
2. タイトルを入力（例: "テストインタビュー"）
3. エディタページに遷移

2. 録音開始

1. エディタページで「▶️ 録音開始」をクリック
2. 5秒ごとにダミー文字起こしが自動追加される（中央パネル）

3. 原稿編集

1. 左パネルでMarkdown形式の原稿を編集
2. 500ms後に自動保存される
3. 他のクライアントにもリアルタイム同期

4. メモ追加

1. 右パネルでメモを追加
2. 全クライアントに即座に反映

🗂️ プロジェクト構造

interviewdashboard/
├── backend/
│   ├── main.py                 # FastAPIアプリケーション
│   ├── models.py               # Pydanticモデル定義
│   ├── session_manager.py      # セッション管理
│   ├── websocket_handler.py    # WebSocket処理
│   ├── mock_transcriber.py     # ダミー文字起こし
│   ├── requirements.txt        # 依存パッケージ
│   └── data/sessions/          # セッションデータ（JSON）
│
├── frontend/
│   ├── app/
│   │   ├── page.tsx            # ホームページ
│   │   ├── layout.tsx          # レイアウト
│   │   ├── globals.css         # グローバルスタイル
│   │   └── editor/[sessionId]/
│   │       └── page.tsx        # エディタページ
│   ├── components/
│   │   ├── ArticlePanel.tsx    # 原稿パネル
│   │   ├── TranscriptPanel.tsx # 文字起こしパネル
│   │   └── NotesPanel.tsx      # メモパネル
│   ├── lib/
│   │   └── websocket.ts        # WebSocketクライアント
│   ├── types/
│   │   └── index.ts            # 型定義
│   └── package.json
│
└── docs/
    └── 04_phase0.md            # Phase 0設計ドキュメント

🧪 テスト方法

REST APIのテスト

# セッション一覧
curl http://localhost:8000/api/sessions

# セッション作成
curl -X POST http://localhost:8000/api/sessions \
  -H "Content-Type: application/json" \
  -d '{"title": "テストセッション"}'

# セッション取得
curl http://localhost:8000/api/sessions/session_20250129_143052

WebSocketのテスト

# wscatのインストール
npm install -g wscat

# WebSocket接続
wscat -c ws://localhost:8000/ws/session_20250129_143052

# メッセージ送信
{"type": "edit_article", "data": {"text": "# テスト記事"}}
{"type": "add_note", "data": {"text": "テストメモ"}}

マルチクライアントテスト

1. 2つのブラウザタブで同じセッションを開く
2. タブAで原稿を編集 → タブBに即座に反映
3. タブBでメモを追加 → タブAに即座に反映

📊 データモデル

InterviewSession

{
  session_id: "session_20250129_143052",
  title: "スタートアップCEOインタビュー",
  created_at: "2025-01-29T14:30:52Z",
  status: "recording",
  transcript: Utterance[],
  article_draft: ArticleDraft,
  notes: Note[]
}

Utterance（発話）

{
  utterance_id: "utterance_20250129_143055_123456",
  speaker_id: "田中",
  speaker_name: "田中",
  timestamp: "2025-01-29T14:30:55Z",
  text: "本日はお時間いただきありがとうございます。"
}

Note（メモ）

{
  note_id: "note_20250129_143100_789012",
  timestamp: "2025-01-29T14:31:00Z",
  text: "後で強調する部分"
}

🔧 トラブルシューティング

バックエンドが起動しない

# ポート8000が使用中の場合
lsof -ti:8000 | xargs kill -9

# 再起動
cd backend
python main.py

フロントエンドが起動しない

# node_modulesを削除して再インストール
rm -rf node_modules package-lock.json
npm install
npm run dev

WebSocketが接続できない

1. バックエンドが起動しているか確認
2. ブラウザのコンソールでエラーを確認
3. セッションIDが正しいか確認

📝 次のステップ（Phase 1）

Phase 0が完成したら、以下の機能を追加します:

• Discord BOT統合
• SeaVoiceによる実際の文字起こし
• Gemini APIによる質問提案
• 3分ごとの自動要約
• セッションキー認証
• Render + Vercelへのデプロイ

詳細は docs/IMPLEMENTATION.md を参照してください。

📄 ライセンス

MIT License

🙋 サポート

質問や問題がある場合は、GitHubのIssuesで報告してください。