deepwiki-open出力結果

20250518-deepwiki-open.md

Wiki Documentation for

Generated on: 2025-05-18 11:01:28

Table of Contents

• DeepWiki-Openの概要
• システムアーキテクチャ
• データフロー
• APIエンドポイント
• RAG（検索拡張生成）の実装
• 主要なフロントエンドコンポーネント
• Mermaidダイアグラム
• モデルプロバイダー
• カスタムモデルの選択
• デプロイメント
• カスタマイズオプション
• トラブルシューティング

DeepWiki-Openの概要

Related Pages

Related topics: システムアーキテクチャ

Relevant source files

The following files were used as context for generating this wiki page:

• README.md
• README.ja.md
• README.zh.md
• README.kr.md
• api/README.md

DeepWiki-Openの概要

DeepWiki-Openは、GitHub、GitLab、Bitbucketのリポジトリから美しくインタラクティブなWikiを自動的に作成するツールです。リポジトリ名を入力するだけで、コード構造の分析、包括的なドキュメントの生成、視覚的な図の作成を行い、それらすべてを簡単にナビゲートできるWikiに整理します。AIを活用したスマートな分析と、Mermaid記法による美しい図表により、コードの理解を深めることができます。 特徴

特徴

DeepWiki-Openは、以下の特徴を備えています。

• 即時ドキュメント生成: GitHub、GitLab、Bitbucketのリポジトリを数秒でWikiに変換します。 README.md, README.ja.md, README.zh.md, README.kr.md
• プライベートリポジトリ対応: 個人アクセストークンを使用して、プライベートリポジトリに安全にアクセスできます。 README.md, README.ja.md, README.zh.md, README.kr.md
• スマート分析: AIを活用してコード構造と関係を理解します。 README.md, README.ja.md, README.zh.md, README.kr.md
• 美しい図表: アーキテクチャとデータフローを視覚化するMermaid記法による図を自動生成します。 README.md, README.ja.md, README.zh.md, README.kr.md
• 簡単なナビゲーション: シンプルで直感的なインターフェースでWikiを探索できます。 README.md, README.ja.md, README.zh.md, README.kr.md
• 質問機能: RAG（Retrieval Augmented Generation）を活用したAIを使用してリポジトリとチャットし、正確な回答を得られます。 README.md, README.ja.md, README.zh.md, README.kr.md
• 詳細調査: 複雑なトピックを徹底的に調査する多段階研究プロセスを提供します。 README.md, README.ja.md, README.zh.md, README.kr.md
• 複数のモデルプロバイダー: Google Gemini、OpenAI、OpenRouter、ローカルOllamaモデルをサポートします。 README.md, README.ja.md, README.zh.md, README.kr.md

仕組み

DeepWiki-Openは、AIを使用して以下の手順でWikiを生成します。 README.md, README.ja.md, README.zh.md, README.kr.md

1. GitHub、GitLab、またはBitbucketリポジトリをクローンして分析します（トークン認証によるプライベートリポジトリを含む）。
2. スマート検索のためのコードの埋め込みを作成します。
3. コンテキスト対応AIでドキュメントを生成します（Google Gemini、OpenAI、OpenRouter、またはローカルOllamaモデルを使用）。
4. コードの関係を説明する視覚的な図を作成します。
5. すべてを構造化されたWikiに整理します。
6. 質問機能を通じてリポジトリとのインテリジェントなQ&Aを可能にします。
7. 詳細調査機能で深い研究能力を提供します。

graph TD
    A[ユーザーがGitHub/GitLab/Bitbucketリポジトリを入力] --> AA{プライベートリポジトリ?}
    AA -->|はい| AB[アクセストークンを追加]
    AA -->|いいえ| B[リポジトリをクローン]
    AB --> B
    B --> C[コード構造を分析]
    C --> D[コード埋め込みを作成]

    D --> M{モデルプロバイダーを選択}
    M -->|Google Gemini| E1[Geminiで生成]
    M -->|OpenAI| E2[OpenAIで生成]
    M -->|OpenRouter| E3[OpenRouterで生成]
    M -->|ローカルOllama| E4[Ollamaで生成]

    E1 --> E[ドキュメントを生成]
    E2 --> E
    E3 --> E
    E4 --> E

    D --> F[視覚的な図を作成]
    E --> G[Wikiとして整理]
    F --> G
    G --> H[インタラクティブなDeepWiki]

    classDef process stroke-width:2px;
    classDef data stroke-width:2px;
    classDef result stroke-width:2px;
    classDef decision stroke-width:2px;

    class A,D data;
    class AA,M decision;
    class B,C,E,F,G,AB,E1,E2,E3,E4 process;
    class H result;

Loading

この図は、DeepWiki-Openの全体的なワークフローを示しています。ユーザーがリポジトリURLを入力するところから始まり、AIによる分析とドキュメント生成を経て、最終的にインタラクティブなWikiが作成されるまでの流れを表しています。 README.md, README.ja.md, README.zh.md, README.kr.md

プロジェクト構造

DeepWiki-Openのプロジェクト構造は以下の通りです。 README.md, README.ja.md, README.zh.md, README.kr.md

deepwiki/
├── api/                  # バックエンドAPIサーバー
│   ├── main.py           # APIエントリーポイント
│   ├── api.py            # FastAPI実装
│   ├── rag.py            # 検索拡張生成
│   ├── data_pipeline.py  # データ処理ユーティリティ
│   └── requirements.txt  # Python依存関係
│
├── src/                  # フロントエンドNext.jsアプリ
│   ├── app/              # Next.jsアプリディレクトリ
│   │   └── page.tsx      # メインアプリケーションページ
│   └── components/       # Reactコンポーネント
│       └── Mermaid.tsx   # Mermaid図レンダラー
│
├── public/               # 静的アセット
├── package.json          # JavaScript依存関係
└── .env                  # 環境変数（作成する必要あり）

APIサーバー詳細

APIサーバーは、リポジトリのクローンとインデックス作成、RAG（Retrieval Augmented Generation）、ストリーミングチャット補完を提供します。 api/README.md

まとめ

DeepWiki-Openは、AIの力を活用して、コードリポジトリのドキュメント作成を自動化し、理解を深めるための強力なツールです。簡単なセットアップと豊富な機能を備えており、開発者や技術者にとって非常に役立ちます。 README.md, README.ja.md, README.zh.md, README.kr.md

---

システムアーキテクチャ

Related Pages

Related topics: データフロー, APIエンドポイント, 主要なフロントエンドコンポーネント

Relevant source files

The following files were used as context for generating this wiki page:

• api/api.py
• src/app/[owner]/[repo]/page.tsx
• src/messages/en.json
• README.md
• README.ja.md
• src/messages/zh.json

システムアーキテクチャ

DeepWiki-Openプロジェクトのシステムアーキテクチャは、フロントエンドとバックエンドで構成され、リポジトリの分析、ドキュメントの生成、およびインタラクティブなWikiの作成を可能にします。フロントエンドはNext.jsで構築され、バックエンドはFastAPIを使用して構築されています。このアーキテクチャは、さまざまなモデルプロバイダー（Google Gemini、OpenAI、OpenRouter、Ollama）をサポートし、プライベートリポジトリへの安全なアクセスを提供します。

フロントエンドアーキテクチャ

フロントエンドは、Reactコンポーネント、Next.jsルーティング、およびUI要素で構成されています。主なコンポーネントは次のとおりです。

• src/app/[owner]/[repo]/page.tsx: メインアプリケーションページで、リポジトリ情報の入力、Wikiの生成、および結果の表示を処理します。
• src/components/Markdown.tsx: Markdownコンテンツをレンダリングします。
• src/components/Ask.tsx: RAG（Retrieval-Augmented Generation）を利用したAIとの対話機能を提供します。
• src/components/WikiTreeView.tsx: 生成されたWikiの構造をツリー形式で表示します。

graph TD
    A[page.tsx] --> B(Markdown.tsx);
    A --> C(Ask.tsx);
    A --> D(WikiTreeView.tsx);
    style A fill:#f9f,stroke:#333,stroke-width:2px
    style B fill:#ccf,stroke:#333,stroke-width:2px
    style C fill:#ccf,stroke:#333,stroke-width:2px
    style D fill:#ccf,stroke:#333,stroke-width:2px

Loading

フロントエンドは、リポジトリURL、APIキー、モデルオプションなどのユーザー入力を収集し、APIリクエストをバックエンドに送信してWikiを生成します。生成されたWikiコンテンツは、Markdownコンポーネントを使用して表示され、WikiTreeViewコンポーネントを使用してナビゲートできます。Sources: src/app/[owner]/[repo]/page.tsx, src/components/Markdown.tsx, src/components/Ask.tsx, src/components/WikiTreeView.tsx

バックエンドアーキテクチャ

バックエンドは、FastAPIを使用して構築されたAPIサーバーで構成されています。主なモジュールは次のとおりです。

