From a9022a0e13bcd97b59fd73f79f9cd3b704ba9672 Mon Sep 17 00:00:00 2001
From: Abanum Chuks <oilmonegov@gmail.com>
Date: Sun, 16 Nov 2025 05:02:29 +0100
Subject: [PATCH 1/4] Update index.html to change language from German to
 English and modify instructional text for clarity and accessibility.

---
 index.html | 103 ++++++++++++++++++++++++++---------------------------
 1 file changed, 50 insertions(+), 53 deletions(-)
diff --git a/index.html b/index.html
index 48c0555..6ee1a8f 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="de">
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>MNIST MLP – Visualisierung der Inferenz</title>
+    <title>MNIST MLP – Inference Visualization</title>
   <script type="module" crossorigin src="./assets/main.js"></script>
   <link rel="stylesheet" crossorigin href="./assets/main.css">
 </head>
@@ -33,8 +33,8 @@
     <div id="instructionsOverlay" class="instructions-overlay">
         <div class="instructions-container">
             <div class="instructions-content">
-                <p><strong>Zeichnen:</strong> Auf dem Raster klicken und ziehen (Rechtsklick zum Löschen)</p>
-                <p><strong>3D-Steuerung:</strong> • Linke Taste + ziehen = drehen • Rechte Taste + ziehen = verschieben • Scrollrad = zoomen</p>
+                <p><strong>Drawing:</strong> Click and drag on the grid (right-click to erase)</p>
+                <p><strong>3D Controls:</strong> • Left button + drag = rotate • Right button + drag = pan • Scroll wheel = zoom</p>
             </div>
         </div>
     </div>
@@ -42,12 +42,12 @@
     <!-- Mobile Instructions Overlay -->
     <div id="mobileInstructionsOverlay" class="mobile-instructions-overlay">
         <div class="mobile-instructions-content">
-            <div class="mobile-instructions-title">Touch-Steuerung</div>
+            <div class="mobile-instructions-title">Touch Controls</div>
             <ul class="mobile-gesture-list">
-                <li><strong>Zeichnen:</strong> Tippen und auf dem Raster ziehen</li>
-                <li><strong>Drehen:</strong> Mit einem Finger ziehen</li>
-                <li><strong>Verschieben:</strong> Mit zwei Fingern bewegen</li>
-                <li><strong>Zoomen:</strong> Finger zusammenziehen oder spreizen</li>
+                <li><strong>Drawing:</strong> Tap and drag on the grid</li>
+                <li><strong>Rotate:</strong> Drag with one finger</li>
+                <li><strong>Pan:</strong> Move with two fingers</li>
+                <li><strong>Zoom:</strong> Pinch or spread fingers</li>
             </ul>
         </div>
     </div>
@@ -84,7 +84,7 @@
     <div id="timelineOverlay" class="timeline-overlay hidden">
         <div class="timeline-container">
             <div class="timeline-header">
-                <span class="timeline-title">Trainingsverlauf</span>
+                <span class="timeline-title">Training Progress</span>
                 <span id="timelineSummary" class="timeline-summary"></span>
             </div>
             <input
@@ -95,7 +95,7 @@
                 value="0"
                 step="1"
                 disabled
-                aria-label="Trainingsfortschritt"
+                aria-label="Training Progress"
             >
             <div class="timeline-meta">
                 <span id="timelineLabel" class="timeline-label"></span>
@@ -117,56 +117,56 @@
     <div id="infoModal" class="info-modal">
         <div class="info-modal-content">
             <div class="info-modal-header">
-                <h3>MNIST-Ziffernklassifikation – Visualisierung der Inferenz</h3>
+                <h3>MNIST Digit Classification – Inference Visualization</h3>
                 <button id="closeInfoModal" class="close-modal-btn">×</button>
             </div>
             <div class="info-modal-body">
-                <p><strong>Interaktive Visualisierung eines neuronalen Netzes</strong></p>
-                <p>Diese Anwendung zeigt ein kompaktes Multi-Layer-Perceptron (MLP), das auf MNIST trainiert wurde. Zeichnen Sie eine Ziffer und beobachten Sie, wie die Aktivierungen in Echtzeit durch alle vollvernetzten Schichten propagieren.</p>
+                <p><strong>Interactive Neural Network Visualization</strong></p>
+                <p>This application shows a compact Multi-Layer Perceptron (MLP) trained on MNIST. Draw a digit and observe how activations propagate in real-time through all fully connected layers.</p>
                 
-                <h4>So funktioniert es:</h4>
+                <h4>How it works:</h4>
                 <ul>
-                    <li><strong>Zeichnen:</strong> Im 2D-Raster (links oben) klicken und ziehen, um eine Ziffer zu skizzieren</li>
-                    <li><strong>Beobachten:</strong> Verfolgen Sie, wie Ihre Skizze durch die Schichten des Netzes im 3D-Raum wandert</li>
-                    <li><strong>Vorhersage:</strong> Prüfen Sie die Wahrscheinlichkeit für jede Ziffer (0–9) im Diagramm (rechts oben)</li>
+                    <li><strong>Drawing:</strong> Click and drag in the 2D grid (top left) to sketch a digit</li>
+                    <li><strong>Observing:</strong> Track how your sketch travels through the network layers in 3D space</li>
+                    <li><strong>Prediction:</strong> Check the probability for each digit (0–9) in the chart (top right)</li>
                 </ul>
 
-                <h4>Netzarchitektur (Standardexport):</h4>
+                <h4>Network Architecture (Default Export):</h4>
                 <ul>
-                    <li><strong>Eingabeschicht:</strong> 28×28 Pixelraster (Ihre Zeichnung)</li>
-                    <li><strong>Dichtes Layer 1:</strong> 784 → 64 Neuronen mit ReLU</li>
-                    <li><strong>Dichtes Layer 2:</strong> 64 → 32 Neuronen mit ReLU</li>
-                    <li><strong>Ausgabeschicht:</strong> 32 → 10 Logits → Softmax-Wahrscheinlichkeiten</li>
+                    <li><strong>Input Layer:</strong> 28×28 pixel grid (your drawing)</li>
+                    <li><strong>Dense Layer 1:</strong> 784 → 64 neurons with ReLU</li>
+                    <li><strong>Dense Layer 2:</strong> 64 → 32 neurons with ReLU</li>
+                    <li><strong>Output Layer:</strong> 32 → 10 logits → Softmax probabilities</li>
                 </ul>
 
-                <h4>3D-Steuerung:</h4>
+                <h4>3D Controls:</h4>
                 <ul>
-                    <li><strong>Drehen:</strong> Linke Maustaste gedrückt halten und ziehen</li>
-                    <li><strong>Verschieben:</strong> Rechte Maustaste gedrückt halten und ziehen</li>
-                    <li><strong>Zoomen:</strong> Mausrad benutzen</li>
+                    <li><strong>Rotate:</strong> Hold left mouse button and drag</li>
+                    <li><strong>Pan:</strong> Hold right mouse button and drag</li>
+                    <li><strong>Zoom:</strong> Use mouse wheel</li>
                 </ul>
 
-                <h4>Farbkodierung:</h4>
+                <h4>Color Coding:</h4>
                 <ul>
-                    <li><strong>Knoten:</strong> Die Farbe zeigt die Aktivierungsstärke (dunkle Blautöne für niedrige/negative Werte, kräftige Korallenfarben für starke positive Aktivierungen)</li>
-                    <li><strong>Verbindungen:</strong> Warme Farben kennzeichnen starke positive Beiträge, kühle Töne negative Einflüsse, gedämpfte Linien nahezu Null.</li>
+                    <li><strong>Nodes:</strong> The color shows activation strength (dark blue tones for low/negative values, vibrant coral colors for strong positive activations)</li>
+                    <li><strong>Connections:</strong> Warm colors indicate strong positive contributions, cool tones negative influences, muted lines near zero.</li>
                 </ul>
 
-                <h4>Eigenes Modell trainieren:</h4>
+                <h4>Training Your Own Model:</h4>
                 <ul>
-                    <li><code>python training/mlp_train.py</code> starten, um das MLP zu trainieren (inkl. Apple-Metal-Beschleunigung, falls verfügbar).</li>
-                    <li>Das Skript schreibt <code>exports/mlp_weights.json</code>, das der Visualisierer beim Laden einliest.</li>
-                    <li>Anzahl versteckter Neuronen, Epochen oder Exportpfade über die in <code>training/mlp_train.py</code> dokumentierten CLI-Optionen verändern.</li>
+                    <li>Run <code>python training/mlp_train.py</code> to train the MLP (including Apple Metal acceleration, if available).</li>
+                    <li>The script writes <code>exports/mlp_weights.json</code>, which the visualizer reads on load.</li>
+                    <li>Change the number of hidden neurons, epochs, or export paths via the CLI options documented in <code>training/mlp_train.py</code>.</li>
                 </ul>
 
-                <h4>Echtzeitfunktionen:</h4>
+                <h4>Real-time Features:</h4>
                 <ul>
-                    <li><strong>Schichtaktivierungen:</strong> Instanzen von Kugeln zeigen Aktivierungen pro Neuron mit farbcodierter Stärke.</li>
-                    <li><strong>Wichtige Verbindungen:</strong> Jedes Zielneuron hebt seine stärksten Eingangsgewichte für bessere Lesbarkeit hervor.</li>
-                    <li><strong>Live-Wahrscheinlichkeiten:</strong> Das Balkendiagramm aktualisiert die Logits → Softmax-Werte in Echtzeit.</li>
+                    <li><strong>Layer Activations:</strong> Sphere instances show activations per neuron with color-coded strength.</li>
+                    <li><strong>Important Connections:</strong> Each target neuron highlights its strongest input weights for better readability.</li>
+                    <li><strong>Live Probabilities:</strong> The bar chart updates logits → Softmax values in real-time.</li>
                 </ul>
 
-                <p>Das Netzwerk ist bewusst kompakt gehalten, um eine flüssige Echtzeitdarstellung zu gewährleisten. Sie können gern mit anderen Schichtgrößen neu trainieren – halten Sie die Architektur nur schlank, damit die 3D-Ansicht reaktionsschnell bleibt.</p>
+                <p>The network is intentionally kept compact to ensure smooth real-time rendering. Feel free to retrain with different layer sizes – just keep the architecture lean so the 3D view remains responsive.</p>
             </div>
         </div>
     </div>
@@ -175,13 +175,13 @@ <h4>Echtzeitfunktionen:</h4>
     <div id="advancedSettingsModal" class="advanced-modal" role="dialog" aria-modal="true" aria-labelledby="advancedSettingsTitle">
         <div class="advanced-modal-content">
             <div class="advanced-modal-header">
-                <h3 id="advancedSettingsTitle">Erweiterte Einstellungen</h3>
+                <h3 id="advancedSettingsTitle">Advanced Settings</h3>
                 <button id="closeAdvancedSettings" class="close-modal-btn" type="button">×</button>
             </div>
             <div class="advanced-modal-body">
                 <div class="advanced-control">
                     <label for="connectionLimitSlider" class="advanced-label">
-                        Maximale Verbindungen pro Neuron
+                        Maximum Connections per Neuron
                     </label>
                     <div class="advanced-slider">
                         <input
@@ -195,12 +195,12 @@ <h3 id="advancedSettingsTitle">Erweiterte Einstellungen</h3>
                         <span id="connectionLimitValue" class="advanced-value">24</span>
                     </div>
                     <p class="advanced-hint">
-                        Steuert wie viele der stärksten eingehenden Gewichte pro Zielneuron gleichzeitig dargestellt werden; hohe Werte können die Darstellung verlangsamen.
+                        Controls how many of the strongest incoming weights per target neuron are displayed simultaneously; high values may slow down rendering.
                     </p>
                 </div>
                 <div class="advanced-control">
                     <label for="connectionThresholdSlider" class="advanced-label">
-                        Schwache Verbindungen ausblenden
+                        Hide Weak Connections
                     </label>
                     <div class="advanced-slider">
                         <input
@@ -214,12 +214,12 @@ <h3 id="advancedSettingsTitle">Erweiterte Einstellungen</h3>
                         <span id="connectionThresholdValue" class="advanced-value">0.0000</span>
                     </div>
                     <p class="advanced-hint">
-                        Blendet Verbindungen mit geringer absoluter Gewichtung aus; 0 zeigt alle Verbindungen.
+                        Hides connections with low absolute weight; 0 shows all connections.
                     </p>
                 </div>
                 <div class="advanced-control">
                     <label for="connectionThicknessSlider" class="advanced-label">
-                        Verbindungsdicke
+                        Connection Thickness
                     </label>
                     <div class="advanced-slider">
                         <input
@@ -232,12 +232,12 @@ <h3 id="advancedSettingsTitle">Erweiterte Einstellungen</h3>
                         <span id="connectionThicknessValue" class="advanced-value"></span>
                     </div>
                     <p class="advanced-hint">
-                        Passt den Radius der Verbindungszylinder an; höhere Werte machen alle Linien sichtbar dicker.
+                        Adjusts the radius of connection cylinders; higher values make all lines visibly thicker.
                     </p>
                 </div>
                 <div class="advanced-control">
                     <label for="brushThicknessSlider" class="advanced-label">
-                        Strichstärke
+                        Brush Thickness
                     </label>
                     <div class="advanced-slider">
                         <input
@@ -251,12 +251,12 @@ <h3 id="advancedSettingsTitle">Erweiterte Einstellungen</h3>
                         <span id="brushThicknessValue" class="advanced-value">1.4</span>
                     </div>
                     <p class="advanced-hint">
-                        Kleinere Werte erzeugen feinere Linien; größere Werte füllen das Raster schneller aus.
+                        Smaller values create finer lines; larger values fill the grid faster.
                     </p>
                 </div>
                 <div class="advanced-control">
                     <label for="brushStrengthSlider" class="advanced-label">
-                        Strichintensität
+                        Brush Strength
                     </label>
                     <div class="advanced-slider">
                         <input
@@ -270,7 +270,7 @@ <h3 id="advancedSettingsTitle">Erweiterte Einstellungen</h3>
                         <span id="brushStrengthValue" class="advanced-value">95%</span>
                     </div>
                     <p class="advanced-hint">
-                        Bestimmt, wie stark ein Pinselstrich die Pixelhelligkeit erhöht.
+                        Determines how much a brush stroke increases pixel brightness.
                     </p>
                 </div>
             </div>
@@ -279,9 +279,6 @@ <h3 id="advancedSettingsTitle">Erweiterte Einstellungen</h3>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://unpkg.com/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
-    
-
-
 
     <!-- 100% privacy-first analytics -->
     <script data-collect-dnt="true" async src="https://scripts.simpleanalyticscdn.com/latest.js"></script>

From d1d1b5da7b6e29be0306e361ff263a0134e56c3e Mon Sep 17 00:00:00 2001
From: Abanum Chuks <oilmonegov@gmail.com>
Date: Sun, 16 Nov 2025 05:12:18 +0100
Subject: [PATCH 2/4] Refactor error messages and UI text from German to
 English for consistency and accessibility.

---
 assets/main.js | 134 ++++++++++++++++++++++++-------------------------
 1 file changed, 67 insertions(+), 67 deletions(-)

diff --git a/assets/main.js b/assets/main.js
index 587bf86..798eb50 100644
--- a/assets/main.js
+++ b/assets/main.js
@@ -23,7 +23,7 @@ const MNIST_SAMPLE_MANIFEST_URL = "./assets/data/mnist-test-manifest.json";
 document.addEventListener("DOMContentLoaded", () => {
   initializeVisualizer().catch((error) => {
     console.error(error);
-    renderErrorMessage("Visualisierung konnte nicht initialisiert werden. Details finden Sie in der Konsole.");
+    renderErrorMessage("Visualization could not be initialized. See console for details.");
   });
 });
 
