Dify Chat Assistant

Dify アプリケーション向けの、ChatGPT風モダンWebチャットインターフェースです。単一HTMLファイルで動作し、ビルド不要です。

機能一覧

Dify API連携 - 任意のDify Chatflow/Workflowアプリに接続
SSEストリーミング - リアルタイムの応答表示
マルチモデル対応 - Claude Opus / Sonnet / Haiku を切替可能
デュアルモード - チャットモードと会話要約モード
ファイルアップロード - 画像（Vision）、PDF、ドキュメント分析
ローカルディレクトリ読み込み - フォルダ構造とファイル内容をコンテキストとして送信
Markdownレンダリング - シンタックスハイライト付きコードブロック（marked.js + highlight.js）
コードブロックコピー - ホバーでコピーボタンを表示、ワンクリックでクリップボードにコピー
コードブロックダウンロード - 個別のコードブロックをファイルとしてダウンロード（40+言語対応）
回答ダウンロード - AI回答をMarkdownファイルとしてエクスポート
会話管理 - 会話の作成・切替・削除（LocalStorageに永続化）
ダーク/ライトテーマ - OS設定の自動検出と手動切替
応答メタデータ - 使用モデル、トークン数、レイテンシ、コスト、ステップ数を表示
アクセシビリティ - スクリーンリーダー対応（aria-label）
レスポンシブデザイン - サイドバー折りたたみ対応

クイックスタート

リポジトリをクローン

git clone https://github.com/<your-username>/dify-chat.git
cd dify-chat

APIキーを設定

cp .env.example .env
# .env を編集してDify APIキーを記入

ブラウザで開く
```
open index.html
```
または index.html をダブルクリックするだけでOKです。
アプリ内で設定
- サイドバーの「設定」ボタンをクリック
- Dify API URLとAPIキーを入力
- 設定はLocalStorageに保存されます

前提条件

Difyアカウント（クラウド版またはセルフホスト版）
デプロイ済みのDify ChatflowアプリとそのAPIキー
モダンブラウザ（Chrome, Firefox, Safari, Edge）

ディレクトリ構成

dify-chat/
├── index.html                 # 単一ファイルアプリ（HTML + CSS + JS）
├── .env.example               # APIキーのテンプレート
└── dify/
    └── Dify Chat Assistant.yml  # Dify Chatflow DSL（インポート可能）

Dify Chatflow構成

同梱のDify DSLは以下のフローを実装しています:

Start → 現在時刻取得 → ドキュメントフィルタ(Code) → ドキュメント抽出 → IF/ELSE(docs?)
  ├─ TRUE  (ドキュメントなし) → モデル分岐 → LLM-Opus/Sonnet/Haiku → 回答
  └─ FALSE (ドキュメントあり) → 要約LLM（Opus, 低temperature） → 回答

チャットモード: ユーザーの選択に応じてOpus/Sonnet/Haikuにルーティング
要約モード: Opusを使用し、構造化プロンプトで議事録を要約

dify/Dify Chat Assistant.yml をDifyワークスペースにインポートして利用できます。

設定項目

設定	デフォルト	説明
API URL	`https://api.dify.ai/v1`	Dify APIのベースURL
APIキー	（なし）	DifyアプリのAPIキー（`app-xxx`）
テーマ	システム	`dark` / `light` / OS設定に自動追従
モード	チャット	`chat` / `summary`
モデル	Opus	`opus` / `sonnet` / `haiku`

すべての設定は LocalStorage に保存されます。

Difyセットアップ手順

Difyで新しい Chatflow（advanced-chat）アプリを作成
dify/Dify Chat Assistant.yml をDSLインポートで読み込み
必要なプラグインをインストール: langgenius/anthropic
Difyのモデルプロバイダー設定でAnthropic APIキーを設定
アプリを公開し、APIアクセスからAPIキーをコピー

ライセンス

MIT

dify_chat