Membangun pengalaman hybrid di aplikasi Web dengan model yang dihosting di perangkat dan cloud

Buat aplikasi dan fitur web yang didukung AI dengan inferensi hybrid menggunakan Firebase AI Logic. Inferensi hybrid memungkinkan menjalankan inferensi menggunakan model di perangkat jika tersedia dan otomatis kembali ke model yang dihosting di cloud jika tidak tersedia (dan sebaliknya).

Halaman ini menjelaskan cara memulai menggunakan SDK klien. Setelah menyelesaikan penyiapan standar ini, lihat opsi dan kemampuan konfigurasi tambahan (seperti output terstruktur).

Perhatikan bahwa inferensi di perangkat didukung untuk aplikasi web yang berjalan di Chrome di Desktop.

Langsung ke contoh kode

Kasus penggunaan yang direkomendasikan dan kemampuan yang didukung

Kasus penggunaan yang direkomendasikan:

• Menggunakan model di perangkat untuk inferensi menawarkan:

  • Privasi yang ditingkatkan
  • Konteks lokal
  • Inferensi tanpa biaya
  • Fungsi offline

• Menggunakan fungsi hybrid menawarkan:

  • Menjangkau 100% audiens Anda, terlepas dari ketersediaan model di perangkat atau konektivitas internet

Kemampuan dan fitur yang didukung untuk inferensi di perangkat:

Inferensi di perangkat hanya mendukung pembuatan teks satu putaran (bukan chat), dengan output streaming atau non-streaming. Fitur ini mendukung kemampuan pembuatan teks berikut:

• Membuat teks dari input khusus teks

• Membuat teks dari input teks dan gambar, khususnya jenis gambar input JPEG dan PNG

Anda juga dapat membuat output terstruktur, termasuk JSON dan enum.

Sebelum memulai

Perhatikan hal berikut ini:

• Inferensi menggunakan model di perangkat menggunakan Prompt API dari Chrome; sedangkan inferensi menggunakan model yang dihosting di cloud menggunakan Gemini API penyedia yang Anda pilih (baik Gemini Developer API maupun Vertex AI Gemini API).

• Halaman ini menjelaskan cara memulai pengembangan menggunakan localhost (pelajari lebih lanjut cara menggunakan API di localhost dalam dokumentasi Chrome).

  Setelah menyelesaikan penyiapan standar ini, lihat opsi dan kemampuan konfigurasi tambahan (seperti output terstruktur).

• Setelah menerapkan fitur, Anda dapat mengizinkan pengguna akhir untuk mencoba fitur Anda di aplikasi sebenarnya.

Mulai di localhost

Langkah-langkah memulai ini menjelaskan penyiapan umum yang diperlukan untuk permintaan prompt yang didukung yang ingin Anda kirim.

Langkah 1: Menyiapkan Chrome dan Prompt API untuk inferensi di perangkat

1. Pastikan Anda menggunakan Chrome versi terbaru. Update di chrome://settings/help.
   Inferensi di perangkat tersedia mulai Chrome v139 dan yang lebih baru.

2. Aktifkan model multimodal di perangkat dengan menetapkan flag berikut ke Enabled:

   • chrome://flags/#prompt-api-for-gemini-nano-multimodal-input

3. Mulai ulang Chrome.

4. (Opsional) Download model di perangkat sebelum permintaan pertama.

   Prompt API terintegrasi ke Chrome; namun, model di perangkat tidak tersedia secara default. Jika Anda belum mendownload model sebelum permintaan pertama untuk inferensi di perangkat, permintaan akan otomatis memulai download model di latar belakang.

   Lihat petunjuk untuk mendownload model di perangkat

   1. Buka Alat Developer > Konsol.

   2. Jalankan perintah berikut:

      await LanguageModel.availability();
      

   3. Pastikan output-nya adalah available, downloading, atau downloadable.

   4. Jika output-nya adalah downloadable, mulai download model dengan menjalankan:

      await LanguageModel.create();
      

   5. Anda dapat menggunakan callback monitor berikut untuk memproses progres download dan memastikan model available sebelum membuat permintaan:

      const session = await LanguageModel.create({
        monitor(m) {
          m.addEventListener("downloadprogress", (e) => {
            console.log(`Downloaded ${e.loaded * 100}%`);
          });
        },
      });
      

Langkah 2: Menyiapkan project Firebase dan menghubungkan aplikasi Anda ke Firebase

1. Login ke Firebase console, lalu pilih project Firebase Anda.

   Belum memiliki project Firebase?

   Jika Anda belum memiliki project Firebase, klik tombol untuk membuat project Firebase baru, lalu gunakan salah satu opsi berikut:

   • Opsi 1: Buat project Firebase yang sepenuhnya baru (dan project yang mendasarinya secara otomatis) dengan memasukkan nama project baru di langkah pertama alur kerja.Google Cloud

   • Opsi 2: "Tambahkan Firebase" ke project yang ada dengan mengklik Tambahkan Firebase ke project Google Cloud (di bagian bawah halaman).Google Cloud Di langkah pertama alur kerja, masukkan nama project dari project yang ada, lalu pilih project dari daftar yang ditampilkan.

   Selesaikan langkah-langkah alur kerja di layar yang tersisa untuk membuat project Firebase. Perhatikan bahwa saat diminta, Anda tidak perlu menyiapkan Google Analytics untuk menggunakan Firebase AI Logic SDK.

2. Di Firebase console, buka Layanan AI > AI Logic.

3. Klik Mulai untuk meluncurkan alur kerja terpandu yang membantu Anda menyiapkan API yang diperlukan dan resource untuk project Anda.

4. Siapkan project Anda untuk menggunakan penyedia "Gemini API".

   Sebaiknya mulai menggunakan Gemini Developer API. Kapan saja, Anda dapat selalu menyiapkan Vertex AI Gemini API (dan persyaratannya untuk penagihan).

   Untuk Gemini Developer API, konsol akan mengaktifkan API yang diperlukan dan membuat kunci Gemini API di project Anda.
   Jangan tambahkan kunci Gemini API ini ke codebase aplikasi Anda. Pelajari lebih lanjut.

5. Jika diminta dalam alur kerja konsol, ikuti petunjuk di layar untuk mendaftarkan aplikasi Anda dan menghubungkannya ke Firebase.

6. Lanjutkan ke langkah berikutnya dalam panduan ini untuk menambahkan SDK ke aplikasi Anda.

Langkah 3: Menambahkan SDK

Library Firebase menyediakan akses ke API untuk berinteraksi dengan model generatif. Library ini disertakan sebagai bagian dari Firebase JavaScript SDK untuk Web.

1. Instal Firebase JS SDK untuk Web menggunakan npm:

   npm install firebase
   

2. Inisialisasi Firebase di aplikasi Anda:

   import { initializeApp } from "firebase/app";
   
   // TODO(developer) Replace the following with your app's Firebase configuration
   // See: https://firebase.google.com/docs/web/learn-more#config-object
   const firebaseConfig = {
     // ...
   };
   
   // Initialize FirebaseApp
   const firebaseApp = initializeApp(firebaseConfig);
   

Langkah 4: Menginisialisasi layanan dan membuat instance model

Siapkan hal berikut sebelum Anda mengirim permintaan prompt ke model.

1. Inisialisasi layanan untuk penyedia API yang Anda pilih.

2. Buat instance GenerativeModel. Pastikan Anda melakukan tindakan berikut:

   1. Panggil getGenerativeModel setelah atau pada interaksi pengguna akhir (seperti klik tombol). Ini adalah prasyarat untuk inferenceMode.

   2. Tetapkan mode ke salah satu opsi berikut:

      • PREFER_ON_DEVICE: Gunakan model di perangkat jika tersedia; jika tidak, kembali ke model yang dihosting di cloud.

      • ONLY_ON_DEVICE: Gunakan model di perangkat jika tersedia; jika tidak, tampilkan pengecualian.

      • PREFER_IN_CLOUD: Gunakan model yang dihosting di cloud jika tersedia; jika tidak, kembali ke model di perangkat.

      • ONLY_IN_CLOUD: Gunakan model yang dihosting di cloud jika tersedia; jika tidak, tampilkan pengecualian.

import { initializeApp } from "firebase/app";
import { getAI, getGenerativeModel, GoogleAIBackend, InferenceMode } from "firebase/ai";

// TODO(developer) Replace the following with your app's Firebase configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize FirebaseApp
const firebaseApp = initializeApp(firebaseConfig);

// Initialize the Gemini Developer API backend service
const ai = getAI(firebaseApp, { backend: new GoogleAIBackend() });

// Create a `GenerativeModel` instance
// Call `getGenerativeModel` after or on an end-user interaction
// Set the mode (for example, use the on-device model if it's available)
const model = getGenerativeModel(ai, { mode: InferenceMode.PREFER_ON_DEVICE });

Langkah 5: Mengirim permintaan prompt ke model

Bagian ini menunjukkan cara mengirim berbagai jenis input untuk membuat berbagai jenis output, termasuk:

• Membuat teks dari input khusus teks
• Membuat teks dari input teks dan gambar (multimodal)

Jika Anda ingin membuat output terstruktur (seperti JSON atau enum), maka gunakan salah satu contoh "buat teks" berikut dan tambahan konfigurasikan model untuk merespons sesuai dengan skema yang disediakan.

Membuat teks dari input khusus teks

Anda dapat menggunakan generateContent() untuk membuat teks dari prompt yang berisi teks:

// Imports + initialization of FirebaseApp and backend service + creation of model instance

