ছবি সংযুক্তি সহ UI তৈরি করুন

জেটপ্যাক কম্পোজ ব্যবহার করে এবং অ্যান্ড্রয়েডের সেরা অনুশীলনগুলি অনুসরণ করে আপনার অ্যান্ড্রয়েড অ্যাপ UI দৃষ্টিভঙ্গিকে বাস্তবে রূপ দিতে সাহায্য করার জন্য AI এজেন্ট অনন্যভাবে সজ্জিত। এই পৃষ্ঠায় AI ব্যবহার করে একটি অ্যাপ UI কীভাবে তৈরি এবং পুনরাবৃত্তি করতে হয় তা বর্ণনা করা হয়েছে।

AI ব্যবহার করে একটি UI তৈরি করতে, এই সাধারণ পদক্ষেপগুলি অনুসরণ করুন:

  1. আপনার পছন্দের অ্যাপ UI এর একটি মকআপ তৈরি করুন। আপনি একটি ডিজাইন টুল থেকে একটি PNG এক্সপোর্ট করতে পারেন অথবা এমনকি একটি হাতে আঁকা ছবিও ব্যবহার করতে পারেন।

    একটি অ্যাপ ইউজার ইন্টারফেসের হাতে আঁকা ওয়্যারফ্রেম
    চিত্র ১: একটি অ্যাপ ব্যবহারকারী ইন্টারফেসের একটি ওয়্যারফ্রেম।
  2. "চিত্র ফাইল সংযুক্ত করুন" বোতামে ক্লিক করে আপনার প্রশ্নের সাথে ছবিটি সংযুক্ত করুন। ছবি ফাইল সংযুক্ত করুন আইকন । আপনি প্রিভিউ প্যানেল থেকে সরাসরি জেনারেট কোড ফ্রম স্ক্রিনশট-এ ক্লিক করতে পারেন, যেখানে কোনও ফাইলের প্রিভিউ নেই।

    চিত্র ২: একটি খালি প্রিভিউ প্যানেলে একটি স্ক্রিনশট থেকে কোড তৈরি করুন।
  3. চ্যাট ক্ষেত্রে, AI এজেন্ট হিসেবে UI কোড তৈরি করতে হবে, উদাহরণস্বরূপ "প্রদত্ত ছবির জন্য Jetpack Compose কোড তৈরি করুন।" যখন আপনি কোয়েরি এবং ছবি জমা দেন তখন AI এজেন্ট প্রস্তাবিত UI তৈরির জন্য কোড প্রস্তাব করে। AI এজেন্ট সাধারণত Compose প্রিভিউয়ের জন্যও কোড সরবরাহ করে, তাই আপনার প্রকল্পে এটি আমদানি করার পরে আপনি UI দ্রুত কল্পনা করতে পারেন—যদি এটি না করে, তাহলে Compose প্রিভিউ তৈরি করতে বলুন।

    জেমিনি চ্যাট ইন্টারফেস একটি ছবির উপর ভিত্তি করে জেনারেট করা জেটপ্যাক কম্পোজ কোড দেখাচ্ছে।
    চিত্র ২: একটি সংযুক্ত ছবি থেকে জেটপ্যাক কম্পোজ কোড তৈরি করছে জেমিনি।
  4. একবার আপনি কোডটি আমদানি করে প্রিভিউ প্যানেলে কম্পোজ প্রিভিউ দেখতে পেলে, আপনি সরাসরি প্রিভিউতে ক্লিক করে এবং জেমিনিকে এটি রূপান্তর করতে বলে UI-তে পুনরাবৃত্তি করতে পারেন। যদি আপনার পছন্দের একটি চিত্র থাকে, তাহলে আপনি প্রিভিউতে ডান-ক্লিক করে AI Actions > Match UI to Target Image নির্বাচন করে UI-তে পুনরাবৃত্তি করতে পারেন।

    অ্যান্ড্রয়েড স্টুডিওতে একটি নির্বাচিত UI উপাদান এবং জেমিনি চ্যাট সহ একটি কম্পোজ প্রিভিউ দেখানো হচ্ছে।
    চিত্র ৫: কম্পোজ প্রিভিউ থেকে সরাসরি UI উপাদান রূপান্তর করতে জেমিনি ব্যবহার করা।
    চিত্র ৬: "Target Image-এর সাথে Match UI" ব্যবহারের উদাহরণ

UI মানের সমস্যাগুলি খুঁজুন এবং সমাধান করুন

AI এজেন্ট আপনার UI উচ্চমানের এবং অ্যাক্সেসযোগ্য কিনা তা নিশ্চিত করতেও আপনাকে সাহায্য করতে পারে। আপনার Compose প্রিভিউতে ডান-ক্লিক করুন এবং AI Actions > Fix all UI check issues নির্বাচন করুন। এজেন্ট অ্যাক্সেসিবিলিটি সমস্যার মতো সাধারণ সমস্যাগুলির জন্য আপনার UI অডিট করে এবং সেগুলি সমাধানের জন্য কোড সংশোধনের প্রস্তাব দেয়।

চিত্র ৭: AI এর সাথে UI সমস্যা সমাধান করুন
চিত্র ৮: সংশোধন প্রয়োগের পরে উদাহরণ UI।