modified the visualization for the test input and for the test output as well

app.py

@@ -55,9 +55,15 @@ def upload():
         predicted_HLCs=predicted_HLCs
     )
 
-    # Prepare final grids for evaluation section
-    last_input = tolist_safe(input_output_pairs[-1][0])
-    last_ground_truth = tolist_safe(input_output_pairs[-1][1])
+    # Convert train pairs to plain lists
+    input_output_pairs = [(tolist_safe(i), tolist_safe(o)) for i, o in input_output_pairs]
+
+    # Prepare test pairs as well
+    test_pairs = [(tolist_safe(sample["input"]), tolist_safe(sample["output"])) for sample in data.get("test", [])]
+
+    # Prepare final program evaluation display
+    last_input = input_output_pairs[-1][0] if input_output_pairs else []
+    last_ground_truth = input_output_pairs[-1][1] if input_output_pairs else []
 
     try:
         predicted_output = tolist_safe(best_program.evaluate(last_input))
@@ -65,12 +71,10 @@ def upload():
         print("Error during best_program evaluation:", e)
         predicted_output = [["ERROR"]]
 
-    # Convert all pairs to lists (in case of NumPy values)
-    input_output_pairs = [(tolist_safe(i), tolist_safe(o)) for i, o in input_output_pairs]
-
     return render_template("results.html",
                            hlcs=predicted_HLCs,
                            input_output_pairs=input_output_pairs,
+                           test_pairs=test_pairs,
                            best_program=str(best_program),
                            last_input=last_input,
                            last_ground_truth=last_ground_truth,

templates/results.html

@@ -71,36 +71,21 @@
 
     <div id="pairs-container"></div>
 
+    <h2>Test Pairs</h2>
+    <div id="test-pairs-container"></div>
+
     <h2>Best Program</h2>
     <pre>{{ best_program }}</pre>
 
-    <h2>Best Program Evaluation (Last Grid)</h2>
-    <div class="grid-container">
-        <div>
-            <div class="grid-title">Last Input Grid</div>
-            <div id="last-input-grid" class="grid-box"></div>
-        </div>
-        <div>
-            <div class="grid-title">Ground Truth Output</div>
-            <div id="last-ground-truth-grid" class="grid-box"></div>
-        </div>
-        <div>
-            <div class="grid-title">Predicted Output by Best Program</div>
-            <div id="predicted-output-grid" class="grid-box"></div>
-        </div>
-    </div>
-
     <script>
         const inputOutputPairs = {{ input_output_pairs | tojson | safe }};
         const hlcs = {{ hlcs | tojson | safe }};
-        const lastInput = {{ last_input | tojson | safe }};
-        const lastGroundTruth = {{ last_ground_truth | tojson | safe }};
-        const predictedOutput = {{ predicted_output | tojson | safe }};
+        const testPairs = {{ test_pairs | tojson | safe }};
 
         const colorMap = {
-            0: "#FFFFFF", 1: "#0074D9", 2: "#FF4136", 3: "#2ECC40",
-            4: "#FFDC00", 5: "#B10DC9", 6: "#FF851B", 7: "#7FDBFF",
-            8: "#F012BE", 9: "#111111"
+            0: "#000000", 1: "#0074D9", 2: "#FF4136", 3: "#2ECC40",
+            4: "#FFDC00", 5: "#AAAAAA", 6: "#F012BE", 7: "#FF851B",
+            8: "#7FDBFF", 9: "#870C25"
         };
 
         function drawGrid(container, gridData) {
@@ -154,9 +139,29 @@
             pairsContainer.appendChild(container);
         });
 
-        drawGrid(document.getElementById("last-input-grid"), lastInput);
-        drawGrid(document.getElementById("last-ground-truth-grid"), lastGroundTruth);
-        drawGrid(document.getElementById("predicted-output-grid"), predictedOutput);
+        const testContainer = document.getElementById("test-pairs-container");
+        testPairs.forEach((pair, index) => {
+            const container = document.createElement("div");
+            container.className = "grid-container";
+
+            const inputDiv = document.createElement("div");
+            inputDiv.innerHTML = `<div class="grid-title">Test Input Grid</div>`;
+            const inputGridBox = document.createElement("div");
+            inputGridBox.className = "grid-box";
+            inputDiv.appendChild(inputGridBox);
+            drawGrid(inputGridBox, pair[0]);
+
+            const outputDiv = document.createElement("div");
+            outputDiv.innerHTML = `<div class="grid-title">Test Ground Truth Output Grid</div>`;
+            const outputGridBox = document.createElement("div");
+            outputGridBox.className = "grid-box";
+            outputDiv.appendChild(outputGridBox);
+            drawGrid(outputGridBox, pair[1]);
+
+            container.appendChild(inputDiv);
+            container.appendChild(outputDiv);
+            testContainer.appendChild(container);
+        });
     </script>
 
 </body>