Perintah AI campuran dengan Firebase AI Logic

Dipublikasikan: 20 Mei 2025

Untuk memenuhi kebutuhan pengguna, apa pun platform atau hardware yang mereka gunakan, Anda dapat menyiapkan penggantian ke cloud dengan Firebase AI Logic untuk Prompt API bawaan.

Membangun pengalaman AI hybrid

AI bawaan hadir dengan sejumlah manfaat, terutama:

  • Pemrosesan data sensitif secara lokal: Jika Anda bekerja dengan data sensitif, Anda dapat menawarkan fitur AI kepada pengguna dengan enkripsi end-to-end.
  • Penggunaan AI offline: Pengguna Anda dapat mengakses fitur AI, meskipun mereka sedang offline atau koneksinya terputus

Meskipun manfaat ini tidak berlaku untuk aplikasi cloud, Anda dapat memastikan pengalaman yang lancar bagi pengguna yang tidak dapat mengakses AI bawaan.

Mulai menggunakan Firebase

Pelajari cara membuat project Firebase dan menambahkan Firebase ke aplikasi web Anda.

Project Firebase adalah project Google Cloud, dengan konfigurasi dan layanan khusus Firebase. Pelajari lebih lanjut Google Cloud dan Firebase.

Menginstal SDK

Alur kerja ini menggunakan npm dan memerlukan pemaket modul atau alat framework JavaScript. Firebase AI Logic dioptimalkan agar dapat digunakan dengan pemaket modul untuk menghapus kode yang tidak digunakan dan mengurangi ukuran SDK.

  1. Instal Firebase JS SDK:

    npm install firebase
    
  2. Lakukan inisialisasi Firebase di aplikasi Anda.

Menyiapkan dan mengamankan Firebase AI Logic

  1. Di Firebase console, buka AI Services > AI Logic.

  2. Klik Mulai untuk meluncurkan alur kerja penyiapan.

  3. Saat diminta untuk memilih "penyedia Gemini API", sebaiknya pilih Gemini Developer API, yang memungkinkan Anda memulai dengan cepat tanpa biaya.

    Kapan saja setelahnya, Anda selalu dapat menyiapkan Vertex AI Gemini API (dan persyaratan penagihannya).

  4. Lanjutkan alur kerja konsol untuk menyiapkan API dan layanan terkait yang diperlukan untuk Firebase AI Logic.

    Mulai awal Juli 2026, tahap alur kerja ini akan otomatis menerapkan Firebase App Check untuk Logika AI, yang merupakan layanan kritis untuk membantu melindungi Gemini API saat diakses langsung dari aplikasi Anda. Sebagai bagian dari memulai (lihat langkah-langkah selanjutnya dalam panduan ini), Anda harus mengonfigurasi penyedia debug App Check untuk pengembangan lokal saat App Check diterapkan.

  5. Lanjutkan ke bagian berikutnya dalam panduan ini untuk mengonfigurasi penyedia debug App Check untuk pengembangan lokal, lalu kirim permintaan pertama Anda ke Gemini API.

Mengonfigurasi penyedia debug App Check untuk pengembangan lokal

Berikut cara menggunakan penyedia debug saat menjalankan aplikasi Anda dari localhost secara interaktif (misalnya, selama pengembangan lokal):

  1. Dalam build debug, aktifkan mode debug dengan menetapkan self.FIREBASE_APPCHECK_DEBUG_TOKEN ke true sebelum Anda menginisialisasi App Check. Contoh:

    self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
    initializeAppCheck(app, { /* App Check options */ });
    
  2. Buka aplikasi web Anda secara lokal, lalu buka alat developer browser. Di konsol debug, Anda akan melihat token debug:

    AppCheck debug token: "123a4567-b89c-12d3-e456-789012345678".
    You will need to safelist it in the Firebase console for it to work.
    
  3. Daftarkan token debug Anda ke App Check:

    1. Di Firebase console, buka Security > App Check > Apps tab.

    2. Temukan aplikasi Anda, klik menu tambahan (), lalu pilih Kelola token debug.

    3. Ikuti petunjuk di layar untuk mendaftarkan token debug Anda.

