Skip to content

Instantly share code, notes, and snippets.

@sparkydogX
Created November 14, 2018 05:20
Show Gist options
  • Save sparkydogX/26571f8737947c894c73714098a04173 to your computer and use it in GitHub Desktop.
Save sparkydogX/26571f8737947c894c73714098a04173 to your computer and use it in GitHub Desktop.
Find Max in Tensorboard Json
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Find Min/Max Value</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="sparkydog">
<!-- Reference Page: https://www.html5rocks.com/en/tutorials/file/dndfiles/#disqus_thread -->
<link rel="stylesheet" href="css/styles.css?v=1.0">
<style type="text/css" media="screen">
/* Add style rules here */
.dropzxoneborder {
padding: 10px;
border: 1px solid #ccc;
font-size: 25px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 2;
word-wrap: break-word;
width: 70%;
}
#drop_zone {
border: 2px dashed #bbb;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 25px;
text-align: center;
font: 20pt bold 'Vollkorn';
color: #bbb;
}
</style>
</head>
<body>
<script src="js/scripts.js"></script>
<script>
if (window.File && window.FileReader && window.FileList && window.Blob) {
// Great success! All the File APIs are supported.
} else {
alert('The File APIs are not fully supported in this browser.');
}
</script>
<h1>
<center>Find Max in Tensorboard Json</center>
</h1>
<center>
<div class="dropzxoneborder">
<div id="drop_zone">Drop files here</div>
<output id="list" style="text-align:left;font-size: 14px;line-height:1;"></output>
</div>
<div id="result_zone" style="width:70%;text-align:left;padding: 10px;font-family:Monospace,Helvetica, Arial, sans-serif;">
<hr>
</div>
</center>
<script>
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files; // FileList object.
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
'</li>');
if (!f.type.match('json.*')) {
alert('File type is not supported.');
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function (theFile) {
return function (e) {
var jsonText = e.target.result;
var myarray = JSON.parse(jsonText)
var minIdx = 0;
var maxIdx = 0;
var maxVal = myarray[0][2];
var minVal = myarray[0][2];
myarray.forEach(function (v) {
if (maxVal < v[2]) {
maxVal = v[2];
maxIdx = v[1];
};
if (minVal < v[2]) {
minIdx = v[2];
minIdx = v[1];
};
});
var para = document.createElement("span"); // Create a <p> element
// para.innerHTML = [
// '<b>Min</b>:' + '\xa0\xa0\xa0\xa0' + minVal.toString() + '\xa0\xa0\xa0\xa0'
// + '<b>Step</b>:' + '\xa0\xa0\xa0\xa0'
// + minIdx.toString() + '<br>'
// + '<b>Max</b>:' + '\xa0\xa0\xa0\xa0' + maxVal.toString() + '\xa0\xa0\xa0\xa0'
// + '<b>Step</b>:' + '\xa0\xa0\xa0\xa0'
// + maxIdx.toString() + '<br>'
// + '<hr>'
// ]
para.innerHTML = [
'<table><tr><td>'
+ '<b>Min</b>:' + '\xa0\xa0' + minVal.toString() + '\xa0\xa0\xa0\xa0' + '</td><td>'
+ '<b>Step</b>:' + '\xa0\xa0'
+ minIdx.toString() + '</td></tr><tr><td>'
+ '<b>Max</b>:' + '\xa0\xa0' + maxVal.toString() + '\xa0\xa0\xa0\xa0' + '</td><td>'
+ '<b>Step</b>:' + '\xa0\xa0'
+ maxIdx.toString() + '</td></tr></table>'
+ '<hr>'
]
document.getElementById("result_zone").appendChild(para); // Append <p> to <body>
};
})(f);
reader.readAsText(f);
}
document.getElementById('list').innerHTML = document.getElementById('list').innerHTML + '<ul>' + output.join('') + '</ul>';
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}
// Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
<!-- End ============== -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment