Skip to content

Commit

Permalink
Merge pull request #3 from sjagtap3/task2
Browse files Browse the repository at this point in the history 
Task2
  • Loading branch information
@topgunlcs98
topgunlcs98 authored Jul 10, 2024
2 parents 2b6a432 + 8fbc53d commit df1a71d
Show file tree
Hide file tree
Showing 2 changed files with 182 additions and 145 deletions.
21 changes: 18 additions & 3 deletions detailsPage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,8 +90,22 @@ <h5 class="fw-light justify-content-center">🙏 Please cite our paper if you ar
</a>

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

<label for="taskDropdownLabel" style="display: none;">Tasks:</label>
<select id="taskDropdown">
<option value="" disabled selected>Select a task</option>
<option value="ier">IER</option>
<option value="der">DER</option>
<option value="sr">SR</option>
</select>

<label for="datasetDropdownLabel" style="display: none;">Dataset:</label>
<select id="datasetDropdown" style="display: none;">
<!-- Options are set dynamically -->
</select>

<!-- <label for="generationtaskLabel" style="display: none;">Generation Task:</label> -->
<select id="generationtask" style="display: none;">
<!-- Options are set dynamically -->
</select>

Expand All @@ -100,9 +114,10 @@ <h5 class="fw-light justify-content-center">🙏 Please cite our paper if you ar
<!-- Options are set dynamically -->
</select>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
filterDropdowns();
filterDropdowns();
});
</script>
</div>
Expand Down
306 changes: 164 additions & 142 deletions detailsScript.js
View file
Original file line number Diff line number Diff line change
@@ -1,193 +1,215 @@
function filterDropdowns()
{
fetchData().then(data => {
let datasetData = data[0];
let ier = data[1];
processData(datasetData, ier);
var selectedDataset = "ier";
let problemIds = {};

// Entry point
function filterDropdowns() {
document.getElementById('taskDropdown').addEventListener('change', function() {
selectedDataset = this.value;
fetchData().then(data => {
let datasetData = data[0];
processData(datasetData);
});
});

document.getElementById('datasetDropdown').addEventListener('change', function() {
console.log('Dataset selected:', this.value);
showGenerationTaskDropdown();
document.getElementById('generationTask').value = '';
});

document.getElementById('generationtask').addEventListener('change', function() {
console.log('Generation task selected:', this.value);

let dataset = document.getElementById('datasetDropdown').value;
if(this.value == 'code synthesis') {
populateProblemIdDropdown(dataset);
}
else {
}
});

document.getElementById('problemIdDropdown').addEventListener('change', function() {
let dataset = document.getElementById('datasetDropdown').value;
let problemId = this.value;
console.log('Problem ID selected:', this.value);
if (dataset && problemId) {
populateDetailsTable(dataset, problemId);
}
});
}

// Fetch the data
// function fetchData() {
// return fetch('task1/dataset.json')
// .then(response => response.json())
// .catch(err => console.error("Error:", err));
// }
function showGenerationTaskDropdown() {
let tasks = ['code synthesis', 'code translation'];
populateDropdown('generationtask', tasks, 'Select a task');

document.getElementById('generationtask').style.display = 'inline';
}

// 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));
let fetchUrls;
switch (selectedDataset) {
case "ier":
fetchUrls = ['task1/dataset.json', 'task1/ier_data.json'];
break;
case "der":
fetchUrls = ['task2/dataset_synthesis.json', 'task2/der_data.json'];
break;
case "sr":
fetchUrls = ['task3/dataset.json', 'task3/sr_data.json'];
break;
default:
return Promise.reject("Invalid dataset selected");
}

return Promise.all(fetchUrls.map(url => fetch(url).then(response => response.json())))
.catch(err => console.error("Error:", err));
}

// Process the data
function processData(data, ier) {
// Parse the JSON data
function processData(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
problemIds = {};
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);
});
populateDropdown('datasetDropdown', datasets, 'Select a dataset');

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);
// Function to populate a dropdown
function populateDropdown(dropdownId, items, defaultText) {
let dropdown = document.getElementById(dropdownId);
while (dropdown.firstChild) {
dropdown.removeChild(dropdown.firstChild);
}

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

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

datasetDropdown.value = '';
dropdown.value = '';
dropdown.style.display = 'inline';
document.getElementById(`${dropdownId}Label`).style.display = 'inline';
}

