# 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` ディレクトリに移動します：

```bash
cd web
yarn install
```

### 2. 環境設定

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

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

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

### 3. 開発サーバーの起動

```bash
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. 回答の下に引用元を表示します。

## 📦 ビルドとデプロイ

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

```bash
yarn build
```

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

## ⚠️ FAQ

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