আপনার অ্যাপে A2UI সারফেসগুলো রেন্ডার করুন

Jetpack Compose-এর এজেন্ট-টু-ইউআই (A2UI) রেন্ডারার ব্যবহার করার সময়, একটি এআই এজেন্ট এমন মেসেজ পাঠায় যা ইউআই স্ট্রাকচার, কম্পোনেন্ট প্রোপার্টি এবং ডেটা আপডেট বর্ণনা করে। আপনার অ্যাপে এই ইন্টারফেসগুলো নেটিভভাবে প্রদর্শন করার জন্য, আপনাকে আপনার অ্যাপের Jetpack Compose হায়ারার্কির মধ্যে একটি A2UI সারফেস হোস্ট এবং রেন্ডার করতে হয়।

Compose A2UI রেন্ডারার মেসেজ পার্সিং, রিঅ্যাক্টিভ স্ন্যাপশট স্টেট ম্যানেজমেন্ট এবং অ্যানিমেটেড সারফেস স্টেট ট্রানজিশনের মধ্যে সমন্বয় সাধন করে। যদিও মূল রেন্ডারারটি কোনো নির্দিষ্ট ডিজাইন সিস্টেমের ওপর নির্ভরশীল নয়, তবুও এটি প্রদত্ত বেসিক ক্যাটালগের মাধ্যমে ম্যাটেরিয়াল ডিজাইন ৩-এর সাথে সরাসরি ইন্টিগ্রেশনের সুবিধা দেয়।

কম্পোজ-সমর্থিত ডেটা স্তর শুরু করুন

A2UI রেন্ডারার আপনার অ্যাপের ডেটা লেয়ারে স্ন্যাপশট-অ্যাওয়ার স্টেট সমর্থন করে, যা আপনার অ্যাপের UI-কে এজেন্ট থেকে আসা ইনক্রিমেন্টাল আপডেটের প্রতি প্রতিক্রিয়া জানাতে সাহায্য করে। এই সমর্থনটি যোগ করতে, নিম্নলিখিত কোড স্নিপেটে দেখানো অনুযায়ী আপনার ViewModel এ A2uiMessageParser এবং A2uiMessageProcessor ফ্যাক্টরি ফাংশন ব্যবহার করে পার্সার এবং প্রসেসর ইনিশিয়ালাইজ করুন:

class AgenticUiViewModel : ViewModel() {
    // Create a parser that leverages the built-in JSON parser.
    private val parser = A2uiMessageParser()

    // Create an A2UI message processor with your catalog and optional
    // action interceptor (implementing A2uiActionInterceptor).
    private val processor = A2uiMessageProcessor(
        // You can also use the provided Material catalog instead of
        // a custom one.
        catalogs = listOf(CustomDesignSystemCatalog)
    )

    // Expose active surfaces to the UI as a StateFlow.
    val a2uiSurfaces: StateFlow<List<A2uiSurfaceModel>> =
        processor.activeSurfaces

    init {
        // Collect messages on a background thread tied to the ViewModel lifecycle.
        viewModelScope.launch(Dispatchers.Default) {
            processor.collectMessages()
        }

        // Add support for two-way communication with the agent.
        viewModelScope.launch(start = CoroutineStart.UNDISPATCHED) {
            processor.outboundEvents.collect(::handleOutboundA2uiEvent)
        }
    }

    // Called by your app's networking layer or business logic whenever
    // a new A2UI protocol message arrives from the AI agent.
    fun onNetworkMessage(json: String) {
        processor.processInput(parser, json)
    }
}

বেসিক ক্যাটালগ (মেটেরিয়াল ৩) ব্যবহার করে সারফেসগুলো রেন্ডার করুন।

প্রদত্ত বেসিক ক্যাটালগ ইমপ্লিমেন্টেশন ( androidx.compose.material3:material3-a2ui ) ব্যবহার করে সারফেস রেন্ডার করার সময়, আপনি লোডিং ইন্ডিকেটর, এরর বাউন্ডারি এবং অ্যানিমেটেড ট্রানজিশনের মতো বিল্ট-ইন সাপোর্ট সহ একটি সম্পূর্ণ স্টাইল করা ম্যাটেরিয়াল ৩ সারফেস রেন্ডার করতে পারেন। এটি করার জন্য, A2uiSurface কম্পোজেবল এন্ট্রি পয়েন্টটি ব্যবহার করুন:

@Composable
fun AgenticUiScreen(viewModel: AgenticUiViewModel) {
    // Observe active surfaces managed by the data layer.
    val surfaces by viewModel.a2uiSurfaces.collectAsStateWithLifecycle()

    Column(Modifier.fillMaxSize()) {
        surfaces.forEach { surface ->
            key(surface.id) {
                A2uiSurface(
                    surfaceModel = surface,
                    // Add your surface's custom modifiers here.
                )
            }
        }
    }
}

পৃষ্ঠের অবস্থা এবং অ্যানিমেটেড রূপান্তর পরিচালনা করুন

A2uiSurface রুট কম্পোনেন্টের স্টেট রেজোলিউশন সমন্বয় করে এবং লোডিং, এরর ও সাকসেস স্টেট জুড়ে AnimatedContent ট্রানজিশন প্রয়োগ করে:

@Composable
fun CustomStyledSurface(surface: A2uiSurfaceModel) {
    A2uiSurface(
        surfaceModel = surface,
        modifier = Modifier.fillMaxSize(),
        loadingContent = {
            Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                CircularProgressIndicator()
            }
        },
        errorContent = { exception ->
            Text(
                text = "Failed to load: ${exception.message}",
                color = MaterialTheme.colorScheme.error,
                // Add your custom error styling, such as modifiers, here.
            )
        },
        transitionSpec = {
            (fadeIn(animationSpec = tween(600)) togetherWith
                    fadeOut(animationSpec = tween(600)))
                .using(SizeTransform(clip = false))
        },
    )
}

কাস্টম রাউটার ব্যবহার করে নিম্ন-স্তরের সারফেস রেন্ডারিং

দ্রষ্টব্য: এই কাস্টমাইজেশনটি সেইসব অ্যাপের জন্য উদ্দিষ্ট, যেগুলি বিকল্প বা কাস্টম ডিজাইন সিস্টেম ব্যবহার করে, এবং সেইসাথে এমন অ্যাপের জন্যও, যেগুলির অন্যথায় নিম্ন-স্তরের নিয়ন্ত্রণের প্রয়োজন হয়।

আপনি observeA2uiComponentState ব্যবহার করে সরাসরি সারফেস রুট কম্পোনেন্টের অবস্থা পর্যবেক্ষণ করতে পারেন এবং A2uiComponent উপর রেন্ডারিংয়ের দায়িত্ব অর্পণ করতে পারেন:

@Composable
fun RawSurfaceCoordinator(surface: A2uiSurfaceModel) {
    // Extract the catalog to provide its readiness evaluator to the
    // composition. This lets components wait for their dynamic data bindings
    // before they're rendered.
    val coreSurface = surface as? A2uiCoreSurfaceModel
        ?: throw IllegalArgumentException(
            "Surface must implement A2uiCoreSurfaceModel")
    val composeCatalog = coreSurface.catalog as? A2uiCatalog
        ?: throw IllegalArgumentException("Catalog must implement A2uiCatalog")
    val readinessEvaluator = remember(composeCatalog) {
        composeCatalog.asReadinessEvaluator() }

    CompositionLocalProvider(
        LocalA2uiReadinessEvaluator provides readinessEvaluator
    ) {
        val rootState = observeA2uiComponentState(surface = surface)
        when (rootState) {
            is A2uiComponentState.Loading -> {
                LoadingSpinner()
            }
            is A2uiComponentState.Error -> {
                ErrorBanner(rootState.exception)
            }
            is A2uiComponentState.Success -> {
                // Delegate component routing to the Compose A2UI router.
                A2uiComponent(
                    component = rootState.component,
                    // Add your custom modifiers here.
                )
            }
        }
    }
}

বাস্তবায়নের বিবরণ

এজেন্ট-টু-ইউআই রেন্ডারার সারফেস স্টেট রেজোলিউশন এবং প্রতিরক্ষামূলক ত্রুটির সীমানা পরিচালনা করে।

প্রতিরক্ষামূলক ত্রুটির সীমানা এবং এজেন্টের হ্যালুসিনেশন পরিচালনা

যেহেতু A2UI সারফেসগুলো জেনারেটিভ LLM এজেন্ট দ্বারা চালিত হয়, তাই আগত পেলোডগুলো ত্রুটিপূর্ণ হতে পারে অথবা অজানা ধরনের কম্পোনেন্টকে নির্দেশ করতে পারে।

ক্র্যাশের সম্ভাবনা কমানোর জন্য রেন্ডারার নিম্নলিখিত প্রতিরক্ষামূলক সীমানাগুলো স্থাপন করে:

• এজেন্টের স্ব-সংশোধনের জন্য ত্রুটি প্রেরণ : ত্রুটিগুলি বহির্গামী ক্লায়েন্ট বার্তা হিসাবে প্রেরণ করা হয়, যা এজেন্টকে পরবর্তী ইন্টারঅ্যাকশন পালাগুলিতে স্ব-সংশোধন করতে সক্ষম করে। এছাড়াও একটি এপিআই রয়েছে যা কম্পোনেন্ট ইমপ্লিমেন্টেশনগুলিকে এজেন্টের কাছে ত্রুটি প্রেরণ করতে দেয়, যদি এপিআই রেন্ডার করার সময় কম্পোনেন্ট-নির্দিষ্ট ত্রুটি সনাক্ত করে।
• অপরিচিত কম্পোনেন্ট : যখন কোনো অচেনা কম্পোনেন্ট টাইপের সম্মুখীন হওয়া যায়, তখন সেটিকে UI ট্রি-তে পৌঁছানোর আগেই আটকানো হয়, একটি ত্রুটিপূর্ণ অবস্থা হিসেবে চিহ্নিত করা হয় এবং স্ব-সংশোধনের জন্য এজেন্টের কাছে ফেরত পাঠানো হয়।
• স্কিমা যাচাইকরণ ব্যর্থতা : পেলোডগুলি কম্পোনেন্ট স্কিমার ( A2uiSchema ) সাথে মিলিয়ে যাচাই করা হয়। ত্রুটিপূর্ণ প্রোপার্টিগুলি কখনই কম্পোজ UI লেআউটে পৌঁছানো উচিত নয়।
• স্পার্স-অ্যারে সুরক্ষা : যখন খুব বড় লিস্ট ইনডেক্স পাওয়া যায়, তখন ডেটা মডেলটি একটি ডেন্স লিস্ট থেকে একটি অ্যাডাপ্টিভ স্পার্স ম্যাপে রূপান্তরিত হয়, যা মেমোরি-সংক্রান্ত ত্রুটি প্রতিরোধ করে।