• api/main.py: APIのエントリポイントです。
• api/api.py: FastAPIの実装が含まれています。リポジトリの分析、ドキュメントの生成、およびWiki構造の決定などのAPIエンドポイントを定義します。
• api/rag.py: 検索拡張生成（RAG）の実装が含まれています。
• api/data_pipeline.py: データ処理ユーティリティが含まれています。

graph TD
    A[main.py] --> B(api.py);
    B --> C(rag.py);
    B --> D(data_pipeline.py);
    style A fill:#f9f,stroke:#333,stroke-width:2px
    style B fill:#ccf,stroke:#333,stroke-width:2px
    style C fill:#ccf,stroke:#333,stroke-width:2px
    style D fill:#ccf,stroke:#333,stroke-width:2px

Loading

バックエンドは、フロントエンドからのAPIリクエストを処理し、リポジトリのクローン、コード構造の分析、ドキュメントの生成、およびWiki構造の整理を行います。AIモデル（Google Gemini、OpenAIなど）を使用してドキュメントを生成し、Mermaidダイアグラムを作成してコードの関係を視覚化します。生成されたWikiコンテンツは、フロントエンドに返送され、表示されます。Sources: api/main.py, api/api.py, api/rag.py, api/data_pipeline.py

データフロー

データフローは、フロントエンドからバックエンドへのAPIリクエスト、バックエンドでの処理、およびフロントエンドへの結果の返送で構成されています。

sequenceDiagram
    participant FE as フロントエンド
    participant BE as バックエンド
    participant AI as AIモデル

    FE->>BE: Wiki生成リクエスト
    activate BE
    BE->>BE: リポジトリをクローン
    BE->>BE: コード構造を分析
    BE->>AI: ドキュメント生成
    activate AI
    AI-->>BE: 生成されたドキュメント
    deactivate AI
    BE->>BE: Wiki構造を整理
    BE-->>FE: Wikiコンテンツ
    deactivate BE
    FE->>FE: Wikiコンテンツを表示

Loading

1. ユーザーは、フロントエンドでリポジトリURL、APIキー、およびモデルオプションを入力します。
2. フロントエンドは、APIリクエストをバックエンドに送信します。
3. バックエンドは、リポジトリをクローンし、コード構造を分析します。
4. バックエンドは、AIモデルを使用してドキュメントを生成します。
5. バックエンドは、Wiki構造を整理し、Wikiコンテンツをフロントエンドに返送します。
6. フロントエンドは、Wikiコンテンツを表示します。Sources: src/app/[owner]/[repo]/page.tsx, api/api.py

まとめ

DeepWiki-Openのシステムアーキテクチャは、フロントエンドとバックエンドで構成され、リポジトリの分析、ドキュメントの生成、およびインタラクティブなWikiの作成を可能にします。このアーキテクチャは、さまざまなモデルプロバイダーをサポートし、プライベートリポジトリへの安全なアクセスを提供します。データフローは、フロントエンドからバックエンドへのAPIリクエスト、バックエンドでの処理、およびフロントエンドへの結果の返送で構成されています。

---

データフロー

Related Pages

Related topics: システムアーキテクチャ, RAG（検索拡張生成）の実装

Relevant source files

The following files were used as context for generating this wiki page:

• api/data_pipeline.py
• api/rag.py
• api/api.py
• api/main.py
• README.md

データフロー

DeepWikiプロジェクトにおけるデータフローは、リポジトリの分析からユーザーへの情報の提供まで、一連の処理段階を経て行われます。このプロセスは、リポジトリのクローン、コードの解析、埋め込みの生成、ドキュメントの生成、そして最終的なWikiの構築を含む複数のステップで構成されています。本ページでは、これらのステップを詳細に解説し、各段階で使用される主要なコンポーネントとデータ構造を明らかにします。

リポジトリのクローンと解析

データフローは、ユーザーが提供するGitHub、GitLab、またはBitbucketのリポジトリURLから始まります。

1. リポジトリのURLの受付: ユーザーは、DeepWikiのインターフェースを通じてリポジトリのURLを入力します。Sources: api/api.py
2. リポジトリのクローン: バックエンドは、指定されたURLからリポジトリをローカル環境にクローンします。プライベートリポジトリの場合、適切なアクセストークンが使用されます。Sources: api/api.py
3. コード構造の解析: クローンされたリポジトリのコード構造が解析され、ファイル間の関係や依存関係が特定されます。Sources: api/data_pipeline.py

コード埋め込みの生成

解析されたコード構造を基に、コードの埋め込みが生成されます。これは、コードの意味的な情報を数値ベクトルとして表現するプロセスです。

1. コードの分割: リポジトリ内のコードは、意味のあるチャンクに分割されます。Sources: api/data_pipeline.py
2. 埋め込みの生成: 分割されたコードチャンクごとに、OpenAIなどのモデルを使用して埋め込みが生成されます。これらの埋め込みは、コードのセマンティックな意味を捉え、類似性検索を可能にします。Sources: api/rag.py
3. ベクターデータベースへの保存: 生成された埋め込みは、Chromaなどのベクターデータベースに保存されます。これにより、高速な類似性検索が可能になり、RAG（Retrieval Augmented Generation）パイプラインでの利用が容易になります。Sources: api/rag.py

ドキュメントの生成

コード埋め込みが生成された後、AIモデルを使用してドキュメントが生成されます。

1. コンテキストの取得: ユーザーの質問や要求に応じて、ベクターデータベースから関連するコードチャンクが検索されます。これにより、質問に対するコンテキストが提供されます。Sources: api/rag.py
2. AIモデルによるドキュメント生成: 取得されたコンテキストとユーザーの質問を基に、Google Gemini、OpenAI、OpenRouter、またはローカルのOllamaモデルなどのAIモデルを使用してドキュメントが生成されます。Sources: api/rag.py
3. ストリーミング応答: 生成されたドキュメントは、ストリーミング形式でユーザーに提供されます。これにより、リアルタイムなインタラクションが可能になります。Sources: api/api.py

graph TD
    A[リポジトリURLの受付] --> B[リポジトリのクローン];
    B --> C[コード構造の解析];
    C --> D[コードの分割];
    D --> E[埋め込みの生成];
    E --> F[ベクターDBへの保存];
    F --> G[コンテキストの取得];
    G --> H[AIモデルによるドキュメント生成];
    H --> I[ストリーミング応答];

Loading

この図は、DeepWikiにおけるデータフローの主要なステップを示しています。各ステップは、前のステップの結果を受け取り、次のステップに渡すことで、リポジトリの分析からドキュメントの生成までの一連の処理を完了します。

RAG（Retrieval Augmented Generation）パイプライン

RAGパイプラインは、DeepWikiの中核となる機能であり、コンテキストに基づいた正確な回答を提供するために使用されます。

1. 質問の受付: ユーザーからの質問がDeepWikiのインターフェースを通じて受け付けられます。Sources: api/rag.py
2. 関連コードの検索: 質問に関連するコードチャンクが、ベクターデータベースから検索されます。この検索は、質問の埋め込みとコードチャンクの埋め込みとの類似性に基づいて行われます。Sources: api/rag.py
3. コンテキストの生成: 検索されたコードチャンクは、質問に対するコンテキストとして使用されます。これにより、AIモデルは、リポジトリの具体的なコードに基づいて回答を生成できます。Sources: api/rag.py
4. 回答の生成: コンテキストと質問を基に、AIモデルが回答を生成します。この回答は、リポジトリのコードとユーザーの質問の両方に基づいており、より正確でコンテキストに即した情報を提供します。Sources: api/rag.py

# api/rag.py
def get_response(repo_id: str, query: str, model_provider: str, model_name: str, token: str = None):
    """
    Retrieves a response to a given query using Retrieval Augmented Generation (RAG).

    Args:
        repo_id (str): The ID of the repository to query.
        query (str): The query to answer.
        model_provider (str): The model provider to use (e.g., "google", "openai").
        model_name (str): The name of the model to use (e.g., "gemini-1.5-pro", "gpt-4").
        token (str, optional): The API token for the model provider, if required. Defaults to None.

    Returns:
        str: The response to the query.
    """
    # Implementation details for RAG pipeline
    pass

このコードスニペットは、RAGパイプラインの主要な関数を示しています。この関数は、リポジトリID、質問、モデルプロバイダー、モデル名、およびAPIトークンを受け取り、質問に対する回答を生成します。Sources: api/rag.py

まとめ

DeepWikiのデータフローは、リポジトリのクローンからドキュメントの生成まで、一連の複雑な処理段階を経て行われます。各段階は、AIモデルとベクターデータベースを活用して、コンテキストに基づいた正確な情報を提供します。RAGパイプラインは、このデータフローの中核をなし、ユーザーの質問に対するインテリジェントな回答を可能にします。

---

APIエンドポイント

Related Pages

Related topics: システムアーキテクチャ

Relevant source files

The following files were used as context for generating this wiki page:

• api/api.py
• api/main.py
• api/rag.py
• api/data_pipeline.py
• api/README.md

APIエンドポイント

