อนุญาตให้ Agent สร้าง UI ในแอป Android ด้วย A2UI

สวัสดีทุกคน ยินดีต้อนรับสู่การพูดคุยครั้งนี้ที่เราจะพูดถึงวิธีสร้าง UI ในแอป Android โดยใช้ไลบรารี A2UI ใหม่ล่าสุด

ผมชื่อ Nick Butcher เป็นผู้จัดการผลิตภัณฑ์ที่ทำงานเกี่ยวกับ Jetpack Compose

สวัสดีทุกคน ฉันชื่อ Anton เป็นวิศวกรในทีม Compose

ผมกำลังพัฒนาโปรแกรมแสดงผล A2UI ของ Jetpack Compose ใหม่ ซึ่งเราตื่นเต้นมากที่จะได้พูดถึงในวันนี้

ใช่ ตอนนี้ความสามารถของ AI เพิ่มขึ้นอย่างมาก แอปจำนวนมากจึงกำลังพิจารณาว่า AI จะช่วยปรับปรุงหรือสร้างประสบการณ์ใหม่ๆ ให้กับผู้ใช้ได้อย่างไร

ประสบการณ์ที่น่าตื่นเต้นอย่างหนึ่งที่บางคนกำลังพิจารณาคือ Generative UI ซึ่งเป็นวิธีที่แบ็กเอนด์แบบ Agentic สามารถสร้าง UI ใหม่ทั้งหมดสำหรับผู้ใช้ได้ในรันไทม์ ซึ่งเราคิดว่าน่าสนใจมาก

แต่น่าเสียดายที่ตอนนี้ การตอบกลับของแบ็กเอนด์แบบ Agentic จำนวนมากติดอยู่ในกำแพงข้อความแบบนี้

ตัวอย่างเช่น ฉันขอให้ Agent สร้างฟีเจอร์ใหม่สำหรับการจองการเดินทาง

พรอมต์มีดังนี้

และอย่างที่คุณเห็น มันให้คำตอบที่ค่อนข้างดีเลยทีเดียว แต่คำตอบนั้นติดอยู่ในข้อความยาวเหยียดนี้ ซึ่งฉันไม่สามารถโต้ตอบด้วยได้ง่ายๆ และดูไม่เหมือนส่วนอื่นๆ ของแอปพลิเคชันของฉันเลย

Generative UI ช่วยให้คุณสร้างประสบการณ์แบบนี้แทนได้ โดยคุณสามารถสร้าง UI ใหม่ได้ทันทีเพื่อตอบสนองต่ออินพุตแบบไดนามิก ซึ่งจะเปิดโอกาสให้ปรับแต่งได้มากขึ้นหรือสร้างประสบการณ์ใหม่ๆ ได้มากขึ้น

ตัวอย่างเช่น UI ที่สร้างขึ้นโดยใช้คอมโพเนนต์เนทีฟมาตรฐาน

ดังนั้น คุณสามารถสร้างประสบการณ์ประเภทนี้ได้ด้วยตัวเองในปัจจุบัน แต่คุณจะต้องกำหนดรูปแบบของคุณเองสำหรับการแลกเปลี่ยนกับแบ็กเอนด์ สตรีมเหตุการณ์ของคุณเอง และฟังก์ชันต่างๆ เป็นต้น

A2UI ซึ่งย่อมาจาก Agent-to-UI เป็นโปรโตคอลแบบเปิดซึ่งเป็นรูปแบบ JSON สำหรับกำหนดสิ่งต่างๆ เหล่านี้ทั้งหมด

สิ่งหนึ่งที่ฉันชอบมากเกี่ยวกับ A2UI คือเป็นรูปแบบที่ประกาศได้

Agent จะแสดงผลการแสดง UI เป็น JSON เพื่อแสดงผลเท่านั้น

โดยจะไม่แสดงผลโค้ดใดๆ ที่ไคลเอ็นต์ต้องเรียกใช้ ซึ่งอาจทำให้คุณเสี่ยงต่อช่องโหว่ด้านความปลอดภัยบางอย่าง

เป็นเพียงการประกาศเท่านั้น

แล้วเราต้องทราบแนวคิดอื่นๆ อะไรอีกบ้างเกี่ยวกับ A2UI

มีแนวคิดหลักเพียง 2 ข้อ ได้แก่ แคตตาล็อกและแพลตฟอร์ม

แคตตาล็อกมีคอมโพเนนต์ต่างๆ เช่น ข้อความ ปุ่ม แถว และคอลัมน์ที่ Agent สามารถใช้เพื่อสร้าง UI ได้

นอกจากนี้ แคตตาล็อกยังมีฟังก์ชันที่ Agent สามารถใช้เพื่อจัดรูปแบบข้อความ ตรวจสอบข้อมูลที่ผู้ใช้ป้อน หรือเปิด URL ได้ด้วย

แคตตาล็อกคือสัญญาที่กำหนดคอมโพเนนต์และฟังก์ชันที่แอปของคุณรองรับ และ Agent จะสร้างได้เฉพาะคอมโพเนนต์และฟังก์ชันเหล่านั้นเท่านั้น

ซึ่งหมายความว่า Agent จะไม่เรียกใช้โค้ดที่กำหนดเองในแอปของคุณตามที่ Nick กล่าวถึง

โดยจะสร้าง UI จากองค์ประกอบพื้นฐานที่คุณออกแบบและเชื่อถือ

แนวคิดที่สำคัญอีกอย่างหนึ่งคือแพลตฟอร์ม

แพลตฟอร์มคือ UI ส่วนหนึ่งที่ Agent ควบคุม เช่น ตัวอย่างผู้ช่วยวางแผนการเดินทางในสไลด์นี้

โดย Agent จะอธิบาย UI สำหรับแพลตฟอร์มใน JSON โดยใช้ข้อความโปรโตคอล A2UI เช่น createSurface, updateComponents และใช้คอมโพเนนต์และฟังก์ชันที่กำหนดไว้ในแคตตาล็อก

เมื่อพูดถึงแคตตาล็อก แคตตาล็อกเป็นแนวคิดพื้นฐานที่สำคัญมากใน A2UI เนื่องจากเป็นตัวควบคุมคอมโพเนนต์ที่ Agent สามารถใช้เพื่อสร้างอินเทอร์เฟซได้

ข้อกำหนดเฉพาะของ A2UI กำหนดสิ่งที่เรียกว่าแคตตาล็อกพื้นฐาน ซึ่งเป็นชุดคอมโพเนนต์ทั่วไปที่คุณใช้สร้าง UI ส่วนใหญ่ได้

โปรแกรมแสดงผล Jetpack Compose A2UI มีการติดตั้งใช้งานแคตตาล็อกพื้นฐานโดยใช้คอมโพเนนต์ Material 3

คอมโพเนนต์แคตตาล็อกส่วนใหญ่พร้อมใช้งานทันที

คอมโพเนนต์สื่อมี 3 รายการ ได้แก่ รูปภาพ วิดีโอ และโปรแกรมเล่นเสียง ซึ่งคุณต้องเสียบปลั๊กคลังที่คุณเลือก

