Formatting : code reasoning and output

Intelligent-CAT-Lab · Jun 12, 2024 · cda0756 · cda0756
1 parent 919fec2
commit cda0756
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 17 deletions.
diff --git a/detailsPage.html b/detailsPage.html
@@ -12,7 +12,9 @@
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
 <style>
     #content {
-        width: 85%;
+        width: 100%;
+        max-width: 1200px; /* You can adjust this value according to your needs */
+        margin: 0 auto; /* This will center the div if the viewport is wider than max-width */
       }
     th, td {
         text-align: center;
@@ -39,6 +41,20 @@
     font-weight: 300;
     margin: 1em;
   }
+
+  #detailsTable {
+    width: 100%;
+    height: auto;
+    text-align: center;
+    overflow: auto; /* This will add a scrollbar if the content is larger than the div */
+}
+
+#modelResults {
+    width: 100%; /* This will make the div take up the full width of its parent */
+    overflow: auto; /* This will add a scrollbar if the content is larger than the div */
+    text-align: center;
+    overflow: auto;
+}
 </style>
 </head>
 <body>
@@ -96,6 +112,7 @@ <h5 class="fw-light justify-content-center">🙏 Please cite our paper if you ar
 
 
         <div id="modelResults"></div>
+        <!-- Table loaded dynamically -->
 
     </div>
     <script src="detailsScript.js"></script>

diff --git a/detailsScript.js b/detailsScript.js
@@ -112,6 +112,7 @@ function populateProblemIdDropdown(problemIds, selectedDataset) {
     document.getElementById('problemIdDropdownLabel').style.display = 'inline';
 }
 
+
 function populateDetailsTable(dataset, problemId, ierData) {
     // Fetch the data
     fetchData().then(data => {
@@ -121,30 +122,36 @@ function populateDetailsTable(dataset, problemId, ierData) {
         let groundTruth = ierData["ChatGPT_3.5"][dataset][problemId]['ground_truth'];
 
 
-        let table = `<table style="border: 1px solid black; text-align: left;">
-            <tr>
-                <th style="border: 1px solid black; text-align: left; padding: 10px;">Code:</th>
-                <td style="border: 1px solid black; text-align: left; padding: 10px;"><pre>${code}</pre></td>
-            </tr>
-            <tr>
-                <th style="border: 1px solid black; text-align: left; padding: 10px;">Input:</th>
-                <td style="border: 1px solid black; text-align: left; padding: 10px;"><pre>${input}</pre></td>
-            </tr>
-            <tr>
-                <th style="border: 1px solid black; text-align: left; padding: 10px;">Expected Output:</th>
-                <td style="border: 1px solid black; text-align: left; padding: 10px;"><pre>${groundTruth}</pre></td>
-            </tr>
-        </table>`;
+        let table = `
+        <div style="justify-content: center;">
+            <table style="border: 1px solid black; text-align: center;">
+                <tr>
+                    <th style="border: 1px solid black; text-align: left; padding: 10px;">Code:</th>
+                    <td style="border: 1px solid black; text-align: left; padding: 10px;"><pre>${code}</pre></td>
+                </tr>
+                <tr>
+                    <th style="border: 1px solid black; text-align: left; padding: 10px;">Input:</th>
+                    <td style="border: 1px solid black; text-align: left; padding: 10px;"><pre>${input}</pre></td>
+                </tr>
+                <tr>
+                    <th style="border: 1px solid black; text-align: left; padding: 10px;">Expected Output:</th>
+                    <td style="border: 1px solid black; text-align: left; padding: 10px;"><pre>${groundTruth}</pre></td>
+                </tr>
+            </table>
+        </div>`;
 
         // Insert the table into the div
         document.getElementById('detailsTable').innerHTML = table;
         populateModelResults(dataset, problemId);
     });
 }
 
+
 function populateModelResults(dataset, problemId) {
     // Fetch the data
     fetchData().then(data => {
+        document.getElementById('modelResults').innerHTML = '';
+
         // Get the problem details for the selected problem id
         let models = Object.keys(data[1]);
 
@@ -153,19 +160,26 @@ function populateModelResults(dataset, problemId) {
 
         // Add a textbox and a table for each model
         models.forEach(model => {
+            if (model == null || model=='') {
+                return;
+            }
             let details = data[1][model][dataset][problemId];
             let color = details['label'] === 1 ? 'green' : 'red';
+
+            let reasoning = details['reasoning'] || 'Not Available';
+            let output = details['output'] || 'Not Available';
+
             html += `
             <label style="background-color: ${color}; width: 100%; display: block; margin-bottom: 10px; color:white;">${model}</label>
                 <table>
                     <tbody>
                         <tr>
                             <th style="border: 1px solid black; text-align: left; padding: 10px;">Reasoning</th>
-                            <td style="border: 1px solid black; text-align: left; padding: 10px;">${details['reasoning']}</td>
+                            <td style="border: 1px solid black; text-align: left; padding: 10px;">${reasoning}</td>
                         </tr>
                         <tr>
                             <th style="border: 1px solid black; text-align: left; padding: 10px;">Predicted Output</th>
-                            <td style="border: 1px solid black; text-align: left; padding: 10px;">${details['output']}</td>
+                            <td style="border: 1px solid black; text-align: left; padding: 10px;">${output}</td>
                         </tr>
                     </tbody>
                 </table>