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以使用新路由。