Gemini की मदद से एआई Flutter कोड जनरेटर बनाएं

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

इस ट्यूटोरियल में Flutter थीम एजेंट को बढ़ाने का तरीका बताया गया है. यह एआई की मदद से काम करने वाला एक कोड सहायता टूल है, जिसे Google की Flutter डेवलपर रिलेशन टीम ने बनाया है. यह ओपन सोर्स प्रोजेक्ट, Microsoft विज़ुअल Studio कोड (VS Code) का एक्सटेंशन है. यह Flutter थीम या थीमडेटा ऑब्जेक्ट के खास कॉम्पोनेंट जनरेट करता है. इनमें कलर स्कीम, टेक्स्ट स्टाइल, और बटन स्टाइल शामिल हैं. प्रोजेक्ट में बदलाव किया जा सकता है, ताकि ये मौजूदा फ़ंक्शन आपके लिए बेहतर तरीके से काम करें. इसके अलावा, अपने डेवलपमेंट वर्कफ़्लो के बेहतर तरीके से काम करने के लिए नए निर्देश बनाए जा सकते हैं.

प्रोजेक्ट की खास जानकारी और इसे बढ़ाने का तरीका जानने के लिए, AI Flutter Code Generator - Build with Google AI देखें. इसके अलावा, यहां दिए गए निर्देशों का पालन करके, प्रोजेक्ट को आगे बढ़ाया जा सकता है.

VS Code में चल रहे Flutter थीम एजेंट का स्क्रीनशॉट

पहला डायग्राम. VS कोड एक्सटेंशन डेवलपमेंट होस्ट विंडो में, Flutter थीम एजेंट चल रहा है.

प्रोजेक्ट सेटअप

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

ज़रूरी शर्तें इंस्टॉल करना

Flutter थीम एजेंट प्रोजेक्ट, Microsoft विज़ुअल Studio कोड (वीएस कोड) के एक्सटेंशन के तौर पर काम करता है. साथ ही, पैकेज मैनेज करने और ऐप्लिकेशन चलाने के लिए, Node.js और npm का इस्तेमाल करता है. नीचे दिए गए इंस्टॉल करने से जुड़े निर्देश, Linux होस्ट मशीन के लिए हैं.

ज़रूरी सॉफ़्टवेयर इंस्टॉल करने के लिए:

  1. अपने प्लैटफ़ॉर्म के लिए, विज़ुअल Studio कोड इंस्टॉल करें.
  2. अपने प्लैटफ़ॉर्म के लिए, इंस्टॉल करने के निर्देशों का पालन करके node और npm इंस्टॉल करें.
  3. अगर आपने पहले से VS Code के लिए Flutter को इंस्टॉल नहीं किया है, तो इंस्टॉल करने के निर्देशों का पालन करें.

प्रोजेक्ट का क्लोन बनाएं और उसे कॉन्फ़िगर करें

प्रोजेक्ट कोड डाउनलोड करें और ज़रूरी डिपेंडेंसी डाउनलोड करने और प्रोजेक्ट को कॉन्फ़िगर करने के लिए, npm इंस्टॉलेशन कमांड का इस्तेमाल करें. प्रोजेक्ट सोर्स कोड को फिर से पाने के लिए, आपको git सोर्स कंट्रोल सॉफ़्टवेयर की ज़रूरत होगी.
प्रोजेक्ट कोड को डाउनलोड और कॉन्फ़िगर करने के लिए:

  1. नीचे दिए गए कमांड का इस्तेमाल करके, गिट रिपॉज़िटरी का क्लोन बनाएं.

    git clone https://github.com/google/generative-ai-docs`

  2. इसके अलावा, स्पार्स चेकआउट का इस्तेमाल करने के लिए, अपना लोकल गिट रिपॉज़िटरी कॉन्फ़िगर करें. इससे आपके पास सिर्फ़ Docs एजेंट प्रोजेक्ट की फ़ाइलें होंगी.

    cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/flutter_theme_agent

  3. Flutter थीम एजेंट प्रोजेक्ट की रूट डायरेक्ट्री पर जाएं.

    cd generative-ai-docs/examples/gemini/node/flutter_theme_agent/

  4. डिपेंडेंसी डाउनलोड करने के लिए, इंस्टॉल कमांड चलाएं और प्रोजेक्ट को कॉन्फ़िगर करें:

    npm install