// Wrap in an async function so you can use await
async function run() {
  // Provide a prompt that contains text
  const prompt = "Write a story about a magic backpack."

  // To generate text output, call `generateContent` with the text input
  const result = await model.generateContent(prompt);

  const response = result.response;
  const text = response.text();
  console.log(text);
}

run();

Perhatikan bahwa Firebase AI Logic juga mendukung streaming respons teks menggunakan generateContentStream (bukan generateContent).

Membuat teks dari input teks dan gambar (multimodal)

Anda dapat menggunakan generateContent() untuk membuat teks dari prompt yang berisi teks dan file gambar—dengan memberikan setiap file input mimeType dan file itu sendiri.

Jenis gambar input yang didukung untuk inferensi di perangkat adalah PNG dan JPEG.

// Imports + initialization of FirebaseApp and backend service + creation of model instance

// Converts a File object to a Part object.
async function fileToGenerativePart(file) {
  const base64EncodedDataPromise = new Promise((resolve) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result.split(',')[1]);
    reader.readAsDataURL(file);
  });
  return {
    inlineData: { data: await base64EncodedDataPromise, mimeType: file.type },
  };
}

async function run() {
  // Provide a text prompt to include with the image
  const prompt = "Write a poem about this picture:";

  const fileInputEl = document.querySelector("input[type=file]");
  const imagePart = await fileToGenerativePart(fileInputEl.files[0]);

  // To generate text output, call `generateContent` with the text and image
  const result = await model.generateContent([prompt, imagePart]);

  const response = result.response;
  const text = response.text();
  console.log(text);
}

run();

Perhatikan bahwa Firebase AI Logic juga mendukung streaming respons teks menggunakan generateContentStream (bukan generateContent).

Mengizinkan pengguna akhir untuk mencoba fitur Anda

Agar pengguna akhir dapat mencoba fitur Anda di aplikasi, Anda harus mendaftar ke Chrome Origin Trials. Perhatikan bahwa durasi dan penggunaan untuk uji coba ini terbatas.

1. Daftar ke Chrome Origin Trial Prompt API. Anda akan diberi token.

2. Berikan token di setiap halaman web yang ingin Anda aktifkan fitur uji coba. Gunakan salah satu opsi berikut:

   • Berikan token sebagai tag meta di tag <head>: <meta http-equiv="origin-trial" content="TOKEN">

   • Berikan token sebagai header HTTP: Origin-Trial: TOKEN

   • Berikan token secara terprogram.

Kamu bisa apa lagi?

Anda dapat menggunakan berbagai opsi dan kemampuan konfigurasi tambahan untuk pengalaman hybrid:

• Menetapkan mode inferensi

• Mengganti model penggantian respons yang dihosting di cloud default

• Menggunakan konfigurasi model untuk mengontrol respons (seperti suhu)

• Membuat output terstruktur (seperti JSON)

Fitur yang belum tersedia untuk inferensi di perangkat

Sebagai rilis pratinjau, tidak semua kemampuan Web SDK tersedia untuk inferensi di perangkat. Fitur berikut belum didukung untuk inferensi di perangkat (tetapi biasanya tersedia untuk inferensi berbasis cloud).

• Membuat teks dari jenis input file gambar selain JPEG dan PNG

  • Dapat kembali ke model yang dihosting di cloud; namun, mode ONLY_ON_DEVICE akan menampilkan error.

• Membuat teks dari input audio, video, dan dokumen (seperti PDF)

  • Dapat kembali ke model yang dihosting di cloud; namun, mode ONLY_ON_DEVICE akan menampilkan error.

• Membuat gambar menggunakan Gemini atau Imagen model

  • Dapat kembali ke model yang dihosting di cloud; namun, mode ONLY_ON_DEVICE akan menampilkan error.

• Menyediakan file menggunakan URL dalam permintaan multimodal. Anda harus menyediakan file sebagai data inline ke model di perangkat.

• Multi-turn chat

  • Dapat kembali ke model yang dihosting di cloud; namun, mode ONLY_ON_DEVICE akan menampilkan error.

• Streaming dua arah dengan Gemini Live API

• Memberikan model alat untuk membantunya membuat respons (seperti pemanggilan fungsi, eksekusi kode, konteks URL, dan Grounding dengan Google Search)

• Menjumlahkan token

  • Selalu menampilkan error. Jumlahnya akan berbeda antara model yang dihosting di cloud dan model di perangkat, sehingga tidak ada penggantian respons yang intuitif.

• Pemantauan AI di Firebase konsol untuk inferensi di perangkat.

  • Perhatikan bahwa inferensi apa pun yang menggunakan model yang dihosting di cloud dapat di pantau seperti inferensi lainnya menggunakan Firebase AI Logic client SDK untuk Web.

Berikan masukan tentang pengalaman Anda dengan Firebase AI Logic