ওয়েব অ্যাপে Gemini API দিয়ে শুরু করুন

এই টিউটোরিয়ালটি Google AI JavaScript SDK ব্যবহার করে কীভাবে আপনার ওয়েব অ্যাপ থেকে সরাসরি Gemini API অ্যাক্সেস করতে হয় তা দেখায়। আপনি যদি আপনার ওয়েব অ্যাপে জেমিনি মডেলগুলি অ্যাক্সেস করার জন্য REST API বা সার্ভার-সাইড কোড (যেমন Node.js) এর সাথে সরাসরি কাজ করতে না চান তবে আপনি এই SDK ব্যবহার করতে পারেন৷

এই টিউটোরিয়ালে, আপনি নিম্নলিখিতগুলি কীভাবে করবেন তা শিখবেন:

এছাড়াও, এই টিউটোরিয়ালটিতে উন্নত ব্যবহারের ক্ষেত্রে (যেমন টোকেন গণনা করা ) এবং সামগ্রী তৈরি নিয়ন্ত্রণের বিকল্পগুলি সম্পর্কে বিভাগ রয়েছে৷

পূর্বশর্ত

এই টিউটোরিয়ালটি অনুমান করে যে আপনি ওয়েব অ্যাপস ডেভেলপ করতে জাভাস্ক্রিপ্ট ব্যবহার করার সাথে পরিচিত। এই গাইড ফ্রেমওয়ার্ক-স্বাধীন।

এই টিউটোরিয়ালটি সম্পূর্ণ করতে, নিশ্চিত করুন যে আপনার উন্নয়ন পরিবেশ নিম্নলিখিত প্রয়োজনীয়তাগুলি পূরণ করে:

  • (ঐচ্ছিক) Node.js
  • আধুনিক ওয়েব ব্রাউজার

আপনার প্রকল্প সেট আপ করুন

Gemini API কল করার আগে, আপনাকে আপনার প্রকল্প সেট আপ করতে হবে, যার মধ্যে একটি API কী প্রাপ্ত করা, SDK আমদানি করা এবং মডেলটি শুরু করা অন্তর্ভুক্ত।

আপনার API কী সেট আপ করুন

Gemini API ব্যবহার করতে, আপনার একটি API কী প্রয়োজন। আপনার যদি ইতিমধ্যে একটি না থাকে তবে Google AI স্টুডিওতে একটি কী তৈরি করুন৷

একটি API কী পান

আপনার API কী সুরক্ষিত করুন

এটি দৃঢ়ভাবে সুপারিশ করা হয় যে আপনি আপনার সংস্করণ নিয়ন্ত্রণ সিস্টেমে একটি API কী চেক করবেন না ৷ পরিবর্তে, মডেলটি শুরু করার আগে আপনার অ্যাপে আপনার API কী পাস করা উচিত।

এই টিউটোরিয়ালের সমস্ত স্নিপেট অনুমান করে যে আপনি একটি বিশ্বব্যাপী ধ্রুবক হিসাবে আপনার API কী অ্যাক্সেস করছেন।

SDK আমদানি করুন এবং জেনারেটিভ মডেলটি শুরু করুন

আপনি যেকোনো API কল করার আগে, আপনাকে SDK আমদানি করতে হবে এবং জেনারেটিভ মডেলটি শুরু করতে হবে।

<html>
  <body>
    <!-- ... Your HTML and CSS -->

    <script type="importmap">
      {
        "imports": {
          "@google/generative-ai": "https://esm.run/@google/generative-ai"
        }
      }
    </script>
    <script type="module">
      import { GoogleGenerativeAI } from "@google/generative-ai";

      // Fetch your API_KEY
      const API_KEY = "...";

      // Access your API key (see "Set up your API key" above)
      const genAI = new GoogleGenerativeAI(API_KEY);

      // ...

      const model = genAI.getGenerativeModel({ model: "MODEL_NAME"});

      // ...
    </script>
  </body>
</html>

একটি মডেল নির্দিষ্ট করার সময়, নিম্নলিখিত নোট করুন:

  • আপনার ব্যবহারের ক্ষেত্রে নির্দিষ্ট একটি মডেল ব্যবহার করুন (উদাহরণস্বরূপ, gemini-pro-vision মাল্টিমোডাল ইনপুটের জন্য)। এই গাইডের মধ্যে, প্রতিটি বাস্তবায়নের নির্দেশাবলী প্রতিটি ব্যবহারের ক্ষেত্রে প্রস্তাবিত মডেলের তালিকা করে।

