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.
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.
Prompt (simular movimiento de proyectil)
Crea una página para simular el movimiento de proyectil. La página debe:
Permitir a los usuarios introducir la velocidad inicial, el ángulo y la altura del proyectil.
Mostrar una animación en vivo de la trayectoria del proyectil.
Incluir valores calculados para el tiempo de vuelo, la altura máxima y el alcance.
Utilizar deslizadores para el ajuste en tiempo real de los parámetros de entrada.
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:
Proporcionar opciones de estado de ánimo como “Feliz”, “Malhumorado” o “Pizza”.
Hacer que los emojis como , o caigan sin fin desde la parte superior de la pantalla.
Permitir a los usuarios hacer clic en los emojis para “recogerlos” con un divertido efecto de sonido.
Incluir un contador tonto como “Rebanadas de Pizza Recolectadas: 27”.
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:
Mostrar un sistema solar animado y detallado a escala reducida, mostrando las órbitas planetarias.
Permitir a los usuarios hacer clic en un planeta para ver información como su tamaño, distancia al sol y período orbital.
Permitir a los usuarios acercar y alejar.
Incluir un deslizador para acelerar o ralentizar el movimiento orbital.
Utilizar HTML, CSS y JavaScript para la interactividad y la animación.
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:
Mostrar varios elementos (por ejemplo, botones, divs) que los usuarios puedan animar con CSS.
Permitir a los usuarios elegir entre una lista de propiedades de animación (por ejemplo, transform, opacity, translate, rotate).
Proporcionar deslizadores para ajustar la duración, la función de temporización y el retraso de las animaciones.
Permitir a los usuarios previsualizar las animaciones en tiempo real y ver cómo los cambios afectan a la animación.
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:
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).
Permitir a los usuarios filtrar los datos por rango de tiempo, categoría o ubicación utilizando menús desplegables o deslizadores.
Actualizar los gráficos en tiempo real a medida que los usuarios interactúan con los filtros.
Mostrar estadísticas descriptivas (por ejemplo, media, mediana, moda) para los datos seleccionados.
Utilizar Chart.js o D3.js para representar gráficos y JavaScript para manejar el filtrado de datos y los cálculos estadísticos.
También he reproducido esto una o dos veces, intentando llegar al fondo del asunto. @david Sospecho que esto está relacionado con los decoradores de ember.
Interesante… házmelo saber si puedes obtener alguna reproducción consistente de esto.
¿Funcionaría con consultas del explorador de datos compartidas globalmente (nivel de confianza 0) a las que se accede a través de la API? Si es así, tiene potencial para generar visualizaciones divertidas y dinámicas de la actividad del foro.
No tuve tiempo de probarlo yo mismo, pero tal vez alguien se anime a intentarlo para este caso de uso
Podrías conectarlo con una herramienta personalizada, sería un buen número de malabarismos, pero probablemente solo haría que la herramienta personalizada renderizara el gráfico de alguna manera para ese caso de uso, podemos jugar con esta idea.
Sin embargo, puedes compartir visualizaciones sin duda, te mostraré.
Sí, esto es cierto no solo para los Artefactos Web de IA, sino también al usar un LLM para crear HTML, JavaScript y CSS.
Si se puede mantener el desarrollo como HTML, JavaScript y CSS simples/básicos, lo que significa que no incluye bibliotecas externas, las posibilidades de obtener código funcional y libre de errores aumentan drásticamente. Además, cuanto más oscura sea la biblioteca, menos datos de entrenamiento habrá recibido el modelo, y más probable será que el modelo alucine para completar la respuesta, lo que generará más errores.
Sin embargo, es extraño hoy. Volví a probar; cada solicitud falló.
El estado de OpenAI está en verde. Nada cambió mientras dormía, así que no estoy seguro de lo que está pasando.
El botón “Ejecutar prueba” también me da un error 500, y los registros muestran un tiempo de espera agotado.
Por cierto, desde la perspectiva del usuario, me pregunto si sería bienvenido tener un mensaje de error (en lugar de uno en blanco) y una forma de reintentar.
Como habitual del foro de OpenAI, vemos muchos de los altibajos de los modelos. Durante las últimas dos semanas, los informes de problemas han aumentado, pero estos problemas recuerdan a problemas similares antes de un lanzamiento importante o de nuevos modelos.
Pregunta muy básica… ¿cómo comparto un artefacto en mi foro? ¿Simplemente copio y pego algo como <div> class="ai-artifact" data-ai-artifact-id="XX"></div>? En ese caso, ¿solo yo puedo verlo y usarlo?
En mi limitada experiencia, usando Claude 3.5 Sonnet, itero de un lado a otro con el Creador Web y avanzo un poco, pero eventualmente empieza a olvidar y tengo que empezar de nuevo en una nueva sesión. Siento que sería más fácil retocar el código manualmente que perder tiempo con indicaciones y arriesgarme a olvidar.
¿Puedo editar el código generado?
¿Puedo iniciar un nuevo contexto con un artefacto existente? (Le pregunté al Creador Web y dijo que no).
Sí, Mark, este es difícil. Estoy trabajando en una rehacer de los internos del artefacto:
Las ediciones inestables también me han molestado hasta el infinito. Todavía estoy decidiendo cuántos parámetros proporcionar.
He trasladado el sistema a un enfoque similar a Architect, la herramienta llama a un LLM para realizar las actualizaciones, por lo que puede hacerlo de manera mucho más confiable y ya no hay problemas de deriva. La desventaja, sin embargo, es que el nuevo sistema puede usar más tokens porque hay un nivel de duplicación inevitable.
Puede que te permita empezar con un artefacto existente (hacer que lo clone) si el artefacto se compartió públicamente… lo pensaré sobre cómo podemos hacer esto, necesito tener mucho cuidado con la seguridad.
Normalmente, cuando interactúo con el Creador Web, dice algo como “Actualizaré el artefacto con la nueva función”, luego escribe bloques de html, css y javascript, y luego muestra el artefacto actualizado para que pueda Ejecutar Artefacto.
Hoy, consistentemente dice “Actualizaré el artefacto” y escribe los bloques de código, pero luego elimina el código y el artefacto (si es que lo creó). Así que me quedo solo con “Actualizaré el artefacto”. Incluso si edito la publicación del creador, eso es todo lo que hay.
No he actualizado ni cambiado nada. No hay errores en la consola. Claude 3.5 Sonnet.
¿Actualizaste a la última versión? Acabo de terminar una importante refactorización del sistema, muchas funciones nuevas y una herramienta de artefactos de lectura.
o 
caigan sin fin desde la parte superior de la pantalla.
