OpenGenerativeUI - เฟรมเวิร์กโอเพนซอร์สสำหรับ Generative UI ที่ขับเคลื่อนด้วย AI

• นำฟีเจอร์ การสร้างสื่อภาพแบบอินเทอร์แอ็กทีฟ ที่ Claude เปิดตัวมาสร้างขึ้นใหม่แทบทั้งหมด
• เป็น Generative UI ที่สร้าง กราฟ ไดอะแกรม และสื่อภาพประเภทต่าง ๆ โดยอัตโนมัติ แทนการตอบกลับเป็นข้อความอย่างเดียว
  • การทำภาพอัลกอริทึม: binary search, BFS/DFS, การเรียงลำดับ เป็นต้น
  • แอนิเมชัน 3D: ฉากอินเทอร์แอ็กทีฟที่สร้างบน WebGL/CSS3D
  • กราฟและไดอะแกรม: pie chart, bar chart, network diagram เป็นต้น
  • วิดเจ็ตและซิมูเลชัน: ฟอร์ม, กราฟคณิตศาสตร์, เครื่องมือโต้ตอบ เป็นต้น
• องค์ประกอบภาพทั้งหมดถูกเรนเดอร์ภายใน sandbox iframe เพื่อความปลอดภัยและการแยกการทำงาน
  • รองรับ ธีมสว่าง/มืด อัตโนมัติ, แอนิเมชันแบบค่อยเป็นค่อยไป, และ การปรับขนาดแบบ responsive
• สร้างคอนเทนต์ภาพแบบโต้ตอบได้แบบเรียลไทม์บนพื้นฐานของ CopilotKit และ LangGraph
  • จัดโครงสร้างเป็น monorepo บนพื้นฐาน Turborepo
  • apps/app: ฟรอนต์เอนด์บนพื้นฐาน Next.js 16, React 19, Tailwind 4
  • apps/agent: เอเจนต์ Python ที่ใช้ LangGraph และ CopilotKit middleware
• วิธีการทำงาน
  • ผู้ใช้ป้อนพรอมป์ต์ผ่าน CopilotKit chat UI
  • เอเจนต์จะตัดสินใจเลือกรูปแบบการตอบกลับที่เหมาะสมระหว่างข้อความ, การเรียกใช้เครื่องมือ, หรือคอมโพเนนต์ภาพ
  • ฮุก widgetRenderer ของฟรอนต์เอนด์รับ HTML แล้วเรนเดอร์ลง iframe
  • หลัง Skeleton loading จะทำเอฟเฟ็กต์เฟดอินอย่างนุ่มนวลและ ปรับความสูงอัตโนมัติ
• มี เมทริกซ์การตัดสินใจด้านการทำภาพ ให้
  • เลือกเทคโนโลยีที่เหมาะสมโดยอัตโนมัติตามประเภทคำขอ เช่น SVG, HTML, Chart.js, Three.js, D3.js
  • ตัวอย่าง: คำอธิบายกระบวนการใช้ Flowchart, การเปรียบเทียบข้อมูลใช้ Bar chart, การแสดงผลแบบ 3D ใช้ Three.js
• ใบอนุญาต MIT

[beoks]

ดูเหมือนว่าจะเป็นวิธีเรนเดอร์ HTML ที่สร้างขึ้นภายใน iframe นะครับ

[xguru]

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

ที่น่าสนใจก็คือมี Claude อยู่ในรายชื่อผู้ร่วมพัฒนาด้วย ฮ่าๆ
Claude ที่ช่วยทำฟีเจอร์ที่ Claude เปิดตัวออกมาให้เหมือนเดิมเป๊ะๆ..

[kissdesty]

ได้ยินมาว่าถ้าคอมมิตโดยใช้ Claude Code ระบบจะใส่ชื่อเข้าไปในรายชื่อ contributors ให้อัตโนมัติตามค่าตั้งต้นครับ