Sử dụng Genkit trong ứng dụng Angular

Trang này cho biết cách bạn có thể sử dụng luồng Genkit trong các ứng dụng Angular.

Trước khi bắt đầu

Bạn phải nắm rõ khái niệm về luồng của Genkit và cách viết các luồng đó.

Tạo dự án Angular

Hướng dẫn này sẽ sử dụng một ứng dụng Angular có SSR với tính năng định tuyến máy chủ.

Bạn có thể tạo một dự án mới có định tuyến phía máy chủ bằng Angular CLI:

ng new --ssr --server-routing

Bạn cũng có thể thêm tính năng định tuyến phía máy chủ vào một dự án hiện có bằng lệnh ng add:

ng add @angular/ssr --server-routing

Cài đặt các phần phụ thuộc Genkit

Cài đặt các phần phụ thuộc Genkit vào ứng dụng Angular theo cách tương tự như đối với mọi dự án Genkit:

  1. Cài đặt thư viện Genkit cốt lõi:

    npm i --save genkit

  2. Cài đặt ít nhất một trình bổ trợ mô hình.

    Ví dụ: để sử dụng công nghệ AI của Google:

    npm i --save @genkit-ai/googleai

    Hoặc để sử dụng Vertex AI:

    npm i --save @genkit-ai/vertexai

  3. Cài đặt thư viện Genkit Express:

    npm i --save @genkit-ai/express

  4. Cài đặt Zod:

    npm i --save zod

  5. Nếu chưa cài đặt Genkit CLI trên toàn hệ thống, bạn có thể cài đặt Genkit CLI dưới dạng phần phụ thuộc phát triển. Bạn cũng nên sử dụng công cụ tsx vì công cụ này giúp kiểm thử mã của bạn thuận tiện hơn. Tuy nhiên, cả hai phần phụ thuộc này đều không bắt buộc.

    npm i --save-dev genkit-cli tsx

Xác định luồng Genkit

Tạo một tệp mới trong dự án Angular để chứa các luồng Genkit: ví dụ: src/genkit.ts. Tệp này có thể chứa các luồng của bạn mà không cần chỉnh sửa.

Ví dụ:

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

Thêm tuyến máy chủ

Thêm các lệnh nhập sau vào src/server.ts:

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

Thêm dòng sau đây sau khi khởi chạy biến app:

app.use(express.json());

Sau đó, hãy thêm một tuyến đường để phân phát luồng:

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

Gọi luồng

Giờ đây, bạn có thể chạy luồng từ ứng dụng khách.

Ví dụ: bạn có thể thay thế nội dung của src/app/app.component.ts bằng nội dung sau:

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

Cập nhật tương ứng cho 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>
}

Kiểm thử ứng dụng trên máy

Nếu muốn chạy ứng dụng trên máy, bạn cần cung cấp thông tin xác thực cho dịch vụ API mô hình mà bạn đã chọn.

Gemini (AI của Google)Gemini (Vertex AI)

  1. Đảm bảo công nghệ AI của Google có ở khu vực của bạn.

  2. Tạo khoá API cho Gemini API bằng Google AI Studio.

  3. Đặt biến môi trường GEMINI_API_KEY thành khoá của bạn:

    export GEMINI_API_KEY=<your API key>

  1. Trong Cloud Console, hãy Bật API Vertex AI cho dự án của bạn.

  2. Thiết lập một số biến môi trường và sử dụng công cụ gcloud để thiết lập thông tin xác thực mặc định của ứng dụng:

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

Sau đó, hãy chạy ứng dụng trên máy tính như bình thường:

ng serve

Tất cả các công cụ phát triển của Genkit vẫn hoạt động như bình thường. Ví dụ: để tải luồng trong giao diện người dùng dành cho nhà phát triển:

npx genkit start -- ng serve

Triển khai ứng dụng

Khi triển khai ứng dụng, bạn cần đảm bảo rằng ứng dụng được triển khai có thông tin xác thực cho mọi dịch vụ bên ngoài mà bạn sử dụng (chẳng hạn như dịch vụ API mô hình mà bạn đã chọn). Hãy xem các trang sau đây để biết thông tin dành riêng cho nền tảng triển khai mà bạn đã chọn:

Các bước tiếp theo