เช่น คุณอาจเลือก Coil สำหรับการโหลดรูปภาพ และ Media3 สำหรับโปรแกรมเล่นวิดีโอและเสียง

แต่ความสามารถที่แท้จริงของ A2UI และไลบรารีโปรแกรมแสดงผลใหม่ของเราคือคุณสามารถสร้างคอมโพเนนต์และแคตตาล็อกที่กำหนดเองทั้งหมด และควบคุมสิ่งที่ Agent สามารถใช้เพื่อสร้าง UI ได้อย่างเต็มที่

เราจะกลับมาพูดถึงแคตตาล็อกในภายหลัง

มาดูกันว่าหน้าตาของฟีเจอร์นี้เป็นอย่างไร

โปรดเปลี่ยนไปใช้เครื่องสาธิต

นี่คือแอปสาธิตที่เราจะใช้ และเราจะสร้างโปรแกรมแสดงผล A2UI เพื่อแสดงให้คุณเห็นว่าการดำเนินการนี้ง่ายเพียงใด

ซึ่งก็คือชุดพรอมต์ที่คุณส่งไปยัง Agent ได้ ดังที่เห็นในชิปเล็กๆ เหล่านี้ตรงกลางหน้าจอ

ดังนั้น หากเราคลิกที่พรอมต์ใดพรอมต์หนึ่ง ระบบจะส่งพรอมต์นั้นไปยังแบ็กเอนด์ของตัวแทนจริงที่พร้อมให้บริการ ดังนั้นก็หวังว่าการสาธิตจะราบรื่น และนอกจากพรอมต์แล้ว เรายังเพิ่มคำสั่งของระบบด้วย

ดังนั้น เราจึงบอกแบ็กเอนด์เกี่ยวกับโปรโตคอล A2UI เกี่ยวกับแคตตาล็อกของคอมโพเนนต์ ซึ่งในกรณีนี้คือแคตตาล็อกพื้นฐานที่เราใช้อยู่ที่นี่ ซึ่งสามารถใช้เพื่อสร้าง UI และเราจะยกตัวอย่างวิธีสร้าง UI นี้

การใช้งานเซสชันแชทในแอปเดโมของเราทราบวิธีดึงข้อความ A2UI JSON ดิบจากการตอบกลับของ Agent อยู่แล้ว

ดังนั้น ในกรณีนี้ ตัวแทนจึงตอบกลับด้วยข้อความบางส่วน ตามด้วยข้อความโปรโตคอล A2UI: createSurface, updateComponents

แต่ตอนนี้แอปของเราแสดงเฉพาะ JSON ดิบนี้และยังไม่ได้แสดงผลเป็น UI

ก่อนที่เราจะเจาะลึกและใช้โค้ด หากเราสามารถเปลี่ยนกลับไปที่สไลด์ได้เพียง 1 วินาที ลองย้อนกลับไปดูและบอกคุณเกี่ยวกับการออกแบบระบบที่เราจะใช้เพื่อนำไปใช้

เอาล่ะ เริ่มเลย

ใช่ แผนการมีดังนี้

ดังนั้น AI Agent จะสตรีมคำตอบไปยังแอปของเราซึ่งได้รับจากคลาส ChatSession

ChatSession จะดึงข้อความ JSON ของ A2UI ดิบจากการตอบกลับของ Agent ขณะที่สตรีมเข้ามาและส่งไปยัง Message Processor ของ A2UI

Message Processor ได้รับการกำหนดค่าด้วยโปรแกรมแยกวิเคราะห์ที่แปลงข้อความ JSON ดิบเหล่านั้นเป็นการนำเสนอเชิงความหมาย

จากนั้นโปรเซสเซอร์จะตรวจสอบข้อความเทียบกับคำจำกัดความของแคตตาล็อกและแมปข้อความกับชุดโมเดลแพลตฟอร์ม

โมเดลพื้นผิวคือสิ่งที่กำหนดลักษณะของ UI และส่วนต่างๆ ของ UI ที่ Agent ควบคุม

จากนั้นระบบจะแสดงผลโมเดล Surface เหล่านั้นเป็น Compose UI แบบเนทีฟโดยใช้ Composable ของ Surface A2UI ที่ไลบรารีของเรามีให้

การสื่อสารระหว่าง Agent กับ UI เป็นแบบ 2 ทิศทาง ดังนั้นเมื่อผู้ใช้โต้ตอบกับ UI การดำเนินการและข้อผิดพลาดของผู้ใช้จะส่งกลับไปยัง Agent

สรุปแล้วมีองค์ประกอบหลัก 3 อย่าง ได้แก่ แคตตาล็อก, Message Processor และแพลตฟอร์ม

มาเขียนโค้ดกันเลย

ได้ มาสร้างกันเลยถ้าเราเปลี่ยนเครื่องได้

เอาล่ะ ขั้นตอนแรกคือการเพิ่มทรัพยากร Dependency

คุณจะเห็นว่าเราได้รวมทรัพยากร Dependency ของ Material 3 A2UI ไว้แล้ว และเราได้ซิงค์โปรเจ็กต์แล้ว เพื่อที่เราจะได้ไม่ต้องนั่งดู Gradle

นี่คือทรัพยากร Dependency ระดับบนสุดที่กำหนดการใช้งานแคตตาล็อกพื้นฐานโดยใช้คอมโพเนนต์ Material 3 เหล่านั้น แต่ยังมีทรัพยากร Dependency อื่นๆ ที่ละเอียดยิ่งขึ้นอยู่ด้านล่าง

ดังนั้น หากคุณไม่ต้องการใช้แคตตาล็อกพื้นฐาน (ซึ่งเราจะอธิบายเหตุผลในภายหลัง) คุณสามารถใช้แคตตาล็อกที่ละเอียดยิ่งขึ้นได้

แต่การดำเนินการนี้จะดึงข้อมูลที่เหลือเข้ามาด้วย

ตกลง

เราได้บอกไปแล้วว่ามี 3 สิ่ง

ขั้นตอนแรกคือการกำหนดแคตตาล็อก

ดังนั้นในแอปพลิเคชันนี้ เราจะสร้างฟังก์ชัน Factory เพื่อช่วยสร้างอินสแตนซ์ของการติดตั้งใช้งาน Material 3 ของแคตตาล็อกพื้นฐาน

เราจึงใช้ฟังก์ชันไลบรารีนี้ที่นี่ ซึ่งก็คือแคตตาล็อกพื้นฐาน Material A2UI ซึ่งมีการกำหนดเวอร์ชันด้วย

และอย่างที่เราได้กล่าวไปแล้วว่า SDK นี้มีคอมโพเนนต์ทั่วไปทั้งหมดที่คุณต้องการ ยกเว้นว่าเราไม่ต้องการบังคับให้คุณใช้ไลบรารีการโหลดรูปภาพหรือการแสดงผลสื่อบางอย่าง ดังนั้นคุณจึงต้องจัดเตรียมไลบรารีเหล่านั้นด้วยตนเอง

