Canvas: панель живого попереднього перегляду для всього, що пише модель

Більшість чат-інструментів видають вам блок коду й бажають удачі. Ви копіюєте його в редактор, зберігаєте файл, відкриваєте браузер, бачите, що щось трохи не так, повертаєтесь у чат, вставляєте правку — і повторюєте. Canvas прибирає в цьому циклі кожен крок, окрім двох, що мають значення: запитати й подивитися.

Що таке Canvas

Коли відповідь моделі містить щось, що рендериться, поруч із розмовою відкривається панель попереднього перегляду й показує це наживо. HTML рендериться як сторінка. SVG рендериться як зображення. Блок Mermaid стає діаграмою. Markdown стає форматованим текстом. Ви бачите результат, а не джерело, тієї миті, коли модель закінчує писати.

Чат лишається ліворуч, відрендерений артефакт — праворуч. Ви продовжуєте говорити — «зроби заголовок меншим», «візьми темніше тло», «додай вузол для шляху повторної спроби» — і попередній перегляд оновлюється в міру того, як модель править. Жодного копіювання, жодного вставляння, жодного другого застосунку.

Де це окуповується

Кілька речей, що їх він перетворює з рутини на розмову:

• Секції лендингу та HTML для листів. Опишіть hero-секцію, дивіться, як вона рендериться, підкручуйте відступи й колір простою мовою, доки не стане як треба. Ви ітеруєте на самій речі, а не на описі речі.
• Діаграми. Попросіть блок-схему auth-рукостискання чи sequence-діаграму запиту. Mermaid рендерить її миттєво, і «поміняй ці два кроки місцями» — це одне речення замість ручного перемальовування.
• Графіки та SVG. Швидкі начерки даних, іконки, прості ілюстрації. Ви бачите їх у повний розмір і уточнюєте розмовою.
• Довгі тексти. Markdown рендериться зі справжніми заголовками та структурою, тож ви читаєте документ так, як його прочитає читач, а не примружуєтесь на сирі зірочки.

Це працює з вибором моделей

Canvas не прив’язаний до одного провайдера. Накидайте макет на швидкій моделі, потім відгалужте хитру частину на сильнішу — попередній перегляд іде за переможною гілкою. Оскільки артефакт живе поруч із тредом, а не всередині пісочниці однієї моделі, перемикання моделей не коштує вам роботи в процесі. Рендер просто перезапускається на новій відповіді.

Це той самий принцип, на якому побудована вся студія: корисна річ (тут — живий артефакт) належить вашій розмові, а не обгородженому набору функцій однієї моделі.

Ітеруйте мовою, забирайте джерело

Коли попередній перегляд виглядає як треба, джерело прямо тут, щоб забрати з собою — скопіюйте HTML, експортуйте SVG, візьміть визначення Mermaid. Canvas — не чорна скринька, яку лише він сам може прочитати; це швидший шлях до джерела, яким ви повністю володієте. Ви робили ітерації простою мовою й отримали готовий до продакшену результат наприкінці.

Маленька функція з непропорційно великим ефектом

Canvas не додає можливості, якої в моделей не було, — вони завжди вміли писати HTML. Що він прибирає — це розрив між написаним і побаченим. Закриття цього розриву змінює те, як ви працюєте: ви перестаєте ставитися до виводу моделі як до чернетки, яку оціните пізніше, і починаєте ставитися до нього як до речі, яку формуєте просто зараз, у реальному часі, у тому самому вікні. І це виявляється більшою частиною того, що змушує інструмент відчуватися швидким.