Samouczek: pierwsze kroki z interfejsem Gemini API


W tym samouczku pokazujemy, jak uzyskać dostęp do interfejsu Gemini API bezpośrednio z aplikacji internetowej za pomocą pakietu SDK JavaScript AI od Google. Możesz użyć tego pakietu SDK, jeśli nie chcesz korzystać bezpośrednio z interfejsów API REST lub kodu po stronie serwera (np. Node.js) w celu uzyskania dostępu do modeli Gemini w aplikacji internetowej.

Z tego samouczka dowiesz się, jak:

Dodatkowo ten samouczek zawiera sekcje o zaawansowanych przypadkach użycia (takich jak tokeny liczenia) oraz opcje kontrolowania generowania treści.

Wymagania wstępne

W tym samouczku zakładamy, że potrafisz korzystać z JavaScriptu do tworzenia aplikacji internetowych. Ten przewodnik nie wymaga platformy.

Przed ukończeniem samouczka upewnij się, że Twoje środowisko programistyczne spełnia te wymagania:

  • (Opcjonalnie) Node.js
  • Nowoczesna przeglądarka

Konfigurowanie projektu

Zanim wywołasz Gemini API, musisz skonfigurować projekt, co obejmuje uzyskanie klucza interfejsu API, zaimportowanie pakietu SDK i zainicjowanie modelu.

Konfigurowanie klucza interfejsu API

Aby korzystać z Gemini API, potrzebujesz klucza interfejsu API. Jeśli nie masz jeszcze klucza, utwórz go w Google AI Studio.

Uzyskiwanie klucza interfejsu API

Zabezpiecz klucz interfejsu API

Zdecydowanie zalecamy, aby nie sprawdzać klucza interfejsu API w systemie kontroli wersji. Zamiast tego przekaż klucz interfejsu API do aplikacji tuż przed zainicjowaniem modelu.

Wszystkie fragmenty kodu w tym samouczku zakładają, że używasz klucza interfejsu API jako stałej globalnej.

Zaimportuj pakiet SDK i zainicjuj model generatywny

Zanim będzie można wykonywać wywołania interfejsu API, musisz zaimportować pakiet SDK i zainicjować model generatywny.

<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>

Podczas określania modelu pamiętaj o tych kwestiach:

  • Użyj modelu dopasowanego do Twojego przypadku użycia (np. gemini-1.5-flash służy do wprowadzania multimodalnych danych wejściowych). W tym przewodniku instrukcje dotyczące poszczególnych implementacji wskazują zalecany model w poszczególnych przypadkach użycia.

Wdrażanie typowych przypadków użycia

Po skonfigurowaniu projektu możesz zacząć korzystać z Gemini API, aby wdrażać różne przypadki użycia:

Generuj tekst na podstawie samego tekstu

Jeśli prompt zawiera tylko tekst, do wygenerowania tekstu wyjściowego użyj modelu Gemini 1.5 lub Gemini 1.0 Pro z funkcją generateContent:

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

Generuj tekst na podstawie danych wejściowych z tekstem i obrazem (multimodalny)

Gemini udostępnia różne modele, które obsługują dane wejściowe multimodalne (modele Gemini 1.5 i Gemini 1.0 Pro Vision), dzięki czemu można w nich wpisywać zarówno tekst, jak i obrazy. Zapoznaj się z wymaganiami dotyczącymi obrazów w promptach.

Jeśli dane wejściowe promptu zawierają zarówno tekst, jak i obrazy, do wygenerowania tekstu wyjściowego użyj modelu Gemini 1.5 lub Gemini 1.0 Pro Vision z metodą generateContent:

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

Tworzenie rozmów wieloetapowych (czat)

Za pomocą Gemini możesz prowadzić swobodne rozmowy na różnych etapach. Pakiet SDK upraszcza ten proces, zarządzając stanem rozmowy, więc w przeciwieństwie do generateContent nie musisz samodzielnie zapisywać historii rozmowy.

Aby utworzyć rozmowę wieloetapową (np. czat), użyj modelu Gemini 1.5 lub Gemini 1.0 Pro i zainicjuj czat, dzwoniąc pod numer startChat(). Następnie użyj sendMessage(), aby wysłać nową wiadomość użytkownika. Ta wiadomość i odpowiedź zostaną też dołączone do historii czatu.

