KnowledgeBase/web

Simple Knowledge Base - フロントエンド界面 (Web)

React 19 と Vite で構築されたモダンな RAG ナレッジベースQ&Aインターフェースです。直感的なドキュメント管理、ビジュアル化されたモデル設定、そしてスムーズな AI 対話体験を提供します。

✨ 機能のハイライト

• 🤖 没入型対話: ChatGPT 風のインターフェース。ストリーミング応答、Markdown レンダリング、コードハイライトをサポート。
• 📚 ドキュメントナレッジベース:
  • サイドバーでアップロードされたファイルを管理。
  • ファイルのインデックス状態 (解析中/インデックス済み/失敗) をリアルタイムで確認可能。
  • ファイルのチャンク設定 (Chunk Size/Overlap) の再構成が可能。
• ⚙️ モデルとパラメータのチューニング:
  • モデル管理: モデルプロバイダー (OpenAI, Gemini, ローカル) の追加/編集/削除を視覚的に操作可能。
  • パラメータ設定: Temperature, Max Tokens, Top K (取得数), 類似度しきい値をリアルタイムで調整可能。
  • ハイブリッド検索: 全文検索機能のオン/オフを切り替え可能。
• 🔍 検索の透明性:
  • 回答ごとに引用元のソースファイルを表示。
  • 「検索結果を表示」パネルで、具体的な RAG 取得セグメントとその類似度スコアを確認でき、検索精度のデバッグに役立ちます。
• 🌍 多言語対応: 日本語、中国語、英語のインターフェース切り替えを内蔵。

🛠️ 技術スタック

• コア: React 19, TypeScript
• ビルド: Vite
• UI フレームワーク: TailwindCSS
• アイコン: Lucide React
• HTTP 通信: Fetch API

🚀 クイックスタート

1. 依存関係のインストール

web ディレクトリに移動します：

cd web
yarn install

2. 環境設定

フロントエンドは主に Vite のプロキシ設定を介してバックエンドに接続します。vite.config.ts を開き、プロキシ設定を確認してください：

// vite.config.ts
server: {
  port: 13001, // フロントエンドの実行ポート
  proxy: {
    '/api': {
      target: 'http://localhost:13000', // バックエンドサービスの実行アドレス
      changeOrigin: true,
    },
  },
}

バックエンドが他のアドレスで実行されている場合は、target フィールドを変更してください。

3. 開発サーバーの起動

yarn dev

ブラウザで http://localhost:13001 にアクセスしてください。

📖 利用ガイド

1. システムへのログイン

• 初回利用時は、デフォルトの管理者アカウント（バックエンドが初期化済みの場合）を使用するか、「新規登録」をクリックして新しいアカウントを作成してください。
• デフォルトテストアカウント (バックエンドの初期化状況によります):
  • ユーザー名: admin
  • パスワード: 123456

2. モデルの設定

システムにログイン後、サイドバー下部の 「システム設定」 -> 「モデルプロバイダーの管理」 をクリックします。 少なくとも1つの LLM モデル（対話用）と1つの Embedding モデル（インデックス用）を追加する必要があります。

設定例 (OpenAI):

• 名称: GPT-4o
• プロバイダー: OpenAI Compatible
• Model ID: gpt-4o
• Base URL: https://api.openai.com/v1
• API Key: sk-......

3. ナレッジベースの構築

1. サイドバーの 「ファイルを追加」 をクリックします。
2. ローカルの PDF, TXT, または Markdown ファイルを選択します。
3. 表示される 「インデックス設定」 ウィンドウで、Embedding モデルを選択し、チャンク分割パラメータを調整します（デフォルトのままでも構いません）。
4. 「インデックス開始」 をクリックし、ファイルの状態が緑色のチェックマーク（インデックス済み）になるまで待ちます。

4. 質問を開始

右側のチャットボックスに質問を入力します。システムは以下の処理を行います：

1. 質問をベクトルに変換します。
2. ナレッジベースから関連するセグメントを検索します。
3. セグメントをコンテキストとして LLM に送信し、回答を生成します。
4. 回答の下に引用元を表示します。

📦 ビルドとデプロイ

本番環境用の静的ファイルを生成します：

yarn build

構築されたファイルは dist ディレクトリに生成されます。Nginx やその他の静的ファイルサーバーを使用してデプロイできます。

⚠️ FAQ

• アップロードに失敗する？: バックエンドサービスが起動しているか、また uploads ディレクトリに書き込み権限があるか確認してください。
• 「テキスト返信を生成できません」と表示される？: 「システム設定」で正しい LLM モデルが選択されているか、また API キーが有効か確認してください。
• コンテンツが検索されない？: 設定で「類似度しきい値」を下げるか、Embedding モデルの設定が正しいか確認してください。