DeepWiki-OpenプロジェクトのAPIエンドポイントは、リポジトリの分析、ドキュメントの生成、およびユーザーとのインタラクションを可能にする一連の機能を提供します。これらのエンドポイントは、FastAPIフレームワークを使用して実装されており、効率的で標準化された方法でアクセスできます。

リポジトリ関連エンドポイント

リポジトリのクローンとインデックス作成

このAPIは、指定されたGitHub、GitLab、またはBitbucketリポジトリをクローンし、そのコンテンツをインデックス化する機能を提供します。

/api/clone_repo

• メソッド: POST

• 説明: 指定されたリポジトリURLをクローンし、そのコンテンツのインデックスを作成します。

• リクエストボディ:

  {
    "repo_url": "リポジトリのURL"
  }

• レスポンス:

  {
    "message": "リポジトリのクローンとインデックス作成が開始されました"
  }

• 詳細: このエンドポイントは、リポジトリのコンテンツをローカルにクローンし、OpenAIを使用してファイルの埋め込みを作成し、その埋め込みをローカルデータベースに保存します。これにより、後続の質問応答のためのスマートな検索が可能になります。 api/main.py:26-30, api/api.py:25-31, api/README.md

検索拡張生成 (RAG)

このAPIは、リポジトリのコンテンツに基づいて質問に答えるために、検索拡張生成（RAG）を使用します。

/api/chat/stream

• メソッド: POST

• 説明: ユーザーの質問に基づいて、最も関連性の高いコードスニペットを検索し、そのコンテキストを使用してAIが応答を生成します。応答はリアルタイムでストリーミングされます。

• リクエストボディ:

  {
    "repo_url": "リポジトリのURL",
    "question": "質問"
  }

• レスポンス: ストリーミングされたテキストデータ

• 詳細: このエンドポイントは、ユーザーの質問に基づいて、最も関連性の高いコードスニペットを検索し、そのコンテキストを使用してAIが応答を生成します。応答はリアルタイムでストリーミングされます。 api/rag.py, api/api.py:55-61, api/README.md

Wikiエクスポート

/export/wiki

• メソッド: POST

• 説明: 生成されたWikiコンテンツを特定形式でエクスポートします。

• リクエストボディ:

  {
    "repo_url": "リポジトリのURL",
    "type": "リポジトリの種類",
    "pages": [
      {
        "title": "ページタイトル",
        "content": "ページコンテンツ"
      }
    ],
    "format": "エクスポート形式"
  }

• レスポンス: 指定された形式でエクスポートされたWikiコンテンツを含むファイル。

• 詳細: このエンドポイントは、生成されたWikiコンテンツを特定形式でエクスポートします。 src/app/[owner]/[repo]/page.tsx

APIサーバーの詳細

APIサーバーは、リポジトリのクローンとインデックス作成、RAG（検索拡張生成）、ストリーミングチャット補完を提供します。APIサーバーはFastAPIを使用して構築されています。 api/main.py, api/api.py, api/README.md

sequenceDiagram
    participant User
    participant Frontend
    participant API Server
    participant LLM

    User->>Frontend: リポジトリURLと質問を送信
    activate Frontend
    Frontend->>APIServer: リクエストを送信 (repo_url, question)
    activate APIServer
    APIServer->>APIServer: リポジトリをクローン (初回のみ)
    APIServer->>APIServer: コードスニペットを検索
    APIServer->>LLM: コンテキストと質問を送信
    activate LLM
    LLM-->>APIServer: 応答を生成 (ストリーミング)
    deactivate LLM
    APIServer-->>Frontend: 応答をストリーミング
    deactivate APIServer
    Frontend-->>User: 応答を表示
    deactivate Frontend

Loading

この図は、ユーザーがリポジトリURLと質問を送信し、フロントエンドがAPIサーバーにリクエストを送信し、APIサーバーがリポジトリをクローンしてコードスニペットを検索し、LLMが応答を生成し、APIサーバーが応答をフロントエンドにストリーミングし、フロントエンドが応答をユーザーに表示するシーケンスを示しています。

環境変数

APIサーバーは、以下の環境変数を使用します。 api/README.md

• GOOGLE_API_KEY: Google Geminiモデルに必要なGoogle APIキー
• OPENAI_API_KEY: OpenAIモデルに必要なOpenAI APIキー
• OPENROUTER_API_KEY: OpenRouterモデルに必要なOpenRouter APIキー
• OPENAI_API_BASE: カスタムOpenAI APIエンドポイント用のオプション設定

まとめ

DeepWiki-OpenプロジェクトのAPIエンドポイントは、リポジトリの分析、ドキュメントの生成、およびユーザーとのインタラクションを可能にする一連の機能を提供します。これらのエンドポイントは、FastAPIフレームワークを使用して実装されており、効率的で標準化された方法でアクセスできます。

---

RAG（検索拡張生成）の実装

Related Pages

Related topics: データフロー

Relevant source files

The following files were used as context for generating this wiki page:

• api/rag.py
• api/data_pipeline.py
• api/api.py
• api/main.py
• README.md

RAG（検索拡張生成）の実装

RAG（Retrieval-Augmented Generation、検索拡張生成）は、外部知識ソースから情報を取得し、それを利用して応答を生成する手法です。このWikiページでは、DeepWikiプロジェクトにおけるRAGの実装について、そのアーキテクチャ、コンポーネント、データフロー、および主要な機能について解説します。RAGは、リポジトリに関する質問応答機能や、詳細調査機能において重要な役割を果たしています。

RAGのアーキテクチャ

DeepWikiにおけるRAGのアーキテクチャは、主にapi/rag.pyに実装されています。このモジュールは、質問応答を行うための中心的な役割を担い、データのインデックス作成、検索、および生成の各段階を統合します。

主要コンポーネント

• データパイプライン: リポジトリのコードを解析し、ベクトル埋め込みを生成します。api/data_pipeline.py
• ベクトルデータベース: 埋め込みベクトルを格納し、高速な類似性検索を可能にします。
• 検索: 質問に基づいて関連するコンテキストをベクトルデータベースから検索します。
• 生成: 検索されたコンテキストと質問に基づいて、応答を生成します。

データフロー

graph TD
    A[質問] --> B{検索};
    B --> C[コンテキスト取得];
    C --> D[生成];
    D --> E[応答];

Loading

この図は、RAGの基本的なデータフローを示しています。質問が入力されると、システムは関連するコンテキストを検索し、それに基づいて応答を生成します。

データパイプライン

データパイプラインは、api/data_pipeline.pyに実装されており、リポジトリのコードを解析し、ベクトル埋め込みを生成する役割を担います。このパイプラインは、RAGの性能に大きく影響を与えるため、重要なコンポーネントです。

処理の流れ

1. コードの解析: リポジトリのコードを解析し、テキストデータに変換します。
2. テキスト分割: テキストデータをチャンクに分割します。
3. 埋め込み生成: 各チャンクに対してベクトル埋め込みを生成します。
4. ベクトルデータベースへの格納: 埋め込みベクトルをベクトルデータベースに格納します。

コード例

# api/data_pipeline.py
def process_repo(repo_path: str):
    """
    Processes a repository by parsing code, generating embeddings, and storing them in a vector database.
    """
    # コード解析、テキスト分割、埋め込み生成、ベクトルDBへの格納処理
    pass

このコードスニペットは、リポジトリを処理し、ベクトル埋め込みを生成するプロセスの概要を示しています。api/data_pipeline.py

検索

検索は、質問に基づいて関連するコンテキストをベクトルデータベースから検索するプロセスです。api/rag.pyに実装されており、RAGの性能に直接影響を与えます。

類似性検索

ベクトルデータベースに格納された埋め込みベクトルに対して、質問の埋め込みベクトルとの類似性を計算し、最も類似性の高いコンテキストを検索します。

コード例

# api/rag.py
def retrieve_context(query: str, vector_db):
    """
    Retrieves relevant context from the vector database based on the query.
    """
    # 類似性検索処理
    pass

このコードスニペットは、質問に基づいて関連するコンテキストを検索するプロセスの概要を示しています。api/rag.py

生成

生成は、検索されたコンテキストと質問に基づいて、応答を生成するプロセスです。api/rag.pyに実装されており、RAGの最終的な出力に影響を与えます。

LLM（大規模言語モデル）の利用

検索されたコンテキストと質問をLLMに入力し、応答を生成します。LLMは、Google Gemini、OpenAI、OpenRouter、またはローカルOllamaモデルを使用できます。

コード例

# api/rag.py
def generate_response(query: str, context: str, llm):
    """
    Generates a response based on the query and context using the specified LLM.
    """
    # LLMによる応答生成処理
    pass

このコードスニペットは、質問とコンテキストに基づいて応答を生成するプロセスの概要を示しています。api/rag.py

質問機能と詳細調査機能

DeepWikiでは、RAGを利用した質問機能と詳細調査機能が提供されています。

質問機能

質問機能は、RAGを使用してリポジトリに関する質問に答えます。ユーザーは質問を入力し、システムは関連するコンテキストを検索し、それに基づいて応答を生成します。

