---
title: "Batch Size Balancer"
subtitle: "Push throughput to the edge of OOM."
description: "A browser mini-game from MLSysBook Playground. Dynamically adjust batch size to process images quickly, without bursting your GPU memory."
page-layout: article
format:
  html:
    include-in-header:
      - text: |
          <link rel="stylesheet" href="/assets/games/common.css">
          <script type="module">
            import "../assets/games/runtime.mjs";
            import "../assets/games/batch.mjs";
          </script>
---

```{=html}
<div class="mlsp-game-container" role="region" aria-label="Batch Size Balancer mini-game">
  <canvas id="mlsp-canvas" class="mlsp-game-canvas" width="680" height="460"></canvas>
  <div class="mlsp-game-hud">
    <span class="mlsp-score">batch <span id="mlsp-batch">1</span> · score <span id="mlsp-score">0</span></span>
    <span>↑ / ↓ adjust batch size · keep memory under 100% · <kbd>R</kbd> retry</span>
    <button type="button" class="mlsp-fullscreen-btn" onclick="this.closest('.mlsp-game-container').requestFullscreen()" title="Full Screen" aria-label="Full Screen">⛶</button>
  </div>
</div>

<div id="mlsp-aha-slot"></div>

<script>
(function bootBatch(){
  function tryBoot() {
    if (!window.MLSP || !MLSP.games || !MLSP.games.batch) return setTimeout(tryBoot, 30);
    var canvas = document.getElementById("mlsp-canvas");
    var $score = document.getElementById("mlsp-score");
    var ahaSlot = document.getElementById("mlsp-aha-slot");
    var pendingResult = null;
    var resolvedApi = null;

    Promise.resolve(MLSP.games.batch(canvas, {
      onScoreChange: function(s) { $score.textContent = s.score; },
      onGameOver: function(result) {
        if (resolvedApi) attachAha(resolvedApi, result);
        else pendingResult = result;
      },
      onRetry: function() { window.location.reload(); }
    })).then(function(api) {
      resolvedApi = api;
      if (pendingResult) attachAha(api, pendingResult);
    });

    function attachAha(api, result) {
      MLSP.showAhaCard(ahaSlot, api.ahaLabel, api.ahaText, api.ahaLink);
    }
  }
  tryBoot();
})();
</script>
```

## How to play
Increase batch size to raise throughput, but watch the memory meter. Larger batches process the queue faster; if queue pressure plus batch memory exceeds 100%, the run OOMs immediately and your score stops there. Find the largest safe batch size as demand changes.

## The Systems Concept
Spikes in activation memory are the penalty. Larger batches improve hardware utilization, but they also reserve more memory per step. The optimal batch size is not simply “as large as possible”; it is the largest batch that keeps throughput high without crossing the memory limit.

---

*Part of [MLSysBook Playground](/games/). Found a bug? [Report an issue](https://github.com/harvard-edge/cs249r_book/issues/new?labels=bug&title=Bug+in+Game).*