Pierwsze kroki z interfejsem Gemini API w aplikacjach internetowych

Ten samouczek pokazuje, jak uzyskać dostęp do interfejsu Gemini API bezpośrednio z aplikacji internetowej za pomocą pakietu SDK Google AI JavaScript. Możesz użyć tego pakietu SDK, jeśli nie chcesz pracować bezpośrednio z interfejsami API REST ani z kodem po stronie serwera (np. Node.js) w celu uzyskiwania dostępu do modeli Gemini w aplikacji internetowej.

Z tego samouczka dowiesz się, jak:

Poza tym samouczek zawiera sekcje dotyczące zaawansowanych przypadków użycia (np. tokenów liczących) oraz opcji kontrolowania generowania treści.

Wymagania wstępne

W tym samouczku zakładamy, że umiesz tworzyć aplikacje internetowe za pomocą JavaScriptu. Ten przewodnik jest niezależny od platformy.

Aby ukończyć ten samouczek, sprawdź, czy Twoje środowisko programistyczne spełnia te wymagania:

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

Konfigurowanie projektu

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

Konfigurowanie klucza interfejsu API

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

Uzyskiwanie klucza interfejsu API

Zabezpieczanie klucza 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 użyte w tym samouczku zakładają, że używasz klucza interfejsu API jako stałej globalnej.

Zaimportuj pakiet SDK i zainicjuj model generatywny

Zanim zaczniesz wywoływać interfejs 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 = "...";

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

      // ...

      const model = genAI.getGenerativeModel({ model: "MODEL_NAME"});

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

Określając model, pamiętaj o tych kwestiach:

  • Użyj modelu, który odpowiada Twojemu przypadkowi użycia (np. gemini-pro-vision jest używany w przypadku multimodalnych danych wejściowych). W tym przewodniku w instrukcjach dotyczących poszczególnych implementacji wymieniono model zalecany dla każdego przypadku użycia.

Wdrażanie typowych przypadków użycia

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

Generuj tekst na podstawie samego tekstu

Jeśli dane wejściowe promptu zawierają tylko tekst, użyj modelu gemini-pro z metodą generateContent, aby wygenerować dane wyjściowe tekstowe:

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() {
  // For text-only input, use the gemini-pro model
  const model = genAI.getGenerativeModel({ model: "gemini-pro"});

  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 typu tekst i obraz (multimodalne)

Gemini udostępnia model multimodalny (gemini-pro-vision), który umożliwia wpisywanie zarówno tekstu, jak i obrazów. Zapoznaj się z wymaganiami dotyczącymi obrazów w przypadku danych wejściowych.

Jeśli dane wejściowe promptu zawierają zarówno tekst, jak i obrazy, do wygenerowania danych wyjściowych tekstowych użyj modelu gemini-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() {
  // For text-and-images input (multimodal), use the gemini-pro-vision model
  const model = genAI.getGenerativeModel({ model: "gemini-pro-vision" });

  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)

Dzięki Gemini możesz swobodnie prowadzić rozmowy w wielu etapach. Pakiet SDK upraszcza ten proces, zarządzając stanem rozmowy, więc w przeciwieństwie do pakietu generateContent nie musisz samodzielnie przechowywać historii rozmowy.

Aby utworzyć rozmowę wieloetapową (taką jak czat), użyj modelu gemini-pro i zainicjuj czat, wywołując metodę startChat(). Następnie za pomocą polecenia sendMessage() możesz wysłać nową wiadomość do użytkownika, która również dołączy tę wiadomość i odpowiedź do historii czatu.

Atrybut role może być powiązany z treścią rozmowy na 2 sposoby:

  • user: rola, która udostępnia prompty. Jest to wartość domyślna w wywołaniach funkcji sendMessage, a w przypadku przekazania innej roli funkcja zgłosi wyjątek.

  • model: rola, która udziela odpowiedzi. Tej roli można używać przy wywoływaniu funkcji startChat() za pomocą istniejącej funkcji 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() {
  // For text-only input, use the gemini-pro model
  const model = genAI.getGenerativeModel({ model: "gemini-pro"});

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

Strumieniowanie zapewnia szybsze 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 możesz używać 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 z tekstem i obrazem.

// ...

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 związanych tylko z tekstem i na czacie.

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

Informacje o tym, jak utworzyć instancję chat, znajdziesz w przykładzie 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 części tego samouczka pomogą Ci zapoznać się z interfejsem Gemini API. W tej sekcji opisujemy kilka przypadków użycia, które mogą być bardziej zaawansowane.

Wywoływanie funkcji

Wywoływanie funkcji ułatwia uzyskiwanie uporządkowanych danych wyjściowych z modeli generatywnych. Następnie możesz użyć tych danych wyjściowych, aby wywoływać inne interfejsy API i zwracać odpowiednie dane odpowiedzi do modelu. Inaczej mówiąc, wywołania funkcji pomagają połączyć modele generatywne z systemami zewnętrznymi, aby generowane treści zawierały aktualne i dokładne informacje. Więcej informacji znajdziesz w samouczku wywoływania funkcji.

Policz tokeny

W przypadku używania długich promptów warto zliczać tokeny przed wysłaniem jakiejkolwiek treści do modelu. Poniższe przykłady pokazują, jak używać właściwości countTokens() w różnych przypadkach użycia:

// 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 sterowania generowaniem treści

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

Skonfiguruj parametry modelu

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

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

const model = genAI.getGenerativeModel({ model: "MODEL_NAME",  generationConfig });

Korzystanie z ustawień bezpieczeństwa

Za pomocą ustawień bezpieczeństwa możesz dostosować prawdopodobieństwo otrzymania odpowiedzi, które mogą zostać uznane za szkodliwe. Ustawienia bezpieczeństwa domyślnie blokują treści o średnim lub wysokim prawdopodobieństwie, ż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,
  },
];

const model = genAI.getGenerativeModel({ model: "MODEL_NAME", 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ź od modeli językowych. Tworzenie dobrze uporządkowanych promptów to klucz do zapewnienia dokładnych i wysokiej jakości odpowiedzi z modelu językowego. Poznaj sprawdzone metody pisania promptów.

  • Gemini oferuje kilka wersji modelu, które spełniają różne potrzeby dotyczące na przykład typów danych wejściowych i złożoności, implementacji czatu lub innych zadań związanych z językiem okna czy ograniczeń rozmiaru. Dowiedz się więcej o dostępnych modelach Gemini.

  • Gemini udostępnia opcje, dzięki którym możesz poprosić o zwiększenie limitu częstotliwości. Dla modeli Gemini Pro limit szybkości wynosi 60 żądań na minutę (RPM).