Cloud Shell में Imagen और Mesop की मदद से, इमेज जनरेट करने वाला ऐप्लिकेशन बनाना

25 मिनट बाकी हैं

इस कोडलैब (कोड बनाना सीखने के लिए ट्यूटोरियल) के बारे में जानकारी

पिछली बार अप्रैल 4, 2025 को अपडेट किया गया

Katie Nguyen ने लिखा

इस पेज का अनुवाद Cloud Translation API से किया गया है.

1. परिचय

कल्पना करें कि किसी टेक्स्ट की जानकारी को कुछ ही सेकंड में, शानदार और बारीकी से दिखाई गई इमेज में बदल दिया जाए. यह जनरेटिव मीडिया की ताकत है. यह एक ऐसा फ़ील्ड है जो तेज़ी से आगे बढ़ रहा है. इससे विज़ुअल कॉन्टेंट बनाने और उससे इंटरैक्ट करने के तरीके में बदलाव हो रहा है. Vertex AI पर Google के Imagen 3 जैसे मॉडल, ऐप्लिकेशन डेवलपर के लिए जनरेटिव एआई की बेहतरीन सुविधाएं उपलब्ध करा रहे हैं.

Imagen 3, टेक्स्ट से इमेज जनरेट करने वाला Google का अब तक का सबसे शानदार मॉडल है. यह शानदार जानकारी वाली इमेज बना सकता है. इसलिए, डेवलपर के पास अगली पीढ़ी के एआई प्रॉडक्ट बनाते समय ज़्यादा कंट्रोल होता है. ये प्रॉडक्ट, उनकी कल्पना को अच्छी क्वालिटी वाली विज़ुअल ऐसेट में बदल देते हैं. Vertex AI पर Imagen के बारे में ज़्यादा जानें.

इस कोडलैब में, Google के जनरेटिव एआई वाले SDK टूल का इस्तेमाल करके, Imagen की सुविधाओं का इस्तेमाल करने का तरीका बताया गया है. इस ट्यूटोरियल में, टेक्स्ट प्रॉम्प्ट से शानदार इमेज जनरेट करने का तरीका तो बताया ही जाएगा, साथ ही Python यूज़र इंटरफ़ेस (यूआई) फ़्रेमवर्क Mesop का इस्तेमाल करके, इस सुविधा को वेब ऐप्लिकेशन में इंटिग्रेट करने का तरीका भी बताया जाएगा.

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

बिलिंग और Vertex AI API की सुविधा वाला Google Cloud प्रोजेक्ट. प्रोजेक्ट और डेवलपमेंट एनवायरमेंट सेट अप करने के बारे में ज़्यादा जानें.

आपको क्या सीखने को मिलेगा

Imagen 3 के साथ इंटरैक्ट करने के लिए, Python के लिए Google Gen AI SDK टूल का इस्तेमाल करने का तरीका
टेक्स्ट प्रॉम्प्ट से इमेज जनरेट करने का तरीका
Mesop ऐप्लिकेशन बनाने और उसे Cloud Shell से चलाने का तरीका

आपको किन चीज़ों की ज़रूरत होगी

Python के बारे में बुनियादी जानकारी
Cloud Shell टर्मिनल में कमांड चलाने का अनुभव
Cloud Shell का ऐक्सेस वाला कंप्यूटर

2. एनवायरमेंट सेटअप करना और डिपेंडेंसी इंस्टॉल करना

Cloud Shell Editor खोलें
सबसे ऊपर दाएं कोने में मौजूद, 'टर्मिनल खोलें' बटन पर क्लिक करें
टर्मिनल में यह निर्देश डालकर नया फ़ोल्डर बनाएं:

mkdir my-imagen-app

डायरेक्ट्री को अपने नए फ़ोल्डर में बदलें:

cd my-imagen-app

Python 3 में वर्चुअल एनवायरमेंट बनाना:

python3 -m venv myenv

वर्चुअल एनवायरमेंट चालू करने के लिए:

source myenv/bin/activate

Mesop इंस्टॉल करें:

pip3 install mesop

Python के लिए Google Gen AI SDK टूल इंस्टॉल करें:

pip install google-genai

Python फ़ाइल बनाना:

touch main.py

3. ऐप्लिकेशन सेट अप करें

Mesop ऐप्लिकेशन को चलाने के लिए ज़रूरी सभी कोड, main.py में मौजूद होंगे. अगले हर चरण में, इस फ़ाइल में मौजूद कोड को क्रम से कॉपी करके Cloud Shell एडिटर में चिपकाएं.

