Hugging Face's logo

Spaces:
Liyew
/
Concept_Guided_ARC_solver
Sleeping

App Files Community
woletee commited on
Commit
84d3369
·
1 Parent(s): 1d3db9a

adding grid visualization

Browse files
Files changed (1) hide show
  1. templates/results.html +36 -69
templates/results.html CHANGED
@@ -2,69 +2,36 @@
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>
@@ -79,20 +46,20 @@
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>
@@ -101,11 +68,11 @@
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
@@ -114,18 +81,18 @@
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
 
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <title>ARC Grid Visualization</title>
 
6
  <style>
7
  body {
8
  font-family: Arial, sans-serif;
9
+ background-color: white;
10
+ color: black;
11
  text-align: center;
 
 
12
  margin: 0;
13
  padding: 20px;
14
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  .grid-container {
16
  display: flex;
17
  justify-content: center;
18
+ gap: 40px;
19
  flex-wrap: wrap;
20
  margin-bottom: 30px;
21
  }
22
+ .grid-box {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  display: grid;
24
  gap: 2px;
25
+ margin-bottom: 10px;
 
 
 
26
  }
 
27
  .cell {
28
+ width: 25px;
29
+ height: 25px;
30
+ border: 1px solid #ccc;
31
+ }
32
+ .grid-title {
33
+ font-weight: bold;
34
+ margin-bottom: 5px;
35
  }
36
  </style>
37
  </head>
 
46
 
47
  <h2>Input / Output Pairs</h2>
48
  {% for pair in input_output_pairs %}
49
+ <div class="grid-container">
50
+ <div>
51
+ <div class="grid-title">Input Grid</div>
52
+ <div class="grid-box" id="input-{{ loop.index0 }}"></div>
 
 
 
 
 
53
  </div>
54
+ <div>
55
+ <div class="grid-title">Output Grid</div>
56
+ <div class="grid-box" id="output-{{ loop.index0 }}"></div>
57
+ </div>
58
+ </div>
59
+ <script>
60
+ drawGrid("input-{{ loop.index0 }}", {{ pair[0]|tojson }});
61
+ drawGrid("output-{{ loop.index0 }}", {{ pair[1]|tojson }});
62
+ </script>
63
  {% endfor %}
64
 
65
  <h2>Best Program</h2>
 
68
  <script>
69
  function drawGrid(id, gridData) {
70
  const container = document.getElementById(id);
71
+ container.style.gridTemplateRows = `repeat(${gridData.length}, 25px)`;
72
+ container.style.gridTemplateColumns = `repeat(${gridData[0].length}, 25px)`;
73
 
74
  const colorMap = {
75
+ 0: "#FFFFFF", // white
76
  1: "#0074D9", // blue
77
  2: "#FF4136", // red
78
  3: "#2ECC40", // green
 
81
  6: "#FF851B", // orange
82
  7: "#7FDBFF", // light blue
83
  8: "#F012BE", // pink
84
+ 9: "#111111" // dark gray
85
  };
86
 
87
  container.innerHTML = '';
88
+ for (let row of gridData) {
89
+ for (let cell of row) {
90
+ const div = document.createElement('div');
91
  div.classList.add("cell");
92
+ div.style.backgroundColor = colorMap[cell] || "#000000";
93
  container.appendChild(div);
94
+ }
95
+ }
96
  }
97
  </script>
98