एक्सटेंशन को कॉन्फ़िगर करें और उसकी जांच करें

अब आप अपने डिवाइस पर VS Code में डेवलपमेंट एक्सटेंशन के रूप में Flutter थीम एजेंट चलाकर अपने इंस्टॉलेशन की जांच कर सकेंगे. टेस्ट, एक अलग VS कोड एक्सटेंशन डेवलपमेंट होस्ट विंडो खोलता है, जहां नया एक्सटेंशन उपलब्ध होता है. इस नई विंडो में, आपको उस एपीआई पासकोड को कॉन्फ़िगर करना होगा जिसका इस्तेमाल एक्सटेंशन, Google Gemini API को ऐक्सेस करने के लिए करता है.

अपने सेटअप को कॉन्फ़िगर करने और उसकी जांच करने के लिए:

  1. VS Code ऐप्लिकेशन शुरू करें.
  2. बनाम कोड में, फ़ाइल > नई विंडो चुनकर एक नई विंडो बनाएं.
  3. फ़ाइल > फ़ोल्डर खोलें और फिर flutter_theme_agent/ फ़ोल्डर चुनकर, Flutter थीम एजेंट प्रोजेक्ट खोलें.
  4. बनाम कोड में, flutter_theme_agent/package.json फ़ाइल खोलें.
  5. रन > डीबग करना शुरू करें चुनकर, एक्सटेंशन को डीबग मोड में चलाएं. इस चरण से एक अलग VS कोड एक्सटेंशन डेवलपमेंट होस्ट विंडो खुलती है.
  6. कोड > सेटिंग > सेटिंग चुनकर VS Code सेटिंग खोलें.
  7. जनरेटिव एआई डेवलपर साइट से, Google Gemini API (एपीआई) कुंजी पाएं और कुंजी स्ट्रिंग को कॉपी करें.

  8. एपीआई पासकोड को कॉन्फ़िगरेशन सेटिंग के तौर पर सेट करें. खोज सेटिंग फ़ील्ड में, flutter theme टाइप करें और उपयोगकर्ता टैब चुनें. इसके बाद, Google > Gemini: Api Key सेटिंग में, settings.json में बदलाव करें लिंक पर क्लिक करें और अपनी Gemini API कुंजी जोड़ें:

    "google.ai.apiKey": "your-api-key-here"

  9. किए गए बदलावों को settings.json फ़ाइल में सेव करें और सेटिंग टैब बंद करें.

एक्सटेंशन कमांड की जांच करने के लिए:

  1. VS कोड एक्सटेंशन डेवलपमेंट होस्ट विंडो में, उस यूज़र इंटरफ़ेस कॉम्पोनेंट के बारे में जानकारी देने वाली कोड टिप्पणी लिखें जिसे आपको जनरेट करना है.
  2. कॉम्पोनेंट की विशेषताओं के बारे में बताने वाली टिप्पणी का टेक्स्ट चुनें.
  3. व्यू > कमांड पैलेट चुनकर, निर्देश पैलेट खोलें.
  4. Command पैलेट में, Flutter Theme लिखें और उस प्रीफ़िक्स वाले निर्देश को चुनें.

मौजूदा निर्देश में बदलाव करें

Flutter थीम एजेंट में दिए गए कमांड में बदलाव करना, एक्सटेंशन के व्यवहार और उसकी क्षमताओं को बदलने का सबसे आसान तरीका है.

