Em tela cheia, às vezes a barra de escape se sobrepõe ao conteúdo, impossibilitando a interação com ele.
Às vezes, “Executar Artefatos” não aparece imediatamente, mas aparece quando você passa o mouse sobre os ícones de postagem, por exemplo (parece).
Tive apenas um caso em que nenhum resultado foi exibido. Pude ver o indicador e, em seguida, nada aconteceu.
No geral, funciona muito bem.
Aqui estão algumas das demonstrações.
Não é tão fácil acertar uma demonstração. Como sempre, quanto mais detalhado o prompt, melhor.
Às vezes, é necessária precisão extra. Nem sempre inclui todos os recursos, não é responsivo ou requer código para aguardar o carregamento da página. Além disso, o uso de bibliotecas externas aumenta a chance de falha.
Eu gostei demais desse recurso.
Prompt (simular movimento de projétil)
Crie uma página para simular o movimento de projétil. A página deve:
Permitir que os usuários insiram a velocidade inicial, o ângulo e a altura do projétil.
Exibir uma animação ao vivo da trajetória do projétil.
Incluir valores calculados para tempo de voo, altura máxima e alcance.
Usar controles deslizantes para ajuste em tempo real dos parâmetros de entrada.
Incluir um botão “Redefinir” para começar de novo.
Vídeo
Prompt (Jogo de chuva de emojis)
Crie uma página onde os usuários escolhem seu humor e emojis começam a cair pela tela. A página deve:
Fornecer opções de humor como “Feliz”, “Mal-humorado” ou “Pizza”.
Fazer emojis como , ou caírem sem parar do topo da tela.
Permitir que os usuários cliquem nos emojis para “coletá-los” com um efeito sonoro engraçado.
Incluir um contador bobo como “Fatias de Pizza Coletadas: 27”.
Usar HTML, CSS e JavaScript para diversão animada.
Vídeo
Prompt (Visualizador simples do sistema solar)
Crie uma página para visualizar o sistema solar. A página deve:
Exibir um sistema solar animado e detalhado em escala reduzida, mostrando as órbitas planetárias.
Permitir que os usuários cliquem em um planeta para ver informações como tamanho, distância do sol e período orbital.
Permitir que os usuários deem zoom in e out.
Incluir um controle deslizante para acelerar ou desacelerar o movimento orbital.
Usar HTML, CSS e JavaScript para interatividade e animação.
Garantir que o contêiner use 100% de largura e altura.
Vídeo
Prompt (Playground de Animação CSS)
Crie uma página onde os usuários possam experimentar animações e transições CSS. A página deve:
Exibir vários elementos (por exemplo, botões, divs) que os usuários podem animar com CSS.
Permitir que os usuários escolham entre uma lista de propriedades de animação (por exemplo, transform, opacity, translate, rotate).
Fornecer controles deslizantes para ajustar a duração, a função de tempo e o atraso das animações.
Permitir que os usuários visualizem as animações em tempo real e vejam como as alterações afetam a animação.
Usar JavaScript para atualizar as propriedades CSS dinamicamente e HTML/CSS para estilo.
Vídeo
Prompt (Dashboard de Dados Interativo)
Crie uma página que visualize um dashboard de dados com gráficos interativos. A página deve:
Exibir vários gráficos, como um gráfico de barras, um gráfico de linha e um gráfico de pizza, cada um representando diferentes conjuntos de dados (por exemplo, vendas, população, dados meteorológicos).
Permitir que os usuários filtrem os dados por intervalo de tempo, categoria ou local usando menus suspensos ou controles deslizantes.
Atualizar os gráficos em tempo real conforme os usuários interagem com os filtros.
Mostrar estatísticas descritivas (por exemplo, média, mediana, moda) para os dados selecionados.
Usar Chart.js ou D3.js para renderizar gráficos e JavaScript para lidar com a filtragem de dados e cálculos estatísticos.
Funcionaria com consultas do explorador de dados compartilhadas globalmente (nível de confiança 0) acessadas via API? Se sim, então tem algum potencial para gerar visuais divertidos e dinâmicos da atividade do fórum.
Eu não tive tempo de testar sozinho, mas talvez alguém se sinta à vontade para tentar para este caso de uso
Você poderia conectá-lo com uma ferramenta personalizada, seria um pouco complicado, mas eu provavelmente apenas faria a ferramenta personalizada renderizar o gráfico de alguma forma para esse caso de uso, podemos brincar com essa ideia
Você pode, no entanto, compartilhar visualizações com certeza, vou te mostrar
Sim, isso é verdade não apenas para Artefatos Web de IA, mas também ao usar um LLM para criar HTML, JavaScript e CSS.
Se for possível manter o desenvolvimento como HTML, JavaScript e CSS simples/puro, o que significa que não inclui bibliotecas externas, as chances de obter código funcional e sem bugs aumentam dramaticamente. Além disso, quanto mais obscura for a biblioteca, menos dados de treinamento o modelo recebeu, maior a probabilidade de o modelo alucinar para completar a resposta, resultando em mais bugs.
No entanto, é estranho hoje. Testei novamente; todas as solicitações falharam.
O status da OpenAI está verde. Nada mudou enquanto eu dormia, então não tenho certeza do que está acontecendo.
O botão “Executar Teste” também me dá um erro 500, e os logs mostram um tempo limite.
Em uma nota paralela, da perspectiva do usuário, me pergunto se seria bem-vindo ter uma mensagem de erro (em vez de uma em branco) e uma maneira de tentar novamente.
Como um membro regular do fórum da OpenAI, vemos muitos dos altos e baixos dos modelos. Nas últimas duas semanas, os relatos de problemas aumentaram, mas esses problemas são reminiscentes de problemas anteriores a um grande lançamento ou a novos modelos.
Pergunta muito básica… como compartilho um artefato no meu fórum? Basta copiar e colar algo como <div></div>? Nesse caso, sou o único que pode vê-lo e usá-lo.
Na minha experiência limitada, usando o Claude 3.5 Sonnet, eu itero para frente e para trás com o Web Creator e faço algum progresso, mas eventualmente ele começa a esquecer e eu tenho que recomeçar em uma nova sessão. Sinto que seria mais fácil retocar o código manualmente do que desperdiçar prompts e arriscar esquecer.
Posso editar o código gerado?
Posso iniciar um novo contexto com um artefato existente? (Perguntei ao Web Creator e ele disse que não.)
Sim Mark, este é um problema difícil, estou trabalhando em uma refatoração dos internos do artefato:
Edições instáveis também me incomodaram imensamente. Ainda estou decidindo quantos controles fornecer.
Movi o sistema para uma abordagem semelhante à do Architect, a ferramenta chama um LLM para realizar as atualizações, então ela é capaz de fazer isso de forma muito mais confiável e não há mais problemas de desvio. A desvantagem, no entanto, é que o novo sistema pode usar mais tokens, pois há um nível de duplicação inevitável.
Posso permitir que você comece com um artefato existente (cloná-lo) se o artefato foi compartilhado publicamente… vou pensar em como podemos fazer isso, preciso ter muito cuidado com a segurança.
Normalmente, quando interajo com o Web Creator, ele diz algo como “Atualizarei o artefato com o novo recurso”, em seguida, escreve blocos de HTML, CSS e JavaScript, e então mostra o artefato atualizado para que eu possa Executar Artefato.
Hoje, ele consistentemente diz “Atualizarei o artefato” e escreve os blocos de código, mas depois exclui o código e o artefato (se é que ele o criou). Então, fico apenas com “Atualizarei o artefato”. Mesmo que eu edite a postagem do criador, é só isso que resta.
Não atualizei nem mudei nada. Nenhum erro no console. Claude 3.5 Sonnet.
Você atualizou para a versão mais recente? Acabei de concluir uma grande refatoração do sistema, muitas novidades e uma ferramenta de artefato de leitura
ou 
caírem sem parar do topo da tela.
