react native ai

React natif AI

Framework complet pour la création d'applications AI mobiles multiplateformes prenant en charge LLM en temps réel / streaming de texte et de chat, des services d'image et un langage naturel sur des images avec plusieurs modèles, et le traitement d'image.

Découvrez le tutoriel vidéo ici

Caractéristiques

• Prise en charge de LLM pour Openai Chatgpt, Anthropic Claude, Cohere, Cohere Web, Gemini et Mistral
• Un tableau de modèles d'images fournis par Fal.ai
• Réponses en temps réel / en streaming de tous les fournisseurs
• Assistants OpenAI, y compris l'interprète de code et la récupération
• Proxy du serveur pour activer facilement l'authentification et l'autorisation avec le fournisseur d'authentification de choix.
• Le thème (sort de la boîte avec 5 thèmes) - Ajoutez facilement des thèmes supplémentaires avec seulement quelques lignes de code.
• Traitement d'image avec Bytescale

Usage

Générer un nouveau projet en fonctionnant:

npx rn-ai

Ensuite, configurez vos variables d'environnement avec la CLI, soit faites-le plus tard.

Exécution de l'application

Changez dans le répertoire de l'application et exécutez:

npm start

Exécution du serveur

Changer dans le répertoire du serveur et exécuter:

npm run dev

Variables d'environnement

Les variables d'environnement du serveur sont disponibles dans server/.env.example . S'il n'est pas déjà présent, mettez à jour ce nom de fichier sur .env et configurez les variables d'environnement du serveur.

Thème

Pour ajouter un nouveau thème, ouvrez app/src/theme.ts et ajoutez un nouveau thème avec la configuration suivante:

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

Au bas du fichier, exportez le nouveau thème:

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

Configuration des modèles LLM

Voici comment ajouter des modèles LLM nouveaux ou supprimés.

Dans l'application

Vous pouvez ajouter ou configurer un modèle en mettant à jour MODELS dans constants.ts .

Pour supprimer les modèles, supprimez simplement les modèles que vous ne souhaitez pas prendre en charge.

Pour ajouter des modèles, une fois la définition du modèle ajouté au tableau MODELS , vous devez mettre à jour src/screens/chat.tsx pour prendre en charge le nouveau modèle:

1. Créer un état local pour contenir de nouvelles données de modèle
2. Mettre à jour la fonction chat() pour gérer un nouveau type de modèle
3. Créer une fonction generateModelReponse pour appeler un nouveau modèle
4. Mettez à jour getChatType dans utils.ts pour configurer le type LLM qui correspondra à votre chemin de serveur.
5. Rendre un nouveau modèle dans l'interface utilisateur

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

Sur le serveur

Créez un nouveau fichier dans le dossier server/src/chat qui correspond au type de modèle que vous avez créé dans l'application mobile. Vous pouvez probablement copier et réutiliser une grande partie du code de streaming à partir des autres chemins existants pour vous aider à démarrer.

Ensuite, mettez à jour server/src/chat/chatRouter pour utiliser la nouvelle route.

Configuration des modèles d'image

Voici comment ajouter des modèles d'images nouveaux ou supprimés.

Dans l'application

Vous pouvez ajouter ou configurer un modèle en mettant à jour IMAGE_MODELS dans constants.ts .

Pour supprimer les modèles, supprimez simplement les modèles que vous ne souhaitez pas prendre en charge.

Pour ajouter des modèles, une fois que la définition du modèle est ajoutée au tableau IMAGE_MODELS , vous devez mettre à jour src/screens/images.tsx pour prendre en charge le nouveau modèle.

La principale considération est la contribution. Le modèle prend-il du texte, de l'image ou des deux comme entrées?

L'application est configurée pour gérer les deux, mais vous devez mettre à jour la fonction generate pour transmettre les valeurs à l'API en conséquence.

Sur le serveur

Fal.ai

Dans server/src/images/fal , mettez à jour la fonction de gestionnaire pour prendre en compte le nouveau modèle.

Autres fournisseurs d'API

Créez un nouveau fichier dans server/src/images/modelName , mettez à jour la fonction de gestionnaire pour gérer le nouvel appel API.

Ensuite, mettez à jour server/src/images/imagesRouter pour utiliser la nouvelle route.