Hugging Face's logo

Spaces:
Liyew
/
Concept_Guided_ARC_solver
Sleeping

App Files Community
woletee commited on
Commit
4893ced
·
1 Parent(s): 3442479

updated the concepts to be displayed next to each other

Browse files
Files changed (1) hide show
  1. templates/results.html +38 -9
templates/results.html CHANGED
@@ -33,18 +33,30 @@
33
  font-weight: bold;
34
  margin-bottom: 5px;
35
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36
  </style>
37
  </head>
38
  <body>
39
 
40
  <h1>Predicted High-Level Concepts</h1>
41
- <ul>
42
- {% for concept in hlcs %}
43
- <li>{{ concept }}</li>
44
- {% endfor %}
45
- </ul>
46
-
47
- <h2>Input / Output Pairs</h2>
48
 
49
  <div id="pairs-container"></div>
50
 
@@ -53,6 +65,7 @@
53
 
54
  <script>
55
  const inputOutputPairs = {{ input_output_pairs | tojson }};
 
56
 
57
  const colorMap = {
58
  0: "#FFFFFF", 1: "#0074D9", 2: "#FF4136", 3: "#2ECC40",
@@ -79,23 +92,39 @@
79
  const container = document.createElement("div");
80
  container.className = "grid-container";
81
 
 
82
  const inputDiv = document.createElement("div");
83
  inputDiv.innerHTML = `<div class="grid-title">Input Grid</div>`;
84
  const inputGridBox = document.createElement("div");
85
  inputGridBox.className = "grid-box";
86
  inputDiv.appendChild(inputGridBox);
 
87
 
 
88
  const outputDiv = document.createElement("div");
89
  outputDiv.innerHTML = `<div class="grid-title">Output Grid</div>`;
90
  const outputGridBox = document.createElement("div");
91
  outputGridBox.className = "grid-box";
92
  outputDiv.appendChild(outputGridBox);
93
-
94
- drawGrid(inputGridBox, pair[0]);
95
  drawGrid(outputGridBox, pair[1]);
96
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
97
  container.appendChild(inputDiv);
98
  container.appendChild(outputDiv);
 
99
  pairsContainer.appendChild(container);
100
  });
101
  </script>
 
33
  font-weight: bold;
34
  margin-bottom: 5px;
35
  }
36
+ .concept-box {
37
+ display: flex;
38
+ flex-direction: column;
39
+ justify-content: center;
40
+ align-items: center;
41
+ min-width: 150px;
42
+ }
43
+ .concept-title {
44
+ font-weight: bold;
45
+ margin-bottom: 5px;
46
+ }
47
+ .concept-text {
48
+ font-size: 16px;
49
+ padding: 5px 10px;
50
+ border: 1px solid #888;
51
+ border-radius: 8px;
52
+ background-color: #f4f4f4;
53
+ }
54
  </style>
55
  </head>
56
  <body>
57
 
58
  <h1>Predicted High-Level Concepts</h1>
59
+ <h2>Input / Output Pairs with Concepts</h2>
 
 
 
 
 
 
60
 
61
  <div id="pairs-container"></div>
62
 
 
65
 
66
  <script>
67
  const inputOutputPairs = {{ input_output_pairs | tojson }};
68
+ const hlcs = {{ hlcs | tojson }};
69
 
70
  const colorMap = {
71
  0: "#FFFFFF", 1: "#0074D9", 2: "#FF4136", 3: "#2ECC40",
 
92
  const container = document.createElement("div");
93
  container.className = "grid-container";
94
 
95
+ // Input Grid
96
  const inputDiv = document.createElement("div");
97
  inputDiv.innerHTML = `<div class="grid-title">Input Grid</div>`;
98
  const inputGridBox = document.createElement("div");
99
  inputGridBox.className = "grid-box";
100
  inputDiv.appendChild(inputGridBox);
101
+ drawGrid(inputGridBox, pair[0]);
102
 
103
+ // Output Grid
104
  const outputDiv = document.createElement("div");
105
  outputDiv.innerHTML = `<div class="grid-title">Output Grid</div>`;
106
  const outputGridBox = document.createElement("div");
107
  outputGridBox.className = "grid-box";
108
  outputDiv.appendChild(outputGridBox);
 
 
109
  drawGrid(outputGridBox, pair[1]);
110
 
111
+ // Concept Box
112
+ const conceptDiv = document.createElement("div");
113
+ conceptDiv.className = "concept-box";
114
+ const conceptTitle = document.createElement("div");
115
+ conceptTitle.className = "concept-title";
116
+ conceptTitle.innerText = "Predicted Concept";
117
+ const conceptText = document.createElement("div");
118
+ conceptText.className = "concept-text";
119
+ conceptText.innerText = hlcs[index] || "N/A";
120
+
121
+ conceptDiv.appendChild(conceptTitle);
122
+ conceptDiv.appendChild(conceptText);
123
+
124
+ // Combine everything into one row
125
  container.appendChild(inputDiv);
126
  container.appendChild(outputDiv);
127
+ container.appendChild(conceptDiv);
128
  pairsContainer.appendChild(container);
129
  });
130
  </script>