लाइब्रेरी इंपोर्ट करना

import base64
import mesop as me
from google import genai
from google.genai import types

Google Cloud प्रोजेक्ट की जानकारी सेट करना और क्लाइंट बनाना

अपना प्रोजेक्ट आईडी सेट करें:

PROJECT_ID = "[your-project-id]"

कोड की इस लाइन को कॉपी करते समय, [your-project-id] की जगह अपने Google Cloud प्रोजेक्ट का नाम डालें.

क्लाइंट बनाएं:

client = genai.Client(vertexai=True, project=PROJECT_ID, location="us-central1")

इमेज जनरेट करने का मॉडल लोड करना

imagen_model = "imagen-3.0-generate-002"

स्टेट मैनेजमेंट

स्टेटस मैनेजमेंट तय करने से, आपको उपयोगकर्ता के पूरे सफ़र के दौरान जानकारी सेव करने की सुविधा मिलती है.

@me.stateclass
class State:
   input: str = ""
   enhanced_prompt: str = ""
   img_data: str = "https://storage.googleapis.com/cloud-samples-data/generative-ai/image/flowers.png"

input: उपयोगकर्ता का दिया गया इनपुट, जिसका इस्तेमाल इमेज जनरेट करने के लिए किया जाएगा.
enhanced_prompt: imagen-3.0-generate-002 मॉडल, आपके दिए गए प्रॉम्प्ट को बेहतर बनाने का विकल्प देता है. बेहतर क्वालिटी की इमेज जनरेट करने में आपकी मदद करने के लिए, आपके ओरिजनल प्रॉम्प्ट से एक नया और ज़्यादा जानकारी वाला प्रॉम्प्ट बनाया जाएगा. यह प्रॉम्प्ट इस वैरिएबल में दिखेगा.
img_data: Imagen 3 की मदद से जनरेट की गई इमेज की क्लाउड स्टोरेज लोकेशन या इमेज बाइट.

4. हेल्पर फ़ंक्शन तय करना

लोड फ़ंक्शन

यह कोड, ऐप्लिकेशन लोड होने पर लागू होगा. यह ऐप्लिकेशन के मोड को सिस्टम के रंगों पर सेट करता है.

def load(e: me.LoadEvent):
  me.set_theme_mode("system")

धुंधला करने वाला फ़ंक्शन

यह फ़ंक्शन, उपयोगकर्ता के इनपुट को आपके स्टेट वैरिएबल में सेव करता है.

def on_blur(e: me.InputBlurEvent):
    state = me.state(State)
    state.input = e.value

5. Imagen की मदद से इमेज जनरेट करना

यह फ़ंक्शन तब चालू होता है, जब कोई उपयोगकर्ता इमेज जनरेट करने के लिए टेक्स्ट प्रॉम्प्ट सबमिट करने के लिए बटन पर क्लिक करता है.

def generate_image(e: me.ClickEvent):
    state = me.state(State)
    image = client.models.generate_images(
        model=imagen_model,
        prompt=state.input,
        config=types.GenerateImagesConfig(
            number_of_images=1,
            aspect_ratio="1:1",
            enhance_prompt=True,
            safety_filter_level="BLOCK_MEDIUM_AND_ABOVE",
            person_generation="DONT_ALLOW",
        )
    )
    img = image.generated_images[0].image.image_bytes
    # Encode image in Base64 to display in web app
    img64 = base64.b64encode(img).decode('utf-8')
    state.enhanced_prompt = image.generated_images[0].enhanced_prompt
    state.img_data = f"data:image/png;base64,{img64}"

GenerateImagesConfig में मौजूद सेटिंग को कॉन्फ़िगर किया जा सकता है:

number_of_images: 1, 2, 3, 4
aspect_ratio: 1:1, 9:16, 16:9, 3:4, 4:3
safety_filter_level: BLOCK_LOW_AND_ABOVE, BLOCK_MEDIUM_AND_ABOVE, BLOCK_ONLY_HIGH, BLOCK_NONE
person_generation: DONT_ALLOW, ALLOW_ADULT, ALLOW_ALL

ध्यान दें: अनुमति वाली अतिरिक्त सूची के बिना काम करने वाला एकमात्र विकल्प, DONT_ALLOW है.

6. ऐप्लिकेशन का लेआउट

