Hugging Face's logo

Spaces:
Liyew
/
Concept_Guided_ARC_solver
Sleeping

App Files Community
woletee commited on
Commit
1d3db9a
·
1 Parent(s): 5de10b8

correcting the color mapping

Browse files
Files changed (1) hide show
  1. templates/results.html +112 -29
templates/results.html CHANGED
@@ -2,49 +2,132 @@
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
- <title>ARC Results</title>
6
- <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
  </head>
8
  <body>
 
9
  <h1>Predicted High-Level Concepts</h1>
10
  <ul>
11
- {% for hlc in hlcs %}
12
- <li>{{ hlc }}</li>
13
  {% endfor %}
14
  </ul>
15
 
16
  <h2>Input / Output Pairs</h2>
17
  {% for pair in input_output_pairs %}
18
- <div class="grid-container">
19
- <div class="grid-wrapper">
20
- <h3>Input Grid</h3>
21
- <div class="grid">
22
- {% for row in pair[0] %}
23
- <div class="grid-row">
24
- {% for cell in row %}
25
- <div class="cell color-{{ cell }}"></div>
26
- {% endfor %}
27
- </div>
28
- {% endfor %}
29
  </div>
30
- </div>
31
-
32
- <div class="grid-wrapper">
33
- <h3>Output Grid</h3>
34
- <div class="grid">
35
- {% for row in pair[1] %}
36
- <div class="grid-row">
37
- {% for cell in row %}
38
- <div class="cell color-{{ cell }}"></div>
39
- {% endfor %}
40
- </div>
41
- {% endfor %}
42
  </div>
43
  </div>
44
- </div>
 
 
 
45
  {% endfor %}
46
 
47
  <h2>Best Program</h2>
48
- <pre>{{ best_program }}</pre>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
49
  </body>
50
  </html>
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ARC Task Visualization</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ text-align: center;
11
+ background-color: #000;
12
+ color: white;
13
+ margin: 0;
14
+ padding: 20px;
15
+ }
16
+
17
+ h1 {
18
+ color: #FFD700;
19
+ margin-bottom: 20px;
20
+ }
21
+
22
+ .concept-label {
23
+ font-size: 20px;
24
+ font-weight: bold;
25
+ background: #FFA500;
26
+ color: black;
27
+ padding: 10px;
28
+ border-radius: 5px;
29
+ display: inline-block;
30
+ margin-bottom: 15px;
31
+ }
32
+
33
+ .grid-container {
34
+ display: flex;
35
+ justify-content: center;
36
+ gap: 50px;
37
+ flex-wrap: wrap;
38
+ margin-bottom: 30px;
39
+ }
40
+
41
+ .grid-wrapper {
42
+ background: rgba(255, 255, 255, 0.1);
43
+ padding: 20px;
44
+ border-radius: 8px;
45
+ box-shadow: 0px 4px 6px rgba(255, 255, 255, 0.2);
46
+ min-width: 220px;
47
+ }
48
+
49
+ .grid-title {
50
+ font-size: 16px;
51
+ font-weight: bold;
52
+ margin-bottom: 10px;
53
+ }
54
+
55
+ .grid {
56
+ display: grid;
57
+ gap: 2px;
58
+ border: 2px solid white;
59
+ padding: 5px;
60
+ width: fit-content;
61
+ margin: auto;
62
+ }
63
+
64
+ .cell {
65
+ width: 30px;
66
+ height: 30px;
67
+ border: 1px solid black;
68
+ }
69
+ </style>
70
  </head>
71
  <body>
72
+
73
  <h1>Predicted High-Level Concepts</h1>
74
  <ul>
75
+ {% for concept in hlcs %}
76
+ <li>{{ concept }}</li>
77
  {% endfor %}
78
  </ul>
79
 
80
  <h2>Input / Output Pairs</h2>
81
  {% for pair in input_output_pairs %}
82
+ <div class="grid-container">
83
+ <div class="grid-wrapper">
84
+ <div class="grid-title">Input Grid</div>
85
+ <div class="grid" id="input-{{ loop.index0 }}"></div>
 
 
 
 
 
 
 
86
  </div>
87
+ <div class="grid-wrapper">
88
+ <div class="grid-title">Output Grid</div>
89
+ <div class="grid" id="output-{{ loop.index0 }}"></div>
 
 
 
 
 
 
 
 
 
90
  </div>
91
  </div>
92
+ <script>
93
+ drawGrid("input-{{ loop.index0 }}", {{ pair[0]|tojson }});
94
+ drawGrid("output-{{ loop.index0 }}", {{ pair[1]|tojson }});
95
+ </script>
96
  {% endfor %}
97
 
98
  <h2>Best Program</h2>
99
+ <pre>{{ program }}</pre>
100
+
101
+ <script>
102
+ function drawGrid(id, gridData) {
103
+ const container = document.getElementById(id);
104
+ container.style.gridTemplateRows = `repeat(${gridData.length}, 30px)`;
105
+ container.style.gridTemplateColumns = `repeat(${gridData[0].length}, 30px)`;
106
+
107
+ const colorMap = {
108
+ 0: "#000000", // black
109
+ 1: "#0074D9", // blue
110
+ 2: "#FF4136", // red
111
+ 3: "#2ECC40", // green
112
+ 4: "#FFDC00", // yellow
113
+ 5: "#B10DC9", // purple
114
+ 6: "#FF851B", // orange
115
+ 7: "#7FDBFF", // light blue
116
+ 8: "#F012BE", // pink
117
+ 9: "#FFFFFF" // white
118
+ };
119
+
120
+ container.innerHTML = '';
121
+ gridData.forEach(row => {
122
+ row.forEach(cellVal => {
123
+ const div = document.createElement("div");
124
+ div.classList.add("cell");
125
+ div.style.backgroundColor = colorMap[cellVal] || "#333";
126
+ container.appendChild(div);
127
+ });
128
+ });
129
+ }
130
+ </script>
131
+
132
  </body>
133
  </html>