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:

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:

function triggerPruning() {
    isAnimating = true;

    // Find lowest card on the board
    const targets = getLowestPowerCards();
    targets.forEach(card => {
        const el = document.getElementById(`card-${card.uniqueId}`);
        if (el) el.classList.add("prune-animation");
    });

    setTimeout(() => {
        // Splice from database
        removeCardsFromBoard(targets);
        isAnimating = false;
        render();
        endTurn();
    }, 600);
}

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:

.card-item {
    width: 11vh;
    height: 15vh;
    border-radius: 0.8vh;
    padding: 0.8vh;
}

.board-row .card-item {
    width: 6.2vh;
    height: 8.5vh;
}

.board-row {
    min-height: 9.5vh;
}

---

💬 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?

UnitBuilds-CC / EPOCH-DUEL

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…

View on GitHub

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.