Here's the README.md file designed for your workshop project, distilling the provided development notes:
# Unveiling Artifacts: An AI-Powered Interactive Content Platform
This project explores the cutting edge of AI-driven content creation, showcasing how Large Language Models (LLMs) can dynamically generate and refine interactive web experiences. It demonstrates a novel approach to building complex web applications, from physics simulations to interactive games, through an iterative and conversational workflow.
## ✨ Key Features & Capabilities
* **AI-Powered Dynamic Content Generation:** Leverages sophisticated AI agents to create fully self-contained HTML documents, embedding all necessary CSS, JavaScript, and even images (as Base64 data URIs) directly within a single file for maximum portability and offline functionality.
* **Iterative Design & Refinement:** Enables a unique multi-turn conversation with the LLM, feeding its previous output back as context. This allows for incremental construction and step-by-step refinement of complex web components and user interfaces.
* **Dynamic Visual Storytelling:** Explores the creation of animatable SVGs and interactive timelines, enhancing data-driven narratives for subjects like the "History of LLMs" with fluid, programmable animations.
* **Automated Interactive Demonstrations:** Features a robust mechanism to cycle through and showcase various interactive artifacts (e.g., a Tetris clone, Snake game, two-pendulum physics simulation) in an engaging, automated sequence, ideal for exhibitions or continuous displays.
* **Effortless Serving & Local Development:** Includes a lightweight, robust static file server (Caddy) configured with appropriate CORS headers, streamlining the development and serving of these dynamic web artifacts.
## 🚀 Quick Start & Exploration
To experience the interactive web artifacts generated by this platform, simply click on the links below. Each link leads to a self-contained HTML file that will open directly in your web browser.
* [Two Pendulum Physics Simulation](https://claude.site/artifacts/e6a1abd4-2f16-4d83-8043-5cd48f58ac21)
* [Claude Tetris Game](https://claude.site/artifacts/d45ada63-3ebd-4fb7-85a4-167eb01e6054)
* [Snake Game](https://claude.site/artifacts/0c13399d-eea1-4fe3-a31b-dc964a2a9b3f)
*(Note: To learn about setting up the environment for generating new artifacts or contributing, please refer to the detailed documentation sections below.)*
## 💡 Technical Highlights
This project showcases several innovative technical approaches:
* **CrewAI Orchestration:** An `Artifactor` agent, designed as a "Web Developer/Designer," is orchestrated using `CrewAI` to manage the complex task of web artifact generation.
* **LLM Contextual Memory:** A critical design decision involves passing the LLM's `previous_artifact` as context for subsequent generations, enabling true multi-turn conversations and stateful design iteration.
* **Single-File Artifact Paradigm:** All generated web artifacts are engineered as single HTML files, embedding CSS, JavaScript, and even images as data URIs. This ensures maximum portability, offline functionality, and simplified distribution.
* **Dynamic SVG Manipulation:** Leverages SVG's inherent scalability and DOM manipulability to create fluid, interactive graphs and timelines, allowing for programmatic animation and dynamic data visualization.
* **Practical LLM Selection:** Demonstrates a real-world solution to LLM limitations, where switching from `gemini-1.5-pro` to `gemini-1.5-flash` successfully resolved content truncation issues, ensuring complete and functional artifact generation.
## 📚 Further Documentation
For a deeper dive into the project's architecture, development challenges, and detailed implementation decisions, please consult the following resources:
* **[Detailed Development Notes (NOTES.md)](./NOTES.md)**: Explore the comprehensive insights into each development phase, architectural choices, and technical problem-solving.
* **[Artifacts TODO List (TODO.md)](./TODO.md)**: See the ongoing development tasks and a direct link to the live examples of generated artifacts.