Anuncio: Artefactos de IA en la Web

Probé localmente y la mayoría de los problemas encontrados:

  • En pantalla completa, a veces la barra de escape se superpone al contenido, lo que imposibilita interactuar con él.
  • A veces, “Ejecutar artefactos” no aparece inmediatamente, pero sí una vez que pasas el cursor sobre los iconos de publicación, por ejemplo (parece).
  • Tuve solo un caso en el que no se mostró ningún resultado. Pude ver el indicador y luego no pasó nada.

En general, funciona muy bien. :+1:

Aquí hay algunas de las demostraciones.
No es tan fácil hacer una demostración correcta. Como de costumbre, cuanto más detallado sea un prompt, mejor.
A veces, se necesita precisión adicional. No siempre incluye todos los recursos, no es receptivo o requiere código para esperar la carga de la página. Además, el uso de bibliotecas externas aumenta la posibilidad de fallo.

Disfruté demasiado esta función. :smile:

Prompt (simular movimiento de proyectil)

Crea una página para simular el movimiento de proyectil. La página debe:

  1. Permitir a los usuarios introducir la velocidad inicial, el ángulo y la altura del proyectil.
  2. Mostrar una animación en vivo de la trayectoria del proyectil.
  3. Incluir valores calculados para el tiempo de vuelo, la altura máxima y el alcance.
  4. Utilizar deslizadores para el ajuste en tiempo real de los parámetros de entrada.
  5. Incluir un botón “Restablecer” para empezar de nuevo.
Video


Prompt (juego de lluvia de emojis)

Crea una página donde los usuarios elijan su estado de ánimo y los emojis comiencen a llover por la pantalla. La página debe:

  1. Proporcionar opciones de estado de ánimo como “Feliz”, “Malhumorado” o “Pizza”.
  2. Hacer que los emojis como :smile:, :angry: o :pizza: caigan sin fin desde la parte superior de la pantalla.
  3. Permitir a los usuarios hacer clic en los emojis para “recogerlos” con un divertido efecto de sonido.
  4. Incluir un contador tonto como “Rebanadas de Pizza Recolectadas: 27”.
  5. Utilizar HTML, CSS y JavaScript para la diversión animada.
Video


Prompt (sencillo visualizador del sistema solar)

Crea una página para visualizar el sistema solar. La página debe:

  1. Mostrar un sistema solar animado y detallado a escala reducida, mostrando las órbitas planetarias.
  2. Permitir a los usuarios hacer clic en un planeta para ver información como su tamaño, distancia al sol y período orbital.
  3. Permitir a los usuarios acercar y alejar.
  4. Incluir un deslizador para acelerar o ralentizar el movimiento orbital.
  5. Utilizar HTML, CSS y JavaScript para la interactividad y la animación.
  6. Asegurarse de que el contenedor utilice el 100% de ancho y alto.
Video


Prompt (área de juegos de animaciones CSS)

Crea una página donde los usuarios puedan experimentar con animaciones y transiciones CSS. La página debe:

  1. Mostrar varios elementos (por ejemplo, botones, divs) que los usuarios puedan animar con CSS.
  2. Permitir a los usuarios elegir entre una lista de propiedades de animación (por ejemplo, transform, opacity, translate, rotate).
  3. Proporcionar deslizadores para ajustar la duración, la función de temporización y el retraso de las animaciones.
  4. Permitir a los usuarios previsualizar las animaciones en tiempo real y ver cómo los cambios afectan a la animación.
  5. Utilizar JavaScript para actualizar las propiedades CSS dinámicamente y HTML/CSS para el estilo.
Video


Prompt (Panel de control de datos interactivo)

Crea una página que visualice un panel de control de datos con gráficos interactivos. La página debe:

  1. Mostrar varios gráficos, como un gráfico de barras, un gráfico de líneas y un gráfico circular, cada uno representando diferentes conjuntos de datos (por ejemplo, ventas, población, datos meteorológicos).
  2. Permitir a los usuarios filtrar los datos por rango de tiempo, categoría o ubicación utilizando menús desplegables o deslizadores.
  3. Actualizar los gráficos en tiempo real a medida que los usuarios interactúan con los filtros.
  4. Mostrar estadísticas descriptivas (por ejemplo, media, mediana, moda) para los datos seleccionados.
  5. Utilizar Chart.js o D3.js para representar gráficos y JavaScript para manejar el filtrado de datos y los cálculos estadísticos.
Video

3 Me gusta