詳細調査機能

詳細調査機能は、複数ターンの研究プロセスでリポジトリ分析をより深く行います。この機能は、質問を送信する前に質問インターフェースの「詳細調査」スイッチをオンにすることで利用できます。

sequenceDiagram
    participant User
    participant DeepWiki
    participant VectorDB
    participant LLM

    User->>+DeepWiki: 質問を送信
    activate DeepWiki
    DeepWiki->>+VectorDB: 質問に基づいてコンテキストを検索
    activate VectorDB
    VectorDB-->>-DeepWiki: 関連するコンテキストを返す
    deactivate VectorDB
    DeepWiki->>+LLM: コンテキストと質問に基づいて応答を生成
    activate LLM
    LLM-->>-DeepWiki: 応答を返す
    deactivate LLM
    DeepWiki-->>-User: 応答を表示
    deactivate DeepWiki

Loading

このシーケンス図は、質問機能と詳細調査機能の基本的な流れを示しています。

まとめ

このページでは、DeepWikiプロジェクトにおけるRAGの実装について解説しました。RAGは、リポジトリに関する質問応答機能や、詳細調査機能において重要な役割を果たしており、そのアーキテクチャ、コンポーネント、およびデータフローを理解することは、DeepWikiの機能を最大限に活用するために不可欠です。

---

主要なフロントエンドコンポーネント

Related Pages

Related topics: システムアーキテクチャ, Mermaidダイアグラム

Relevant source files

The following files were used as context for generating this wiki page:

• src/components/Ask.tsx
• src/components/WikiTreeView.tsx
• src/app/[owner]/[repo]/page.tsx
• src/messages/ja.json
• src/components/Markdown.tsx

主要なフロントエンドコンポーネント

このページでは、DeepWiki-Openプロジェクトの主要なフロントエンドコンポーネントについて説明します。これらのコンポーネントは、ユーザーインターフェースの構築と、リポジトリデータの表示、ユーザーとのインタラクションの処理において重要な役割を果たします。特に、AskコンポーネントとWikiTreeViewコンポーネントに焦点を当て、それぞれの機能、アーキテクチャ、およびプロジェクト内での連携について詳しく解説します。

Askコンポーネント

Askコンポーネントは、ユーザーがリポジトリに関する質問を送信し、AIによる回答を得るためのインターフェースを提供します。このコンポーネントは、質問の入力、送信、および回答の表示を処理します。

アーキテクチャと機能

Askコンポーネントは、以下の主要な機能を提供します。

• 質問の入力: ユーザーが質問を入力するためのテキストエリアを提供します。
• 質問の送信: ユーザーが質問を送信するためのボタンを提供し、送信された質問をAPIに送信します。
• 回答の表示: APIから受信した回答をリアルタイムで表示します。
• 詳細調査機能: 複雑なトピックに対して多段階の調査を実施するオプションを提供します。

// src/components/Ask.tsx
import React, { useState } from 'react';
import { FaComments } from 'react-icons/fa';
import { useLanguage } from '@/contexts/LanguageContext';

interface AskProps {
    repoInfo: { owner: string; repo: string; type: string };
}

const Ask: React.FC<AskProps> = ({ repoInfo }) => {
    const [question, setQuestion] = useState('');
    const [answer, setAnswer] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    const [isDeepResearch, setIsDeepResearch] = useState(false);
    const { messages } = useLanguage();

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setIsLoading(true);
        setAnswer('');

        try {
            const response = await fetch('/api/chat/ask', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    repo_url: `https://github.com/${repoInfo.owner}/${repoInfo.repo}`,
                    type: repoInfo.type,
                    question: question,
                    deep_research: isDeepResearch
                }),
            });

            if (!response.ok) {
                throw new Error(`Error: ${response.status}`);
            }

            const reader = response.body?.getReader();
            if (!reader) {
                throw new Error('Response body is empty');
            }
            let accumulatedResponse = '';

            while (true) {
                const { done, value } = await reader.read();
                if (done) {
                    break;
                }
                const textDecoder = new TextDecoder();
                const chunk = textDecoder.decode(value);
                accumulatedResponse += chunk;
                setAnswer(accumulatedResponse);
            }

        } catch (error) {
            console.error("Ask component error:", error);
            setAnswer(`${messages.common?.error}: ${error}`);
        } finally {
            setIsLoading(false);
        }
    };

    return (
        <div className="rounded-md border border-[var(--border-color)] bg-[var(--background)]/50 p-4 mt-4">
            <form onSubmit={handleSubmit} className="mb-4">
                <div className="flex items-center mb-2">
                    <FaComments className="mr-2 text-[var(--accent-primary)]" />
                    <label htmlFor="question" className="text-sm font-medium text-[var(--foreground)]">
                        {messages.repoPage?.askAboutRepo}
                    </label>
                </div>
                <textarea
                    id="question"
                    className="w-full p-2 rounded-md bg-[var(--background)] border border-[var(--border-color)] text-[var(--foreground)] text-sm focus:outline-none focus:border-[var(--accent-primary)]"
                    placeholder={messages.ask?.placeholder}
                    value={question}
                    onChange={(e) => setQuestion(e.target.value)}
                    disabled={isLoading}
                />
                <div className="flex justify-between items-center mt-2">
                    <label className="inline-flex items-center text-sm text-[var(--foreground)]">
                        <input
                            type="checkbox"
                            className="form-checkbox h-5 w-5 text-[var(--accent-primary)] rounded-md bg-[var(--background)] border border-[var(--border-color)] focus:ring-0 focus:outline-none focus:border-[var(--accent-primary)]"
                            checked={isDeepResearch}
                            onChange={(e) => setIsDeepResearch(e.target.checked)}
                            disabled={isLoading}
                        />
                        <span className="ml-2">{messages.ask?.deepResearch}</span>
                    </label>
                    <button
                        type="submit"
                        className="px-4 py-2 rounded-md bg-[var(--accent-primary)] text-white text-sm font-medium hover:bg-[var(--highlight)] transition-colors disabled:bg-[var(--accent-primary)]/50 disabled:cursor-not-allowed"
                        disabled={isLoading}
                    >
                        {isLoading ? messages.common?.processing : messages.ask?.askButton}
                    </button>
                </div>
            </form>
            {answer && (
                <div className="mt-4">
                    <p className="text-sm text-[var(--foreground)]">
                        {answer}
                    </p>
                </div>
            )}
        </div>
    );
};

export default Ask;

Sources: src/components/Ask.tsx:1-84

データフロー

1. ユーザーが質問を入力し、「質問する」ボタンをクリックします。
2. handleSubmit関数が呼び出され、ローディング状態がtrueに設定されます。
3. fetch APIを使用して、質問がバックエンドの/api/chat/askエンドポイントに送信されます。リクエストボディには、リポジトリのURL、タイプ、質問内容、および詳細調査オプションが含まれます。
4. APIからのレスポンスがストリームとして読み込まれ、answer状態が更新され、回答がリアルタイムで表示されます。
5. エラーが発生した場合、エラーメッセージがanswer状態に設定されます。
6. ローディング状態がfalseに設定されます。

状態管理

Askコンポーネントは、以下の状態を管理します。

• question: ユーザーが入力した質問のテキスト。
• answer: APIから受信した回答のテキスト。
• isLoading: APIリクエストが処理中かどうかを示すブール値。
• isDeepResearch: 詳細調査機能が有効かどうかを示すブール値。

国際化

Askコンポーネントは、useLanguageフックを使用して、UIのテキストを国際化します。これにより、異なる言語のユーザーに対して適切なテキストが表示されます。例えば、messages.repoPage?.askAboutRepoは、リポジトリについて質問するためのラベルを表示するために使用されます。 Sources: src/components/Ask.tsx:8-9

WikiTreeViewコンポーネント

WikiTreeViewコンポーネントは、Wikiの構造をツリー形式で表示し、ユーザーがWikiのページをナビゲートできるようにします。

アーキテクチャと機能

WikiTreeViewコンポーネントは、以下の主要な機能を提供します。

• Wiki構造の表示: Wikiのセクションとページをツリー形式で表示します。
• ナビゲーション: ユーザーがツリー内のページをクリックして、対応するコンテンツを表示できるようにします。
• 状態の管理: 選択されたページの状態を管理し、UIを更新します。

// src/components/WikiTreeView.tsx
import React, { useState } from 'react';
import { FaChevronDown, FaChevronUp, FaFileExport, FaFolder, FaHome } from 'react-icons/fa';
import Link from 'next/link';
import { useRouter } from 'next/navigation';

interface WikiPage {
    id: string;
    title: string;
    content: string;
    filePaths: string[];
    importance: 'high' | 'medium' | 'low';
    relatedPages: string[];
    parentId?: string;
    isSection?: boolean;
    children?: string[];
}

interface WikiSection {
    id: string;
    title: string;
    pages: string[];
    subsections?: string[];
}

interface WikiStructure {
    id: string;
    title: string;
    description: string;
    pages: WikiPage[];
    sections: WikiSection[];
    rootSections: string[];
}

interface WikiTreeViewProps {
    wikiStructure: WikiStructure | null;
    owner: string;
    repo: string;
}

const WikiTreeView: React.FC<WikiTreeViewProps> = ({ wikiStructure, owner, repo }) => {
    const [expandedSections, setExpandedSections] = useState<string[]>([]);
    const router = useRouter();

    const toggleSection = (sectionId: string) => {
        setExpandedSections(prev =>
            prev.includes(sectionId) ? prev.filter(id => id !== sectionId) : [...prev, sectionId]
        );
    };

    const isSectionExpanded = (sectionId: string) => expandedSections.includes(sectionId);

    const renderTree = (sections: WikiSection[], pages: WikiPage[], parentId: string | null = null) => {
        return sections
            .filter(section => section.id.startsWith(parentId ? `${parentId}-` : 'section-'))
            .map(section => (
                <div key={section.id} className="mb-1">
                    <div
                        className="flex items-center justify-between p-2 rounded-md cursor-pointer hover:bg-[var(--background)]/50"
                        onClick={() => toggleSection(section.id)}
                    >
                        <div className="flex items-center">
                            <FaFolder className="mr-2 text-[var(--accent-primary)]" />
                            <span className="text-sm font-medium text-[var(--foreground)]">{section.title}</span>
                        </div>
                        {isSectionExpanded(section.id) ? <FaChevronUp /> : <FaChevronDown />}
                    </div>
                    {isSectionExpanded(section.id) && (
                        <div className="ml-4">
                            {renderPages(pages, section.id)}
                            {renderTree(sections, pages, section.id)}
                        </div>
                    )}
                </div>
            ));
    };

    const renderPages = (pages: WikiPage[], parentId: string) => {
        return pages
            .filter(page => page.parentId === parentId)
            .map(page => (
                <Link
                    key={page.id}
                    href={`/${owner}/${repo}?page=${page.id}`}
                    className="block p-2 ml-4 rounded-md cursor-pointer hover:bg-[var(--background)]/50"
                >
                    <span className="text-sm text-[var(--foreground)]">{page.title}</span>
                </Link>
            ));
    };

    if (!wikiStructure) {
        return <p>Loading...</p>;
    }

    return (
        <div className="w-full max-w-md">
            <Link
                href={`/${owner}/${repo}`}
                className="flex items-center p-2 rounded-md cursor-pointer hover:bg-[var(--background)]/50"
            >
                <FaHome className="mr-2 text-[var(--accent-primary)]" />
                <span className="text-sm font-medium text-[var(--foreground)]">Home</span>
            </Link>
            {renderTree(wikiStructure.sections, wikiStructure.pages)}
        </div>
    );
};

export default WikiTreeView;

Sources: src/components/WikiTreeView.tsx:1-104

データフロー

1. WikiTreeViewコンポーネントは、wikiStructureプロパティとしてWikiの構造を受け取ります。
2. renderTree関数は、Wikiのセクションを再帰的にレンダリングします。
3. renderPages関数は、各セクション内のページをレンダリングします。
4. ユーザーがセクションをクリックすると、toggleSection関数が呼び出され、セクションの展開状態が切り替わります。
5. ユーザーがページをクリックすると、Linkコンポーネントを使用して、対応するページにナビゲートします。

状態管理

WikiTreeViewコンポーネントは、以下の状態を管理します。

• expandedSections: 展開されているセクションのIDの配列。

コンポーネントの連携

WikiTreeViewコンポーネントは、app/[owner]/[repo]/page.tsxファイルで使用され、Wikiの構造を表示します。このコンポーネントは、ownerとrepoのパラメータを受け取り、Wikiのページへのリンクを生成します。 Sources: src/app/[owner]/[repo]/page.tsx

まとめ

AskコンポーネントとWikiTreeViewコンポーネントは、DeepWiki-Openプロジェクトの主要なフロントエンドコンポーネントであり、ユーザーがリポジトリに関する質問を送信したり、Wikiの構造をナビゲートしたりするためのインターフェースを提供します。これらのコンポーネントは、状態管理、データフロー、および国際化を考慮して設計されており、プロジェクトの使いやすさとアクセシビリティを向上させています。

---

Mermaidダイアグラム

Related Pages

Related topics: 主要なフロントエンドコンポーネント

Relevant source files

The following files were used as context for generating this wiki page:

• src/components/Mermaid.tsx
• README.ja.md
• README.md
• src/messages/ja.json
• src/app/[owner]/[repo]/page.tsx

Mermaidダイアグラム

DeepWikiプロジェクトにおけるMermaidダイアグラムは、コードの構造、アーキテクチャ、データフローを視覚的に表現するために使用されます。Mermaidは、テキストベースのダイアグラム定義言語であり、コード内でダイアグラムを記述し、それをレンダリングすることができます。これにより、開発者はコードの理解を深め、より効果的にコミュニケーションを取ることができます。

Mermaidコンポーネント

概要

Mermaid.tsxは、DeepWikiプロジェクトでMermaidダイアグラムを表示するためのReactコンポーネントです。このコンポーネントは、Mermaidダイアグラムの定義を受け取り、それをSVGとしてレンダリングします。また、ダイアグラムの表示状態を管理し、エラーハンドリングも行います。Sources: src/components/Mermaid.tsx

コンポーネントの構造

Mermaid.tsxコンポーネントは、以下の要素で構成されています。

1. Props:

   • chart: Mermaidダイアグラムの定義文字列を受け取ります。Sources: src/components/Mermaid.tsx
   • className: コンポーネントに適用するCSSクラス名（オプション）。Sources: src/components/Mermaid.tsx

2. State:

   • display: ダイアグラムの表示状態を管理します。初期状態は"none"です。Sources: src/components/Mermaid.tsx
   • svg: レンダリングされたSVGダイアグラムを格納します。初期状態は''です。Sources: src/components/Mermaid.tsx
   • error: エラーメッセージを格納します。初期状態は''です。Sources: src/components/Mermaid.tsx
   • container: ダイアグラムのコンテナ要素への参照を保持します。Sources: src/components/Mermaid.tsx

3. useEffectフック:

   • コンポーネントのマウント時に、Mermaidダイアグラムをレンダリングします。
   • chart propが変更された場合にも、ダイアグラムを再レンダリングします。

4. エラーハンドリング:

   • Mermaidダイアグラムのレンダリング中にエラーが発生した場合、エラーメッセージをerror stateに設定し、エラーメッセージを表示します。

5. SVG表示:

   • レンダリングされたSVGダイアグラムをdiv要素内に表示します。
   • SVGの表示状態は、display stateによって制御されます。

コード例

以下は、Mermaid.tsxコンポーネントの主要な部分のコードスニペットです。

// src/components/Mermaid.tsx
import React, { useState, useEffect, useRef } from 'react';
import mermaid from 'mermaid';
import { useTheme } from 'next-themes';

interface MermaidProps {
  chart: string;
  className?: string;
}

const Mermaid: React.FC<MermaidProps> = ({ chart, className }) => {
  const [display, setDisplay] = useState<string>('none');
  const [svg, setSvg] = useState<string>('');
  const [error, setError] = useState<string>('');
  const container = useRef<HTMLDivElement>(null);
  const { theme } = useTheme();

  useEffect(() => {
    const renderMermaid = async () => {
      if (!chart) {
        return;
      }
      try {
        mermaid.initialize({
          startOnLoad: false,
          theme: theme === 'dark' ? 'dark' : 'default',
        });

        const element = container.current;
        if (element) {
          element.innerHTML = chart;
          const mermaidDom = await mermaid.contentLoaded();
          if (mermaidDom) {
            const renderedSvg = element.innerHTML;
            setSvg(renderedSvg);
            setDisplay('block');
            setError('');
          } else {
            setError('Failed to render Mermaid diagram.');
            setDisplay('none');
          }
        }
      } catch (e: any) {
        setError(`Mermaid error: ${e.message}`);
        setDisplay('none');
      }
    };

    renderMermaid();
  }, [chart, theme]);

  return (
    <div className={className} style={{ position: 'relative' }}>
      {error && (
        <div className="text-red-500 absolute top-0 left-0 bg-white p-2 rounded shadow-md z-10">
          Error: {error}
        </div>
      )}
      <div
        ref={container}
        style={{ textAlign: 'center', display: display }}
        className="mermaid"
        data-processed="true"
      />
      {svg && <div dangerouslySetInnerHTML={{ __html: svg }} />}
    </div>
  );
};

export default Mermaid;

Mermaidダイアグラムの例

DeepWikiプロジェクトでは、以下のようなMermaidダイアグラムが使用されています。

