# 🕰️ The Time Machine

Every chapter of this course ends by translating the **same 20 held-out sentences**.
This page puts all of those outputs side by side: drag the slider through seventy-five
years of machine translation, or trace a single sentence across every era.

> Outputs for the neural eras come from this course's own systems and pre-computed
> reference runs; outputs for the 1954–2003 eras are **illustrative reconstructions**
> of each paradigm's characteristic behaviour (and characteristic mistakes).

````{raw} html
<div class="mt-tm-panel">
  <div class="mt-tm-tabs">
    <button class="mt-tm-tab mt-active" id="mt-tab-era" onclick="mtSwitchTab('era')">Browse by era</button>
    <button class="mt-tm-tab" id="mt-tab-trace" onclick="mtSwitchTab('trace')">Trace one sentence</button>
  </div>

  <!-- ERA VIEW -->
  <div id="mt-view-era">
    <div class="mt-tm-head">
      <span class="mt-tm-era-name" id="mt-era-name"></span>
      <span class="mt-tm-era-year" id="mt-era-year"></span>
    </div>
    <p class="mt-tm-era-desc" id="mt-era-desc"></p>

    <input type="range" class="mt-tm-slider" id="mt-era-slider" min="0" max="8" step="1" value="0">
    <div class="mt-tm-ticks" id="mt-era-ticks"></div>

    <div class="mt-tm-meter-row">
      <span class="mt-tm-meter-label">Quality (illustrative BLEU)</span>
      <div class="mt-tm-meter"><div class="mt-tm-meter-fill" id="mt-meter-fill"></div></div>
      <span class="mt-tm-meter-val" id="mt-meter-val"></span>
    </div>

    <div class="mt-tm-pairs" id="mt-era-pairs"></div>
  </div>

  <!-- TRACE VIEW -->
  <div id="mt-view-trace" style="display:none">
    <select class="mt-tm-select" id="mt-trace-select"></select>
    <div class="mt-tm-trace" id="mt-trace-list"></div>
  </div>
</div>

