Pular para o conteúdo
← Todos os posts
3 min read Any AI Studio

Canvas: um painel de pré-visualização ao vivo para tudo o que um modelo escreve

Quando um modelo escreve HTML, SVG, um diagrama Mermaid ou Markdown, não devias ter de o copiar para outro sítio para o ver. O Canvas renderiza-o ao lado do chat e atualiza-se à medida que iteras.

  • funcionalidades
  • canvas

A maioria das ferramentas de chat entrega-te um bloco de código e deseja-te sorte. Copia-lo para um editor, gravas um ficheiro, abres um navegador, vês que está ligeiramente errado, voltas ao chat, colas a correção, e repetes. O Canvas elimina cada passo desse ciclo exceto os dois que importam: perguntar, e olhar.

O que é o Canvas

Quando a resposta de um modelo contém algo renderizável, abre-se um painel de pré-visualização ao lado da conversa e mostra-o ao vivo. O HTML renderiza-se como uma página. O SVG renderiza-se como a imagem. Um bloco Mermaid torna-se o diagrama. O Markdown torna-se texto formatado. Vês o resultado, não o código fonte, no momento em que o modelo acaba de o escrever.

O chat fica à esquerda, o artefacto renderizado à direita. Continuas a falar — «faz o cabeçalho mais pequeno», «usa um fundo mais escuro», «acrescenta um nó para o caminho de repetição» — e a pré-visualização atualiza-se à medida que o modelo revê. Sem copiar, sem colar, sem uma segunda aplicação.

Onde ganha o seu valor

Algumas coisas que transforma de tarefa maçadora em conversa:

  • Secções de landing e HTML de email. Descreve uma secção hero, vê-a renderizar-se, ajusta o espaçamento e a cor em linguagem simples até ficar bem. Estás a iterar sobre a própria coisa, não sobre uma descrição da coisa.
  • Diagramas. Pede um fluxograma de um handshake de autenticação ou um diagrama de sequência de um pedido. O Mermaid renderiza-o instantaneamente, e «troca estes dois passos» é uma frase em vez de um redesenho manual.
  • Gráficos e SVG. Esboços rápidos de dados, ícones, ilustrações simples. Vês-los em tamanho completo e refina-los a falar.
  • Escrita de formato longo. O Markdown renderiza-se com cabeçalhos e estrutura reais, por isso estás a ler o documento como um leitor o vai ler, em vez de espremer os olhos perante asteriscos em bruto.

Funciona com o seletor de modelos

O Canvas não está preso a um único provedor. Rascunha um layout com um modelo rápido, depois ramifica a parte complicada para um mais forte — a pré-visualização segue a ramificação vencedora. Como o artefacto vive ao lado da thread em vez de dentro da sandbox de um modelo, trocar de modelo não te custa o trabalho em curso. A renderização simplesmente volta a correr contra a nova resposta.

É o mesmo princípio sobre o qual todo o studio está construído: a coisa útil (aqui, um artefacto ao vivo) pertence à tua conversa, não ao conjunto de funcionalidades amuralhado de um único modelo.

Itera em linguagem, leva o código fonte

Quando a pré-visualização fica bem, o código fonte está mesmo ali para levares contigo — copia o HTML, exporta o SVG, agarra a definição Mermaid. O Canvas não é uma caixa negra que só ele consegue ler; é uma forma mais rápida de chegar a código fonte que possuis por completo. Fizeste a iteração em linguagem simples e obtiveste um resultado pronto para produção no fim.

Uma funcionalidade pequena com um efeito desproporcionado

O Canvas não acrescenta uma capacidade que os modelos não tinham — eles sempre conseguiram escrever HTML. O que ele remove é a lacuna entre o escrito e o visto. Fechar essa lacuna muda a forma como trabalhas: deixas de tratar o resultado do modelo como um rascunho para avaliar mais tarde e começas a tratá-lo como algo que estás a moldar agora mesmo, em tempo real, na mesma janela. Acontece que isso é a maior parte do que faz uma ferramenta parecer rápida.


Achou um erro ou quer discordar? Escreva para nós .

Teste o produto por trás do texto.
studio.

Plano grátis. Sem cartão. Login por Google ou Apple.