সাধারণ ব্যবহারের ক্ষেত্রে প্রয়োগ করুন

এখন আপনার প্রকল্প সেট আপ করা হয়েছে, আপনি বিভিন্ন ব্যবহারের ক্ষেত্রে প্রয়োগ করতে Gemini API ব্যবহার করে অন্বেষণ করতে পারেন:

শুধুমাত্র পাঠ্য ইনপুট থেকে পাঠ্য তৈরি করুন

যখন প্রম্পট ইনপুট শুধুমাত্র টেক্সট অন্তর্ভুক্ত করে, টেক্সট আউটপুট তৈরি করতে generateContent পদ্ধতির সাথে gemini-pro মডেল ব্যবহার করুন:

import { GoogleGenerativeAI } from "@google/generative-ai";

// Access your API key (see "Set up your API key" above)
const genAI = new GoogleGenerativeAI(API_KEY);

async function run() {
  // For text-only input, use the gemini-pro model
  const model = genAI.getGenerativeModel({ model: "gemini-pro"});

  const prompt = "Write a story about a magic backpack."

  const result = await model.generateContent(prompt);
  const response = await result.response;
  const text = response.text();
  console.log(text);
}

run();

টেক্সট-এবং-ইমেজ ইনপুট (মাল্টিমোডাল) থেকে পাঠ্য তৈরি করুন

মিথুন একটি মাল্টিমডাল মডেল ( gemini-pro-vision ) প্রদান করে, যাতে আপনি পাঠ্য এবং ছবি উভয়ই ইনপুট করতে পারেন। ইনপুট জন্য ইমেজ প্রয়োজনীয়তা পর্যালোচনা নিশ্চিত করুন.

যখন প্রম্পট ইনপুটে পাঠ্য এবং চিত্র উভয়ই অন্তর্ভুক্ত থাকে, তখন টেক্সট আউটপুট তৈরি করতে generateContent পদ্ধতি সহ gemini-pro-vision মডেলটি ব্যবহার করুন:

import { GoogleGenerativeAI } from "@google/generative-ai";

// Access your API key (see "Set up your API key" above)
const genAI = new GoogleGenerativeAI(API_KEY);

// Converts a File object to a GoogleGenerativeAI.Part object.
async function fileToGenerativePart(file) {
  const base64EncodedDataPromise = new Promise((resolve) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result.split(',')[1]);
    reader.readAsDataURL(file);
  });
  return {
    inlineData: { data: await base64EncodedDataPromise, mimeType: file.type },
  };
}

async function run() {
  // For text-and-images input (multimodal), use the gemini-pro-vision model
  const model = genAI.getGenerativeModel({ model: "gemini-pro-vision" });

  const prompt = "What's different between these pictures?";

  const fileInputEl = document.querySelector("input[type=file]");
  const imageParts = await Promise.all(
    [...fileInputEl.files].map(fileToGenerativePart)
  );

  const result = await model.generateContent([prompt, ...imageParts]);
  const response = await result.response;
  const text = response.text();
  console.log(text);
}

run();

মাল্টি-টার্ন কথোপকথন তৈরি করুন (চ্যাট)

মিথুন ব্যবহার করে, আপনি একাধিক বাঁক জুড়ে ফ্রিফর্ম কথোপকথন তৈরি করতে পারেন। SDK কথোপকথনের অবস্থা পরিচালনা করে প্রক্রিয়াটিকে সরল করে, তাই generateContent এর বিপরীতে, আপনাকে কথোপকথনের ইতিহাস নিজেকে সংরক্ষণ করতে হবে না।

একটি মাল্টি-টার্ন কথোপকথন তৈরি করতে (যেমন চ্যাট), gemini-pro মডেল ব্যবহার করুন এবং startChat() কল করে চ্যাট শুরু করুন। তারপর একটি নতুন ব্যবহারকারীর বার্তা পাঠাতে sendMessage() ব্যবহার করুন, যা চ্যাট ইতিহাসে বার্তা এবং প্রতিক্রিয়াও যুক্ত করবে।

কথোপকথনে বিষয়বস্তুর সাথে যুক্ত role জন্য দুটি সম্ভাব্য বিকল্প রয়েছে:

  • user : ভূমিকা যা প্রম্পট প্রদান করে। এই মানটি sendMessage কলের জন্য ডিফল্ট, এবং যদি একটি ভিন্ন ভূমিকা পাস করা হয় তবে ফাংশনটি একটি ব্যতিক্রম নিক্ষেপ করবে।

  • model : ভূমিকা যা প্রতিক্রিয়া প্রদান করে। বিদ্যমান history সহ startChat() কল করার সময় এই ভূমিকাটি ব্যবহার করা যেতে পারে।