@@ -31,7 +31,7 @@ async function loadMnistTestSamples(manifestPath = MNIST_SAMPLE_MANIFEST_URL) {
   const manifestUrl = new URL(manifestPath, window.location.href);
   const manifestResponse = await fetch(manifestUrl.toString());
   if (!manifestResponse.ok) {
-    throw new Error(`Konnte MNIST-Manifest nicht laden (${manifestResponse.status}).`);
+    throw new Error(`Could not load MNIST manifest (${manifestResponse.status}).`);
   }
   const manifest = await manifestResponse.json();
   const rows = Number(manifest?.imageShape?.[0]) || 28;
@@ -41,19 +41,19 @@ async function loadMnistTestSamples(manifestPath = MNIST_SAMPLE_MANIFEST_URL) {
   const imageFile = manifest?.image?.file;
   const labelFile = manifest?.labels?.file;
   if (!imageFile || !labelFile) {
-    throw new Error("Manifest enthält keine gültigen Dateipfade für Bilder oder Labels.");
+    throw new Error("Manifest does not contain valid file paths for images or labels.");
   }
 
   const [imageBuffer, labelBuffer] = await Promise.all([
     fetch(new URL(imageFile, manifestUrl).toString()).then((response) => {
       if (!response.ok) {
-        throw new Error(`Konnte MNIST-Bilddaten nicht laden (${response.status}).`);
+        throw new Error(`Could not load MNIST image data (${response.status}).`);
       }
       return response.arrayBuffer();
     }),
     fetch(new URL(labelFile, manifestUrl).toString()).then((response) => {
       if (!response.ok) {
-        throw new Error(`Konnte MNIST-Labeldaten nicht laden (${response.status}).`);
+        throw new Error(`Could not load MNIST label data (${response.status}).`);
       }
       return response.arrayBuffer();
     }),
@@ -65,22 +65,22 @@ async function loadMnistTestSamples(manifestPath = MNIST_SAMPLE_MANIFEST_URL) {
     if (sampleSize > 0) {
       const inferredSamples = Math.floor(imageBytes.length / sampleSize);
       if (inferredSamples <= 0) {
-        throw new Error("Aus den MNIST-Bilddaten konnte keine Stichprobengröße abgeleitet werden.");
+        throw new Error("Could not infer sample size from MNIST image data.");
       }
       if (labelBytes.length !== inferredSamples) {
-        throw new Error("Anzahl der Labels stimmt nicht mit den abgeleiteten Stichproben überein.");
+        throw new Error("Number of labels does not match inferred samples.");
       }
     } else {
-      throw new Error("Manifest enthält keine gültige Stichprobengröße.");
+      throw new Error("Manifest does not contain a valid sample size.");
     }
   }
 
   const totalSamples = numSamples > 0 ? numSamples : Math.floor(imageBytes.length / sampleSize);
   if (imageBytes.length !== totalSamples * sampleSize) {
-    throw new Error("MNIST-Bilddatenlänge stimmt nicht mit der erwarteten Größe überein.");
+    throw new Error("MNIST image data length does not match expected size.");
   }
   if (labelBytes.length !== totalSamples) {
-    throw new Error("MNIST-Labeldatenlänge stimmt nicht mit der erwarteten Größe überein.");
+    throw new Error("MNIST label data length does not match expected size.");
   }
 
   const digitBuckets = Array.from({ length: 10 }, () => []);
@@ -141,7 +141,7 @@ async function setupMnistSampleButtons({ digitCanvas, onSampleApplied, manifestP
   try {
     loader = await loadMnistTestSamples(manifestPath ?? MNIST_SAMPLE_MANIFEST_URL);
   } catch (error) {
-    console.warn("MNIST-Testdaten konnten nicht geladen werden:", error);
+    console.warn("MNIST test data could not be loaded:", error);
     return null;
   }
   const column = document.createElement("div");
@@ -151,7 +151,7 @@ async function setupMnistSampleButtons({ digitCanvas, onSampleApplied, manifestP
     button.type = "button";
     button.className = "digit-button";
     button.textContent = String(digit);
-    button.setAttribute("aria-label", `Zufällige ${digit} laden`);
+    button.setAttribute("aria-label", `Load random ${digit}`);
     button.addEventListener("click", () => {
       const sample = loader.getRandomSample(digit);
       if (!sample) return;
@@ -175,7 +175,7 @@ async function initializeVisualizer() {
   const weightDefinitionUrl = new URL(VISUALIZER_CONFIG.weightUrl, window.location.href);
   const definition = await fetchNetworkDefinition(weightDefinitionUrl.toString());
   if (!definition?.network) {
-    throw new Error("Ungültige Netzwerkdefinition.");
+    throw new Error("Invalid network definition.");
   }
 
   const timelineSnapshots = hydrateTimeline(definition.timeline, {
@@ -183,7 +183,7 @@ async function initializeVisualizer() {
     baseUrl: weightDefinitionUrl,
   });
   if (!timelineSnapshots.length) {
-    throw new Error("Keine gültigen Timeline-Snapshots gefunden.");
+    throw new Error("No valid timeline snapshots found.");
   }
   const defaultSnapshotIndex = Math.max(timelineSnapshots.length - 1, 0);
   const initialSnapshot = timelineSnapshots[defaultSnapshotIndex];
@@ -664,7 +664,7 @@ function initializeAdvancedSettings({ neuralScene, digitCanvas, onConnectionsSet
 async function fetchNetworkDefinition(url) {
   const response = await fetch(url, { cache: "no-store" });
   if (!response.ok) {
-    throw new Error(`Netzwerkgewichte konnten nicht geladen werden (${response.status})`);
+    throw new Error(`Network weights could not be loaded (${response.status})`);
   }
   return response.json();
 }
@@ -681,7 +681,7 @@ function resolveRelativeUrl(base, relativePath) {
     const baseUrl = base instanceof URL ? base : new URL(base, window.location.href);
     return new URL(relativePath, baseUrl).toString();
   } catch (error) {
-    console.warn("Konnte relative URL nicht auflösen:", relativePath, error);
+    console.warn("Could not resolve relative URL:", relativePath, error);
     return null;
   }
 }
@@ -699,7 +699,7 @@ function decodeBase64ToUint8Array(base64) {
   if (typeof Buffer === "function") {
     return Uint8Array.from(Buffer.from(base64, "base64"));
   }
-  throw new Error("Base64-Dekodierung ist in dieser Umgebung nicht verfügbar.");
+  throw new Error("Base64 decoding is not available in this environment.");
 }
 
 function float16ToFloat32(value) {
@@ -726,13 +726,13 @@ function float16ToFloat32(value) {
 function decodeFloat16Base64(base64, expectedLength) {
   const bytes = decodeBase64ToUint8Array(base64);
   if (bytes.byteLength % 2 !== 0) {
-    throw new Error("Float16-Daten haben eine ungültige Länge.");
+    throw new Error("Float16 data has invalid length.");
   }
   const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
   const length = bytes.byteLength / 2;
   if (Number.isFinite(expectedLength) && expectedLength > 0 && length !== expectedLength) {
     throw new Error(
-      `Erwartete ${expectedLength} Float16-Werte, erhalten wurden jedoch ${length}.`,
+      `Expected ${expectedLength} Float16 values, but got ${length}.`,
     );
   }
   const result = new Float32Array(length);
@@ -798,14 +798,14 @@ function normaliseWeightsDescriptor(descriptor, baseUrl) {
 async function fetchSnapshotPayload(url) {
   const response = await fetch(url, { cache: "no-store" });
   if (!response.ok) {
-    throw new Error(`Snapshot konnte nicht geladen werden (${response.status})`);
+    throw new Error(`Snapshot could not be loaded (${response.status})`);
   }
   return response.json();
 }
 
 function decodeSnapshotLayers(payload, layerMetadata) {
   if (!payload || typeof payload !== "object" || !Array.isArray(payload.layers)) {
-    throw new Error("Snapshot-Datei enthält keine gültigen Layerdaten.");
+    throw new Error("Snapshot file does not contain valid layer data.");
   }
 
   return layerMetadata.map((meta, index) => {
@@ -813,21 +813,21 @@ function decodeSnapshotLayers(payload, layerMetadata) {
       payload.layers[index] ??
       payload.layers.find((layer) => Number(layer?.layer_index) === meta.layerIndex);
     if (!layerPayload) {
-      throw new Error(`Snapshot fehlt Layer ${meta.layerIndex}.`);
+      throw new Error(`Snapshot missing layer ${meta.layerIndex}.`);
     }
     const weightsInfo = layerPayload.weights ?? {};
     const biasesInfo = layerPayload.biases ?? {};
     if (typeof weightsInfo.data !== "string" || typeof biasesInfo.data !== "string") {
-      throw new Error("Snapshot-Layer enthält keine kodierten Gewichte.");
+      throw new Error("Snapshot layer does not contain encoded weights.");
     }
 
     const weightShape = normaliseShape(weightsInfo.shape, meta.weightShape);
     const biasShape = normaliseShape(biasesInfo.shape, meta.biasShape);
     if (weightShape.length !== 2) {
-      throw new Error("Snapshot-Layer hat eine ungültige Gewichtsdimension.");
+      throw new Error("Snapshot layer has invalid weight dimension.");
     }
     if (biasShape.length === 0) {
-      throw new Error("Snapshot-Layer hat eine ungültige Bias-Dimension.");
+      throw new Error("Snapshot layer has invalid bias dimension.");
     }
 
     const weights = decodeWeightMatrix(weightsInfo.data, weightShape);
@@ -1045,7 +1045,7 @@ function setupTimelineSlider(timelineSnapshots, options = {}) {
 class DigitSketchPad {
   constructor(container, rows, cols, options = {}) {
     if (!container) {
-      throw new Error("Raster-Container nicht gefunden.");
+      throw new Error("Grid container not found.");
     }
     this.container = container;
     this.rows = rows;
@@ -1085,7 +1085,7 @@ class DigitSketchPad {
     this.container.innerHTML = "";
     const title = document.createElement("div");
     title.className = "grid-title";
-    title.textContent = "Ziffer zeichnen";
+    title.textContent = "Draw digit";
     this.interactionRow = document.createElement("div");
     this.interactionRow.className = "grid-interaction-row";
     this.interactionRow.appendChild(this.gridElement);
@@ -1230,11 +1230,11 @@ class DigitSketchPad {
 
   setPixels(pixels) {
     if (!pixels || typeof pixels.length !== "number") {
-      throw new Error("Ungültige Pixelwerte für den Zeichenblock.");
+      throw new Error("Invalid pixel values for drawing pad.");
     }
     if (pixels.length !== this.values.length) {
       throw new Error(
-        `Erwartete ${this.values.length} Pixel, erhielt aber ${pixels.length}.`,
+        `Expected ${this.values.length} pixels, but got ${pixels.length}.`,
       );
     }
     for (let i = 0; i < this.values.length; i += 1) {
@@ -1271,7 +1271,7 @@ class DigitSketchPad {
 class FeedForwardModel {
   constructor(definition) {
     if (!definition.layers?.length) {
-      throw new Error("Die Netzwerkdefinition muss Schichten enthalten.");
+      throw new Error("Network definition must contain layers.");
     }
     this.normalization = definition.normalization ?? { mean: 0, std: 1 };
     this.architecture = Array.isArray(definition.architecture)
@@ -1322,7 +1322,7 @@ class FeedForwardModel {
 
   updateLayers(layerDefinitions) {
     if (!Array.isArray(layerDefinitions) || layerDefinitions.length === 0) {
-      throw new Error("Neue Layerdefinitionen müssen mindestens eine Schicht enthalten.");
+      throw new Error("New layer definitions must contain at least one layer.");
     }
     this.layers = layerDefinitions.map((layer, index) => this.normaliseLayer(layer, index));
     this.architecture = this.computeArchitecture(this.layers);
@@ -1379,7 +1379,7 @@ class ProbabilityPanel {
     this.container = container;
     this.rows = [];
     if (!this.container) {
-      throw new Error("Vorhersage-Diagrammcontainer nicht gefunden.");
+      throw new Error("Prediction chart container not found.");
     }
     this.build();
   }
@@ -1387,7 +1387,7 @@ class ProbabilityPanel {
   build() {
     this.container.innerHTML = "";
     const title = document.createElement("h3");
-    title.textContent = "Wahrscheinlichkeiten der Ziffern";
+    title.textContent = "Digit Probabilities";
     this.container.appendChild(title);
 
     this.chartElement = document.createElement("div");
@@ -1443,9 +1443,9 @@ class NetworkInfoPanel {
   constructor(container) {
     this.container = container;
     if (!this.container) {
-      throw new Error("Netzwerkinfo-Container nicht gefunden.");
+      throw new Error("Network info container not found.");
     }
-    this.numberFormatter = new Intl.NumberFormat("de-DE");
+    this.numberFormatter = new Intl.NumberFormat("en-US");
     this.build();
   }
 
@@ -1456,7 +1456,7 @@ class NetworkInfoPanel {
     }
     this.titleElement = document.createElement("h3");
     this.titleElement.className = "network-info-panel__title";
-    this.titleElement.textContent = "Netzwerkübersicht";
+    this.titleElement.textContent = "Network Overview";
 
     this.summaryElement = document.createElement("div");
     this.summaryElement.className = "network-info-panel__summary";
@@ -1466,7 +1466,7 @@ class NetworkInfoPanel {
 
     this.emptyElement = document.createElement("div");
     this.emptyElement.className = "network-info-panel__empty";
-    this.emptyElement.textContent = "Keine Netzwerkdaten verfügbar.";
+    this.emptyElement.textContent = "No network data available.";
 
     this.container.appendChild(this.titleElement);
     this.container.appendChild(this.summaryElement);
@@ -1563,7 +1563,7 @@ class NetworkInfoPanel {
 
     const totalParameters = layerSummaries.reduce((sum, entry) => sum + entry.parameterCount, 0);
     this.summaryElement.innerHTML = "";
-    this.summaryElement.appendChild(this.buildSummaryLine("Gesamtparameter", totalParameters));
+    this.summaryElement.appendChild(this.buildSummaryLine("Total Parameters", totalParameters));
     if (architecture.length > 0) {
       const firstArchitectureValue = architecture[0];
       const lastArchitectureValue = architecture[architecture.length - 1];
@@ -1576,10 +1576,10 @@ class NetworkInfoPanel {
         typeof lastArchitectureValue === "number" && Number.isFinite(lastArchitectureValue)
           ? lastArchitectureValue
           : lastLayer?.outputSize ?? 0;
-      this.summaryElement.appendChild(this.buildSummaryLine("Eingabeknoten", inputNodes));
-      this.summaryElement.appendChild(this.buildSummaryLine("Ausgabeklassen", outputNodes));
+      this.summaryElement.appendChild(this.buildSummaryLine("Input Nodes", inputNodes));
+      this.summaryElement.appendChild(this.buildSummaryLine("Output Classes", outputNodes));
     }
-    this.summaryElement.appendChild(this.buildSummaryLine("Layer (inkl. Ausgaben)", layerSummaries.length));
+    this.summaryElement.appendChild(this.buildSummaryLine("Layers (incl. Output)", layerSummaries.length));
 
     this.layersElement.innerHTML = "";
     layerSummaries.forEach((entry) => {
@@ -1593,9 +1593,9 @@ class NetworkInfoPanel {
 
       const metrics = document.createElement("div");
       metrics.className = "network-info-panel__layer-metrics";
-      metrics.appendChild(this.buildMetric("Gewichte", entry.weightCount));
+      metrics.appendChild(this.buildMetric("Weights", entry.weightCount));
       metrics.appendChild(this.buildMetric("Bias", entry.biasCount));
-      metrics.appendChild(this.buildMetric("Summe", entry.parameterCount));
+      metrics.appendChild(this.buildMetric("Total", entry.parameterCount));
 
       layerRow.appendChild(title);
       layerRow.appendChild(metrics);
@@ -1650,10 +1650,10 @@ class NeuronDetailPanel {
           .map(
             (entry) => `
       <div class="neuron-detail-panel__row">
-        <div><small>Quelle</small><br><strong>#${entry.sourceIndex + 1}</strong></div>
+        <div><small>Source</small><br><strong>#${entry.sourceIndex + 1}</strong></div>
         <div><small>Input</small><br>${this.formatValue(entry.sourceActivation)}</div>
-        <div><small>Gewicht</small><br>${this.formatValue(entry.weight)}</div>
-        <div><small>Produkt</small><br><strong>${this.formatValue(entry.contribution)}</strong></div>
+        <div><small>Weight</small><br>${this.formatValue(entry.weight)}</div>
+        <div><small>Product</small><br><strong>${this.formatValue(entry.contribution)}</strong></div>
       </div>
     `,
           )
@@ -1665,10 +1665,10 @@ class NeuronDetailPanel {
           .map(
             (entry) => `
       <div class="neuron-detail-panel__row">
-        <div><small>Ziel</small><br><strong>#${entry.targetIndex + 1}</strong></div>
-        <div><small>Aktivierung (Ziel)</small><br>${this.formatValue(entry.targetActivation)}</div>
-        <div><small>Gewicht</small><br>${this.formatValue(entry.weight)}</div>
-        <div><small>Beitrag</small><br><strong>${this.formatValue(entry.contribution)}</strong></div>
+        <div><small>Target</small><br><strong>#${entry.targetIndex + 1}</strong></div>
+        <div><small>Activation (Target)</small><br>${this.formatValue(entry.targetActivation)}</div>
+        <div><small>Weight</small><br>${this.formatValue(entry.weight)}</div>
+        <div><small>Contribution</small><br><strong>${this.formatValue(entry.contribution)}</strong></div>
       </div>
     `,
           )
@@ -1713,27 +1713,27 @@ class NeuronDetailPanel {
     const incomingSection = hasIncoming
       ? `
       <div>
-        <div class="neuron-detail-panel__section-title">Eingehende Beiträge</div>
+        <div class="neuron-detail-panel__section-title">Incoming Contributions</div>
         <div class="neuron-detail-panel__row neuron-detail-panel__row--header">
-          <div>Quelle</div>
+          <div>Source</div>
           <div>Input</div>
-          <div>Gewicht</div>
-          <div>Produkt</div>
+          <div>Weight</div>
+          <div>Product</div>
         </div>
         ${incomingRows}
       </div>
     `
-      : `<div class="neuron-detail-panel__empty">Keine eingehenden Verbindungen für diese Schicht.</div>`;
+      : `<div class="neuron-detail-panel__empty">No incoming connections for this layer.</div>`;
 
     const outgoingSection = hasOutgoing
       ? `
       <div>
-        <div class="neuron-detail-panel__section-title">Ausgehende Beiträge</div>
+        <div class="neuron-detail-panel__section-title">Outgoing Contributions</div>
         <div class="neuron-detail-panel__row neuron-detail-panel__row--header">
-          <div>Ziel</div>
-          <div>Aktivierung (Ziel)</div>
-          <div>Gewicht</div>
-          <div>Beitrag</div>
+          <div>Target</div>
+          <div>Activation (Target)</div>
+          <div>Weight</div>
+          <div>Contribution</div>
         </div>
         ${outgoingRows}
       </div>
@@ -1742,7 +1742,7 @@ class NeuronDetailPanel {
 
     const summaryFormula =
       payload.preActivation !== null && payload.preActivation !== undefined
-        ? `Σ = Σ(input × gewicht)${payload.bias !== null && payload.bias !== undefined ? " + bias" : ""}`
+        ? `Σ = Σ(input × weight)${payload.bias !== null && payload.bias !== undefined ? " + bias" : ""}`
         : "";
 
     this.root.innerHTML = `
@@ -1751,7 +1751,7 @@ class NeuronDetailPanel {
           <div class="neuron-detail-panel__title">${payload.layerLabel} • Neuron ${payload.neuronIndex + 1}${
             payload.activationName ? ` (${payload.activationName})` : ""
           }</div>
-          <button type="button" class="neuron-detail-panel__close">Auswahl aufheben</button>
+          <button type="button" class="neuron-detail-panel__close">Clear selection</button>
         </div>
         <div class="neuron-detail-panel__body">
           <div class="neuron-detail-panel__summary">
@@ -1759,8 +1759,8 @@ class NeuronDetailPanel {
           </div>
           ${totalsBlock}
           <div class="neuron-detail-panel__activations">
-            <span>Eingangsschicht-Größe: ${payload.previousLayerSize ?? "—"}</span>
-            <span>Ausgangsschicht-Größe: ${payload.nextLayerSize ?? "—"}</span>
+            <span>Input Layer Size: ${payload.previousLayerSize ?? "—"}</span>
+            <span>Output Layer Size: ${payload.nextLayerSize ?? "—"}</span>
           </div>
           ${incomingSection}
           ${outgoingSection}
@@ -2423,12 +2423,12 @@ class NeuralVisualizer {
 
   describeLayer(layerIndex) {
     if (layerIndex === 0) {
-      return `Eingabeschicht (${this.mlp.architecture[layerIndex]} Knoten)`;
+      return `Input Layer (${this.mlp.architecture[layerIndex]} nodes)`;
     }
     if (layerIndex === this.mlp.architecture.length - 1) {
-      return `Ausgabeschicht (${this.mlp.architecture[layerIndex]} Knoten)`;
+      return `Output Layer (${this.mlp.architecture[layerIndex]} nodes)`;
     }
-    return `Verborgene Schicht ${layerIndex} (${this.mlp.architecture[layerIndex]} Knoten)`;
+    return `Hidden Layer ${layerIndex} (${this.mlp.architecture[layerIndex]} nodes)`;
   }
 
   getActivationName(layerIndex) {

From 6bc76bafb2825db2c8a385923bcdc178304af8a2 Mon Sep 17 00:00:00 2001
From: Abanum Chuks <oilmonegov@gmail.com>
Date: Sun, 16 Nov 2025 05:28:42 +0100
Subject: [PATCH 3/4] Refactor error handling in main.js to ensure consistent
 English messages for snapshot updates.

---
 assets/main.js |   4 +-
 test-i18n.js   | 346 +++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 348 insertions(+), 2 deletions(-)
 create mode 100644 test-i18n.js

diff --git a/assets/main.js b/assets/main.js
index 798eb50..901203c 100644
--- a/assets/main.js
+++ b/assets/main.js
@@ -1019,7 +1019,7 @@ function setupTimelineSlider(timelineSnapshots, options = {}) {
     const nextIndex = Number(event.target.value);
     if (Number.isNaN(nextIndex)) return;
     setActiveIndex(nextIndex, { emit: true }).catch((error) => {
-      console.error("Fehler beim Aktualisieren des Snapshots:", error);
+      console.error("Error updating snapshot:", error);
     });
   });
 
@@ -1027,7 +1027,7 @@ function setupTimelineSlider(timelineSnapshots, options = {}) {
     const nextIndex = Number(event.target.value);
     if (Number.isNaN(nextIndex)) return;
     setActiveIndex(nextIndex, { emit: true }).catch((error) => {
-      console.error("Fehler beim Aktualisieren des Snapshots:", error);
+      console.error("Error updating snapshot:", error);
     });
   });
 
diff --git a/test-i18n.js b/test-i18n.js
new file mode 100644
index 0000000..f70d13d
--- /dev/null
+++ b/test-i18n.js
@@ -0,0 +1,346 @@
+/**
+ * Test suite for internationalization (i18n) changes
+ * Tests that verify the application has been translated from German to English
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+// Simple test runner
+class TestRunner {
+  constructor() {
+    this.tests = [];
+    this.passed = 0;
+    this.failed = 0;
+  }
+
+  test(name, fn) {
+    this.tests.push({ name, fn });
+  }
+
+  async run() {
+    console.log('Running i18n tests...\n');
+    
+    for (const { name, fn } of this.tests) {
+      try {
+        await fn();
+        console.log(`✓ ${name}`);
+        this.passed++;
+      } catch (error) {
+        console.error(`✗ ${name}`);
+        console.error(`  ${error.message}`);
+        this.failed++;
+      }
+    }
+
+    console.log(`\n${this.passed} passed, ${this.failed} failed`);
+    process.exit(this.failed > 0 ? 1 : 0);
+  }
+}
+
+const runner = new TestRunner();
+
+// Helper functions
+function readFile(filePath) {
+  return fs.readFileSync(path.join(__dirname, filePath), 'utf8');
+}
+
+function assert(condition, message) {
+  if (!condition) {
+    throw new Error(message);
+  }
+}
+
+// Test HTML language attribute
+runner.test('HTML lang attribute is set to "en"', () => {
+  const html = readFile('index.html');
+  assert(html.includes('<html lang="en">'), 'HTML lang attribute should be "en"');
+  assert(!html.includes('<html lang="de">'), 'HTML should not have lang="de"');
+});
+
+// Test page title
+runner.test('Page title is in English', () => {
+  const html = readFile('index.html');
+  assert(html.includes('<title>MNIST MLP – Inference Visualization</title>'), 
+    'Page title should be in English');
+  // Ensure no German title
+  assert(!html.includes('Visualisierung'), 'Page title should not contain German text');
+});
+
+// Test instruction overlays
+runner.test('Instruction overlays are in English', () => {
+  const html = readFile('index.html');
+  
+  // Desktop instructions
+  assert(html.includes('Drawing:'), 'Desktop instructions should contain "Drawing:"');
+  assert(html.includes('3D Controls:'), 'Desktop instructions should contain "3D Controls:"');
+  assert(html.includes('Click and drag on the grid'), 'Instructions should be in English');
+  
+  // Mobile instructions
+  assert(html.includes('Touch Controls'), 'Mobile instructions should have "Touch Controls" title');
+  assert(html.includes('Tap and drag on the grid'), 'Mobile instructions should be in English');
+});
+
+// Test modal content
+runner.test('Info modal content is in English', () => {
+  const html = readFile('index.html');
+  
+  assert(html.includes('MNIST Digit Classification – Inference Visualization'), 
+    'Info modal title should be in English');
+  assert(html.includes('Interactive Neural Network Visualization'), 
+    'Info modal should contain English description');
+  assert(html.includes('How it works:'), 'Info modal should have "How it works:" section');
+  assert(html.includes('Network Architecture'), 'Info modal should have "Network Architecture" section');
+  assert(html.includes('Input Layer:'), 'Info modal should describe layers in English');
+  assert(html.includes('3D Controls:'), 'Info modal should have "3D Controls:" section');
+  assert(html.includes('Color Coding:'), 'Info modal should have "Color Coding:" section');
+  assert(html.includes('Training Your Own Model:'), 'Info modal should have training section in English');
+  assert(html.includes('Real-time Features:'), 'Info modal should have real-time features section');
+});
+
+// Test advanced settings modal
+runner.test('Advanced settings modal is in English', () => {
+  const html = readFile('index.html');
+  
+  assert(html.includes('Advanced Settings'), 'Advanced settings modal title should be in English');
+  assert(html.includes('Maximum Connections per Neuron'), 'Settings labels should be in English');
+  assert(html.includes('Hide Weak Connections'), 'Settings should have "Hide Weak Connections"');
+  assert(html.includes('Connection Thickness'), 'Settings should have "Connection Thickness"');
+  assert(html.includes('Brush Thickness'), 'Settings should have "Brush Thickness"');
+  assert(html.includes('Brush Strength'), 'Settings should have "Brush Strength"');
+});
+
+// Test timeline overlay
+runner.test('Timeline overlay is in English', () => {
+  const html = readFile('index.html');
+  
+  assert(html.includes('Training Progress'), 'Timeline should have "Training Progress" label');
+  assert(html.includes('aria-label="Training Progress"'), 'Timeline slider should have English aria-label');
+});
+
+// Test error messages in JavaScript
+runner.test('Error messages in main.js are in English', () => {
+  const js = readFile('assets/main.js');
+  
+  // Check for English error messages
+  assert(js.includes('Could not load MNIST manifest'), 'MNIST manifest error should be in English');
+  assert(js.includes('Manifest does not contain valid file paths'), 'Manifest validation error should be in English');
+  assert(js.includes('Could not load MNIST image data'), 'Image data error should be in English');
+  assert(js.includes('Could not load MNIST label data'), 'Label data error should be in English');
+  assert(js.includes('Could not infer sample size'), 'Sample size error should be in English');
+  assert(js.includes('Number of labels does not match'), 'Label count error should be in English');
+  assert(js.includes('Invalid network definition'), 'Network definition error should be in English');
+  assert(js.includes('No valid timeline snapshots found'), 'Timeline error should be in English');
+  assert(js.includes('Network weights could not be loaded'), 'Weights loading error should be in English');
+  assert(js.includes('Base64 decoding is not available'), 'Base64 error should be in English');
+  assert(js.includes('Float16 data has invalid length'), 'Float16 error should be in English');
+  assert(js.includes('Snapshot could not be loaded'), 'Snapshot loading error should be in English');
+  assert(js.includes('Snapshot file does not contain valid layer data'), 'Snapshot validation error should be in English');
+  assert(js.includes('Grid container not found'), 'Grid container error should be in English');
+  assert(js.includes('Invalid pixel values for drawing pad'), 'Pixel values error should be in English');
+  
+  // Ensure no German error messages (common German words that shouldn't appear)
+  assert(!js.includes('Fehler beim Laden'), 'Should not contain German "Fehler beim Laden"');
+  assert(!js.includes('Konnte nicht'), 'Should not contain German "Konnte nicht"');
+});
+
+// Test UI text in JavaScript
+runner.test('UI text elements in main.js are in English', () => {
+  const js = readFile('assets/main.js');
+  
+  assert(js.includes('Draw digit'), 'Drawing pad title should be "Draw digit"');
+  assert(js.includes('Digit Probabilities'), 'Probability panel should have "Digit Probabilities" title');
+  assert(js.includes('Network Overview'), 'Network info panel should have "Network Overview" title');
+  assert(js.includes('Clear selection'), 'Neuron detail panel should have "Clear selection" button');
+  assert(js.includes('Input Layer Size:'), 'Neuron detail should show "Input Layer Size:"');
+  assert(js.includes('Output Layer Size:'), 'Neuron detail should show "Output Layer Size:"');
+  assert(js.includes('Incoming Contributions'), 'Neuron detail should have "Incoming Contributions" section');
+  assert(js.includes('Outgoing Contributions'), 'Neuron detail should have "Outgoing Contributions" section');
+  assert(js.includes('Source'), 'Neuron detail should have "Source" label');
+  assert(js.includes('Target'), 'Neuron detail should have "Target" label');
+  assert(js.includes('Weight'), 'Neuron detail should have "Weight" label');
+  assert(js.includes('Contribution'), 'Neuron detail should have "Contribution" label');
+  assert(js.includes('Visualization could not be initialized'), 'Initialization error message should be in English');
+});
+
+// Test aria-labels
+runner.test('Aria-labels are in English', () => {
+  const html = readFile('index.html');
+  const js = readFile('assets/main.js');
+  
+  // HTML aria-labels
+  assert(html.includes('aria-label="Training Progress"'), 'Timeline slider should have English aria-label');
+  
+  // JavaScript-generated aria-labels
+  assert(js.includes('aria-label'), 'Should have aria-label attributes');
+  assert(js.includes('Load random'), 'MNIST sample buttons should have English aria-label');
+  
+  // Ensure no German aria-labels
+  assert(!html.includes('aria-label="Fortschritt"'), 'Should not have German aria-labels');
+});
+
+// Test number formatting locale
+runner.test('Number formatting uses en-US locale', () => {
+  const js = readFile('assets/main.js');
+  
+  // Check that toLocaleString is used (which defaults to en-US in Node.js/browser)
+  // The function should use toLocaleString() without specifying a locale
+  assert(js.includes('toLocaleString()'), 'Should use toLocaleString for number formatting');
+  
+  // Verify it's not using de-DE locale
+  assert(!js.includes('toLocaleString("de-DE"'), 'Should not use German locale for number formatting');
+  assert(!js.includes('toLocaleString(\'de-DE\''), 'Should not use German locale for number formatting');
+  
+  // Test the actual formatting function behavior
+  // In Node.js, toLocaleString() without locale uses system locale, but in browser it uses en-US
+  // We'll test that the function exists and doesn't explicitly use de-DE
+  const formatIntegerMatch = js.match(/function formatInteger\([^)]*\)\s*\{[^}]*toLocaleString\([^)]*\)/s);
+  assert(formatIntegerMatch, 'formatInteger function should use toLocaleString');
+  
+  // Test actual number formatting behavior
+  // en-US uses commas as thousands separators (1,234,567)
+  // de-DE uses periods as thousands separators (1.234.567)
+  // We'll simulate the formatInteger function
+  function formatInteger(value) {
+    if (!Number.isFinite(value)) return "";
+    return Math.round(value).toLocaleString();
+  }
+  
+  // Test with a large number - en-US should use commas
+  const testNumber = 1234567;
+  const formatted = formatInteger(testNumber);
+  
+  // In Node.js, this might use system locale, but we check it doesn't use German format
+  // German format would be "1.234.567" (periods), English is "1,234,567" (commas)
+  // If it uses commas, it's likely en-US; if it uses periods, it might be de-DE
+  // We'll check that it's not the German format
+  if (formatted.includes('.') && formatted.split('.').length > 2) {
+    // Multiple periods suggest German format (though could be decimal in some locales)
+    // We'll be lenient here since Node.js uses system locale
+    console.warn('  ⚠ Note: Number formatting may use system locale in Node.js');
+  }
+  
+  // The key test: ensure the code doesn't explicitly specify de-DE
+  assert(!js.match(/toLocaleString\(["']de-DE["']/i), 'Code should not explicitly use German locale');
+});
+
+// Test console messages
+runner.test('Console messages are in English', () => {
+  const js = readFile('assets/main.js');
+  
+  // Check for English console messages
+  assert(js.includes('MNIST test data could not be loaded'), 'Console warning should be in English');
+  assert(js.includes('Could not resolve relative URL'), 'Console warning should be in English');
+  assert(js.includes('Error updating snapshot:'), 'Console error should be in English');
+  
+  // Ensure no German console messages
+  assert(!js.includes('Fehler beim Aktualisieren'), 'Should not contain German "Fehler beim Aktualisieren"');
+  assert(!js.includes('Fehler beim Laden'), 'Should not contain German "Fehler beim Laden"');
+  assert(!js.includes('Konnte nicht'), 'Should not contain German "Konnte nicht"');
+});
+
+// Test that key German words are not present in user-facing text
+runner.test('No German text in user-facing UI elements', () => {
+  const html = readFile('index.html');
+  const js = readFile('assets/main.js');
+  
+  // Check HTML for German words in user-facing content
+  const htmlLower = html.toLowerCase();
+  const userFacingGermanWords = [
+    'zeichnen',  // drawing
+    'steuerung', // controls
+    'einstellungen', // settings
+    'übersicht', // overview
+    'wahrscheinlichkeit', // probability
+  ];
+  
+  for (const word of userFacingGermanWords) {
+    // Check if word appears in visible text (not in URLs or code)
+    if (htmlLower.includes(word) && !htmlLower.includes('github.com')) {
+      // Check if it's in a visible element (not in script tags or comments)
+      const visibleContent = html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '')
+                                  .replace(/<!--[\s\S]*?-->/g, '');
+      if (visibleContent.toLowerCase().includes(word)) {
+        throw new Error(`Found German word "${word}" in user-facing HTML content`);
+      }
+    }
+  }
+  
+  // Check for German error messages that are thrown to users (not just console.error)
+  // User-facing errors are those in throw new Error() or renderErrorMessage()
+  const userFacingErrorPatterns = [
+    /throw new Error\([^)]*["']Fehler/i,
+    /throw new Error\([^)]*["']Konnte nicht/i,
+    /renderErrorMessage\([^)]*["']Fehler/i,
+  ];
+  
+  for (const pattern of userFacingErrorPatterns) {
+    if (pattern.test(js)) {
+      throw new Error('Found German text in user-facing error messages');
+    }
+  }
+  
+  // Check for any remaining German console messages
+  const germanConsoleErrors = (js.match(/console\.(error|warn|log)\([^)]*["']Fehler/gi) || []).length;
+  if (germanConsoleErrors > 0) {
+    console.warn(`  ⚠ Warning: Found ${germanConsoleErrors} German console message(s) that could be translated`);
+  }
+});
+
+// Test layer descriptions
+runner.test('Layer descriptions are in English', () => {
+  const html = readFile('index.html');
+  
+  assert(html.includes('Input Layer:'), 'Should describe input layer in English');
+  assert(html.includes('Dense Layer'), 'Should describe dense layers in English');
+  assert(html.includes('Output Layer:'), 'Should describe output layer in English');
+  assert(html.includes('neurons with ReLU'), 'Should describe activation functions in English');
+  assert(html.includes('Softmax probabilities'), 'Should describe output in English');
+});
+
+// Test button labels and interactive elements
+runner.test('Button labels and interactive elements are in English', () => {
+  const html = readFile('index.html');
+  const js = readFile('assets/main.js');
+  
+  // Check for English button text (may be in HTML or JS)
+  assert(html.includes('Advanced Settings') || js.includes('Advanced Settings'), 
+    'Should have "Advanced Settings" button');
+  assert(html.includes('Clear selection') || js.includes('Clear selection'), 
+    'Should have "Clear selection" button');
+  
+  // Check that common German button words are not present in user-facing text
+  const visibleHtml = html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '')
+                          .replace(/<!--[\s\S]*?-->/g, '');
+  assert(!visibleHtml.includes('Löschen'), 'Should not have German "Löschen" (clear) in HTML');
+  assert(!visibleHtml.includes('Schließen'), 'Should not have German "Schließen" (close) in HTML');
+  assert(!visibleHtml.includes('Einstellungen'), 'Should not have German "Einstellungen" (settings) in HTML');
+});
+
+// Test that all user-visible strings from PR description are present
+runner.test('Key translated strings from PR description are present', () => {
+  const html = readFile('index.html');
+  const js = readFile('assets/main.js');
+  
+  // Key strings mentioned in PR description
+  const keyStrings = [
+    'MNIST MLP – Inference Visualization', // Page title
+    'Draw digit', // Drawing pad
+    'Digit Probabilities', // Probability panel
+    'Network Overview', // Network info
+    'Training Progress', // Timeline
+    'Interactive Neural Network Visualization', // Info modal
+    'How it works:', // Info modal section
+    '3D Controls:', // Info modal section
+    'Color Coding:', // Info modal section
+  ];
+  
+  for (const str of keyStrings) {
+    const found = html.includes(str) || js.includes(str);
+    assert(found, `Key translated string "${str}" should be present`);
+  }
+});
+
+// Run all tests
+runner.run();
+

From 34c745a0c6b3e3cce0ff6ca43ec78003281a5e57 Mon Sep 17 00:00:00 2001
From: Abanum Chuks <oilmonegov@gmail.com>
Date: Sun, 16 Nov 2025 06:19:34 +0100
Subject: [PATCH 4/4] Implement internationalization support by adding i18n.js
 for dynamic language switching and updating UI elements in main.js and
 index.html. Enhance accessibility with aria-labels and ensure consistent
 English translations across the application.

---
 TEST-README.md         | 196 ++++++++
 assets/i18n.js         | 174 +++++++
 assets/i18n/de.json    | 128 ++++++
 assets/i18n/en.json    | 128 ++++++
 assets/main.css        |  13 +
 assets/main.js         | 145 ++++--
 index.html             | 116 ++---
 test-i18n-browser.html | 492 ++++++++++++++++++++
 test-i18n.js           | 995 +++++++++++++++++++++++++++++------------
 test.js                | 175 ++++++++
 10 files changed, 2185 insertions(+), 377 deletions(-)
 create mode 100644 TEST-README.md
 create mode 100644 assets/i18n.js
 create mode 100644 assets/i18n/de.json
 create mode 100644 assets/i18n/en.json
 create mode 100644 test-i18n-browser.html
 create mode 100755 test.js

diff --git a/TEST-README.md b/TEST-README.md
new file mode 100644
index 0000000..05e9ade
--- /dev/null
+++ b/TEST-README.md
@@ -0,0 +1,196 @@
+# i18n Test Suite Documentation
+
+This document describes the comprehensive test suite for the internationalization (i18n) functionality.
+
+## Quick Start
+
+**Run all tests with a single command:**
+```bash
+node test.js
+```
+
+This will run the comprehensive i18n tests, providing a unified summary.
+
+## Test Files
+
+### 0. `test.js` ⭐ **RECOMMENDED**
+A unified test runner that executes all Node.js-based tests and provides a comprehensive summary.
+
+**Usage:**
+```bash
+# Run all tests
+node test.js
+
+# Show help
+node test.js --help
+```
+
+**Features:**
+- Runs the comprehensive i18n test suite
+- Provides colored output and clear summaries
+- Shows overall pass/fail status
+- Reminds about browser tests
+
+### 1. `test-i18n.js`
+A Node.js-based test suite that performs static analysis and validation of the i18n implementation. This test can be run from the command line and doesn't require a browser.
+
+**Usage:**
+```bash
+node test-i18n.js
+```
+
+**What it tests:**
+- Translation file structure and completeness
+- i18n.js module code analysis
+- HTML integration with data-i18n attributes
+- JavaScript integration with translation functions
+- Translation key coverage
+- Code quality and best practices
+- Edge cases and error handling
+- Accessibility and internationalization
+
+### 2. `test-i18n-browser.html`
+A browser-based test suite that tests the runtime behavior of the i18n system. This test requires opening the HTML file in a web browser.
+
+**Usage:**
+1. Open `test-i18n-browser.html` in a web browser
+2. Tests will run automatically on page load
+3. Use the buttons to run specific test suites
+
+**What it tests:**
+- Basic i18n module functionality
+- Language switching behavior
+- DOM element translation
+- Error handling
+- LocalStorage persistence
+- Translation completeness
+
+### 3. `test-i18n.js` (also run via `test.js`)
+The comprehensive test file that verifies the i18n implementation. This test performs static analysis and checks for hardcoded text, translation coverage, and i18n integration.
+
+**Usage:**
+```bash
+# Run directly
+node test-i18n.js
+
+# Or run via the unified test runner
+node test.js
+```
+
+## Test Coverage
+
+The comprehensive test suite includes **65 tests** across 8 test suites:
+
+### Test Suite 1: Translation File Structure and Completeness (7 tests)
+- Validates JSON structure
+- Ensures both languages have matching keys
+- Verifies all values are strings
+- Checks parameter placeholder consistency
+
+### Test Suite 2: i18n.js Module Code Analysis (18 tests)
+- Verifies all exported functions exist
+- Checks for proper error handling
+- Validates localStorage usage
+- Ensures event dispatching
+
+### Test Suite 3: HTML Integration (14 tests)
+- Verifies data-i18n attributes are used
+- Checks language toggle button
+- Validates all translation keys exist
+- Ensures proper HTML structure
+
+### Test Suite 4: JavaScript Integration (9 tests)
+- Verifies t() function usage
+- Checks translation key references
+- Validates parameter substitution
+- Ensures language change listeners
+
+### Test Suite 5: Translation Key Coverage (3 tests)
+- Verifies error keys are used
+- Checks UI key references
+- Validates parameter placeholders
+
+### Test Suite 6: Code Quality and Best Practices (5 tests)
+- Checks for hardcoded German text
+- Validates translation file formatting
+- Ensures no empty strings
+- Verifies naming conventions
+
+### Test Suite 7: Edge Cases and Error Handling (5 tests)
+- Tests missing key handling
+- Validates fallback behavior
+- Checks special character handling
+- Tests parameter substitution edge cases
+
+### Test Suite 8: Accessibility and Internationalization (4 tests)
+- Verifies HTML lang attribute updates
+- Checks translatable aria-labels
+- Validates accessibility attributes
+- Ensures proper ARIA roles
+
+## Running All Tests
+
+**Recommended: Use the unified test runner:**
+```bash
+node test.js
+```
+
+**Or run tests individually:**
+```bash
+# Run comprehensive Node.js tests (via unified runner)
+node test.js
+
+# Run comprehensive tests directly
+node test-i18n.js
+
+# Open browser tests (requires a web server or file:// protocol)
+open test-i18n-browser.html
+```
+
+## Test Results
+
+All tests should pass. The comprehensive test suite reports:
+- **65 tests passed, 0 failed** (as of last run)
+
+## Adding New Tests
+
+When adding new translation keys or i18n features:
+
+1. **Add translation keys to both `en.json` and `de.json`**
+2. **Update HTML with `data-i18n` attributes if needed**
+3. **Use `t()` function in JavaScript for dynamic translations**
+4. **Run the test suite to verify everything works**
+
+## Troubleshooting
+
+### Test fails: "Translation key not found"
+- Ensure the key exists in both `en.json` and `de.json`
+- Check that the key path uses dot notation (e.g., `"drawing.title"`)
+
+### Test fails: "Hardcoded German text found"
+- Remove any hardcoded German strings from HTML or JavaScript
+- Use translation keys instead
+
+### Browser tests don't run
+- Ensure `assets/i18n.js` is accessible
+- Check browser console for errors
+- Verify translation JSON files are in `assets/i18n/`
+
+## Continuous Integration
+
+These tests can be integrated into CI/CD pipelines:
+
+```yaml
+# Example GitHub Actions workflow
+- name: Run i18n tests
+  run: |
+    node test.js
+```
+
+## Notes
+
+- The comprehensive test suite performs static analysis and doesn't require a browser
+- The browser test suite tests actual runtime behavior
+- Both test suites complement each other for complete coverage
+- Tests are designed to catch regressions when modifying i18n code
+
diff --git a/assets/i18n.js b/assets/i18n.js
new file mode 100644
index 0000000..2dfcfbe
--- /dev/null
+++ b/assets/i18n.js
@@ -0,0 +1,174 @@
+/**
+ * Internationalization (i18n) module
+ * Handles language switching and translation
+ */
+
+let currentLanguage = 'en';
+let translations = {};
+
+/**
+ * Initialize i18n system
+ * @param {string} lang - Language code ('en' or 'de')
+ */
+async function initI18n(lang = 'en') {
+  currentLanguage = lang || 'en';
+  
+  try {
+    const response = await fetch(`./assets/i18n/${currentLanguage}.json`);
+    if (!response.ok) {
+      throw new Error(`Failed to load translations for ${currentLanguage}`);
+    }
+    translations = await response.json();
+    
+    // Update HTML lang attribute
+    document.documentElement.lang = currentLanguage;
+    
+    // Update page title
+    document.title = translations.pageTitle || 'MNIST MLP – Inference Visualization';
+    
+    // Apply translations to all elements with data-i18n attribute
+    applyTranslations();
+    
+    // Save language preference
+    localStorage.setItem('preferredLanguage', currentLanguage);
+    
+    return translations;
+  } catch (error) {
+    console.error('Error loading translations:', error);
+    // Fallback to English if translation file fails to load
+    if (currentLanguage !== 'en') {
+      return initI18n('en');
+    }
+    throw error;
+  }
+}
+
+/**
+ * Get translation for a key
+ * @param {string} key - Translation key (supports dot notation, e.g., "drawing.title")
+ * @param {object} params - Parameters to replace in translation (e.g., {digit: 5})
+ * @returns {string} Translated string
+ */
+function t(key, params = {}) {
+  const keys = key.split('.');
+  let value = translations;
+  
+  for (const k of keys) {
+    if (value && typeof value === 'object' && k in value) {
+      value = value[k];
+    } else {
+      console.warn(`Translation key not found: ${key}`);
+      return key;
+    }
+  }
+  
+  if (typeof value !== 'string') {
+    console.warn(`Translation value is not a string for key: ${key}`);
+    return key;
+  }
+  
+  // Replace parameters in the format {param}
+  if (params && Object.keys(params).length > 0) {
+    return value.replace(/\{(\w+)\}/g, (match, paramKey) => {
+      return params[paramKey] !== undefined ? String(params[paramKey]) : match;
+    });
+  }
+  
+  return value;
+}
+
+/**
+ * Apply translations to all elements with data-i18n attribute
+ */
+function applyTranslations() {
+  const elements = document.querySelectorAll('[data-i18n]');
+  elements.forEach(element => {
+    const key = element.getAttribute('data-i18n');
+    const translation = t(key);
+    
+    // Handle different element types
+    if (element.tagName === 'INPUT' && element.type === 'text') {
+      element.value = translation;
+    } else if (element.hasAttribute('aria-label')) {
+      element.setAttribute('aria-label', translation);
+    } else if (element.hasAttribute('placeholder')) {
+      element.placeholder = translation;
+    } else if (element.hasAttribute('title')) {
+      element.title = translation;
+    } else {
+      element.textContent = translation;
+    }
+  });
+  
+  // Handle elements with data-i18n-html for HTML content
+  const htmlElements = document.querySelectorAll('[data-i18n-html]');
+  htmlElements.forEach(element => {
+    const key = element.getAttribute('data-i18n-html');
+    const translation = t(key);
+    element.innerHTML = translation;
+  });
+  
+  // Handle elements with data-i18n-aria-label for aria-label attributes
+  const ariaLabelElements = document.querySelectorAll('[data-i18n-aria-label]');
+  ariaLabelElements.forEach(element => {
+    const key = element.getAttribute('data-i18n-aria-label');
+    const translation = t(key);
+    element.setAttribute('aria-label', translation);
+  });
+  
+  // Update language toggle button text
+  const languageToggleText = document.getElementById('languageToggleText');
+  if (languageToggleText) {
+    languageToggleText.textContent = currentLanguage.toUpperCase();
+  }
+}
+
+/**
+ * Switch language
+ * @param {string} lang - Language code ('en' or 'de')
+ */
+async function switchLanguage(lang) {
+  if (lang === currentLanguage) return;
+  await initI18n(lang);
+  
+  // Trigger custom event for components that need to update
+  window.dispatchEvent(new CustomEvent('languageChanged', { detail: { language: lang } }));
+}
+
+/**
+ * Get current language
+ * @returns {string} Current language code
+ */
+function getCurrentLanguage() {
+  return currentLanguage;
+}
+
+// Load saved language preference on initialization
+document.addEventListener('DOMContentLoaded', () => {
+  const savedLanguage = localStorage.getItem('preferredLanguage') || 'en';
+  initI18n(savedLanguage).catch(error => {
+    console.error('Failed to initialize i18n:', error);
+  });
+  
+  // Setup language toggle button
+  const languageToggleButton = document.getElementById('languageToggleButton');
+  if (languageToggleButton) {
+    languageToggleButton.addEventListener('click', () => {
+      const currentLang = getCurrentLanguage();
+      const newLang = currentLang === 'en' ? 'de' : 'en';
+      switchLanguage(newLang);
+    });
+  }
+});
+
+// Export for use in other modules
+if (typeof window !== 'undefined') {
+  window.i18n = {
+    init: initI18n,
+    t,
+    switchLanguage,
+    getCurrentLanguage,
+    applyTranslations
+  };
+}
+
diff --git a/assets/i18n/de.json b/assets/i18n/de.json
new file mode 100644
index 0000000..e760c3f
--- /dev/null
+++ b/assets/i18n/de.json
@@ -0,0 +1,128 @@
+{
+  "pageTitle": "MNIST MLP – Visualisierung der Inferenz",
+  "drawing": {
+    "title": "Ziffer zeichnen",
+    "instructions": "Auf dem Raster klicken und ziehen (Rechtsklick zum Löschen)",
+    "mobileInstructions": "Tippen und auf dem Raster ziehen"
+  },
+  "controls3d": {
+    "title": "3D-Steuerung:",
+    "instructions": "• Linke Taste + ziehen = drehen • Rechte Taste + ziehen = verschieben • Scrollrad = zoomen",
+    "rotate": "Drehen",
+    "pan": "Verschieben",
+    "zoom": "Zoomen",
+    "rotateDesktop": "Linke Maustaste gedrückt halten und ziehen",
+    "panDesktop": "Rechte Maustaste gedrückt halten und ziehen",
+    "zoomDesktop": "Mausrad benutzen",
+    "rotateMobile": "Mit einem Finger ziehen",
+    "panMobile": "Mit zwei Fingern bewegen",
+    "zoomMobile": "Finger zusammenziehen oder spreizen"
+  },
+  "mobile": {
+    "touchControls": "Touch-Steuerung"
+  },
+  "predictions": {
+    "title": "Wahrscheinlichkeiten der Ziffern"
+  },
+  "network": {
+    "overview": "Netzwerk-Übersicht",
+    "noData": "Keine Netzwerkdaten verfügbar.",
+    "totalParameters": "Gesamtparameter",
+    "inputNodes": "Eingabeknoten",
+    "outputClasses": "Ausgabeklassen",
+    "layers": "Ebenen (inkl. Ausgabe)",
+    "weights": "Gewichte",
+    "bias": "Bias",
+    "total": "Gesamt"
+  },
+  "neuronDetail": {
+    "clearSelection": "Auswahl löschen",
+    "incomingContributions": "Eingehende Beiträge",
+    "outgoingContributions": "Ausgehende Beiträge",
+    "source": "Quelle",
+    "target": "Ziel",
+    "input": "Eingabe",
+    "weight": "Gewicht",
+    "product": "Produkt",
+    "activation": "Aktivierung (Ziel)",
+    "contribution": "Beitrag",
+    "noIncomingConnections": "Keine eingehenden Verbindungen für diese Ebene.",
+    "inputLayerSize": "Eingabeebenen-Größe:",
+    "outputLayerSize": "Ausgabeebenen-Größe:"
+  },
+  "timeline": {
+    "title": "Trainingsfortschritt",
+    "ariaLabel": "Trainingsfortschritt"
+  },
+  "infoModal": {
+    "title": "MNIST-Ziffernklassifizierung – Visualisierung der Inferenz",
+    "subtitle": "Interaktive Visualisierung eines neuronalen Netzes",
+    "description": "Diese Anwendung zeigt ein kompaktes Multi-Layer-Perceptron (MLP), das auf MNIST trainiert wurde. Zeichnen Sie eine Ziffer und beobachten Sie, wie die Aktivierungen in Echtzeit durch alle vollvernetzten Schichten propagieren.",
+    "howItWorks": "So funktioniert es:",
+    "howItWorksDrawing": "Im 2D-Raster (links oben) klicken und ziehen, um eine Ziffer zu skizzieren",
+    "howItWorksObserving": "Verfolgen Sie, wie Ihre Skizze durch die Schichten des Netzes im 3D-Raum wandert",
+    "howItWorksPrediction": "Prüfen Sie die Wahrscheinlichkeit für jede Ziffer (0–9) im Diagramm (rechts oben)",
+    "networkArchitecture": "Netzarchitektur (Standardexport):",
+    "inputLayer": "Eingabeschicht:",
+    "inputLayerDesc": "28×28 Pixelraster (Ihre Zeichnung)",
+    "denseLayer": "Dichte Ebene",
+    "denseLayerDesc": "Neuronen mit ReLU",
+    "outputLayer": "Ausgabeschicht:",
+    "outputLayerDesc": "32 → 10 Logits → Softmax-Wahrscheinlichkeiten",
+    "colorCoding": "Farbcodierung:",
+    "colorCodingNodes": "Die Farbe zeigt die Aktivierungsstärke (dunkle Blautöne für niedrige/negative Werte, kräftige Korallenfarben für starke positive Aktivierungen)",
+    "colorCodingConnections": "Warme Farben kennzeichnen starke positive Beiträge, kühle Töne negative Einflüsse, gedämpfte Linien nahezu Null.",
+    "training": "Eigenes Modell trainieren:",
+    "trainingStep1": "<code>python training/mlp_train.py</code> starten, um das MLP zu trainieren (inkl. Apple-Metal-Beschleunigung, falls verfügbar).",
+    "trainingStep2": "Das Skript schreibt <code>exports/mlp_weights.json</code>, das der Visualisierer beim Laden einliest.",
+    "trainingStep3": "Anzahl versteckter Neuronen, Epochen oder Exportpfade über die in <code>training/mlp_train.py</code> dokumentierten CLI-Optionen verändern.",
+    "realtimeFeatures": "Echtzeitfunktionen:",
+    "realtimeActivations": "Schichtaktivierungen: Instanzen von Kugeln zeigen Aktivierungen pro Neuron mit farbcodierter Stärke.",
+    "realtimeConnections": "Wichtige Verbindungen: Jedes Zielneuron hebt seine stärksten Eingangsgewichte für bessere Lesbarkeit hervor.",
+    "realtimeProbabilities": "Live-Wahrscheinlichkeiten: Das Balkendiagramm aktualisiert die Logits → Softmax-Werte in Echtzeit.",
+    "note": "Das Netzwerk ist bewusst kompakt gehalten, um eine flüssige Echtzeitdarstellung zu gewährleisten. Sie können gern mit anderen Schichtgrößen neu trainieren – halten Sie die Architektur nur schlank, damit die 3D-Ansicht reaktionsschnell bleibt."
+  },
+  "advancedSettings": {
+    "title": "Erweiterte Einstellungen",
+    "maxConnections": "Maximale Verbindungen pro Neuron",
+    "maxConnectionsHint": "Steuert, wie viele der stärksten eingehenden Gewichte pro Zielneuron gleichzeitig angezeigt werden; hohe Werte können die Darstellung verlangsamen.",
+    "hideWeakConnections": "Schwache Verbindungen ausblenden",
+    "hideWeakConnectionsHint": "Blendet Verbindungen mit niedrigem absoluten Gewicht aus; 0 zeigt alle Verbindungen.",
+    "connectionThickness": "Verbindungsstärke",
+    "connectionThicknessHint": "Passt den Radius der Verbindungszylinder an; höhere Werte machen alle Linien sichtbar dicker.",
+    "brushThickness": "Pinselstärke",
+    "brushThicknessHint": "Kleinere Werte erzeugen feinere Linien; größere Werte füllen das Raster schneller.",
+    "brushStrength": "Pinselstärke",
+    "brushStrengthHint": "Bestimmt, wie stark ein Pinselstrich die Pixelhelligkeit erhöht."
+  },
+  "errors": {
+    "initializationFailed": "Visualisierung konnte nicht initialisiert werden. Details in der Konsole.",
+    "loadMnistManifest": "MNIST-Manifest konnte nicht geladen werden",
+    "invalidManifest": "Manifest enthält keine gültigen Dateipfade für Bilder oder Beschriftungen.",
+    "loadMnistImages": "MNIST-Bilddaten konnten nicht geladen werden",
+    "loadMnistLabels": "MNIST-Beschriftungsdaten konnten nicht geladen werden",
+    "inferSampleSize": "Probengröße konnte nicht aus MNIST-Bilddaten abgeleitet werden.",
+    "labelMismatch": "Anzahl der Beschriftungen stimmt nicht mit abgeleiteten Proben überein.",
+    "invalidManifestSize": "Manifest enthält keine gültige Probengröße.",
+    "imageDataMismatch": "Länge der MNIST-Bilddaten stimmt nicht mit erwarteter Größe überein.",
+    "labelDataMismatch": "Länge der MNIST-Beschriftungsdaten stimmt nicht mit erwarteter Größe überein.",
+    "invalidNetworkDefinition": "Ungültige Netzwerkdefinition.",
+    "noTimelineSnapshots": "Keine gültigen Timeline-Snapshots gefunden.",
+    "loadNetworkWeights": "Netzwerkgewichte konnten nicht geladen werden",
+    "base64Unavailable": "Base64-Decodierung ist in dieser Umgebung nicht verfügbar.",
+    "invalidFloat16Length": "Float16-Daten haben ungültige Länge.",
+    "invalidFloat16Count": "Erwartet {expected} Float16-Werte, aber {actual} erhalten.",
+    "loadSnapshot": "Snapshot konnte nicht geladen werden",
+    "invalidSnapshot": "Snapshot-Datei enthält keine gültigen Ebenendaten",
+    "gridContainerNotFound": "Raster-Container nicht gefunden",
+    "invalidPixelValues": "Ungültige Pixelwerte für Zeichenfläche"
+  },
+  "aria": {
+    "loadRandom": "Zufällige {digit} laden"
+  },
+  "fps": {
+    "idle": "inaktiv",
+    "fps": "fps"
+  }
+}
+
diff --git a/assets/i18n/en.json b/assets/i18n/en.json
new file mode 100644
index 0000000..e9685dd
--- /dev/null
+++ b/assets/i18n/en.json
@@ -0,0 +1,128 @@
+{
+  "pageTitle": "MNIST MLP – Inference Visualization",
+  "drawing": {
+    "title": "Draw digit",
+    "instructions": "Click and drag on the grid (right-click to erase)",
+    "mobileInstructions": "Tap and drag on the grid"
+  },
+  "controls3d": {
+    "title": "3D Controls:",
+    "instructions": "• Left button + drag = rotate • Right button + drag = pan • Scroll wheel = zoom",
+    "rotate": "Rotate",
+    "pan": "Pan",
+    "zoom": "Zoom",
+    "rotateDesktop": "Hold left mouse button and drag",
+    "panDesktop": "Hold right mouse button and drag",
+    "zoomDesktop": "Use mouse wheel",
+    "rotateMobile": "Drag with one finger",
+    "panMobile": "Move with two fingers",
+    "zoomMobile": "Pinch or spread fingers"
+  },
+  "mobile": {
+    "touchControls": "Touch Controls"
+  },
+  "predictions": {
+    "title": "Digit Probabilities"
+  },
+  "network": {
+    "overview": "Network Overview",
+    "noData": "No network data available.",
+    "totalParameters": "Total Parameters",
+    "inputNodes": "Input Nodes",
+    "outputClasses": "Output Classes",
+    "layers": "Layers (incl. Output)",
+    "weights": "Weights",
+    "bias": "Bias",
+    "total": "Total"
+  },
+  "neuronDetail": {
+    "clearSelection": "Clear selection",
+    "incomingContributions": "Incoming Contributions",
+    "outgoingContributions": "Outgoing Contributions",
+    "source": "Source",
+    "target": "Target",
+    "input": "Input",
+    "weight": "Weight",
+    "product": "Product",
+    "activation": "Activation (Target)",
+    "contribution": "Contribution",
+    "noIncomingConnections": "No incoming connections for this layer.",
+    "inputLayerSize": "Input Layer Size:",
+    "outputLayerSize": "Output Layer Size:"
+  },
+  "timeline": {
+    "title": "Training Progress",
+    "ariaLabel": "Training Progress"
+  },
+  "infoModal": {
+    "title": "MNIST Digit Classification – Inference Visualization",
+    "subtitle": "Interactive Neural Network Visualization",
+    "description": "This application shows a compact Multi-Layer Perceptron (MLP) trained on MNIST. Draw a digit and observe how activations propagate in real-time through all fully connected layers.",
+    "howItWorks": "How it works:",
+    "howItWorksDrawing": "Click and drag in the 2D grid (top left) to sketch a digit",
+    "howItWorksObserving": "Track how your sketch travels through the network layers in 3D space",
+    "howItWorksPrediction": "Check the probability for each digit (0–9) in the chart (top right)",
+    "networkArchitecture": "Network Architecture (Default Export):",
+    "inputLayer": "Input Layer:",
+    "inputLayerDesc": "28×28 pixel grid (your drawing)",
+    "denseLayer": "Dense Layer",
+    "denseLayerDesc": "neurons with ReLU",
+    "outputLayer": "Output Layer:",
+    "outputLayerDesc": "32 → 10 logits → Softmax probabilities",
+    "colorCoding": "Color Coding:",
+    "colorCodingNodes": "The color shows activation strength (dark blue tones for low/negative values, vibrant coral colors for strong positive activations)",
+    "colorCodingConnections": "Warm colors indicate strong positive contributions, cool tones negative influences, muted lines near zero.",
+    "training": "Training Your Own Model:",
+    "trainingStep1": "Run <code>python training/mlp_train.py</code> to train the MLP (including Apple Metal acceleration, if available).",
+    "trainingStep2": "The script writes <code>exports/mlp_weights.json</code>, which the visualizer reads on load.",
+    "trainingStep3": "Change the number of hidden neurons, epochs, or export paths via the CLI options documented in <code>training/mlp_train.py</code>.",
+    "realtimeFeatures": "Real-time Features:",
+    "realtimeActivations": "Layer Activations: Sphere instances show activations per neuron with color-coded strength.",
+    "realtimeConnections": "Important Connections: Each target neuron highlights its strongest input weights for better readability.",
+    "realtimeProbabilities": "Live Probabilities: The bar chart updates logits → Softmax values in real-time.",
+    "note": "The network is intentionally kept compact to ensure smooth real-time rendering. Feel free to retrain with different layer sizes – just keep the architecture lean so the 3D view remains responsive."
+  },
+  "advancedSettings": {
+    "title": "Advanced Settings",
+    "maxConnections": "Maximum Connections per Neuron",
+    "maxConnectionsHint": "Controls how many of the strongest incoming weights per target neuron are displayed simultaneously; high values may slow down rendering.",
+    "hideWeakConnections": "Hide Weak Connections",
+    "hideWeakConnectionsHint": "Hides connections with low absolute weight; 0 shows all connections.",
+    "connectionThickness": "Connection Thickness",
+    "connectionThicknessHint": "Adjusts the radius of connection cylinders; higher values make all lines visibly thicker.",
+    "brushThickness": "Brush Thickness",
+    "brushThicknessHint": "Smaller values create finer lines; larger values fill the grid faster.",
+    "brushStrength": "Brush Strength",
+    "brushStrengthHint": "Determines how much a brush stroke increases pixel brightness."
+  },
+  "errors": {
+    "initializationFailed": "Visualization could not be initialized. See console for details.",
+    "loadMnistManifest": "Could not load MNIST manifest",
+    "invalidManifest": "Manifest does not contain valid file paths for images or labels.",
+    "loadMnistImages": "Could not load MNIST image data",
+    "loadMnistLabels": "Could not load MNIST label data",
+    "inferSampleSize": "Could not infer sample size from MNIST image data.",
+    "labelMismatch": "Number of labels does not match inferred samples.",
+    "invalidManifestSize": "Manifest does not contain a valid sample size.",
+    "imageDataMismatch": "MNIST image data length does not match expected size.",
+    "labelDataMismatch": "MNIST label data length does not match expected size.",
+    "invalidNetworkDefinition": "Invalid network definition.",
+    "noTimelineSnapshots": "No valid timeline snapshots found.",
+    "loadNetworkWeights": "Network weights could not be loaded",
+    "base64Unavailable": "Base64 decoding is not available in this environment.",
+    "invalidFloat16Length": "Float16 data has invalid length.",
+    "invalidFloat16Count": "Expected {expected} Float16 values, but got {actual}.",
+    "loadSnapshot": "Snapshot could not be loaded",
+    "invalidSnapshot": "Snapshot file does not contain valid layer data",
+    "gridContainerNotFound": "Grid container not found",
+    "invalidPixelValues": "Invalid pixel values for drawing pad"
+  },
+  "aria": {
+    "loadRandom": "Load random {digit}"
+  },
+  "fps": {
+    "idle": "idle",
+    "fps": "fps"
+  }
+}
+
diff --git a/assets/main.css b/assets/main.css
index 8dc482b..f5a3781 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -598,6 +598,19 @@ body > canvas {
   font-size: 1.3rem;
 }
 
+.language-toggle-button {
+  border-color: rgba(91, 160, 255, 0.35);
+  color: rgba(173, 205, 255, 0.88);
+  font-size: 0.85rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+}
+
+.language-toggle-button span {
+  font-size: 0.9rem;
+  font-weight: 700;
+}
+
 .timeline-overlay {
   position: absolute;
   bottom: 24px;
diff --git a/assets/main.js b/assets/main.js
index 901203c..146388b 100644
--- a/assets/main.js
+++ b/assets/main.js
@@ -20,10 +20,18 @@ const VISUALIZER_CONFIG = {
 
 const MNIST_SAMPLE_MANIFEST_URL = "./assets/data/mnist-test-manifest.json";
 
+// i18n helper function
+function t(key, params) {
+  if (window.i18n && typeof window.i18n.t === 'function') {
+    return window.i18n.t(key, params);
+  }
+  return key;
+}
+
 document.addEventListener("DOMContentLoaded", () => {
   initializeVisualizer().catch((error) => {
     console.error(error);
-    renderErrorMessage("Visualization could not be initialized. See console for details.");
+    renderErrorMessage(t("errors.initializationFailed"));
   });
 });
 
@@ -151,7 +159,7 @@ async function setupMnistSampleButtons({ digitCanvas, onSampleApplied, manifestP
     button.type = "button";
     button.className = "digit-button";
     button.textContent = String(digit);
-    button.setAttribute("aria-label", `Load random ${digit}`);
+    button.setAttribute("aria-label", t("aria.loadRandom", { digit }));
     button.addEventListener("click", () => {
       const sample = loader.getRandomSample(digit);
       if (!sample) return;
@@ -1085,7 +1093,7 @@ class DigitSketchPad {
     this.container.innerHTML = "";
     const title = document.createElement("div");
     title.className = "grid-title";
-    title.textContent = "Draw digit";
+    title.textContent = t("drawing.title");
     this.interactionRow = document.createElement("div");
     this.interactionRow.className = "grid-interaction-row";
     this.interactionRow.appendChild(this.gridElement);
@@ -1096,6 +1104,16 @@ class DigitSketchPad {
     this.gridElement.addEventListener("pointermove", (event) => this.handlePointerMove(event));
     window.addEventListener("pointerup", () => this.handlePointerUp());
     this.gridElement.addEventListener("contextmenu", (event) => event.preventDefault());
+    
+    // Listen for language changes
+    window.addEventListener("languageChanged", () => this.updateLanguage());
+  }
+  
+  updateLanguage() {
+    const title = this.container.querySelector(".grid-title");
+    if (title) {
+      title.textContent = t("drawing.title");
+    }
   }
 
   setChangeHandler(handler) {
@@ -1382,18 +1400,27 @@ class ProbabilityPanel {
       throw new Error("Prediction chart container not found.");
     }
     this.build();
+    
+    // Listen for language changes
+    window.addEventListener("languageChanged", () => this.updateLanguage());
+  }
+  
+  updateLanguage() {
+    if (this.titleElement) {
+      this.titleElement.textContent = t("predictions.title");
+    }
   }
 
   build() {
     this.container.innerHTML = "";
-    const title = document.createElement("h3");
-    title.textContent = "Digit Probabilities";
-    this.container.appendChild(title);
+    this.titleElement = document.createElement("h3");
+    this.titleElement.textContent = t("predictions.title");
+    this.container.appendChild(this.titleElement);
 
     this.chartElement = document.createElement("div");
     this.chartElement.className = "prediction-chart";
     this.container.appendChild(this.chartElement);
-
+    
     for (let digit = 0; digit < 10; digit += 1) {
       const row = document.createElement("div");
       row.className = "prediction-bar-container";
@@ -1456,7 +1483,7 @@ class NetworkInfoPanel {
     }
     this.titleElement = document.createElement("h3");
     this.titleElement.className = "network-info-panel__title";
-    this.titleElement.textContent = "Network Overview";
+    this.titleElement.textContent = t("network.overview");
 
     this.summaryElement = document.createElement("div");
     this.summaryElement.className = "network-info-panel__summary";
@@ -1466,7 +1493,7 @@ class NetworkInfoPanel {
 
     this.emptyElement = document.createElement("div");
     this.emptyElement.className = "network-info-panel__empty";
-    this.emptyElement.textContent = "No network data available.";
+    this.emptyElement.textContent = t("network.noData");
 
     this.container.appendChild(this.titleElement);
     this.container.appendChild(this.summaryElement);
@@ -1476,6 +1503,22 @@ class NetworkInfoPanel {
     this.summaryElement.style.display = "none";
     this.layersElement.style.display = "none";
     this.emptyElement.style.display = "block";
+    
+    // Listen for language changes
+    window.addEventListener("languageChanged", () => this.updateLanguage());
+  }
+  
+  updateLanguage() {
+    if (this.titleElement) {
+      this.titleElement.textContent = t("network.overview");
+    }
+    if (this.emptyElement) {
+      this.emptyElement.textContent = t("network.noData");
+    }
+    // Rebuild if we have data
+    if (this.lastModel) {
+      this.update(this.lastModel);
+    }
   }
 
   formatNumber(value) {
@@ -1517,6 +1560,7 @@ class NetworkInfoPanel {
   }
 
   update(model) {
+    this.lastModel = model;
     if (!model || !Array.isArray(model.layers) || model.layers.length === 0) {
       this.emptyElement.style.display = "block";
       this.summaryElement.style.display = "none";
@@ -1563,7 +1607,7 @@ class NetworkInfoPanel {
 
     const totalParameters = layerSummaries.reduce((sum, entry) => sum + entry.parameterCount, 0);
     this.summaryElement.innerHTML = "";
-    this.summaryElement.appendChild(this.buildSummaryLine("Total Parameters", totalParameters));
+    this.summaryElement.appendChild(this.buildSummaryLine(t("network.totalParameters"), totalParameters));
     if (architecture.length > 0) {
       const firstArchitectureValue = architecture[0];
       const lastArchitectureValue = architecture[architecture.length - 1];
@@ -1576,10 +1620,10 @@ class NetworkInfoPanel {
         typeof lastArchitectureValue === "number" && Number.isFinite(lastArchitectureValue)
           ? lastArchitectureValue
           : lastLayer?.outputSize ?? 0;
-      this.summaryElement.appendChild(this.buildSummaryLine("Input Nodes", inputNodes));
-      this.summaryElement.appendChild(this.buildSummaryLine("Output Classes", outputNodes));
+      this.summaryElement.appendChild(this.buildSummaryLine(t("network.inputNodes"), inputNodes));
+      this.summaryElement.appendChild(this.buildSummaryLine(t("network.outputClasses"), outputNodes));
     }
-    this.summaryElement.appendChild(this.buildSummaryLine("Layers (incl. Output)", layerSummaries.length));
+    this.summaryElement.appendChild(this.buildSummaryLine(t("network.layers"), layerSummaries.length));
 
     this.layersElement.innerHTML = "";
     layerSummaries.forEach((entry) => {
@@ -1593,9 +1637,9 @@ class NetworkInfoPanel {
 
       const metrics = document.createElement("div");
       metrics.className = "network-info-panel__layer-metrics";
-      metrics.appendChild(this.buildMetric("Weights", entry.weightCount));
-      metrics.appendChild(this.buildMetric("Bias", entry.biasCount));
-      metrics.appendChild(this.buildMetric("Total", entry.parameterCount));
+      metrics.appendChild(this.buildMetric(t("network.weights"), entry.weightCount));
+      metrics.appendChild(this.buildMetric(t("network.bias"), entry.biasCount));
+      metrics.appendChild(this.buildMetric(t("network.total"), entry.parameterCount));
 
       layerRow.appendChild(title);
       layerRow.appendChild(metrics);
@@ -1650,10 +1694,10 @@ class NeuronDetailPanel {
           .map(
             (entry) => `
       <div class="neuron-detail-panel__row">
-        <div><small>Source</small><br><strong>#${entry.sourceIndex + 1}</strong></div>
-        <div><small>Input</small><br>${this.formatValue(entry.sourceActivation)}</div>
-        <div><small>Weight</small><br>${this.formatValue(entry.weight)}</div>
-        <div><small>Product</small><br><strong>${this.formatValue(entry.contribution)}</strong></div>
+        <div><small>${t("neuronDetail.source")}</small><br><strong>#${entry.sourceIndex + 1}</strong></div>
+        <div><small>${t("neuronDetail.input")}</small><br>${this.formatValue(entry.sourceActivation)}</div>
+        <div><small>${t("neuronDetail.weight")}</small><br>${this.formatValue(entry.weight)}</div>
+        <div><small>${t("neuronDetail.product")}</small><br><strong>${this.formatValue(entry.contribution)}</strong></div>
       </div>
     `,
           )
@@ -1665,10 +1709,10 @@ class NeuronDetailPanel {
           .map(
             (entry) => `
       <div class="neuron-detail-panel__row">
-        <div><small>Target</small><br><strong>#${entry.targetIndex + 1}</strong></div>
-        <div><small>Activation (Target)</small><br>${this.formatValue(entry.targetActivation)}</div>
-        <div><small>Weight</small><br>${this.formatValue(entry.weight)}</div>
-        <div><small>Contribution</small><br><strong>${this.formatValue(entry.contribution)}</strong></div>
+        <div><small>${t("neuronDetail.target")}</small><br><strong>#${entry.targetIndex + 1}</strong></div>
+        <div><small>${t("neuronDetail.activation")}</small><br>${this.formatValue(entry.targetActivation)}</div>
+        <div><small>${t("neuronDetail.weight")}</small><br>${this.formatValue(entry.weight)}</div>
+        <div><small>${t("neuronDetail.contribution")}</small><br><strong>${this.formatValue(entry.contribution)}</strong></div>
       </div>
     `,
           )
@@ -1681,7 +1725,7 @@ class NeuronDetailPanel {
       payload.bias !== null && payload.bias !== undefined
         ? `
       <div class="neuron-detail-panel__row neuron-detail-panel__row--bias">
-        <div><small>Bias</small><br><strong>${this.formatValue(payload.bias)}</strong></div>
+        <div><small>${t("network.bias")}</small><br><strong>${this.formatValue(payload.bias)}</strong></div>
         <div></div>
         <div></div>
         <div></div>
@@ -1713,27 +1757,27 @@ class NeuronDetailPanel {
     const incomingSection = hasIncoming
       ? `
       <div>
-        <div class="neuron-detail-panel__section-title">Incoming Contributions</div>
+        <div class="neuron-detail-panel__section-title">${t("neuronDetail.incomingContributions")}</div>
         <div class="neuron-detail-panel__row neuron-detail-panel__row--header">
-          <div>Source</div>
-          <div>Input</div>
-          <div>Weight</div>
-          <div>Product</div>
+          <div>${t("neuronDetail.source")}</div>
+          <div>${t("neuronDetail.input")}</div>
+          <div>${t("neuronDetail.weight")}</div>
+          <div>${t("neuronDetail.product")}</div>
         </div>
         ${incomingRows}
       </div>
     `
-      : `<div class="neuron-detail-panel__empty">No incoming connections for this layer.</div>`;
+      : `<div class="neuron-detail-panel__empty">${t("neuronDetail.noIncomingConnections")}</div>`;
 
     const outgoingSection = hasOutgoing
       ? `
       <div>
-        <div class="neuron-detail-panel__section-title">Outgoing Contributions</div>
+        <div class="neuron-detail-panel__section-title">${t("neuronDetail.outgoingContributions")}</div>
         <div class="neuron-detail-panel__row neuron-detail-panel__row--header">
-          <div>Target</div>
-          <div>Activation (Target)</div>
-          <div>Weight</div>
-          <div>Contribution</div>
+          <div>${t("neuronDetail.target")}</div>
+          <div>${t("neuronDetail.activation")}</div>
+          <div>${t("neuronDetail.weight")}</div>
+          <div>${t("neuronDetail.contribution")}</div>
         </div>
         ${outgoingRows}
       </div>
@@ -1751,7 +1795,7 @@ class NeuronDetailPanel {
           <div class="neuron-detail-panel__title">${payload.layerLabel} • Neuron ${payload.neuronIndex + 1}${
             payload.activationName ? ` (${payload.activationName})` : ""
           }</div>
-          <button type="button" class="neuron-detail-panel__close">Clear selection</button>
+          <button type="button" class="neuron-detail-panel__close">${t("neuronDetail.clearSelection")}</button>
         </div>
         <div class="neuron-detail-panel__body">
           <div class="neuron-detail-panel__summary">
@@ -1759,8 +1803,8 @@ class NeuronDetailPanel {
           </div>
           ${totalsBlock}
           <div class="neuron-detail-panel__activations">
-            <span>Input Layer Size: ${payload.previousLayerSize ?? "—"}</span>
-            <span>Output Layer Size: ${payload.nextLayerSize ?? "—"}</span>
+            <span>${t("neuronDetail.inputLayerSize")} ${payload.previousLayerSize ?? "—"}</span>
+            <span>${t("neuronDetail.outputLayerSize")} ${payload.nextLayerSize ?? "—"}</span>
           </div>
           ${incomingSection}
           ${outgoingSection}
@@ -1773,6 +1817,18 @@ class NeuronDetailPanel {
     if (closeButton) {
       closeButton.addEventListener("click", this.handleClose);
     }
+    
+    // Store payload for language updates
+    this.lastPayload = payload;
+    
+    // Listen for language changes
+    window.addEventListener("languageChanged", () => this.updateLanguage());
+  }
+  
+  updateLanguage() {
+    if (this.lastPayload) {
+      this.render(this.lastPayload);
+    }
   }
 
   formatValue(value) {
@@ -1799,13 +1855,16 @@ class FpsMonitor {
 
     this.valueElement = document.createElement("span");
     this.valueElement.className = "fps-overlay__value";
-    this.valueElement.textContent = "— fps";
+    this.valueElement.textContent = `— ${t("fps.fps")}`;
 
     this.root.appendChild(this.valueElement);
     document.body.appendChild(this.root);
     this.refreshDisplay = this.refreshDisplay.bind(this);
     this.displayTimer = window.setInterval(this.refreshDisplay, 250);
     this.refreshDisplay();
+    
+    // Listen for language changes
+    window.addEventListener("languageChanged", () => this.refreshDisplay());
   }
 
   update(time) {
@@ -1838,15 +1897,15 @@ class FpsMonitor {
       this.lastFrameTimestamp > 0 ? now - this.lastFrameTimestamp : Number.POSITIVE_INFINITY;
 
     if (!Number.isFinite(timeSinceLastFrame) || timeSinceLastFrame > 600) {
-      this.valueElement.textContent = "idle";
+      this.valueElement.textContent = t("fps.idle");
       this.currentFps = null;
       return;
     }
 
     if (this.currentFps !== null) {
-      this.valueElement.textContent = `${this.currentFps} fps`;
+      this.valueElement.textContent = `${this.currentFps} ${t("fps.fps")}`;
     } else {
-      this.valueElement.textContent = "— fps";
+      this.valueElement.textContent = `— ${t("fps.fps")}`;
     }
   }
 }
diff --git a/index.html b/index.html
index 6ee1a8f..cb0fb64 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MNIST MLP – Inference Visualization</title>
+  <script src="./assets/i18n.js"></script>
   <script type="module" crossorigin src="./assets/main.js"></script>
   <link rel="stylesheet" crossorigin href="./assets/main.css">
 </head>
@@ -33,8 +34,8 @@
     <div id="instructionsOverlay" class="instructions-overlay">
         <div class="instructions-container">
             <div class="instructions-content">
-                <p><strong>Drawing:</strong> Click and drag on the grid (right-click to erase)</p>
-                <p><strong>3D Controls:</strong> • Left button + drag = rotate • Right button + drag = pan • Scroll wheel = zoom</p>
+                <p><strong>Drawing:</strong> <span data-i18n="drawing.instructions"></span></p>
+                <p><strong data-i18n="controls3d.title"></strong> <span data-i18n="controls3d.instructions"></span></p>
             </div>
         </div>
     </div>
@@ -42,18 +43,27 @@
     <!-- Mobile Instructions Overlay -->
     <div id="mobileInstructionsOverlay" class="mobile-instructions-overlay">
         <div class="mobile-instructions-content">
-            <div class="mobile-instructions-title">Touch Controls</div>
+            <div class="mobile-instructions-title" data-i18n="mobile.touchControls"></div>
             <ul class="mobile-gesture-list">
-                <li><strong>Drawing:</strong> Tap and drag on the grid</li>
-                <li><strong>Rotate:</strong> Drag with one finger</li>
-                <li><strong>Pan:</strong> Move with two fingers</li>
-                <li><strong>Zoom:</strong> Pinch or spread fingers</li>
+                <li><strong>Drawing:</strong> <span data-i18n="drawing.mobileInstructions"></span></li>
+                <li><strong data-i18n="controls3d.rotate"></strong> <span data-i18n="controls3d.rotateMobile"></span></li>
+                <li><strong data-i18n="controls3d.pan"></strong> <span data-i18n="controls3d.panMobile"></span></li>
+                <li><strong data-i18n="controls3d.zoom"></strong> <span data-i18n="controls3d.zoomMobile"></span></li>
             </ul>
         </div>
     </div>
 
     <!-- Floating Controls -->
     <div class="floating-controls">
+        <button
+            id="languageToggleButton"
+            class="floating-button language-toggle-button"
+            type="button"
+            aria-label="Switch language"
+            title="Switch language"
+        >
+            <span id="languageToggleText">EN</span>
+        </button>
         <button
             id="advancedSettingsButton"
             class="floating-button advanced-settings-button"
@@ -84,7 +94,7 @@
     <div id="timelineOverlay" class="timeline-overlay hidden">
         <div class="timeline-container">
             <div class="timeline-header">
-                <span class="timeline-title">Training Progress</span>
+                <span class="timeline-title" data-i18n="timeline.title"></span>
                 <span id="timelineSummary" class="timeline-summary"></span>
             </div>
             <input
@@ -95,7 +105,7 @@
                 value="0"
                 step="1"
                 disabled
-                aria-label="Training Progress"
+                data-i18n-aria-label="timeline.ariaLabel"
             >
             <div class="timeline-meta">
                 <span id="timelineLabel" class="timeline-label"></span>
@@ -117,56 +127,56 @@
     <div id="infoModal" class="info-modal">
         <div class="info-modal-content">
             <div class="info-modal-header">
-                <h3>MNIST Digit Classification – Inference Visualization</h3>
+                <h3 data-i18n="infoModal.title"></h3>
                 <button id="closeInfoModal" class="close-modal-btn">×</button>
             </div>
             <div class="info-modal-body">
-                <p><strong>Interactive Neural Network Visualization</strong></p>
-                <p>This application shows a compact Multi-Layer Perceptron (MLP) trained on MNIST. Draw a digit and observe how activations propagate in real-time through all fully connected layers.</p>
+                <p><strong data-i18n="infoModal.subtitle"></strong></p>
+                <p data-i18n="infoModal.description"></p>
                 
-                <h4>How it works:</h4>
+                <h4 data-i18n="infoModal.howItWorks"></h4>
                 <ul>
-                    <li><strong>Drawing:</strong> Click and drag in the 2D grid (top left) to sketch a digit</li>
-                    <li><strong>Observing:</strong> Track how your sketch travels through the network layers in 3D space</li>
-                    <li><strong>Prediction:</strong> Check the probability for each digit (0–9) in the chart (top right)</li>
+                    <li><strong>Drawing:</strong> <span data-i18n="infoModal.howItWorksDrawing"></span></li>
+                    <li><strong>Observing:</strong> <span data-i18n="infoModal.howItWorksObserving"></span></li>
+                    <li><strong>Prediction:</strong> <span data-i18n="infoModal.howItWorksPrediction"></span></li>
                 </ul>
 
-                <h4>Network Architecture (Default Export):</h4>
+                <h4 data-i18n="infoModal.networkArchitecture"></h4>
                 <ul>
-                    <li><strong>Input Layer:</strong> 28×28 pixel grid (your drawing)</li>
-                    <li><strong>Dense Layer 1:</strong> 784 → 64 neurons with ReLU</li>
-                    <li><strong>Dense Layer 2:</strong> 64 → 32 neurons with ReLU</li>
-                    <li><strong>Output Layer:</strong> 32 → 10 logits → Softmax probabilities</li>
+                    <li><strong data-i18n="infoModal.inputLayer"></strong> <span data-i18n="infoModal.inputLayerDesc"></span></li>
+                    <li><strong>Dense Layer 1:</strong> 784 → 64 <span data-i18n="infoModal.denseLayerDesc"></span></li>
+                    <li><strong>Dense Layer 2:</strong> 64 → 32 <span data-i18n="infoModal.denseLayerDesc"></span></li>
+                    <li><strong data-i18n="infoModal.outputLayer"></strong> <span data-i18n="infoModal.outputLayerDesc"></span></li>
                 </ul>
 
-                <h4>3D Controls:</h4>
+                <h4 data-i18n="controls3d.title"></h4>
                 <ul>
-                    <li><strong>Rotate:</strong> Hold left mouse button and drag</li>
-                    <li><strong>Pan:</strong> Hold right mouse button and drag</li>
-                    <li><strong>Zoom:</strong> Use mouse wheel</li>
+                    <li><strong data-i18n="controls3d.rotate"></strong> <span data-i18n="controls3d.rotateDesktop"></span></li>
+                    <li><strong data-i18n="controls3d.pan"></strong> <span data-i18n="controls3d.panDesktop"></span></li>
+                    <li><strong data-i18n="controls3d.zoom"></strong> <span data-i18n="controls3d.zoomDesktop"></span></li>
                 </ul>
 
-                <h4>Color Coding:</h4>
+                <h4 data-i18n="infoModal.colorCoding"></h4>
                 <ul>
-                    <li><strong>Nodes:</strong> The color shows activation strength (dark blue tones for low/negative values, vibrant coral colors for strong positive activations)</li>
-                    <li><strong>Connections:</strong> Warm colors indicate strong positive contributions, cool tones negative influences, muted lines near zero.</li>
+                    <li><strong>Nodes:</strong> <span data-i18n="infoModal.colorCodingNodes"></span></li>
+                    <li><strong>Connections:</strong> <span data-i18n="infoModal.colorCodingConnections"></span></li>
                 </ul>
 
-                <h4>Training Your Own Model:</h4>
+                <h4 data-i18n="infoModal.training"></h4>
                 <ul>
-                    <li>Run <code>python training/mlp_train.py</code> to train the MLP (including Apple Metal acceleration, if available).</li>
-                    <li>The script writes <code>exports/mlp_weights.json</code>, which the visualizer reads on load.</li>
-                    <li>Change the number of hidden neurons, epochs, or export paths via the CLI options documented in <code>training/mlp_train.py</code>.</li>
+                    <li data-i18n-html="infoModal.trainingStep1"></li>
+                    <li data-i18n-html="infoModal.trainingStep2"></li>
+                    <li data-i18n-html="infoModal.trainingStep3"></li>
                 </ul>
 
-                <h4>Real-time Features:</h4>
+                <h4 data-i18n="infoModal.realtimeFeatures"></h4>
                 <ul>
-                    <li><strong>Layer Activations:</strong> Sphere instances show activations per neuron with color-coded strength.</li>
-                    <li><strong>Important Connections:</strong> Each target neuron highlights its strongest input weights for better readability.</li>
-                    <li><strong>Live Probabilities:</strong> The bar chart updates logits → Softmax values in real-time.</li>
+                    <li><strong>Layer Activations:</strong> <span data-i18n="infoModal.realtimeActivations"></span></li>
+                    <li><strong>Important Connections:</strong> <span data-i18n="infoModal.realtimeConnections"></span></li>
+                    <li><strong>Live Probabilities:</strong> <span data-i18n="infoModal.realtimeProbabilities"></span></li>
                 </ul>
 
-                <p>The network is intentionally kept compact to ensure smooth real-time rendering. Feel free to retrain with different layer sizes – just keep the architecture lean so the 3D view remains responsive.</p>
+                <p data-i18n="infoModal.note"></p>
             </div>
         </div>
     </div>
@@ -175,13 +185,12 @@ <h4>Real-time Features:</h4>
     <div id="advancedSettingsModal" class="advanced-modal" role="dialog" aria-modal="true" aria-labelledby="advancedSettingsTitle">
         <div class="advanced-modal-content">
             <div class="advanced-modal-header">
-                <h3 id="advancedSettingsTitle">Advanced Settings</h3>
+                <h3 id="advancedSettingsTitle" data-i18n="advancedSettings.title"></h3>
                 <button id="closeAdvancedSettings" class="close-modal-btn" type="button">×</button>
             </div>
             <div class="advanced-modal-body">
                 <div class="advanced-control">
-                    <label for="connectionLimitSlider" class="advanced-label">
-                        Maximum Connections per Neuron
+                    <label for="connectionLimitSlider" class="advanced-label" data-i18n="advancedSettings.maxConnections">
                     </label>
                     <div class="advanced-slider">
                         <input
@@ -194,13 +203,11 @@ <h3 id="advancedSettingsTitle">Advanced Settings</h3>
                         >
                         <span id="connectionLimitValue" class="advanced-value">24</span>
                     </div>
-                    <p class="advanced-hint">
-                        Controls how many of the strongest incoming weights per target neuron are displayed simultaneously; high values may slow down rendering.
+                    <p class="advanced-hint" data-i18n="advancedSettings.maxConnectionsHint">
                     </p>
                 </div>
                 <div class="advanced-control">
-                    <label for="connectionThresholdSlider" class="advanced-label">
-                        Hide Weak Connections
+                    <label for="connectionThresholdSlider" class="advanced-label" data-i18n="advancedSettings.hideWeakConnections">
                     </label>
                     <div class="advanced-slider">
                         <input
@@ -213,13 +220,11 @@ <h3 id="advancedSettingsTitle">Advanced Settings</h3>
                         >
                         <span id="connectionThresholdValue" class="advanced-value">0.0000</span>
                     </div>
-                    <p class="advanced-hint">
-                        Hides connections with low absolute weight; 0 shows all connections.
+                    <p class="advanced-hint" data-i18n="advancedSettings.hideWeakConnectionsHint">
                     </p>
                 </div>
                 <div class="advanced-control">
-                    <label for="connectionThicknessSlider" class="advanced-label">
-                        Connection Thickness
+                    <label for="connectionThicknessSlider" class="advanced-label" data-i18n="advancedSettings.connectionThickness">
                     </label>
                     <div class="advanced-slider">
                         <input
@@ -231,13 +236,11 @@ <h3 id="advancedSettingsTitle">Advanced Settings</h3>
                         >
                         <span id="connectionThicknessValue" class="advanced-value"></span>
                     </div>
-                    <p class="advanced-hint">
-                        Adjusts the radius of connection cylinders; higher values make all lines visibly thicker.
+                    <p class="advanced-hint" data-i18n="advancedSettings.connectionThicknessHint">
                     </p>
                 </div>
                 <div class="advanced-control">
-                    <label for="brushThicknessSlider" class="advanced-label">
-                        Brush Thickness
+                    <label for="brushThicknessSlider" class="advanced-label" data-i18n="advancedSettings.brushThickness">
                     </label>
                     <div class="advanced-slider">
                         <input
@@ -250,13 +253,11 @@ <h3 id="advancedSettingsTitle">Advanced Settings</h3>
                         >
                         <span id="brushThicknessValue" class="advanced-value">1.4</span>
                     </div>
-                    <p class="advanced-hint">
-                        Smaller values create finer lines; larger values fill the grid faster.
+                    <p class="advanced-hint" data-i18n="advancedSettings.brushThicknessHint">
                     </p>
                 </div>
                 <div class="advanced-control">
-                    <label for="brushStrengthSlider" class="advanced-label">
-                        Brush Strength
+                    <label for="brushStrengthSlider" class="advanced-label" data-i18n="advancedSettings.brushStrength">
                     </label>
                     <div class="advanced-slider">
                         <input
@@ -269,8 +270,7 @@ <h3 id="advancedSettingsTitle">Advanced Settings</h3>
                         >
                         <span id="brushStrengthValue" class="advanced-value">95%</span>
                     </div>
-                    <p class="advanced-hint">
-                        Determines how much a brush stroke increases pixel brightness.
+                    <p class="advanced-hint" data-i18n="advancedSettings.brushStrengthHint">
                     </p>
                 </div>
             </div>
diff --git a/test-i18n-browser.html b/test-i18n-browser.html
new file mode 100644
index 0000000..9ce2324
--- /dev/null
+++ b/test-i18n-browser.html
@@ -0,0 +1,492 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>i18n Browser Test Suite</title>
+    <style>
+        body {
+            font-family: system-ui, -apple-system, sans-serif;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            background: #f5f5f5;
+        }
+        .test-container {
+            background: white;
+            border-radius: 8px;
+            padding: 20px;
+            margin-bottom: 20px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .test-suite {
+            margin-bottom: 30px;
+        }
+        .test-suite h2 {
+            color: #333;
+            border-bottom: 2px solid #4CAF50;
+            padding-bottom: 10px;
+        }
+        .test-item {
+            padding: 10px;
+            margin: 5px 0;
+            border-left: 4px solid #ddd;
+            background: #fafafa;
+        }
+        .test-item.pass {
+            border-left-color: #4CAF50;
+            background: #e8f5e9;
+        }
+        .test-item.fail {
+            border-left-color: #f44336;
+            background: #ffebee;
+        }
+        .test-item .test-name {
+            font-weight: bold;
+            margin-bottom: 5px;
+        }
+        .test-item .test-message {
+            color: #666;
+            font-size: 0.9em;
+        }
+        .test-item .test-error {
+            color: #d32f2f;
+            font-family: monospace;
+            font-size: 0.85em;
+            margin-top: 5px;
+        }
+        .summary {
+            background: #2196F3;
+            color: white;
+            padding: 20px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            text-align: center;
+        }
+        .summary h1 {
+            margin: 0 0 10px 0;
+        }
+        .summary .stats {
+            font-size: 1.2em;
+        }
+        button {
+            background: #2196F3;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 16px;
+            margin: 5px;
+        }
+        button:hover {
+            background: #1976D2;
+        }
+        .controls {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        #testOutput {
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="summary" id="summary">
+        <h1>i18n Browser Test Suite</h1>
+        <div class="stats">Running tests...</div>
+    </div>
+
+    <div class="controls">
+        <button onclick="runAllTests()">Run All Tests</button>
+        <button onclick="testEnglish()">Test English</button>
+        <button onclick="testGerman()">Test German</button>
+        <button onclick="testLanguageSwitch()">Test Language Switch</button>
+    </div>
+
+    <div id="testOutput"></div>
+
+    <!-- Mock DOM elements for testing -->
+    <div id="testElements" style="display: none;">
+        <div data-i18n="drawing.title">Draw digit</div>
+        <div data-i18n="predictions.title">Digit Probabilities</div>
+        <div data-i18n-html="infoModal.description">Description</div>
+        <input type="text" data-i18n="drawing.title" placeholder="Placeholder">
+        <button data-i18n-aria-label="timeline.ariaLabel" aria-label="Test">Button</button>
+        <span id="languageToggleText">EN</span>
+    </div>
+
+    <script src="./assets/i18n.js"></script>
+    <script>
+        let testResults = {
+            passed: 0,
+            failed: 0,
+            total: 0
+        };
+
+        function assert(condition, message) {
+            if (!condition) {
+                throw new Error(message || 'Assertion failed');
+            }
+        }
+
+        function assertEqual(actual, expected, message) {
+            if (actual !== expected) {
+                throw new Error(message || `Expected "${expected}", but got "${actual}"`);
+            }
+        }
+
+        function assertIncludes(str, substr, message) {
+            if (!str || !str.includes(substr)) {
+                throw new Error(message || `Expected string to include "${substr}"`);
+            }
+        }
+
+        function runTest(suiteName, testName, testFn) {
+            testResults.total++;
+            const testItem = document.createElement('div');
+            testItem.className = 'test-item';
+            testItem.innerHTML = `<div class="test-name">${testName}</div>`;
+
+            try {
+                const result = testFn();
+                if (result instanceof Promise) {
+                    return result.then(() => {
+                        testItem.classList.add('pass');
+                        testItem.querySelector('.test-name').textContent = `✓ ${testName}`;
+                        testResults.passed++;
+                        updateSummary();
+                    }).catch(error => {
+                        testItem.classList.add('fail');
+                        testItem.innerHTML = `
+                            <div class="test-name">✗ ${testName}</div>
+                            <div class="test-error">${error.message}</div>
+                        `;
+                        testResults.failed++;
+                        updateSummary();
+                    });
+                } else {
+                    testItem.classList.add('pass');
+                    testItem.querySelector('.test-name').textContent = `✓ ${testName}`;
+                    testResults.passed++;
+                    updateSummary();
+                }
+            } catch (error) {
+                testItem.classList.add('fail');
+                testItem.innerHTML = `
+                    <div class="test-name">✗ ${testName}</div>
+                    <div class="test-error">${error.message}</div>
+                `;
+                testResults.failed++;
+                updateSummary();
+            }
+
+            const suite = document.querySelector(`[data-suite="${suiteName}"]`) || createSuite(suiteName);
+            suite.appendChild(testItem);
+            return Promise.resolve();
+        }
+
+        function createSuite(name) {
+            const suite = document.createElement('div');
+            suite.className = 'test-suite';
+            suite.setAttribute('data-suite', name);
+            suite.innerHTML = `<h2>${name}</h2>`;
+            document.getElementById('testOutput').appendChild(suite);
+            return suite;
+        }
+
+        function updateSummary() {
+            const summary = document.getElementById('summary');
+            summary.querySelector('.stats').textContent = 
+                `${testResults.passed} passed, ${testResults.failed} failed, ${testResults.total} total`;
+        }
+
+        function clearResults() {
+            testResults = { passed: 0, failed: 0, total: 0 };
+            document.getElementById('testOutput').innerHTML = '';
+        }
+
+        // Test Suite 1: Basic i18n Module Functionality
+        async function testBasicFunctionality() {
+            const suiteName = 'Basic i18n Module Functionality';
+            
+            await runTest(suiteName, 'window.i18n object exists', () => {
+                assert(window.i18n, 'window.i18n should exist');
+                assert(typeof window.i18n.init === 'function', 'window.i18n.init should be a function');
+                assert(typeof window.i18n.t === 'function', 'window.i18n.t should be a function');
+                assert(typeof window.i18n.switchLanguage === 'function', 'window.i18n.switchLanguage should be a function');
+                assert(typeof window.i18n.getCurrentLanguage === 'function', 'window.i18n.getCurrentLanguage should be a function');
+            });
+
+            await runTest(suiteName, 'getCurrentLanguage returns current language', () => {
+                const lang = window.i18n.getCurrentLanguage();
+                assert(lang === 'en' || lang === 'de', `Language should be 'en' or 'de', got '${lang}'`);
+            });
+
+            await runTest(suiteName, 't() function returns translations', async () => {
+                // Wait for i18n to initialize
+                await new Promise(resolve => setTimeout(resolve, 100));
+                const translation = window.i18n.t('drawing.title');
+                assert(translation, 'Translation should not be empty');
+                assert(typeof translation === 'string', 'Translation should be a string');
+            });
+
+            await runTest(suiteName, 't() function handles nested keys', async () => {
+                await new Promise(resolve => setTimeout(resolve, 100));
+                const translation = window.i18n.t('drawing.title');
+                assert(translation, 'Nested key translation should work');
+            });
+
+            await runTest(suiteName, 't() function handles missing keys', async () => {
+                await new Promise(resolve => setTimeout(resolve, 100));
+                const translation = window.i18n.t('nonexistent.key');
+                assertEqual(translation, 'nonexistent.key', 'Missing key should return key itself');
+            });
+
+            await runTest(suiteName, 't() function handles parameter substitution', async () => {
+                await new Promise(resolve => setTimeout(resolve, 100));
+                const translation = window.i18n.t('aria.loadRandom', { digit: 5 });
+                assertIncludes(translation, '5', 'Translation should include parameter value');
+            });
+        }
+
+        // Test Suite 2: Language Switching
+        async function testLanguageSwitching() {
+            const suiteName = 'Language Switching';
+            
+            await runTest(suiteName, 'switchLanguage changes language', async () => {
+                const initialLang = window.i18n.getCurrentLanguage();
+                const newLang = initialLang === 'en' ? 'de' : 'en';
+                
+                await window.i18n.switchLanguage(newLang);
+                await new Promise(resolve => setTimeout(resolve, 100));
+                
+                assertEqual(window.i18n.getCurrentLanguage(), newLang, 'Language should change');
+            });
+
+            await runTest(suiteName, 'switchLanguage updates HTML lang attribute', async () => {
+                const newLang = window.i18n.getCurrentLanguage() === 'en' ? 'de' : 'en';
+                await window.i18n.switchLanguage(newLang);
+                await new Promise(resolve => setTimeout(resolve, 100));
+                
+                assertEqual(document.documentElement.lang, newLang, 'HTML lang attribute should update');
+            });
+
+            await runTest(suiteName, 'switchLanguage updates document.title', async () => {
+                const newLang = window.i18n.getCurrentLanguage() === 'en' ? 'de' : 'en';
+                const oldTitle = document.title;
+                
+                await window.i18n.switchLanguage(newLang);
+                await new Promise(resolve => setTimeout(resolve, 100));
+                
+                assert(document.title !== oldTitle, 'Document title should change');
+            });
+
+            await runTest(suiteName, 'switchLanguage dispatches languageChanged event', async () => {
+                let eventFired = false;
+                window.addEventListener('languageChanged', () => {
+                    eventFired = true;
+                }, { once: true });
+
+                const newLang = window.i18n.getCurrentLanguage() === 'en' ? 'de' : 'en';
+                await window.i18n.switchLanguage(newLang);
+                await new Promise(resolve => setTimeout(resolve, 100));
+                
+                assert(eventFired, 'languageChanged event should be dispatched');
+            });
+
+            await runTest(suiteName, 'switchLanguage updates translations', async () => {
+                const enTranslation = window.i18n.t('drawing.title');
+                await window.i18n.switchLanguage('de');
+                await new Promise(resolve => setTimeout(resolve, 100));
+                
+                const deTranslation = window.i18n.t('drawing.title');
+                assert(enTranslation !== deTranslation, 'Translations should differ between languages');
+            });
+        }
+
+        // Test Suite 3: DOM Element Translation
+        async function testDOMTranslation() {
+            const suiteName = 'DOM Element Translation';
+            const testContainer = document.getElementById('testElements');
+            
+            await runTest(suiteName, 'data-i18n updates textContent', async () => {
+                await window.i18n.switchLanguage('en');
+                await new Promise(resolve => setTimeout(resolve, 100));
+                
+                const element = testContainer.querySelector('[data-i18n="drawing.title"]');
+                const translation = window.i18n.t('drawing.title');
+                assertEqual(element.textContent, translation, 'Element textContent should match translation');
+            });
+
+            await runTest(suiteName, 'data-i18n-html updates innerHTML', async () => {
+                await window.i18n.switchLanguage('en');
+                await new Promise(resolve => setTimeout(resolve, 100));
+                
+                const element = testContainer.querySelector('[data-i18n-html="infoModal.description"]');
+                const translation = window.i18n.t('infoModal.description');
+                assertIncludes(element.innerHTML, translation, 'Element innerHTML should include translation');
+            });
+
+            await runTest(suiteName, 'data-i18n-aria-label updates aria-label', async () => {
+                await window.i18n.switchLanguage('en');
+                await new Promise(resolve => setTimeout(resolve, 100));
+                
+                const element = testContainer.querySelector('[data-i18n-aria-label]');
+                const translation = window.i18n.t('timeline.ariaLabel');
+                assertEqual(element.getAttribute('aria-label'), translation, 'aria-label should match translation');
+            });
+
+            await runTest(suiteName, 'data-i18n updates placeholder for input elements', async () => {
+                await window.i18n.switchLanguage('en');
+                await new Promise(resolve => setTimeout(resolve, 100));
+                
+                const element = testContainer.querySelector('input[data-i18n]');
+                if (element) {
+                    const translation = window.i18n.t('drawing.title');
+                    assertEqual(element.placeholder, translation, 'Input placeholder should match translation');
+                }
+            });
+
+            await runTest(suiteName, 'languageToggleText updates on language change', async () => {
+                const toggleText = document.getElementById('languageToggleText');
+                const initialText = toggleText.textContent;
+                
+                const newLang = window.i18n.getCurrentLanguage() === 'en' ? 'de' : 'en';
+                await window.i18n.switchLanguage(newLang);
+                await new Promise(resolve => setTimeout(resolve, 100));
+                
+                const newText = toggleText.textContent;
+                assert(newText !== initialText, 'Language toggle text should update');
+            });
+        }
+
+        // Test Suite 4: Error Handling
+        async function testErrorHandling() {
+            const suiteName = 'Error Handling';
+            
+            await runTest(suiteName, 't() returns key for missing translation', () => {
+                const result = window.i18n.t('nonexistent.key.path');
+                assertEqual(result, 'nonexistent.key.path', 'Should return key for missing translation');
+            });
+
+            await runTest(suiteName, 't() handles empty parameters object', () => {
+                const result = window.i18n.t('drawing.title', {});
+                assert(typeof result === 'string', 'Should handle empty parameters');
+            });
+
+            await runTest(suiteName, 't() handles missing parameter values', () => {
+                const result = window.i18n.t('aria.loadRandom', {});
+                // Should still return translation with {digit} placeholder or handle gracefully
+                assert(typeof result === 'string', 'Should handle missing parameter values');
+            });
+        }
+
+        // Test Suite 5: LocalStorage Persistence
+        async function testLocalStorage() {
+            const suiteName = 'LocalStorage Persistence';
+            
+            await runTest(suiteName, 'Language preference is saved to localStorage', async () => {
+                const testLang = 'de';
+                await window.i18n.switchLanguage(testLang);
+                await new Promise(resolve => setTimeout(resolve, 100));
+                
+                const saved = localStorage.getItem('preferredLanguage');
+                assertEqual(saved, testLang, 'Language should be saved to localStorage');
+            });
+
+            await runTest(suiteName, 'Language preference is loaded from localStorage on init', async () => {
+                localStorage.setItem('preferredLanguage', 'de');
+                await window.i18n.init('de');
+                await new Promise(resolve => setTimeout(resolve, 100));
+                
+                const currentLang = window.i18n.getCurrentLanguage();
+                // Note: This might not work if i18n already initialized, but structure is correct
+                assert(currentLang === 'en' || currentLang === 'de', 'Language should be loadable');
+            });
+        }
+
+        // Test Suite 6: Translation Completeness
+        async function testTranslationCompleteness() {
+            const suiteName = 'Translation Completeness';
+            
+            await runTest(suiteName, 'All required translation keys exist in English', async () => {
+                await window.i18n.switchLanguage('en');
+                await new Promise(resolve => setTimeout(resolve, 100));
+                
+                const requiredKeys = [
+                    'drawing.title',
+                    'predictions.title',
+                    'network.overview',
+                    'timeline.title',
+                    'infoModal.title',
+                    'advancedSettings.title'
+                ];
+                
+                for (const key of requiredKeys) {
+                    const translation = window.i18n.t(key);
+                    assert(translation !== key, `Translation key "${key}" should exist in English`);
+                }
+            });
+
+            await runTest(suiteName, 'All required translation keys exist in German', async () => {
+                await window.i18n.switchLanguage('de');
+                await new Promise(resolve => setTimeout(resolve, 100));
+                
+                const requiredKeys = [
+                    'drawing.title',
+                    'predictions.title',
+                    'network.overview',
+                    'timeline.title',
+                    'infoModal.title',
+                    'advancedSettings.title'
+                ];
+                
+                for (const key of requiredKeys) {
+                    const translation = window.i18n.t(key);
+                    assert(translation !== key, `Translation key "${key}" should exist in German`);
+                }
+            });
+        }
+
+        // Main test runner
+        async function runAllTests() {
+            clearResults();
+            
+            await testBasicFunctionality();
+            await testLanguageSwitching();
+            await testDOMTranslation();
+            await testErrorHandling();
+            await testLocalStorage();
+            await testTranslationCompleteness();
+        }
+
+        async function testEnglish() {
+            clearResults();
+            await window.i18n.switchLanguage('en');
+            await new Promise(resolve => setTimeout(resolve, 100));
+            await testTranslationCompleteness();
+        }
+
+        async function testGerman() {
+            clearResults();
+            await window.i18n.switchLanguage('de');
+            await new Promise(resolve => setTimeout(resolve, 100));
+            await testTranslationCompleteness();
+        }
+
+        async function testLanguageSwitch() {
+            clearResults();
+            await testLanguageSwitching();
+        }
+
+        // Auto-run tests on load
+        window.addEventListener('DOMContentLoaded', () => {
+            setTimeout(() => {
+                runAllTests();
+            }, 500);
+        });
+    </script>
+</body>
+</html>
+
diff --git a/test-i18n.js b/test-i18n.js
index f70d13d..88157fc 100644
--- a/test-i18n.js
+++ b/test-i18n.js
@@ -1,39 +1,87 @@
 /**
- * Test suite for internationalization (i18n) changes
- * Tests that verify the application has been translated from German to English
+ * Test suite for internationalization (i18n) functionality
+ * Tests the i18n module, translation system, language switching, and integration
  */
 
 const fs = require('fs');
 const path = require('path');
 
-// Simple test runner
+// Simple test runner with better output
 class TestRunner {
   constructor() {
     this.tests = [];
     this.passed = 0;
     this.failed = 0;
+    this.suites = [];
+    this.currentSuite = null;
+  }
+
+  suite(name, fn) {
+    this.currentSuite = { name, tests: [] };
+    this.suites.push(this.currentSuite);
+    fn();
+    this.currentSuite = null;
   }
 
   test(name, fn) {
-    this.tests.push({ name, fn });
+    const testObj = { name, fn };
+    this.tests.push(testObj);
+    if (this.currentSuite) {
+      this.currentSuite.tests.push(testObj);
+    }
   }
 
   async run() {
-    console.log('Running i18n tests...\n');
+    console.log('='.repeat(80));
+    console.log('Running Comprehensive i18n Test Suite');
+    console.log('='.repeat(80));
+    console.log();
+    
+    for (const suite of this.suites) {
+      console.log(`\n📦 ${suite.name}`);
+      console.log('-'.repeat(80));
+      
+      for (const { name, fn } of suite.tests) {
+        try {
+          await fn();
+          console.log(`  ✓ ${name}`);
+          this.passed++;
+        } catch (error) {
+          console.error(`  ✗ ${name}`);
+          console.error(`    ${error.message}`);
+          if (error.stack) {
+            const stackLines = error.stack.split('\n').slice(1, 4);
+            stackLines.forEach(line => console.error(`    ${line.trim()}`));
+          }
+          this.failed++;
+        }
+      }
+    }
     
-    for (const { name, fn } of this.tests) {
-      try {
-        await fn();
-        console.log(`✓ ${name}`);
-        this.passed++;
-      } catch (error) {
-        console.error(`✗ ${name}`);
-        console.error(`  ${error.message}`);
-        this.failed++;
+    // Run tests not in suites
+    if (this.tests.length > this.suites.reduce((sum, s) => sum + s.tests.length, 0)) {
+      console.log(`\n📦 Other Tests`);
+      console.log('-'.repeat(80));
+      for (const { name, fn } of this.tests) {
+        const inSuite = this.suites.some(s => s.tests.some(t => t.name === name));
+        if (!inSuite) {
+          try {
+            await fn();
+            console.log(`  ✓ ${name}`);
+            this.passed++;
+          } catch (error) {
+            console.error(`  ✗ ${name}`);
+            console.error(`    ${error.message}`);
+            this.failed++;
+          }
+        }
       }
     }
 
-    console.log(`\n${this.passed} passed, ${this.failed} failed`);
+    console.log('\n' + '='.repeat(80));
+    console.log(`Results: ${this.passed} passed, ${this.failed} failed`);
+    console.log('='.repeat(80));
+    
     process.exit(this.failed > 0 ? 1 : 0);
   }
 }
@@ -51,296 +99,691 @@ function assert(condition, message) {
   }
 }
 
-// Test HTML language attribute
-runner.test('HTML lang attribute is set to "en"', () => {
-  const html = readFile('index.html');
-  assert(html.includes('<html lang="en">'), 'HTML lang attribute should be "en"');
-  assert(!html.includes('<html lang="de">'), 'HTML should not have lang="de"');
-});
+function assertEqual(actual, expected, message) {
+  if (actual !== expected) {
+    throw new Error(message || `Expected "${expected}", but got "${actual}"`);
+  }
+}
 
-// Test page title
-runner.test('Page title is in English', () => {
-  const html = readFile('index.html');
-  assert(html.includes('<title>MNIST MLP – Inference Visualization</title>'), 
-    'Page title should be in English');
-  // Ensure no German title
-  assert(!html.includes('Visualisierung'), 'Page title should not contain German text');
-});
+function assertIncludes(str, substr, message) {
+  if (!str.includes(substr)) {
+    throw new Error(message || `Expected string to include "${substr}"`);
+  }
+}
 
-// Test instruction overlays
-runner.test('Instruction overlays are in English', () => {
-  const html = readFile('index.html');
-  
-  // Desktop instructions
-  assert(html.includes('Drawing:'), 'Desktop instructions should contain "Drawing:"');
-  assert(html.includes('3D Controls:'), 'Desktop instructions should contain "3D Controls:"');
-  assert(html.includes('Click and drag on the grid'), 'Instructions should be in English');
-  
-  // Mobile instructions
-  assert(html.includes('Touch Controls'), 'Mobile instructions should have "Touch Controls" title');
-  assert(html.includes('Tap and drag on the grid'), 'Mobile instructions should be in English');
-});
+function assertNotIncludes(str, substr, message) {
+  if (str.includes(substr)) {
+    throw new Error(message || `Expected string to not include "${substr}"`);
+  }
+}
 
-// Test modal content
-runner.test('Info modal content is in English', () => {
-  const html = readFile('index.html');
-  
-  assert(html.includes('MNIST Digit Classification – Inference Visualization'), 
-    'Info modal title should be in English');
-  assert(html.includes('Interactive Neural Network Visualization'), 
-    'Info modal should contain English description');
-  assert(html.includes('How it works:'), 'Info modal should have "How it works:" section');
-  assert(html.includes('Network Architecture'), 'Info modal should have "Network Architecture" section');
-  assert(html.includes('Input Layer:'), 'Info modal should describe layers in English');
-  assert(html.includes('3D Controls:'), 'Info modal should have "3D Controls:" section');
-  assert(html.includes('Color Coding:'), 'Info modal should have "Color Coding:" section');
-  assert(html.includes('Training Your Own Model:'), 'Info modal should have training section in English');
-  assert(html.includes('Real-time Features:'), 'Info modal should have real-time features section');
-});
+// Load translation files
+let enTranslations, deTranslations;
+try {
+  enTranslations = JSON.parse(readFile('assets/i18n/en.json'));
+  deTranslations = JSON.parse(readFile('assets/i18n/de.json'));
+} catch (error) {
+  console.error('Failed to load translation files:', error);
+  process.exit(1);
+}
 
-// Test advanced settings modal
-runner.test('Advanced settings modal is in English', () => {
-  const html = readFile('index.html');
-  
-  assert(html.includes('Advanced Settings'), 'Advanced settings modal title should be in English');
-  assert(html.includes('Maximum Connections per Neuron'), 'Settings labels should be in English');
-  assert(html.includes('Hide Weak Connections'), 'Settings should have "Hide Weak Connections"');
-  assert(html.includes('Connection Thickness'), 'Settings should have "Connection Thickness"');
-  assert(html.includes('Brush Thickness'), 'Settings should have "Brush Thickness"');
-  assert(html.includes('Brush Strength'), 'Settings should have "Brush Strength"');
-});
+// ============================================================================
+// Test Suite 1: Translation File Structure and Completeness
+// ============================================================================
 
-// Test timeline overlay
-runner.test('Timeline overlay is in English', () => {
-  const html = readFile('index.html');
-  
-  assert(html.includes('Training Progress'), 'Timeline should have "Training Progress" label');
-  assert(html.includes('aria-label="Training Progress"'), 'Timeline slider should have English aria-label');
-});
+runner.suite('Translation File Structure and Completeness', () => {
+  runner.test('English translation file is valid JSON', () => {
+    assert(typeof enTranslations === 'object', 'en.json should be a valid JSON object');
+    assert(enTranslations !== null, 'en.json should not be null');
+  });
 
-// Test error messages in JavaScript
-runner.test('Error messages in main.js are in English', () => {
-  const js = readFile('assets/main.js');
-  
-  // Check for English error messages
-  assert(js.includes('Could not load MNIST manifest'), 'MNIST manifest error should be in English');
-  assert(js.includes('Manifest does not contain valid file paths'), 'Manifest validation error should be in English');
-  assert(js.includes('Could not load MNIST image data'), 'Image data error should be in English');
-  assert(js.includes('Could not load MNIST label data'), 'Label data error should be in English');
-  assert(js.includes('Could not infer sample size'), 'Sample size error should be in English');
-  assert(js.includes('Number of labels does not match'), 'Label count error should be in English');
-  assert(js.includes('Invalid network definition'), 'Network definition error should be in English');
-  assert(js.includes('No valid timeline snapshots found'), 'Timeline error should be in English');
-  assert(js.includes('Network weights could not be loaded'), 'Weights loading error should be in English');
-  assert(js.includes('Base64 decoding is not available'), 'Base64 error should be in English');
-  assert(js.includes('Float16 data has invalid length'), 'Float16 error should be in English');
-  assert(js.includes('Snapshot could not be loaded'), 'Snapshot loading error should be in English');
-  assert(js.includes('Snapshot file does not contain valid layer data'), 'Snapshot validation error should be in English');
-  assert(js.includes('Grid container not found'), 'Grid container error should be in English');
-  assert(js.includes('Invalid pixel values for drawing pad'), 'Pixel values error should be in English');
-  
-  // Ensure no German error messages (common German words that shouldn't appear)
-  assert(!js.includes('Fehler beim Laden'), 'Should not contain German "Fehler beim Laden"');
-  assert(!js.includes('Konnte nicht'), 'Should not contain German "Konnte nicht"');
-});
+  runner.test('German translation file is valid JSON', () => {
+    assert(typeof deTranslations === 'object', 'de.json should be a valid JSON object');
+    assert(deTranslations !== null, 'de.json should not be null');
+  });
 
-// Test UI text in JavaScript
-runner.test('UI text elements in main.js are in English', () => {
-  const js = readFile('assets/main.js');
-  
-  assert(js.includes('Draw digit'), 'Drawing pad title should be "Draw digit"');
-  assert(js.includes('Digit Probabilities'), 'Probability panel should have "Digit Probabilities" title');
-  assert(js.includes('Network Overview'), 'Network info panel should have "Network Overview" title');
-  assert(js.includes('Clear selection'), 'Neuron detail panel should have "Clear selection" button');
-  assert(js.includes('Input Layer Size:'), 'Neuron detail should show "Input Layer Size:"');
-  assert(js.includes('Output Layer Size:'), 'Neuron detail should show "Output Layer Size:"');
-  assert(js.includes('Incoming Contributions'), 'Neuron detail should have "Incoming Contributions" section');
-  assert(js.includes('Outgoing Contributions'), 'Neuron detail should have "Outgoing Contributions" section');
-  assert(js.includes('Source'), 'Neuron detail should have "Source" label');
-  assert(js.includes('Target'), 'Neuron detail should have "Target" label');
-  assert(js.includes('Weight'), 'Neuron detail should have "Weight" label');
-  assert(js.includes('Contribution'), 'Neuron detail should have "Contribution" label');
-  assert(js.includes('Visualization could not be initialized'), 'Initialization error message should be in English');
+  runner.test('Both translation files have the same top-level keys', () => {
+    const enKeys = Object.keys(enTranslations).sort();
+    const deKeys = Object.keys(deTranslations).sort();
+    assertEqual(
+      JSON.stringify(enKeys),
+      JSON.stringify(deKeys),
+      'Translation files should have the same top-level keys'
+    );
+  });
+
+  runner.test('Translation files have required top-level sections', () => {
+    const requiredSections = [
+      'pageTitle',
+      'drawing',
+      'controls3d',
+      'mobile',
+      'predictions',
+      'network',
+      'neuronDetail',
+      'timeline',
+      'infoModal',
+      'advancedSettings',
+      'errors',
+      'aria',
+      'fps'
+    ];
+    
+    for (const section of requiredSections) {
+      assert(section in enTranslations, `en.json missing required section: ${section}`);
+      assert(section in deTranslations, `de.json missing required section: ${section}`);
+    }
+  });
+
+  runner.test('All translation keys are strings', () => {
+    function checkStrings(obj, path = '') {
+      for (const [key, value] of Object.entries(obj)) {
+        const currentPath = path ? `${path}.${key}` : key;
+        if (typeof value === 'object' && value !== null) {
+          checkStrings(value, currentPath);
+        } else {
+          assert(
+            typeof value === 'string',
+            `Translation value at "${currentPath}" should be a string, got ${typeof value}`
+          );
+        }
+      }
+    }
+    
+    checkStrings(enTranslations);
+    checkStrings(deTranslations);
+  });
+
+  runner.test('Nested translation structures match between languages', () => {
+    function getStructure(obj, path = '') {
+      const structure = {};
+      for (const [key, value] of Object.entries(obj)) {
+        const currentPath = path ? `${path}.${key}` : key;
+        if (typeof value === 'object' && value !== null) {
+          structure[currentPath] = getStructure(value, currentPath);
+        } else {
+          structure[currentPath] = typeof value;
+        }
+      }
+      return structure;
+    }
+    
+    const enStructure = JSON.stringify(getStructure(enTranslations));
+    const deStructure = JSON.stringify(getStructure(deTranslations));
+    
+    assertEqual(
+      enStructure,
+      deStructure,
+      'Translation file structures should match exactly'
+    );
+  });
+
+  runner.test('Parameter placeholders are consistent between languages', () => {
+    function extractParams(obj) {
+      const params = new Set();
+      function traverse(o) {
+        for (const value of Object.values(o)) {
+          if (typeof value === 'string') {
+            const matches = value.match(/\{(\w+)\}/g);
+            if (matches) {
+              matches.forEach(m => params.add(m));
+            }
+          } else if (typeof value === 'object' && value !== null) {
+            traverse(value);
+          }
+        }
+      }
+      traverse(obj);
+      return params;
+    }
+    
+    const enParams = Array.from(extractParams(enTranslations)).sort();
+    const deParams = Array.from(extractParams(deTranslations)).sort();
+    
+    assertEqual(
+      JSON.stringify(enParams),
+      JSON.stringify(deParams),
+      'Parameter placeholders should be consistent between languages'
+    );
+  });
 });
 
-// Test aria-labels
-runner.test('Aria-labels are in English', () => {
-  const html = readFile('index.html');
-  const js = readFile('assets/main.js');
-  
-  // HTML aria-labels
-  assert(html.includes('aria-label="Training Progress"'), 'Timeline slider should have English aria-label');
-  
-  // JavaScript-generated aria-labels
-  assert(js.includes('aria-label'), 'Should have aria-label attributes');
-  assert(js.includes('Load random'), 'MNIST sample buttons should have English aria-label');
+// ============================================================================
+// Test Suite 2: i18n.js Module Code Analysis
+// ============================================================================
+
+runner.suite('i18n.js Module Code Analysis', () => {
+  let i18nCode;
   
-  // Ensure no German aria-labels
-  assert(!html.includes('aria-label="Fortschritt"'), 'Should not have German aria-labels');
+  runner.test('i18n.js file exists and is readable', () => {
+    i18nCode = readFile('assets/i18n.js');
+    assert(i18nCode.length > 0, 'i18n.js should not be empty');
+  });
+
+  runner.test('i18n.js exports initI18n function', () => {
+    assertIncludes(i18nCode, 'function initI18n', 'Should define initI18n function');
+    assertIncludes(i18nCode, 'async function initI18n', 'initI18n should be async');
+  });
+
+  runner.test('i18n.js exports t (translation) function', () => {
+    assertIncludes(i18nCode, 'function t(', 'Should define t function');
+  });
+
+  runner.test('i18n.js exports switchLanguage function', () => {
+    assertIncludes(i18nCode, 'function switchLanguage', 'Should define switchLanguage function');
+    assertIncludes(i18nCode, 'async function switchLanguage', 'switchLanguage should be async');
+  });
+
+  runner.test('i18n.js exports getCurrentLanguage function', () => {
+    assertIncludes(i18nCode, 'function getCurrentLanguage', 'Should define getCurrentLanguage function');
+  });
+
+  runner.test('i18n.js exports applyTranslations function', () => {
+    assertIncludes(i18nCode, 'function applyTranslations', 'Should define applyTranslations function');
+  });
+
+  runner.test('i18n.js handles data-i18n attributes', () => {
+    assertIncludes(i18nCode, 'data-i18n', 'Should handle data-i18n attributes');
+    assertIncludes(i18nCode, 'querySelectorAll', 'Should use querySelectorAll for data-i18n');
+  });
+
+  runner.test('i18n.js handles data-i18n-html attributes', () => {
+    assertIncludes(i18nCode, 'data-i18n-html', 'Should handle data-i18n-html attributes');
+  });
+
+  runner.test('i18n.js handles data-i18n-aria-label attributes', () => {
+    assertIncludes(i18nCode, 'data-i18n-aria-label', 'Should handle data-i18n-aria-label attributes');
+  });
+
+  runner.test('i18n.js supports parameter substitution', () => {
+    assertIncludes(i18nCode, 'replace(/\\{(\\w+)\\}/g', 'Should support parameter substitution with {param} syntax');
+  });
+
+  runner.test('i18n.js uses localStorage for language preference', () => {
+    assertIncludes(i18nCode, 'localStorage', 'Should use localStorage for persistence');
+    assertIncludes(i18nCode, 'preferredLanguage', 'Should store preferredLanguage in localStorage');
+  });
+
+  runner.test('i18n.js updates HTML lang attribute', () => {
+    assertIncludes(i18nCode, 'document.documentElement.lang', 'Should update HTML lang attribute');
+  });
+
+  runner.test('i18n.js updates document.title', () => {
+    assertIncludes(i18nCode, 'document.title', 'Should update document.title');
+  });
+
+  runner.test('i18n.js dispatches languageChanged event', () => {
+    assertIncludes(i18nCode, 'languageChanged', 'Should dispatch languageChanged event');
+    assertIncludes(i18nCode, 'CustomEvent', 'Should use CustomEvent for language changes');
+  });
+
+  runner.test('i18n.js has error handling for failed translation loads', () => {
+    assertIncludes(i18nCode, 'catch', 'Should have error handling');
+    assertIncludes(i18nCode, 'initI18n(\'en\')', 'Should fallback to English on error');
+  });
+
+  runner.test('i18n.js exports window.i18n object', () => {
+    assertIncludes(i18nCode, 'window.i18n', 'Should export window.i18n object');
+    assertIncludes(i18nCode, 'init:', 'Should export init function');
+    assertIncludes(i18nCode, 't,', 'Should export t function');
+    assertIncludes(i18nCode, 'switchLanguage,', 'Should export switchLanguage function');
+    assertIncludes(i18nCode, 'getCurrentLanguage', 'Should export getCurrentLanguage function');
+  });
+
+  runner.test('i18n.js initializes on DOMContentLoaded', () => {
+    assertIncludes(i18nCode, 'DOMContentLoaded', 'Should initialize on DOMContentLoaded');
+  });
+
+  runner.test('i18n.js sets up language toggle button', () => {
+    assertIncludes(i18nCode, 'languageToggleButton', 'Should handle language toggle button');
+    assertIncludes(i18nCode, 'addEventListener', 'Should add event listener for toggle');
+  });
 });
 
-// Test number formatting locale
-runner.test('Number formatting uses en-US locale', () => {
-  const js = readFile('assets/main.js');
-  
-  // Check that toLocaleString is used (which defaults to en-US in Node.js/browser)
-  // The function should use toLocaleString() without specifying a locale
-  assert(js.includes('toLocaleString()'), 'Should use toLocaleString for number formatting');
-  
-  // Verify it's not using de-DE locale
-  assert(!js.includes('toLocaleString("de-DE"'), 'Should not use German locale for number formatting');
-  assert(!js.includes('toLocaleString(\'de-DE\''), 'Should not use German locale for number formatting');
-  
-  // Test the actual formatting function behavior
-  // In Node.js, toLocaleString() without locale uses system locale, but in browser it uses en-US
-  // We'll test that the function exists and doesn't explicitly use de-DE
-  const formatIntegerMatch = js.match(/function formatInteger\([^)]*\)\s*\{[^}]*toLocaleString\([^)]*\)/s);
-  assert(formatIntegerMatch, 'formatInteger function should use toLocaleString');
-  
-  // Test actual number formatting behavior
-  // en-US uses commas as thousands separators (1,234,567)
-  // de-DE uses periods as thousands separators (1.234.567)
-  // We'll simulate the formatInteger function
-  function formatInteger(value) {
-    if (!Number.isFinite(value)) return "";
-    return Math.round(value).toLocaleString();
-  }
-  
-  // Test with a large number - en-US should use commas
-  const testNumber = 1234567;
-  const formatted = formatInteger(testNumber);
-  
-  // In Node.js, this might use system locale, but we check it doesn't use German format
-  // German format would be "1.234.567" (periods), English is "1,234,567" (commas)
-  // If it uses commas, it's likely en-US; if it uses periods, it might be de-DE
-  // We'll check that it's not the German format
-  if (formatted.includes('.') && formatted.split('.').length > 2) {
-    // Multiple periods suggest German format (though could be decimal in some locales)
-    // We'll be lenient here since Node.js uses system locale
-    console.warn('  ⚠ Note: Number formatting may use system locale in Node.js');
-  }
+// ============================================================================
+// Test Suite 3: HTML Integration
+// ============================================================================
+
+runner.suite('HTML Integration', () => {
+  let html;
   
-  // The key test: ensure the code doesn't explicitly specify de-DE
-  assert(!js.match(/toLocaleString\(["']de-DE["']/i), 'Code should not explicitly use German locale');
+  runner.test('HTML file exists and is readable', () => {
+    html = readFile('index.html');
+    assert(html.length > 0, 'index.html should not be empty');
+  });
+
+  runner.test('HTML includes i18n.js script', () => {
+    assertIncludes(html, 'i18n.js', 'Should include i18n.js script');
+    assertIncludes(html, '<script src="./assets/i18n.js"></script>', 'Should load i18n.js before main.js');
+  });
+
+  runner.test('HTML has language toggle button', () => {
+    assertIncludes(html, 'languageToggleButton', 'Should have language toggle button');
+    assertIncludes(html, 'id="languageToggleButton"', 'Language toggle should have correct ID');
+  });
+
+  runner.test('HTML has language toggle text element', () => {
+    assertIncludes(html, 'languageToggleText', 'Should have language toggle text element');
+    assertIncludes(html, 'id="languageToggleText"', 'Language toggle text should have correct ID');
+  });
+
+  runner.test('HTML lang attribute is set', () => {
+    assertIncludes(html, '<html lang="en">', 'HTML should have lang="en" attribute');
+  });
+
+  runner.test('HTML uses data-i18n attributes for translations', () => {
+    assertIncludes(html, 'data-i18n=', 'Should use data-i18n attributes');
+    // Count occurrences
+    const matches = html.match(/data-i18n=/g);
+    assert(matches && matches.length > 10, 'Should have multiple data-i18n attributes');
+  });
+
+  runner.test('HTML uses data-i18n-html for HTML content', () => {
+    assertIncludes(html, 'data-i18n-html=', 'Should use data-i18n-html attributes');
+  });
+
+  runner.test('HTML uses data-i18n-aria-label for aria-labels', () => {
+    assertIncludes(html, 'data-i18n-aria-label=', 'Should use data-i18n-aria-label attributes');
+  });
+
+  runner.test('HTML has translation keys for drawing section', () => {
+    assertIncludes(html, 'data-i18n="drawing.instructions"', 'Should translate drawing instructions');
+    assertIncludes(html, 'data-i18n="drawing.mobileInstructions"', 'Should translate mobile instructions');
+  });
+
+  runner.test('HTML has translation keys for 3D controls', () => {
+    assertIncludes(html, 'data-i18n="controls3d.title"', 'Should translate 3D controls title');
+    assertIncludes(html, 'data-i18n="controls3d.instructions"', 'Should translate 3D controls instructions');
+  });
+
+  runner.test('HTML has translation keys for timeline', () => {
+    assertIncludes(html, 'data-i18n="timeline.title"', 'Should translate timeline title');
+    assertIncludes(html, 'data-i18n-aria-label="timeline.ariaLabel"', 'Should translate timeline aria-label');
+  });
+
+  runner.test('HTML has translation keys for info modal', () => {
+    assertIncludes(html, 'data-i18n="infoModal.title"', 'Should translate info modal title');
+    assertIncludes(html, 'data-i18n="infoModal.subtitle"', 'Should translate info modal subtitle');
+    assertIncludes(html, 'data-i18n="infoModal.description"', 'Should translate info modal description');
+  });
+
+  runner.test('HTML has translation keys for advanced settings', () => {
+    assertIncludes(html, 'data-i18n="advancedSettings.title"', 'Should translate advanced settings title');
+    assertIncludes(html, 'data-i18n="advancedSettings.maxConnections"', 'Should translate settings labels');
+  });
+
+  runner.test('All data-i18n keys exist in translation files', () => {
+    const dataI18nMatches = html.match(/data-i18n="([^"]+)"/g) || [];
+    const dataI18nHtmlMatches = html.match(/data-i18n-html="([^"]+)"/g) || [];
+    const dataI18nAriaMatches = html.match(/data-i18n-aria-label="([^"]+)"/g) || [];
+    
+    const allKeys = [
+      ...dataI18nMatches.map(m => m.match(/"([^"]+)"/)[1]),
+      ...dataI18nHtmlMatches.map(m => m.match(/"([^"]+)"/)[1]),
+      ...dataI18nAriaMatches.map(m => m.match(/"([^"]+)"/)[1])
+    ];
+    
+    function getValue(obj, keyPath) {
+      const keys = keyPath.split('.');
+      let value = obj;
+      for (const key of keys) {
+        if (value && typeof value === 'object' && key in value) {
+          value = value[key];
+        } else {
+          return undefined;
+        }
+      }
+      return value;
+    }
+    
+    for (const key of allKeys) {
+      const enValue = getValue(enTranslations, key);
+      const deValue = getValue(deTranslations, key);
+      assert(enValue !== undefined, `Translation key "${key}" not found in en.json`);
+      assert(deValue !== undefined, `Translation key "${key}" not found in de.json`);
+      assert(typeof enValue === 'string', `Translation value for "${key}" in en.json should be a string`);
+      assert(typeof deValue === 'string', `Translation value for "${key}" in de.json should be a string`);
+    }
+  });
 });
 
-// Test console messages
-runner.test('Console messages are in English', () => {
-  const js = readFile('assets/main.js');
-  
-  // Check for English console messages
-  assert(js.includes('MNIST test data could not be loaded'), 'Console warning should be in English');
-  assert(js.includes('Could not resolve relative URL'), 'Console warning should be in English');
-  assert(js.includes('Error updating snapshot:'), 'Console error should be in English');
+// ============================================================================
+// Test Suite 4: JavaScript Integration
+// ============================================================================
+
+runner.suite('JavaScript Integration', () => {
+  let mainJs;
   
-  // Ensure no German console messages
-  assert(!js.includes('Fehler beim Aktualisieren'), 'Should not contain German "Fehler beim Aktualisieren"');
-  assert(!js.includes('Fehler beim Laden'), 'Should not contain German "Fehler beim Laden"');
-  assert(!js.includes('Konnte nicht'), 'Should not contain German "Konnte nicht"');
+  runner.test('main.js file exists and is readable', () => {
+    mainJs = readFile('assets/main.js');
+    assert(mainJs.length > 0, 'main.js should not be empty');
+  });
+
+  runner.test('main.js uses t() function for translations', () => {
+    assertIncludes(mainJs, 'function t(', 'Should define t() helper function');
+    assertIncludes(mainJs, 'window.i18n', 'Should check for window.i18n');
+  });
+
+  runner.test('main.js uses translations for error messages', () => {
+    assertIncludes(mainJs, 't("errors.', 'Should use t() for error messages');
+    assertIncludes(mainJs, 't("errors.initializationFailed")', 'Should translate initialization error');
+  });
+
+  runner.test('main.js uses translations for UI elements', () => {
+    assertIncludes(mainJs, 't("drawing.title")', 'Should translate drawing title');
+    assertIncludes(mainJs, 't("predictions.title")', 'Should translate predictions title');
+    assertIncludes(mainJs, 't("network.overview")', 'Should translate network overview');
+  });
+
+  runner.test('main.js uses translations with parameters', () => {
+    assertIncludes(mainJs, 't("aria.loadRandom", { digit })', 'Should use translations with parameters');
+  });
+
+  runner.test('main.js listens for languageChanged event', () => {
+    assertIncludes(mainJs, 'languageChanged', 'Should listen for languageChanged event');
+    assertIncludes(mainJs, 'addEventListener("languageChanged"', 'Should add languageChanged listener');
+  });
+
+  runner.test('main.js updates UI on language change', () => {
+    assertIncludes(mainJs, 'updateLanguage', 'Should have updateLanguage method');
+  });
+
+  runner.test('All translation keys used in main.js exist in translation files', () => {
+    // More precise regex that matches t("key") or t('key') but not createElement("div")
+    const translationKeyMatches = mainJs.match(/\bt\(["']([^"']+)["']/g) || [];
+    const keys = translationKeyMatches.map(m => {
+      const match = m.match(/\bt\(["']([^"']+)["']/);
+      return match ? match[1] : null;
+    }).filter(Boolean);
+    
+    // Filter out false positives (single words that are likely HTML tags or common words)
+    const htmlTags = ['div', 'span', 'button', 'input', 'canvas', 'h3', 'strong', 'small'];
+    const filteredKeys = keys.filter(key => {
+      // Skip single-word keys that are HTML tags
+      if (htmlTags.includes(key.toLowerCase())) return false;
+      // Skip keys with parameters (they might be constructed dynamically)
+      if (key.includes('${') || key.includes('+')) return false;
+      // Only check keys that look like translation keys (contain dots or are in known sections)
+      return key.includes('.') || ['idle', 'fps'].includes(key);
+    });
+    
+    function getValue(obj, keyPath) {
+      const pathKeys = keyPath.split('.');
+      let value = obj;
+      for (const key of pathKeys) {
+        if (value && typeof value === 'object' && key in value) {
+          value = value[key];
+        } else {
+          return undefined;
+        }
+      }
+      return value;
+    }
+    
+    for (const key of filteredKeys) {
+      const enValue = getValue(enTranslations, key);
+      const deValue = getValue(deTranslations, key);
+      assert(enValue !== undefined, `Translation key "${key}" used in main.js not found in en.json`);
+      assert(deValue !== undefined, `Translation key "${key}" used in main.js not found in de.json`);
+    }
+  });
+
+  runner.test('main.js uses Intl.NumberFormat with en-US locale', () => {
+    assertIncludes(mainJs, 'Intl.NumberFormat', 'Should use Intl.NumberFormat');
+    assertIncludes(mainJs, '"en-US"', 'Should use en-US locale for number formatting');
+    assertNotIncludes(mainJs, '"de-DE"', 'Should not use de-DE locale');
+  });
 });
 
-// Test that key German words are not present in user-facing text
-runner.test('No German text in user-facing UI elements', () => {
-  const html = readFile('index.html');
-  const js = readFile('assets/main.js');
-  
-  // Check HTML for German words in user-facing content
-  const htmlLower = html.toLowerCase();
-  const userFacingGermanWords = [
-    'zeichnen',  // drawing
-    'steuerung', // controls
-    'einstellungen', // settings
-    'übersicht', // overview
-    'wahrscheinlichkeit', // probability
-  ];
-  
-  for (const word of userFacingGermanWords) {
-    // Check if word appears in visible text (not in URLs or code)
-    if (htmlLower.includes(word) && !htmlLower.includes('github.com')) {
-      // Check if it's in a visible element (not in script tags or comments)
-      const visibleContent = html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '')
-                                  .replace(/<!--[\s\S]*?-->/g, '');
-      if (visibleContent.toLowerCase().includes(word)) {
-        throw new Error(`Found German word "${word}" in user-facing HTML content`);
+// ============================================================================
+// Test Suite 5: Translation Key Coverage
+// ============================================================================
+
+runner.suite('Translation Key Coverage', () => {
+  runner.test('All error translation keys are used in code', () => {
+    const errorKeys = Object.keys(enTranslations.errors || {});
+    const mainJs = readFile('assets/main.js');
+    const i18nJs = readFile('assets/i18n.js');
+    const allCode = mainJs + i18nJs;
+    
+    for (const key of errorKeys) {
+      const fullKey = `errors.${key}`;
+      // Check if key is used in code (might be in t() calls or error handling)
+      const used = allCode.includes(fullKey) || 
+                   allCode.includes(`"${fullKey}"`) || 
+                   allCode.includes(`'${fullKey}'`);
+      
+      // Some error keys might be used dynamically, so we'll just check they exist
+      assert(errorKeys.length > 0, 'Should have error translation keys');
+    }
+  });
+
+  runner.test('All UI translation keys are referenced in HTML or JS', () => {
+    const html = readFile('index.html');
+    const mainJs = readFile('assets/main.js');
+    const allCode = html + mainJs;
+    
+    // Check key sections that should be used
+    const keySections = ['drawing', 'predictions', 'network', 'neuronDetail', 'timeline'];
+    
+    for (const section of keySections) {
+      const sectionKeys = Object.keys(enTranslations[section] || {});
+      let foundAny = false;
+      
+      for (const key of sectionKeys) {
+        const fullKey = `${section}.${key}`;
+        if (allCode.includes(fullKey) || allCode.includes(`"${fullKey}"`) || allCode.includes(`'${fullKey}'`)) {
+          foundAny = true;
+          break;
+        }
       }
+      
+      // At least some keys from each section should be used
+      assert(foundAny || sectionKeys.length === 0, `Section "${section}" should have at least one key used in code`);
     }
-  }
-  
-  // Check for German error messages that are thrown to users (not just console.error)
-  // User-facing errors are those in throw new Error() or renderErrorMessage()
-  const userFacingErrorPatterns = [
-    /throw new Error\([^)]*["']Fehler/i,
-    /throw new Error\([^)]*["']Konnte nicht/i,
-    /renderErrorMessage\([^)]*["']Fehler/i,
-  ];
-  
-  for (const pattern of userFacingErrorPatterns) {
-    if (pattern.test(js)) {
-      throw new Error('Found German text in user-facing error messages');
+  });
+
+  runner.test('Parameter placeholders in translations are valid', () => {
+    function checkParams(obj, path = '') {
+      for (const [key, value] of Object.entries(obj)) {
+        const currentPath = path ? `${path}.${key}` : key;
+        if (typeof value === 'string') {
+          // Check for parameter placeholders
+          const paramMatches = value.match(/\{(\w+)\}/g);
+          if (paramMatches) {
+            // Parameters should be alphanumeric and underscore only
+            for (const match of paramMatches) {
+              const paramName = match.slice(1, -1);
+              assert(
+                /^[a-zA-Z_][a-zA-Z0-9_]*$/.test(paramName),
+                `Invalid parameter name "${paramName}" in translation key "${currentPath}"`
+              );
+            }
+          }
+        } else if (typeof value === 'object' && value !== null) {
+          checkParams(value, currentPath);
+        }
+      }
     }
-  }
-  
-  // Check for any remaining German console messages
-  const germanConsoleErrors = (js.match(/console\.(error|warn|log)\([^)]*["']Fehler/gi) || []).length;
-  if (germanConsoleErrors > 0) {
-    console.warn(`  ⚠ Warning: Found ${germanConsoleErrors} German console message(s) that could be translated`);
-  }
+    
+    checkParams(enTranslations);
+    checkParams(deTranslations);
+  });
 });
 
-// Test layer descriptions
-runner.test('Layer descriptions are in English', () => {
-  const html = readFile('index.html');
-  
-  assert(html.includes('Input Layer:'), 'Should describe input layer in English');
-  assert(html.includes('Dense Layer'), 'Should describe dense layers in English');
-  assert(html.includes('Output Layer:'), 'Should describe output layer in English');
-  assert(html.includes('neurons with ReLU'), 'Should describe activation functions in English');
-  assert(html.includes('Softmax probabilities'), 'Should describe output in English');
+// ============================================================================
+// Test Suite 6: Code Quality and Best Practices
+// ============================================================================
+
+runner.suite('Code Quality and Best Practices', () => {
+  runner.test('No hardcoded German text in HTML', () => {
+    const html = readFile('index.html');
+    const germanWords = ['Zeichnen', 'Steuerung', 'Einstellungen', 'Übersicht', 'Wahrscheinlichkeit'];
+    
+    // Remove script and style tags for this check
+    const visibleHtml = html
+      .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '')
+      .replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '')
+      .replace(/<!--[\s\S]*?-->/g, '');
+    
+    for (const word of germanWords) {
+      assertNotIncludes(
+        visibleHtml,
+        word,
+        `Should not contain hardcoded German word "${word}" in visible HTML`
+      );
+    }
+  });
+
+  runner.test('No hardcoded German text in JavaScript error messages', () => {
+    const mainJs = readFile('assets/main.js');
+    const germanErrorPhrases = [
+      'Fehler beim',
+      'Konnte nicht',
+      'Fehler beim Laden',
+      'Fehler beim Aktualisieren'
+    ];
+    
+    for (const phrase of germanErrorPhrases) {
+      assertNotIncludes(
+        mainJs,
+        phrase,
+        `Should not contain hardcoded German error phrase "${phrase}"`
+      );
+    }
+  });
+
+  runner.test('Translation files use consistent formatting', () => {
+    // Check that both files have similar structure depth
+    function getMaxDepth(obj, depth = 0) {
+      if (typeof obj !== 'object' || obj === null) {
+        return depth;
+      }
+      return Math.max(...Object.values(obj).map(v => getMaxDepth(v, depth + 1)));
+    }
+    
+    const enDepth = getMaxDepth(enTranslations);
+    const deDepth = getMaxDepth(deTranslations);
+    
+    assertEqual(enDepth, deDepth, 'Translation files should have the same nesting depth');
+  });
+
+  runner.test('No empty translation strings', () => {
+    function checkEmpty(obj, path = '') {
+      for (const [key, value] of Object.entries(obj)) {
+        const currentPath = path ? `${path}.${key}` : key;
+        if (typeof value === 'string') {
+          assert(
+            value.trim().length > 0,
+            `Translation at "${currentPath}" should not be empty`
+          );
+        } else if (typeof value === 'object' && value !== null) {
+          checkEmpty(value, currentPath);
+        }
+      }
+    }
+    
+    checkEmpty(enTranslations);
+    checkEmpty(deTranslations);
+  });
+
+  runner.test('Translation keys follow consistent naming convention', () => {
+    function checkNaming(obj, path = '') {
+      for (const [key, value] of Object.entries(obj)) {
+        const currentPath = path ? `${path}.${key}` : key;
+        // Keys should be camelCase or lowercase
+        assert(
+          /^[a-z][a-zA-Z0-9]*$/.test(key),
+          `Translation key "${currentPath}" should be camelCase or lowercase`
+        );
+        
+        if (typeof value === 'object' && value !== null) {
+          checkNaming(value, currentPath);
+        }
+      }
+    }
+    
+    checkNaming(enTranslations);
+    checkNaming(deTranslations);
+  });
 });
 
-// Test button labels and interactive elements
-runner.test('Button labels and interactive elements are in English', () => {
-  const html = readFile('index.html');
-  const js = readFile('assets/main.js');
-  
-  // Check for English button text (may be in HTML or JS)
-  assert(html.includes('Advanced Settings') || js.includes('Advanced Settings'), 
-    'Should have "Advanced Settings" button');
-  assert(html.includes('Clear selection') || js.includes('Clear selection'), 
-    'Should have "Clear selection" button');
-  
-  // Check that common German button words are not present in user-facing text
-  const visibleHtml = html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '')
-                          .replace(/<!--[\s\S]*?-->/g, '');
-  assert(!visibleHtml.includes('Löschen'), 'Should not have German "Löschen" (clear) in HTML');
-  assert(!visibleHtml.includes('Schließen'), 'Should not have German "Schließen" (close) in HTML');
-  assert(!visibleHtml.includes('Einstellungen'), 'Should not have German "Einstellungen" (settings) in HTML');
+// ============================================================================
+// Test Suite 7: Edge Cases and Error Handling
+// ============================================================================
+
+runner.suite('Edge Cases and Error Handling', () => {
+  runner.test('i18n.js handles missing translation keys gracefully', () => {
+    const i18nCode = readFile('assets/i18n.js');
+    assertIncludes(i18nCode, 'console.warn', 'Should warn about missing translation keys');
+    assertIncludes(i18nCode, 'Translation key not found', 'Should log warning for missing keys');
+    assertIncludes(i18nCode, 'return key', 'Should return key as fallback when translation not found');
+  });
+
+  runner.test('i18n.js handles non-string translation values', () => {
+    const i18nCode = readFile('assets/i18n.js');
+    assertIncludes(i18nCode, 'typeof value !== \'string\'', 'Should check for non-string values');
+    assertIncludes(i18nCode, 'Translation value is not a string', 'Should warn about non-string values');
+  });
+
+  runner.test('i18n.js has fallback to English on load failure', () => {
+    const i18nCode = readFile('assets/i18n.js');
+    assertIncludes(i18nCode, 'if (currentLanguage !== \'en\')', 'Should check if fallback needed');
+    assertIncludes(i18nCode, 'return initI18n(\'en\')', 'Should fallback to English');
+  });
+
+  runner.test('Translation files handle special characters correctly', () => {
+    // Check that both files can be parsed as UTF-8 JSON
+    const enStr = JSON.stringify(enTranslations);
+    const deStr = JSON.stringify(deTranslations);
+    
+    // Re-parse to ensure no encoding issues
+    const enParsed = JSON.parse(enStr);
+    const deParsed = JSON.parse(deStr);
+    
+    assert(enParsed !== null, 'English translations should parse correctly after stringify');
+    assert(deParsed !== null, 'German translations should parse correctly after stringify');
+  });
+
+  runner.test('Parameter substitution handles missing parameters', () => {
+    const i18nCode = readFile('assets/i18n.js');
+    assertIncludes(i18nCode, 'params[paramKey] !== undefined', 'Should check if parameter exists');
+    assertIncludes(i18nCode, 'match', 'Should return original placeholder if parameter missing');
+  });
 });
 
-// Test that all user-visible strings from PR description are present
-runner.test('Key translated strings from PR description are present', () => {
-  const html = readFile('index.html');
-  const js = readFile('assets/main.js');
-  
-  // Key strings mentioned in PR description
-  const keyStrings = [
-    'MNIST MLP – Inference Visualization', // Page title
-    'Draw digit', // Drawing pad
-    'Digit Probabilities', // Probability panel
-    'Network Overview', // Network info
-    'Training Progress', // Timeline
-    'Interactive Neural Network Visualization', // Info modal
-    'How it works:', // Info modal section
-    '3D Controls:', // Info modal section
-    'Color Coding:', // Info modal section
-  ];
-  
-  for (const str of keyStrings) {
-    const found = html.includes(str) || js.includes(str);
-    assert(found, `Key translated string "${str}" should be present`);
-  }
+// ============================================================================
+// Test Suite 8: Accessibility and Internationalization
+// ============================================================================
+
+runner.suite('Accessibility and Internationalization', () => {
+  runner.test('HTML lang attribute can be dynamically updated', () => {
+    const i18nCode = readFile('assets/i18n.js');
+    assertIncludes(i18nCode, 'document.documentElement.lang =', 'Should update HTML lang attribute');
+  });
+
+  runner.test('Aria-labels are translatable', () => {
+    const html = readFile('index.html');
+    assertIncludes(html, 'data-i18n-aria-label', 'Should support translatable aria-labels');
+  });
+
+  runner.test('Language toggle button has proper accessibility attributes', () => {
+    const html = readFile('index.html');
+    assertIncludes(html, 'aria-label="Switch language"', 'Language toggle should have aria-label');
+    assertIncludes(html, 'title="Switch language"', 'Language toggle should have title attribute');
+  });
+
+  runner.test('Modals have proper ARIA attributes', () => {
+    const html = readFile('index.html');
+    assertIncludes(html, 'role="dialog"', 'Modals should have dialog role');
+    assertIncludes(html, 'aria-modal="true"', 'Modals should have aria-modal');
+    assertIncludes(html, 'aria-labelledby', 'Modals should have aria-labelledby');
+  });
 });
 
+// ============================================================================
 // Run all tests
+// ============================================================================
+
 runner.run();
 
diff --git a/test.js b/test.js
new file mode 100755
index 0000000..cc62623
--- /dev/null
+++ b/test.js
@@ -0,0 +1,175 @@
+#!/usr/bin/env node
+/**
+ * Unified test runner for all i18n tests
+ * Runs the comprehensive i18n test suite
+ */
+
+const { spawn } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+
+// Colors for terminal output
+const colors = {
+  reset: '\x1b[0m',
+  bright: '\x1b[1m',
+  green: '\x1b[32m',
+  red: '\x1b[31m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  cyan: '\x1b[36m',
+};
+
+function colorize(text, color) {
+  return `${colors[color]}${text}${colors.reset}`;
+}
+
+// Test suite results
+const results = {
+  i18n: { passed: 0, failed: 0, total: 0, output: [] },
+};
+
+// Run a test file and capture output
+function runTest(testFile, suiteName) {
+  return new Promise((resolve, reject) => {
+    const testPath = path.join(__dirname, testFile);
+    
+    if (!fs.existsSync(testPath)) {
+      reject(new Error(`Test file not found: ${testFile}`));
+      return;
+    }
+
+    console.log(colorize(`\n${'='.repeat(80)}`, 'cyan'));
+    console.log(colorize(`Running ${suiteName}...`, 'bright'));
+    console.log(colorize('='.repeat(80), 'cyan'));
+    console.log();
+
+    const child = spawn('node', [testPath], {
+      cwd: __dirname,
+      stdio: ['inherit', 'pipe', 'pipe'],
+    });
+
+    let stdout = '';
+    let stderr = '';
+
+    child.stdout.on('data', (data) => {
+      const text = data.toString();
+      stdout += text;
+      process.stdout.write(text);
+    });
+
+    child.stderr.on('data', (data) => {
+      const text = data.toString();
+      stderr += text;
+      process.stderr.write(text);
+    });
+
+    child.on('close', (code) => {
+      // Parse output to extract test results
+      const output = stdout + stderr;
+      const passedMatch = output.match(/(\d+)\s+passed/);
+      const failedMatch = output.match(/(\d+)\s+failed/);
+
+      if (passedMatch) {
+        results[suiteName].passed = parseInt(passedMatch[1], 10);
+      }
+      if (failedMatch) {
+        results[suiteName].failed = parseInt(failedMatch[1], 10);
+      }
+      results[suiteName].total = results[suiteName].passed + results[suiteName].failed;
+      results[suiteName].output = output;
+
+      if (code === 0) {
+        resolve();
+      } else {
+        // Don't reject - we want to continue running other tests
+        resolve();
+      }
+    });
+
+    child.on('error', (error) => {
+      reject(error);
+    });
+  });
+}
+
+// Print summary
+function printSummary() {
+  console.log(colorize('\n' + '='.repeat(80), 'cyan'));
+  console.log(colorize('TEST SUMMARY', 'bright'));
+  console.log(colorize('='.repeat(80), 'cyan'));
+  console.log();
+
+  const totalPassed = results.i18n.passed;
+  const totalFailed = results.i18n.failed;
+  const totalTests = results.i18n.total;
+
+  // i18n tests summary
+  if (results.i18n.total > 0) {
+    const status = results.i18n.failed === 0 ? colorize('✓', 'green') : colorize('✗', 'red');
+    console.log(`${status} i18n Tests:`);
+    console.log(`   ${colorize(results.i18n.passed, 'green')} passed, ${colorize(results.i18n.failed, 'red')} failed, ${results.i18n.total} total`);
+    console.log();
+  }
+
+  // Overall summary
+  console.log(colorize('─'.repeat(80), 'cyan'));
+  const overallStatus = totalFailed === 0 ? colorize('✓ ALL TESTS PASSED', 'green') : colorize('✗ SOME TESTS FAILED', 'red');
+  console.log(`${overallStatus}`);
+  console.log(`   Total: ${colorize(totalPassed, 'green')} passed, ${colorize(totalFailed, 'red')} failed, ${totalTests} total`);
+  console.log(colorize('='.repeat(80), 'cyan'));
+  console.log();
+
+  // Browser test reminder
+  if (totalFailed === 0) {
+    console.log(colorize('Note:', 'yellow'));
+    console.log('  Browser-based tests are available in test-i18n-browser.html');
+    console.log('  Open that file in a web browser to test runtime i18n behavior.');
+    console.log();
+  }
+
+  return totalFailed === 0 ? 0 : 1;
+}
+
+// Main execution
+async function runAllTests() {
+  console.log(colorize('\n╔══════════════════════════════════════════════════════════════════════════════╗', 'cyan'));
+  console.log(colorize('║                    i18n Test Suite - Unified Runner                        ║', 'bright'));
+  console.log(colorize('╚══════════════════════════════════════════════════════════════════════════════╝', 'cyan'));
+  console.log();
+
+  try {
+    // Run i18n tests
+    await runTest('test-i18n.js', 'i18n').catch((error) => {
+      console.error(colorize(`\nError running i18n tests: ${error.message}`, 'red'));
+      results.i18n.failed = 1;
+      results.i18n.total = 1;
+    });
+
+    // Print summary and exit
+    const exitCode = printSummary();
+    process.exit(exitCode);
+  } catch (error) {
+    console.error(colorize(`\nFatal error: ${error.message}`, 'red'));
+    process.exit(1);
+  }
+}
+
+// Handle command line arguments
+const args = process.argv.slice(2);
+if (args.includes('--help') || args.includes('-h')) {
+  console.log(`
+Usage: node test.js [options]
+
+Options:
+  --help, -h     Show this help message
+
+Examples:
+  node test.js                  # Run all i18n tests
+  node test-i18n.js            # Run tests directly
+`);
+  process.exit(0);
+}
+
+// Run all tests
+runAllTests();
+
