Calliope：AI YouTube動画ブログ変換エンジン

技術スタック:
ReactTypeScriptFastAPICeleryPostgreSQLLangChainRedisTailwind CSS

YouTube動画の字幕を抽出し、SERP（検索結果）コンテキストで補強しながら、複数モデルのLLMを組み合わせて即公開可能なブログ記事をリアルタイム生成するAIプラットフォーム

Calliope：AI YouTube動画ブログ変換エンジン

プロジェクト概要

Calliopeは、YouTube動画を即公開可能なブログ記事に変換するために構築されたコンテンツ再利用プラットフォームです。クリエイターやライター、マーケターが動画を手作業で書き起こして記事を一から執筆する代わりに、Calliopeがパイプライン全体を自動化します。動画字幕の取得、タイムスタンプの解析、検索コンテキストによるプロンプトの補強、構造化されたブログ下書きのリアルタイムストリーミングを行います。

私はフルスタック開発者としてエンドツーエンドで本アプリケーションを構築し、ブラウザUI、FastAPI RESTエンドポイント、Celeryバックグラウンドワーカー、マルチモデルLLMチェーン、管理者向けトークン分析機能を設計しました。

プロダクトへのリンク: Calliope

メインダッシュボードとナビゲーション

使用技術スタック

flowchart LR
    subgraph Client ["フロントエンド"]
        UI["React 19 / TypeScript UI"]
        Editor["Markdown エディタ & ストリーム"]
    end

    subgraph Backend ["FastAPI & ワーカー"]
        API["FastAPI REST API"]
        Worker["Celery バックグラウンドワーカー"]
        YT["YouTube 字幕パイプライン"]
        SERP["SERP コンテキストエンジン"]
        LLM["LangChain オーケストレーション"]
    end

    subgraph Storage ["データ & メッセージング"]
        Redis[("Redis ブローカー")]
        DB[("PostgreSQL")]
    end

    UI <-->|HTTP / JSON| API
    API -->|タスクエンキュー| Redis
    Redis --> Worker
    Worker --> YT
    Worker --> SERP
    Worker --> LLM
    Worker <--> DB
    API <--> DB
sequenceDiagram
    actor User
    participant UI as React UI
    participant API as FastAPI
    participant DB as PostgreSQL
    participant YT as YouTube
    participant Redis as Redis
    participant Worker as Celery Worker
    participant LLM as LLM Provider
    participant SERP as SERP API

    User->>UI: YouTube URLを貼り付け
    UI->>API: POST /videos/transcribe
    API->>DB: yt_id でブログを検索

    alt トランスクリプトが未キャッシュの場合
        API->>YT: yt-dlp 経由で字幕抽出
        YT-->>API: 字幕トラック
        opt yt-dlp が失敗した場合
            API->>YT: Google YouTube Data API でフォールバック
            YT-->>API: トランスクリプトテキスト
        end
        API->>DB: Blog + トランスクリプトメタデータを更新保存
    end

    API->>DB: UserBlog ドラフトを作成・紐付け
    API->>Redis: generate_blog タスクをエンキュー
    API-->>UI: draft_id + ステータス

    loop 2秒ごとのポーリング
        UI->>API: GET /drafts/{id}
        API->>DB: ドラフト内容 + ステータスを取得
        API-->>UI: 一部または最終コンテンツ
    end

    Redis->>Worker: generate_blog をデキュー
    Worker->>DB: Blog からトランスクリプトを読み込み

    Worker->>LLM: コンテンツタイプとトピックを分類
    LLM-->>Worker: content_type, topic

    Worker->>LLM: ナレッジドキュメントを抽出
    LLM-->>Worker: 構造化ナレッジドキュメント

    opt SERP が有効な場合
        Worker->>SERP: トピックキーワードを調査
        SERP-->>Worker: 上位ランキングのスニペット
    end

    Worker->>LLM: ブログ下書きをストリーミング
    loop トークンストリーム
        LLM-->>Worker: トークンチャンク
        Worker->>Redis: ステータスとトークンイベントを発行
        Worker->>DB: 一部コンテンツをフラッシュ
    end

    Worker->>DB: 最終ドラフト + トークン使用量を保存
    Worker->>Redis: 完了イベントを発行
  • フロントエンド: React 19, TypeScript, Vite, Tailwind CSS v4, Base UI / Shadcn, Recharts, Zustand
  • バックエンド: Python, FastAPI, Celery, SQLAlchemy, Alembic, Pydantic
  • AIオーケストレーション: LangChain, LangChain-Google-GenAI, LangChain-OpenAI (DeepSeek, Gemini, GPT モデルをサポート)
  • 動画 & SERP 処理: yt-dlp, YouTube Data API v3, SerpApi, DataForSEO
  • ストレージ & インフラ: PostgreSQL, Redis, Docker Compose
  • 認証 & サービス: Google OAuth2, JWT セッション, Resend メール配信, FingerprintJS 訪問者追跡

プロダクトの背景

