Mulai menggunakan Gemini API menggunakan Vertex AI for Firebase SDK


Panduan ini menunjukkan cara untuk mulai melakukan panggilan ke Vertex AI Gemini API langsung dari aplikasi Anda menggunakan Vertex AI for Firebase SDK.

Prasyarat

Panduan ini mengasumsikan bahwa Anda sudah memahami penggunaan JavaScript untuk mengembangkan aplikasi web. Panduan ini tidak bergantung pada framework.

  • Pastikan lingkungan pengembangan dan aplikasi web Anda memenuhi persyaratan berikut:

    • (Opsional) Node.js
    • Browser web modern
  • (Opsional) Lihat aplikasi contoh.

    Download aplikasi contoh

    Anda dapat mencoba SDK dengan cepat, melihat implementasi lengkap dari berbagai kasus penggunaan, atau menggunakan aplikasi contoh jika tidak memiliki aplikasi web Anda sendiri. Untuk menggunakan aplikasi contoh, Anda harus menghubungkannya ke project Firebase.

Langkah 1: Siapkan project Firebase dan hubungkan aplikasi Anda ke Firebase

Jika Anda sudah memiliki project Firebase dan aplikasi yang terhubung ke Firebase

  1. Di Firebase console, buka halaman Build with Gemini, lalu klik kartu kedua untuk meluncurkan alur kerja yang membantu Anda melakukan tugas-tugas berikut. Jika Anda melihat tab Vertex AI di konsol, berarti tugas-tugas ini sudah selesai.

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

Jika Anda belum memiliki project Firebase dan aplikasi yang terhubung ke Firebase


Langkah 2: Tambahkan SDK

Setelah project Firebase disiapkan dan aplikasi Anda terhubung ke Firebase (lihat langkah sebelumnya), Anda kini dapat menambahkan Vertex AI for Firebase SDK ke aplikasi.

Library Vertex AI for Firebase menyediakan akses ke Vertex AI Gemini API dan 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 3: Lakukan inisialisasi layanan Vertex AI dan model generatif

Sebelum dapat melakukan panggilan API, Anda perlu melakukan inisialisasi layanan Vertex AI dan model generatif.

import { initializeApp } from "firebase/app";
import { getVertexAI, getGenerativeModel } from "firebase/vertexai-preview";

// 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 Vertex AI service
const vertexAI = getVertexAI(firebaseApp);

// Initialize the generative model with a model that supports your use case
// Gemini 1.5 models are versatile and can be used with all API capabilities
const model = getGenerativeModel(vertexAI, { model: "gemini-1.5-flash" });

Setelah menyelesaikan panduan memulai, pelajari cara memilih model Gemini dan (secara opsional) lokasi yang sesuai untuk kasus penggunaan dan aplikasi Anda.

Langkah 4: Panggil Vertex AI Gemini API

Setelah menghubungkan aplikasi ke Firebase, menambahkan SDK, serta melakukan inisialisasi layanan Vertex AI dan model generatif, Anda siap memanggil Vertex AI Gemini API.

Anda dapat menggunakan generateContent() untuk membuat teks dari permintaan perintah hanya teks:

import { initializeApp } from "firebase/app";
import { getVertexAI, getGenerativeModel } from "firebase/vertexai-preview";

// 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 Vertex AI service
const vertexAI = getVertexAI(firebaseApp);

// Initialize the generative model with a model that supports your use case
// Gemini 1.5 models are versatile and can be used with all API capabilities
const model = getGenerativeModel(vertexAI, { model: "gemini-1.5-flash" });

// 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();

Kamu bisa apa lagi?

Pelajari lebih lanjut model Gemini

Pelajari model yang tersedia untuk berbagai kasus penggunaan serta kuota dan harganya.

Mencoba kemampuan lain Gemini API

Pelajari cara mengontrol pembuatan konten

Anda juga dapat bereksperimen dengan prompt dan konfigurasi model menggunakan Vertex AI Studio.


Memberikan masukan tentang pengalaman Anda menggunakan Vertex AI for Firebase