TreeGPT: 트리 기반 대화를 시각화하기 위한 AI 채팅 인터페이스

일반 소개

TreeGPT는 Next.js 기반의 오픈 소스 채팅 애플리케이션으로, 기존의 선형 채팅 방식을 대체하여 속도와 사용 편의성을 개선하기 위해 트리 그래프 구조(방향성 비순환 그래프, DAG)를 통해 대규모 언어 모델(예: GPT)로 대화를 시각화하는 데 중점을 두고 있습니다. 이 프로젝트는 다음에서 호스팅됩니다. https://github.com/jamesmoore24/treegpt소스 코드를 복제하고 OpenAI API 키를 구성하여 애플리케이션을 로컬에서 실행할 수 있습니다(http://localhost:3000) 또는 방문 treegpt.app TreeGPT는 분기 대화 관리가 어렵고 검색이 불편한 기존 채팅 인터페이스를 해결합니다. 토큰 사용 불투명성 문제는 효율적인 상호 작용이 필요한 개발자, 연구원 또는 사용자에게 적합합니다.

기능 목록

• 트리 대화 시각화분기 탐색을 지원하는 대화형 트리 보기로 채팅을 표시합니다.
• 자연어 검색검색 대화 기록을 설명하여 임베디드 메타데이터를 사용하여 결과를 최적화합니다.
• 실시간 토큰 관리토큰 사용량 추적, 비용 추정 및 출력 제어 기능을 제공합니다.
• 다중 모델 지원지능형 모델 선택을 위해 OpenAI, Anthropic 등과 같은 LLM 제공업체에 연결합니다.
• 바로 가기 작업Vim과 유사한 버튼을 제공하여 모드를 빠르게 전환하고 노드를 편집할 수 있습니다.

도움말 사용

다음은 사용자가 처음부터 배포하고 핵심 기능을 익히는 데 도움이 되는 자세한 설치 및 사용 가이드로, 로컬에서 빌드하고 실행해야 하는 Next.js 애플리케이션입니다.

설치 프로세스

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 키 페이지에서 새 키를 복사하여 你的_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 작업을 모방하여 효율성을 향상시킵니다.

샘플 작업

"파이썬을 배우는 방법"에 대해 논의하고 싶다고 가정해 보겠습니다:

1. "파이썬을 배우는 방법"을 입력하면 답변을 확인할 수 있습니다.
2. Answer 노드를 클릭하고 "무료 리소스는 무엇인가요"를 입력하여 브랜치를 생성합니다.
3. 를 누릅니다. [j] 위로 이동하여 부모 노드를 확인한 다음 "마스터하는 데 얼마나 걸립니까"를 입력하여 새 브랜치를 만듭니다.
4. 대화 트리가 표시됩니다:

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

5. 를 누릅니다. [/] '무료 리소스'를 검색하여 관련 노드를 빠르게 찾을 수 있습니다.

주의

• 네트워크 요구 사항LLM API에 액세스하려면 런타임에 인터넷 연결이 필요합니다.
• 키 보안::.env 공용 리포지토리에 파일을 업로드해서는 안 됩니다.
• 성능 최적화대화 트리가 너무 크면 주기적으로 쓸모없는 노드를 정리하는 것이 좋습니다([dd]).

위의 단계를 통해 사용자는 쉽게 TreeGPT를 구축하고 강력한 트리 대화 기능을 로컬에서 경험할 수 있습니다.