Meu Site

# Canvas UI: Trabalhe com Código de Forma Profissional O **Canvas UI** é um recurso poderoso do Allcraft que transforma a forma como você trabalha com código gerado por IA. Ao invés de visualizar código inline no chat, você pode abri-lo em uma **interface split-screen profissional** com múltiplas abas e preview em tempo real. ## Por que usar o Canvas UI? Quando você pede para a IA gerar código, especialmente múltiplos arquivos, visualizar tudo inline no chat pode ficar confuso. O Canvas UI resolve isso oferecendo: - ✅ **Interface split-screen** - Chat de um lado, código do outro - ✅ **Múltiplas abas** - Gerencie até 10 arquivos simultaneamente - ✅ **Preview em tempo real** - Visualize HTML, JSX e TSX rodando - ✅ **Syntax highlighting** - Código colorido para melhor leitura - ✅ **Ações rápidas** - Copiar, baixar, fullscreen ## Como Ativar o Canvas UI ### Passo 1: Acessar as Configurações No **chat do Allcraft**, procure o ícone de engrenagem (⚙️) ao lado do seletor de modelo, no topo da interface. ### Passo 2: Ativar Canvas Mode Dentro das configurações, encontre a seção **"Code Display Settings"** e ative a opção: ``` ☑️ Use Canvas Mode for Code Blocks ``` ### Passo 3: Pronto! Feche o modal de configurações. Agora, sempre que a IA gerar código, você verá um botão **"Open in Canvas"** ao invés do código inline. ## Usando o Canvas UI ### Abrindo Código Quando o Canvas Mode está ativo: 1. A IA responde com código 2. Aparece um botão **"Open in Canvas"** 3. Clique para abrir o código no painel lateral 4. O canvas aparece à direita, dividindo a tela ### Trabalhando com Múltiplas Abas O Canvas UI suporta **até 10 arquivos abertos simultaneamente**: - Cada código abre em uma nova aba - Clique nas abas para alternar entre arquivos - Feche abas individuais com o ícone X - Organize seu workspace como preferir ### Modos de Visualização Para arquivos **HTML, JSX e TSX**, você tem 3 modos: #### 1. Code View Visualização completa do código com syntax highlighting. **Quando usar:** - Revisar a estrutura do código - Copiar trechos específicos - Estudar a lógica implementada #### 2. Preview Visualização ao vivo do resultado renderizado. **Quando usar:** - Ver como ficou visualmente - Testar interações - Validar layout e design #### 3. Split View Código e preview lado a lado. **Quando usar:** - Comparar código com resultado - Aprender vendo código + visual - Debug visual de componentes ### Ações Disponíveis Na toolbar do canvas, você tem: #### Copiar Copia todo o código para a área de transferência. ``` 💡 Dica: Útil para colar em seu editor favorito! ``` #### Download Baixa o arquivo com a extensão correta (.html, .jsx, .tsx, etc.). ``` 💡 Dica: O nome do arquivo é detectado automaticamente se houver comentário no código! ``` #### Fullscreen Expande o canvas para tela cheia. ``` 💡 Dica: Perfeito para trabalhar com códigos longos ou fazer apresentações! ``` #### Close Fecha o canvas completamente. ### Redimensionamento Você pode **arrastar o divisor** entre chat e canvas para ajustar o tamanho de cada painel: - Mais espaço para o chat = ver mais contexto da conversa - Mais espaço para o canvas = ver mais código ## Detecção Automática de Nome de Arquivo O Canvas UI detecta automaticamente o nome do arquivo se você adicionar um comentário no início do código: ### JavaScript/TypeScript ```javascript // filename: MeuComponente.jsx import React from 'react'; export default function MeuComponente() { return

Hello!

; } ``` ### Python ```python # filename: script.py print("Hello, World!") ``` ### HTML ```html Meu Site ... ``` ## Casos de Uso Práticos ### 1. Criar Componentes React ``` Você: Crie um componente React de card de produto com imagem, título, preço e botão de compra. IA: [Gera código] Você: [Abre no Canvas > Visualiza no Preview > Ajusta > Baixa] ``` ### 2. Protótipos HTML ``` Você: Crie uma landing page para um curso de IA com hero section, benefícios e CTA. IA: [Gera HTML + CSS] Você: [Abre no Canvas Split View > Vê código + resultado > Itera] ``` ### 3. Múltiplos Arquivos ``` Você: Crie um formulário de contato com 3 arquivos: HTML, CSS e JavaScript. IA: [Gera 3 códigos] Você: [Abre os 3 no Canvas em abas separadas > Alterna entre eles > Baixa todos] ``` ### 4. Aprendizado ``` Você: Me ensine como funcionam hooks do React criando exemplos. IA: [Gera exemplos de useState, useEffect, etc] Você: [Usa Split View para ver código + comportamento lado a lado] ``` ## Dicas Profissionais ### 1. Organize por Complexidade Comece com **poucas abas** para projetos simples. Só abra múltiplas abas quando estiver trabalhando com sistemas maiores. ### 2. Use Preview para Validação Rápida Sempre que receber código visual (HTML/JSX/TSX), dê uma olhada rápida no Preview antes de copiar. Economiza tempo! ### 3. Combine com Iteração ``` Você: [Abre código no Canvas] Você: "Mude a cor do botão para azul" IA: [Atualiza código] Você: [Canvas atualiza automaticamente] ``` ### 4. Fullscreen para Foco Quando precisar se concentrar no código ou fazer uma análise detalhada, use o modo fullscreen. ### 5. Download Organizado Baixe os arquivos com nomes corretos usando comentários de filename. Isso mantém seu projeto organizado. ## Limitações e Considerações ### Performance - **Recomendado**: Até 10 abas abertas - **Além disso**: Pode ficar lento dependendo do hardware ### Preview Suportado Apenas para: - HTML - JSX (React) - TSX (TypeScript + React) Outros tipos de arquivo mostram apenas código. ### Mobile Em dispositivos móveis, o **modo inline** pode ser mais prático devido ao espaço de tela limitado. ## Troubleshooting ### Canvas não aparece? 1. Verifique se Canvas Mode está ativado nas configurações 2. Certifique-se de que há código na resposta da IA 3. Tente recarregar a página ### Preview não funciona? 1. Confirme que é arquivo HTML/JSX/TSX 2. Verifique se não há erros de sintaxe no código 3. Teste no Code View primeiro ### Performance ruim? 1. Feche abas não utilizadas 2. Considere usar modo inline para snippets simples 3. Limpe o cache do navegador ## Atalhos de Teclado (Em Breve) O Allcraft está desenvolvendo atalhos para melhorar ainda mais a produtividade: - `Ctrl/Cmd + K` - Toggle canvas - `Ctrl/Cmd + W` - Fechar aba atual - `Ctrl/Cmd + Tab` - Alternar entre abas - `F11` - Fullscreen ## Conclusão O **Canvas UI** transforma o Allcraft em um verdadeiro **ambiente de desenvolvimento assistido por IA**. Com interface profissional, preview em tempo real e gestão de múltiplos arquivos, você trabalha com código de forma mais produtiva e organizada. ### Próximos Passos 1. Ative o Canvas Mode nas configurações 2. Peça para a IA gerar algum código 3. Experimente os diferentes modos de visualização 4. Pratique com múltiplas abas **Dúvidas?** Teste o Canvas UI agora mesmo no chat do Allcraft!