// 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);
});
function populateProblemIdDropdown(selectedDataset) {
let problems = problemIds[selectedDataset] || [];
populateDropdown('problemIdDropdown', problems, 'Select a problem id');

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

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


function populateDetailsTable(dataset, problemId, ierData) {
// Fetch the data
// Function to populate the details table
function populateDetailsTable(dataset, problemId) {
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 details;
if (selectedDataset == "ier") {
details = data[0][dataset][problemId];
let code = details['code'];
let input = details['code_input'];
let groundTruth = data[1]["ChatGPT_3.5"]?.[dataset][problemId]['ground_truth'] ?? 'Not Available';

displayDetailsTable([
{ label: 'Code:', value: code },
{ label: 'Input:', value: input },
{ label: 'Expected Output:', value: groundTruth }
]);

populateModelResults(data[1], dataset, problemId, 'ier');
} else if (selectedDataset == "der") {
details = data[0][dataset][problemId];
let f1 = details['nl'];
let f2 = details['asserts'];
let f3 = details['input_reasoning'];
let f4 = details['output_reasoning'];
let groundTruth = data[1]["ChatGPT_3.5"]?.[dataset][problemId]['ground-truth'] ?? 'Not Available';

displayDetailsTable([
{ label: 'NL:', value: f1 },
{ label: 'Asserts:', value: f2 },
{ label: 'Input Reasoning:', value: f3 },
{ label: 'Output Reasoning:', value: f4 },
{ label: 'Expected Output:', value: groundTruth }
]);

populateModelResults(data[1], dataset, problemId, 'der');
}
});
}

// Function to display details table
function displayDetailsTable(rows) {
let tableContent = rows.map(row => `
<tr>
<th style="border: 1px solid black; text-align: left; padding: 10px;">${row.label}</th>
<td style="border: 1px solid black; text-align: left; padding: 10px;"><pre>${row.value}</pre></td>
</tr>`).join('');

let 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>
${tableContent}
</table>
</div>`;

// Insert the table into the div
document.getElementById('detailsTable').innerHTML = table;
populateModelResults(dataset, problemId);
});
document.getElementById('detailsTable').innerHTML = table;
}

// Function to populate the model results
function populateModelResults(data, dataset, problemId, type) {
document.getElementById('modelResults').innerHTML = '';
let models = Object.keys(data);

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]);
let html = models.map(model => {
if (!model) return '';

// Initialize the HTML string with table headers
let html = '';
let details = data[model][dataset][problemId];
let color = type === 'ier' ? (details['label'] === 1 ? 'green' : 'red') :
details['label'] === 1 ? 'orange' : details['label'] === 0 ? 'red' : 'green';

// 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';
let synthesized_code = type === 'der' ? details['synthesized_code'] || 'Not Available' : '';

let reasoning = details['reasoning'] || 'Not Available';
let output = details['output'] || 'Not Available';

html += `
return `
<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>
`;
});
<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>
${type === 'der' ? `
<tr>
<th style="border: 1px solid black; text-align: left; padding: 10px;">Synthesized Code</th>
<td style="border: 1px solid black; text-align: left; padding: 10px;">${synthesized_code}</td>
</tr>` : ''}
</tbody>
</table>
<br>`;
}).join('');

document.getElementById('modelResults').innerHTML = html;
}

// Insert the HTML into the div
document.getElementById('modelResults').innerHTML = html;
}).catch(err => console.error("Error:", err));
}
// Initialize the filterDropdowns function
filterDropdowns();

0 comments on commit df1a71d

Please sign in to comment.