Canvas: panel podglądu na żywo dla wszystkiego, co napisze model

Większość narzędzi do czatu wręcza ci blok kodu i życzy powodzenia. Kopiujesz go do edytora, zapisujesz plik, otwierasz przeglądarkę, widzisz, że jest lekko nie tak, wracasz do czatu, wklejasz poprawkę i powtarzasz. Canvas usuwa każdy krok tej pętli oprócz dwóch, które mają znaczenie: zapytaj i spójrz.

Czym jest Canvas

Gdy odpowiedź modelu zawiera coś renderowalnego, panel podglądu otwiera się obok rozmowy i pokazuje to na żywo. HTML renderuje się jako strona. SVG renderuje się jako obraz. Blok Mermaid staje się diagramem. Markdown staje się sformatowanym tekstem. Widzisz wynik, nie źródło, w momencie, gdy model kończy go pisać.

Czat zostaje po lewej, wyrenderowany artefakt po prawej. Rozmawiasz dalej — „zmniejsz nagłówek”, „użyj ciemniejszego tła”, „dodaj węzeł dla ścieżki ponowienia” — a podgląd aktualizuje się, gdy model wprowadza zmiany. Bez kopiowania, bez wklejania, bez drugiej aplikacji.

Gdzie zarabia na swoje utrzymanie

Kilka rzeczy, które zmienia z mordęgi w rozmowę:

• Sekcje landingu i email HTML. Opisz sekcję hero, patrz, jak się renderuje, dostosuj odstępy i kolor zwykłym językiem, aż wygląda dobrze. Iterujesz na samej rzeczy, a nie na opisie rzeczy.
• Diagramy. Poproś o flowchart handshake’u uwierzytelniania albo diagram sekwencji żądania. Mermaid renderuje go natychmiast, a „zamień te dwa kroki” to jedno zdanie zamiast ręcznego przerysowania.
• Wykresy i SVG. Szybkie szkice danych, ikony, proste ilustracje. Widzisz je w pełnym rozmiarze i dopracowujesz, rozmawiając.
• Pisanie long-form. Markdown renderuje się z prawdziwymi nagłówkami i strukturą, więc czytasz dokument tak, jak przeczyta go czytelnik, a nie mrużąc oczy na surowe gwiazdki.

Działa z selektorem modeli

Canvas nie jest przywiązany do jednego dostawcy. Naszkicuj layout szybkim modelem, potem rozgałęź trudną część do silniejszego — podgląd podąża za zwycięską gałęzią. Ponieważ artefakt żyje obok wątku, a nie wewnątrz sandboxa jednego modelu, zmiana modelu nie kosztuje cię pracy w toku. Render po prostu uruchamia się ponownie na nowej odpowiedzi.

To ta sama zasada, na której zbudowane jest całe studio: użyteczna rzecz (tutaj artefakt na żywo) należy do twojej rozmowy, a nie do zamurowanego zestawu funkcji jednego modelu.

Iteruj w języku, wyślij źródło

Gdy podgląd wygląda dobrze, źródło jest tuż obok, gotowe do zabrania ze sobą — skopiuj HTML, wyeksportuj SVG, weź definicję Mermaid. Canvas nie jest czarną skrzynką, którą tylko on potrafi odczytać; to szybszy sposób dotarcia do źródła, które w pełni posiadasz. Iterowałeś w zwykłym języku i na końcu dostałeś wynik gotowy do produkcji.

Mała funkcja o nieproporcjonalnym efekcie

Canvas nie dodaje zdolności, której modele nie miały — zawsze potrafiły pisać HTML. Tym, co usuwa, jest przepaść między napisanym a zobaczonym. Zamknięcie tej przepaści zmienia sposób, w jaki pracujesz: przestajesz traktować wynik modelu jako szkic do oceny później i zaczynasz traktować go jako rzecz, którą kształtujesz właśnie teraz, w czasie rzeczywistym, w tym samym oknie. Okazuje się, że to większość tego, co sprawia, że narzędzie wydaje się szybkie.