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

1. परिचय

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

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

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

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

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

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

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

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

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

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

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

mkdir my-imagen-app

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

cd my-imagen-app

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

python3 -m venv myenv

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

source myenv/bin/activate

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

pip3 install mesop

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

pip install google-genai

9. Python फ़ाइल बनाएं:

touch main.py

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

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

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

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

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

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

PROJECT_ID = "[your-project-id]"

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

2. क्लाइंट खाता बनाएं:

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 में ऐप्लिकेशन चलाना

1. main.py में सभी कोड स्निपेट कॉपी करने के बाद, Cloud Shell टर्मिनल से Mesop ऐप्लिकेशन को चलाया जा सकता है.

   mesop main.py
   

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

8. Test Imagen 3

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

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

यहाँ प्रॉम्प्ट के कुछ उदाहरण दिए गए हैं, जिन्हें आज़माया जा सकता है:

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

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

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

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

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

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

deactivate

10. नतीजा

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

सर्वे

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

अगले चरण

• Imagen के प्रॉडक्ट से जुड़े दस्तावेज़
• Imagen 3 की मदद से इमेज जनरेट करने से जुड़ी नोटबुक
• Vertex AI पर Imagen 3 के बारे में डेवलपर की गाइड