टिप्पणी और समीक्षा करने के निर्देश, दोनों में कोड के लिए कोड और टिप्पणियों के उदाहरण के साथ शॉट लेने के लिए कुछ तरीकों का इस्तेमाल किया जाता है. साथ ही, एआई लैंग्वेज मॉडल के लिए कुछ सामान्य निर्देशों का भी इस्तेमाल किया जाता है. प्रॉम्प्ट के बारे में दी गई इस जानकारी से, Gemini लैंग्वेज मॉडल को रिस्पॉन्स जनरेट करने में मदद मिलती है. टिप्पणी या समीक्षा निर्देशों में प्रॉम्प्ट के निर्देशों, उदाहरणों या दोनों को बदलकर, हर मौजूदा निर्देश के काम करने के तरीक़े को बदला जा सकता है.

निर्देशों के इस सेट में बताया गया है कि निर्देश के प्रॉम्प्ट टेक्स्ट को बदलकर, buttonstyle.ts कमांड में कैसे बदलाव किया जाता है.

buttonstyle.ts कमांड में बदलाव करने के लिए:\

  1. VS Code ऐप्लिकेशन शुरू करें.
  2. बनाम कोड में, फ़ाइल > नई विंडो चुनकर एक नई विंडो बनाएं.
  3. फ़ाइल > फ़ोल्डर खोलें और फिर flutter_theme_agent/ फ़ोल्डर चुनकर, Flutter थीम एजेंट प्रोजेक्ट खोलें.

  4. flutter_theme_agent/src/buttonstyle.ts फ़ाइल खोलें.

    buttonstyle.ts निर्देश के व्यवहार में बदलाव करने के लिए:\

  5. buttonstyle.ts फ़ाइल में, BUTTONSTYLE_CONTEXT कॉन्स्टेंट में बदलाव करें, ताकि अलग-अलग निर्देश शामिल किए जा सकें.

    const BUTTONSTYLE_CONTEXT=`
ButtonStyle should only define properties that exist for a ButtonStyle
object. ButtonStyle objects have the following properties. The buttons
can ONLY be styled by setting these properties. No other properties:
alignment → AlignmentGeometry? // The alignment of the button's child.
...

  6. विकल्प के तौर पर, buttonstyle.ts फ़ाइल BUTTONSTYLE_CONTEXT में, बटन की स्टाइल के निर्देश और आउटपुट का एक और उदाहरण जोड़ें या मौजूदा उदाहरणों में से किसी एक को बदलें.

    ...
Here's an example prompt:
Create a ButtonStyle where the button is green by default and blue on hover state. And elevation is 14, no surface tint color, and the splash effect is turned off.
Here's an example of good Dart code:
ButtonStyle(
  backgroundColor: MaterialStateProperty.resolveWith<Color?>(
...

  7. बदलावों को buttonstyle.ts फ़ाइल में सेव करें.

बदले गए निर्देश की जांच करने के लिए:

  1. अपने VS Code एक्सटेंशन प्रोजेक्ट की विंडो में, रन > डीबगिंग रीस्टार्ट करें को चुनकर डीबगर को रीस्टार्ट करें.

  2. VS कोड एक्सटेंशन डेवलपमेंट होस्ट विंडो में, अपनी पसंद की बटन की स्टाइल के बारे में जानकारी देने वाली एडिटर विंडो में कोई कोड टिप्पणी चुनें, उदाहरण के लिए:

    // blue, lickable buttons that light up when you hover over them`

  3. व्यू > कमांड पैलेट चुनकर, निर्देश पैलेट खोलें.

  4. Command पैलेट में, Flutter टाइप करें और Flutter थीम Agent: Create a Flutter ButtonStyle कमांड चुनें.

नया निर्देश दें

