Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>ARC Grid Visualization</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: white; | |
| color: black; | |
| text-align: center; | |
| margin: 0; | |
| padding: 20px; | |
| } | |
| .grid-container { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; /* Align items in the same row */ | |
| gap: 40px; | |
| flex-wrap: wrap; | |
| margin-bottom: 30px; | |
| } | |
| .grid-box { | |
| display: grid; | |
| gap: 2px; | |
| margin-bottom: 10px; | |
| } | |
| .cell { | |
| width: 25px; | |
| height: 25px; | |
| border: 1px solid #ccc; | |
| } | |
| .grid-title { | |
| font-weight: bold; | |
| margin-bottom: 5px; | |
| } | |
| .concept-box { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| min-width: 150px; | |
| padding: 10px; | |
| background-color: #f4f4f4; | |
| border-radius: 8px; | |
| border: 1px solid #888; | |
| } | |
| .concept-title { | |
| font-weight: bold; | |
| margin-bottom: 5px; | |
| } | |
| pre { | |
| background-color: #f5f5f5; | |
| padding: 15px; | |
| font-family: Consolas, monospace; | |
| font-size: 14px; | |
| border-radius: 8px; | |
| max-width: 900px; | |
| margin: auto; | |
| white-space: pre-wrap; | |
| border: 1px solid #ddd; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Concept Guided PS</h1> | |
| <h2>Step1: Training Pairs (left) with Concepts by recognition module (right most)</h2> | |
| <div id="pairs-container"></div> | |
| <h2>Step2: Best Program by GP</h2> | |
| <pre>{{ best_program }}</pre> | |
| <h2>Test Input / Ground Truth / Predicted Outputs (by applying best program)</h2> | |
| <div id="test-pairs-container"></div> | |
| <script> | |
| const inputOutputPairs = {{ input_output_pairs | tojson | safe }}; | |
| const hlcs = {{ hlcs | tojson | safe }}; | |
| const testPairs = {{ test_pairs | tojson | safe }}; | |
| const predictedTestOutputs = {{ predicted_test_outputs | tojson | safe }}; | |
| const colorMap = { | |
| 0: "#000000", 1: "#0074D9", 2: "#FF4136", 3: "#2ECC40", | |
| 4: "#FFDC00", 5: "#AAAAAA", 6: "#F012BE", 7: "#FF851B", | |
| 8: "#7FDBFF", 9: "#870C25" | |
| }; | |
| function drawGrid(container, gridData) { | |
| if (!Array.isArray(gridData) || !Array.isArray(gridData[0])) return; | |
| container.style.gridTemplateRows = `repeat(${gridData.length}, 25px)`; | |
| container.style.gridTemplateColumns = `repeat(${gridData[0].length}, 25px)`; | |
| container.innerHTML = ''; | |
| gridData.forEach(row => { | |
| row.forEach(cell => { | |
| const div = document.createElement("div"); | |
| div.className = "cell"; | |
| div.style.backgroundColor = colorMap[cell] || "#000000"; | |
| container.appendChild(div); | |
| }); | |
| }); | |
| } | |
| // TRAINING PAIRS | |
| const pairsContainer = document.getElementById("pairs-container"); | |
| inputOutputPairs.forEach((pair, index) => { | |
| 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"); | |
| inputGridBox.className = "grid-box"; | |
| 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"); | |
| outputGridBox.className = "grid-box"; | |
| outputDiv.appendChild(outputGridBox); | |
| drawGrid(outputGridBox, pair[1]); | |
| // Concept Box (Horizontally next to output) | |
| const conceptDiv = document.createElement("div"); | |
| conceptDiv.className = "concept-box"; | |
| conceptDiv.innerHTML = ` | |
| <div class="concept-title">Predicted Concept</div> | |
| <div class="concept-text">${hlcs[index] || 'N/A'}</div> | |
| `; | |
| // Append all to container | |
| container.appendChild(inputDiv); | |
| container.appendChild(outputDiv); | |
| container.appendChild(conceptDiv); | |
| pairsContainer.appendChild(container); | |
| }); | |
| // TEST PAIRS + PREDICTED OUTPUT | |
| const testContainer = document.getElementById("test-pairs-container"); | |
| testPairs.forEach((pair, index) => { | |
| const container = document.createElement("div"); | |
| container.className = "grid-container"; | |
| // Test Input Grid | |
| const inputDiv = document.createElement("div"); | |
| inputDiv.innerHTML = `<div class="grid-title">Test Input</div>`; | |
| const inputGridBox = document.createElement("div"); | |
| inputGridBox.className = "grid-box"; | |
| inputDiv.appendChild(inputGridBox); | |
| drawGrid(inputGridBox, pair[0]); | |
| // Ground Truth Output | |
| const gtDiv = document.createElement("div"); | |
| gtDiv.innerHTML = `<div class="grid-title">Ground Truth Output</div>`; | |
| const gtGridBox = document.createElement("div"); | |
| gtGridBox.className = "grid-box"; | |
| gtDiv.appendChild(gtGridBox); | |
| drawGrid(gtGridBox, pair[1]); | |
| // Predicted Output | |
| const predDiv = document.createElement("div"); | |
| predDiv.innerHTML = `<div class="grid-title">Predicted Output</div>`; | |
| const predGridBox = document.createElement("div"); | |
| predGridBox.className = "grid-box"; | |
| predDiv.appendChild(predGridBox); | |
| drawGrid(predGridBox, predictedTestOutputs[index]); | |
| container.appendChild(inputDiv); | |
| container.appendChild(gtDiv); | |
| container.appendChild(predDiv); | |
| testContainer.appendChild(container); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |