কোড এবং ওয়্যারফ্রেম তৈরি
সারসংক্ষেপ
একবার আপনি আবদ্ধকারী বাক্স এবং আচরণ নির্ধারণ করে আপনার ছবিটিকে চিহ্নিত করার পরে, আপনি কার্যকরী কম্পোনেন্ট কোড অথবা একটি ওয়্যারফ্রেম লেআউট তৈরি করতে পারেন। এআই আবদ্ধকারী বাক্সের অবস্থান, উপাদানের ধরন এবং আচরণের দিক ব্যবহার করে সঠিক আউটপুট তৈরি করে।
সিলিকনফ্লো
এআই সহকারী প্যানেলটি হল ডানদিকের সাইডবার, যা কোড বা ওয়্যারফ্রেম তৈরি করার জন্য কনফিগার এবং ট্রিগার করতে ব্যবহৃত হয়। এতে নিম্নলিখিত নিয়ন্ত্রণগুলি রয়েছে:
দৃষ্টি মডেল নির্বাচক
আপনার ছবি বিশ্লেষণ এবং আউটপুট তৈরি করার জন্য কোন এআই ভিশন মডেল ব্যবহার করতে চান তা নির্বাচন করুন। বিভিন্ন মডেল বিভিন্ন স্তরের বিবরণ এবং নির্ভুলতা তৈরি করতে পারে।
ফ্রেমওয়ার্ক নির্বাচক
কোড তৈরির জন্য টার্গেট ফ্রেমওয়ার্ক নির্বাচন করুন (যেমন, React, Vue, Svelte)। তৈরি করা কোড নির্বাচিত ফ্রেমওয়ার্কের সিনট্যাক্স এবং প্যাটার্ন ব্যবহার করবে।
কম্পোনেন্ট/ওয়্যারফ্রেম ট্যাব
আপনার চিহ্নিত ছবি থেকে কম্পোনেন্ট কোড (কম্পোনেন্ট ট্যাব) অথবা ওয়্যারফ্রেম লেআউট (ওয়্যারফ্রেম ট্যাব) তৈরি করার মধ্যে পরিবর্তন করুন।
ছবি গ্রুপ
বর্তমান রিভার্স প্রকল্পের জন্য আপনার সমস্ত ছবি গ্রুপের তালিকা দেখায়। ছবি এবং কনফিগারেশন দেখার জন্য একটি গ্রুপ নির্বাচন করুন। প্রতিটি গ্রুপে থাকা ছবির সংখ্যা দেখানো হয়।
ব্লক তৈরি করুন
এআই জেনারেশন প্রক্রিয়া শুরু করার জন্য ক্লিক করুন। এআই নির্বাচিত গ্রুপের ছবি, বাউন্ডিং বক্সের চিহ্নিতকরণ এবং আচরণ বিশ্লেষণ করে আউটপুট তৈরি করবে।
আউটপুট মোড
কোড তৈরি করুন
সমর্থন বিষয়বস্তু.রিভার্সকোডজেন.আইটেম৬বর্ণনা আপনার পছন্দের ফ্রেমওয়ার্কের (React, Vue, Svelte, ইত্যাদি) জন্য টীকাযুক্ত ছবিটিকে কার্যকরী কম্পোনেন্ট কোডে রূপান্তর করুন। তৈরি করা কোডে লেআউট, স্টাইলিং এবং আপনি যে আচরণগুলি বাউন্ডিং বক্সে সংজ্ঞায়িত করেছেন, সেগুলি অন্তর্ভুক্ত থাকবে।
ওয়্যারফ্রেম তৈরি করুন।
সমর্থন বিষয়বস্তু.রিভার্সকোডজেন.আইটেম৭বর্ণনা টীকাযুক্ত ছবিটি একটি ওয়্যারফ্রেম লেআউট হিসাবে রপ্তানি করুন যা ওয়্যারফ্রেম টুলে খুলবে। প্রতিটি বাউন্ডিং বক্স একটি ওয়্যারফ্রেম উপাদানে পরিণত হবে, যা আপনি আরও পরিমার্জন, পুনর্বিন্যাস এবং অন্যান্য স্ক্রিনের সাথে সংযোগ করতে পারবেন।
কোড তৈরির বৈশিষ্ট্য
ফ্রেমওয়ার্ক নির্বাচন
সমর্থন বিষয়বস্তু.রিভার্সকোডজেন.আইটেম৮বর্ণনা কোড তৈরি করার আগে আপনার পছন্দের ফ্রেমওয়ার্ক নির্বাচন করুন। সমর্থিত ফ্রেমওয়ার্কগুলির মধ্যে রয়েছে React, Vue, Svelte, SolidJS, Angular এবং আরও অনেক কিছু।
আচরণ ম্যাপিং
সমর্থন বিষয়বস্তু.রিভার্সকোডজেন.আইটেম৯বর্ণনা বাউন্ডিং বক্সে নির্ধারিত আচরণগুলি আউটপুটে ইভেন্ট হ্যান্ডলার, নেভিগেশন লজিক, মোডাল এবং অন্যান্য ইন্টারেক্টিভ কোডে রূপান্তরিত হয়।
লেআউটের নির্ভুলতা
সমর্থন বিষয়বস্তু.রিভার্সকোডজেন.আইটেম১০বর্ণনা AI ছবিটি থেকে বাউন্ডিং বক্সের অবস্থান এবং আকার ব্যবহার করে এমন একটি লেআউট তৈরি করে যা মূল ভিজ্যুয়াল ডিজাইনের সাথে ঘনিষ্ঠভাবে মেলে।
ব্লকগুলিতে সংরক্ষণ করুন
টেক্সট: তৈরি করা কম্পোনেন্টগুলি সরাসরি আপনার ব্লকের লাইব্রেরিতে সংরক্ষণ করা যেতে পারে, যাতে সেগুলি বিভিন্ন প্রোজেক্টে পুনরায় ব্যবহার করা যায়।
টেক্সট: প্রোজেক্টে যোগ করুন
টেক্সট: তৈরি করা কোড সরাসরি আপনার বর্তমান প্রোজেক্টে নতুন কম্পোনেন্ট ফাইল হিসাবে যুক্ত করুন।
পরামর্শ
সেরা ফলাফলের জন্য, উচ্চ রেজোলিউশনের ছবি ব্যবহার করুন যাতে স্পষ্ট UI উপাদান থাকে। প্রতিটি উপাদানের চারপাশে আরও সঠিক কোড তৈরির জন্য আবদ্ধকারী বাক্সগুলি আঁকুন। অস্পষ্ট বর্ণনার পরিবর্তে নির্দিষ্ট আচরণ নির্ধারণ করুন - "সাইনআপ মোডাল খোলে" "কিছু করে" এর চেয়ে ভাল কাজ করে। এআই স্ট্যান্ডার্ড ওয়েব লেআউট এবং সাধারণ UI প্যাটার্নের সাথে সবচেয়ে ভাল কাজ করে।