1. フロー図:

   • 処理の流れやワークフローを視覚的に表現します。
   • graph TDディレクティブを使用して、上から下へのフロー図を作成します。

   graph TD
       A[ユーザーがGitHub/GitLab/Bitbucketリポジトリを入力] --> AA{プライベートリポジトリ?}
       AA -->|はい| AB[アクセストークンを追加]
       AA -->|いいえ| B[リポジトリをクローン]
       AB --> B
       B --> C[コード構造を分析]
       C --> D[コード埋め込みを作成]
   
       D --> M{モデルプロバイダーを選択}
       M -->|Google Gemini| E1[Geminiで生成]
       M -->|OpenAI| E2[OpenAIで生成]
       M -->|OpenRouter| E3[OpenRouterで生成]
       M -->|ローカルOllama| E4[Ollamaで生成]
   
       E1 --> E[ドキュメントを生成]
       E2 --> E
       E3 --> E
       E4 --> E
   
       D --> F[視覚的な図を作成]
       E --> G[Wikiとして整理]
       F --> G
       G --> H[インタラクティブなDeepWiki]
   
       classDef process stroke-width:2px;
       classDef data stroke-width:2px;
       classDef result stroke-width:2px;
       classDef decision stroke-width:2px;
   
       class A,D data;
       class AA,M decision;
       class B,C,E,F,G,AB,E1,E2,E3,E4 process;
       class H result;
   

   Loading

   このフロー図は、DeepWikiの動作概要を示しています。ユーザーがリポジトリURLを入力するところから始まり、AIがドキュメントを生成し、Wikiとして整理されるまでの流れを視覚的に表現しています。Sources: README.ja.md

2. シーケンス図:

   • コンポーネント間の相互作用やメッセージの交換を視覚的に表現します。
   • sequenceDiagramディレクティブを使用して、シーケンス図を作成します。

   sequenceDiagram
       participant User
       participant Browser
       participant Server
   
       User->>Browser: リポジトリURLを入力
       Browser->>Server: Wiki生成リクエスト
       activate Server
       Server->>Server: リポジトリをクローン
       Server->>Server: コード構造を分析
       Server->>Server: ドキュメントを生成
       Server-->>Browser: Wikiコンテンツ
       deactivate Server
       Browser->>User: Wikiを表示
   

   Loading

   このシーケンス図は、DeepWikiのWiki生成プロセスにおけるユーザー、ブラウザ、サーバー間の相互作用を示しています。

Mermaidの高度な設定

Mermaid.tsxコンポーネントでは、mermaid.initialize関数を使用して、Mermaidの初期化設定を行います。

mermaid.initialize({
  startOnLoad: false,
  theme: theme === 'dark' ? 'dark' : 'default',
});

• startOnLoad: ページ読み込み時にMermaidダイアグラムを自動的にレンダリングするかどうかを指定します。falseに設定することで、コンポーネントが明示的にレンダリングをトリガーするまで、ダイアグラムはレンダリングされません。
• theme: Mermaidダイアグラムのテーマを指定します。darkまたはdefaultを設定できます。useThemeフックを使用して、アプリケーションのテーマに基づいて動的にテーマを設定します。

まとめ

Mermaidダイアグラムは、DeepWikiプロジェクトにおいて、コードの構造や動作を視覚的に表現するための重要な要素です。Mermaid.tsxコンポーネントを使用することで、Mermaidダイアグラムを簡単にレンダリングし、DeepWikiのユーザーインターフェースに統合することができます。また、エラーハンドリングやテーマ設定などの機能も提供されており、開発者はより柔軟にMermaidダイアグラムを活用することができます。

---

モデルプロバイダー

Related Pages

Related topics: カスタムモデルの選択

Relevant source files

The following files were used as context for generating this wiki page:

• api/config/generator.json
• api/openai_client.py
• api/openrouter_client.py
• api/api.py
• README.md

モデルプロバイダー

DeepWikiは、複数の大規模言語モデル（LLM）プロバイダーをサポートする柔軟なアーキテクチャを採用しています。これにより、ユーザーはさまざまなモデルを選択し、それぞれの強みを活用できます。現在、Google、OpenAI、OpenRouter、Ollamaがサポートされています。このページでは、これらのプロバイダーの設定と使用方法について説明します。

サポートされているプロバイダー

DeepWikiは、以下のモデルプロバイダーをサポートしています。各プロバイダーには、対応するAPIキーが必要です（Ollamaを除く）。

• Google: Geminiモデルを利用できます。デフォルトはgemini-2.0-flashですが、gemini-1.5-flashやgemini-1.0-proなども利用可能です。Sources: api/config/generator.json
• OpenAI: OpenAIのモデルを利用できます。デフォルトはgpt-4oですが、o4-miniなども利用可能です。Sources: api/config/generator.json
• OpenRouter: 統一APIを通じて、Claude、Llama、Mistralなど、複数のモデルにアクセスできます。Sources: api/config/generator.json, api/openrouter_client.py
• Ollama: ローカルで実行されるオープンソースモデル（例：llama3）をサポートしています。APIキーは不要です。Sources: api/config/generator.json

プロバイダー設定

各プロバイダーを使用するには、対応するAPIキーを環境変数に設定する必要があります。

| プロバイダー | 環境変数 | 必須 | 備考

仕組み

DeepWikiはAIを使用して、GitHub、GitLab、またはBitbucketリポジトリをクローンして分析します。これには、トークン認証によるプライベートリポジトリも含まれます。次に、スマート検索のためのコードの埋め込みを作成し、コンテキスト対応AIを使用してドキュメントを生成します。このプロセスでは、Google Gemini、OpenAI、OpenRouter、またはローカルOllamaモデルを使用します。また、コードの関係を説明する視覚的な図を作成し、すべてを構造化されたWikiに整理します。最後に、質問機能を通じてリポジトリとのインテリジェントなQ&Aを可能にし、詳細調査機能で深い研究能力を提供します。Sources: README.md, README.ja.md

graph TD
    A[ユーザーがGitHub/GitLab/Bitbucketリポジトリを入力] --> AA{プライベートリポジトリ?}
    AA -->|はい| AB[アクセストークンを追加]
    AA -->|いいえ| B[リポジトリをクローン]
    AB --> B
    B --> C[コード構造を分析]
    C --> D[コード埋め込みを作成]

    D --> M{モデルプロバイダーを選択}
    M -->|Google Gemini| E1[Geminiで生成]
    M -->|OpenAI| E2[OpenAIで生成]
    M -->|OpenRouter| E3[OpenRouterで生成]
    M -->|ローカルOllama| E4[Ollamaで生成]

    E1 --> E[ドキュメントを生成]
    E2 --> E
    E3 --> E
    E4 --> E

    D --> F[視覚的な図を作成]
    E --> G[Wikiとして整理]
    F --> G
    G --> H[インタラクティブなDeepWiki]

    classDef process stroke-width:2px;
    classDef data stroke-width:2px;
    classDef result stroke-width:2px;
    classDef decision stroke-width:2px;

    class A,D data;
    class AA,M decision;
    class B,C,E,F,G,AB,E1,E2,E3,E4 process;
    class H result;

Loading

OpenAIクライアント

api/openai_client.pyには、OpenAI APIとのやり取りを処理するクライアントが含まれています。このクライアントは、OpenAIモデルを使用してテキストの埋め込みを作成し、テキスト生成を行います。

OpenAI APIキーの設定

OpenAIモデルを使用するには、OPENAI_API_KEY環境変数を設定する必要があります。また、OPENAI_API_BASE変数を設定することで、カスタムAPIエンドポイントを指定できます。これは、プライベートAPIチャネルを持つエンタープライズユーザーや、自己ホスト型またはカスタムデプロイされたLLMサービスを使用する組織に役立ちます。Sources: api/README.md

OpenAIクライアントの初期化

OpenAIクライアントは、APIキーを使用して初期化されます。

import openai
import os

openai.api_key = os.environ.get("OPENAI_API_KEY")

OpenRouterクライアント

api/openrouter_client.pyには、OpenRouter APIとのやり取りを処理するクライアントが含まれています。OpenRouterは、複数のモデルプロバイダー（OpenAI、Anthropic、Google、Meta、Mistralなど）への統一APIを提供します。これにより、DeepWikiは単一のAPIキーで数百のAIモデルにアクセスできます。Sources: README.md

OpenRouter APIキーの設定

OpenRouterモデルを使用するには、OPENROUTER_API_KEY環境変数を設定する必要があります。

OpenRouterクライアントの使用

OpenRouterクライアントを使用するには、モデル名とAPIキーを指定して初期化します。

from openrouter import OpenRouterClient
import os

client = OpenRouterClient(api_key=os.environ.get("OPENROUTER_API_KEY"))

モデル選択システム

DeepWikiは、柔軟なプロバイダーベースのモデル選択システムを実装しています。これにより、ユーザーは利用可能なモデルプロバイダーからモデルを選択できます。モデルプロバイダーとモデルのリストは、api/config/generator.jsonファイルで定義されています。Sources: api/README.md

モデルプロバイダーの選択

DeepWikiでは、Google、OpenAI、OpenRouter、Ollamaの各プロバイダーがサポートされています。各プロバイダーには、デフォルトのモデルが設定されていますが、ユーザーは別のモデルを選択することもできます。

