שימוש ב-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. מתקינים לפחות פלאגין אחד של מודל.

   לדוגמה, כדי להשתמש ב-AI מבית Google:

   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. אם לא התקנתם את ה-CLI של Genkit ברמת המערכת, תוכלו להתקין אותו כיחסי תלות לפיתוח. מומלץ גם להשתמש בכלי 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 של המודל שבחרתם) זמינים לאפליקציה הפרוסה. בדפים הבאים מפורט מידע ספציפי לפלטפורמת הפריסה שבחרתם:

• Cloud Functions for Firebase
• Cloud Run
• פלטפורמות אחרות של Node.js

השלבים הבאים

• הצגת Genkit באפליקציית Angular שנפרסה: סקירה של הטמעת עזרה של כמה תהליכי Genkit שמפעילים אפליקציית Angular, ולאחר מכן מעבר לקוד ב-Firebase Studio.