ตัวอย่างเช่น Anton ได้สร้าง Wrapper นี้ขึ้นมาแล้ว ซึ่งเป็น Wrapper รอบคอมโพสิเบิล AsyncImage ของ Coil ซึ่งเราจะใช้เพื่อโหลดรูปภาพ รวมถึงตรรกะเพิ่มเติมเล็กน้อยสำหรับการสาธิตเพื่อค้นหารูปภาพจาก Wikipedia

และเราสามารถเสียบสิ่งนี้เข้ากับคอมโพเนนต์แคตตาล็อกได้อย่างง่ายดาย

และในทำนองเดียวกัน เรามีการใช้งานที่คล้ายกันสำหรับการแสดงผล วิดีโอ และเสียง โดยเราจะใช้ไลบรารี Media3 เพื่อแสดงผลด้วย ExoPlayer

เราสามารถเสียบคอมโพเนนต์ของเราเองเข้าไปได้ง่ายๆ แบบนี้

สิ่งถัดไปที่แคตตาล็อกต้องการคือชุดฟังก์ชันมาตรฐาน

นี่คือฟังก์ชันที่ไคลเอ็นต์สามารถให้บริการได้

เราจะจัดส่งการติดตั้งใช้งานนี้พร้อมกับแคตตาล็อกพื้นฐานอีกครั้ง แต่เราต้องระบุบริบทให้ด้วย ซึ่งคุณจะใช้เพื่อดำเนินการบางอย่าง เช่น การเปิด URI หากผู้ใช้แตะรายการ

เพียงเท่านี้ ขั้นตอนแรกก็เสร็จสมบูรณ์แล้ว

เราได้สร้างแคตตาล็อกแล้ว

ขั้นตอนถัดไปที่เราต้องทำคือตั้งค่า Message Processor

นี่คือสิ่งที่แยกวิเคราะห์คำตอบและอื่นๆ

เราจะเปลี่ยนไปใช้โมเดลมุมมองของแอปพลิเคชัน โดยอันดับแรกเราจะสร้างอินสแตนซ์แคตตาล็อกที่ตั้งค่าไว้ก่อนหน้านี้ เนื่องจากเราจำเป็นต้องใช้แคตตาล็อกดังกล่าว

จากนั้นเราจะสร้างออบเจ็กต์ตัวแยกวิเคราะห์ข้อความและ Message Processor ซึ่งต้องเข้าถึงแคตตาล็อกเพื่อตรวจสอบคำตอบเทียบกับคอมโพเนนต์ที่เราต้องการใช้

อีกคอมโพเนนต์หนึ่งที่เราต้องสร้างคือโปรแกรมแยกวิเคราะห์ ซึ่งเป็นออบเจ็กต์ที่รับผิดชอบในการแยกวิเคราะห์ข้อความ JSON เมื่อส่งกลับมา

นี่คือจุดที่เราสร้างออบเจ็กต์ ChatSession

ดังที่ได้กล่าวไปก่อนหน้านี้ ChatSession จะดึงข้อความ A2UI ดิบจากคำตอบของ Agent อยู่แล้ว

และเมื่อข้อความ A2UI ใหม่ทุกข้อความพร้อมแล้ว ระบบจะเรียกใช้ Callback onA2uiMessage นี้

ดังนั้น สิ่งที่เราต้องทำคือส่งข้อความแต่ละข้อความเมื่อมาถึงโปรเซสเซอร์

เราเรียกใช้ฟังก์ชัน processInput โดยระบุโปรแกรมแยกวิเคราะห์และข้อความ

ดังนั้น ฟังก์ชัน processInput จะแยกวิเคราะห์ข้อความแต่ละรายการ แล้วจัดคิวงานให้โปรเซสเซอร์ตรวจสอบความถูกต้องกับแคตตาล็อกและอัปเดตโมเดล Surface

ดังนั้น โปรเซสเซอร์จะแสดงชุดโมเดลพื้นผิวที่ใช้งานอยู่ในปัจจุบันเป็น activeSurfaces StateFlow

ChatSession มีตรรกะบางอย่างในการเพิ่มโมเดล Surface ลงในสถานะ UI ของการตอบกลับของ Agent ที่จะแสดงผล

ดังนั้น เราจึงส่ง StateFlow activeSurfaces นี้เป็นพารามิเตอร์ไปยัง ChatSession

นอกจากนี้ อย่างที่ฉันได้กล่าวไปแล้วว่าฟังก์ชัน processInput จะจัดคิวงานสำหรับโปรเซสเซอร์

แต่หากต้องการเริ่มประมวลผลจริงๆ เราต้องเปิดใช้ Coroutine ในเทรดเบื้องหลัง

ดังนั้นเราจะใช้ขอบเขตโมเดลข้อมูลพร็อพเพอร์ตี้สำหรับเรื่องนั้นและตั้งค่าผู้มอบหมายงานเริ่มต้น

และในโครูทีนนั้น เราเพียงแค่ต้องเรียกใช้ processor.collectMessages

ดังนั้นในขณะที่โครูทีนนี้ทำงานอยู่ โปรเซสเซอร์จะจัดการข้อความจากคิวข้อความ

ดังนั้น สิ่งที่เราต้องทำอีกอย่างคือเมื่อผู้ใช้ล้างประวัติการแชท เราก็ต้องล้าง Surface ปัจจุบันด้วย

เราจึงเรียก clearSurfaces

ตกลง

เราได้ทำ 2 ขั้นตอนแรกไปแล้ว

เราสร้างแคตตาล็อกและสร้างโปรเซสเซอร์เพื่อแยกวิเคราะห์ข้อความ

ขั้นตอนถัดไปที่เราต้องทำคือแสดงผลคำตอบเหล่านั้นใน UI

เราจึงรวบรวมพื้นผิวเหล่านั้นเมื่อได้รับการแยกวิเคราะห์โดยโปรแกรมแยกวิเคราะห์

และตอนนี้ใน UI เราจะส่งต่อข้อมูลเหล่านั้นในออบเจ็กต์การตอบกลับของ Agent นี้ และเราจะทำซ้ำข้อมูลเหล่านั้น

จากนั้นเราจะใช้ Composable ของแพลตฟอร์ม A2UI นี้ แล้วส่งโมเดลแต่ละโมเดลไปให้ขณะที่เราทำซ้ำเพื่อแสดงผลเนื้อหาในตำแหน่งที่ต้องการ

ข้อสังเกตหนึ่งคือ Agent อาจเลือกใช้รายการหากต้องการแสดงเนื้อหาจำนวนมาก

ดังนั้นเราจึงต้องตั้งค่าความสูงที่จำกัดเป็นความสูงสูงสุดในคอมโพเนนต์นี้เพื่อให้แน่ใจว่าคอมโพเนนต์จะแสดงผลอย่างถูกต้อง

และเราได้ใช้โปรแกรมแสดงผล A2UI พื้นฐานแล้ว

ตอนนี้ถ้าเรากลับไปที่แอป เปิดแอปอีกครั้ง แล้วกดพรอมต์นั้นอีกครั้ง หวังว่า Agent จะใช้พรอมต์นั้นเพื่อแสดงผล UI จริงได้