長尺のYouTube動画には豊富な専門知識が含まれていますが、話し言葉の動画コンテンツを検索上位を狙える読みやすい記事に仕立てるには、文字起こし、構成作成、編集に何時間もかかります。生のトランスクリプトをそのまま出力するだけでは、話し言葉特有の雑多さ、見出しの欠如、検索意図との不一致により失敗します。

Calliopeは音声コンテンツと構造化された出版物をつなぐために開発されました。字幕を抽出し、会話のフィラー（相づち等）を除去し、核心となるトピックの切り口を特定し、有効化されている場合は検索上位結果と照合して、タイトル、見出し、要点、フロントメタデータ（Frontmatter）を含む記事を生成します。

実装内容

ブログドラフトエディタ

  • YouTube抽出エンジン: 最初に yt-dlp で字幕トラックを取得し、スクレイピングに失敗した場合は Google YouTube Data API にフォールバックする2層構造の字幕パーサー
  • 非同期タスクパイプライン: Web API リクエストをブロックすることなく、長時間のトランスクリプト処理とLLM合成を処理するCeleryおよびRedisワーカーキュー
  • マルチモデルLLMオーケストレーション: DeepSeek v4 Pro、Google Gemini 2.5/3.0、OpenAI GPT-4o などのモデルをサポートする柔軟な LangChain 抽象化
  • SERPリサーチ統合: SerpApi および DataForSEO を介したオプショナルの Google SERP 検索機能により、競合の切り口や検索者の意図をプロンプトに注入
  • インタラクティブMarkdownエディタ: リアルタイムの下書きストリーミング、Markdownプレビュー、ハイライトメモ、カスタムテーマ、およびフロントメタデータ（タイトル、メタ記述、OG画像、タグ）を含むワンクリックコピー機能
  • 履歴 & 保存ドラフト: ドラフト履歴、タイトル検索、ピン留め機能、元動画への属性表示を備えたユーザーワークスペース
  • 管理者分析ダッシュボード: ユーザー登録数、累積成長、LLMプロバイダーごとの正確なプロンプト/完了トークン消費量を追跡するリアルタイムメトリクス

主な技術的決定

1. 同期APIルートから字幕抽出をデカップリング

40分の動画から字幕を取得し、2,000文字の記事を生成するには数十秒かかります。これを同期HTTPハンドラー内で実行するとタイムアウトが発生し、サーバーのスループットが低下します。RedisでバックアップされたCeleryワーカーキューにジョブを投入することで、APIの応答性を維持しながら中間タスク状態をPostgreSQLに保存します。

2. 堅牢な字幕フォールバックチェーンの実装

YouTubeの字幕エンドポイントは頻繁に変更されたりレート制限がかかったりします。Calliopeは堅牢なパイプラインを使用しています。まず yt-dlp で字幕トラックを抽出し、失敗した場合は Google YouTube Data API にフォールバックします。この順序により、主経路の高速性と信頼性を保ちつつ、スクレイピングが壊れた際のエッジケースも公式APIでカバーできます。

3. SERPの意図コンテキストによるプロンプトの補強

動画のトランスクリプトだけでは、読者が期待するキー用語や関連質問を見落とす可能性があります。SERPリサーチが有効な場合、Calliopeは動画の主要トピックに関するGoogle検索上位結果をクエリし、それらの検索スニペットをオプションのコンテキストとしてLLMに渡します。これにより、動画のコアコンテンツから脱線することなく、検索者の意図に合致した記事を生成できます。

4. リクエストごとのトークン使用量とコスト境界の追跡

運用コストを予測可能に保つため、データベースにはすべてのLLM呼び出しについてモデルプロバイダーのメタデータとともに正確な入力・出力トークン数を記録します。管理者ダッシュボードはこれらのメトリクスを集計し、モデルコストとユーザーアクティビティを即座に可視化します。

成果

Calliopeは calliope.ekky.dev でライブデプロイされています。30分以上のYouTube動画を30秒未満で1,500文字以上の整形されたブログ記事に変換し、クリエイターやマーケターにマルチチャネルなコンテンツ展開の手段を提供しています。

得られた知見

  • サードパーティの文字起こしAPIは壊れやすいため、yt-dlp を主要な抽出パスとし、スクレイピングが失敗した際のフォールバックとして Google YouTube Data API を配置するのが最適です。
  • 動画のトランスクリプトデータと検索上位結果を組み合わせることで、トランスクリプト単体よりも格段に包括的な記事が作成できます。
  • トークンメトリクスの管理者分析は、トラフィックの増大に伴う透明性の高いコスト追跡を保証するため、初日からスキーマに組み込んで設計すべきです。

添付資料

ランディングページ

Calliope ランディングページ

ログイン画面

ログイン画面

アカウント作成画面

アカウント作成画面

メインダッシュボードとナビゲーション

メインダッシュボードとナビゲーション

生成履歴

生成履歴

管理者分析とトークンメトリクス

管理者分析とトークンメトリクス

トランスクリプトとハイライトワークスペース

トランスクリプトとハイライトワークスペース

ブログドラフトエディタ

ブログドラフトエディタ

ポートフォリオ一覧に戻る