আপনার অ্যাপে A2UI সারফেস রেন্ডার করা

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

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

Compose-ব্যাকড ডেটা লেয়ার শুরু করুন

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)
    }
}

বেসিক ক্যাটালগ (Material 3) ব্যবহার করে সারফেস রেন্ডার করা

প্রদান করা বেসিক ক্যাটালগ ইমপ্লিমেন্টেশন (androidx.compose.material3:material3-a2ui) ব্যবহার করে সারফেস রেন্ডার করার সময়, আপনি সম্পূর্ণ স্টাইল করা Material 3 সারফেস রেন্ডার করতে পারবেন, যার মধ্যে লোডিং ইন্ডিকেটর, এরর বাউন্ডারি ও অ্যানিমেটেড ট্রানজিশনের জন্য বিল্ট-ইন সহায়তা অন্তর্ভুক্ত। এটি করতে, 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.
                )
            }
        }
    }
}

বাস্তবায়ন সংক্রান্ত বিবরণ

এজেন্ট-টু-UI রেন্ডারার সারফেস স্টেট রেজোলিউশন এবং ডিফেন্সিভ এরর বাউন্ডারি ম্যানেজ করে।

ডিফেন্সিভ এরর বাউন্ডারি ও এজেন্ট হ্যালুসিনেশন ম্যানেজ করা

A2UI সারফেস জেনারেটিভ LLM এজেন্ট দ্বারা পরিচালিত হয় বলে, ইনকামিং পেলোড খারাপভাবে ফর্ম করা হতে পারে বা অজানা কম্পোনেন্ট টাইপ রেফার করতে পারে।

ক্র্যাশ হওয়ার সম্ভাবনা কমাতে রেন্ডারার নিম্নলিখিত প্রতিরক্ষামূলক সীমানা তৈরি করে:

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