Untuk mengetahui detail tentang penyedia debug (termasuk cara mendapatkan token debug baru), lihat dokumen resmi App Check.

Mengirim permintaan ke Gemini API

  1. Inisialisasi dan buat instance.

  2. Berikan perintah pada model dengan input teks atau multimodal. Lihat contoh di subbagian berikut dalam panduan ini.

Perintah teks

Anda dapat menggunakan teks biasa untuk petunjuk Anda ke model. Misalnya, Anda dapat meminta model untuk menceritakan lelucon.

Anda memiliki beberapa opsi untuk cara merutekan permintaan:

  • Gunakan AI bawaan secara default jika tersedia dengan menyetel mode ke 'prefer_on_device' dalam fungsi getGenerativeModel(). Jika model bawaan tidak tersedia, permintaan akan kembali menggunakan model cloud secara lancar (jika Anda online).

  • Gunakan model cloud secara default saat Anda online dengan menyetel mode ke 'prefer_in_cloud' dalam fungsi getGenerativeModel(). Jika Anda sedang offline, permintaan akan otomatis beralih menggunakan AI bawaan jika tersedia.

// Initialize the Google AI service.
const googleAI = getAI(firebaseApp);

// Create a `GenerativeModel` instance with a model that supports your use case.
const model = getGenerativeModel(googleAI, { mode: 'prefer_on_device' });

const prompt = 'Tell me a joke';

const result = await model.generateContentStream(prompt);

for await (const chunk of result.stream) {
  const chunkText = chunk.text();
  console.log(chunkText);
}
console.log('Complete response', await result.response);

Perintah multimodal

Anda juga dapat memberikan perintah dengan gambar atau audio, selain teks. Anda dapat meminta model untuk mendeskripsikan konten gambar atau mentranskripsikan file audio.

Gambar harus diteruskan sebagai string berenkode base64 sebagai objek Firebase FileDataPart, yang dapat Anda lakukan dengan fungsi bantuan fileToGenerativePart().

// Converts a File object to a `FileDataPart` object.
// https://firebase.google.com/docs/reference/js/vertexai.filedatapart
async function fileToGenerativePart(file) {
    const base64EncodedDataPromise = new Promise((resolve) => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result.split(',')[1]);
      reader.readAsDataURL(file);
    });

    return {
      inlineData: { data: await base64EncodedDataPromise, mimeType: file.type },
    };
  }

  const fileInputEl = document.querySelector('input[type=file]');

  fileInputEl.addEventListener('change', async () => {
    const prompt = 'Describe the contents of this image.';

    const imagePart = await fileToGenerativePart(fileInputEl.files[0]);

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

    for await (const chunk of result.stream) {
      const chunkText = chunk.text();
      console.log(chunkText);
    }
    console.log(Complete response: ', await result.response);
  });

Demo

Buka demo Firebase AI Logic di berbagai perangkat dan browser. Anda dapat melihat bagaimana respons model berasal dari model AI bawaan atau cloud.

Saat menggunakan hardware yang didukung di Chrome, demo ini menggunakan Prompt API dan Gemini Nano. Hanya ada 3 permintaan yang dibuat untuk dokumen utama, file JavaScript, dan file CSS.

Firebase AI Logic berjalan di Chrome, menggunakan API AI bawaan.

Jika menggunakan browser lain atau sistem operasi tanpa dukungan AI bawaan, ada permintaan tambahan yang dibuat ke endpoint Firebase, https://firebasevertexai.googleapis.com.

Firebase AI Logic berjalan di Safari, membuat permintaan ke server Firebase.

Berpartisipasi dan memberikan masukan

Firebase AI Logic dapat menjadi opsi yang tepat untuk mengintegrasikan kemampuan AI ke aplikasi web Anda. Dengan menyediakan penggantian ke cloud saat Prompt API tidak tersedia, SDK memastikan aksesibilitas dan keandalan fitur AI yang lebih luas.

Ingatlah bahwa aplikasi cloud menciptakan ekspektasi baru untuk privasi dan fungsi, jadi penting untuk memberi tahu pengguna Anda tentang tempat data mereka diproses.