Gemini की सुविधाओं के ज़रिए कॉल करने की सुविधा के साथ, Cloud Run इस्तेमाल करने का तरीका

1. परिचय

खास जानकारी

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

फ़ंक्शन कॉलिंग को समझने के लिए, फटाफट विज़ुअल का इस्तेमाल करते हैं.

  • किसी दी गई जगह के मौसम की मौजूदा जगहों के लिए अनुरोध
  • यह प्रॉम्प्ट और getWeather() के लिए फ़ंक्शन का कॉन्ट्रैक्ट, Gemini को भेजा जाता है
  • Gemini कहता है कि चैट बॉट ऐप्लिकेशन, "getWeather(Seattle)" कॉल करे उसकी ओर से
  • ऐप्लिकेशन नतीजे भेजता है (40 डिग्री F और बारिश के बाद)
  • Gemini, कॉलर को नतीजे भेजता है

हम आपको याद दिलाना चाहते हैं कि Gemini, फ़ंक्शन को कॉल नहीं करता. डेवलपर के तौर पर, आपको इस सुविधा को कॉल करके Gemini को नतीजे वापस भेजने होंगे.

फ़ंक्शन कॉलिंग फ़्लो का डायग्राम

आपको इनके बारे में जानकारी मिलेगी

  • Gemini की मदद से फ़ंक्शन कॉल करने की सुविधा कैसे काम करती है
  • Gemini के साथ काम करने वाले चैटबॉट ऐप्लिकेशन को Cloud Run सेवा के तौर पर डिप्लॉय करने का तरीका

2. सेटअप और ज़रूरी शर्तें

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

  • आपने Cloud Console में लॉग इन किया है.
  • आपने पहले 2nd gen फ़ंक्शन को डिप्लॉय किया है. उदाहरण के लिए, शुरू करने के लिए Cloud Function 2nd gen क्विकस्टार्ट डिप्लॉय किया जा सकता है.

Cloud Shell चालू करें

  1. Cloud Console में, Cloud Shell चालू करें d1264ca30785e435.png पर क्लिक करें.

cb81e7c8e34bc8d.png

अगर आपने Cloud Shell का इस्तेमाल पहली बार किया है, तो आपको बीच में आने वाली स्क्रीन दिखेगी. इसमें यह बताया जाएगा कि यह क्या है. अगर आपको बीच के लेवल पर मिलने वाली स्क्रीन दिखती है, तो जारी रखें पर क्लिक करें.

d95252b003979716.png

प्रावधान करने और Cloud Shell से कनेक्ट होने में कुछ ही समय लगेगा.

7833d5e1c5d18f54.png

इस वर्चुअल मशीन में डेवलपमेंट के सभी ज़रूरी टूल मौजूद हैं. इसमें लगातार पांच जीबी की होम डायरेक्ट्री मिलती है और यह Google Cloud में काम करती है. यह नेटवर्क की परफ़ॉर्मेंस और ऑथेंटिकेशन को बेहतर बनाने में मदद करती है. अगर सभी नहीं, तो इस कोडलैब में आपका बहुत सारा काम ब्राउज़र से किया जा सकता है.

Cloud Shell से कनेक्ट करने के बाद, आपको दिखेगा कि आपकी पुष्टि हो चुकी है और प्रोजेक्ट आपके प्रोजेक्ट आईडी पर सेट है.

  1. यह पुष्टि करने के लिए Cloud Shell में नीचे दिया गया कमांड चलाएं कि आपकी पुष्टि हो गई है:
gcloud auth list

कमांड आउटपुट

 Credentialed Accounts
ACTIVE  ACCOUNT
*       <my_account>@<my_domain.com>

To set the active account, run:
    $ gcloud config set account `ACCOUNT`
  1. Cloud Shell में यह कमांड चलाएं, ताकि यह पुष्टि की जा सके कि gcloud के लिए कमांड को आपके प्रोजेक्ट के बारे में जानकारी है:
gcloud config list project

कमांड आउटपुट

[core]
project = <PROJECT_ID>

अगर ऐसा नहीं है, तो आप इसे इस निर्देश की मदद से सेट कर सकते हैं:

gcloud config set project <PROJECT_ID>

कमांड आउटपुट

Updated property [core/project].

3. एनवायरमेंट वैरिएबल सेटअप करें और एपीआई चालू करें

एनवायरमेंट वैरिएबल सेटअप करें

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

