Canvas: แผงพรีวิวสดสำหรับทุกสิ่งที่โมเดลเขียน

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

Canvas คืออะไร

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

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

ตรงไหนที่มันคุ้มค่า

ไม่กี่อย่างที่มันเปลี่ยนจากงานน่าเบื่อให้กลายเป็นบทสนทนา:

• ส่วน landing และ HTML อีเมล อธิบายส่วน hero สักส่วน ดูมันเรนเดอร์ แล้วขยับ ระยะห่างและสีด้วยภาษาธรรมดาจนกว่ามันจะดูเข้าที่ คุณกำลังวนปรับที่ตัวสิ่งของจริง ๆ ไม่ใช่ที่คำอธิบายของสิ่งนั้น
• ไดอะแกรม ขอ flowchart ของ auth handshake หรือ sequence diagram ของ request Mermaid เรนเดอร์มันทันที และ “สลับสองขั้นนี้” ก็เป็นแค่ประโยคเดียวแทนการวาดใหม่ด้วยมือ
• ชาร์ตและ SVG สเก็ตช์ข้อมูลเร็ว ๆ ไอคอน ภาพประกอบง่าย ๆ คุณเห็นมันในขนาดเต็ม และขัดเกลาด้วยการพูดคุย
• งานเขียนยาว ๆ Markdown เรนเดอร์พร้อมหัวเรื่องและโครงสร้างจริง ๆ คุณจึงได้อ่าน เอกสารในแบบที่ผู้อ่านจะอ่าน ไม่ใช่หรี่ตามองเครื่องหมายดอกจันดิบ ๆ

มันทำงานร่วมกับตัวเลือกโมเดล

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

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

วนปรับด้วยภาษา ส่งมอบซอร์ส

เมื่อพรีวิวดูเข้าที่แล้ว ซอร์สก็อยู่ตรงนั้นให้คุณหยิบไปได้ — คัดลอก HTML, เอ็กซ์พอร์ต SVG, คว้าคำนิยาม Mermaid Canvas ไม่ใช่กล่องดำที่มีเพียงมันเท่านั้นที่อ่านได้ มันคือวิธีที่ เร็วกว่าในการเข้าถึงซอร์สที่คุณเป็นเจ้าของอย่างเต็มที่ คุณทำการวนปรับด้วยภาษาธรรมดา และได้เอาต์พุตที่พร้อมใช้งานจริงในตอนท้าย

ฟีเจอร์เล็ก ๆ ที่ให้ผลเกินตัว

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