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

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

Что такое Canvas

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

Чат остаётся слева, отрендеренный артефакт — справа. Вы продолжаете говорить — «сделай заголовок меньше», «возьми фон потемнее», «добавь узел для пути повторной попытки» — и предпросмотр обновляется по мере того, как модель правит. Никакого копирования, никакой вставки, никакого второго приложения.

Где это окупается

Несколько вещей, которые он превращает из рутины в разговор:

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

Это работает с выбором моделей

Canvas не привязан к одному провайдеру. Набросайте макет на быстрой модели, затем ветвите хитрую часть на более сильную — предпросмотр следует за победившей веткой. Поскольку артефакт живёт рядом с тредом, а не внутри песочницы одной модели, переключение моделей не стоит вам работы в процессе. Рендер просто перезапускается на новом ответе.

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

Итерируйте на языке, забирайте исходник

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

Маленькая фича с непропорционально большим эффектом

Canvas не добавляет возможности, которой у моделей не было, — они всегда умели писать HTML. Что он убирает — это разрыв между написанным и увиденным. Закрытие этого разрыва меняет то, как вы работаете: вы перестаёте относиться к выводу модели как к черновику, который оцените позже, и начинаете относиться к нему как к вещи, которую формируете прямо сейчас, в реальном времени, в том же окне. И это оказывается большей частью того, что заставляет инструмент ощущаться быстрым.