|
| 1 | +<div align="center"> |
| 2 | + |
| 3 | +# <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Panda.png" width="42" /> AI Image Diffusion Simulator |
| 4 | + |
| 5 | +### Visualize How AI Generates Images From Pure Noise |
| 6 | + |
| 7 | +[](https://diffussion.vercel.app) |
| 8 | +[](https://github.com/romizone/diffusion-simulator) |
| 9 | +[](https://github.com/romizone/diffusion-simulator/releases) |
| 10 | + |
| 11 | +[](#) |
| 12 | +[](#) |
| 13 | +[](#) |
| 14 | +[](#) |
| 15 | +[](#) |
| 16 | +[](#-license) |
| 17 | + |
| 18 | +<br/> |
| 19 | + |
| 20 | +<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Cat%20Face.png" width="28" /> |
| 21 | +<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Dog%20Face.png" width="28" /> |
| 22 | +<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Rabbit%20Face.png" width="28" /> |
| 23 | +<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Panda.png" width="28" /> |
| 24 | +<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Fox.png" width="28" /> |
| 25 | +<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Penguin.png" width="28" /> |
| 26 | +<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Hamster.png" width="28" /> |
| 27 | +<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Owl.png" width="28" /> |
| 28 | +<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Koala.png" width="28" /> |
| 29 | +<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Duck.png" width="28" /> |
| 30 | + |
| 31 | +**An interactive, browser-based educational tool that simulates how diffusion models (like Stable Diffusion, DALL-E, and Midjourney) generate images step by step — from random Gaussian noise to a clear picture.** |
| 32 | + |
| 33 | +[Live Demo](https://diffussion.vercel.app) • [Report Bug](https://github.com/romizone/diffusion-simulator/issues) • [Request Feature](https://github.com/romizone/diffusion-simulator/issues) |
| 34 | + |
| 35 | +</div> |
| 36 | + |
| 37 | +--- |
| 38 | + |
| 39 | +## <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Movie%20Camera.png" width="25" /> Overview |
| 40 | + |
| 41 | +**AI Image Diffusion Simulator** provides a real-time, visual demonstration of the denoising diffusion process used in modern AI image generation. Users select from **10 adorable animal characters** and watch as the simulator transforms pure noise into a recognizable image — one step at a time. |
| 42 | + |
| 43 | +> **Why does this matter?** Diffusion models are the backbone of cutting-edge AI image generators. Understanding how they work is crucial for developers, researchers, students, and anyone curious about AI creativity. |
| 44 | +
|
| 45 | +--- |
| 46 | + |
| 47 | +## <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Glowing%20Star.png" width="25" /> Key Features |
| 48 | + |
| 49 | +| Feature | Description | |
| 50 | +|---|---| |
| 51 | +| <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Paw%20Prints.png" width="18" /> **10 Animal Selections** | Choose from Cat, Dog, Bunny, Panda, Fox, Penguin, Hamster, Owl, Koala, and Duck | |
| 52 | +| <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Control%20Knobs.png" width="18" /> **Full Diffusion Controls** | Adjust noise level, diffusion steps (10-100), and guidance scale (CFG 1-20) | |
| 53 | +| <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png" width="18" /> **Speed Control** | Slow, Normal, and Fast animation modes | |
| 54 | +| <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Film%20Frames.png" width="18" /> **Step Timeline** | Visual snapshot timeline showing the denoising progression | |
| 55 | +| <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Symbols/Counterclockwise%20Arrows%20Button.png" width="18" /> **Reverse Diffusion** | Add noise back to see the forward diffusion process | |
| 56 | +| <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Artist%20Palette.png" width="18" /> **Canvas Rendering** | Real-time pixel manipulation using the HTML5 Canvas API | |
| 57 | +| <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Milky%20Way.png" width="18" /> **Dark Theme UI** | Sleek, modern dark interface with animated aurora background | |
| 58 | +| <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Mobile%20Phone.png" width="18" /> **Responsive Design** | Works on desktop, tablet, and mobile devices | |
| 59 | +| <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Package.png" width="18" /> **Zero Dependencies** | Pure HTML/CSS/JavaScript — no build tools or frameworks required | |
| 60 | +| <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Books.png" width="18" /> **Educational Cards** | Learn about Forward/Reverse Diffusion, CFG, and U-Net Architecture | |
| 61 | + |
| 62 | +--- |
| 63 | + |
| 64 | +## <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Gear.png" width="25" /> How It Works |
| 65 | + |
| 66 | +The simulator demonstrates the **Denoising Diffusion Probabilistic Model (DDPM)** process: |
| 67 | + |
| 68 | +``` |
| 69 | + FORWARD DIFFUSION (Training) REVERSE DIFFUSION (Generation) |
| 70 | + ───────────────────────────── ──────────────────────────────── |
| 71 | +
|
| 72 | + Clean Image ──────> Pure Noise Pure Noise ──────> Clean Image |
| 73 | + x_0 + noise x_T x_T - noise x_0 |
| 74 | +
|
| 75 | + Step 0 ─> Step 1 ─> ... ─> Step T Step T ─> Step T-1 ─> ... ─> Step 0 |
| 76 | +``` |
| 77 | + |
| 78 | +### <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Symbols/Keycap%20Digit%20One.png" width="20" /> Select an Animal |
| 79 | +Pick one of the 10 cute animal characters as the generation target. |
| 80 | + |
| 81 | +### <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Symbols/Keycap%20Digit%20Two.png" width="20" /> Configure Parameters |
| 82 | +Set the number of denoising steps, guidance scale, and animation speed. |
| 83 | + |
| 84 | +### <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Symbols/Keycap%20Digit%20Three.png" width="20" /> Generate |
| 85 | +Watch in real-time as noise is progressively removed to reveal the image. |
| 86 | + |
| 87 | +### <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Symbols/Keycap%20Digit%20Four.png" width="20" /> Explore |
| 88 | +Use the noise slider manually, try different CFG values, or reverse the process. |
| 89 | + |
| 90 | +--- |
| 91 | + |
| 92 | +## <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Wrench.png" width="25" /> Tech Stack |
| 93 | + |
| 94 | +<div align="center"> |
| 95 | + |
| 96 | +| Technology | Purpose | |
| 97 | +|:---:|:---:| |
| 98 | +|  | Page structure & Canvas element | |
| 99 | +|  | Dark theme, animations & responsive layout | |
| 100 | +|  | Canvas rendering, diffusion simulation & UI logic | |
| 101 | +|  | Inter & Space Grotesk typography | |
| 102 | +|  | Production deployment & CDN | |
| 103 | + |
| 104 | +</div> |
| 105 | + |
| 106 | +--- |
| 107 | + |
| 108 | +## <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Rocket.png" width="25" /> Quick Start |
| 109 | + |
| 110 | +### Prerequisites |
| 111 | +- Any modern web browser (Chrome, Firefox, Safari, Edge) |
| 112 | +- No Node.js, npm, or build tools required |
| 113 | + |
| 114 | +### Option 1: Open Directly |
| 115 | +```bash |
| 116 | +git clone https://github.com/romizone/diffusion-simulator.git |
| 117 | +cd diffusion-simulator |
| 118 | +open index.html |
| 119 | +``` |
| 120 | + |
| 121 | +### Option 2: Local Server |
| 122 | +```bash |
| 123 | +git clone https://github.com/romizone/diffusion-simulator.git |
| 124 | +cd diffusion-simulator |
| 125 | +npx http-server . -p 8090 |
| 126 | +# Open http://localhost:8090 |
| 127 | +``` |
| 128 | + |
| 129 | +### Option 3: Live Demo |
| 130 | +Visit **[https://diffussion.vercel.app](https://diffussion.vercel.app)** — no installation needed. |
| 131 | + |
| 132 | +--- |
| 133 | + |
| 134 | +## <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/File%20Folder.png" width="25" /> Project Structure |
| 135 | + |
| 136 | +``` |
| 137 | +diffusion-simulator/ |
| 138 | +├── index.html # Single-file application (HTML + CSS + JS) |
| 139 | +├── README.md # Documentation |
| 140 | +├── LICENSE # MIT License |
| 141 | +└── .claude/ |
| 142 | + └── launch.json # Dev server configuration |
| 143 | +``` |
| 144 | + |
| 145 | +--- |
| 146 | + |
| 147 | +## <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Control%20Knobs.png" width="25" /> Configuration Parameters |
| 148 | + |
| 149 | +| Parameter | Range | Default | Description | |
| 150 | +|---|---|---|---| |
| 151 | +| **Noise Level** | 0% - 100% | 100% | Manual control of the noise/image blend ratio | |
| 152 | +| **Diffusion Steps** | 10 - 100 | 50 | Number of denoising iterations during generation | |
| 153 | +| **Guidance Scale (CFG)** | 1.0 - 20.0 | 7.5 | Controls prompt adherence vs. diversity trade-off | |
| 154 | +| **Speed** | Slow / Normal / Fast | Normal | Animation playback speed (120ms / 50ms / 15ms per step) | |
| 155 | + |
| 156 | +--- |
| 157 | + |
| 158 | +## <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Paw%20Prints.png" width="25" /> Available Animals |
| 159 | + |
| 160 | +<div align="center"> |
| 161 | + |
| 162 | +| # | Animal | Character | Description | |
| 163 | +|:---:|:---:|:---:|---| |
| 164 | +| 1 | <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Cat%20Face.png" width="32" /> | **Cat** | The Sweet One — orange tabby with whiskers | |
| 165 | +| 2 | <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Dog%20Face.png" width="32" /> | **Dog** | The Loyal One — friendly pup with floppy ears | |
| 166 | +| 3 | <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Rabbit%20Face.png" width="32" /> | **Bunny** | The Fluffy One — pink bunny with long ears | |
| 167 | +| 4 | <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Panda.png" width="32" /> | **Panda** | The Chubby One — classic black & white bear | |
| 168 | +| 5 | <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Fox.png" width="32" /> | **Fox** | The Clever One — red fox with bushy tail | |
| 169 | +| 6 | <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Penguin.png" width="32" /> | **Penguin** | The Adorable One — tuxedo penguin with rosy cheeks | |
| 170 | +| 7 | <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Hamster.png" width="32" /> | **Hamster** | The Tiny One — golden hamster with puffy cheeks | |
| 171 | +| 8 | <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Owl.png" width="32" /> | **Owl** | The Wise One — brown owl with large eyes | |
| 172 | +| 9 | <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Koala.png" width="32" /> | **Koala** | The Sleepy One — grey koala with fluffy ears | |
| 173 | +| 10 | <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Duck.png" width="32" /> | **Duck** | The Quacky One — green mallard with orange beak | |
| 174 | + |
| 175 | +</div> |
| 176 | + |
| 177 | +--- |
| 178 | + |
| 179 | +## <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Graduation%20Cap.png" width="25" /> Educational Value |
| 180 | + |
| 181 | +This simulator teaches key concepts behind modern AI image generation: |
| 182 | + |
| 183 | +<table> |
| 184 | +<tr> |
| 185 | +<td width="50%"> |
| 186 | + |
| 187 | +### <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Microscope.png" width="20" /> Forward Diffusion |
| 188 | +The training process where Gaussian noise is **gradually added** to clean images until they become indistinguishable from random noise. The model learns the noise distribution at each step. |
| 189 | + |
| 190 | +</td> |
| 191 | +<td width="50%"> |
| 192 | + |
| 193 | +### <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Artist%20Palette.png" width="20" /> Reverse Diffusion |
| 194 | +The generation process where a neural network **predicts and removes noise** step by step, starting from pure Gaussian noise and ending with a coherent image. |
| 195 | + |
| 196 | +</td> |
| 197 | +</tr> |
| 198 | +<tr> |
| 199 | +<td> |
| 200 | + |
| 201 | +### <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png" width="20" /> Classifier-Free Guidance |
| 202 | +CFG scale controls the **trade-off between fidelity and diversity**. Higher values produce images that closely match the prompt but with less variation. Lower values allow more creative freedom. |
| 203 | + |
| 204 | +</td> |
| 205 | +<td> |
| 206 | + |
| 207 | +### <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Brain.png" width="20" /> U-Net Architecture |
| 208 | +The backbone neural network uses an **encoder-decoder structure with skip connections** to predict noise residuals at each timestep, enabling progressive denoising. |
| 209 | + |
| 210 | +</td> |
| 211 | +</tr> |
| 212 | +</table> |
| 213 | + |
| 214 | +--- |
| 215 | + |
| 216 | +## <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Desktop%20Computer.png" width="25" /> Browser Compatibility |
| 217 | + |
| 218 | +<div align="center"> |
| 219 | + |
| 220 | +| Browser | Version | Status | |
| 221 | +|:---:|:---:|:---:| |
| 222 | +|  | 90+ | Fully Supported | |
| 223 | +|  | 88+ | Fully Supported | |
| 224 | +|  | 15+ | Fully Supported | |
| 225 | +|  | 90+ | Fully Supported | |
| 226 | + |
| 227 | +</div> |
| 228 | + |
| 229 | +--- |
| 230 | + |
| 231 | +## <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Memo.png" width="25" /> Changelog |
| 232 | + |
| 233 | +### v1.0.0 — Initial Release |
| 234 | +- 10 cute animal selections with canvas-based rendering |
| 235 | +- Complete diffusion simulation (forward + reverse) |
| 236 | +- Adjustable parameters: steps, CFG scale, speed |
| 237 | +- Denoising steps timeline with visual snapshots |
| 238 | +- Manual noise slider for exploration |
| 239 | +- Responsive dark theme with animated background |
| 240 | +- Educational info cards explaining diffusion concepts |
| 241 | +- Zero-dependency single-file deployment |
| 242 | + |
| 243 | +--- |
| 244 | + |
| 245 | +## <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Handshake.png" width="25" /> Contributing |
| 246 | + |
| 247 | +Contributions are welcome! Here's how to get started: |
| 248 | + |
| 249 | +1. **Fork** the repository |
| 250 | +2. **Create** a feature branch (`git checkout -b feature/amazing-feature`) |
| 251 | +3. **Commit** your changes (`git commit -m 'Add amazing feature'`) |
| 252 | +4. **Push** to the branch (`git push origin feature/amazing-feature`) |
| 253 | +5. **Open** a Pull Request |
| 254 | + |
| 255 | +Please read our contributing guidelines and ensure your code follows the existing style. |
| 256 | + |
| 257 | +--- |
| 258 | + |
| 259 | +## <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Balance%20Scale.png" width="25" /> License |
| 260 | + |
| 261 | +This project is licensed under the **MIT License** — see the [LICENSE](LICENSE) file for details. |
| 262 | + |
| 263 | +``` |
| 264 | +MIT License |
| 265 | +
|
| 266 | +Copyright (c) 2025 romizone |
| 267 | +
|
| 268 | +Permission is hereby granted, free of charge, to any person obtaining a copy |
| 269 | +of this software and associated documentation files (the "Software"), to deal |
| 270 | +in the Software without restriction, including without limitation the rights |
| 271 | +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
| 272 | +copies of the Software, and to permit persons to whom the Software is |
| 273 | +furnished to do so, subject to the following conditions: |
| 274 | +
|
| 275 | +The above copyright notice and this permission notice shall be included in all |
| 276 | +copies or substantial portions of the Software. |
| 277 | +``` |
| 278 | + |
| 279 | +--- |
| 280 | + |
| 281 | +## <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Waving%20Hand.png" width="25" /> Acknowledgments |
| 282 | + |
| 283 | +- **[Denoising Diffusion Probabilistic Models](https://arxiv.org/abs/2006.11239)** — Ho et al. 2020, the foundational paper |
| 284 | +- **[Animated Fluent Emojis](https://github.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis)** — Animated emoji assets |
| 285 | +- **[Google Fonts](https://fonts.google.com/)** — Inter & Space Grotesk typefaces |
| 286 | +- **[Shields.io](https://shields.io/)** — Badge generation |
| 287 | + |
| 288 | +--- |
| 289 | + |
| 290 | +<div align="center"> |
| 291 | + |
| 292 | +**<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Star.png" width="18" /> Star this repo if you found it useful! <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Star.png" width="18" />** |
| 293 | + |
| 294 | +Built with <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Sparkling%20Heart.png" width="18" /> by [romizone](https://github.com/romizone) |
| 295 | + |
| 296 | +</div> |
0 commit comments