Epoch Duel: Cyberpunk LLM Alignment Battle

A developer built 'Epoch Duel', a cyberpunk card battler inspired by Gwent, to visualize LLM alignment and parameter optimization. The game maps machine learning concepts like model pruning, DPO vs RLHF, and catastrophic forgetting into strategic card mechanics. It was designed to fit inside a Dev.to embed using asynchronous animation queues in vanilla JavaScript.

Have you ever wondered how AI engineers fine-tune and align large language models? Under the hood, they run Supervised Fine-Tuning SFT , optimize parameters using direct preference gradients DPO , filter out low-quality pre-training corpuses Pruning , and mitigate catastrophic drifts. To help you visualize how LLM alignment and parameter optimization work in a highly strategic way, I built a cyberpunk card battler inspired by Gwent: 🤖 Epoch Duel: Cyberpunk LLM Alignment Battle Play in Fullscreen Mode if the embed sizing is tight https://epoch-duel-90043718455.us-central1.run.app 🛠️ Tune Your Model Parameters Your mission as an alignment engineer is to play optimizer cards to outscore the adversarial baseline AI across 3 training Epochs: - ⚙️ Logic & Coding: Run SFT code snippets, compile theorem provers, and deploy Python scripts to build your coding benchmark scores. - 📖 Language & Speech: Train on multilingual datasets and summarization corpuses to maximize reading comprehension. - 🛡️ Safety & Alignment: Implement red-team safeguards, configure RLHF preference pairs, and run DPO tuning to protect your model's outputs. - ⚡ regularizers & Drifts: Deploy Regularization cards like Gradient Clipping Scorch and Model Pruning to destroy anomalies, or exploit Anomalous Drifts to collapse the AI's rows. 🧬 Playable ML Concepts Explained Here is how the card battle mechanics map to production machine learning pipelines: 1. ✂️ Model Pruning Weight Compression - In-Game: Playing the Model Pruning card triggers a glitchy dissolution animation that purges the lowest-value card from the targeted board row, cleaning up noise. 💾 The Real-World Counterpart Model Pruning removes unimportant weights often those closest to zero from a trained neural network. It shrinks the memory footprint of the model, allowing it to run faster on edge devices. ⚠️ How it affects LLMs By stripping out low-impact weights, pruning compresses models by 30-50% with minimal loss in benchmark accuracy, making deployment significantly cheaper. 2. 🔀 DPO vs RLHF Direct Optimization vs Reward Modeling - In-Game: - RLHF Preference Pair: Swaps the power value of one of your units with an opponent's unit, representing human correction. - DPO Tuning: Piles directly on your board, boosting the values of all units in its row. 🗜️ The Real-World Counterpart RLHF Reinforcement Learning from Human Feedback trains a separate Reward Model to evaluate outputs. DPO Direct Preference Optimization bypasses the reward model entirely, mathematically optimizing the policy directly from preference pairs. 🚀 How it affects LLMs DPO simplifies the post-training pipeline. It is computationally lightweight, more stable than PPO-based RLHF, and has become the industry standard for aligning models like Llama 3 and Mistral. 3. 📉 Catastrophic Forgetting Anomalous Drift - In-Game: Drifts like Catastrophic Forgetting collapse all cards in the Language row to a power rating of 1 , instantly erasing rounds of SFT progress. 🔋 The Real-World Counterpart Catastrophic Forgetting occurs when a neural network is fine-tuned on a new task, causing it to overwrite the weights that were storing information from its initial pre-training. ⚠️ How it affects LLMs If you fine-tune an LLM exclusively on medical datasets, it may lose its general coding abilities. Developers mitigate this by mixing a small percentage of general pre-training data back into the fine-tuning dataset. 🛠️ The Under-the-Hood Engineering Journey Building a Gwent-style tabletop card game that fits inside a Dev.to embed presented some unique web design challenges: 1. Asynchronous Animation Queues in Vanilla JS To make card destructions like Scorch or Pruning visual, we couldn't just delete the card object instantly. - The Solution: We trigger a CSS .prune-animation class a neon-pink glitchy disintegration , block turn progression using an isAnimating lock, and delay database modification by exactly 600ms to synchronize state with the screen: 2. Responsive Viewport-Height vh Scaling for 500x600 embeds Standard pixel dimensions cause the 6-row Gwent board to squish and overlap inside small embeds. - The Solution: We refactored all layouts, cards, and font sizes to use relative Viewport Height vh units. Tying sizes to the screen height guarantees that the card proportions remain perfect and fit without any clipping on any resolution: 💬 Let's Discuss: - What is your high score fine-tuning your candidate model? - Have you managed to bait the AI into passing early by playing a Spy card? - Which alignment strategy did you find more effective: SFT raw power stacking or anomaly regularization? Card game to teach players about LLMs Epoch Duel: Cyberpunk LLM Alignment Battle 🤖 An interactive cyberpunk TCG card battler built in vanilla HTML/CSS/JS. Players step into the role of an AI alignment engineer, fine-tuning their candidate models and aligning weights against adversarial baseline models across 3 training Epoch rounds. The game is designed to run standalone or scale fluidly inside a compact 500x600 Dev.to iframe embed. 🎮 Features - 🃏 Witcher 3 Gwent scoring interface: Circular neon row badges and large player/AI total score circles on the left, alongside pass indicator ribbons. - 📦 50 Unique ML-Themed Cards: Build coding capacity with SFT Code Snippets , deploy Red-Team Jailbreak spies to draw cards, double parameters using LoRA Adapters , or optimize weight adjustments using DPO Tuning and AdamW Optimizers . - 📉 Anomalous Drifts & Regularizers: Navigate drifts like Catastrophic Forgetting and Exploding Gradients which collapse rows to Power 1, or regularize with Gradient Clipping Scorch and Model Pruning … Disclaimer: AI was used throughout this project, it is just fitting that it would co-author with me, so special thanks to the Foundry for its tireless hours toiling away and Gemini for producing the cover image.