একটি Next.js অ্যাপে Genkit ব্যবহার করুন

এই পৃষ্ঠাটি দেখায় কিভাবে আপনি আপনার Next.js অ্যাপে সার্ভার অ্যাকশন হিসেবে জেনকিট ফ্লো ব্যবহার করতে পারেন।

আপনি শুরু করার আগে

আপনার জেনকিটের প্রবাহের ধারণা এবং সেগুলি কীভাবে লিখতে হয় তার সাথে পরিচিত হওয়া উচিত।

একটি Next.js প্রকল্প তৈরি করুন

আপনার যদি ইতিমধ্যেই একটি Next.js প্রকল্প না থাকে যেটিতে আপনি জেনারেটিভ এআই বৈশিষ্ট্য যোগ করতে চান, তাহলে আপনি এই পৃষ্ঠাটি অনুসরণ করার উদ্দেশ্যে একটি তৈরি করতে পারেন:

npx create-next-app@latest

Genkit নির্ভরতা ইনস্টল করুন

আপনার Next.js অ্যাপে জেনকিট নির্ভরতা ইনস্টল করুন, যেভাবে আপনি যেকোনো জেনকিট প্রকল্পের জন্য করবেন:

1. মূল জেনকিট লাইব্রেরি ইনস্টল করুন:

   npm i --save genkit

2. অন্তত একটি মডেল প্লাগইন ইনস্টল করুন.

   উদাহরণস্বরূপ, Google AI ব্যবহার করতে:

   npm i --save @genkit-ai/googleai

   অথবা Vertex AI ব্যবহার করতে:

   npm i --save @genkit-ai/vertexai

3. আপনি যদি বিশ্বব্যাপী জেনকিট সিএলআই ইনস্টল না করে থাকেন তবে আপনি এটি একটি বিকাশ নির্ভরতা হিসাবে ইনস্টল করতে পারেন। tsx টুলটিও সুপারিশ করা হয়, কারণ এটি আপনার কোড পরীক্ষা করা আরও সুবিধাজনক করে তোলে। যাইহোক, এই উভয় নির্ভরতা ঐচ্ছিক।

   npm i --save-dev genkit-cli tsx

জেনকিট প্রবাহের সংজ্ঞা দাও

আপনার Genkit ফ্লো ধারণ করতে আপনার Next.js প্রকল্পে একটি নতুন ফাইল তৈরি করুন: উদাহরণস্বরূপ, src/app/genkit.ts । এই ফাইলটি পরিবর্তন ছাড়াই আপনার প্রবাহ ধারণ করতে পারে; যাইহোক, যেহেতু আপনি শুধুমাত্র একটি সার্ভার ব্যাকএন্ড থেকে প্রবাহ চালাতে পারেন, আপনাকে অবশ্যই ফাইলের শীর্ষে 'use server' নির্দেশিকা যোগ করতে হবে।

যেমন:

'use server';

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

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

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

আপনার প্রবাহ কল

এখন, আপনার ফ্রন্টএন্ড কোডে, আপনি আপনার ফ্লোগুলি আমদানি করতে পারেন এবং সেগুলিকে সার্ভার অ্যাকশন হিসাবে কল করতে পারেন।

যেমন:

'use client';

import { menuSuggestionFlow } from '@/app/genkit';
import { useState } from 'react';

export default function Home() {
  const [menuItem, setMenuItem] = useState<string>('');

  async function getMenuItem(formData: FormData) {
    const theme = formData.get('theme')?.toString() ?? '';
    const suggestion = await menuSuggestionFlow(theme);
    setMenuItem(suggestion);
  }

  return (
    <main>
      <form action={getMenuItem}>
        <label htmlFor="theme">
          Suggest a menu item for a restaurant with this theme:{' '}
        </label>
        <input type="text" name="theme" id="theme" />
        <br />
        <br />
        <button type="submit">Generate</button>
      </form>
      <br />
      <pre>{menuItem}</pre>
    </main>
  );
}

স্থানীয়ভাবে আপনার অ্যাপ পরীক্ষা করুন

আপনি যদি স্থানীয়ভাবে আপনার অ্যাপ চালাতে চান, তাহলে আপনি উপলব্ধ করা বেছে নেওয়া মডেল API পরিষেবার জন্য শংসাপত্র তৈরি করতে হবে।

মিথুন (Google AI)

1. আপনার অঞ্চলে Google AI উপলব্ধ রয়েছে তা নিশ্চিত করুন৷

2. Google AI স্টুডিও ব্যবহার করে Gemini API-এর জন্য একটি API কী তৈরি করুন ।

3. আপনার কী-তে GOOGLE_GENAI_API_KEY পরিবেশ পরিবর্তনশীল সেট করুন:

   export GOOGLE_GENAI_API_KEY=<your API key>

মিথুন (Vertex AI)

1. ক্লাউড কনসোলে, আপনার প্রকল্পের জন্য Vertex AI API সক্ষম করুন ।

2. কিছু পরিবেশ ভেরিয়েবল সেট করুন এবং অ্যাপ্লিকেশন ডিফল্ট শংসাপত্র সেট আপ করতে gcloud টুল ব্যবহার করুন:

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

তারপরে, আপনার অ্যাপটি স্থানীয়ভাবে স্বাভাবিকভাবে চালান:

npm run dev

Genkit এর সমস্ত উন্নয়ন সরঞ্জাম স্বাভাবিক হিসাবে কাজ করতে থাকে। উদাহরণস্বরূপ, বিকাশকারী UI-তে আপনার ফ্লো লোড করতে:

npx genkit start -- npx tsx --watch src/app/genkit.ts

আপনার অ্যাপ স্থাপন করুন

আপনি যখন আপনার অ্যাপটি স্থাপন করবেন, তখন আপনাকে নিশ্চিত করতে হবে যে আপনি ব্যবহার করেন এমন কোনো বাহ্যিক পরিষেবার (যেমন আপনার নির্বাচিত মডেল API পরিষেবা) জন্য শংসাপত্রগুলি স্থাপন করা অ্যাপে উপলব্ধ রয়েছে৷ আপনার নির্বাচিত স্থাপনার প্ল্যাটফর্মের জন্য নির্দিষ্ট তথ্যের জন্য নিম্নলিখিত পৃষ্ঠাগুলি দেখুন:

• ফায়ারবেসের জন্য ক্লাউড ফাংশন
• ক্লাউড রান
• অন্যান্য Node.js প্ল্যাটফর্ম