react native ai

ネイティブAIを反応します

LLMリアルタイム /ストリーミングテキストとチャットUI、画像サービス、自然言語を複数のモデルを備えた画像、および画像処理をサポートするクロスプラットフォームモバイルAIアプリを構築するためのフルスタックフレームワーク。

ビデオチュートリアルはこちらをご覧ください

特徴

• Openai ChatGpt、人類のクロード、cohere、Cohere Web、Gemini、およびMistralのLLMサポート
• fal.aiが提供する画像モデルの配列
• すべてのプロバイダーからのリアルタイム /ストリーミング応答
• コードインタープリターと検索を含むOpenAIアシスタント
• Serverプロキシは、選択した認証プロバイダーとの認証と承認を簡単に有効にします。
• テーマ（5つのテーマで箱から出てきます） - わずか数行のコードでテーマを簡単に追加できます。
• バイトスケールによる画像処理

使用法

実行して新しいプロジェクトを生成します。

npx rn-ai

次に、CLIで環境変数を構成するか、後でそうします。

アプリを実行します

アプリディレクトリに変更して実行します。

npm start

サーバーの実行

サーバーディレクトリに変更して実行します。

npm run dev

環境変数

サーバー環境変数はserver/.env.exampleで使用できます。既に存在しない場合は、このファイル名を.envに更新し、サーバー環境変数を構成します。

テーマ

新しいテーマを追加するには、 app/src/theme.tsを開き、次の構成で新しいテーマを追加します。

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

ファイルの下部で、新しいテーマをエクスポートします。

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

LLMモデルの構成

新しいLLMモデルを追加または削除する方法は次のとおりです。

アプリで

constants.tsでMODELSを更新することにより、モデルを追加または構成できます。

モデルを削除するには、サポートしたくないモデルを削除するだけです。

モデルを追加するには、モデル定義がMODELSアレイに追加されたら、 src/screens/chat.tsxを更新して、新しいモデルをサポートする必要があります。

1. 新しいモデルデータを保持するためにローカル状態を作成します
2. chat()機能を更新して、新しいモデルタイプを処理します
3. generateModelReponse関数を作成して、新しいモデルを呼び出します
4. utils.tsのgetChatType更新して、サーバーパスに対応するLLMタイプを構成します。
5. UIで新しいモデルをレンダリングします

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

サーバー上

Mobileアプリで作成したモデルタイプに対応するserver/src/chatフォルダーに新しいファイルを作成します。おそらく、他の既存のパスから多くのストリーミングコードをコピーして再利用して、開始することができます。

次に、 server/src/chat/chatRouterを更新して、新しいルートを使用します。

画像モデルの構成

既存の画像モデルを追加または削除する方法は次のとおりです。

アプリで

IMAGE_MODELSをconstants.tsで更新して、モデルを追加または構成できます。

モデルを削除するには、サポートしたくないモデルを削除するだけです。

モデルを追加するには、モデル定義がIMAGE_MODELSアレイに追加されたら、新しいモデルをサポートするためにsrc/screens/images.tsxを更新する必要があります。

主な考慮事項は入力です。モデルはテキスト、画像、またはその両方を入力として取得しますか？

アプリは両方を処理するように構成されていますが、それに応じて値をAPIに渡すようにgenerate関数を更新する必要があります。

サーバー上

fal.ai

server/src/images/falで、ハンドラー関数を更新して、新しいモデルを考慮します。

他のAPIプロバイダー

server/src/images/modelNameで新しいファイルを作成し、ハンドラー関数を更新して新しいAPI呼び出しを処理します。

次に、 server/src/images/imagesRouterを更新して、新しいルートを使用します。