PROJECT_ID=<YOUR_PROJECT_ID>
REGION=<YOUR_REGION, e.g. us-central1>
WEATHER_SERVICE=weatherservice
FRONTEND=frontend
SERVICE_ACCOUNT="vertex-ai-caller"
SERVICE_ACCOUNT_ADDRESS=$SERVICE_ACCOUNT@$PROJECT_ID.iam.gserviceaccount.com

एपीआई चालू करें

इस कोडलैब का इस्तेमाल शुरू करने से पहले, आपको कई एपीआई चालू करने होंगे. इस कोडलैब के लिए, नीचे दिए गए एपीआई का इस्तेमाल करना ज़रूरी है. नीचे दिए गए निर्देश की मदद से, उन एपीआई को चालू किया जा सकता है:

gcloud services enable run.googleapis.com \
    cloudbuild.googleapis.com \
    aiplatform.googleapis.com

4. Vertex AI को कॉल करने के लिए, सेवा खाता बनाएं

Vertex AI Gemini API को कॉल करने के लिए, Cloud Run इस सेवा खाते का इस्तेमाल करेगा.

सबसे पहले, इस निर्देश को चलाकर सेवा खाता बनाएं:

gcloud iam service-accounts create $SERVICE_ACCOUNT \
  --display-name="Cloud Run to access Vertex AI APIs"

दूसरा, सेवा खाते को Vertex AI के उपयोगकर्ता की भूमिका दें.

gcloud projects add-iam-policy-binding $PROJECT_ID \
  --member serviceAccount:$SERVICE_ACCOUNT_ADDRESS \
  --role=roles/aiplatform.user

5. बैकएंड Cloud Run सेवा बनाएं

सबसे पहले, सोर्स कोड के लिए एक डायरेक्ट्री बनाएं और उस डायरेक्ट्री में cd डालें.

mkdir -p gemini-function-calling/weatherservice gemini-function-calling/frontend && cd gemini-function-calling/weatherservice

इसके बाद, इस कॉन्टेंट के साथ एक package.json फ़ाइल बनाएं:

{
    "name": "weatherservice",
    "version": "1.0.0",
    "description": "",
    "main": "app.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "express": "^4.18.3"
    }
}

इसके बाद, नीचे दिए गए कॉन्टेंट के साथ एक app.js सोर्स फ़ाइल बनाएं. इस फ़ाइल में सेवा का एंट्री पॉइंट और ऐप्लिकेशन का मुख्य लॉजिक शामिल है.

const express = require("express");
const app = express();

app.get("/getweather", (req, res) => {
    const location = req.query.location;
    let temp, conditions;

    if (location == "New Orleans") {
        temp = 99;
        conditions = "hot and humid";
    } else if (location == "Seattle") {
        temp = 40;
        conditions = "rainy and overcast";
    } else {
        res.status(400).send("there is no data for the requested location");
    }

    res.json({
        weather: temp,
        location: location,
        conditions: conditions
    });
});

const port = parseInt(process.env.PORT) || 8080;
app.listen(port, () => {
    console.log(`weather service: listening on port ${port}`);
});

app.get("/", (req, res) => {
    res.send("welcome to hard-coded weather!");
});

मौसम सेवा चालू करें

इस निर्देश का इस्तेमाल, मौसम की जानकारी देने वाली सेवा को डिप्लॉय करने के लिए किया जा सकता है.

gcloud run deploy $WEATHER_SERVICE \
  --source . \
  --region $REGION \
  --allow-unauthenticated

मौसम सेवा की जांच करें

कर्ल का इस्तेमाल करके, इन दो जगहों के मौसम की पुष्टि की जा सकती है:

WEATHER_SERVICE_URL=$(gcloud run services describe $WEATHER_SERVICE \
              --platform managed \
              --region=$REGION \
              --format='value(status.url)')

curl $WEATHER_SERVICE_URL/getweather?location=Seattle

curl $WEATHER_SERVICE_URL/getweather?location\=New%20Orleans

सिऐटल का तापमान 40 डिग्री फ़ैरनहाइट रहता है और बारिश होती है. वहीं, न्यू ऑर्लीन्स का तापमान 99 डिग्री फ़ैरनहाइट और नमी वाला है.

6. फ़्रंटएंड सेवा बनाएं

सबसे पहले, cd को फ़्रंटएंड डायरेक्ट्री में डालें.

cd gemini-function-calling/frontend

इसके बाद, इस कॉन्टेंट के साथ एक package.json फ़ाइल बनाएं:

{
  "name": "demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node app.js",
    "nodemon": "nodemon app.js",
    "cssdev": "npx tailwindcss -i ./input.css -o ./public/output.css --watch",
    "tailwind": "npx tailwindcss -i ./input.css -o ./public/output.css",
    "dev": "npm run tailwind && npm run nodemon"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@google-cloud/vertexai": "^0.4.0",
    "axios": "^1.6.7",
    "express": "^4.18.2",
    "express-ws": "^5.0.2",
    "htmx.org": "^1.9.10"
  },
  "devDependencies": {
    "nodemon": "^3.1.0",
    "tailwindcss": "^3.4.1"
  }
}

इसके बाद, नीचे दिए गए कॉन्टेंट के साथ एक app.js सोर्स फ़ाइल बनाएं. इस फ़ाइल में सेवा का एंट्री पॉइंट और ऐप्लिकेशन का मुख्य लॉजिक शामिल है.

const express = require("express");
const app = express();
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
const path = require("path");

const fs = require("fs");
const util = require("util");
const { spinnerSvg } = require("./spinnerSvg.js");

const expressWs = require("express-ws")(app);

app.use(express.static("public"));

const {
    VertexAI,
    FunctionDeclarationSchemaType
} = require("@google-cloud/vertexai");

// get project and location from metadata service
const metadataService = require("./metadataService.js");

// instance of Gemini model
let generativeModel;

// 1: define the function
const functionDeclarations = [
    {
        function_declarations: [
            {
                name: "getweather",
                description: "get weather for a given location",
                parameters: {
                    type: FunctionDeclarationSchemaType.OBJECT,
                    properties: {
                        location: {
                            type: FunctionDeclarationSchemaType.STRING
                        },
                        degrees: {
                            type: FunctionDeclarationSchemaType.NUMBER,
                            "description":
                                "current temperature in fahrenheit"
                        },
                        conditions: {
                            type: FunctionDeclarationSchemaType.STRING,
                            "description":
                                "how the weather feels subjectively"
                        }
                    },
                    required: ["location"]
                }
            }
        ]
    }
];

// on instance startup
const port = parseInt(process.env.PORT) || 8080;
app.listen(port, async () => {
    console.log(`demo1: listening on port ${port}`);

    const project = await metadataService.getProjectId();
    const location = await metadataService.getRegion();

    // Vertex client library instance
    const vertex_ai = new VertexAI({
        project: project,
        location: location
    });

    // Instantiate models
    generativeModel = vertex_ai.getGenerativeModel({
        model: "gemini-1.0-pro-001"
    });
});

const axios = require("axios");
const baseUrl = "https://weatherservice-k6msmyp47q-uc.a.run.app";

app.ws("/sendMessage", async function (ws, req) {

    // this chat history will be pinned to the current 
    // Cloud Run instance. Consider using Firestore &
    // Firebase anonymous auth instead.

    // start ephemeral chat session with Gemini
    const chatWithModel = generativeModel.startChat({
        tools: functionDeclarations
    });

    ws.on("message", async function (message) {
        let questionToAsk = JSON.parse(message).message;
        console.log("WebSocket message: " + questionToAsk);

        ws.send(`<div hx-swap-oob="beforeend:#toupdate"><div
                        id="questionToAsk"
                        class="text-black m-2 text-right border p-2 rounded-lg ml-24">
                        ${questionToAsk}
                    </div></div>`);

        // to simulate a natural pause in conversation
        await sleep(500);

        // get timestamp for div to replace
        const now = "fromGemini" + Date.now();

        ws.send(`<div hx-swap-oob="beforeend:#toupdate"><div
                        id=${now}
                        class=" text-blue-400 m-2 text-left border p-2 rounded-lg mr-24">
                        ${spinnerSvg}
                    </div></div>`);

        const results = await chatWithModel.sendMessage(questionToAsk);

        // Function calling demo
        let response1 = await results.response;
        let data = response1.candidates[0].content.parts[0];

        let methodToCall = data.functionCall;
        if (methodToCall === undefined) {
            console.log("Gemini says: ", data.text);
            ws.send(`<div
                        id=${now}
                        hx-swap-oob="true"
                        hx-swap="outerHTML"
                        class="text-blue-400 m-2 text-left border p-2 rounded-lg mr-24">
                        ${data.text}
                    </div>`);

            // bail out - Gemini doesn't want to return a function
            return;
        }

        // otherwise Gemini wants to call a function
        console.log(
            "Gemini wants to call: " +
                methodToCall.name +
                " with args: " +
                util.inspect(methodToCall.args, {
                    showHidden: false,
                    depth: null,
                    colors: true
                })
        );

        // make the external call
        let jsonReturned;
        try {
            const responseFunctionCalling = await axios.get(
                baseUrl + "/" + methodToCall.name,

                {
                    params: {
                        location: methodToCall.args.location
                    }
                }
            );
            jsonReturned = responseFunctionCalling.data;
        } catch (ex) {
            // in case an invalid location was provided
            jsonReturned = ex.response.data;
        }

        console.log("jsonReturned: ", jsonReturned);

        // tell the model what function we just called
        const functionResponseParts = [
            {
                functionResponse: {
                    name: methodToCall.name,
                    response: {
                        name: methodToCall.name,
                        content: { jsonReturned }
                    }
                }
            }
        ];

        // // Send a follow up message with a FunctionResponse
        const result2 = await chatWithModel.sendMessage(
            functionResponseParts
        );

        // This should include a text response from the model using the response content
        // provided above
        const response2 = await result2.response;
        let answer = response2.candidates[0].content.parts[0].text;
        console.log("answer: ", answer);

        ws.send(`<div
                        id=${now}
                        hx-swap-oob="true"
                        hx-swap="outerHTML"
                        class="text-blue-400 m-2 text-left border p-2 rounded-lg mr-24">
                        ${answer}
                    </div>`);
    });

    ws.on("close", () => {
        console.log("WebSocket was closed");
    });
});

function sleep(ms) {
    return new Promise((resolve) => {
        setTimeout(resolve, ms);
    });
}

tailwindCSS के लिए input.css फ़ाइल बनाएं.

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwindCSS के लिए tailwind.config.js फ़ाइल बनाएं.

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./**/*.{html,js}"],
    theme: {
        extend: {}
    },
    plugins: []
};

डिप्लॉय की गई Cloud Run सेवा के लिए, प्रोजेक्ट आईडी और इलाका पाने के लिए metadataService.js फ़ाइल बनाएं. इन वैल्यू का इस्तेमाल, Vertex AI क्लाइंट लाइब्रेरी के इंस्टेंस को इंस्टैंशिएट करने के लिए किया जाएगा.

const your_project_id = "YOUR_PROJECT_ID";
const your_region = "YOUR_REGION";

const axios = require("axios");

module.exports = {
    getProjectId: async () => {
        let project = "";
        try {
            // Fetch the token to make a GCF to GCF call
            const response = await axios.get(
                "http://metadata.google.internal/computeMetadata/v1/project/project-id",
                {
                    headers: {
                        "Metadata-Flavor": "Google"
                    }
                }
            );

            if (response.data == "") {
                // running locally on Cloud Shell
                project = your_project_id;
            } else {
                // use project id from metadata service
                project = response.data;
            }
        } catch (ex) {
            // running locally on local terminal
            project = your_project_id;
        }

        return project;
    },

    getRegion: async () => {
        let region = "";
        try {
            // Fetch the token to make a GCF to GCF call
            const response = await axios.get(
                "http://metadata.google.internal/computeMetadata/v1/instance/region",
                {
                    headers: {
                        "Metadata-Flavor": "Google"
                    }
                }
            );

            if (response.data == "") {
                // running locally on Cloud Shell
                region = your_region;
            } else {
                // use region from metadata service
                let regionFull = response.data;
                const index = regionFull.lastIndexOf("/");
                region = regionFull.substring(index + 1);
            }
        } catch (ex) {
            // running locally on local terminal
            region = your_region;
        }
        return region;
    }
};

spinnerSvg.js नाम की फ़ाइल बनाएं

module.exports.spinnerSvg = `<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-500"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                >
                    <circle
                        class="opacity-25"
                        cx="12"
                        cy="12"
                        r="10"
                        stroke="currentColor"
                        stroke-width="4"
                    ></circle>
                    <path
                        class="opacity-75"
                        fill="currentColor"
                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                    ></path></svg>`;

नई public डायरेक्ट्री बनाएं.

mkdir public
cd public

