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

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

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

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

VS Code में चल रहे Flutter Theme Agent का स्क्रीनशॉट

पहली इमेज. VS Code एक्सटेंशन डेवलपमेंट होस्ट विंडो में चल रहा Flutter Theme Agent.

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

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

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

Flutter Theme Agent प्रोजेक्ट, Microsoft Visual Studio Code (VS Code) के एक्सटेंशन के तौर पर काम करता है. साथ ही, पैकेज मैनेज करने और ऐप्लिकेशन चलाने के लिए, Node.js और npm का इस्तेमाल करता है. इंस्टॉल करने के लिए यहां दिए गए निर्देश, Linux होस्ट मशीन के लिए हैं.

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

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

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

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

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

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

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

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

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

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

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

    npm install

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

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

अपने सेटअप को कॉन्फ़िगर और टेस्ट करने के लिए:

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

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

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

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

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

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

मौजूदा कमांड में बदलाव करना

Flutter Theme Agent में दिए गए निर्देशों में बदलाव करना, एक्सटेंशन के व्यवहार और सुविधाओं में बदलाव करने का सबसे आसान तरीका है.

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

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

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

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

  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 Code एक्सटेंशन डेवलपमेंट होस्ट विंडो में, एडिटर विंडो में कोड की कोई टिप्पणी चुनें. इससे आपको बटन की पसंदीदा स्टाइल के बारे में पता चलेगा. उदाहरण के लिए:

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

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

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

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

Gemini API की मदद से, नए टास्क करने वाले नए निर्देश बनाकर, Flutter Theme Agent को बेहतर बनाया जा सकता है. 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. VS Code में, src/colorscheme2.ts फ़ाइल खोलें.

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

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

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

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

अन्य संसाधन

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

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

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