Skip to content

Commit

Permalink
Merge pull request #1 from sjagtap3/detailsPage
Browse files Browse the repository at this point in the history 
Details page added
  • Loading branch information
@topgunlcs98
topgunlcs98 authored Jun 16, 2024
2 parents bf4312b + cda0756 commit e6ac4fb
Show file tree
Hide file tree
Showing 3 changed files with 317 additions and 0 deletions.
120 changes: 120 additions & 0 deletions detailsPage.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodeMind Leaderboard</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<!-- favicon.svg -->
<!-- <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👍</text></svg>"> -->
<!-- <link rel="icon" href="/favicon.svg" /> -->
<link rel="icon" href="https://images.emojiterra.com/google/noto-emoji/unicode-15/color/1024px/1f9d1-1f4bb.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<style>
#content {
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;
}
.citation-box {
border-left: 5px solid #333;
padding: 10px;
margin: 10px;
background-color: #f9f9f9;
font-style: italic;
}
#notes {
font-size: 1em;
}

#notes h3 {
margin-top: 1em;
font-size: 2em;
text-align: center;
}

#notes li {
font-size: 1.2em;
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>

<div id="content" class="container-fluid d-flex flex-column align-items-center gap-3">
<div id="content" class="container-fluid d-flex flex-column align-items-center gap-3">
<h1 class="text-nowrap mt-5">🏆 CodeMind Leaderboard 🏆</h1>
<h3 class="fw-light text-nowrap"><small id="warning">A Framework to Challenge Large Language Models for Code Reasoning.<br></small>
</h3>
<div class="d-flex flex-row justify-content-center gap-3">
<a href="https://github.com/Intelligent-CAT-Lab/CodeMind"><img
src="https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white"
alt="github" class="img-fluid"></a>
<a href="https://arxiv.org/abs/2402.09664"><img
src="https://img.shields.io/badge/arXiv-2402.09664-b31b1b.svg"
alt="paper"
class="img-fluid"></a>
<a href="/detailsPage.html"><img
src="https://img.shields.io/badge/Leaderboard-Details-ff69b4.svg"
alt="details"
class="img-fluid"></a>
</div>

<img src="CodeMind-Logo.jpg" alt="Girl in a jacket" width="20%">

<div class="container-fluid d-flex flex-column align-items-center">
<h5 class="fw-light justify-content-center">🙏 Please cite our paper if you are using this leaderboard in your work 🙏</h5>
</div>


<a href="index.html">
Back to Home
</a>

<div class="d-flex flex-row justify-content-center gap-3">
<label for="datasetDropdown">Dataset:</label>
<select id="datasetDropdown">
<!-- Options are set dynamically -->
</select>

<label for="problemIdDropdownLabel" style="display: none;">Problem ID:</label>
<select id="problemIdDropdown" style="display: none;">
<!-- Options are set dynamically -->
</select>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
filterDropdowns();
});
</script>
</div>

<div id="detailsTable"></div>
<!-- Table loaded dynamically -->


<div id="modelResults"></div>
<!-- Table loaded dynamically -->

</div>
<script src="detailsScript.js"></script>
</body>
</html>
193 changes: 193 additions & 0 deletions detailsScript.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,193 @@
function filterDropdowns()
{
fetchData().then(data => {
let datasetData = data[0];
let ier = data[1];
processData(datasetData, ier);
});
}

// Fetch the data
// function fetchData() {
// return fetch('task1/dataset.json')
// .then(response => response.json())
// .catch(err => console.error("Error:", err));
// }

// Fetch the data
function fetchData() {
return Promise.all([
fetch('task1/dataset.json').then(response => response.json()),
fetch('task1/ier_data.json').then(response => response.json())
]).catch(err => console.error("Error:", err));
}

// Process the data
function processData(data, ier) {
// Parse the JSON data
let parsedData = data;
let ierData = ier;

// Get the datasets and problem ids
let datasets = Object.keys(parsedData);
console.log(datasets);

populatedatasetDropdown(datasets);

let problemIds = {};
// Populate the problemIds object
datasets.forEach(dataset => {
problemIds[dataset] = Object.keys(parsedData[dataset]);
});
console.log(problemIds);

// Add an event listener to the dataset dropdown
document.getElementById('datasetDropdown').addEventListener('change', function() {
console.log('Dataset selected:', this.value);
populateProblemIdDropdown(problemIds, this.value);
});

document.getElementById('problemIdDropdown').addEventListener('change', function() {
let dataset = document.getElementById('datasetDropdown').value;
let problemId = this.value;

if (dataset && problemId) {
populateDetailsTable(dataset, problemId, ierData);
}
});
}

// Function to populate the dataset dropdown
function populatedatasetDropdown(datasets) {
let datasetDropdown = document.getElementById('datasetDropdown');

// Clear the dropdown
while (datasetDropdown.firstChild) {
datasetDropdown.removeChild(datasetDropdown.firstChild);
}

let defaultOption = document.createElement('option');
defaultOption.text = 'Select a dataset';
defaultOption.value = '';
datasetDropdown.add(defaultOption);

datasets.forEach(dataset => {
let option = document.createElement('option');
option.text = dataset;
option.value = dataset;
datasetDropdown.add(option);
});

datasetDropdown.value = '';
}

// Function to populate the problem id dropdown
function populateProblemIdDropdown(problemIds, selectedDataset) {
let problemIdDropdown = document.getElementById('problemIdDropdown');

// Clear the dropdown
while (problemIdDropdown.firstChild) {
problemIdDropdown.removeChild(problemIdDropdown.firstChild);
}

// Add a default option
let defaultOption = document.createElement('option');
defaultOption.text = 'Select a problem id';
defaultOption.value = '';
problemIdDropdown.add(defaultOption);

// Add the problem ids
problemIds[selectedDataset].forEach(problemId => {
let option = document.createElement('option');
option.text = problemId;
option.value = problemId;
problemIdDropdown.add(option);
});

// Set the default option as selected
problemIdDropdown.value = '';

// Show the problem id dropdown
problemIdDropdown.style.display = 'inline';
document.getElementById('problemIdDropdownLabel').style.display = 'inline';
}


function populateDetailsTable(dataset, problemId, ierData) {
// Fetch the data
fetchData().then(data => {
// Get the code and actual input for the selected problem id
let code = data[0][dataset][problemId]['code'];
let input = data[0][dataset][problemId]['code_input'];
let groundTruth = ierData["ChatGPT_3.5"][dataset][problemId]['ground_truth'];


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]);

// Initialize the HTML string with table headers
let html = '';

// 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;">${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;">${output}</td>
</tr>
</tbody>
</table>
<br>
`;
});

// Insert the HTML into the div
document.getElementById('modelResults').innerHTML = html;
}).catch(err => console.error("Error:", err));
}
4 changes: 4 additions & 0 deletions leader_board.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,10 @@ <h3 class="fw-light text-nowrap"><small id="warning">A Framework to Challenge La
src="https://img.shields.io/badge/arXiv-2402.09664-b31b1b.svg"
alt="paper"
class="img-fluid"></a>
<a href="detailsPage.html"><img
src="https://img.shields.io/badge/Leaderboard-Details-ff69b4.svg"
alt="details"
class="img-fluid"></a>
</div>

<img src="CodeMind-Logo.jpg" alt="Girl in a jacket" width="20%">
Expand Down

0 comments on commit e6ac4fb

Please sign in to comment.