अब फ़्रंट एंड के लिए index.html फ़ाइल बनाएं, जो htmx का इस्तेमाल करेगी.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <script
            src="https://unpkg.com/htmx.org@1.9.10"
            integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
            crossorigin="anonymous"
        ></script>

        <link href="./output.css" rel="stylesheet" />
        <script src="https://unpkg.com/htmx.org/dist/ext/ws.js"></script>

        <title>Demo 2</title>
    </head>
    <body>
        <div id="herewego" text-center>
            <!-- <div id="replaceme2" hx-swap-oob="true">Hello world</div> -->
            <div
                class="container mx-auto mt-8 text-center max-w-screen-lg"
            >
                <div
                    class="overflow-y-scroll bg-white p-2 border h-[500px] space-y-4 rounded-lg m-auto"
                >
                    <div id="toupdate"></div>
                </div>
                <form
                    hx-trigger="submit, keyup[keyCode==13] from:body"
                    hx-ext="ws"
                    ws-connect="/sendMessage"
                    ws-send=""
                    hx-on="htmx:wsAfterSend: document.getElementById('message').value = ''"
                >
                    <div class="mb-6 mt-6 flex gap-4">
                        <textarea
                            rows="2"
                            type="text"
                            id="message"
                            name="message"
                            class="block grow rounded-lg border p-6 resize-none"
                            required
                        >
What&apos;s is the current weather in Seattle?</textarea
                        >
                        <button
                            type="submit"
                            class="bg-blue-500 text-white px-4 py-2 rounded-lg text-center text-sm font-medium"
                        >
                            Send
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </body>
</html>

7. फ़्रंटएंड सेवा को स्थानीय तौर पर चलाएं

सबसे पहले, पक्का करें कि आप कोडलैब के लिए frontend डायरेक्ट्री में हैं.

cd .. && pwd

इसके बाद, यह कमांड चलाकर डिपेंडेंसी इंस्टॉल करें:

npm install

डिवाइस पर चलाते समय ADC का इस्तेमाल करना

अगर क्लाउड शेल में चलाया जा रहा है, तो इसका मतलब है कि Google Compute Engine की वर्चुअल मशीन पहले से ही चल रही है. इस वर्चुअल मशीन से जुड़े आपके क्रेडेंशियल (जैसा कि gcloud auth list चलाकर दिखाया गया है) ऐप्लिकेशन के डिफ़ॉल्ट क्रेडेंशियल की मदद से, अपने-आप इस्तेमाल किए जाएंगे. इसलिए, gcloud auth application-default login निर्देश का इस्तेमाल करना ज़रूरी नहीं है. आपके पास सीधे ऐप्लिकेशन को स्थानीय तौर पर चलाएं सेक्शन पर जाने का विकल्प है.

हालांकि, अगर आपके लोकल टर्मिनल पर इस्तेमाल किया जा रहा है, जैसे कि Cloud Shell में नहीं, तो Google API की पुष्टि करने के लिए, आपको ऐप्लिकेशन के डिफ़ॉल्ट क्रेडेंशियल का इस्तेमाल करना होगा. आपके पास 1) अपने क्रेडेंशियल का इस्तेमाल करके लॉगिन करने का विकल्प है (बशर्ते आपके पास Vertex AI और Datastore उपयोगकर्ता की भूमिकाएं हों) या 2) इस कोडलैब में इस्तेमाल किए जाने वाले सेवा खाते की पहचान चुराकर लॉगिन किया जा सकता है.

पहला विकल्प) ADC के लिए अपने क्रेडेंशियल का इस्तेमाल करना

अगर आपको अपने क्रेडेंशियल का इस्तेमाल करना है, तो सबसे पहले gcloud auth list चलाकर देखें कि gcloud में आपकी पुष्टि कैसे हुई है. इसके बाद, आपको अपनी पहचान Vertex AI उपयोगकर्ता की भूमिका देनी पड़ सकती है. अगर आपकी पहचान को मालिक की भूमिका मिली है, तो इसका मतलब है कि आपके पास Vertex AI की यह उपयोगकर्ता भूमिका पहले से है. अगर ऐसा नहीं है, तो अपनी पहचान Vertex AI उपयोगकर्ता की भूमिका और Datastore उपयोगकर्ता की भूमिका देने के लिए, इस निर्देश को चलाया जा सकता है.

USER=<YOUR_PRINCIPAL_EMAIL>

gcloud projects add-iam-policy-binding $PROJECT_ID \
  --member user:$USER \
  --role=roles/aiplatform.user

gcloud projects add-iam-policy-binding $PROJECT_ID \
  --member user:$USER \
  --role=roles/datastore.user

इसके बाद, इन कमांड को चलाएं

gcloud auth application-default login

दूसरा विकल्प) एडीसी के लिए सेवा खाते के नाम का इस्तेमाल करना