เราจึงเขียนโค้ดแบบสดๆ

นี่ไม่ใช่การตบตา

แต่ใช่ มันใช้รูปภาพจริง

โดยใช้แท็บ กล่องโต้ตอบ เครื่องมือเลือกวันที่ แถบเลื่อน และคอมโพเนนต์ Material มาตรฐานทั้งหมดที่คุณใช้สร้างแอป แทนที่จะแสดงเพียงคำตอบแบบข้อความ

เนื่องจากนี่เป็นแอปจริงที่ใช้คอมโพเนนต์ Material จริง คุณจึงทราบว่าแอปนี้ทำสิ่งต่างๆ ที่คอมโพเนนต์จริงทำ

ซึ่งมีประสิทธิภาพเหมือนกับแอปที่มาพร้อมเครื่อง

ซึ่งจะทำสิ่งต่างๆ เช่น ตอบสนองต่อโหมดมืดที่นี่

ซึ่งก็คือคอมโพเนนต์ Material

ดังนั้น หากคุณมี Composable การกำหนดธีม Material ด้านนอกซึ่งคุณได้ปรับแต่งสี รูปร่าง แบบตัวพิมพ์ และอื่นๆ คอมโพเนนต์เหล่านี้จะเลือกใช้ธีมดังกล่าวเพื่อให้ดูเหมือนกับส่วนที่เหลือของแอปพลิเคชัน

ดังที่ Nick กล่าวไว้ เนื่องจากคอมโพเนนต์เหล่านี้เป็นคอมโพเนนต์ Compose แบบเนทีฟ จึงมีความหมายเชิงอรรถศาสตร์แบบเนทีฟ

ซึ่งหมายความว่าระบบรองรับฟีเจอร์การช่วยเหลือพิเศษในตัวทั้งหมดของ Compose

ดังนั้นฟีเจอร์ต่างๆ เช่น TalkBack, การปรับขนาดแบบอักษร, การไปยังส่วนต่างๆ ด้วยแป้นพิมพ์จึงใช้งานได้ทันที

เนื่องจากคุณเรียกใช้ Agent เพื่อสร้าง UI ใหม่ที่รันไทม์ จึงอาจเกิดเวลาในการตอบสนอง

คุณอาจต้องรอให้ตัวแทนตอบกลับ

ไลบรารีจะดำเนินการทุกอย่างที่ทำได้เพื่อลดเวลาในการตอบสนองนี้

ดังนั้นหากเราใช้การดำเนินการประเภทนี้ เราจะแทรกการรอเพื่อแสดงให้คุณเห็นช้าลงเล็กน้อยว่าเกิดอะไรขึ้นและเราลดการดำเนินการดังกล่าวได้อย่างไร

ใช่ เนื่องจาก Agent อาจใช้เวลาสักพักในการสตรีมคำตอบที่สมบูรณ์ทั้งหมด เราจึงใช้สิ่งที่เรียกว่าการแสดงผลแบบต่อเนื่อง

ดังนั้น ทันทีที่คอมโพเนนต์รากมาถึง เราจะเริ่มแสดง UI สำหรับแพลตฟอร์ม

คอมโพเนนต์คอนเทนเนอร์ทั้งหมดจะแสดงตัวยึดตำแหน่งการโหลดสำหรับคอมโพเนนต์ย่อยหากคอมโพเนนต์ย่อยยังไม่มาถึง

เมื่อคอมโพเนนต์ย่อยมาถึง ระบบจะแสดงภาพเคลื่อนไหวโดยใช้รูปแบบการเคลื่อนไหวของ Material 3

ตกลง

และหากเราเปลี่ยนไปใช้พรอมต์ถัดไปเพื่อแสดงฟีเจอร์อื่นของไลบรารี

นี่คืออีกพรอมต์หนึ่งที่เรากำลังจองโต๊ะสำหรับมื้อค่ำ

และตรงนี้ Agent เลือกใช้คอมโพเนนต์แถบเลื่อนนี้ ใช่แล้ว มันใช้คอมโพเนนต์นี้

คุณจะเห็นว่าสามารถลากไปมาและโต้ตอบกับ UI ที่ Agent สร้างขึ้นได้ทันที

และสังเกตว่าไม่เพียงแต่เปลี่ยนตัวเลขในคอมโพเนนต์เท่านั้น แต่ยังมีสตริงรูปแบบนี้อยู่ด้านล่างซึ่งจะนับจำนวนด้วย

เหมือนกับบอกฉันว่าไม่ได้ส่งข้อมูลไป-กลับกับ Agent เพื่ออัปเดตข้อมูลนั้นใช่ไหม

ซึ่งเป็นการเชื่อมโยงแบบ 2 ทาง

ดังนั้นคอมโพเนนต์แถบเลื่อนจึงเชื่อมโยงกับโมเดลข้อมูลในหน่วยความจำของแพลตฟอร์มนี้

คอมโพเนนต์ทั้งหมดที่เชื่อมโยงกับเส้นทางเดียวกันในโมเดลข้อมูลจะอัปเดตโดยอัตโนมัติเมื่อค่ามีการเปลี่ยนแปลง

แถบเลื่อนจึงอ่านค่าเพื่อแสดง และเมื่อฉันลากแถบเลื่อน แถบเลื่อนจะเขียนค่ากลับไปยังโมเดลเพื่ออัปเดต

ดังนั้นทั้งหมดนี้จึงเกิดขึ้นในเครื่องโดยไม่ต้องส่งข้อมูลไปกลับกับ Agent

แต่เรายังขอให้ตัวแทนอัปเดตข้อมูลได้ด้วย

งั้นเรามาสร้างภาพคน 6 คนกัน

สังเกตแถบเลื่อนเมื่อ Agent ตอบกลับ

ตอนนี้เพิ่มเป็น 6 แล้ว

มาดูกันว่าเราได้รับอะไรจากตัวแทนบ้าง

แทนที่จะส่งคำอธิบายใหม่ทั้งหมดของ UI ตัวแทนจะส่งข้อความสั้นๆ updateDataModel ที่อัปเดตเส้นทางสำหรับแถบเลื่อน

เนื่องจากแถบเลื่อนเชื่อมโยงกับเส้นทางนั้น แถบเลื่อนจึงอัปเดตในตำแหน่งเดิม

ดังนั้นโมเดลข้อมูลของแต่ละแพลตฟอร์มจึงสร้างขึ้นจากสถานะสแนปชอตของ Compose และพร็อพเพอร์ตี้คอมโพเนนต์แต่ละรายการที่เชื่อมโยงกับเส้นทางจะเป็นสถานะที่ได้มา

ดังนั้นเมื่อใดก็ตามที่ผู้ใช้หรือ Agent อัปเดตค่าในโมเดลข้อมูล คอมโพเนนต์ทั้งหมดที่เชื่อมโยงกับค่าเดียวกันจะได้รับการจัดองค์ประกอบใหม่โดยอัตโนมัติ

ตกลง