カスタムモデルの選択

サービスプロバイダーは、事前定義されたオプションから選択するか、フロントエンドインターフェースでカスタムモデル識別子を入力することで、モデル提供を実装できます。Sources: README.md

まとめ

DeepWikiのモデルプロバイダーアーキテクチャは、柔軟性と拡張性を提供します。複数のプロバイダーをサポートすることで、ユーザーは最適なモデルを選択し、DeepWikiの機能を最大限に活用できます。

---

カスタムモデルの選択

Related Pages

Related topics: モデルプロバイダー

Relevant source files

The following files were used as context for generating this wiki page:

• src/components/ModelSelectionModal.tsx
• src/app/api/models/config/route.ts
• src/messages/ja.json
• src/components/Settings/ModelSettings.tsx
• src/utils/server/agent.ts

カスタムモデルの選択

DeepWikiにおけるカスタムモデルの選択機能は、ユーザーが利用可能なAIモデルプロバイダー（Google、OpenAI、OpenRouter、Ollama）が提供するデフォルトのモデルリストにないモデルを使用できるようにするものです。これにより、ユーザーは特定のニーズに合わせて微調整されたモデルや、実験的なモデルをDeepWikiの機能で使用できます。

モデル選択のアーキテクチャ

カスタムモデルの選択は、フロントエンドのUIコンポーネントとバックエンドのAPIエンドポイントが連携して機能します。

1. フロントエンド (ModelSelectionModal.tsx, ModelSettings.tsx): ユーザーインターフェースを提供し、カスタムモデル名を入力させ、選択されたモデルをAPIに送信します。
2. バックエンド (route.ts): APIエンドポイントとして機能し、利用可能なモデルのリストを提供し、カスタムモデルの選択を処理します。
3. 設定 (src/messages/ja.json): UIで使用されるテキストを提供します。
4. エージェント (src/utils/server/agent.ts): バックエンドで使用され、APIリクエストを処理します。

フロントエンドコンポーネント

ModelSelectionModal.tsx

ModelSelectionModal.tsxは、モデル選択のモーダルウィンドウを実装しています。

• 機能:
  • モデルプロバイダー（Google、OpenAI、OpenRouter、Ollama）の選択。
  • カスタムモデル名を入力するためのテキストフィールドの表示。
  • 選択されたモデルを保存し、モーダルを閉じるためのボタン。
• コード例:

{selectedProviderState === 'custom' && (
  <div className="mt-2">
    <Label htmlFor="customModel">{t('form.customModelPlaceholder')}</Label>
    <Input
      id="customModel"
      type="text"
      placeholder={t('form.customModelPlaceholder')}
      value={customSelectedModelState}
      onChange={(e) => setCustomSelectedModelState(e.target.value)}
    />
  </div>
)}

このコードスニペットは、カスタムモデルが選択された場合に表示されるテキストフィールドを示しています。ユーザーはここにカスタムモデルの名前を入力します。 Sources: src/components/ModelSelectionModal.tsx:116-126

ModelSettings.tsx

ModelSettings.tsxは、設定画面でモデル選択を管理するコンポーネントです。

• 機能:
  • 選択されたモデルプロバイダーとモデルを表示。
  • カスタムモデルが選択された場合に、その名前を表示。
  • モデル選択モーダルを開くためのボタン。
• コード例:

<SettingsSection>
  <SettingsLabel>{t('form.modelSelection')}</SettingsLabel>
  <SettingsValue>
    {selectedProviderState === 'custom' ? customSelectedModelState : selectedModelState}
  </SettingsValue>
  <SettingsAction onClick={handleOpenModal}>{t('form.changeModel')}</SettingsAction>
</SettingsSection>

このコードは、現在選択されているモデルを表示し、モデルを変更するためのボタンを提供します。 Sources: src/components/Settings/ModelSettings.tsx:24-29

バックエンドAPI

route.ts

route.tsは、/api/models/configエンドポイントを処理します。

• 機能:
  • 利用可能なモデルのリストを返す。
  • カスタムモデルが選択された場合に、そのモデルを処理する。
• コード例:

