Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Nesta aula 3. Criando um painel analítico para a NeoVarejo usando Live_Artifacts n Claude, executei todos os procedimentos, o Claude gerou o arquivo html de saída, porém a tela de saída está escura, sem dados, embora ele tenha lido os arquivos e apresentado comentários (no chat) dando a entender que ele calculou os indicadores. Porque o html pode não estar funcionando e apresentando os resultados?
Olá, Leopoldo. Como vai?
Esse comportamento da tela escura ou em branco no arquivo HTML gerado pelo Claude é um problema comum e costuma acontecer devido a pequenas falhas na hora em que o modelo renderiza ou empacota o código interativo. Se no chat ele confirmou que leu os dados e calculou os indicadores, a lógica está correta e o "bug" é puramente na interface do código front-end (HTML/JavaScript).
Aqui estão os principais motivos para isso acontecer e as soluções práticas para você resolver e ver o seu painel funcionando:
1. Dependências externas bloqueadas (Scripts e Bibliotecas CDN)
Geralmente, para criar gráficos bonitos e interativos (como barras, linhas e tabelas), o Claude insere links de bibliotecas JavaScript externas no código HTML (como Tailwind CSS, Chart.js, ou Lucide Icons).
2. Código JavaScript incompleto (Código Cortado)
Às vezes, quando o painel é muito grande ou complexo, o Claude atinge o limite de caracteres da resposta e "corta" o final do código HTML ou do script JavaScript sem você perceber. Uma tag </script> ou </div> aberta e não fechada impede o navegador de renderizar qualquer dado na tela.
"O arquivo HTML anterior ficou com a tela escura e não renderizou os dados. Por favor, reescreva o código completo do painel da NeoVarejo, certificando-se de que todas as tags HTML e funções JavaScript estejam fechadas corretamente e que os dados estejam embutidos diretamente no código."
3. Falha na injeção dos dados (Hardcoded Data)
Como os Live Artifacts do Claude rodam de forma isolada dentro do navegador, o arquivo HTML de saída não consegue acessar arquivos .csv ou .xlsx locais que estão no seu computador devido a restrições de segurança do próprio navegador. O Claude precisa injetar os dados convertidos diretamente dentro do código (geralmente como um objeto JSON ou uma lista Javascript).
const dados = [...]. Se não houver, peça para ele: "Por favor, empute os resultados consolidados que você calculou diretamente dentro de uma variável JavaScript no HTML, para que o painel não dependa de carregamento de arquivos externos."Faça esse teste pedindo para ele revisar o fechamento das tags e consolidar os dados dentro do próprio código do artefato. Com isso, o navegador conseguirá interpretar o layout e os gráficos vão aparecer perfeitamente!
Espero que possa ter lhe ajudado!
Muito obrigado pela resposta.
Eu tinha pedido no chat simplesmente "o arquivo html não está mostrando os dados calculados e a tela ficou escura" e o Claude conseguiu reescrever o html, que está funcionando.
Claude: "O Babel standalone às vezes falha silenciosamente no browser. Vou compilar o JSX diretamente no servidor e gerar um HTML puro, sem dependência do Babel no browser.
Corrigiu. O relatório ficou visível. Esse programa é fantástico e ajuda muito quem conhece pouca programação.