สมมติว่าเราต้องการดำเนินการและต้องการกดปุ่มจอง จะเกิดอะไรขึ้นต่อจากนี้ Anton

ไม่มีอะไรเกิดขึ้นในขณะนี้

ปุ่มจะส่งการดำเนินการ แต่เรายังไม่ได้ส่งไปยังตัวแทน

มาแก้ปัญหากัน

โอเค เช่นเดียวกับที่เราต้องเชื่อมต่อกับโปรเซสเซอร์เพื่อประมวลผลอินพุต เรายังต้องเชื่อมต่อกับเอาต์พุตและการดำเนินการใดๆ ที่ผู้ใช้ทำใน UI ที่ Agent สร้างขึ้นด้วย

ดังนั้นเราจึงใช้โฟลว์ outboundEvents ที่โปรเซสเซอร์แสดง และรวบรวมข้อมูลนี้

นี่จึงเป็นโอกาสที่คุณจะใส่ตรรกะที่ต้องการได้ตามใจชอบ เช่น เมื่อผู้ใช้แตะการดำเนินการหรือทำอะไรบางอย่างกับ UI

ดังนั้นตรงนี้เราจะส่งการดำเนินการกลับไปยัง Agent เพื่อตัดสินใจว่าจะทำอะไรต่อ แต่คุณก็สามารถตัดสินใจได้ว่าจะเรียกใช้แบ็กเอนด์ของคุณเอง หรือไปยังหน้าจออื่นในแอปพลิเคชัน ทั้งนี้ขึ้นอยู่กับคุณ

Anton ได้เสียบปลั๊กไว้แล้ว และตอนนี้เมื่อเรากดดำเนินการยืนยันการจอง ระบบจะส่งการดำเนินการที่คุณทำกลับไปยังตัวแทน

และนี่คือจุดที่คุณสามารถตัดสินใจเรียกใช้ฟังก์ชันบางอย่างในแบ็กเอนด์ได้

มาดูสิ่งที่เราส่งไปยัง Agent กัน

นี่คือข้อความการดำเนินการ A2UI

โดยมีบริบท และบริบทประกอบด้วยชุดพร็อพเพอร์ตี้ที่ Agent ขอให้ส่งเมื่อมีการดำเนินการนี้

ดังนั้นเมื่อฉันคลิกปุ่ม พร็อพเพอร์ตี้เฉพาะนี้จะได้รับการแก้ไข ณ ขณะนั้นตามค่าปัจจุบันในโมเดลข้อมูล และนั่นคือสิ่งที่เราส่งไปยัง Agent

โอเค และจนถึงตอนนี้ Agent ก็ให้ความร่วมมือกับเราเป็นอย่างดี แต่เรากำลังพูดถึง AI และ AI อาจทำงานผิดพลาดได้

มาดูกันว่าจะเกิดอะไรขึ้นหาก Agent แสดงผลลัพธ์ที่ไม่ถูกต้องหรือทำผิดพลาดใน UI ที่อธิบายกลับมาให้เราทราบ

ดังนั้นพรอมต์สุดท้ายที่เรามีนี้ เรากำลังขอให้ Agent ทำผิดพลาดเพื่อให้เราสาธิตเรื่องนี้ให้คุณดูได้

มาดูกันว่าจะเกิดอะไรขึ้น

ใช่

คุณจะเห็นว่าคอมโพเนนต์รายการหนึ่งมีเครื่องหมายแสดงข้อผิดพลาด

และตอนนี้ปัญหาได้รับการแก้ไขแล้ว

นี่คือลูปการแก้ไขตนเองของ Agent

ก่อนที่คอมโพเนนต์แต่ละรายการจะไปถึง UI เราจะตรวจสอบข้อความนั้นกับสคีมาแคตตาล็อก

หากคอมโพเนนต์ไม่ตรงกับสคีมา ระบบจะทำเครื่องหมายว่าเป็นข้อผิดพลาด

ตัวแสดงผลการติดตั้งใช้งานแคตตาล็อกพื้นฐานจะแสดงข้อผิดพลาดที่แยกเฉพาะสำหรับคอมโพเนนต์นั้นๆ ในขณะที่ UI ส่วนที่เหลือยังคงแสดงอยู่

เบื้องหลังคือโปรแกรมแสดงผลจะส่งข้อความแสดงข้อผิดพลาดไปยัง Agent เพื่อแจ้งให้ Agent ทราบว่าเกิดข้อผิดพลาดอะไรขึ้น

ดังนั้นในกรณีนี้ เราจึงส่งข้อความที่ระบุว่าไม่พบประเภทคอมโพเนนต์ที่ไม่รู้จักซึ่งไม่มีอยู่ในแคตตาล็อก

จากนั้น Agent จะมีโอกาสตอบกลับโดยส่งการตอบกลับติดตามผลที่อัปเดต UI ที่มีอยู่ และ UI จะได้รับการแก้ไขในตำแหน่งเดิม

ใช่

ในการใช้งานแคตตาล็อกพื้นฐานของ Material ในปัจจุบัน เราจะแสดงข้อผิดพลาดทันที แต่ในคอมโพเนนต์ที่กำหนดเอง คุณอาจเลือกที่จะแสดงสัญญาณบอกสถานะการโหลดสำหรับคอมโพเนนต์ต่อไปหากมีข้อผิดพลาดขณะรอให้ Agent แก้ไข

ด้วยวิธีนี้ ข้อผิดพลาดจึงอาจถูกซ่อนจากผู้ใช้โดยสมบูรณ์

และเมื่อพูดถึงแคตตาล็อกและคอมโพเนนต์ที่กำหนดเอง จนถึงตอนนี้เราใช้แคตตาล็อกพื้นฐานตามที่จัดส่งมาให้แบบสำเร็จรูป แต่คุณสามารถปรับแต่งแคตตาล็อกตามความต้องการของคุณเองได้

คุณจึงเห็นได้ว่าเมื่อเราใช้ฟังก์ชัน Factory เพื่อสร้างแคตตาล็อก ค่าเหล่านั้นจะเป็นค่าเริ่มต้นสำหรับคอมโพเนนต์ต่างๆ ทั้งหมด

คุณจึงเสียบปลั๊กคอมโพเนนต์ของคุณเองได้ง่ายๆ หากต้องการ

ตัวอย่างเช่น หากเราต้องการเสียบปลั๊กของเราเอง หากเรามีระบบการออกแบบของเราเองในแอปและปุ่มของตัวเอง เราก็สามารถเสียบปลั๊กนั้นได้อย่างง่ายดาย

ดังนั้นเราจึงลบล้างพารามิเตอร์นี้เมื่อสร้างอินสแตนซ์ของแคตตาล็อก และเราจะสร้างคำจำกัดความของคอมโพเนนต์นี้

ดังนั้นหากเราสร้างคลาสใหม่เพื่อใช้ฟีเจอร์ดังกล่าว คุณจะเห็นว่ามีอินเทอร์เฟซที่นี่ ซึ่งเป็นแคตตาล็อกพื้นฐานของ A2UI ของปุ่มประเภท

