fixed the problem with visualzing both the input and the output pairs as well for the genetic programming

app.py

@@ -1,6 +1,7 @@
 from flask import Flask, request, render_template
 import os
 import json
+import numpy as np
 from Vit_concept import run_inference, model
 from GP import genetic_programming
 
@@ -8,9 +9,15 @@ app = Flask(__name__)
 UPLOAD_FOLDER = 'uploads'
 os.makedirs(UPLOAD_FOLDER, exist_ok=True)
 
+def tolist_safe(obj):
+    if isinstance(obj, np.ndarray):
+        return obj.tolist()
+    return obj
+
 @app.route('/')
 def index():
     return render_template('index.html')
+
 @app.route('/upload', methods=['POST'])
 def upload():
     if 'file' not in request.files:
@@ -48,15 +55,18 @@ def upload():
         predicted_HLCs=predicted_HLCs
     )
 
-    # 🔥 NEW PART: Compute predicted output from best_program on last input
-    last_input = input_output_pairs[-1][0]
-    last_ground_truth = input_output_pairs[-1][1]
+    # 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])
 
     try:
-        predicted_output = best_program.evaluate(last_input)
+        predicted_output = tolist_safe(best_program.evaluate(last_input))
     except Exception as e:
+        print("Error during best_program evaluation:", e)
         predicted_output = [["ERROR"]]
-        print("Error applying best_program:", e)
+
+    # 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,
@@ -66,6 +76,5 @@ def upload():
                            last_ground_truth=last_ground_truth,
                            predicted_output=predicted_output)
 
-
 if __name__ == '__main__':
     app.run(host="0.0.0.0", port=7860)

templates/results.html

@@ -91,11 +91,11 @@
     </div>
 
     <script>
-        const inputOutputPairs = {{ input_output_pairs | tojson }};
-        const hlcs = {{ hlcs | tojson }};
-        const lastInput = {{ last_input | tojson }};
-        const lastGroundTruth = {{ last_ground_truth | tojson }};
-        const predictedOutput = {{ predicted_output | tojson }};
+        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 colorMap = {
             0: "#FFFFFF", 1: "#0074D9", 2: "#FF4136", 3: "#2ECC40",
@@ -104,6 +104,7 @@
         };
 
         function drawGrid(container, gridData) {
+            if (!Array.isArray(gridData) || !gridData.length || !Array.isArray(gridData[0])) return;
             container.style.gridTemplateRows = `repeat(${gridData.length}, 25px)`;
             container.style.gridTemplateColumns = `repeat(${gridData[0].length}, 25px)`;
             gridData.forEach(row => {
@@ -122,7 +123,6 @@
             const container = document.createElement("div");
             container.className = "grid-container";
 
-            // Input Grid
             const inputDiv = document.createElement("div");
             inputDiv.innerHTML = `<div class="grid-title">Input Grid</div>`;
             const inputGridBox = document.createElement("div");
@@ -130,7 +130,6 @@
             inputDiv.appendChild(inputGridBox);
             drawGrid(inputGridBox, pair[0]);
 
-            // Output Grid
             const outputDiv = document.createElement("div");
             outputDiv.innerHTML = `<div class="grid-title">Output Grid</div>`;
             const outputGridBox = document.createElement("div");
@@ -138,7 +137,6 @@
             outputDiv.appendChild(outputGridBox);
             drawGrid(outputGridBox, pair[1]);
 
-            // Concept Box
             const conceptDiv = document.createElement("div");
             conceptDiv.className = "concept-box";
             const conceptTitle = document.createElement("div");
@@ -150,14 +148,12 @@
             conceptDiv.appendChild(conceptTitle);
             conceptDiv.appendChild(conceptText);
 
-            // Combine all parts
             container.appendChild(inputDiv);
             container.appendChild(outputDiv);
             container.appendChild(conceptDiv);
             pairsContainer.appendChild(container);
         });
 
-        // Render best program application result
         drawGrid(document.getElementById("last-input-grid"), lastInput);
         drawGrid(document.getElementById("last-ground-truth-grid"), lastGroundTruth);
         drawGrid(document.getElementById("predicted-output-grid"), predictedOutput);