Gemini API की मदद से, नए निर्देश बनाकर Flutter थीम एजेंट को बढ़ाया जा सकता है. buttonstyle.ts और colorscheme.ts जैसी हर कमांड फ़ाइल ज़्यादातर अपने-आप में पूरी होती है. इनमें ऐक्टिव एडिटर से टेक्स्ट इकट्ठा करने, प्रॉम्प्ट लिखने, Gemini API से कनेक्ट करने, प्रॉम्प्ट भेजने, और जवाब देने के लिए कोड शामिल होता है.

Flutter थीम एजेंट का स्क्रीनशॉट, जिसमें नया निर्देश दिख रहा है

दूसरी इमेज. VS Code एक्सटेंशन डेवलपमेंट होस्ट विंडो में एक नया Flutter थीम एजेंट कमांड दिया गया है.

निर्देशों का यह सेट बताता है कि मौजूदा कमांड colorscheme.ts के कोड का इस्तेमाल करके, एक नया कमांड कैसे बनाया जाता है. इसे टेंप्लेट के तौर पर इस्तेमाल किया जाता है. इस अपडेट के बाद, ColorScheme ऑब्जेक्ट में एनक्लोज़िंग सिंटैक्स को शामिल न करने का निर्देश बदल जाता है. इससे, आपको जनरेशन के बाद इस सिंटैक्स को हटाने और आउटपुट को तेज़ी से विज़ुअलाइज़ करने की ज़रूरत नहीं पड़ती.

