Используйте Genkit в приложении Angular

На этой странице показано, как вы можете использовать потоки Genkit в приложениях Angular.

Прежде чем начать

Вы должны быть знакомы с концепцией потоков Genkit и тем, как их писать.

Создать проект Angular

В этом руководстве будет использоваться приложение Angular с SSR и маршрутизацией сервера .

Вы можете создать новый проект с маршрутизацией на стороне сервера с помощью Angular CLI :

ng new --ssr --server-routing

Вы также можете добавить маршрутизацию на стороне сервера в существующий проект с помощью команды ng add :

ng add @angular/ssr --server-routing

Установите зависимости Genkit

Установите зависимости Genkit в свое приложение Angular так же, как и для любого проекта Genkit:

  1. Установите основную библиотеку Genkit:

    npm i --save genkit

  2. Установите хотя бы один плагин модели.

    Например, чтобы использовать Google AI:

    npm i --save @genkit-ai/googleai

    Или использовать Vertex AI:

    npm i --save @genkit-ai/vertexai

  3. Установите библиотеку Genkit Express:

    npm i --save @genkit-ai/express

  4. Установите Зод:

    npm i --save zod

  5. Если вы не установили Genkit CLI глобально, вы можете установить его как зависимость разработки. Также рекомендуется использовать инструмент tsx, поскольку он делает тестирование вашего кода более удобным. Однако обе эти зависимости не являются обязательными.

    npm i --save-dev genkit-cli tsx

Определить потоки Genkit

Создайте новый файл в своем проекте Angular, который будет содержать потоки Genkit: например, src/genkit.ts . Этот файл может содержать ваши потоки без изменений.

Например:

import { gemini20Flash, googleAI } from "@genkit-ai/googleai";
import { genkit } from "genkit";
import { z } from "zod";

const ai = genkit({
  plugins: [googleAI()],
  model: gemini20Flash,
});

export const menuSuggestionFlow = ai.defineFlow(
  {
    name: "menuSuggestionFlow",
    inputSchema: z.string(),
    outputSchema: z.string(),
  },
  async (restaurantTheme) => {
    const { text } = await ai.generate(
      `Invent a menu item for a ${restaurantTheme} themed restaurant.`
    );
    return text;
  }
);

Добавить маршруты сервера

Добавьте следующий импорт в src/server.ts : 

import { expressHandler } from '@genkit-ai/express';
import { menuSuggestionFlow } from './genkit';

Добавьте следующую строку после инициализации переменной app : 

app.use(express.json());

Затем добавьте маршрут для обслуживания вашего потока: 

app.post('/menu', expressHandler(menuSuggestionFlow));

Вызовите свои потоки

Теперь вы можете запускать потоки из клиентского приложения.

Например, вы можете заменить содержимое src/app/app.component.ts следующим: 

import { Component, resource, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { runFlow } from 'genkit/beta/client';

@Component({
  selector: 'app-root',
  imports: [FormsModule],
  templateUrl: './app.component.html',
})
export class AppComponent {
  menuInput = '';
  theme = signal('');

  menuResource = resource({
    request: () => this.theme(),
    loader: ({request}) => runFlow({ url: 'menu', input: request })
  });
}

Внесите соответствующие обновления в src/app/app.component.html : 

<h3>Generate a custom menu item</h3>
<input type="text" [(ngModel)]="menuInput" />
<button (click)="this.theme.set(menuInput)">Generate</button>
<br />
@if (menuResource.isLoading()) {
  Loading...
} @else {
  <pre>{{menuResource.value()}}</pre>
}

Протестируйте свое приложение локально

Если вы хотите запустить свое приложение локально, вам необходимо предоставить учетные данные для выбранной вами службы API модели.

Близнецы (ИИ Google) Близнецы (Vertex AI)

  1. Убедитесь, что Google AI доступен в вашем регионе .

  2. Создайте ключ API для Gemini API с помощью Google AI Studio.

  3. Установите для переменной среды GEMINI_API_KEY свой ключ: 

    export GEMINI_API_KEY=<your API key>

  1. В облачной консоли включите API Vertex AI для своего проекта.

  2. Установите некоторые переменные среды и используйте инструмент gcloud для настройки учетных данных приложения по умолчанию: 

    export GCLOUD_PROJECT=<your project ID>
export GCLOUD_LOCATION=us-central1
gcloud auth application-default login

Затем запустите приложение локально, как обычно: 

ng serve

Все инструменты разработки Genkit продолжают работать в обычном режиме. Например, чтобы загрузить потоки в пользовательский интерфейс разработчика: 

npx genkit start -- ng serve

Разверните свое приложение

При развертывании приложения вам необходимо убедиться, что учетные данные для всех используемых вами внешних служб (например, службы API выбранной модели) доступны для развернутого приложения. См. следующие страницы для получения информации, относящейся к выбранной вами платформе развертывания:

Следующие шаги