react native ai vision

反應本機人工智慧

用於建立跨平台行動人工智慧應用程式的全端框架，支援 LLM 即時/串流文字和聊天 UI、影像服務和具有多個模型的影像的自然語言以及影像處理。

在這裡查看視頻教程

特徵

• LLM 支援 OpenAI ChatGPT、Anthropic Claude、Cohere、Cohere Web 和 Mistral
• Fal.ai提供的一系列圖像模型
• 來自所有提供者的即時/串流回應
• OpenAI 助手，包括程式碼解釋器和檢索
• 伺服器代理可輕鬆啟用所選身份驗證提供者的身份驗證和授權。
• 主題（開箱即用，有 5 個主題）- 只需幾行程式碼即可輕鬆新增其他主題。
• 使用 ByteScale 進行影像處理

用法

透過運行產生一個新專案：

npx rn-ai

接下來，使用 CLI 配置環境變量，或稍後再配置。

運行應用程式

切換到應用程式目錄並運行：

npm start

運行伺服器

切換到伺服器目錄並運行：

npm run dev

主題化

若要新增主題，請開啟app/src/theme.ts並使用以下配置新增主題：

 const christmas = {
  // extend an esisting theme or start from scratch
  ... lightTheme ,
  name : 'Christmas' ,
  label : 'christmas' ,
  tintColor : '#ff0000' ,
  textColor : '#378b29' ,
  tabBarActiveTintColor : '#378b29' ,
  tabBarInactiveTintColor : '#ff0000' ,
  placeholderTextColor : '#378b29' ,
}

在文件底部，匯出新主題：

 export {
  lightTheme , darkTheme , hackerNews , miami , vercel , christmas
} 

配置LLM模型

以下是如何新增的或刪除現有的 LLM 模型。

在應用程式中

您可以透過更新constants.ts中的MODELS來新增或設定模型。

要刪除模型，只需刪除您不想支援的模型即可。

對於新增模型，將模型定義新增至MODELS陣列後，您應該更新src/screens/chat.tsx以支援新模型：

1. 建立本地狀態來保存新模型數據
2. 更新chat()函數以處理新的模型類型
3. 建立generateModelReponse函數來呼叫新模型
4. 更新utils.ts中的getChatType以設定與您的伺服器路徑相對應的 LLM 類型。
5. 在 UI 中渲染新模型

 {
  chatType . label . includes ( 'newModel' ) && (
    < FlatList
      data = { newModelReponse . messages }
      renderItem = { renderItem }
      scrollEnabled = { false }
    / >
  )
}

在伺服器上

在server/src/chat資料夾中建立一個與您在行動應用程式中建立的模型類型相對應的新檔案。您可以複製並重複使用其他現有路徑中的大量流程程式碼來幫助您入門。

接下來，更新server/src/chat/chatRouter以使用新路由。

配置影像模型

以下是如何新增的或刪除現有的影像模型。

在應用程式中

您可以透過更新constants.ts中的IMAGE_MODELS來新增或設定模型。

要刪除模型，只需刪除您不想支援的模型即可。

對於新增模型，將模型定義新增至IMAGE_MODELS陣列後，您應該更新src/screens/images.tsx以支援新模型。

主要考慮的是輸入。模型是否採用文字、圖像或兩者作為輸入？

該應用程式配置為處理這兩種情況，但您必須更新generate函數以相應地將值傳遞給 API。

在伺服器上

法爾艾

在server/src/images/fal中，更新處理函數以考慮新模型。

其他 API 提供者

在server/src/images/modelName中建立一個新文件，更新處理函數以處理新的 API 呼叫。

接下來，更新server/src/images/imagesRouter以使用新路由。