react native ai

Reaja ai nativo

Estrutura completa da pilha para criar aplicativos móveis de mobile de plataforma cruzada que suportam texto em tempo real / streaming de texto e bate-papo, serviços de imagem e linguagem natural para imagens com vários modelos e processamento de imagens.

Confira o tutorial em vídeo aqui

Características

• Apoio ao LLM para o OpenAi chatgpt, Claude antrópico, coere, coere, gêmeos e Mistral
• Uma variedade de modelos de imagem fornecidos pelo Fal.ai
• Respostas em tempo real / streaming de todos os provedores
• Assistentes OpenAI, incluindo intérprete de código e recuperação
• Proxy do servidor para ativar facilmente a autenticação e a autorização com o provedor de autenticação de escolha.
• Temas (sai da caixa com 5 temas) - Adicione facilmente temas adicionais com apenas algumas linhas de código.
• Processamento de imagem com bytescale

Uso

Gerar um novo projeto executando:

npx rn-ai

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

Executando o aplicativo

Mude para o diretório de aplicativos e execute:

npm start

Executando o servidor

Mude no diretório do servidor e execute:

npm run dev

Variáveis ​​de ambiente

As variáveis ​​do ambiente do servidor estão disponíveis no server/.env.example . Se já estiver presente, atualize esse nome de arquivo para .env e configure variáveis ​​de ambiente do servidor.

Temas

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

 const christmas = {
  // extend an existing 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

Aqui está 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, uma vez que a definição do modelo é adicionada à matriz MODELS , você deve atualizar src/screens/chat.tsx para suportar o novo modelo:

1. Crie estado local para manter novos dados de modelo
2. Função de atualização chat() para lidar com o novo tipo de modelo
3. Crie função generateModelReponse para chamar o novo modelo
4. Atualize getChatType no utils.ts para configurar o tipo LLM que corresponderá ao caminho do servidor.
5. Renderizar novo modelo na interface do usuário

 {
  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. Você provavelmente pode copiar e reutilizar muito do código de streaming dos outros caminhos existentes para iniciar.

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

Configurando modelos de imagem

Aqui está 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, uma vez que a definição do modelo é adicionada à matriz IMAGE_MODELS , você deve atualizar src/screens/images.tsx para suportar o novo modelo.

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

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

No servidor

Fal.ai

No server/src/images/fal , atualize a função Handler para levar em consideração o novo modelo.

Outros provedores de API

Crie um novo arquivo no server/src/images/modelName , atualize a função Handler para lidar com a nova chamada da API.

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