Switch to Flask with HTML visualization

static/styles.css

@@ -9,20 +9,42 @@ h1, h2, h3 {
     color: #FFD700;
 }
 
+.grid-container {
+    display: flex;
+    justify-content: center;
+    gap: 50px;
+    margin-bottom: 30px;
+}
+
 .grid-wrapper {
     background-color: #222;
     padding: 15px;
-    margin: 20px auto;
     border-radius: 10px;
-    width: 80%;
-    box-shadow: 0 0 10px #fff2;
+    box-shadow: 0 0 10px #fff3;
+}
+
+.grid {
+    display: inline-block;
 }
 
-pre {
-    background: #000;
-    color: #0f0;
-    padding: 10px;
-    border-radius: 5px;
-    text-align: left;
-    overflow-x: auto;
+.grid-row {
+    display: flex;
 }
+
+.cell {
+    width: 30px;
+    height: 30px;
+    border: 1px solid #333;
+}
+
+/* ARC Color Mapping: You can customize these */
+.color-0 { background-color: #000; } /* black */
+.color-1 { background-color: #00f; } /* blue */
+.color-2 { background-color: #0f0; } /* green */
+.color-3 { background-color: #f00; } /* red */
+.color-4 { background-color: #ff0; } /* yellow */
+.color-5 { background-color: #0ff; } /* cyan */
+.color-6 { background-color: #f0f; } /* magenta */
+.color-7 { background-color: #fff; } /* white */
+.color-8 { background-color: orange; }
+.color-9 { background-color: pink; }

templates/results.html

@@ -15,12 +15,33 @@
 
     <h2>Input / Output Pairs</h2>
     {% for pair in input_output_pairs %}
+    <div class="grid-container">
         <div class="grid-wrapper">
             <h3>Input Grid</h3>
-            <pre>{{ pair[0] }}</pre>
+            <div class="grid">
+                {% for row in pair[0] %}
+                    <div class="grid-row">
+                        {% for cell in row %}
+                            <div class="cell color-{{ cell }}"></div>
+                        {% endfor %}
+                    </div>
+                {% endfor %}
+            </div>
+        </div>
+
+        <div class="grid-wrapper">
             <h3>Output Grid</h3>
-            <pre>{{ pair[1] }}</pre>
+            <div class="grid">
+                {% for row in pair[1] %}
+                    <div class="grid-row">
+                        {% for cell in row %}
+                            <div class="cell color-{{ cell }}"></div>
+                        {% endfor %}
+                    </div>
+                {% endfor %}
+            </div>
         </div>
+    </div>
     {% endfor %}
 
     <h2>Best Program</h2>