Skip to content

Commit

Permalink
Merge branch 'main' into patch-2
Browse files Browse the repository at this point in the history
  • Loading branch information
@arjunsuresh
arjunsuresh authored Sep 26, 2024
2 parents 1686e87 + 437360a commit 3341a08
Show file tree
Hide file tree
Showing 5 changed files with 141 additions and 76 deletions.
12 changes: 11 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1 +1,11 @@
MLPerf Inference Visualization Template
# MLPerf Inference Visualization Template

If you have a [docinit](https://raw.githubusercontent.com/GATEOverflow/inference_results_v4.1/main/docinit.sh) script, just run that in the root of your MLPerf inference_results repository.

```
bash docinit.sh
```

This will copy the template code including CSS/HTML overrides and the JS files from this template repository to the docs site of the inference results repository.


11 changes: 2 additions & 9 deletions javascripts/common.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,9 @@ models_edge_ = [ "gptj-99", "gptj-99.9", "bert-99", "stable-diffusion-xl", "reti
models_datacenter = [];
models_edge = [];

const dbName = "mlperf_inference";
//config results_version; defined in config.js
const dbName = "mlperf_inference_" + results_version;//results_version defined in config.js
//const dbVersion = 4; defined in config.js
const objStore = "inference_results_"+results_version; //results_version defined in config.js
const objStore = "inference_results";

async function fetchAndStoreData(db) {
try {
Expand Down Expand Up @@ -65,12 +64,6 @@ function readAllData() {
request.onsuccess = async function(event) {
const db = event.target.result;

// Ensure the object store exists
if (!db.objectStoreNames.contains(objStore)) {
const objectStore = db.createObjectStore(objStore, { autoIncrement: true });
console.log("Object store created");
await fetchAndStoreData(db);
}

// Start a transaction to read data
const transaction = db.transaction([objStore], "readonly");
Expand Down
56 changes: 48 additions & 8 deletions javascripts/results_tablesorter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,24 +146,64 @@ function drawChartResults(){
}

function reConstructTables(category, division, with_power, data){
availabilities = [ "Available", "Preview", "RDI" ];
availabilities = [ "Available", "Preview", "RDI" ];
total_count = 0;
if(with_power) {
result_prefix = "power"
}
else {
result_prefix = "performance"
}
availabilities.forEach(function(availability) {
// filtered data as per the user choice
const filteredResults = filterDataResultsTable(category, division, with_power, availability, data);
//console.log(filteredResults.length);
var html_table = constructTable(category, division, with_power, availability, filteredResults);
var tableHeading = `${category} Category: ${availability} submissions in ${division} division`;
var html_table = null;
var tableHeading = null;
//console.log(filteredResults);
total_count += filteredResults.length;
if(filteredResults.length == 0) {
tableHeading = `${category} Category: No ${availability} ${result_prefix} submissions in ${division} division`;
}
else {
//console.log(filteredResults.length);
html_table = constructTable(category, division, with_power, availability, filteredResults);
tableHeading = `${category} Category: ${availability} ${result_prefix} submissions in ${division} division`;
}
// replacing the old table with the newly constructed one
var elemIdTable = `results_table_${availability.toLowerCase()}`
var elemIdTableHeading = `results_heading_${availability.toLowerCase()}`
$("#"+elemIdTableHeading).html(tableHeading);
$("#"+elemIdTableHeading).show();

if (html_table) {
document.getElementById(elemIdTable).innerHTML = html_table;
document.getElementById(elemIdTableHeading).innerHTML = tableHeading;
$("#"+elemIdTable).html(html_table);
$("#"+elemIdTable).show();
}
else {
$("#"+elemIdTable).hide();
}
});
var countResultsTable = constructSummaryTable(data, category, division, with_power)
var elemIdTableSummary = `results_summary`
document.getElementById(elemIdTableSummary).innerHTML = countResultsTable;
if(total_count == 0) {
tableHeading = `${category} Category: No ${result_prefix} submissions in ${division} division`;
$("#results_heading_available").html(tableHeading);
$("#results_heading_preview").hide();
$("#results_heading_RDI").hide();
$("#"+elemIdTableSummary).hide();
$(".counttable_wrapper").hide();
$("#submittervssubmissionchartContainer").hide();
$("#modelvssubmissionchartContainer").hide();
$("#count_heading").hide();
}
else {
var countResultsTable = constructSummaryTable(data, category, division, with_power)
$("#"+elemIdTableSummary).html(countResultsTable);
$("#"+elemIdTableSummary).show();
$(".counttable_wrapper").show();
$("#submittervssubmissionchartContainer").show();
$("#modelvssubmissionchartContainer").show();
$("#count_heading").show();
}
$('table').tablesorter();
$("table").trigger("updateAll");
}
Expand Down
126 changes: 74 additions & 52 deletions javascripts/topresults.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,31 @@ $('#printChart3').hide();
$('#chartContainer2').hide();
$('#printChart2').hide();

function animateToTop() {
$('html, body').animate({
scrollTop: 0
}, 'slow');
}
function updateContent(myData) {
//$("#topresults_table_wrapper").focus();
model = $("#model").val();
scenario = $("#scenario").val();
division = $("#division").val();
category = $("#category").val();
metric = $("#metric").val();
metric = $("#metric").val();
metric_str = metric.replace("_", " ");
//updateScenarioUnits(myData);
$("#topresults_heading").text(`${model} results in ${category} category, ${division} division`);
if(myData.length == 0) {
$("#topresults_heading").text(`No ${model} results in ${category} category, ${division} division for ${metric_str} metric`);
$("#topresults_table_wrapper").hide();
$(".chart").hide();
$(".btn-chart").hide();
$("button.print").hide();
animateToTop();
return;
}
$("#topresults_table_wrapper").show();
$("#topresults_heading").text(`${model} results in ${category} category, ${division} division, ${scenario} scenario for ${metric_str} metric`);
tablehtml = constructTable(division, scenario, model, metric, myData);
//console.log(division+scenario);
//console.log(tablehtml);
Expand All @@ -50,47 +66,10 @@ function updateContent(myData) {
//drawPowerChart();
drawPerfCharts();
});
$('html, body').animate({
scrollTop: 0
}, 'slow');
animateToTop();
}

$(document).ready(function() {
allData = [];
readAllData().then(function(global_data) {
//console.log(allData);
allData = global_data;
keys = [ "Suite", "Category" ];
values = [ "datacenter", "closed" ];
myData = filterData(allData, keys, values);
var models = getUniqueValues(myData, "Model");
scenario = "Offline";
division = "closed";
category = "datacenter";
keys = ["Model", "Scenario"];
values = ["llama2-70b-99.9", scenario];
myData = filterData(myData, keys, values);
//console.log(myData);
$("#model").append('<option selected value="llama2-70b-99.9">Llama 2</option>');
var devices = getUniqueValuesCombined(myData, " x ", [ "Accelerator", "a#" ]);
var platforms = getUniqueValuesCombined(myData, " : ", [ "version", "Platform" ]);
var scenarios = validScenarios["datacenter"];// getUniqueValues(myData, "Scenario");
model = $("#model").val();
updateScenarioUnits(myData);
buildSelectOption(models, "model", model);
buildSelectOption(scenarios, "scenario", scenario);
platforms.unshift("All systems");
buildSelectOption(platforms, "filter_systems", "All systems");
devices.unshift("All devices");
buildSelectOption(devices, "filter_devices", "All devices");
charttitlesuffix = ` for ${model} ${scenario} scenario in ${division} division ${category} category`;
chart1title = "Performance " + charttitlesuffix;
// chart2title = "Performance per accelerator " + charttitlesuffix;
//chart2ytitle = "Samples per second per accelerator";
updateContent(myData);
}).catch(function(error) {
console.error(error);
});

//console.log("The page is fully loaded.");
});
Expand Down Expand Up @@ -207,19 +186,60 @@ function constructTable(division, scenario, model, metric, result) {
}



function updateFilters(myData) {
var platforms = getUniqueValuesCombined(myData, " : ", [ "version", "Platform" ]);
platforms.unshift("All systems");
buildSelectOption(platforms, "filter_systems", "All systems");
var devices = getUniqueValuesCombined(myData, " x ", [ "Accelerator", "a#" ]);
devices.unshift("All devices");
buildSelectOption(devices, "filter_devices", "All devices");
}



$(document).ready(function() {
allData = [];
readAllData().then(function(global_data) {
//console.log(allData);
allData = global_data;
keys = [ "Suite", "Category" ];
values = [ "datacenter", "closed" ];
myData = filterData(allData, keys, values);
var models = getUniqueValues(myData, "Model");
scenario = "Offline";
division = "closed";
category = "datacenter";
keys = ["Model", "Scenario"];
values = ["llama2-70b-99.9", scenario];
myData = filterData(myData, keys, values);
//console.log(myData);
$("#model").append('<option selected value="llama2-70b-99.9">Llama 2</option>');
var scenarios = validScenarios["datacenter"];// getUniqueValues(myData, "Scenario");
model = $("#model").val();
updateScenarioUnits(myData);
buildSelectOption(models, "model", model);
buildSelectOption(scenarios, "scenario", scenario);

updateFilters(myData);

charttitlesuffix = ` for ${model} ${scenario} scenario in ${division} division ${category} category`;
chart1title = "Performance " + charttitlesuffix;
// chart2title = "Performance per accelerator " + charttitlesuffix;
//chart2ytitle = "Samples per second per accelerator";
updateContent(myData);
}).catch(function(error) {
console.error(error);
});


$('.myFilter').on('change', function() {
var category = $('#category').val();
var division = $('#division').val();
var availability = $('#availability').val();
var model = $('#model').val();
var scenario = $('#scenario').val();
keys = [ "Suite", "Category", "Availability" ];
values = [ category, division, availability ];
keys = [ "Suite", "Category" ];
values = [ category, division ];
if(availability != 'all') {
keys.push("Availability");
values.push(availability);
Expand All @@ -228,29 +248,31 @@ $(document).ready(function() {
myData = filterData(allData, keys, values);
//console.log(scenario);
var models = getUniqueValues(myData, "Model");
var devices = getUniqueValuesCombined(myData, " x ", [ "Accelerator", "a#" ]);
var platforms = getUniqueValuesCombined(myData, " : ", [ "version", "Platform" ]);
var scenarios = validScenarios[category];// getUniqueValues(myData, "Scenario");
platforms.unshift("All systems");
devices.unshift("All devices");
buildSelectOption(models, "model", model);
buildSelectOption(models, "model", model);
buildSelectOption(scenarios, "scenario", scenario);
buildSelectOption(platforms, "filter_systems", "All systems");
buildSelectOption(devices, "filter_devices", "All devices");

updateFilters(myData);
});


$('#model').on('change', function() {
var category = $('#category').val();
var division = $('#division').val();
var availability = $('#availability').val();
var model = $('#model').val();
keys = [ "Suite", "Category", "Availability", "Model" ];
values = [ category, division, availability, model ];
keys = [ "Suite", "Category", "Model" ];
values = [ category, division, model ];
if(availability != 'all') {
keys.push("Availability");
values.push(availability);
}
//console.log(allData);
myData = filterData(allData, keys, values);
//console.log(category+division+scenario);
var scenarios = getUniqueValues(myData, "Scenario");
buildSelectOption(scenarios, "scenario", scenario);
updateFilters(myData);
});

$('#resultSelectionForm').submit(function(event) {
Expand Down
12 changes: 6 additions & 6 deletions top_results/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,14 @@ hide:

<hr>

<div id="chartContainer1" class="bgtext" style="height: 370px; width: 100%;"></div>
<button class="btn btn-primary" id="printChart1">Download</button>
<div id="chartContainer1" class="bgtext chart" style="height: 370px; width: 100%;"></div>
<button class="btn btn-primary btn-chart" id="printChart1">Download</button>

<div id="chartContainer2" class="bgtext" style="height: 370px; width: 100%;"></div>
<button class="btn btn-primary" id="printChart2">Download</button>
<div id="chartContainer2" class="bgtext chart" style="height: 370px; width: 100%;"></div>
<button class="btn btn-primary btn-chart" id="printChart2">Download</button>

<div id="chartContainer3" class="bgtext" style="height: 370px; width: 100%;"></div>
<button class="btn btn-primary" id="printChart3">Download</button>
<div id="chartContainer3" class="bgtext chart" style="height: 370px; width: 100%;"></div>
<button class="btn btn-primary btn-chart" id="printChart3">Download</button>



Expand Down

0 comments on commit 3341a08

Please sign in to comment.