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. ナレッジベースの構築

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

4. 質問を開始

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

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

📦 ビルドとデプロイ

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

yarn build

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

⚠️ FAQ

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

README.md 5.5 KB Histórico Raw