कोड और वायरफ्रेम जनरेशन
معلومات
एक बार जब आप बाउंडिंग बॉक्स के साथ अपनी छवि को एनोटेट कर लेते हैं और व्यवहार असाइन कर लेते हैं, तो आप या तो काम करने वाले घटक कोड या वायरफ्रेम लेआउट उत्पन्न कर सकते हैं। AI बाउंडिंग बॉक्स की स्थिति, तत्व प्रकार और व्यवहार निर्देशों का उपयोग करके सटीक आउटपुट उत्पन्न करता है।
AI सहायक साइडबार
AI सहायक पैनल दाईं ओर का साइडबार है जिसका उपयोग आप कोड या वायरफ्रेम जनरेशन को कॉन्फ़िगर और ट्रिगर करने के लिए करते हैं। इसमें निम्नलिखित नियंत्रण शामिल हैं:
विज़न मॉडल चयनकर्ता
अपनी छवियों का विश्लेषण करने और आउटपुट उत्पन्न करने के लिए उपयोग करने के लिए AI विज़न मॉडल का चयन करें। विभिन्न मॉडल विभिन्न स्तरों का विवरण और सटीकता उत्पन्न कर सकते हैं।
ढांचा चयनकर्ता
कोड जनरेशन के लिए अपने लक्ष्य ढांचे का चयन करें (जैसे, React, Vue, Svelte)। उत्पन्न कोड चयनित ढांचे के सिंटैक्स और पैटर्न का उपयोग करेगा।
घटक / वायरफ्रेम टैब
घटक कोड (घटक टैब) या वायरफ्रेम लेआउट (वायरफ्रेम टैब) उत्पन्न करने के लिए स्विच करें।
छवि समूह
वर्तमान रिवर्स प्रोजेक्ट के लिए सभी छवि समूहों को सूचीबद्ध करता है। जनरेशन को कॉन्फ़िगर करने के लिए एक समूह का चयन करें। प्रत्येक समूह अपनी छवि गणना दिखाता है।
ब्लॉक उत्पन्न करें
जनरेशन शुरू करने के लिए क्लिक करें। AI चयनित समूह की छवियों के साथ-साथ किसी भी बाउंडिंग बॉक्स एनोटेशन और व्यवहार का विश्लेषण करेगा और आउटपुट उत्पन्न करेगा।
आउटपुट मोड
कोड उत्पन्न करें
एनोटेट की गई छवि को अपने लक्ष्य ढांचे में काम करने वाले घटक कोड में बदलें (React, Vue, Svelte, आदि)। उत्पन्न कोड में लेआउट, स्टाइल और आपके द्वारा बाउंडिंग बॉक्स पर परिभाषित कोई भी व्यवहार शामिल है।
वायरफ्रेम उत्पन्न करें
एनोटेट की गई छवि को वायरफ्रेम लेआउट के रूप में निर्यात करें जिसे वायरफ्रेम टूल में आगे संपादित किया जा सकता है। प्रत्येक बाउंडिंग बॉक्स एक वायरफ्रेम तत्व बन जाता है जिसे आप आगे परिष्कृत कर सकते हैं, पुनर्व्यवस्थित कर सकते हैं और अन्य स्क्रीन से कनेक्ट कर सकते हैं।
कोड जनरेशन सुविधाएँ
ढांचा चयन
जनरेशन से पहले अपने लक्ष्य ढांचे का चयन करें। समर्थित ढांचों में React, Vue, Svelte, SolidJS, Angular और अधिक शामिल हैं।
व्यवहार मैपिंग
बाउंडिंग बॉक्स पर असाइन किए गए व्यवहार को कोड में ईवेंट हैंडलर, नेविगेशन लॉजिक, मोडल और अन्य इंटरैक्टिव में अनुवादित किया जाता है।
लेआउट सटीकता
AI बाउंडिंग बॉक्स की स्थिति और आकार का उपयोग मूल दृश्य डिज़ाइन से मेल खाने वाले लेआउट का उत्पादन करने के लिए करता है।
ब्लॉक में सहेजें
उत्पन्न घटकों को सीधे आपके ब्लॉक लाइब्रेरी में सहेजा जा सकता है ताकि उन्हें परियोजनाओं में पुन: उपयोग किया जा सके।
परियोजना में जोड़ें
उत्पन्न कोड को सीधे अपने वर्तमान प्रोजेक्ट में नए घटक फ़ाइलों के रूप में डालें।
टिप्स
सर्वोत्तम परिणामों के लिए, उच्च-रिज़ॉल्यूशन वाली छवियों का उपयोग करें जिसमें स्पष्ट UI तत्व हों। अधिक सटीक कोड जनरेशन के लिए, प्रत्येक तत्व के चारों ओर कसकर बाउंडिंग बॉक्स बनाएं। विशिष्ट व्यवहार असाइन करें, अस्पष्ट विवरण नहीं — "एक साइनअप मोडल खोलता है" "कुछ करता है" से बेहतर काम करता है। AI सबसे अच्छा काम करता है जब मानक वेब लेआउट और सामान्य UI पैटर्न का उपयोग किया जाता है।