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)
#
🛠️ 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:
- ✂️ 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.
- 🔀 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.
- 📉 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:
- 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:
- 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
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.