react native ai vision

Reaccionar con IA nativa

Marco de trabajo completo para crear aplicaciones de IA móviles multiplataforma que admitan LLM en tiempo real/transmisión de texto y UI de chat, servicios de imágenes y lenguaje natural para imágenes con múltiples modelos y procesamiento de imágenes.

Mira el vídeo tutorial aquí

Características

• Soporte de LLM para OpenAI ChatGPT, Anthropic Claude, Cohere, Cohere Web y Mistral
• Una variedad de modelos de imágenes proporcionados por Fal.ai
• Respuestas en tiempo real/streaming de todos los proveedores
• Asistentes OpenAI que incluyen intérprete y recuperación de código
• Proxy de servidor para habilitar fácilmente la autenticación y autorización con el proveedor de autenticación de su elección.
• Tematización (viene de 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

Cambie al directorio de la aplicación y ejecute:

npm start

Ejecutando el servidor

Cambie al directorio del servidor y ejecute:

npm run dev

Tematización

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

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

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

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

Configuración de modelos LLM

A continuación se explica cómo agregar modelos LLM nuevos o eliminar 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. Crear estado local para contener datos de nuevos modelos
2. Actualizar la función chat() para manejar el nuevo tipo de modelo
3. Crear la función generateModelReponse para llamar al nuevo modelo
4. Actualice getChatType en utils.ts para configurar el tipo de LLM que corresponderá con la ruta de su servidor.
5. Representar 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 corresponda al tipo de modelo que creó en la aplicación móvil. Probablemente puedas copiar y reutilizar gran parte del código de transmisión de otras rutas existentes para comenzar.

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

Configurar modelos de imagen

A continuación se explica cómo agregar modelos de imagen 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 se agrega la definición del modelo 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 debes 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 utilizar la nueva ruta.