Tutorial: Mulai menggunakan Gemini API


Tutorial ini menunjukkan cara mengakses Gemini API langsung dari aplikasi web Anda menggunakan Google AI JavaScript SDK. Anda dapat menggunakan SDK ini jika ingin bekerja langsung dengan REST API atau kode sisi server (seperti Node.js) untuk yang mengakses model Gemini di aplikasi web Anda.

Dalam tutorial ini, Anda akan mempelajari cara melakukan hal berikut:

Selain itu, tutorial ini berisi bagian tentang kasus penggunaan lanjutan (seperti counting token) serta opsi untuk mengontrol pembuatan konten.

Prasyarat

Tutorial ini mengasumsikan bahwa Anda sudah terbiasa menggunakan JavaScript untuk mengembangkan aplikasi web. Panduan ini tidak bergantung pada framework.

Untuk menyelesaikan tutorial ini, pastikan lingkungan pengembangan Anda memenuhi persyaratan berikut:

  • (Opsional) Node.js
  • Browser web modern

Menyiapkan project

Sebelum memanggil Gemini API, Anda perlu menyiapkan project, yang mencakup mendapatkan kunci API, mengimpor SDK, dan melakukan inisialisasi model.

Menyiapkan kunci API

Untuk menggunakan Gemini API, Anda memerlukan kunci API. Jika Anda belum memilikinya, membuat kunci di Google AI Studio.

Mendapatkan kunci API

Mengamankan kunci API Anda

Sebaiknya Anda tidak melakukan check in kunci API ke versi Anda sistem kontrol. Sebagai gantinya, Anda harus meneruskan kunci API ke aplikasi tepat sebelum melakukan inisialisasi model.

Semua cuplikan dalam tutorial ini mengasumsikan bahwa Anda mengakses kunci API sebagai konstanta global.

Mengimpor SDK dan melakukan inisialisasi model generatif

Sebelum dapat melakukan panggilan API, Anda harus mengimpor SDK dan menginisialisasi generatif.

<html>
  <body>
    <!-- ... Your HTML and CSS -->

    <script type="importmap">
      {
        "imports": {
          "@google/generative-ai": "https://esm.run/@google/generative-ai"
        }
      }
    </script>
    <script type="module">
      import { GoogleGenerativeAI } from "@google/generative-ai";

      // Fetch your API_KEY
      const API_KEY = "...";
      // Reminder: This should only be for local testing

      // Access your API key (see "Set up your API key" above)
      const genAI = new GoogleGenerativeAI(API_KEY);

      // ...

      // The Gemini 1.5 models are versatile and work with most use cases
      const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash"});

      // ...
    </script>
  </body>
</html>

Saat menentukan model, perhatikan hal-hal berikut:

  • Gunakan model yang spesifik untuk kasus penggunaan Anda (misalnya, gemini-1.5-flash untuk input multimodal). Dalam panduan ini, petunjuk untuk setiap mencantumkan model yang direkomendasikan untuk setiap kasus penggunaan.

Mengimplementasikan kasus penggunaan umum

Setelah project Anda siap, Anda dapat menjelajah menggunakan Gemini API untuk terapkan kasus penggunaan yang berbeda:

Membuat teks dari input hanya teks

Jika input perintah hanya menyertakan teks, gunakan model Gemini 1.5 atau Model Gemini 1.0 Pro dengan generateContent untuk menghasilkan output teks:

import { GoogleGenerativeAI } from "@google/generative-ai";

// Access your API key (see "Set up your API key" above)
const genAI = new GoogleGenerativeAI(API_KEY);

async function run() {
  // The Gemini 1.5 models are versatile and work with both text-only and multimodal prompts
  const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash"});

  const prompt = "Write a story about a magic backpack."

  const result = await model.generateContent(prompt);
  const response = await result.response;
  const text = response.text();
  console.log(text);
}

run();

Membuat teks dari input teks dan gambar (multimodal)

