OpenAI Assistant API Chat下載 - OpenAI Assistant API Chat源代碼下載

OpenAI Assistant API Chat

其他源碼

1.0.0

下載

代碼重構90％完成。 ---->分支---> code_refactor

Openai Assistant API聊天

介紹

歡迎來到OpenAI助理API聊天存儲庫！此創新的聊天應用程序允許用戶與OpenAI最新的“ GPT-4-1106-Preview”模型提供動力的AI助手互動。這是一個令人興奮的空間，技術會符合對話，並提供了AI互動的獨特體驗。

演示

代理42

Beta和正在進行的工作

請注意，此應用程序目前處於Beta階段，並且正在不斷發展。我們正在努力工作，以增強用戶體驗並添加新功能。在此階段，您可能會遇到一些打ic或意外的行為。

部署

該應用程序可以與Vercel一起部署，Vercel是一個用於靜態站點和無服務器功能的雲平台。 Vercel提供了一種簡單的方法，可以直接從存儲庫中部署應用程序。

要使用Vercel部署此應用程序，請單擊下面的“使用Vercel部署”按鈕。這將帶您進入Vercel平台，在那裡您將通過部署過程進行指導。

請注意，您需要在部署過程中提供OpenAI API密鑰。此鍵用於驗證您的應用程序對OpenAI API的請求。

除OpenAI API密鑰外，您還可以在部署過程中指定默認助手ID。此ID確定聊天應用程序中使用了哪個AI助手。如果設置此ID，則應用程序將使用此助手進行聊天。如果您沒有設置此ID，則該應用程序將提示用戶輸入助手詳細信息。

要使用OpenAI API密鑰和硬編碼助手ID部署應用程序，請單擊下面的“使用Vercel”按鈕。將提示您輸入OpenAI API密鑰和助手ID。

特徵

個性化的AI助手：自定義助手的姓名，模型和描述，以獲得獨特的聊天體驗。
互動聊天經驗：與AI助手進行動態對話。
強大的AI響應：利用Openai的“ GPT-4-1106-Preiview”模型（128K上下文），以供智能，上下文感知的聊天響應。
文件上傳：用戶可以上傳文件以供助手分析。
GPT-4視覺集成：將圖片發送到AI，它將描述其看到的內容，提供對視覺內容的見解和理解。
函數調用：（即將到來）經驗互動功能，例如基於聊天上下文的API調用。
代碼解釋：（即將推出）助手可以執行Pytho代碼。

入門

先決條件

Node.js安裝在您的計算機上。
主動的OpenAI API鍵。

安裝

克隆存儲庫：

 git clone https://github.com/admineral/OpenAI-Assistant-API-Chat.git

安裝依賴項：導航到項目目錄並運行：
```
 npm install
```
環境設置：在根目錄中創建.env文件，並添加OpenAI API密鑰：
```
 OPENAI_API_KEY=your_openai_api_key
```
運行應用程序：使用以下方式啟動服務器
```
 npm run dev
```

貢獻

您的貢獻使該項目蓬勃發展。無論是報告錯誤，建議功能還是提交代碼更改，都非常感謝所有幫助。

報告問題：如果您遇到任何問題，請在我們的GitHub頁面上打開一個問題。
功能請求：有一個主意嗎？通過開頭與我們分享。
拉請求：想直接影響嗎？分叉存儲庫，進行更改並提交拉動請求。

我們期待通過社區的支持和創造力發展這個項目！

應用架構概述

chatmanager（ `ChatManager.ts` ）

角色：用於管理聊天狀態和操作的中心部分。
功能：
- startAssistant ：初始化聊天助手，管理文件上傳並處理線程創建。
- sendMessage ：將用戶消息發送到助手並更新聊天。
- getChatState ：檢索聊天的當前狀態，包括消息和助手狀態。

API層（ `api.js` ）

目的：充當前端和各種API路線之間的中介。
關鍵功能：
- uploadImageAndGetDescription ：使用GPT-4 Vision API上傳圖像並獲取描述。
- createAssistant ， createThread ， runAssistant ：處理助手創建，線程管理和助理操作。

助理模塊（ `assistantModules.ts` ）

角色：管理與聊天助手有關的任務，例如文件準備和助手初始化。
關鍵功能：
- prepareUploadFile ：為聊天助手準備和上傳文件。
- initializeAssistant ：初始化具有特定詳細信息的聊天助手。
- createChatThread ：創建一個帶有初始消息的聊天線程。

聊天模塊（ `chatModules.ts` ）

目的：管理與聊天有關的功能。
關鍵功能：
- submitUserMessage ：將用戶消息提交到聊天中。
- fetchAssistantResponse ：從助手那裡獲取最新消息。
- updateChatState ：使用新消息更新聊天狀態。