Istnieją 2 opcje pola role związane z treścią rozmowy:

  • user: rola, która dostarcza prompty. Jest to wartość domyślna w przypadku wywołań funkcji sendMessage. W przypadku przekazania innej roli funkcja zgłasza wyjątek.

  • model: rola, która dostarcza odpowiedzi. Tej roli można używać podczas wywoływania funkcji startChat() przy użyciu istniejącego konta history.

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

Używaj strumieniowania, aby przyspieszyć interakcje

Domyślnie model zwraca odpowiedź po zakończeniu całego procesu generowania. Możesz przyspieszyć interakcje, nie czekając na cały wynik. Zamiast tego użyj strumieniowania do obsługi częściowych wyników.

Z przykładu poniżej dowiesz się, jak wdrożyć strumieniowanie za pomocą metody generateContentStream, aby generować tekst na podstawie promptu wejściowego tekstowego i obrazu.

// ...

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;
}

// ...

Podobne podejście możesz zastosować w przypadkach użycia samego tekstu i czatu.

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

Aby dowiedzieć się, jak utworzyć instancję chat, zapoznaj się z przykładem czatu powyżej.

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

Wdrażanie zaawansowanych przypadków użycia

Typowe przypadki użycia opisane w poprzedniej sekcji tego samouczka pomagają opanować interfejs Gemini API. W tej sekcji opisujemy niektóre przypadki użycia, które mogą być uznane za bardziej zaawansowane.

Wywoływanie funkcji

Wywołania funkcji ułatwiają uzyskiwanie danych wyjściowych uporządkowanych danych z modeli generatywnych. Następnie możesz używać tych danych wyjściowych do wywoływania innych interfejsów API i zwracania odpowiednich danych odpowiedzi do modelu. Inaczej mówiąc, wywołanie funkcji pomaga połączyć modele generatywne z systemami zewnętrznymi, aby generowane treści zawierały najbardziej aktualne i dokładne informacje. Więcej informacji znajdziesz w samouczku na temat wywoływania funkcji.

Policz tokeny

W przypadku długich promptów liczenie tokenów przed wysłaniem jakiejkolwiek treści do modelu może być przydatne. Poniższe przykłady pokazują, jak używać countTokens() w różnych przypadkach:

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

Opcje kontrolowania generowania treści

Możesz kontrolować generowanie treści, konfigurując parametry modelu lub używając ustawień bezpieczeństwa.

Skonfiguruj parametry modelu

Każdy prompt wysyłany do modelu zawiera wartości parametrów, które kontrolują sposób generowania odpowiedzi przez model. Model może generować różne wyniki w zależności od wartości parametrów. Dowiedz się więcej o parametrach modelu. Konfiguracja jest przechowywana przez cały okres istnienia instancji modelu.

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 });

Korzystanie z ustawień bezpieczeństwa

Korzystając z ustawień bezpieczeństwa, możesz dostosować prawdopodobieństwo otrzymywania odpowiedzi, które mogą być uznane za szkodliwe. Domyślnie ustawienia bezpieczeństwa blokują treści o średnim prawdopodobieństwie lub z dużym prawdopodobieństwem, że mogą być niebezpieczne we wszystkich wymiarach. Dowiedz się więcej o ustawieniach bezpieczeństwa.

Aby skonfigurować jedno ustawienie bezpieczeństwa:

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 });

Możesz też skonfigurować więcej niż jedno ustawienie bezpieczeństwa:

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

Co dalej

  • Projektowanie promptów to proces tworzenia promptów, które wywołują pożądaną odpowiedź z modeli językowych. Napisanie dobrze uporządkowanych promptów jest niezbędną częścią gwarantowania dokładnych, wysokiej jakości odpowiedzi na podstawie modelu językowego. Poznaj sprawdzone metody pisania promptów.

  • Gemini oferuje kilka wersji modelu, aby sprostać różnym przypadkom użycia, takim jak typy danych wejściowych i złożoność, implementacje czatu lub innych zadań związanych z językiem w oknie dialogowym oraz ograniczenia rozmiaru. Dowiedz się więcej o dostępnych modelach Gemini.