Gemini menyediakan berbagai model yang dapat menangani input multimodal (model Gemini 1.5) sehingga Anda dapat memasukkan dan gambar. Pastikan untuk meninjau persyaratan gambar untuk perintah.

Saat input perintah menyertakan teks dan gambar, gunakan model Gemini 1.5 dengan metode generateContent untuk menghasilkan output teks:

import { GoogleGenerativeAI } from "@google/generative-ai";

// Access your API key (see "Set up your API key" above)
const genAI = new GoogleGenerativeAI(API_KEY);

// Converts a File object to a GoogleGenerativeAI.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() {
  // The Gemini 1.5 models are versatile and work with both text-only and multimodal prompts
  const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });

  const prompt = "What's different between these pictures?";

  const fileInputEl = document.querySelector("input[type=file]");
  const imageParts = await Promise.all(
    [...fileInputEl.files].map(fileToGenerativePart)
  );

  const result = await model.generateContent([prompt, ...imageParts]);
  const response = await result.response;
  const text = response.text();
  console.log(text);
}

run();

Membuat percakapan bolak-balik (chat)

Dengan Gemini, Anda dapat membangun percakapan berformat bebas dalam beberapa giliran. Tujuan SDK menyederhanakan proses dengan mengelola status percakapan, jadi tidak seperti dengan generateContent, Anda tidak perlu menyimpan histori percakapan diri Anda sendiri.

Untuk membuat percakapan bolak-balik (seperti chat), gunakan model Gemini 1.5 atau Gemini 1.0 Pro, dan melakukan inisialisasi percakapan dengan memanggil startChat(). Kemudian, gunakan sendMessage() untuk mengirim pesan pengguna baru, yang juga akan menambahkan dan respons terhadap histori chat.

Ada dua kemungkinan opsi untuk role yang terkait dengan konten di percakapan:

  • user: peran yang memberikan perintah. Ini adalah nilai {i>default<i} untuk sendMessage memanggil, dan fungsi akan menampilkan pengecualian jika peran diteruskan.

  • model: peran yang memberikan respons. Peran ini dapat digunakan saat memanggil startChat() dengan history yang ada.

import { GoogleGenerativeAI } from "@google/generative-ai";

// Access your API key (see "Set up your API key" above)
const genAI = new GoogleGenerativeAI(API_KEY);

async function run() {
  // The Gemini 1.5 models are versatile and work with multi-turn conversations (like chat)
  const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash"});

  const chat = model.startChat({
    history: [
      {
        role: "user",
        parts: [{ text: "Hello, I have 2 dogs in my house." }],
      },
      {
        role: "model",
        parts: [{ text: "Great to meet you. What would you like to know?" }],
      },
    ],
    generationConfig: {
      maxOutputTokens: 100,
    },
  });

  const msg = "How many paws are in my house?";

  const result = await chat.sendMessage(msg);
  const response = await result.response;
  const text = response.text();
  console.log(text);
}

run();

Gunakan streaming untuk interaksi yang lebih cepat

Secara default, model menampilkan respons setelah menyelesaikan seluruh pembuatan {i>checkout<i}. Anda dapat mencapai interaksi yang lebih cepat dengan tidak menunggu seluruh hasil penelusuran, dan sebagai gantinya, gunakan streaming untuk menangani hasil yang tidak lengkap.

Contoh berikut menunjukkan cara mengimplementasikan streaming dengan Metode generateContentStream untuk menghasilkan teks dari input teks dan gambar .

// ...

const result = await model.generateContentStream([prompt, ...imageParts]);

let text = '';
for await (const chunk of result.stream) {
  const chunkText = chunk.text();
  console.log(chunkText);
  text += chunkText;
}

// ...

Anda dapat menggunakan pendekatan serupa untuk kasus penggunaan chat dan input hanya teks.

// Use streaming with text-only input
const result = await model.generateContentStream(prompt);

Lihat contoh chat di atas untuk mengetahui cara membuat instance chat.

// Use streaming with multi-turn conversations (like chat)
const result = await chat.sendMessageStream(msg);