ऐसा निर्देश बनाने के लिए जो किसी ColorScheme ऑब्जेक्ट के लिए सिर्फ़ रंगों की सूची जनरेट करता हो:

  1. src/ डायरेक्ट्री में, colorscheme2.ts नाम की flutter_theme_agent/src/colorscheme.ts फ़ाइल की कॉपी बनाएं.
  2. बनाम कोड में, src/colorscheme2.ts फ़ाइल खोलें.

  3. colorscheme2.ts फ़ाइल में, generateColorScheme फ़ंक्शन का नाम बदलकर generateColorScheme2 करें:

    export async function generateColorScheme2(){
  vscode.window.showInformationMessage('Generating Color Scheme...');

  4. colorscheme2.ts फ़ाइल में, सूचना के लिए दिए गए निर्देशों को बदलें. COLORSCHEME_CONTEXT कोड जनरेट करने के निर्देशों में बदलाव करें. इसके लिए, लाइन 51 पर मौजूद उदाहरण के कोड से ColorScheme( टेक्स्ट को हटाएं और उसे एक खाली लाइन दें.

    ...
Here's the example of good Dart code:

  brightness: Brightness.light,
  primary: Color(0xffFF80AB),
...

  5. रंगों की सूची के आखिर से, क्लोज़िंग ब्रैकेट ")" को हटाकर, एक खाली लाइन बना दें.

    ...
  inversePrimary: Color(0xffD15B9D),
  surfaceTint: Color(0xffFF80AB),

This example code is a good ...

  6. दूसरे उदाहरण के लिए, इन बदलावों को दोहराएं. लाइन 87 पर COLORSCHEME_CONTEXT स्ट्रिंग में, ColorScheme( टेक्स्ट हटाएं और उसे एक खाली लाइन बना दें.

  7. पंक्ति 115 पर, रंगों की सूची के अंत से बंद कोष्ठक वर्ण ")" हटाएं और इसे एक खाली लाइन बना दें.

  8. COLORSCHEME_CONTEXT स्ट्रिंग में, ऐसा निर्देश जोड़ें जिसमें शामिल नहीं होने वाला सिंटैक्स शामिल न हो:

    ...
- The color scheme must be accessible and high-contrast.

In the response, only include the list of colors and nothing else. Do
not include a starting "ColorScheme(" prefix or an ending ")" suffix.

Here's an example user prompt:
...

  9. बदलावों को colorscheme2.ts फ़ाइल में सेव करें.

नया निर्देश जोड़ें

नए निर्देश के लिए कोड पूरा करने के बाद, आपको उसे बाकी एक्सटेंशन के साथ इंटिग्रेट करना होगा. नए कमांड को एक्सटेंशन का हिस्सा बनाने के लिए extension.ts और package.json फ़ाइलें अपडेट करें और नए कमांड को शुरू करने के लिए VS Code को चालू करें.

नए कमांड को एक्सटेंशन कोड के साथ इंटिग्रेट करने के लिए:

  1. बनाम कोड में, flutter_theme_agent/src/extension.ts फ़ाइल खोलें.

  2. नया इंपोर्ट स्टेटमेंट जोड़कर, एक्सटेंशन में नया कमांड कोड इंपोर्ट करें.

    import { generateColorScheme2 } from './components/colorscheme2';

  3. activate() फ़ंक्शन में यह कोड जोड़कर नया कमांड रजिस्टर करें.

    export function activate(context: vscode.ExtensionContext) {
    ...
    vscode.commands.registerCommand('flutter-theme-agent.generateColorScheme2',
        generateColorScheme2);
    ...
}

  4. बदलावों को extension.ts फ़ाइल में सेव करें.

नाम कमांड को एक्सटेंशन पैकेज के साथ इंटिग्रेट करने के लिए:

  1. बनाम कोड में, flutter_theme_agent/package.json फ़ाइल खोलें.

  2. पैकेज फ़ाइल के commands सेक्शन में नया निर्देश जोड़ें.

    "contributes": {
  "commands": [
    ...
    {
      "command": "flutter-theme-agent.generateColorScheme2",
      "title": "Flutter Theme Agent: My New Code Generator."
    }
  ],

  3. बदलावों को package.json फ़ाइल में सेव करें.

नए निर्देश की जांच करें

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

बदले गए निर्देश की जांच करने के लिए:

  1. अपनी VS कोड एक्सटेंशन प्रोजेक्ट विंडो में, रन > डीबगिंग रीस्टार्ट करें को चुनकर डीबगर को रीस्टार्ट करें. इसके बाद, एक अलग एक्सटेंशन डेवलपमेंट होस्ट विंडो को रीस्टार्ट करें.
  2. VS कोड एक्सटेंशन डेवलपमेंट होस्ट विंडो में, Flutter डेवलपमेंट प्रोजेक्ट खोलें.
  3. इसी विंडो में, एक कोड एडिटर विंडो खोलें और अपने पसंद के यूज़र इंटरफ़ेस कॉम्पोनेंट के बारे में जानकारी देने वाली टिप्पणी लिखें. इसके बाद, टिप्पणी के उस टेक्स्ट को चुनें.
  4. व्यू > कमांड पैलेट चुनकर, निर्देश पैलेट खोलें.
  5. Command पैलेट में, Flutter Theme टाइप करें और Flutter थीम Agent: My New Code Generator कमांड चुनें.

ज़्यादा रिसॉर्स

Flutter थीम एजेंट प्रोजेक्ट के बारे में ज़्यादा जानकारी के लिए, कोड रिपॉज़िटरी देखें. अगर आपको ऐप्लिकेशन बनाने में मदद चाहिए या आपको डेवलपर के साथ मिलकर काम करने वाले लोगों के साथ काम करना है, तो Google Developers Community Discord पर जाएं.

प्रोडक्शन ऐप्लिकेशन

अगर आपको बड़ी ऑडियंस के लिए Flutter थीम एजेंट डिप्लॉय करना है, तो ध्यान रखें कि Google Gemini API के इस्तेमाल पर, रेट को सीमित करने और अन्य इस्तेमाल से जुड़ी पाबंदियां लागू हो सकती हैं. अगर आपको Gemini मॉडल की मदद से प्रोडक्शन ऐप्लिकेशन बनाना है, तो Google Cloud Vertex AI की सेवाएं देखें. इससे, आपको अपने ऐप्लिकेशन को ज़्यादा बड़े पैमाने पर और भरोसेमंद बनाने में मदद मिलेगी.