ดังนั้นหากเราใช้สิ่งนี้ เราจะเสียบคอมโพเนนต์ของเราเองได้

ใช่

เนื่องจากเรากำลังลบล้างคอมโพเนนต์ในแคตตาล็อกพื้นฐาน เราจึงต้องใช้อินเทอร์เฟซปุ่มแคตตาล็อกพื้นฐาน A2UI นี้

ดังนั้นอินเทอร์เฟซนี้จึงมีข้อมูลบางอย่างเกี่ยวกับคอมโพเนนต์อยู่แล้ว เช่น ชื่อ คำอธิบาย และสคีมาพร็อพเพอร์ตี้

ดังนั้นสิ่งที่เราต้องทำเพื่อใช้เวอร์ชันของเราเองก็คือการใช้ฟังก์ชันที่ประกอบกันได้นี้

โดยใช้พารามิเตอร์ 2-3 รายการ

ดังนั้นพารามิเตอร์เหล่านี้จึงเป็นค่าที่ได้รับจาก Agent หลังจากได้รับการตรวจสอบแล้ว

ซึ่งก็คือสิ่งต่างๆ เช่น รหัสย่อย ซึ่งอ้างอิงถึงคอมโพเนนต์ที่จะเป็นเนื้อหาของปุ่ม

นอกจากนี้ยังมีตัวแปรที่อธิบายประเภทของปุ่ม คำจำกัดความของการดำเนินการ และพารามิเตอร์อื่นๆ บางรายการ

ในการติดตั้งใช้งานปุ่มในเวอร์ชันที่ใช้งานจริง เราจะต้องใช้พารามิเตอร์ทั้งหมดเหล่านี้ แต่เพื่อวัตถุประสงค์ในการสาธิต เราต้องการเพียงองค์ประกอบย่อยและการดำเนินการเท่านั้น

เรามาใช้ฟังก์ชันที่ประกอบกันได้นี้กัน

โอเค ในฟังก์ชันที่ประกอบกันได้นี้ เราจะส่งปุ่มชอบที่กำหนดเองของเราเองที่นี่

และอย่างที่คุณเห็น เราสามารถใช้พารามิเตอร์ที่ระบุและตรวจสอบโดย A2UI ได้

ตัวอย่างเช่น ในฟังก์ชัน onClick เราสามารถส่งการดำเนินการนั้นได้

เราสามารถใช้ DispatchAction ประเภทไลบรารีนี้และส่งการดำเนินการที่ A2UI กำหนดไว้ให้ได้

ดังนั้นเราจึงใช้ปุ่มของเราเอง แต่เรายังคงต้องการแสดงผลเนื้อหา Label หรืออะไรก็ตามที่ตัวแทนตัดสินใจใช้

เราจะใช้ฟังก์ชัน observeA2uiComponentState และส่ง childId ไปให้เพื่อรับแฮนเดิลไปยังเนื้อหาย่อยที่ควรแสดงผล

จากนั้นเราจะใช้ฟังก์ชันที่ประกอบกันได้ A2uiComponent นี้ แล้วส่งสถานะคอมโพเนนต์ย่อยนั้นไปเพื่อแสดงผล

และที่นี่คุณจะเห็นว่าเราแสดงผลเฉพาะเนื้อหาของบุตรหลานหากโหลดสำเร็จ แต่คุณก็สามารถใช้ตรรกะของคุณเองได้ที่นี่หากกำลังโหลดหรือมีสถานะข้อผิดพลาด คุณสามารถตัดสินใจได้ว่าต้องการแสดงอะไร

ดังนั้น หากเรากลับไปที่พรอมต์ตัวอย่างรายการหนึ่งในแอปเดโม และตอนนี้เราแทนที่ปุ่มโดยใช้ปุ่ม Material มาตรฐาน

ซึ่งเป็นความแตกต่างที่เล็กน้อยมาก หวังว่าคุณจะเห็นนะ

คุณจะเห็นว่าเราใช้ปุ่มที่กำหนดเองอย่างมากที่นี่ด้วย

ดีเลย นั่นคือวิธีที่คุณสามารถแทนที่ประเภทไลบรารีบางประเภท แต่ถ้าคุณต้องการขยายไลบรารีด้วยประเภทที่กำหนดเองล่ะ

เราทำได้ง่ายๆ โดยการเพิ่มลงในแคตตาล็อก

Anton จึงจะสร้างคลาสใหม่ที่นี่เพื่อใช้คอมโพเนนต์การให้ดาว

ดังนั้น เราจะเพิ่มบางอย่างลงในแอปพลิเคชันเพื่อให้เราให้คะแนนร้านอาหารได้ขณะอยู่ในการเดินทางสมมตินี้

ดังนั้น เนื่องจากเราไม่ได้แทนที่คอมโพเนนต์ที่มีอยู่ เราจึงใช้อินเทอร์เฟซทั่วไปมากขึ้น ซึ่งก็คืออินเทอร์เฟซคอมโพเนนต์ A2UI นี้ ซึ่งคุณจะเห็นว่ามีพารามิเตอร์บางอย่างที่เราต้องลบล้าง

2 รายการแรกคือชื่อและคำอธิบาย

ดังนั้น ส่วนนี้จะอธิบายว่าคอมโพเนนต์ของเราคืออะไรและทำอะไรได้บ้าง

ซึ่งข้อมูลเหล่านี้สำคัญมาก เพราะเมื่อเราจัดทำแคตตาล็อกเป็นอนุกรมและส่งไปยังแบ็กเอนด์เพื่อบอกว่าสามารถใช้ข้อมูลใดในการสร้าง UI ได้บ้าง Agent จะใช้ข้อมูลนี้เพื่อตัดสินใจว่าจะใช้คอมโพเนนต์นี้หรือไม่เมื่อตอบกลับ

ดังนั้น คุณต้องอธิบายให้ละเอียดและบอก AI ว่าคุณรู้แน่ชัดว่าโค้ดนี้ทำอะไร

พร็อพเพอร์ตี้ถัดไปที่เราต้องลบล้างคือพร็อพเพอร์ตี้ properties ซึ่งโดยพื้นฐานแล้วจะบอกว่าข้อมูลที่คอมโพเนนต์นี้จัดการคืออะไร

เราจึงจะสร้างแถบการให้ดาวเพื่อให้คุณให้คะแนนร้านอาหารได้ และจะมีพร็อพเพอร์ตี้ 2 รายการที่เราต้องการ

ซึ่งจะเป็นค่า เช่น จำนวนดาวที่ผู้ใช้เลือก ซึ่งจะเป็นพร็อพเพอร์ตี้ที่เปลี่ยนแปลงได้ซึ่งผู้ใช้สามารถโต้ตอบและเปลี่ยนแปลงได้ และจำนวนดาวสูงสุด

เราจะเห็นว่า Anton ใช้พร็อพเพอร์ตี้ประเภทตัวเลขแบบไดนามิกนี้สำหรับค่า

ดังนั้นนี่คือจำนวนดาวที่เลือกไว้จริงๆ