詳細的代碼說明

chatmanager實施（ `ChatManager.ts` ）

Singleton模式：確保ChatManager的單個實例管理聊天狀態和操作。
狀態管理：處理聊天狀態，包括消息，線程ID，助手狀態和加載狀態。
錯誤處理：聊天操作期間的魯棒錯誤處理。
API集成：與API層集成以進行消息發送/接收和聊天線程管理。

API層（ `api.js` ）

中央API管理：通過乾淨的API接口簡化前端交互。
錯誤處理：確保在API請求中使用錯誤處理的平滑應用程序操作。

前端互動

React Hooks ：在useChatState.ts中使用鉤子進行狀態管理。
用戶界面： InputForm和MessageList與ChatManager交互，以顯示消息和處理用戶輸入。

主要組成部分

chatmanager（ ChatManager.ts ） ：管理聊天狀態和操作的中心組件。
API層（ api.js ） ：API相互作用的中介。
助理模塊（ assistantModules.ts ） ：處理與聊天助理有關的任務。
聊天模塊（ chatModules.ts ） ：管理聊天功能。

詳細的故障

`ChatManager.ts`

這是管理聊天狀態和操作的核心類。

 class ChatManager {
  private state : ChatState ;
  private static instance : ChatManager | null = null ;

  // Singleton pattern to ensure a single ChatManager instance
  private constructor ( setChatMessages : ( messages : any [ ] ) => void , setStatusMessage : ( message : string ) => void ) {
    this . state = {
      /* State initialization */
    } ;
    console . log ( 'ChatManager initialized' ) ;
  }

  // Method to get the current instance of ChatManager
  public static getInstance ( setChatMessages : ( messages : any [ ] ) => void , setStatusMessage : ( message : string ) => void ) : ChatManager {
    if ( this . instance === null ) {
      this . instance = new ChatManager ( setChatMessages , setStatusMessage ) ;
    }
    return this . instance ;
  }

  // Method to start the assistant
  async startAssistant ( assistantDetails : any , file : File | null , initialMessage : string ) : Promise < void > {
    // ... Function logic including API calls to initialize assistant and create chat thread
  }

  // Method to send a message
  async sendMessage ( input : string ) : Promise < void > {
    // ... Function logic to handle message sending
  }

  // Method to get the current chat state
  getChatState ( ) : ChatState {
    console . log ( 'Getting chat state' ) ;
    return this . state ;
  }
}

關鍵功能：
- Singleton模式僅確保創建一個ChatManager的實例。
- 管理聊天的狀態，包括消息，助手的ID，線程ID和加載狀態。
- startAssistant ：啟動助手並設置聊天線程。
- sendMessage ：將消息發送給助手。
- getChatState ：檢索聊天的當前狀態。

`api.js`

該模塊包含聊天應用程序所需的各種API交互的功能。

 // Example of an API function
export const uploadImageAndGetDescription = async ( base64Image ) => {
  // Code to upload an image and get a description using the OpenAI API
} ;

export const createAssistant = async ( assistantDetails ) => {
  // Code to create an assistant
} ;

// Other API functions like 'createThread', 'runAssistant', etc.

目的：為API交互提供集中式且乾淨的界面。
關鍵功能：
- uploadImageAndGetDescription ：上傳一個base64編碼圖像並獲取描述。
- createAssistant ：創建一個新的助手實例。
- 用於管理線程，跑步助手等的其他功能。

`assistantModules.ts`

包含與準備和管理聊天助手有關的功能。

 export const prepareUploadFile = async ( file : File , setStatusMessage : ( message : string ) => void ) : Promise < string > => {
  // Logic to prepare and upload a file for the chat assistant
} ;

export const initializeAssistant = async ( assistantDetails , fileId ) : Promise < string > => {
  // Logic to initialize an assistant with given details
} ;

export const createChatThread = async ( inputMessage : string ) : Promise < string > => {
  // Logic to create a chat thread
} ;

目的：處理與助手相關的任務，例如文件準備和助理初始化。

`chatModules.ts`

管理與聊天有關的功能，主要處理消息。

 export const submitUserMessage = async ( input : string , threadId : string ) : Promise < void > => {
  // Logic to submit a user's message to the chat
} ;

export const fetchAssistantResponse = async ( runId : string , threadId : string ) : Promise < string > => {
  // Logic to fetch the latest messages from the assistant
} ;

export const updateChatState = ( prevMessages : Message [ ] , newMessages : Message [ ] , setChatMessages : ( messages : any [ ] ) => void ) : Promise < void > => {
  // Logic to update the chat state with new messages
} ;