अगर आपको इस कोडलैब में बनाए गए सेवा खाते का इस्तेमाल करना है, तो आपके उपयोगकर्ता खाते के पास सेवा खाता टोकन क्रिएटर की भूमिका होनी चाहिए. नीचे दिए गए कमांड का इस्तेमाल करके, इस भूमिका को हासिल किया जा सकता है:

gcloud projects add-iam-policy-binding $PROJECT_ID \
  --member user:$USER \
  --role=roles/iam.serviceAccountTokenCreator

इसके बाद, आपको सेवा खाते के साथ ADC का इस्तेमाल करने के लिए, नीचे दिया गया कमांड चलाना होगा

gcloud auth application-default login --impersonate-service-account=$SERVICE_ACCOUNT_ADDRESS

ऐप्लिकेशन को डिवाइस में चलाएं

आखिर में, नीचे दी गई स्क्रिप्ट चलाकर ऐप्लिकेशन को शुरू किया जा सकता है. यह डेवलपर स्क्रिप्ट, tailwindCSS से आउटपुट.css फ़ाइल भी जनरेट करेगी.

npm run dev

वेब झलक बटन खोलकर और झलक देखने वाले पोर्ट 8080 को चुनकर, वेबसाइट की झलक देखी जा सकती है

वेब प्रीव्यू - पोर्ट 8080 बटन पर प्रीव्यू

8. फ़्रंटएंड सेवा को डिप्लॉय और टेस्ट करना

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

gcloud run deploy $FRONTEND \
  --service-account $SERVICE_ACCOUNT_ADDRESS \
  --source . \
  --region $REGION \
  --allow-unauthenticated

अपने ब्राउज़र में फ़्रंटएंड का सेवा यूआरएल खोलें. कुछ पूछें, "सिऐटल में अभी मौसम कैसा है?" ऐसे में Gemini को जवाब देना चाहिए, "फ़िलहाल, तापमान 40 डिग्री है और बारिश हो रही है." अगर आप पूछती हैं, "बोस्टन का मौजूदा मौसम कैसा है?" Gemini जवाब देगा: "मैं इस अनुरोध को पूरा नहीं कर सकता. उपलब्ध मौसम एपीआई में, मुंबई का डेटा नहीं है."

9. बधाई हो!

कोडलैब पूरा करने के लिए बधाई!

हमारा सुझाव है कि आप Cloud Run, Vertex AI Gemini API, और फ़ंक्शन कॉलिंग के दस्तावेज़ पढ़ें.

इसमें हमने इन विषयों के बारे में बताया

  • Gemini की मदद से फ़ंक्शन कॉल करने की सुविधा कैसे काम करती है
  • Gemini के साथ काम करने वाले चैटबॉट ऐप्लिकेशन को Cloud Run सेवा के तौर पर डिप्लॉय करने का तरीका

10. व्यवस्थित करें

अनजाने में लगने वाले शुल्कों से बचने के लिए, (उदाहरण के लिए, अगर Cloud Run सेवा के इस अनुरोध को फ़्री टियर में हर महीने दिए जाने वाले Cloud Run के असाइन किए गए बजट से ज़्यादा बार इस्तेमाल किया गया हो), तो आपके पास Cloud Run सेवा को मिटाने या दूसरे चरण में बनाए गए प्रोजेक्ट को मिटाने का विकल्प होता है.

क्लाउड रन सेवाओं को मिटाने के लिए, https://console.cloud.google.com/functions/ में Cloud Run Cloud Console पर जाएं. इसके बाद, इस कोडलैब में बनाई गई $WEATHER_SERVICE और $FRONTEND सेवाओं को मिटाएं.

आपके पास, vertex-ai-caller सेवा खाता मिटाने या Vertex AI उपयोगकर्ता की भूमिका रद्द करने का विकल्प भी है. इससे, Gemini को गलती से कॉल करने से बचा जा सकता है.

अगर आपको पूरा प्रोजेक्ट मिटाना है, तो https://console.cloud.google.com/cloud-resource-manager पर जाएं और दूसरे चरण में बनाया गया प्रोजेक्ट चुनें. इसके बाद, 'मिटाएं' चुनें. अगर प्रोजेक्ट मिटाया जाता है, तो आपको Cloud SDK में प्रोजेक्ट बदलने होंगे. gcloud projects list चलाकर, सभी उपलब्ध प्रोजेक्ट की सूची देखी जा सकती है.