জেমিনি ফাংশন কলিংয়ের সাথে কীভাবে ক্লাউড রান ব্যবহার করবেন

1. ভূমিকা

ওভারভিউ

এই কোডল্যাবে, আপনি দেখতে পাবেন কিভাবে আপনি ফাংশন কলিং নামে একটি নতুন বৈশিষ্ট্য ব্যবহার করে রিয়েল টাইম ডেটাতে মিথুনকে অ্যাক্সেস দিতে পারেন৷ রিয়েল টাইম ডেটা অনুকরণ করতে, আপনি একটি আবহাওয়া পরিষেবা শেষ পয়েন্ট তৈরি করবেন যা 2টি অবস্থানের জন্য বর্তমান আবহাওয়া প্রদান করে। তারপরে আপনি জেমিনি দ্বারা চালিত একটি চ্যাট অ্যাপ তৈরি করবেন, যা বর্তমান আবহাওয়া পুনরুদ্ধার করতে ফাংশন কলিং ব্যবহার করে।

ফাংশন কলিং বুঝতে একটি দ্রুত ভিজ্যুয়াল ব্যবহার করা যাক।

  • একটি প্রদত্ত অবস্থানে বর্তমান আবহাওয়া অবস্থানের জন্য প্রম্পট অনুরোধ
  • এই প্রম্পট + getWeather() এর জন্য ফাংশন চুক্তি জেমিনিতে পাঠানো হয়
  • জেমিনি জিজ্ঞাসা করে যে চ্যাট বট অ্যাপটি তার পক্ষে "গেটওয়েদার(সিয়াটেল)" কল করে
  • অ্যাপটি ফলাফল ফেরত পাঠায় (40 ডিগ্রি ফারেনহাইট এবং বৃষ্টি)
  • মিথুন কলকারীকে ফলাফল ফেরত পাঠায়

রিক্যাপ করতে, মিথুন ফাংশনকে কল করে না। ডেভেলপার হিসেবে আপনাকে অবশ্যই ফাংশনটিতে কল করতে হবে এবং জেমিনিকে ফলাফল পাঠাতে হবে।

ফাংশন কলিং প্রবাহের চিত্র

আপনি কি শিখবেন

  • কিভাবে মিথুন ফাংশন কলিং কাজ করে
  • একটি ক্লাউড রান পরিষেবা হিসাবে একটি জেমিনি-চালিত চ্যাটবট অ্যাপ কীভাবে স্থাপন করবেন

2. সেটআপ এবং প্রয়োজনীয়তা

পূর্বশর্ত

  • আপনি ক্লাউড কনসোলে লগ ইন করেছেন।
  • আপনি পূর্বে একটি 2nd gen ফাংশন স্থাপন করেছেন। উদাহরণস্বরূপ, আপনি শুরু করতে একটি ক্লাউড ফাংশন 2nd gen quickstart স্থাপন অনুসরণ করতে পারেন।

ক্লাউড শেল সক্রিয় করুন

  1. ক্লাউড কনসোল থেকে, ক্লাউড শেল সক্রিয় করুন ক্লিক করুন d1264ca30785e435.png .

cb81e7c8e34bc8d.png

যদি এটি আপনার প্রথমবার ক্লাউড শেল শুরু হয়, তাহলে এটি কী তা বর্ণনা করে আপনাকে একটি মধ্যবর্তী স্ক্রীন উপস্থাপন করা হবে। যদি আপনি একটি মধ্যবর্তী স্ক্রীনের সাথে উপস্থাপিত হন, তবে চালিয়ে যান ক্লিক করুন।

d95252b003979716.png

ক্লাউড শেলের সাথে সংযোগ করতে এবং সংযোগ করতে এটির মাত্র কয়েক মুহূর্ত লাগবে৷

7833d5e1c5d18f54.png

এই ভার্চুয়াল মেশিনটি প্রয়োজনীয় সমস্ত বিকাশের সরঞ্জাম দিয়ে লোড করা হয়েছে। এটি একটি ক্রমাগত 5 GB হোম ডিরেক্টরি অফার করে এবং Google ক্লাউডে চলে, যা নেটওয়ার্ক কর্মক্ষমতা এবং প্রমাণীকরণকে ব্যাপকভাবে উন্নত করে। এই কোডল্যাবে আপনার অনেক কাজ, যদি সব না হয়, ব্রাউজার দিয়ে করা যেতে পারে।

একবার ক্লাউড শেলের সাথে সংযুক্ত হয়ে গেলে, আপনি দেখতে পাবেন যে আপনি প্রমাণীকৃত হয়েছেন এবং প্রকল্পটি আপনার প্রকল্প আইডিতে সেট করা আছে।

  1. আপনি প্রমাণীকৃত কিনা তা নিশ্চিত করতে ক্লাউড শেলে নিম্নলিখিত কমান্ডটি চালান: 
gcloud auth list

কমান্ড আউটপুট

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

To set the active account, run:
    $ gcloud config set account `ACCOUNT`
  1. 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

এপিআই সক্ষম করুন

আপনি এই কোডল্যাব ব্যবহার শুরু করার আগে, আপনাকে সক্রিয় করতে হবে এমন বেশ কয়েকটি API আছে। এই কোডল্যাবের জন্য নিম্নলিখিত API ব্যবহার করা প্রয়োজন। আপনি নিম্নলিখিত কমান্ডটি চালিয়ে সেই APIগুলি সক্ষম করতে পারেন:

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. ব্যাকএন্ড ক্লাউড রান পরিষেবা তৈরি করুন

প্রথমে, সেই ডিরেক্টরিতে সোর্স কোড এবং সিডির জন্য একটি ডিরেক্টরি তৈরি করুন। 

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

আবহাওয়া পরিষেবা পরীক্ষা করুন

আপনি কার্ল ব্যবহার করে 2টি অবস্থানের আবহাওয়া যাচাই করতে পারেন: 

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 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: []
};

স্থাপন করা ক্লাউড রান পরিষেবার জন্য প্রকল্প আইডি এবং অঞ্চল পাওয়ার জন্য metadataService.js ফাইল তৈরি করুন৷ এই মানগুলি ভার্টেক্স এআই ক্লায়েন্ট লাইব্রেরির একটি উদাহরণ তৈরি করতে ব্যবহার করা হবে।

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 কমান্ড ব্যবহার করার প্রয়োজন নেই। আপনি স্থানীয়ভাবে অ্যাপ চালান বিভাগে এড়িয়ে যেতে পারেন

যাইহোক, যদি আপনি আপনার স্থানীয় টার্মিনালে (অর্থাৎ ক্লাউড শেলে নয়) চালাচ্ছেন, তাহলে আপনাকে Google API-এ প্রমাণীকরণের জন্য অ্যাপ্লিকেশন ডিফল্ট শংসাপত্র ব্যবহার করতে হবে। আপনি হয় 1) আপনার শংসাপত্র ব্যবহার করে লগইন করতে পারেন (যদি আপনার Vertex AI ব্যবহারকারী এবং ডেটাস্টোর ব্যবহারকারীর ভূমিকা থাকে) অথবা 2) আপনি এই কোডল্যাবে ব্যবহৃত পরিষেবা অ্যাকাউন্টের ছদ্মবেশী করে লগইন করতে পারেন।

বিকল্প 1) ADC-এর জন্য আপনার শংসাপত্র ব্যবহার করা

আপনি যদি আপনার শংসাপত্রগুলি ব্যবহার করতে চান, তাহলে আপনি কীভাবে gcloud-এ প্রমাণীকরণ করেছেন তা যাচাই করতে আপনি প্রথমে gcloud auth list চালাতে পারেন। এর পরে, আপনাকে আপনার পরিচয় প্রদান করতে হতে পারে 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

বিকল্প 2) ADC-এর জন্য একটি পরিষেবা অ্যাকাউন্ট ছদ্মবেশী করা

আপনি যদি এই কোডল্যাবে তৈরি পরিষেবা অ্যাকাউন্ট ব্যবহার করতে চান তবে আপনার ব্যবহারকারীর অ্যাকাউন্টে পরিষেবা অ্যাকাউন্ট টোকেন নির্মাতার ভূমিকা থাকতে হবে। আপনি নিম্নলিখিত কমান্ড চালানোর মাধ্যমে এই ভূমিকা পেতে পারেন: 

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 থেকে output.css ফাইলও তৈরি করবে। 

npm run dev

আপনি ওয়েব প্রিভিউ বোতামটি খুলে এবং প্রিভিউ পোর্ট 8080 নির্বাচন করে ওয়েবসাইটটির পূর্বরূপ দেখতে পারেন

ওয়েব প্রিভিউ - পোর্ট 8080 বোতামে পূর্বরূপ

8. ফ্রন্টএন্ড পরিষেবা স্থাপন এবং পরীক্ষা করুন

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

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

আপনার ব্রাউজারে ফ্রন্টএন্ডের জন্য পরিষেবা URL খুলুন। একটি প্রশ্ন জিজ্ঞাসা করুন "সিয়াটেলের বর্তমান আবহাওয়া কি?" এবং মিথুনের উত্তর দেওয়া উচিত "এটি বর্তমানে 40 ডিগ্রি এবং বৃষ্টি হচ্ছে।" আপনি যদি জিজ্ঞাসা করেন "বোস্টনের বর্তমান আবহাওয়া কী?", জেমিনি উত্তর দেবে "আমি এই অনুরোধটি পূরণ করতে পারছি না। উপলব্ধ আবহাওয়া API-তে বোস্টনের জন্য ডেটা নেই।"

9. অভিনন্দন!

কোডল্যাব সম্পূর্ণ করার জন্য অভিনন্দন!

আমরা ডকুমেন্টেশন ক্লাউড রান , ভার্টেক্স এআই জেমিনি এপিআই এবং ফাংশন কলিং পর্যালোচনা করার পরামর্শ দিই।

আমরা কভার করেছি কি

  • কিভাবে মিথুন ফাংশন কলিং কাজ করে
  • একটি ক্লাউড রান পরিষেবা হিসাবে একটি জেমিনি-চালিত চ্যাটবট অ্যাপ কীভাবে স্থাপন করবেন

10. পরিষ্কার করুন

অসাবধানতাবশত চার্জ এড়াতে, (উদাহরণস্বরূপ, যদি এই ক্লাউড রান পরিষেবাটি আপনার মাসিক ক্লাউড রান ইনভোকমেন্ট বরাদ্দের চেয়ে বিনামূল্যের স্তরে অজান্তেই বেশি বার আহ্বান করা হয়), আপনি হয় ক্লাউড রান পরিষেবাটি মুছে ফেলতে পারেন বা ধাপ 2-এ আপনার তৈরি করা প্রকল্পটি মুছে ফেলতে পারেন৷

ক্লাউড রান পরিষেবাগুলি মুছতে, https://console.cloud.google.com/functions/- এ ক্লাউড রান ক্লাউড কনসোলে যান এবং এই কোডল্যাবে আপনার তৈরি করা $WEATHER_SERVICE এবং $FRONTEND পরিষেবাগুলি মুছুন৷

আপনি মিথুনে কোনো অসাবধানতাবশত কল এড়াতে vertex-ai-caller পরিষেবা অ্যাকাউন্টটি মুছে ফেলতে বা Vertex AI ব্যবহারকারীর ভূমিকা প্রত্যাহার করতে চাইতে পারেন।

আপনি যদি সম্পূর্ণ প্রকল্প মুছে ফেলার সিদ্ধান্ত নেন, আপনি https://console.cloud.google.com/cloud-resource-manager- এ যেতে পারেন, ধাপ 2-এ আপনার তৈরি করা প্রকল্পটি নির্বাচন করুন এবং মুছুন নির্বাচন করুন৷ আপনি যদি প্রকল্পটি মুছে ফেলেন, তাহলে আপনাকে আপনার ক্লাউড SDK-এ প্রকল্পগুলি পরিবর্তন করতে হবে৷ আপনি gcloud projects list চালিয়ে সমস্ত উপলব্ধ প্রকল্পের তালিকা দেখতে পারেন।