react native ai vision

Bereaksi AI Asli

Kerangka kerja tumpukan penuh untuk membangun aplikasi AI seluler lintas platform yang mendukung UI teks dan obrolan real-time / streaming LLM, layanan gambar dan bahasa alami untuk gambar dengan berbagai model, dan pemrosesan gambar.

Lihat video tutorialnya di sini

Fitur

• Dukungan LLM untuk OpenAI ChatGPT, Anthropic Claude, Cohere, Cohere Web, dan Mistral
• Berbagai model gambar disediakan oleh Fal.ai
• Respons real-time/streaming dari semua penyedia
• Asisten OpenAI termasuk penerjemah dan pengambilan kode
• Proksi server untuk mengaktifkan otentikasi dan otorisasi dengan mudah dengan penyedia autentikasi pilihan.
• Tema (keluar dari kotak dengan 5 tema) - menambahkan tema tambahan dengan mudah hanya dengan beberapa baris kode.
• Pemrosesan gambar dengan ByteScale

Penggunaan

Hasilkan proyek baru dengan menjalankan:

npx rn-ai

Selanjutnya, konfigurasikan variabel lingkungan Anda dengan CLI, atau lakukan nanti.

Menjalankan aplikasi

Ubah ke direktori aplikasi dan jalankan:

npm start

Menjalankan server

Ubah ke direktori server dan jalankan:

npm run dev

Tema

Untuk menambahkan tema baru, buka app/src/theme.ts dan tambahkan tema baru dengan konfigurasi berikut:

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

Di bagian bawah file, ekspor tema baru:

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

Mengonfigurasi Model LLM

Berikut cara menambah atau menghapus model LLM yang sudah ada.

Di aplikasi

Anda dapat menambah atau mengonfigurasi model dengan memperbarui MODELS di constants.ts .

Untuk menghapus model, hapus saja model yang tidak ingin Anda dukung.

Untuk menambahkan model, setelah definisi model ditambahkan ke array MODELS , Anda harus memperbarui src/screens/chat.tsx untuk mendukung model baru:

1. Buat negara bagian lokal untuk menyimpan data model baru
2. Perbarui fungsi chat() untuk menangani tipe model baru
3. Buat fungsi generateModelReponse untuk memanggil model baru
4. Perbarui getChatType di utils.ts untuk mengonfigurasi jenis LLM yang sesuai dengan jalur server Anda.
5. Render model baru di UI

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

Di server

Buat file baru di folder server/src/chat yang sesuai dengan tipe model yang Anda buat di aplikasi seluler. Anda mungkin dapat menyalin dan menggunakan kembali banyak kode streaming dari jalur lain yang ada untuk membantu Anda memulai.

Selanjutnya, perbarui server/src/chat/chatRouter untuk menggunakan rute baru.

Mengonfigurasi Model Gambar

Berikut cara menambah atau menghapus model Gambar yang sudah ada.

Di aplikasi

Anda dapat menambahkan atau mengonfigurasi model dengan memperbarui IMAGE_MODELS di constants.ts .

Untuk menghapus model, hapus saja model yang tidak ingin Anda dukung.

Untuk menambahkan model, setelah definisi model ditambahkan ke array IMAGE_MODELS , Anda harus memperbarui src/screens/images.tsx untuk mendukung model baru.

Pertimbangan utamanya adalah masukan. Apakah model menggunakan teks, gambar, atau keduanya sebagai masukan?

Aplikasi dikonfigurasi untuk menangani keduanya, namun Anda harus memperbarui fungsi generate untuk meneruskan nilai ke API yang sesuai.

Di server

Fal.ai

Di server/src/images/fal , perbarui fungsi handler untuk memperhitungkan model baru.

Penyedia API lainnya

Buat file baru di server/src/images/modelName , perbarui fungsi handler untuk menangani panggilan API baru.

Selanjutnya, perbarui server/src/images/imagesRouter untuk menggunakan rute baru.