@me.page(
  on_load=load,
  path="/",
  title="Imagen 3",
)
def app():
   s = me.state(State)
   with me.box(
        style=me.Style(
            display="grid",
            width="100%",
            place_items="center",
            margin=me.Margin(top=100),
         )
    ):
        me.text(text="Imagen 3: Image Generation", type="headline-3", style=me.Style(font_family="Google Sans"))
        with me.box(
           style=me.Style(
              border_radius=16,
              padding=me.Padding.all(8),
              display="flex",
           )
        ):
            with me.box(
               style=me.Style(flex_grow=1)
            ):
                me.native_textarea(
                autosize=True,
                on_blur=on_blur,
                min_rows=8,
                placeholder="Enter your image prompt",
                style=me.Style(
                    padding=me.Padding(top=16, left=16),
                    width="700px",
                    border_radius=16,
                    outline="none",
                    overflow_y="auto",
                    border=me.Border.all(
                        me.BorderSide(style="none"),
                    ),
                    font_family="Google Sans",
                  ),
                )
            with me.content_button(
                type="icon",
                on_click=generate_image,
            ):
                me.icon("send")
        with me.box(style=me.Style(margin=me.Margin.all(8),
            width="700px",
            display="flex",
            align_items="center")
        ):
            me.image(
              src=s.img_data,
              style=me.Style(width="350px", padding=me.Padding.all(16), border_radius=36)
            )
            with me.box(
               style=me.Style(
                  padding=me.Padding.all(8),
                  background="white",
                  height="400px",
                  width="400px",
                  border_radius=16,
               )
            ):
                me.text(text="Enhanced Prompt:", style=me.Style(font_family="Google Sans", font_weight="bold"))
                me.text(text=s.enhanced_prompt, style=me.Style(padding=me.Padding.all(10), font_family="Google Sans"),
            )

यह कोड, एक पेज वाला ऐप्लिकेशन बनाता है. इसमें ये कॉम्पोनेंट शामिल होते हैं:

शीर्षक
इमेज प्रॉम्प्ट डालने के लिए टेक्स्ट एरिया
generate_image फ़ंक्शन को कॉल करने वाला 'भेजें' बटन
Imagen से जनरेट की गई इमेज
इमेज के साथ दिखाया गया बेहतर प्रॉम्प्ट

7. Cloud Shell में ऐप्लिकेशन चलाना

सभी कोड स्निपेट को main.py में कॉपी करने के बाद, अपने Cloud Shell टर्मिनल से Mesop ऐप्लिकेशन चलाया जा सकता है.
```
mesop main.py
```
अब, सबसे ऊपर दाएं कोने में मौजूद, वेब की झलक वाले बटन पर क्लिक करें. इसके बाद, पोर्ट बदलें पर क्लिक करें. पोर्ट नंबर बॉक्स में 32123 टाइप करें. इसके बाद, बदलें और झलक देखें पर क्लिक करें. इसके बाद, एक नई विंडो खुलेगी. इसमें, लोड किया गया ऐप्लिकेशन दिखेगा. यह कुछ ऐसा दिखेगा:

8. Imagen 3 की जांच करना

यहां आपको अपने टेक्स्ट प्रॉम्प्ट के साथ Imagen आज़माने का मौका मिलता है. इसकी मदद से, अलग-अलग स्टाइल में इमेज जनरेट की जा सकती हैं. जैसे, फ़ोटोरियलिज़्म, ऐनिमेशन, और अलग-अलग तरह की आर्ट स्टाइल. कैमरे के खास ऐंगल, लेंस वगैरह के बारे में भी बताया जा सकता है. आपके मूल टेक्स्ट प्रॉम्प्ट को भी एलएलएम पर आधारित सुविधा की मदद से फिर से लिखा जाएगा. इसका मकसद, बेहतर क्वालिटी की ऐसी इमेज बनाना है जो मूल प्रॉम्प्ट के इंटेंट को बेहतर तरीके से दिखाती हों.

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

यहां कुछ प्रॉम्प्ट के उदाहरण दिए गए हैं:

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

9. साफ़-सफ़ाई सेवा

ऐप्लिकेशन को बंद करना

उस टर्मिनल पर वापस जाएं जहां आपने ऐप्लिकेशन लॉन्च किया था और Ctrl C दबाकर ऐप्लिकेशन से बाहर निकलें.

वर्चुअल एनवायरमेंट बंद करना

उसी टर्मिनल में यह कमांड टाइप करें:

deactivate

10. नतीजा

बधाई हो! आपने Imagen की मदद से ऐप्लिकेशन बनाकर और कुछ इमेज जनरेट करके, यह कोडलैब पूरा कर लिया है.

सर्वे

इस छोटे सर्वे को भरकर, हमें बताएं कि आपको यह कोडलैब कैसा लगा.

अगले चरण

गलती की शिकायत करें