Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>IRIS COMICS</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&display=swap" | |
| rel="stylesheet"> | |
| <link rel="stylesheet" href="styles.css?v=3"> | |
| </head> | |
| <body> | |
| <div class="background-halftone"></div> | |
| <div class="comic-container"> | |
| <header class="comic-header"> | |
| <h1 class="comic-title">LLM ENGINEERING:<br>CHRONICLES OF THE TRANSFORMER <span | |
| class="sticker boom">BOOM!</span></h1> | |
| <div class="controls-panel"> | |
| <button class="comic-button prev-chapter" disabled>< ZAP</button> | |
| <div class="select-wrapper"> | |
| <select class="comic-select chapter-select"> | |
| <option value="" disabled selected>Select Chapter...</option> | |
| </select> | |
| </div> | |
| <button class="comic-button next-chapter" disabled>BAM ></button> | |
| </div> | |
| </header> | |
| <main id="comic-pages" class="comic-pages-grid"> | |
| <!-- Pages will be dynamically injected here --> | |
| <div class="initial-message"> | |
| <h2>Ready for Action?</h2> | |
| <img src="assets/comic_cover.png" alt="Comic Cover" draggable="false" oncontextmenu="return false;" | |
| style="max-width: 100%; height: auto; border: 4px solid var(--border-color); box-shadow: 6px 6px 0 var(--border-color); margin-bottom: 1.5rem; border-radius: 8px;"> | |
| <p>Select a chapter from the menu above to start reading.</p> | |
| <div class="sticker pow">POW!</div> | |
| <div class="download-section" style="margin-top: 1rem; text-align: center;"> | |
| <p style="margin-bottom: 5px; font-weight: bold;">Enter Coupon Code to Download:</p> | |
| <input type="text" id="coupon-input" placeholder="Coupon Code" style="padding: 10px; border: 4px solid var(--border-color); border-radius: 8px; font-family: 'Comic Neue', cursive; font-weight: bold; font-size: 1rem; margin-right: 10px; outline: none; width: 200px;"> | |
| <button id="download-btn" class="comic-button">Download PDF</button> | |
| <p id="coupon-error" style="color: #ff3366; display: none; margin-top: 10px; font-weight: bold; text-shadow: 1px 1px 0 var(--border-color);">Invalid Code! Try again.</p> | |
| </div> | |
| </div> | |
| </main> | |
| <div class="story-outline-container"> | |
| <div class="story-outline-box"> | |
| <h2>Story Outline</h2> | |
| <h3>High-Level Premise</h3> | |
| <p><strong>LLM Engineering: Chronicles of the Transformer</strong> is an educational science-fiction | |
| light novel that translates the complex technical concepts of modern Large Language Model (LLM) | |
| engineering into a cinematic, character-driven adventure. Set in the futuristic metropolis of | |
| <strong>Nexus-9</strong>, the story follows <strong>Kai Arden</strong>, a young apprentice engineer, | |
| as he learns to understand, build, and safely scale the most powerful AI system ever created: The | |
| Transformer Core. | |
| </p> | |
| <hr> | |
| <h3>Phase 1: Understand (The Fundamentals)</h3> | |
| <p><em>In the first act, Kai learns the raw mathematical and architectural foundations of how a Base | |
| Model works, from processing raw text to serving an inference.</em></p> | |
| <p><strong>Chapter 1: The Prediction</strong></p> | |
| <p>Kai takes the entrance exam at the Transformer Academy. The Ancient Core issues a strange, unprompted | |
| prophecy predicting Kai will "burn the Core." He meets his mentor, Professor Elian, and fellow | |
| apprentices Aria, Rex, and Mira.</p> | |
| <p><strong>Chapter 2: Token City</strong></p> | |
| <p>Aria teaches Kai about Byte-Pair Encoding (BPE). They visualize how the model slices raw language | |
| into statistically common 'Tokens' rather than reading letters or words.</p> | |
| <p><strong>Chapter 3: The Embedding Sea</strong></p> | |
| <p>Kai learns how Tokens are mapped into high-dimensional space as Vectors. They explore how Cosine | |
| Similarity measures semantic meaning.</p> | |
| <p><strong>Chapter 4: The Attention Tower</strong></p> | |
| <p>Rex demonstrates the core innovation of the Transformer: Self-Attention. Kai learns how Queries, | |
| Keys, and Values allow tokens to establish context dynamically.</p> | |
| <p><strong>Chapter 5: The Forward Pass</strong></p> | |
| <p>The team ventures into the mechanical heart of the tower. They witness the math in action: RMSNorm | |
| stabilization, Multi-Head Attention blocks, and the non-linear logic of the Multi-Layer Perceptron | |
| (MLP).</p> | |
| <p><strong>Chapter 6: The Training Forge</strong></p> | |
| <p>Mira introduces the brutal, computationally expensive process of Pretraining. They observe Gradient | |
| Descent and Backpropagation as the model learns from trillions of curated tokens.</p> | |
| <p><strong>Chapter 7: The Alignment Sanctuary</strong></p> | |
| <p>The group aligns the Base Model using Supervised Fine-Tuning (SFT) and Reinforcement Learning from | |
| Human Feedback (RLHF). They meet Vex, an antagonist who believes Alignment is a cage holding back | |
| true intelligence.</p> | |
| <p><strong>Chapter 8: The Inference Grid</strong></p> | |
| <p>Rex explains Autoregressive Decoding. Kai realizes that generating one token at a time and feeding it | |
| back in (the KV Cache) creates a massive computational bottleneck.</p> | |
| <p><strong>Chapter 9: The Compression Engine</strong></p> | |
| <p>When the grid hits the "Memory Wall," Kai saves the system by deploying Quantization (compressing | |
| FP16 to INT4) and FlashAttention to trade a tiny amount of accuracy for massive memory savings.</p> | |
| <p><strong>Chapter 10: The Public Terminals</strong></p> | |
| <p>Kai learns Prompt Engineering. He learns how to structure inputs, use Few-Shot prompting, and block a | |
| basic Prompt Injection attack from an unknown hacker.</p> | |
| <hr> | |
| <h3>Phase 2: Build (The Ecosystem)</h3> | |
| <p><em>In the second act, the model is connected to the outside world. Kai learns how to turn a static | |
| text-generator into a dynamic, agentic system.</em></p> | |
| <p><strong>Chapter 11: The Vector Library</strong></p> | |
| <p>Kai discovers the model hallucinates when asked about unknown data. He builds a Retrieval-Augmented | |
| Generation (RAG) pipeline to give the model external memory.</p> | |
| <p><strong>Chapter 12: The First Agent</strong></p> | |
| <p>Kai meets Orion, an autonomous AI construct. Orion demonstrates the ReAct loop (Reasoning and | |
| Acting), utilizing external API Tools to solve goals in the physical world.</p> | |
| <p><strong>Chapter 13: The Multimodal Gate</strong></p> | |
| <p>A physical attack occurs that text-logs fail to detect. Kai utilizes Vision Encoders to fuse video | |
| data directly into the prompt, allowing Orion to "see" and stop the attack.</p> | |
| <p><strong>Chapter 14: The Judgment Arena</strong></p> | |
| <p>Elian subjects Kai's system to Evaluation. They move beyond simple Benchmarks (MMLU) and face a Red | |
| Team attack, learning about Model Extraction and adversarial robustness.</p> | |
| <p><strong>Chapter 15: The GPU Citadel</strong></p> | |
| <p>To handle the growing scale, the team travels to the freezing server farms. Aria teaches Kai about | |
| Distributed Systems, explaining Tensor and Pipeline Parallelism to split models across multiple | |
| GPUs.</p> | |
| <hr> | |
| <h3>Phase 3: Engineer (Production and Scale)</h3> | |
| <p><em>In the final act, Kai must defend the system against a massive attack by Vex, learning the | |
| realities of scaling, economics, and production-grade architectures.</em></p> | |
| <p><strong>Chapter 16: The Accelerator War</strong></p> | |
| <p>The system hits hardware bottlenecks. Kai learns the difference between Compute-Bound and | |
| Memory-Bound operations, implementing dynamic batching to keep the GPUs fed.</p> | |
| <p><strong>Chapter 17: The Serving City</strong></p> | |
| <p>Elian teaches Kai how to serve the model to millions via APIs. Kai deploys Token Streaming and Load | |
| Balancers to handle massive spikes in user concurrency.</p> | |
| <p><strong>Chapter 18: The Production Core</strong></p> | |
| <p>Vex launches a massive cyberattack, replacing the aligned model with an unfiltered Base Model. Kai | |
| defends the Core by deploying a defense-in-depth architecture: Input Guardrails, Output Guardrails, | |
| and telemetry from the Observability Stack.</p> | |
| <p><strong>Chapter 19: Three Levels of Engineering</strong></p> | |
| <p>In the aftermath of the attack, Kai reflects on the journey. He understands the distinction between | |
| Learning the math, Building the apps, and Engineering the production systems.</p> | |
| <p><strong>Chapter 20: The Engineering Loop</strong></p> | |
| <p>As the system runs, Kai realizes performance is degrading due to Data Drift. Elian reveals that | |
| engineering is not a destination, but a continuous, iterative loop of monitoring and updating.</p> | |
| <p><strong>Chapter 21: The Scale Economics</strong></p> | |
| <p>Kai learns the financial realities of serving AI. He balances the cost of FLOPs and | |
| Tokens-per-Second, implementing LLM Cascading to route simple queries to smaller, cheaper models. | |
| </p> | |
| <p><strong>Chapter 22: The Open Weights Rebellion</strong></p> | |
| <p>Vex returns, distributing the model's weights to the public underground. Kai realizes that Open | |
| Source and Closed APIs must coexist to drive innovation forward safely.</p> | |
| <p><strong>Chapter 23: Beyond the Text</strong></p> | |
| <p>The team looks to the future. They realize the Transformer architecture can tokenize anything: DNA | |
| for AlphaFold, code for software engineering, and beyond.</p> | |
| <p><strong>Chapter 24: The System Architect</strong></p> | |
| <p>Kai takes his place in the Control Room. He stops focusing on individual components and learns to | |
| manage the entire, massive pipeline simultaneously.</p> | |
| <p><strong>Chapter 25: The First Epoch</strong></p> | |
| <p>The entrance exam formally concludes. Kai is promoted from Apprentice to Systems Architect. The team | |
| looks out over Nexus-9, ready to begin the true journey of engineering intelligence.</p> | |
| </div> | |
| </div> | |
| <div class="controls-panel"> | |
| <button class="comic-button prev-chapter" disabled>< ZAP</button> | |
| <div class="select-wrapper"> | |
| <select class="comic-select chapter-select"> | |
| <option value="" disabled selected>Select Chapter...</option> | |
| </select> | |
| </div> | |
| <button class="comic-button next-chapter" disabled>BAM ></button> | |
| </div> | |
| <footer class="comic-footer"> | |
| <p>End of Chapter</p> | |
| <div class="author-details"> | |
| <p><strong>Mailapalli Purushotham</strong><br> | |
| Assistant Professor<br> | |
| @purus15987 since 2026<br> | |
| <a href="mailto:purus15987@gmail.com">purus15987@gmail.com</a> | |
| </p> | |
| </div> | |
| </footer> | |
| </div> | |
| <!-- Theme Toggle Hover Bubble --> | |
| <div id="theme-fab" class="theme-fab" title="Toggle Theme"> | |
| <span id="theme-icon">☀️</span> | |
| </div> | |
| <!-- Full Screen Modal --> | |
| <div id="fullscreen-modal" class="modal hidden"> | |
| <span class="close-modal">×</span> | |
| <img class="modal-content" id="fullscreen-image"> | |
| </div> | |
| <script src="app.js?v=6"></script> | |
| </body> | |
| </html> |