react native ai

React Native AI

Marco de pila completa para construir aplicaciones de IA móviles multiplataforma que admiten el texto en tiempo real / transmisión de textos y el chat, servicios de imagen y lenguaje natural con imágenes con múltiples modelos y procesamiento de imágenes.

Mira el video tutorial aquí

Características

• Soporte de LLM para Operai Chatgpt, Anthrope Claude, Cohere, Cohere Web, Gemini y Mistral
• Una variedad de modelos de imagen proporcionados por Fal.Ai
• Respuestas en tiempo real / transmisión de todos los proveedores
• Asistentes de Operai, incluido el intérprete de código y la recuperación
• Proxy del servidor para habilitar fácilmente la autenticación y la autorización con el proveedor de autores de elección.
• Tema (sale de la caja con 5 temas): agregue fácilmente temas adicionales con solo unas pocas líneas de código.
• Procesamiento de imágenes con bytescale

Uso

Genere un nuevo proyecto ejecutando:

npx rn-ai

A continuación, configure sus variables de entorno con la CLI o hágalo más tarde.

Ejecutando la aplicación

Cambiar en el directorio de aplicaciones y ejecutar:

npm start

Ejecutando el servidor

Cambiar en el directorio del servidor y ejecutar:

npm run dev

Variables de entorno

Las variables de entorno del servidor están disponibles en server/.env.example . Si ya no está presente, actualice este nombre de archivo .env y configure las variables de entorno del servidor.

Tema

Para agregar un nuevo tema, abrir app/src/theme.ts y agregar un nuevo tema con la siguiente configuración:

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

En la parte inferior del archivo, exporte el nuevo tema:

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

Configuración de modelos LLM

Aquí es cómo agregar nuevos o eliminar los modelos LLM existentes.

En la aplicación

Puede agregar o configurar un modelo actualizando MODELS en constants.ts .

Para eliminar modelos, simplemente elimine los modelos que no desea admitir.

Para agregar modelos, una vez que se agrega la definición del modelo a la matriz MODELS , debe actualizar src/screens/chat.tsx para admitir el nuevo modelo:

1. Cree un estado local para mantener los nuevos datos del modelo
2. Actualizar la función chat() para manejar un nuevo tipo de modelo
3. Crear la función generateModelReponse para llamar al nuevo modelo
4. Actualizar getChatType en utils.ts para configurar el tipo LLM que se correspondirá con la ruta de su servidor.
5. Renderiza un nuevo modelo en la interfaz de usuario

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

En el servidor

Cree un nuevo archivo en la carpeta server/src/chat que corresponde al tipo de modelo que creó en la aplicación móvil. Probablemente pueda copiar y reutilizar gran parte del código de transmisión de las otras rutas existentes para comenzar.

A continuación, actualice server/src/chat/chatRouter para usar la nueva ruta.

Configuración de modelos de imagen

Aquí es cómo agregar nuevos o eliminar modelos de imagen existentes.

En la aplicación

Puede agregar o configurar un modelo actualizando IMAGE_MODELS en constants.ts .

Para eliminar modelos, simplemente elimine los modelos que no desea admitir.

Para agregar modelos, una vez que la definición del modelo se agrega a la matriz IMAGE_MODELS , debe actualizar src/screens/images.tsx para admitir el nuevo modelo.

La consideración principal es la entrada. ¿El modelo toma texto, imagen o ambos como entradas?

La aplicación está configurada para manejar ambos, pero debe actualizar la función generate para pasar los valores a la API en consecuencia.

En el servidor

Fal.ai

En server/src/images/fal , actualice la función del controlador para tener en cuenta el nuevo modelo.

Otros proveedores de API

Cree un nuevo archivo en server/src/images/modelName , actualice la función del controlador para manejar la nueva llamada API.

A continuación, actualice server/src/images/imagesRouter para usar la nueva ruta.