react native ai vision

Reagir IA nativa

Estrutura de pilha completa para a construção de aplicativos móveis de IA multiplataforma com suporte a UIs de texto e bate-papo LLM em tempo real/streaming, serviços de imagem e linguagem natural para imagens com vários modelos e processamento de imagens.

Confira o vídeo tutorial aqui

Características

• Suporte LLM para OpenAI ChatGPT, Anthropic Claude, Cohere, Cohere Web e Mistral
• Uma variedade de modelos de imagem fornecidos por Fal.ai
• Respostas em tempo real/streaming de todos os provedores
• Assistentes OpenAI incluindo intérprete e recuperação de código
• Proxy de servidor para habilitar facilmente autenticação e autorização com o provedor de autenticação de sua escolha.
• Temas (vem prontos para uso com 5 temas) - adicione facilmente temas adicionais com apenas algumas linhas de código.
• Processamento de imagens com ByteScale

Uso

Gere um novo projeto executando:

npx rn-ai

Em seguida, configure suas variáveis ​​de ambiente com a CLI ou faça isso mais tarde.

Executando o aplicativo

Mude para o diretório do aplicativo e execute:

npm start

Executando o servidor

Mude para o diretório do servidor e execute:

npm run dev

Tema

Para adicionar um novo tema, abra app/src/theme.ts e adicione um novo tema com a seguinte configuração:

 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' ,
}

Na parte inferior do arquivo, exporte o novo tema:

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

Configurando Modelos LLM

Veja como adicionar novos ou remover modelos LLM existentes.

No aplicativo

Você pode adicionar ou configurar um modelo atualizando MODELS em constants.ts .

Para remover modelos, basta remover os modelos que você não deseja suportar.

Para adicionar modelos, depois que a definição do modelo for adicionada ao array MODELS , você deverá atualizar src/screens/chat.tsx para suportar o novo modelo:

1. Crie um estado local para armazenar novos dados de modelo
2. Atualize a função chat() para lidar com o novo tipo de modelo
3. Crie a função generateModelReponse para chamar o novo modelo
4. Atualize getChatType em utils.ts para configurar o tipo LLM que corresponderá ao caminho do seu servidor.
5. Renderizar novo modelo na UI

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

No servidor

Crie um novo arquivo na pasta server/src/chat que corresponda ao tipo de modelo que você criou no aplicativo móvel. Provavelmente, você pode copiar e reutilizar grande parte do código de streaming de outros caminhos existentes para começar.

Em seguida, atualize server/src/chat/chatRouter para usar a nova rota.

Configurando modelos de imagem

Veja como adicionar novos ou remover modelos de imagem existentes.

No aplicativo

Você pode adicionar ou configurar um modelo atualizando IMAGE_MODELS em constants.ts .

Para remover modelos, basta remover os modelos que você não deseja suportar.

Para adicionar modelos, depois que a definição do modelo for adicionada ao array IMAGE_MODELS , você deverá atualizar src/screens/images.tsx para suportar o novo modelo.

A consideração principal é a entrada. O modelo usa texto, imagem ou ambos como entradas?

O aplicativo está configurado para lidar com ambos, mas você deve atualizar a função generate para passar os valores para a API adequadamente.

No servidor

Fal.ai

Em server/src/images/fal , atualize a função do manipulador para levar em conta o novo modelo.

Outros provedores de API

Crie um novo arquivo em server/src/images/modelName , atualize a função do manipulador para lidar com a nova chamada de API.

Em seguida, atualize server/src/images/imagesRouter para usar a nova rota.