fixing the problem with the visualization thing

templates/results.html

@@ -45,55 +45,59 @@
     </ul>
 
     <h2>Input / Output Pairs</h2>
-    {% for pair in input_output_pairs %}
-    <div class="grid-container">
-        <div>
-            <div class="grid-title">Input Grid</div>
-            <div class="grid-box" id="input-{{ loop.index0 }}"></div>
-        </div>
-        <div>
-            <div class="grid-title">Output Grid</div>
-            <div class="grid-box" id="output-{{ loop.index0 }}"></div>
-        </div>
-    </div>
-    <script>
-        drawGrid("input-{{ loop.index0 }}", {{ pair[0]|tojson }});
-        drawGrid("output-{{ loop.index0 }}", {{ pair[1]|tojson }});
-    </script>
-    {% endfor %}
+
+    <div id="pairs-container"></div>
 
     <h2>Best Program</h2>
-    <pre>{{ program }}</pre>
+    <pre>{{ best_program }}</pre>
 
     <script>
-        function drawGrid(id, gridData) {
-            const container = document.getElementById(id);
-            container.style.gridTemplateRows = `repeat(${gridData.length}, 25px)`;
-            container.style.gridTemplateColumns = `repeat(${gridData[0].length}, 25px)`;
+        const inputOutputPairs = {{ input_output_pairs | tojson }};
 
-            const colorMap = {
-                0: "#FFFFFF",  // white
-                1: "#0074D9",  // blue
-                2: "#FF4136",  // red
-                3: "#2ECC40",  // green
-                4: "#FFDC00",  // yellow
-                5: "#B10DC9",  // purple
-                6: "#FF851B",  // orange
-                7: "#7FDBFF",  // light blue
-                8: "#F012BE",  // pink
-                9: "#111111"   // dark gray
-            };
+        const colorMap = {
+            0: "#FFFFFF", 1: "#0074D9", 2: "#FF4136", 3: "#2ECC40",
+            4: "#FFDC00", 5: "#B10DC9", 6: "#FF851B", 7: "#7FDBFF",
+            8: "#F012BE", 9: "#111111"
+        };
 
-            container.innerHTML = '';
-            for (let row of gridData) {
-                for (let cell of row) {
-                    const div = document.createElement('div');
-                    div.classList.add("cell");
+        function drawGrid(container, gridData) {
+            container.style.gridTemplateRows = `repeat(${gridData.length}, 25px)`;
+            container.style.gridTemplateColumns = `repeat(${gridData[0].length}, 25px)`;
+            gridData.forEach(row => {
+                row.forEach(cell => {
+                    const div = document.createElement("div");
+                    div.className = "cell";
                     div.style.backgroundColor = colorMap[cell] || "#000000";
                     container.appendChild(div);
-                }
-            }
+                });
+            });
         }
+
+        const pairsContainer = document.getElementById("pairs-container");
+
+        inputOutputPairs.forEach((pair, index) => {
+            const container = document.createElement("div");
+            container.className = "grid-container";
+
+            const inputDiv = document.createElement("div");
+            inputDiv.innerHTML = `<div class="grid-title">Input Grid</div>`;
+            const inputGridBox = document.createElement("div");
+            inputGridBox.className = "grid-box";
+            inputDiv.appendChild(inputGridBox);
+
+            const outputDiv = document.createElement("div");
+            outputDiv.innerHTML = `<div class="grid-title">Output Grid</div>`;
+            const outputGridBox = document.createElement("div");
+            outputGridBox.className = "grid-box";
+            outputDiv.appendChild(outputGridBox);
+
+            drawGrid(inputGridBox, pair[0]);
+            drawGrid(outputGridBox, pair[1]);
+
+            container.appendChild(inputDiv);
+            container.appendChild(outputDiv);
+            pairsContainer.appendChild(container);
+        });
     </script>
 
 </body>