react native ai

Reagieren Sie einheimische AI

Full Stack Framework zum Erstellen von plattformübergreifenden mobilen AI-Apps, die LLM-Echtzeit- / Streaming-Text- und Chat-UIs, Bilddienste und natürliche Sprache für Bilder mit mehreren Modellen und Bildverarbeitung unterstützen.

Schauen Sie sich hier das Video -Tutorial an

Merkmale

• LLM -Unterstützung für OpenAI -Chatgpt, Anthropic Claude, Cohere, Cohere Web, Gemini und Mistral
• Eine Reihe von Bildmodellen von Fal.ai zur Verfügung gestellt
• Echtzeit- / Streaming-Antworten von allen Anbietern
• Offene Assistenten wie Code -Dolmetscher und Abruf
• Server -Proxy, um die Authentifizierung und Autorisierung mit dem Auth -Anbieter der Wahl einfach zu ermöglichen.
• Themen (kommt mit 5 Themen aus der Box) - Fügen Sie einfach zusätzliche Themen mit nur wenigen Codezeilen hinzu.
• Bildverarbeitung mit Bytescale

Verwendung

Generieren Sie ein neues Projekt durch Laufen:

npx rn-ai

Konfigurieren Sie als nächstes Ihre Umgebungsvariablen mit der CLI oder tun Sie dies später.

Ausführen der App

Wechseln Sie in das App -Verzeichnis und führen Sie aus:

npm start

Ausführen des Servers

Wechseln Sie in das Serververzeichnis und führen Sie aus:

npm run dev

Umgebungsvariablen

Die Server -Umgebungsvariablen sind im server/.env.example verfügbar. Wenn Sie bereits nicht vorhanden sind, aktualisieren Sie diesen Dateinamen auf .env und konfigurieren Sie die Server -Umgebungsvariablen.

Themen

Um ein neues Thema hinzuzufügen, öffnen Sie app/src/theme.ts und fügen Sie ein neues Thema mit der folgenden Konfiguration hinzu:

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

Exportieren Sie am Ende der Datei das neue Thema:

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

Konfigurieren von LLM -Modellen

Hier erfahren Sie, wie Sie neue LLM -Modelle hinzufügen oder entfernen können.

In der App

Sie können ein Modell hinzufügen oder konfigurieren, indem Sie MODELS in constants.ts aktualisieren.

Entfernen Sie zum Entfernen von Modellen einfach die Modelle, die Sie nicht unterstützen möchten.

Für das Hinzufügen von Modellen sollten Sie nach der Addition der Modelldefinition zum MODELS -Array src/screens/chat.tsx aktualisieren, um das neue Modell zu unterstützen:

1. Erstellen Sie den lokalen Staat, um neue Modelldaten zu halten
2. chat()
3. Erstellen Sie die Funktion generateModelReponse , um ein neues Modell aufzurufen
4. Aktualisieren Sie getChatType in utils.ts um den LLM -Typ zu konfigurieren, der Ihrem Serverpfad entspricht.
5. Neues Modell in der Benutzeroberfläche machen

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

Auf dem Server

Erstellen Sie eine neue Datei im Ordner server/src/chat , der dem in der mobilen App erstellten Modelltyp entspricht. Sie können wahrscheinlich einen Großteil des Streaming-Codes von den anderen vorhandenen Pfaden kopieren und wiederverwenden, um Ihnen den Einstieg zu erleichtern.

Aktualisieren Sie als nächstes server/src/chat/chatRouter um die neue Route zu verwenden.

Bildmodelle konfigurieren

Hier erfahren Sie, wie Sie neue Bildmodelle hinzufügen oder entfernen.

In der App

Sie können ein Modell hinzufügen oder konfigurieren, indem Sie IMAGE_MODELS in constants.ts aktualisieren.

Entfernen Sie zum Entfernen von Modellen einfach die Modelle, die Sie nicht unterstützen möchten.

Zum Hinzufügen von Modellen sollten Sie src/screens/images.tsx zum Hinzufügen des Bilds im IMAGE_MODELS addiert, um das neue Modell zu unterstützen.

Hauptüberlegung ist die Eingabe. Nimmt das Modell Text, Bild oder beides als Eingaben?

Die App ist so konfiguriert, dass Sie beides verarbeitet werden. Sie müssen jedoch die Funktion generate , um die Werte entsprechend an die API zu übergeben.

Auf dem Server

Fal.ai

Aktualisieren Sie in server/src/images/fal die Handler -Funktion, um das neue Modell zu berücksichtigen.

Andere API -Anbieter

Erstellen Sie eine neue Datei in server/src/images/modelName und aktualisieren Sie die Handler -Funktion, um den neuen API -Aufruf zu verarbeiten.

Aktualisieren Sie als nächstes server/src/images/imagesRouter um die neue Route zu verwenden.