react native ai vision

ネイティブ AI に反応する

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

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

特徴

• OpenAI ChatGPT、Anthropic Claude、Cohere、Cohere Web、Mistral の LLM サポート
• Fal.ai が提供する一連の画像モデル
• すべてのプロバイダーからのリアルタイム/ストリーミング応答
• コードインタープリタと検索を含む OpenAI アシスタント
• 選択した認証プロバイダーによる認証と認可を簡単に有効にするサーバー プロキシ。
• テーマ (5 つのテーマが付属) - わずか数行のコードでテーマを簡単に追加できます。
• ByteScaleによる画像処理

使用法

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

npx rn-ai

次に、CLI を使用して環境変数を設定するか、後で設定します。

アプリの実行

アプリ ディレクトリに移動して、次を実行します。

npm start

サーバーの実行

サーバー ディレクトリに移動して、次を実行します。

npm run dev

テーマ設定

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

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

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

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

LLM モデルの構成

新しい 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 }
    / >
  )
}

サーバー上で

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

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

イメージモデルの構成

新しいイメージ モデルを追加または既存のイメージ モデルを削除する方法は次のとおりです。

アプリ内

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

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

モデルを追加する場合は、モデル定義をIMAGE_MODELS配列に追加したら、新しいモデルをサポートするようにsrc/screens/images.tsxを更新する必要があります。

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

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

サーバー上で

ファルアイ

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

他の API プロバイダー

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

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