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.
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.
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 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-animationclass (a neon-pink glitchy disintegration), block turn progression using anisAnimatinglock, 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…
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.
Top comments (11)
You have got to stop making these or I am going to run out of ways to say "this is cool."🤣 Is a fighting game version next?
Oh that sounds cool! Maybe...
Imo, this 1 needed more work, but I was getting tired, cuz I also prepped a proposal for a newspaper company, with hopes to get a SLA to overhaul their system 🤞It has an AI-generated Crossword, vector word search (both generated based on the news of the day) and sudoku. Proxied ads, so they can actually make money off site-readers. Jpeg to webp conversion pipeline (yeah... They were uploading full fat jpeg), a writer's assistant that audits their piece and gives feedback (local LLM driven), an ad-planner that lets them grid-arrange their articles and auto-fit, so they dont need publisher any wordpress anymore separately, it's write once and it's formatted for print and display. Remote IT support. ROI calculator, where they can adjust to their own web-stats to see just how much I can save them each month. The actual SLA, along with a proposal list so there's a clear scope of what's in the job description and what isnt, set rate and projects that I can do for them for a fixed price given. Also added a section where I put the games I post here, so they can also have a look at those? They can always pay me to make the daily/weekly games for their site too?
No wonder you were getting tired — that's not a proposal, that's a whole product roadmap. The "write once, formatted for print and display" alone is a solid value prop, especially for a newspaper that's likely got two completely separate pipelines today.
The ROI calculator is the underrated part though. Biggest mistake freelancers make is selling features instead of savings. Letting them plug in their own numbers shifts the conversation from "do we need this?" to "how much do we save?" — that's the kind of sales engineering most SLAs skip.
Also, including the games as a teaser? Smart upsell framing disguised as a portfolio reference 😄
Hope they bite. When's the pitch meeting?
Well, it was a job posting I saw, but they wanted someone to basically be a jack of all trades. Fixing printers to maintaining security, upgrading site to dockerizing the platform. So essentially right up my alley 😂 except I dont want to move. So the proposal is more to convince them to sign for me as remote. given I can rdp in faster than their techs can walk down the hall and it doesnt interrupt my workflow on the software side.
I'm still ironing out a few bugs, hopefully it'll be done by today, so I can hunt down the managing director and email him directly for it. So he can see just how much their wasting without even noticing it.
Idk, with the games, I thought it was a cool idea given I anyway write them for here, it'll let them educate people on AI, in an interactive way. Honestly the crossword + sudoku + Vector word search, combined with the ad proxy are the focal piece... It takes you 15 min to complete the game, but in doing so, they get 15 min of ad view time. Newspapers here are bleeding as is, that might actually help them make some money back...
Oh, it also has AI generated summaries of articles and TTS for the summary and article for people who dont want to read.
With the pipeline, yeah that's the case, cuz they're using wordpress. So you upload via wordpress, then you still need to use adobe publisher to prep it for print... So very expensive subscription + double the work. Instead of click 1 button and all today's articles are fit nicely and you can just drag and drop where you want them if you want to change it. sounds like something that can save them ALOT of time.
Wait wait, you saw a job posting and turned it into an SLA pitch instead? 😂 That's the ultimate reverse card. MD's gonna open that email, see the ROI calc, and at least sit down for a chat.
Also pretty sure the real reason you don't wanna move is the office building has no KFC downstairs 😂😂
😂 Surprisingly, it might... Real problem is, the job is in-land, I'm on the coast buying a house here (fingers crossed it works, waiting for bank approval). It's africa, I dont wanna sit inland in an office building all day, I'd rather sit here and work from home-office. Also over past 6 years of doing IT support and software dev at the same time, I've noticed that 99% of cases you can actually do the job fully remotely and it's better than hopping desk to desk.
A home office with an ocean view, flowers blooming by the sea — now that's living. Genuinely jealous 😂 You better share some sea-view pics when you're settled in, would love to see that setup.
Not that glamorous, but the weather is nicer than inland 😅
I actually lost my first few games because I ignored the regularizer cards. Once I started using them better, things went a lot smooth.. @geometry arrow