از Genkit در یک برنامه Angular استفاده کنید

با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

این صفحه نشان می دهد که چگونه می توانید از جریان های Genkit در برنامه های Angular استفاده کنید.

قبل از شروع

شما باید با مفهوم جنکیت از جریان ها و نحوه نوشتن آنها آشنا باشید.

یک پروژه Angular ایجاد کنید

این راهنما از یک برنامه Angular با SSR با مسیریابی سرور استفاده می کند.

می توانید یک پروژه جدید با مسیریابی سمت سرور با Angular CLI ایجاد کنید:

ng new --ssr --server-routing

همچنین می توانید مسیریابی سمت سرور را با دستور ng add به یک پروژه موجود اضافه کنید:

ng add @angular/ssr --server-routing

وابستگی های Genkit را نصب کنید

وابستگی های Genkit را به همان روشی که برای هر پروژه Genkit انجام می دهید در برنامه Angular خود نصب کنید:

1. کتابخانه هسته Genkit را نصب کنید:

   npm i --save genkit

2. حداقل یک مدل پلاگین نصب کنید.

   به عنوان مثال، برای استفاده از هوش مصنوعی گوگل:

   npm i --save @genkit-ai/googleai

   یا برای استفاده از Vertex AI:

   npm i --save @genkit-ai/vertexai

3. کتابخانه Genkit Express را نصب کنید:

   npm i --save @genkit-ai/express

4. Zod را نصب کنید:

   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 مدلی که انتخاب کرده‌اید در دسترس قرار دهید.

سپس، برنامه خود را به صورت محلی به طور معمول اجرا کنید:

ng serve

همه ابزارهای توسعه Genkit به طور معمول به کار خود ادامه می دهند. به عنوان مثال، برای بارگیری جریان های خود در رابط کاربری توسعه دهنده:

npx genkit start -- ng serve

برنامه خود را مستقر کنید

هنگامی که برنامه خود را اجرا می کنید، باید اطمینان حاصل کنید که اعتبار هر سرویس خارجی که استفاده می کنید (مانند سرویس API مدل انتخابی شما) در دسترس برنامه مستقر است. برای اطلاعات مختص به پلتفرم استقرار انتخابی خود به صفحات زیر مراجعه کنید:

• توابع ابری برای Firebase
• Cloud Run
• سایر پلتفرم های Node.js

مراحل بعدی

• Genkit را در یک برنامه زاویه‌ای مستقر شده کاوش کنید : پیاده‌سازی مرجع چندین جریان Genkit را طی کنید که یک برنامه Angular را تامین می‌کند و سپس به کد موجود در Firebase Studio بروید.