export async function GET() {
  try {
    const modelConfig = await getModelConfig();
    return NextResponse.json(modelConfig);
  } catch (error: any) {
    console.error("Error fetching model config:", error);
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}

このコードは、モデル設定を取得し、JSONレスポンスとして返します。 Sources: src/app/api/models/config/route.ts:7-14

データフロー

sequenceDiagram
    participant User
    participant ModelSelectionModal
    participant ModelSettings
    participant API (route.ts)
    participant Server

    User->>ModelSettings: モデル設定を開く
    ModelSettings->>ModelSelectionModal: モデル選択モーダルを開く
    ModelSelectionModal->>User: モデルプロバイダーとカスタムモデル名を選択
    User->>ModelSelectionModal: 選択を送信
    ModelSelectionModal->>API: モデル設定を更新
    API->>Server: モデル設定を保存
    Server-->>API: 成功
    API-->>ModelSelectionModal: 成功
    ModelSelectionModal-->>ModelSettings: モデル設定を更新
    ModelSettings-->>User: 新しいモデル設定を表示

Loading

このシーケンス図は、カスタムモデルの選択がどのように行われるかを示しています。ユーザーは、モデル設定画面からモデル選択モーダルを開き、モデルプロバイダーとカスタムモデル名を選択します。選択が送信されると、APIがモデル設定を更新し、成功が返されます。最後に、新しいモデル設定がユーザーに表示されます。

まとめ

カスタムモデルの選択機能は、DeepWikiの柔軟性を高め、ユーザーが特定のニーズに合わせてAIモデルを選択できるようにします。フロントエンドのUIコンポーネントとバックエンドのAPIエンドポイントが連携して機能し、シームレスなユーザーエクスペリエンスを提供します。

---

デプロイメント

Relevant source files

The following files were used as context for generating this wiki page:

• Dockerfile
• docker-compose.yml
• README.md
• README.ja.md
• api/main.py

デプロイメント

DeepWiki-Openプロジェクトのデプロイメントについて説明します。このドキュメントでは、Dockerを使用したデプロイメント方法と、手動セットアップの手順について解説します。

Dockerを使用したデプロイメント

DeepWiki-Openは、Dockerを使用して簡単にデプロイできます。Dockerを使用すると、必要な依存関係がすべて含まれたコンテナを作成し、異なる環境で一貫した動作を保証できます。

Docker Composeを使用したデプロイ

Docker Composeを使用してDeepWiki-Openをデプロイする手順は以下の通りです。

1. リポジトリをクローンします。

   git clone https://github.com/AsyncFuncAI/deepwiki-open.git
   cd deepwiki-open

   Sources: README.ja.md

2. APIキーを含む.envファイルを作成します。

   echo "GOOGLE_API_KEY=your_google_api_key" > .env
   echo "OPENAI_API_KEY=your_openai_api_key" >> .env
   echo "OPENROUTER_API_KEY=your_openrouter_api_key" >> .env

   Sources: README.ja.md

3. Docker Composeで実行します。

   docker-compose up

   Sources: README.ja.md

この設定では、ホスト上の~/.adalflowディレクトリをコンテナ内の/root/.adalflowにマウントします。このパスは以下のものを保存するために使用されます。

• クローンされたリポジトリ (~/.adalflow/repos/)
• それらのエンベディングとインデックス (~/.adalflow/databases/)
• 生成されたWikiのキャッシュ (~/.adalflow/wikicache/)

これにより、コンテナが停止または削除されてもデータが永続化されます。Sources: README.ja.md

Dockerイメージのローカルビルド

Dockerイメージをローカルでビルドする場合は、以下の手順に従います。

1. リポジトリをクローンします。

   git clone https://github.com/AsyncFuncAI/deepwiki-open.git
   cd deepwiki-open

   Sources: README.ja.md

2. Dockerイメージをビルドします。

   docker build -t deepwiki-open .

   Sources: README.ja.md

3. コンテナを実行します。

   docker run -p 8001:8001 -p 3000:3000 \
     -e GOOGLE_API_KEY=your_google_api_key \
     -e OPENAI_API_KEY=your_openai_api_key \
     -e OPENROUTER_API_KEY=your_openrouter_api_key \
     deepwiki-open

   Sources: README.ja.md

docker-compose.ymlの詳細

docker-compose.ymlファイルは、DeepWiki-Openのデプロイに必要なサービスを定義します。以下にその内容を示します。

version: "3.8"
services:
  api:
    build:
      context: ./api
      dockerfile: Dockerfile
    ports:
      - "8001:8001"
    environment:
      GOOGLE_API_KEY: ${GOOGLE_API_KEY}
      OPENAI_API_KEY: ${OPENAI_API_KEY}
      OPENROUTER_API_KEY: ${OPENROUTER_API_KEY}
    volumes:
      - ~/.adalflow:/root/.adalflow
    depends_on:
      - frontend

  frontend:
    build:
      context: ./src
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    depends_on:
      - api

このファイルは、apiとfrontendの2つのサービスを定義しています。apiサービスは、APIサーバーを構築し、8001ポートで実行します。frontendサービスは、フロントエンドアプリケーションを構築し、3000ポートで実行します。また、.envファイルからAPIキーを環境変数として設定し、~/.adalflowディレクトリをボリュームとしてマウントします。Sources: docker-compose.yml

手動セットアップ

Dockerを使用せずにDeepWiki-Openを手動でセットアップする手順は以下の通りです。

APIキーの設定

プロジェクトのルートに.envファイルを作成し、以下のキーを追加します。

GOOGLE_API_KEY=your_google_api_key
OPENAI_API_KEY=your_openai_api_key
OPENROUTER_API_KEY=your_openrouter_api_key

Sources: README.ja.md

バックエンドの起動

pip install -r api/requirements.txt
python -m api.main

Sources: README.ja.md

フロントエンドの起動

npm install
npm run dev

Sources: README.ja.md

プロジェクト構造

DeepWiki-Openのプロジェクト構造は以下の通りです。

deepwiki/
├── api/                  # バックエンドAPIサーバー
│   ├── main.py           # APIエントリーポイント
│   ├── api.py            # FastAPI実装
│   ├── rag.py            # 検索拡張生成
│   ├── data_pipeline.py  # データ処理ユーティリティ
│   └── requirements.txt  # Python依存関係
│
├── src/                  # フロントエンドNext.jsアプリ
│   ├── app/              # Next.jsアプリディレクトリ
│   │   └── page.tsx      # メインアプリケーションページ
│   └── components/       # Reactコンポーネント
│       └── Mermaid.tsx   # Mermaid図レンダラー
│
├── public/               # 静的アセット
├── package.json          # JavaScript依存関係
└── .env                  # 環境変数（作成する必要あり）

Sources: README.ja.md

まとめ

DeepWiki-Openは、Dockerまたは手動セットアップを使用して簡単にデプロイできます。Dockerを使用すると、環境の一貫性を保ちながら迅速にデプロイできます。手動セットアップでは、より柔軟な設定が可能ですが、環境構築の手間がかかります。どちらの方法を選択するにしても、DeepWiki-Openはあなたのリポジトリのドキュメンテーションを自動化し、インタラクティブなWikiを生成する強力なツールです。

---

カスタマイズオプション

Relevant source files

The following files were used as context for generating this wiki page:

• api/config/repo.json
• api/config/embedder.json
• src/app/[owner]/[repo]/page.tsx
• README.ja.md
• src/messages/ja.json

カスタマイズオプション

DeepWiki-Openでは、リポジトリのWiki生成プロセスをカスタマイズするための様々なオプションが提供されています。これらのオプションを使用することで、生成されるWikiの範囲、使用する言語モデル、およびその他の詳細を調整できます。このページでは、利用可能なカスタマイズオプションについて説明します。

Wikiの種類

Wikiの種類は、「包括的」または「簡潔」のいずれかを選択できます。

• 包括的: 構造化されたセクションとより多くのページを持つ詳細なWikiを生成します。Sources: src/messages/ja.json:37-37
• 簡潔: ページ数が少なく、必要な情報のみを含む簡素化されたWikiを生成します。Sources: src/messages/ja.json:39-39

モデルオプション

DeepWiki-Openでは、Wiki生成に使用する言語モデルを選択できます。利用可能なモデルプロバイダーは以下のとおりです。

• Google: Google Geminiモデルを使用します。Sources: src/messages/ja.json:41-41
• OpenAI: OpenAIモデルを使用します。Sources: src/messages/ja.json:42-42
• OpenRouter: OpenRouter APIを通じて、複数のモデルにアクセスします。Sources: src/messages/ja.json:43-43, README.ja.md:237-249
• Ollama (ローカル): ローカルで実行されるOllamaモデルを使用します。Sources: src/messages/ja.json:44-44, README.ja.md:148-148

カスタムモデルの使用

「カスタムモデルを使用」オプションを選択すると、カスタムモデル名を指定できます。Sources: src/messages/ja.json:47-48

リポジトリ設定

アクセストークンの追加

プライベートリポジトリにアクセスするには、アクセストークンを追加する必要があります。Sources: src/messages/ja.json:50-52

ファイルフィルター設定

ファイルフィルター設定を使用すると、Wiki生成から除外するファイルやディレクトリを指定できます。Sources: src/messages/ja.json:56-66

除外するディレクトリ

一行につき一つのディレクトリパスを指定します。./で始まるパスはリポジトリルートからの相対パスです。Sources: src/messages/ja.json:60-62

除外するファイル

一行につき一つのファイル名を指定します。ワイルドカード（*）が使用可能です。Sources: src/messages/ja.json:63-65

デフォルトで除外されるファイルとディレクトリ

DeepWiki-Openには、デフォルトで除外されるファイルとディレクトリがいくつか含まれています。これには、node_modules、.git、および一般的なビルドアーティファクトファイルが含まれます。Sources: src/messages/ja.json:55-56, src/messages/ja.json:66-71

Wiki言語

Wikiを生成する言語を選択できます。Sources: src/messages/ja.json:28-28

まとめ

DeepWiki-Openのカスタマイズオプションを使用すると、ニーズに合わせてWiki生成プロセスを調整できます。Wikiの種類、モデルオプション、リポジトリ設定、およびWiki言語をカスタマイズすることで、リポジトリの包括的かつ正確なドキュメントを作成できます。

---

トラブルシューティング

Relevant source files

The following files were used as context for generating this wiki page:

• README.md
• README.ja.md
• README.zh.md
• README.kr.md
• src/messages/en.json
• src/messages/ja.json

トラブルシューティング

DeepWiki-Open を使用する際に発生する可能性のある一般的な問題とその解決策について説明します。API キーの問題、接続の問題、生成の問題など、さまざまな問題に対するトラブルシューティングの手順を提供します。このページは、DeepWiki-Open のスムーズな使用を支援することを目的としています。

API キーの問題

環境変数が見つかりません

.env ファイルがプロジェクトのルートに存在し、必要な API キーが含まれていることを確認してください。API キーが正しく設定されていない場合、DeepWiki は必要なサービスに接続できません。

GOOGLE_API_KEY=your_google_api_key
OPENAI_API_KEY=your_openai_api_key
OPENROUTER_API_KEY=your_openrouter_api_key

Sources: README.md

API キーが無効です

API キー全体が余分なスペースなしで正しくコピーされていることを確認してください。キーが正しくコピーされていない場合、API リクエストは認証されません。Sources: README.md

OpenRouter API エラー

OpenRouter API キーが有効で、十分なクレジットがあることを確認してください。OpenRouter API キーが無効であるか、クレジットが不足している場合、OpenRouter 経由でモデルを使用できません。Sources: README.md, README.ja.md

接続の問題

API サーバーに接続できません

API サーバーがポート 8001 で実行されていることを確認してください。API サーバーが実行されていない場合、フロントエンドはバックエンドと通信できません。Sources: README.md

python -m api.main

Sources: README.md

CORS エラー

API はすべてのオリジンを許可するように設定されていますが、問題がある場合は、フロントエンドとバックエンドを同じマシンで実行してみてください。CORS エラーは、異なるオリジンからのリクエストが許可されていない場合に発生します。Sources: README.md

生成の問題

Wiki の生成中にエラーが発生しました

非常に大きなリポジトリの場合は、まず小さいものから試してみてください。大きなリポジトリは、生成プロセス中にエラーを引き起こす可能性があります。Sources: README.md

無効なリポジトリ形式

有効な GitHub、GitLab、または Bitbucket URL の形式を使用していることを確認してください。無効な形式のリポジトリ URL は、DeepWiki がリポジトリを正しくクローンできない原因となります。Sources: README.md

リポジトリ構造を取得できませんでした

プライベートリポジトリの場合、適切な権限を持つ有効な個人アクセストークンを入力したことを確認してください。アクセストークンがないか、権限が不十分な場合、DeepWiki はプライベートリポジトリの構造を取得できません。Sources: README.md, README.ja.md

+ アクセストークンを追加

Sources: src/messages/ja.json

図のレンダリングエラー

アプリは自動的に壊れた図を修正しようとします。図のレンダリングエラーは、Mermaid ダイアグラムの構文が正しくない場合に発生する可能性があります。Sources: README.md

一般的な解決策

1. 両方のサーバーを再起動: 単純な再起動でほとんどの問題が解決することがあります。Sources: README.md
2. コンソールログを確認: ブラウザの開発者ツールを開いて JavaScript エラーを確認します。Sources: README.md
3. API ログを確認: API が実行されているターミナルで Python エラーを確認します。Sources: README.md

まとめ

このトラブルシューティングガイドでは、DeepWiki-Open の使用中に発生する可能性のある一般的な問題に対する解決策を提供しました。API キーの問題、接続の問題、生成の問題など、さまざまな問題に対するトラブルシューティングの手順を説明しました。これらの手順に従うことで、DeepWiki-Open をスムーズに使用し、コードリポジトリのドキュメントを効率的に生成できます。

---