Anunciando: Artefatos Web de IA

Encontrei a maioria dos problemas localmente:

  • 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. :+1:

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. :smile:

Prompt (simular movimento de projétil)

Crie uma página para simular o movimento de projétil. A página deve:

  1. Permitir que os usuários insiram a velocidade inicial, o ângulo e a altura do projétil.
  2. Exibir uma animação ao vivo da trajetória do projétil.
  3. Incluir valores calculados para tempo de voo, altura máxima e alcance.
  4. Usar controles deslizantes para ajuste em tempo real dos parâmetros de entrada.
  5. 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:

  1. Fornecer opções de humor como “Feliz”, “Mal-humorado” ou “Pizza”.
  2. Fazer emojis como :smile:, :angry: ou :pizza: caírem sem parar do topo da tela.
  3. Permitir que os usuários cliquem nos emojis para “coletá-los” com um efeito sonoro engraçado.
  4. Incluir um contador bobo como “Fatias de Pizza Coletadas: 27”.
  5. 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:

  1. Exibir um sistema solar animado e detalhado em escala reduzida, mostrando as órbitas planetárias.
  2. Permitir que os usuários cliquem em um planeta para ver informações como tamanho, distância do sol e período orbital.
  3. Permitir que os usuários deem zoom in e out.
  4. Incluir um controle deslizante para acelerar ou desacelerar o movimento orbital.
  5. Usar HTML, CSS e JavaScript para interatividade e animação.
  6. 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:

  1. Exibir vários elementos (por exemplo, botões, divs) que os usuários podem animar com CSS.
  2. Permitir que os usuários escolham entre uma lista de propriedades de animação (por exemplo, transform, opacity, translate, rotate).
  3. Fornecer controles deslizantes para ajustar a duração, a função de tempo e o atraso das animações.
  4. Permitir que os usuários visualizem as animações em tempo real e vejam como as alterações afetam a animação.
  5. 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:

  1. 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).
  2. Permitir que os usuários filtrem os dados por intervalo de tempo, categoria ou local usando menus suspensos ou controles deslizantes.
  3. Atualizar os gráficos em tempo real conforme os usuários interagem com os filtros.
  4. Mostrar estatísticas descritivas (por exemplo, média, mediana, moda) para os dados selecionados.
  5. Usar Chart.js ou D3.js para renderizar gráficos e JavaScript para lidar com a filtragem de dados e cálculos estatísticos.
Vídeo

3 curtidas