Mengimplementasikan kasus penggunaan lanjutan

Kasus penggunaan umum yang dijelaskan di bagian sebelumnya dalam tutorial ini membantu Anda merasa nyaman menggunakan Gemini API. Bagian ini menjelaskan beberapa yang mungkin dianggap lebih canggih.

Panggilan fungsi

Panggilan fungsi memudahkan Anda untuk mendapatkan output data terstruktur dari model generatif. Anda kemudian dapat menggunakan output ini untuk memanggil API lain dan menampilkan data respons yang relevan dengan model. Dengan kata lain, panggilan fungsi membantu Anda menghubungkan model generatif ke sistem eksternal sehingga konten yang dihasilkan berisi informasi yang terbaru dan akurat. Pelajari lebih lanjut di tutorial panggilan fungsi.

Hitung token

Saat menggunakan perintah yang panjang, sebaiknya hitung token sebelum mengirim konten ke model. Contoh berikut menunjukkan cara menggunakan countTokens() untuk berbagai kasus penggunaan:

// For text-only input
const { totalTokens } = await model.countTokens(prompt);

// For text-and-image input (multimodal)
const { totalTokens } = await model.countTokens([prompt, ...imageParts]);

// For multi-turn conversations (like chat)
const history = await chat.getHistory();
const msgContent = { role: "user", parts: [{ text: msg }] };
const contents = [...history, msgContent];
const { totalTokens } = await model.countTokens({ contents });

Opsi untuk mengontrol pembuatan konten

Anda dapat mengontrol pembuatan konten dengan mengonfigurasi parameter model dan menggunakan setelan keamanan.

Mengonfigurasi parameter model

Setiap dialog yang Anda kirim ke model akan menyertakan parameter value yang mengontrol cara model akan menghasilkan respons. Model ini dapat memberikan hasil yang berbeda untuk parameter value yang berbeda. Pelajari lebih lanjut cara Parameter model. Konfigurasi ini akan dipertahankan selama instance model Anda aktif.

const generationConfig = {
  stopSequences: ["red"],
  maxOutputTokens: 200,
  temperature: 0.9,
  topP: 0.1,
  topK: 16,
};

// The Gemini 1.5 models are versatile and work with most use cases
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash",  generationConfig });

Gunakan setelan keamanan

Anda dapat menggunakan setelan keamanan untuk menyesuaikan kemungkinan mendapatkan respons yang mungkin dianggap berbahaya. Secara default, setelan keamanan memblokir konten dengan media dan/atau kemungkinan besar merupakan konten yang tidak aman di semua dimensi. Pelajari selengkapnya tentang Setelan keamanan.

Berikut ini cara menetapkan satu setelan keamanan:

import { HarmBlockThreshold, HarmCategory } from "@google/generative-ai";

// ...

const safetySettings = [
  {
    category: HarmCategory.HARM_CATEGORY_HARASSMENT,
    threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH,
  },
];

// The Gemini 1.5 models are versatile and work with most use cases
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash", safetySettings });

Anda juga dapat menetapkan lebih dari satu setelan keamanan:

const safetySettings = [
  {
    category: HarmCategory.HARM_CATEGORY_HARASSMENT,
    threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH,
  },
  {
    category: HarmCategory.HARM_CATEGORY_HATE_SPEECH,
    threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
  },
];

Langkah berikutnya

  • Desain prompt adalah proses pembuatan prompt yang mendapatkan respons yang diinginkan dari model bahasa. Menulis dialog yang terstruktur dengan baik adalah bagian penting untuk memastikan respons yang akurat dan berkualitas tinggi dari model bahasa. Pelajari praktik terbaik untuk menulis perintah.

  • Gemini menawarkan beberapa variasi model untuk memenuhi kebutuhan berbagai penggunaan kasus, seperti jenis dan kompleksitas input, implementasi untuk chat atau tugas bahasa dialog, dan batasan ukuran. Pelajari model Gemini yang tersedia.