import { GoogleGenerativeAI } from "@google/generative-ai";

// Access your API key (see "Set up your API key" above)
const genAI = new GoogleGenerativeAI(API_KEY);

async function run() {
  // For text-only input, use the gemini-pro model
  const model = genAI.getGenerativeModel({ model: "gemini-pro"});

  const chat = model.startChat({
    history: [
      {
        role: "user",
        parts: [{ text: "Hello, I have 2 dogs in my house." }],
      },
      {
        role: "model",
        parts: [{ text: "Great to meet you. What would you like to know?" }],
      },
    ],
    generationConfig: {
      maxOutputTokens: 100,
    },
  });

  const msg = "How many paws are in my house?";

  const result = await chat.sendMessage(msg);
  const response = await result.response;
  const text = response.text();
  console.log(text);
}

run();

দ্রুত মিথস্ক্রিয়া জন্য স্ট্রিমিং ব্যবহার করুন

ডিফল্টরূপে, মডেল পুরো প্রজন্মের প্রক্রিয়া শেষ করার পরে একটি প্রতিক্রিয়া প্রদান করে। আপনি সম্পূর্ণ ফলাফলের জন্য অপেক্ষা না করে দ্রুত মিথস্ক্রিয়া অর্জন করতে পারেন এবং পরিবর্তে আংশিক ফলাফলগুলি পরিচালনা করতে স্ট্রিমিং ব্যবহার করতে পারেন।

নিচের উদাহরণে দেখানো হয়েছে কিভাবে generateContentStream পদ্ধতির সাহায্যে একটি টেক্সট-এবং-ইমেজ ইনপুট প্রম্পট থেকে টেক্সট জেনারেট করতে হয়।

// ...

const result = await model.generateContentStream([prompt, ...imageParts]);

let text = '';
for await (const chunk of result.stream) {
  const chunkText = chunk.text();
  console.log(chunkText);
  text += chunkText;
}

// ...

আপনি শুধুমাত্র পাঠ্য ইনপুট এবং চ্যাট ব্যবহারের ক্ষেত্রে একটি অনুরূপ পদ্ধতি ব্যবহার করতে পারেন।

// Use streaming with text-only input
const result = await model.generateContentStream(prompt);

কিভাবে একটি chat ইনস্ট্যান্ট করা যায় তার জন্য উপরে চ্যাটের উদাহরণ দেখুন।

// Use streaming with multi-turn conversations (like chat)
const result = await chat.sendMessageStream(msg);

উন্নত ব্যবহারের ক্ষেত্রে প্রয়োগ করুন

এই টিউটোরিয়ালের পূর্ববর্তী বিভাগে বর্ণিত সাধারণ ব্যবহারের ক্ষেত্রে আপনাকে Gemini API ব্যবহারে স্বাচ্ছন্দ্য বোধ করতে সাহায্য করে। এই বিভাগে কিছু ব্যবহারের ক্ষেত্রে বর্ণনা করা হয়েছে যেগুলি আরও উন্নত বলে বিবেচিত হতে পারে।

ফাংশন কলিং

ফাংশন কলিং আপনার জন্য জেনারেটিভ মডেল থেকে স্ট্রাকচার্ড ডেটা আউটপুট পেতে সহজ করে তোলে। তারপরে আপনি এই আউটপুটগুলি ব্যবহার করে অন্যান্য API কল করতে এবং মডেলে প্রাসঙ্গিক প্রতিক্রিয়া ডেটা ফেরত দিতে পারেন। অন্য কথায়, ফাংশন কলিং আপনাকে জেনারেটিভ মডেলগুলিকে বাহ্যিক সিস্টেমের সাথে সংযুক্ত করতে সাহায্য করে যাতে তৈরি করা সামগ্রীতে সর্বাধিক আপ-টু-ডেট এবং সঠিক তথ্য অন্তর্ভুক্ত থাকে। ফাংশন কলিং টিউটোরিয়ালে আরও জানুন।

টোকেন গণনা করুন

দীর্ঘ প্রম্পট ব্যবহার করার সময়, মডেলে কোনো সামগ্রী পাঠানোর আগে টোকেন গণনা করা কার্যকর হতে পারে। নিম্নলিখিত উদাহরণগুলি বিভিন্ন ব্যবহারের ক্ষেত্রে countTokens() কীভাবে ব্যবহার করতে হয় তা দেখায়:

// For text-only input
const { totalTokens } = await model.countTokens(prompt);

// For text-and-image input (multimodal)
const { totalTokens } = await model.countTokens([prompt, ...imageParts]);

// For multi-turn conversations (like chat)
const history = await chat.getHistory();
const msgContent = { role: "user", parts: [{ text: msg }] };
const contents = [...history, msgContent];
const { totalTokens } = await model.countTokens({ contents });

বিষয়বস্তু তৈরি নিয়ন্ত্রণ করার বিকল্প

আপনি মডেল প্যারামিটার কনফিগার করে এবং নিরাপত্তা সেটিংস ব্যবহার করে সামগ্রী তৈরি নিয়ন্ত্রণ করতে পারেন।

মডেল প্যারামিটার কনফিগার করুন

আপনি মডেলে পাঠানো প্রতিটি প্রম্পটে প্যারামিটার মান অন্তর্ভুক্ত করে যা নিয়ন্ত্রণ করে কিভাবে মডেলটি একটি প্রতিক্রিয়া তৈরি করে। মডেল বিভিন্ন পরামিতি মান জন্য বিভিন্ন ফলাফল তৈরি করতে পারে. মডেল প্যারামিটার সম্পর্কে আরও জানুন। কনফিগারেশন আপনার মডেল উদাহরণের জীবনকালের জন্য বজায় রাখা হয়।

const generationConfig = {
  stopSequences: ["red"],
  maxOutputTokens: 200,
  temperature: 0.9,
  topP: 0.1,
  topK: 16,
};

const model = genAI.getGenerativeModel({ model: "MODEL_NAME",  generationConfig });

নিরাপত্তা সেটিংস ব্যবহার করুন

ক্ষতিকারক বলে বিবেচিত প্রতিক্রিয়া পাওয়ার সম্ভাবনা সামঞ্জস্য করতে আপনি নিরাপত্তা সেটিংস ব্যবহার করতে পারেন। ডিফল্টরূপে, নিরাপত্তা সেটিংস মাঝারি এবং/অথবা সমস্ত মাত্রা জুড়ে অনিরাপদ বিষয়বস্তু হওয়ার উচ্চ সম্ভাবনা সহ সামগ্রীকে ব্লক করে। নিরাপত্তা সেটিংস সম্পর্কে আরও জানুন।

এখানে কিভাবে একটি নিরাপত্তা সেটিং সেট করতে হয়:

import { HarmBlockThreshold, HarmCategory } from "@google/generative-ai";

// ...

const safetySettings = [
  {
    category: HarmCategory.HARM_CATEGORY_HARASSMENT,
    threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH,
  },
];

const model = genAI.getGenerativeModel({ model: "MODEL_NAME", safetySettings });

এছাড়াও আপনি একাধিক নিরাপত্তা সেটিং সেট করতে পারেন:

const safetySettings = [
  {
    category: HarmCategory.HARM_CATEGORY_HARASSMENT,
    threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH,
  },
  {
    category: HarmCategory.HARM_CATEGORY_HATE_SPEECH,
    threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
  },
];

এরপর কি

  • প্রম্পট ডিজাইন হল প্রম্পট তৈরি করার প্রক্রিয়া যা ভাষার মডেলগুলি থেকে পছন্দসই প্রতিক্রিয়া প্রকাশ করে। একটি ভাষা মডেল থেকে সঠিক, উচ্চ মানের প্রতিক্রিয়া নিশ্চিত করার জন্য ভাল কাঠামোগত প্রম্পট লেখা একটি অপরিহার্য অংশ। প্রম্পট লেখার জন্য সর্বোত্তম অনুশীলন সম্পর্কে জানুন।

  • মিথুন বিভিন্ন ব্যবহারের ক্ষেত্রে যেমন ইনপুট প্রকার এবং জটিলতা, চ্যাট বা অন্যান্য ডায়ালগ ভাষার কাজের জন্য বাস্তবায়ন এবং আকারের সীমাবদ্ধতাগুলির প্রয়োজন মেটাতে বিভিন্ন মডেলের বৈচিত্র অফার করে। উপলব্ধ মিথুন মডেল সম্পর্কে জানুন।

  • মিথুন হারের সীমা বৃদ্ধির অনুরোধ করার জন্য বিকল্পগুলি অফার করে৷ Gemini Pro মডেলের জন্য রেট সীমা প্রতি মিনিটে 60টি অনুরোধ (RPM)।