TreeGPT: ツリーベースの会話を可視化するAIチャットインターフェース

はじめに

TreeGPTはNext.jsをベースとしたオープンソースのチャットアプリケーションで、GPTのような大規模言語モデル（LLM）を使った会話をツリーグラフ構造（DAG：Directed acyclic graph）を使って可視化することに焦点を当てています。このプロジェクトは https://github.com/jamesmoore24/treegptソースコードをクローンし、OpenAI APIキー(http://localhost:3000を参照)、または treegpt.app TreeGPTは、会話の分岐が管理しにくく、検索が不便な、従来のチャットインターフェースを解決します。 トークン 利用の不透明性の問題は、開発者、研究者、あるいは効率的なインタラクションを必要とするユーザーに適している。

機能一覧

• ツリーダイアログの視覚化チャットをインタラクティブなツリービューで表示し、分岐ナビゲーションをサポート。
• 自然言語検索検索ダイアログのトランスクリプトを記述することにより、埋め込まれたメタデータを使用して結果を最適化します。
• リアルタイムのトークン管理トークンの使用状況を追跡し、コスト見積もりと出力制御を提供します。
• マルチモデル対応OpenAI、AnthropicなどのLLMプロバイダーに接続し、インテリジェントなモデル選択を実現。
• ショートカット操作: Vimのようなボタンがあり、素早くモードを切り替えてノードを編集できる。

ヘルプの使用

TreeGPTはNext.jsアプリケーションであり、ローカルでビルドして実行する必要があります。 以下では、ユーザーがゼロからTreeGPTをデプロイし、そのコア機能をマスターするのに役立つ、詳細なインストールおよび使用ガイドを紹介します。

設置プロセス

1. 環境準備
   • Node.jsのインストールアクセス nodejs.orgv18をインストールするには、v18以降をダウンロードしてインストールしてください。インストール後 node -v バージョンを確認する。
   • npmまたはyarnをインストールする: Node.jsにはnpmが付属していますが、yarnがお好みなら npm install -g yarn インストール。
2. クローン倉庫
   • ターミナルを開き、以下のコマンドを実行する：

     git clone https://github.com/jamesmoore24/treegpt.git
     cd treegpt
     

   • TreeGPTのソースコードがダウンロードされ、プロジェクトディレクトリに移動します。
3. 依存関係のインストール
   • それをターミナルに入力する：

     npm install
     

     あるいは毛糸を使う：

     yarn install
     

   • 依存関係のインストールが完了するまで待ちます（ネットワークによっては数分かかる場合があります）。
4. OpenAI API キーを設定する
   • プロジェクトのルート・ディレクトリに .env ファイルに次のように入力する：

     OPENAI_API_KEY=你的_api_密钥
     

   • キーを入手するOpenAIのウェブサイト(platform.openai.comをコピーして置き換える。 你的_api_密钥.
   • 鍵が漏洩しないようにファイルを保存する。

アプリケーションの実行

1. 開発サーバーの起動
   • ターミナルで実行：

     npm run dev
     

     あるいは

     yarn dev
     

   • 起動後、ターミナルには次のように表示される。 http://localhost:3000 のアドレス。
2. アプリケーションへのアクセス
   • ブラウザを開き、次のように入力する。 http://localhost:3000(または端末に表示されたアドレス）。
   • ページがロードされると、TreeGPTのチャット画面が表示されます。

コア機能の操作

• ツリーダイアログの視覚化
  • チャットを始める。入力ボックスに質問（例：「コードを最適化する方法」）を入力し、エンターキーを押すと、回答がツリーのノードとして表示されます。
  • ブランチの作成任意のノードをクリックし、新しい質問（例：「特定のツール」）を入力すると、子ノードが生成されます。
  • ナビゲーションツリーマウスを使ってノードをクリックするか、ショートカット・キーを押してください。 [j] 上を目指す。[1-9] 支店を選択する。[r] ルート・ノードを返す。
  • 概要を見るインターフェイスは、対話ツリーの構造をミニマップで表示し、マウスホバーノードで内容をプレビューできます。
• 自然言語検索
  • プレス [/] 検索モードに入り、説明を入力する（例：「昨日議論したアルゴリズム」）。
  • システムは、埋め込まれたメタデータに基づいて、一致する対話ノードを返す。
• リアルタイムのトークン管理
  • インターフェイスには、トークンの使用量と現在の会話にかかる推定コストが表示されます。
  • 出力の長さやコンテキストのウィンドウサイズは設定で調整できる。
• マルチモデル対応
  • OpenAIはデフォルトで使用されており、モデル（例えばAnthropic）を切り替える必要がある場合は、コード内で他のAPIキーを設定する必要があります（プロジェクトのドキュメントを参照してください）。
  • システムは内蔵のルールに基づいて最適なモデルをインテリジェントに選択する。
• ショートカット操作
  • [``]チャットモードとビューモードの切り替え
  • [e]現在のノードの内容を編集する。
  • [dd]現在のノードとそのサブツリーを削除します。
  • これらのコマンドはVimの操作を模倣し、効率を向上させる。

サンプル操作

例えば、「Pythonを学ぶ方法」について議論したいとしましょう：

1. Pythonの学び方」と入力すると、答えが表示される。
2. Answerノードをクリックし、"What are free resources "と入力してブランチを作成する。
3. プレス [j] 上に移動して親ノードを確認し、"how long does it take to master "と入力して新しいブランチを作る。
4. ダイアログツリーが表示されます：

如何学习 Python
├── 有哪些免费资源
└── 需要多久掌握

5. プレス [/] フリー・リソース」を検索して、関連するノードを素早く見つける。

ほら

• ネットワーク要件LLM APIにアクセスするには、実行時にインターネット接続が必要です。
• キーセキュリティ::.env ファイルは公開リポジトリにアップロードすべきではありません。
• パフォーマンス最適化ダイアログツリーが大きくなりすぎた場合は、定期的に無駄なノードを削除することをお勧めします。[dd]).

以上の手順で、ユーザーは簡単にTreeGPTを構築し、その強力なツリーダイアログをローカルで体験することができます。