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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. VS Code ऐप्लिकेशन खोलें.
  2. बनाम कोड में, फ़ाइल > नई विंडो पर क्लिक करें.
  3. फ़ाइल > फ़ोल्डर खोलें, और 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. अपने वीएस कोड एक्सटेंशन प्रोजेक्ट विंडो में, डीबगर को इस हिसाब से रीस्टार्ट करें: Run > डीबग करना फिर से शुरू करें.

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

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

  3. View > को चुनकर कमांड पैलेट खोलें Command पैलेट.

  4. Command पैलेट में, Flutter टाइप करें और Flutter थीम को चुनें एजेंट: Flutter ButtonStyle निर्देश बनाएं.

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

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

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

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

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

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

  1. इस नाम वाली flutter_theme_agent/src/colorscheme.ts फ़ाइल की कॉपी बनाएं src/ डायरेक्ट्री में colorscheme2.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 फ़ाइलों को इसमें अपडेट करें: नए कमांड को एक्सटेंशन का हिस्सा बनाएं और वीएस कोड को चालू करें, ताकि नया निर्देश मिलेगा.

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

  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 फ़ाइल में किए गए बदलावों को सेव करें.

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

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

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

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

अन्य संसाधन

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

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

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