ซึ่งมีคำอธิบายของตัวเองที่บอก Agent ว่าค่านี้มีไว้เพื่ออะไร

จากนั้นเรามีพร็อพเพอร์ตี้ประเภทคงที่ ดังนั้นเราจึงใช้พร็อพเพอร์ตี้ A2UI ของประเภทตัวเลขนี้เพื่อกำหนดจำนวนดาวสูงสุดที่คอมโพเนนต์นี้สามารถแสดงได้

เมื่อกำหนดพร็อพเพอร์ตี้ทั้ง 2 รายการแล้ว เราก็แค่ต้องแสดงผลพร็อพเพอร์ตี้เหล่านั้น

ดังนั้น การลบล้างพร็อพเพอร์ตี้ properties นี้ เราจะสร้างรายการและแสดงผลรายการเหล่านั้น

นี่คือวิธีที่คุณบอก Agent ว่าคอมโพเนนต์นี้เกี่ยวข้องกับอะไร

ใช่

ตามที่ Nick กล่าวไว้ คำจำกัดความของพร็อพเพอร์ตี้นี้ใช้เพื่อส่งเป็นส่วนหนึ่งของสคีมาแคตตาล็อกเพื่อให้ Agent ทราบวิธีใช้คอมโพเนนต์นี้

แต่พร็อพเพอร์ตี้นี้จะใช้คำจำกัดความของพร็อพเพอร์ตี้เดียวกันเพื่อดึงค่าที่พิมพ์ออกมาขณะรันไทม์ด้วย

ดังนั้นจึงมีแหล่งข้อมูลที่เชื่อถือได้เพียงแหล่งเดียว

มาดูกันว่าเราต้องทำอะไรบ้างเพื่อใช้ฟีเจอร์นี้

ดังนั้น ก่อนอื่น หากต้องการเข้าถึงพร็อพเพอร์ตี้ max เนื่องจากพร็อพเพอร์ตี้ max เป็นพร็อพเพอร์ตี้แบบคงที่ หมายความว่า Agent จะส่งค่าของพร็อพเพอร์ตี้นั้นแบบอินไลน์ในออบเจ็กต์ properties

ดังนั้น หากต้องการเข้าถึง เราเพียงแค่ต้องดึงข้อมูลจากออบเจ็กต์พร็อพเพอร์ตี้โดยอ้างอิงโดยใช้ออบเจ็กต์พร็อพเพอร์ตี้ proper- max เป็นคีย์

เนื่องจากพร็อพเพอร์ตี้นี้กำหนดเป็นตัวเลข เราจึงต้องแปลงเป็น int และตั้งค่าเริ่มต้นด้วย

สิ่งถัดไปคือพร็อพเพอร์ตี้ value

เนื่องจากพร็อพเพอร์ตี้ค่าเป็นพร็อพเพอร์ตี้แบบไดนามิก จึงหมายความว่าพร็อพเพอร์ตี้นี้อ้างอิงบางอย่างในโมเดลข้อมูล

ดังนั้น หากต้องการเข้าถึง เราจำเป็นต้องใช้ API properties.bind และส่งออบเจ็กต์พร็อพเพอร์ตี้เป็นคีย์เป็นพารามิเตอร์

ดังนั้น สิ่งที่ฟังก์ชันนี้ทำคือแสดงผลค่าปัจจุบันที่จัดเก็บไว้ในโมเดลข้อมูลสำหรับพร็อพเพอร์ตี้นี้ และยังสมัครรับข้อมูลอัปเดตในอนาคตด้วย

ดังนั้น เมื่อใดก็ตามที่มีการอัปเดตโมเดลข้อมูล คอมโพเนนต์นี้จะจัดองค์ประกอบใหม่โดยอัตโนมัติ

ดังนั้น เราจึงแปลงเป็น int และตั้งค่าเริ่มต้นบางอย่างในลักษณะเดียวกัน

สิ่งที่เราต้องทำอีกอย่างคือตั้งค่าการเชื่อมโยงแบบ 2 ทางเพื่อให้เปลี่ยนคะแนนได้

โดยเราจะใช้ bindUpdater API เพื่อดำเนินการดังกล่าว

เราส่งออบเจ็กต์พร็อพเพอร์ตี้เดียวกันกับที่กำหนดพร็อพเพอร์ตี้ และด้วยเหตุนี้ เราจึงได้ bindUpdater ที่แสดงผล Lambda ซึ่งช่วยให้เราเปลี่ยนแปลงค่าของพร็อพเพอร์ตี้นี้ในโมเดลข้อมูลได้

ตอนนี้เราพร้อมที่จะส่งคอมโพเนนต์การให้ดาวแล้ว

ตกลง

เมื่อกำหนดคอมโพเนนต์ที่กำหนดเองแล้ว เราจะต้องเพิ่มคอมโพเนนต์ดังกล่าวลงในแคตตาล็อกที่ใช้อยู่

ก่อนหน้านี้เราใช้แค็ตตาล็อกพื้นฐานตามที่เป็นอยู่

ตอนนี้สิ่งที่เราต้องทำคือสร้างแคตตาล็อกใหม่ ซึ่งจะนำแคตตาล็อกพื้นฐานทั้งหมดมาเพิ่มคอมโพเนนต์ที่กำหนดเอง

ดังนั้น แคตตาล็อกจึงประกอบด้วย 3 สิ่ง

ซึ่งประกอบด้วยรหัส ชุดคอมโพเนนต์ และชุดฟังก์ชัน

สำหรับรหัส เราจะใช้ URI เพื่อกำหนดแคตตาล็อกที่ระบุอย่างไม่ซ้ำกัน รวมถึงเวอร์ชันที่เรากำลังใช้งานอยู่

และสำหรับคอมโพเนนต์ เราจะนำคอมโพเนนต์ทั้งหมดจากแคตตาล็อกพื้นฐานมาใช้ จากนั้นจะใช้โอเปอเรเตอร์ add เพื่อเพิ่มคอมโพเนนต์ที่กำหนดเองที่เราเพิ่งสร้างขึ้น

และสำหรับฟังก์ชัน เราจะใช้ฟังก์ชันจากแคตตาล็อกพื้นฐาน

และด้วยวิธีนี้ เราได้ขยายแคตตาล็อกพื้นฐานเพื่อเพิ่มประเภทคอมโพเนนต์ที่กำหนดเองใหม่

เห็นไหมว่าการสร้างแคตตาล็อกที่กำหนดเองนั้นง่ายมาก

ดังนั้น Agent จะเรียนรู้วิธีใช้แคตตาล็อกได้จากวิธีการของระบบที่เราส่งให้

ตอนนี้เราสร้างแคตตาล็อกที่กำหนดเองแล้ว มาอัปเดตคำสั่งของระบบกันด้วย

ดังนั้นเราจะส่งออบเจ็กต์แคตตาล็อกไปยังฟังก์ชันที่สร้างคำสั่งของระบบ

และนี่คือสิ่งที่เราจะมาพูดถึงกัน