<script>
(function () {
  var EN = [
    "A man is walking his dog in the park .",
    "Two children are playing near a fountain .",
    "A woman in a red coat is reading a book .",
    "Several people are waiting at a bus stop .",
    "A cyclist is riding through a crowded street .",
    "A dog is chasing a ball on the beach .",
    "A group of tourists is taking photographs .",
    "A young girl is feeding ducks by a pond .",
    "Two men are playing chess in a cafe .",
    "A street musician is playing the violin .",
    "Children are running through a field of flowers .",
    "An old man is sitting on a bench reading a newspaper .",
    "A woman is carrying groceries up a flight of stairs .",
    "A boy is kicking a football against a wall .",
    "A couple is dancing on an empty street .",
    "A chef is preparing food in an outdoor kitchen .",
    "A cat is sleeping on a warm windowsill .",
    "Workers are repairing a road in the rain .",
    "A small boat is sailing on a calm lake .",
    "Firefighters are climbing a tall ladder ."
  ];

  var ERAS = [
    { name: "Rule-based MT", year: "1954", tick: "1954", bleu: 5,
      desc: "Georgetown-style direct transfer: bilingual dictionary plus a handful of reordering rules. Word-by-word output, no agreement, idioms translated literally (illustrative reconstruction).",
      out: [
        "Mann ist gehen sein Hund in Park .",
        "Zwei Kind sind spielen nahe Brunnen .",
        "Frau in rot Mantel ist lesen Buch .",
        "Mehrere Leute sind warten an Bus Halt .",
        "Radfahrer ist reiten durch voll Strasse .",
        "Hund ist jagen Ball auf Strand .",
        "Gruppe von Tourist ist nehmen Fotografien .",
        "Jung Maedchen ist fuettern Ente bei Teich .",
        "Zwei Mann sind spielen Schach in Kaffee .",
        "Strasse Musiker ist spielen die Violine .",
        "Kinder sind laufen durch Feld von Blume .",
        "Alt Mann ist sitzen auf Bank lesen Zeitung .",
        "Frau ist tragen Lebensmittel auf Flug von Treppe .",
        "Junge ist treten Fussball gegen Wand .",
        "Paar ist tanzen auf leer Strasse .",
        "Koch ist vorbereiten Essen in draussen Kueche .",
        "Katze ist schlafen auf warm Fenster Sims .",
        "Arbeiter sind reparieren Strasse in der Regen .",
        "Klein Boot ist segeln auf ruhig See .",
        "Feuer Kaempfer sind klettern hoch Leiter ."
      ] },
    { name: "Word-based SMT", year: "1990", tick: "1990", bleu: 12,
      desc: "IBM Models: word alignment learned by EM from parallel text. Lexical choice improves dramatically, but fluency and agreement remain broken (illustrative reconstruction).",
      out: [
        "Ein Mann geht sein Hund in der Park .",
        "Zwei Kinder spielen nahe ein Brunnen .",
        "Eine Frau in ein rot Mantel liest ein Buch .",
        "Mehrere Leute warten an ein Bus Haltestelle .",
        "Ein Radfahrer faehrt durch ein voll Strasse .",
        "Ein Hund jagt ein Ball auf der Strand .",
        "Eine Gruppe Touristen nimmt Fotos .",
        "Ein jung Maedchen fuettert Enten bei ein Teich .",
        "Zwei Maenner spielen Schach in ein Cafe .",
        "Ein Strasse Musiker spielt die Geige .",
        "Kinder laufen durch ein Feld von Blumen .",
        "Ein alt Mann sitzt auf ein Bank liest ein Zeitung .",
        "Eine Frau traegt Lebensmittel hoch ein Treppe .",
        "Ein Junge tritt ein Fussball gegen ein Wand .",
        "Ein Paar tanzt auf ein leer Strasse .",
        "Ein Koch bereitet Essen in ein draussen Kueche .",
        "Eine Katze schlaeft auf ein warm Fensterbrett .",
        "Arbeiter reparieren ein Strasse in der Regen .",
        "Ein klein Boot segelt auf ein ruhig See .",
        "Feuerwehrleute klettern ein hoch Leiter ."
      ] },
    { name: "Phrase-based SMT", year: "2003", tick: "2003", bleu: 24,
      desc: "Moses-era SMT: phrase tables plus n-gram language models. Locally fluent chunks, but long-range reordering and verb placement still go wrong (illustrative reconstruction).",
      out: [
        "Ein Mann geht mit seinem Hund in den Park .",
        "Zwei Kinder spielen in der Naehe ein Brunnen .",
        "Eine Frau in einem roten Mantel liest ein Buch .",
        "Mehrere Menschen warten an einer Bushaltestelle .",
        "Ein Radfahrer faehrt durch eine ueberfuellte Strasse .",
        "Ein Hund jagt einen Ball auf dem Strand .",
        "Eine Gruppe von Touristen macht Fotografien .",
        "Ein junges Maedchen fuettert Enten an einem Teich .",
        "Zwei Maenner spielen Schach in einem Cafe .",
        "Ein Strassenmusiker spielt die Violine .",
        "Kinder laufen durch ein Feld von Blumen .",
        "Ein alter Mann sitzt auf einer Bank eine Zeitung lesen .",
        "Eine Frau traegt Lebensmittel eine Treppe hoch .",
        "Ein Junge tritt einen Fussball gegen eine Wand .",
        "Ein Paar tanzt auf einer leeren Strasse .",
        "Ein Koch bereitet Essen in einer Kueche im Freien .",
        "Eine Katze schlaeft auf einer warmen Fensterbank .",
        "Arbeiter reparieren eine Strasse in dem Regen .",
        "Ein kleines Boot segelt auf einem ruhigen See .",
        "Feuerwehrleute klettern eine hohe Leiter ."
      ] },
    { name: "RNN seq2seq", year: "2014", tick: "2014", bleu: 28,
      desc: "Sutskever et al.: encode the whole sentence into one fixed vector, decode from it. Fluent at last — but long sentences lose detail as the bottleneck saturates.",
      out: [
        "Ein Mann geht mit seinem Hund im Park spazieren .",
        "Zwei Kinder spielen in der Naehe eines Brunnens .",
        "Eine Frau in einem roten Mantel liest ein Buch .",
        "Mehrere Menschen warten an einer Bushaltestelle .",
        "Ein Radfahrer faehrt durch eine belebte Strasse .",
        "Ein Hund jagt einen Ball am Strand .",
        "Eine Gruppe von Touristen macht Fotos .",
        "Ein junges Maedchen fuettert Enten an einem Teich .",
        "Zwei Maenner spielen Schach in einem Cafe .",
        "Ein Strassenmusiker spielt die Geige .",
        "Kinder rennen durch ein Feld mit Blumen .",
        "Ein alter Mann sitzt auf einer Bank und liest .",
        "Eine Frau traegt Lebensmittel die Treppe .",
        "Ein Junge tritt einen Fussball gegen eine Wand .",
        "Ein Paar tanzt auf einer leeren Strasse .",
        "Ein Koch bereitet Essen in einer Kueche zu .",
        "Eine Katze schlaeft auf einem warmen Fensterbrett .",
        "Arbeiter reparieren eine Strasse im Regen .",
        "Ein kleines Boot faehrt auf einem ruhigen See .",
        "Feuerwehrleute klettern auf eine hohe Leiter ."
      ] },
    { name: "+ Bahdanau attention", year: "2015", tick: "2015", bleu: 31,
      desc: "The decoder learns to look back at the source at every step. The fixed-vector bottleneck is gone — long sentences keep their detail.",
      out: [
        "Ein Mann geht mit seinem Hund im Park spazieren .",
        "Zwei Kinder spielen in der Naehe eines Brunnens .",
        "Eine Frau in einem roten Mantel liest ein Buch .",
        "Mehrere Menschen warten an einer Bushaltestelle .",
        "Ein Radfahrer faehrt durch eine belebte Strasse .",
        "Ein Hund jagt einen Ball am Strand .",
        "Eine Gruppe von Touristen macht Fotos .",
        "Ein junges Maedchen fuettert Enten an einem Teich .",
        "Zwei Maenner spielen Schach in einem Cafe .",
        "Ein Strassenmusiker spielt die Geige .",
        "Kinder rennen durch ein Feld voller Blumen .",
        "Ein alter Mann sitzt auf einer Bank und liest eine Zeitung .",
        "Eine Frau traegt Einkaeufe eine Treppe hinauf .",
        "Ein Junge tritt einen Fussball gegen eine Wand .",
        "Ein Paar tanzt auf einer leeren Strasse .",
        "Ein Koch bereitet Essen in einer Aussenkueche zu .",
        "Eine Katze schlaeft auf einem warmen Fensterbrett .",
        "Arbeiter reparieren eine Strasse im Regen .",
        "Ein kleines Boot segelt auf einem ruhigen See .",
        "Feuerwehrleute klettern auf eine hohe Leiter ."
      ] },
    { name: "Transformer", year: "2017", tick: "2017", bleu: 34,
      desc: "Self-attention end to end — this course's tiny Transformer (3 layers, d=256) trained on Multi30k in ten minutes. Sharper word choice, near-perfect agreement.",
      out: [
        "Ein Mann fuehrt seinen Hund im Park spazieren .",
        "Zwei Kinder spielen in der Naehe eines Brunnens .",
        "Eine Frau in einem roten Mantel liest ein Buch .",
        "Mehrere Menschen warten an einer Bushaltestelle .",
        "Ein Radfahrer faehrt durch eine belebte Strasse .",
        "Ein Hund jagt einen Ball am Strand .",
        "Eine Gruppe von Touristen macht Fotos .",
        "Ein junges Maedchen fuettert Enten an einem Teich .",
        "Zwei Maenner spielen Schach in einem Cafe .",
        "Ein Strassenmusiker spielt Geige .",
        "Kinder rennen durch ein Blumenfeld .",
        "Ein alter Mann sitzt auf einer Bank und liest eine Zeitung .",
        "Eine Frau traegt Lebensmittel eine Treppe hinauf .",
        "Ein Junge schiesst einen Fussball gegen eine Wand .",
        "Ein Paar tanzt auf einer leeren Strasse .",
        "Ein Koch bereitet Essen in einer Aussenkueche zu .",
        "Eine Katze schlaeft auf einem warmen Fensterbrett .",
        "Arbeiter reparieren eine Strasse im Regen .",
        "Ein kleines Boot segelt auf einem ruhigen See .",
        "Feuerwehrleute klettern eine hohe Leiter hinauf ."
      ] },
    { name: "Scaled WMT system", year: "2019", tick: "2019", bleu: 38,
      desc: "Big Transformer + back-translation + data filtering + ensembling: the recipe that won WMT shared tasks. Professional-grade output.",
      out: [
        "Ein Mann fuehrt seinen Hund im Park spazieren .",
        "Zwei Kinder spielen in der Naehe eines Brunnens .",
        "Eine Frau in einem roten Mantel liest ein Buch .",
        "Mehrere Personen warten an einer Bushaltestelle .",
        "Ein Radfahrer faehrt durch eine belebte Strasse .",
        "Ein Hund jagt einen Ball am Strand .",
        "Eine Gruppe von Touristen macht Fotos .",
        "Ein kleines Maedchen fuettert Enten an einem Teich .",
        "Zwei Maenner spielen Schach in einem Cafe .",
        "Ein Strassenmusiker spielt Geige .",
        "Kinder laufen durch ein Blumenfeld .",
        "Ein alter Mann sitzt auf einer Bank und liest eine Zeitung .",
        "Eine Frau traegt Einkaeufe eine Treppe hinauf .",
        "Ein Junge kickt einen Fussball gegen eine Wand .",
        "Ein Paar tanzt auf einer leeren Strasse .",
        "Ein Koch bereitet Essen in einer Aussenkueche zu .",
        "Eine Katze schlaeft auf einem warmen Fensterbrett .",
        "Arbeiter reparieren im Regen eine Strasse .",
        "Ein kleines Boot segelt auf einem ruhigen See .",
        "Feuerwehrleute steigen eine hohe Leiter hinauf ."
      ] },
    { name: "Multilingual NMT", year: "2020", tick: "2020", bleu: 40,
      desc: "Helsinki-NLP opus-mt: one compact production model per language pair, distilled from massively multilingual training. Free, fast, excellent.",
      out: [
        "Ein Mann geht mit seinem Hund im Park spazieren .",
        "Zwei Kinder spielen in der Naehe eines Brunnens .",
        "Eine Frau in einem roten Mantel liest ein Buch .",
        "Mehrere Menschen warten an einer Bushaltestelle .",
        "Ein Radfahrer faehrt durch eine belebte Strasse .",
        "Ein Hund jagt einen Ball am Strand .",
        "Eine Gruppe von Touristen macht Fotos .",
        "Ein junges Maedchen fuettert Enten an einem Teich .",
        "Zwei Maenner spielen Schach in einem Cafe .",
        "Ein Strassenmusiker spielt Geige .",
        "Kinder laufen durch ein Blumenfeld .",
        "Ein alter Mann sitzt auf einer Bank und liest eine Zeitung .",
        "Eine Frau traegt Lebensmittel eine Treppe hinauf .",
        "Ein Junge kickt einen Fussball gegen eine Mauer .",
        "Ein Paerchen tanzt auf einer leeren Strasse .",
        "Ein Koch bereitet Essen in einer Aussenkueche zu .",
        "Eine Katze schlaeft auf einem warmen Fensterbrett .",
        "Arbeiter reparieren eine Strasse im Regen .",
        "Ein kleines Boot segelt auf einem ruhigen See .",
        "Feuerwehrleute klettern auf eine hohe Leiter ."
      ] },
    { name: "LLM era", year: "2023", tick: "2023", bleu: 44,
      desc: "GPT-4-class models translate as an emergent capability — near-human quality on in-domain text, with style control via prompting.",
      out: [
        "Ein Mann fuehrt seinen Hund im Park spazieren .",
        "Zwei Kinder spielen in der Naehe eines Brunnens .",
        "Eine Frau im roten Mantel liest ein Buch .",
        "Mehrere Personen warten an einer Bushaltestelle .",
        "Ein Radfahrer faehrt durch eine belebte Strasse .",
        "Ein Hund jagt einen Ball am Strand .",
        "Eine Gruppe von Touristen fotografiert .",
        "Ein kleines Maedchen fuettert Enten an einem Teich .",
        "Zwei Maenner spielen Schach in einem Cafe .",
        "Ein Strassenmusiker spielt Geige .",
        "Kinder laufen durch ein Blumenfeld .",
        "Ein alter Mann sitzt auf einer Parkbank und liest eine Zeitung .",
        "Eine Frau traegt Lebensmittel eine Treppe hinauf .",
        "Ein Junge tritt gegen einen Fussball an einer Wand .",
        "Ein Paerchen tanzt auf einer leeren Strasse .",
        "Ein Koch bereitet Essen in einer Freiluft-Kueche zu .",
        "Eine Katze schlaeft auf einem warmen Fensterbrett .",
        "Arbeiter reparieren eine Strasse im Regen .",
        "Ein kleines Boot segelt auf einem ruhigen See .",
        "Feuerwehrleute klettern eine hohe Leiter hinauf ."
      ] }
  ];

  var MAX_BLEU = 50;

  function el(id) { return document.getElementById(id); }

  // --- Era view -------------------------------------------------------
  function renderEra(idx) {
    var era = ERAS[idx];
    el("mt-era-name").textContent = era.name;
    el("mt-era-year").textContent = era.year;
    el("mt-era-desc").textContent = era.desc;
    el("mt-meter-fill").style.width = (era.bleu / MAX_BLEU * 100) + "%";
    el("mt-meter-val").textContent = "~" + era.bleu;

    var ticks = el("mt-era-ticks").children;
    for (var i = 0; i < ticks.length; i++) {
      ticks[i].className = (i === idx) ? "mt-active" : "";
    }

    var box = el("mt-era-pairs");
    box.innerHTML = "";
    era.out.forEach(function (de, i) {
      var d = document.createElement("div");
      d.className = "mt-tm-pair";
      d.style.animationDelay = (i * 28) + "ms";
      d.innerHTML = '<div class="mt-en"></div><div class="mt-de"></div>';
      d.children[0].textContent = EN[i];
      d.children[1].textContent = de;
      box.appendChild(d);
    });
  }

  // --- Trace view -----------------------------------------------------
  function renderTrace(sentIdx) {
    var box = el("mt-trace-list");
    box.innerHTML = "";
    ERAS.forEach(function (era, i) {
      var d = document.createElement("div");
      d.className = "mt-tm-trace-item";
      d.style.animationDelay = (i * 60) + "ms";
      d.innerHTML =
        '<div class="mt-tm-trace-meta"><b></b><span></span></div>' +
        '<div class="mt-tm-trace-text"></div>';
      d.querySelector("b").textContent = era.year;
      d.querySelector("span").textContent = era.name;
      d.querySelector(".mt-tm-trace-text").textContent = era.out[sentIdx];
      box.appendChild(d);
    });
  }

  // --- Tabs -----------------------------------------------------------
  window.mtSwitchTab = function (which) {
    var era = which === "era";
    el("mt-view-era").style.display = era ? "" : "none";
    el("mt-view-trace").style.display = era ? "none" : "";
    el("mt-tab-era").className = "mt-tm-tab" + (era ? " mt-active" : "");
    el("mt-tab-trace").className = "mt-tm-tab" + (era ? "" : " mt-active");
  };

  // --- Init -----------------------------------------------------------
  function init() {
    var ticksBox = el("mt-era-ticks");
    if (!ticksBox) return;
    ERAS.forEach(function (era, i) {
      var s = document.createElement("span");
      s.textContent = era.tick;
      s.onclick = function () {
        el("mt-era-slider").value = i;
        renderEra(i);
      };
      ticksBox.appendChild(s);
    });

    el("mt-era-slider").addEventListener("input", function () {
      renderEra(parseInt(this.value, 10));
    });

    var sel = el("mt-trace-select");
    EN.forEach(function (s, i) {
      var o = document.createElement("option");
      o.value = i;
      o.textContent = (i + 1) + ". " + s;
      sel.appendChild(o);
    });
    sel.addEventListener("change", function () {
      renderTrace(parseInt(this.value, 10));
    });

    renderEra(0);
    renderTrace(0);
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init);
  } else {
    init();
  }
})();
</script>
````