वेब ऐप्लिकेशन में Gemini API का इस्तेमाल शुरू करें

इस ट्यूटोरियल में बताया गया है कि Google AI JavaScript SDK का इस्तेमाल करके, Gemini API को सीधे अपने वेब ऐप्लिकेशन से कैसे ऐक्सेस किया जा सकता है. अगर आपको अपने वेब ऐप्लिकेशन में Gemini मॉडल ऐक्सेस करने के लिए, सीधे REST API या सर्वर-साइड कोड (जैसे Node.js) के साथ काम नहीं करना है, तो इस SDK टूल का इस्तेमाल किया जा सकता है.

इस ट्यूटोरियल में, आप ये काम करने का तरीका जानेंगे:

इसके अलावा, इस ट्यूटोरियल में बेहतर इस्तेमाल के उदाहरणों (जैसे, टोकन की गिनती करना) के बारे में सेक्शन के साथ-साथ कॉन्टेंट जनरेट करने की प्रोसेस को कंट्रोल करने के विकल्पों के बारे में भी बताया गया है.

ज़रूरी शर्तें

इस ट्यूटोरियल में यह माना गया है कि आपको वेब ऐप्लिकेशन बनाने के लिए JavaScript के इस्तेमाल के बारे में पता है. इस गाइड को फ़्रेमवर्क इस्तेमाल नहीं किया जा सकता.

इस ट्यूटोरियल को पूरा करने के लिए, पक्का करें कि आपका डेवलपमेंट एनवायरमेंट इन ज़रूरी शर्तों को पूरा करता हो:

  • (ज़रूरी नहीं) Node.js
  • मॉडर्न वेब ब्राउज़र

अपना प्रोजेक्ट सेट अप करें

Gemini API को कॉल करने से पहले, आपको अपना प्रोजेक्ट सेट अप करना होगा. इसमें एपीआई पासकोड पाना, SDK टूल इंपोर्ट करना, और मॉडल शुरू करना शामिल होता है.

अपनी एपीआई कुंजी सेट अप करें

Gemini API का इस्तेमाल करने के लिए, आपको एपीआई पासकोड की ज़रूरत होगी. अगर आपके पास पहले से कोई कुंजी नहीं है, तो Google AI Studio में कुंजी बनाएं.

एपीआई पासकोड पाएं

अपनी एपीआई कुंजी सुरक्षित करें

हमारा सुझाव है कि आप अपने वर्शन कंट्रोल सिस्टम में एपीआई पासकोड की जांच न करें. इसके बजाय, आपको मॉडल शुरू करने से ठीक पहले अपने ऐप्लिकेशन में एपीआई पासकोड भेजना चाहिए.

इस ट्यूटोरियल में दिए गए सभी स्निपेट में यह माना जाता है कि एपीआई पासकोड को ग्लोबल कॉन्सटेंट के तौर पर ऐक्सेस किया जा रहा है.

SDK टूल इंपोर्ट करना और जनरेटिव मॉडल शुरू करना

कोई भी एपीआई कॉल करने से पहले, आपको 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 एक मल्टीमोडल मॉडल (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();

एक से ज़्यादा टर्न वाली बातचीत (चैट) तैयार करना

Gemini का इस्तेमाल करके, अलग-अलग बारी-बारी से बातचीत करें. SDK टूल, बातचीत की स्थिति को मैनेज करके प्रोसेस को आसान बनाता है. generateContent के उलट, आपको बातचीत का इतिहास सेव करने की ज़रूरत नहीं होती.

बातचीत (जैसे कि चैट) के हिसाब से बातचीत करने के लिए, gemini-pro मॉडल का इस्तेमाल करें और startChat() पर कॉल करके चैट शुरू करें. इसके बाद, नए व्यक्ति को मैसेज भेजने के लिए sendMessage() का इस्तेमाल करें. इससे नए मैसेज और चैट के इतिहास में जवाब भी जुड़ जाएगा.

बातचीत के कॉन्टेंट से जुड़े role के लिए, ये दो विकल्प हो सकते हैं:

  • user: वह भूमिका जो प्रॉम्प्ट देती है. यह वैल्यू sendMessage कॉल के लिए डिफ़ॉल्ट तौर पर सेट होती है. साथ ही, अगर कोई और भूमिका पास हो जाती है, तो फ़ंक्शन एक अपवाद दिखाएगा.

  • model: वह भूमिका जो जवाब देती है. startChat() को मौजूदा history से कॉल करते समय, इस भूमिका का इस्तेमाल किया जा सकता है.

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 का इस्तेमाल करने में आसानी होगी. इस सेक्शन में, इस्तेमाल के कुछ ऐसे उदाहरणों के बारे में बताया गया है जिन्हें ज़्यादा बेहतर माना जा सकता है.

फ़ंक्शन कॉल करने की सुविधा

फ़ंक्शन कॉल करने की सुविधा से, जनरेटिव मॉडल से स्ट्रक्चर्ड डेटा का आउटपुट पाना आसान हो जाता है. इसके बाद, इन आउटपुट का इस्तेमाल दूसरे एपीआई को कॉल करने और मॉडल को काम का रिस्पॉन्स डेटा देने के लिए किया जा सकता है. दूसरे शब्दों में, फ़ंक्शन कॉलिंग से जनरेटिव मॉडल को बाहरी सिस्टम से कनेक्ट करने में मदद मिलती है, ताकि जनरेट किए गए कॉन्टेंट में अप-टू-डेट और सटीक जानकारी शामिल हो. फ़ंक्शन कॉल करने के ट्यूटोरियल में ज़्यादा जानें.

टोकन गिनें

लंबे प्रॉम्प्ट का इस्तेमाल करते समय, मॉडल को कोई कॉन्टेंट भेजने से पहले, टोकन की गिनती करना मददगार हो सकता है. नीचे दिए गए उदाहरणों में बताया गया है कि इस्तेमाल के अलग-अलग उदाहरणों के लिए, 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, अलग-अलग ज़रूरतों को पूरा करने के लिए कई मॉडल उपलब्ध कराता है. जैसे- इनपुट टाइप और जटिलता, चैट या अन्य डायलॉग लैंग्वेज टास्क को लागू करना, और साइज़ की सीमाएं. Gemini के उपलब्ध मॉडल के बारे में जानें.

  • Gemini, अनुरोध की दर की सीमा बढ़ाने का अनुरोध करने के विकल्प देता है. Gemini Pro मॉडल के लिए, हर मिनट 60 अनुरोध प्रति मिनट (आरपीएम) की दर तय की जा सकती है.