ดังนั้นจนถึงตอนนี้ เราได้ส่งคำจำกัดความแบบคงที่ของสคีมาสำหรับแคตตาล็อกพื้นฐานเนื่องจากเราใช้แคตตาล็อกมาตรฐานนี้

เมื่อมีแคตตาล็อกที่กำหนดเองแล้ว เราจะสร้างสคีมาแบบไดนามิกได้โดยใช้ฟังก์ชัน toJsonSchemaString

ดังนั้น การดำเนินการนี้จะสร้างการแสดง JSON ที่สมบูรณ์ของแคตตาล็อกนี้ รวมถึงคอมโพเนนต์การให้ดาวที่เราเพิ่งเพิ่มเข้าไป

คำสั่งของระบบยังมีตัวอย่างคำตอบสำหรับ Agent ด้วย

ดังนั้นเราจึงเปลี่ยนรหัสแคตตาล็อกที่นี่ด้วย เพื่อให้ตัวอย่างอ้างอิงแคตตาล็อกที่ถูกต้อง

ตกลง

และด้วยเหตุนี้ เราจึงได้ขยายแคตตาล็อกพื้นฐานเพื่อเพิ่มประเภทที่กำหนดเองของเราเอง

ดังนั้น หากเราทำให้ใช้งานได้อีกครั้งและลองใช้พรอมต์เหล่านี้ ซึ่งหวังว่าจะแสดง UI การให้คะแนน

จากนั้น Agent จะตอบกลับ

และที่นี่ คุณจะเห็นว่าคอมโพเนนต์ดาวนี้เป็นคอมโพเนนต์ใหม่ที่ Agent ไม่เคยเห็นมาก่อนจนกระทั่งเราเพิ่งนำมาใช้ในตอนนี้

นี่ไม่ใช่ส่วนหนึ่งของแคตตาล็อกพื้นฐาน เราเพิ่งสร้างขึ้นมา

เมื่อฉันคลิกที่ดาว ระบบจะเรียกใช้ bindUpdater lambda และอัปเดตค่าในโมเดลข้อมูล

และหากเราส่งการให้คะแนน เราจะดูการดำเนินการได้ และบริบทของการดำเนินการจะรวมค่าที่เราเพิ่งตั้งไว้

เอาล่ะ ตอนนี้เรากลับไปที่สไลด์กัน

เราได้พูดถึงเรื่องต่างๆ ไปอย่างรวดเร็ว แต่หวังว่าเราจะแสดงให้เห็นว่าคุณสามารถเปลี่ยนจาก Agent ที่ตอบกลับเป็นข้อความยาวๆ ให้กลายเป็น Agent ที่สร้าง UI แบบเนทีฟจริงๆ ได้อย่างง่ายดายได้อย่างไร

หวังว่าเราได้แสดงให้คุณเห็นแล้วว่าการผสานรวมนั้นทำได้ง่ายมาก

คุณต้องดำเนินการ 3 องค์ประกอบหลัก ได้แก่ สร้างแคตตาล็อกคอมโพเนนต์ ใช้ตรรกะการแยกวิเคราะห์บางอย่าง แล้วแสดงผลใน UI

และเราหวังว่าเราได้แสดงให้เห็นแล้วว่าไลบรารีนี้ทำสิ่งต่างๆ ให้คุณได้มากมายตั้งแต่แกะกล่อง เช่น การแสดงผลแบบต่อเนื่องหรือการตรวจสอบสคีมา ลูปการแก้ไขด้วยตนเองหรือการจัดการข้อผิดพลาด และอื่นๆ อีกมากมาย

และหวังว่าเราได้แสดงให้เห็นอย่างรวดเร็วในวันนี้ว่าคุณสามารถปรับแต่งได้อย่างง่ายดาย

เราได้แสดงให้เห็นแล้วว่าแคตตาล็อกพื้นฐานตอบสนองต่อการกำหนดธีม Material อย่างไรหากคุณใช้ Material แต่การขยายหรือแทนที่คอมโพเนนต์ภายในแคตตาล็อกนั้นทำได้ง่ายมาก

แต่ฉันคิดว่าสิ่งที่ทรงพลังที่สุดคือการสร้างแคตตาล็อกของคุณเอง

หากต้องการควบคุม UI ที่ Agent สามารถใช้ได้จริงมากที่สุด คุณสามารถสร้างคอมโพเนนต์ที่กำหนดเองทั้งหมดได้

หากต้องการให้อิสระอย่างเต็มที่ คุณสามารถให้คอมโพเนนต์พื้นฐาน เช่น ป้ายกำกับข้อความและปุ่ม แล้วบอกว่า "คุณสร้าง UI"

หากต้องการควบคุมมากขึ้น คุณสามารถสร้างคอมโพเนนต์ที่ซับซ้อนมากขึ้นและบอกว่า "นี่คือสิ่งเดียวที่คุณใช้ได้"

ดังนั้น คุณจึงควบคุมสิ่งที่ Agent ทำและแสดงต่อผู้ใช้ได้

นี่คือไลบรารีโปรแกรมแสดงผล A2UI และไลบรารี Jetpack ใหม่ที่เราเพิ่งเปิดตัว

implementation("androidx.compose.material3:material3-a2ui:1.0.0-alpha02")

ปัจจุบันอยู่ในเวอร์ชันอัลฟ่า โดยอัลฟ่า 02 เพิ่งเปิดตัวไปเมื่อเร็วๆ นี้

โปรดไปที่ลิงก์เหล่านี้เพื่อดูข้อมูลเพิ่มเติม

เรามีเอกสารประกอบใน developer.android.com รวมถึงตัวอย่าง 2-3 รายการ

เรามีตัวอย่างพื้นฐานที่แสดงแคตตาล็อกพื้นฐาน รวมถึงตัวอย่างที่ซับซ้อนมากขึ้น และแอปตัวอย่าง JetPacker ที่เราเพิ่งสร้างขึ้น ซึ่งคุณจะได้เห็นอีกครั้งในคีย์โน้ตของ ADS ที่จะจัดขึ้นในวันนี้ โดยจะสาธิตวิธีสร้างคอมโพเนนต์ที่ซับซ้อนมากขึ้นเพื่อควบคุมสิ่งที่ผู้ใช้เห็น

อย่างที่บอกไปว่าตอนนี้เราอยู่ในเวอร์ชันอัลฟ่า จึงเป็นช่วงเวลาที่ดีในการลองใช้และแสดงความคิดเห็น รวมถึงส่งคำขอฟีเจอร์ และบอกเราว่าคุณต้องการใช้ฟีเจอร์นี้อย่างไร หรือคุณอยากใช้ฟีเจอร์นี้หากทำสิ่งนั้นสิ่งนี้ได้

ดังนั้นโปรดลองดูคลังและแสดงความคิดเห็นให้เราทราบ

และนั่นคือสิ่งที่เราได้รับ

และเราแทบจะรอไม่ไหวที่จะได้เห็นสิ่งที่คุณและ Agent ของคุณสร้างขึ้นด้วยเครื่องมือนี้

ขอขอบคุณ

ขอขอบคุณ