- เฟรมเวิร์ก Generative UI ที่ให้ AI รับพรอมป์ต์จากผู้ใช้แล้ว สร้างโครงสร้าง JSON จากนั้นเรนเดอร์ด้วยคอมโพเนนต์ที่กำหนดไว้ล่วงหน้า
- สร้าง UI แบบไดนามิกและปรับให้เหมาะกับแต่ละบุคคลจากพรอมป์ต์ โดยรับประกันผลลัพธ์ที่ปลอดภัยและคาดเดาได้ผ่าน แคตตาล็อกคอมโพเนนต์ที่กำหนดไว้ล่วงหน้า
- เมื่อกำหนด คอมโพเนนต์, แอ็กชัน, ฟังก์ชันตรวจสอบความถูกต้อง ที่ใช้ได้ไว้ในแคตตาล็อกแล้ว AI จะสร้าง JSON แบบมีข้อจำกัด (constrained) ได้เฉพาะภายในขอบเขตนั้นเท่านั้น
- JSON ที่สร้างขึ้นจะถูก เรนเดอร์แบบค่อยเป็นค่อยไปด้วยการสตรีม ทำให้ UI แสดงผลได้ทันทีเมื่อคำตอบจากโมเดลเริ่มมาถึง
- สามารถ ส่งออก UI ที่สร้างขึ้นเป็นโค้ด React แบบรันได้เอง (โปรเจกต์ Next.js) และ ดีพลอยเป็นโค้ด React ล้วน ที่ทำงานได้โดยไม่ต้องพึ่งพา runtime dependency
- รองรับการเรนเดอร์ทั้ง React และ React Native ด้วยแคตตาล็อกและรูปแบบสเปกเดียวกัน จึงครอบคลุมทั้งเว็บและมือถือด้วยนิยามเดียว
- คอมโพเนนต์ที่มีให้
- เลย์เอาต์: Card, Grid, Stack, Tabs, Carousel, Collapsible, Accordion
- อินพุต: Input, Textarea, Select, Checkbox, Radio, Switch, Slider, Toggle, ToggleGroup, Rating
- การแสดงผล: Text, Heading, Image, Badge, Alert, Progress, Skeleton, Spinner, Table, Avatar, Separator
- การโต้ตอบ: Button, ButtonGroup, Link, DropdownMenu, Dialog, Drawer, Popover, Tooltip, Pagination
- แผนภูมิ: BarGraph, LineGraph
- แต่ละคอมโพเนนต์รองรับ การผูกข้อมูลสองทาง ผ่าน
{ $bindState }
- สามารถกำหนด กฎการตรวจสอบความถูกต้อง แบบประกาศได้ด้วยอาร์เรย์
checks เช่น required, email, minLength
- ตัวจัดการเหตุการณ์สามารถผูกด้วย
on.press, on.change, on.select, on.submit เป็นต้น
npm install @json-render/core @json-render/react
1 ความคิดเห็น
ยอดเยี่ยมมากครับ ในที่สุดก็น่าจะก้าวต่อไปจนเริ่มจากการวางแผน แล้วเป็นตัวกลางที่ดีสำหรับงานดีไซน์และงานพับลิชชิงได้