From f070e1c985cd85743e6417263a2b5bf5a4991046 Mon Sep 17 00:00:00 2001
From: Riccardo Forese <forese.riccardo@gmail.com>
Date: Tue, 3 Feb 2026 11:36:30 +0100
Subject: [PATCH] =?UTF-8?q?Il=20visualizer=20ora=20=C3=A8=20fatto=20meglio?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 visualizer.html | 142 +++++++++++++++++++++++++++++++-----------------
 1 file changed, 92 insertions(+), 50 deletions(-)
diff --git a/visualizer.html b/visualizer.html
index 7f6dd6e..0fdc3ba 100644
--- a/visualizer.html
+++ b/visualizer.html
@@ -2,23 +2,46 @@
 <html lang="it">
 <head>
     <meta charset="UTF-8">
-    <title>Zig AI Visualizer</title>
+    <title>Zig MNIST Visualizer</title>
     <style>
-        body { margin: 0; background-color: #111; color: #eee; font-family: monospace; overflow: hidden; }
-        #info { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.7); padding: 10px; border-radius: 5px; pointer-events: none; }
+        body { 
+            margin: 0; 
+            background-color: #111; 
+            color: #eee; 
+            font-family: monospace; 
+            overflow: auto; /* Abilita lo scroll */
+        }
+        #info { 
+            position: fixed; /* Rimane fisso mentre scrolli */
+            top: 10px; 
+            left: 10px; 
+            background: rgba(0,0,0,0.8); 
+            padding: 15px; 
+            border: 1px solid #444;
+            border-radius: 5px; 
+            z-index: 1000;
+        }
         h1 { margin: 0; font-size: 1.2em; color: #f4a261; }
-        .stat { font-size: 0.9em; color: #aaa; }
-        canvas { display: block; }
+        .stat { font-size: 0.9em; color: #aaa; margin-top: 5px; }
+        canvas { 
+            display: block; 
+            /* Il canvas non ha dimensioni fisse CSS, le decide JS */
+        }
     </style>
 </head>
 <body>
 
     <div id="info">
-        <h1>Zig Neural Network</h1>
-        <div class="stat">Epoca: <span id="epoch">Waiting...</span></div>
-        <div class="stat">Loss: <span id="loss">Waiting...</span></div>
-        <div class="stat" style="font-size: 0.8em; margin-top:5px">Verde: Positivo | Rosso: Negativo</div>
+        <h1>Zig MNIST Network</h1>
+        <div class="stat">Epoca: <span id="epoch" style="color: white">Waiting...</span></div>
+        <div class="stat">Loss: <span id="loss" style="color: white">Waiting...</span></div>
+        <div class="stat" style="font-size: 0.8em; margin-top:10px; border-top: 1px solid #444; padding-top:5px">
+            Scrolla per vedere tutti i 784 Input!<br>
+            Verde: Pesi Positivi<br>
+            Rosso: Pesi Negativi
+        </div>
     </div>
+    
     <canvas id="netCanvas"></canvas>
 
     <script>
@@ -27,102 +50,121 @@
         const epochEl = document.getElementById('epoch');
         const lossEl = document.getElementById('loss');
 
-        // Adatta il canvas alla finestra
-        function resize() {
-            canvas.width = window.innerWidth;
-            canvas.height = window.innerHeight;
-        }
-        window.addEventListener('resize', resize);
-        resize();
+        // Configurazione Spaziatura
+        const MIN_NODE_SPACING = 20; // Spazio minimo verticale tra i nodi (pixel)
+        const LAYER_PADDING = 100;   // Margine sopra e sotto
 
-        // Funzione per disegnare la rete
         function drawNetwork(data) {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            
-            // Calcoliamo la struttura completa (Input Layer + Hidden Layers)
-            // Il JSON ha solo i layer "Dense", dobbiamo dedurre l'input layer dal primo strato
             const layers = data.layers;
-            const structure = [layers[0].inputs]; // Aggiungiamo il numero di input come primo "strato visivo"
+            // Ricostruiamo la struttura completa [Input, Hidden1, Hidden2, Output]
+            const structure = [layers[0].inputs]; 
             layers.forEach(l => structure.push(l.neurons));
 
-            const layerWidth = canvas.width / structure.length;
+            // 1. CALCOLO DIMENSIONI CANVAS
+            // Troviamo il layer più grande (probabilmente l'input con 784)
             const maxNeurons = Math.max(...structure);
             
-            // Coordinate dei nodi per disegnare le linee dopo
+            // Calcoliamo l'altezza necessaria
+            const requiredHeight = (maxNeurons * MIN_NODE_SPACING) + (LAYER_PADDING * 2);
+            
+            // Ridimensioniamo il canvas se necessario (evita flickering se la size non cambia)
+            if (canvas.height !== requiredHeight || canvas.width !== window.innerWidth) {
+                canvas.width = window.innerWidth;
+                canvas.height = Math.max(window.innerHeight, requiredHeight);
+            } else {
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+            }
+
+            const layerWidth = canvas.width / structure.length;
             let nodePositions = []; 
 
-            // 1. Calcoliamo le posizioni dei nodi
+            // 2. CALCOLO POSIZIONI NODI
             structure.forEach((neuronCount, layerIdx) => {
                 const x = (layerIdx * layerWidth) + (layerWidth / 2);
                 const layerNodes = [];
+                
+                // Calcoliamo lo spazio disponibile per QUESTO layer
+                // Se sono pochi neuroni, li spalmiamo su tutta l'altezza del canvas per estetica
+                // Se sono tanti, usiamo lo spacing minimo
+                let availableHeight = canvas.height - (LAYER_PADDING * 2);
+                let spacing = availableHeight / neuronCount;
+                
+                // Cap sulla spaziatura massima per non averli troppo distanti nei layer piccoli
+                if (spacing > 100) spacing = 100; 
+
+                // Altezza totale occupata da questo layer
+                const layerTotalHeight = spacing * neuronCount;
+                const startY = (canvas.height / 2) - (layerTotalHeight / 2);
+
                 for (let i = 0; i < neuronCount; i++) {
-                    // Centriamo verticalmente
-                    const y = (canvas.height / 2) - ((neuronCount * 60) / 2) + (i * 60);
+                    const y = startY + (i * spacing);
                     layerNodes.push({x, y});
                 }
                 nodePositions.push(layerNodes);
             });
 
-            // 2. Disegniamo le CONNESSIONI (Pesi)
-            // Iteriamo sui layer "reali" (dal secondo array di posizioni in poi)
+            // 3. DISEGNO CONNESSIONI (Pesi)
+            // Per MNIST, disegniamo solo connessioni forti per non uccidere la CPU del browser
+            const DRAW_THRESHOLD = 0.05; // Disegna solo se peso > 0.05
+
             layers.forEach((layer, lIdx) => {
-                const sourceNodes = nodePositions[lIdx];     // Nodi input per questo layer
-                const targetNodes = nodePositions[lIdx + 1]; // Nodi di questo layer
+                const sourceNodes = nodePositions[lIdx];
+                const targetNodes = nodePositions[lIdx + 1];
 
                 targetNodes.forEach((target, neuronIdx) => {
                     sourceNodes.forEach((source, inputIdx) => {
-                        // Recuperiamo il peso dal JSON array piatto
-                        // Indice = (NeuroneCorrente * NumeroInput) + InputCorrente
                         const weightIdx = (neuronIdx * layer.inputs) + inputIdx;
                         const weight = layer.weights[weightIdx];
 
+                        // Ottimizzazione: salta pesi quasi nulli
+                        if (Math.abs(weight) < DRAW_THRESHOLD) return;
+
                         ctx.beginPath();
                         ctx.moveTo(source.x, source.y);
                         ctx.lineTo(target.x, target.y);
                         
-                        // Stile Linea
-                        const intensity = Math.min(Math.abs(weight), 2); // Cap a 2 per non esplodere
-                        ctx.lineWidth = intensity * 2; 
-                        ctx.strokeStyle = weight > 0 ? `rgba(0, 255, 100, ${Math.min(Math.abs(weight), 1)})` 
-                                                     : `rgba(255, 50, 50, ${Math.min(Math.abs(weight), 1)})`;
+                        const alpha = Math.min(Math.abs(weight), 0.8);
+                        ctx.strokeStyle = weight > 0 ? `rgba(0, 255, 128, ${alpha})` 
+                                                     : `rgba(255, 60, 60, ${alpha})`;
+                        ctx.lineWidth = 1; 
                         ctx.stroke();
                     });
                 });
             });
 
-            // 3. Disegniamo i NODI (Cerchi) sopra le linee
+            // 4. DISEGNO NODI
             nodePositions.forEach((layerNodes, lIdx) => {
-                layerNodes.forEach((node, nIdx) => {
+                // Dimensione dinamica del nodo: più ce ne sono, più sono piccoli
+                const nodeRadius = Math.max(3, Math.min(15, 300 / layerNodes.length));
+                
+                layerNodes.forEach((node) => {
                     ctx.beginPath();
-                    ctx.arc(node.x, node.y, 15, 0, Math.PI * 2);
-                    ctx.fillStyle = '#2a2a2a';
+                    ctx.arc(node.x, node.y, nodeRadius, 0, Math.PI * 2);
+                    ctx.fillStyle = '#222';
                     ctx.fill();
                     ctx.strokeStyle = '#fff';
-                    ctx.lineWidth = 2;
+                    ctx.lineWidth = 1;
                     ctx.stroke();
                 });
             });
         }
 
-        // Loop principale
         async function update() {
             try {
-                // Aggiungiamo un timestamp per evitare che il browser usi la cache
                 const response = await fetch('network_state.json?t=' + new Date().getTime());
-                if (!response.ok) throw new Error("File non trovato");
-                
+                if (!response.ok) throw new Error("File missing");
                 const data = await response.json();
                 
                 epochEl.innerText = data.epoch;
                 lossEl.innerText = data.loss;
-                
                 drawNetwork(data);
             } catch (e) {
-                console.log("In attesa di dati...", e);
+                // console.log("Waiting...", e);
             }
         }
 
-        setInterval(update, 20);
+        setInterval(update, 100); // Aggiorna ogni 500ms
+        window.addEventListener('resize', () => canvas.width = window.innerWidth);
     </script>
 </body>
 </html>
\ No newline at end of file
