<!-- Mohamed Masoud, (Sergey Plis Lab) - 2021 -->
<!-- For [1, 38, 38, 38, 1] input shape, MeshNet -->
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="#">
<!-- Tensorflow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
<script type="text/javascript" src="js/nifti-reader.js"></script>
<script type="text/javascript" src="js/mainNiftiReadingFunctions.js"></script>
<script type="text/javascript" src="js/mainMeshNetFunctions.js"></script>
<!-- ml.js - Machine learning tools in JavaScript -->
<script src="https://www.lactame.com/lib/ml/6.0.0/ml.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bcijs@1.8.0/dist/bci.min.js"></script>
<script src="https://docs.opencv.org/3.4.0/opencv.js"></script>
<script src="https://www.lactame.com/lib/image-js/0.21.2/image.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
.grid-container {
display: inline-grid;
grid-template-columns: auto auto auto auto auto;
padding: 0px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 0px solid rgba(0, 0, 0, 0.8);
padding: 5px;
font-size: 15px;
text-align: center;
}
</style>
</head>
<body onload="inputVolumeChange()">
<h1>MeshNet timing with tfjs for whole Brain</h1>
<p>Measure the performance of tfjs when loading a pretrained MeshNet model in the browser to make whole brain inference.</p>
<p>Select NIfTI file(*.nii, *.nii.gz) : <input type="file" id="file" name="files" /></p>
<p>Select NIfTI label file(*.nii, *.nii.gz) : <input type="file" id="groundTruthFile" disabled/></p>
<div class="grid-container">
<div class="grid-item"><font id="mriTitle"></font></div>
<div class="grid-item"><font id="gtTitle"></font></div>
<div class="grid-item"><font id="predTitle"></font></div>
<div class="grid-item"><font id="CC2DTitle"></font></div>
<div class="grid-item"><font id="CC3DTitle"></font></div>
<div class="grid-item"><canvas id="inputCanvas" width="100" height="100"></canvas> </div>
<div class="grid-item"><canvas id="gtCanvas" width="100" height="100"></canvas><br/></div>
<div class="grid-item"><canvas id="outputCanvas" width="100" height="100"></canvas><br/></div>
<div class="grid-item"><canvas id="out2dCC" width="100" height="100"></canvas><br/></div>
<div class="grid-item"><canvas id="out3dCC" width="100" height="100"></canvas><br/></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"><font id="accuracyTitleModelPred"></font></div>
<div class="grid-item"><font id="accuracyTitleFilter2DCC"></font></div>
<div class="grid-item"><font id="accuracyTitleFilter3DCC"></font></div>
</div>
<div >
<table >
<th><p>Slice :<input type="range" min="0" max="100" value="50" class="slider" id="sliceNav"><font id="sliceNumId"></font></p></th>
<th><input type="checkbox" id="mriColoring" name="mriColoring" checked> <label for="mriColoring">Enable Coloring</label></th>
<th><input type="checkbox" id="postProcessing" name="postProcessing" checked> <label for="postProcessing">Enable postprocessing</label></th>
</table>
</div>
<div >
<table >
<tr>
<th align= "left"><p>Batch Size : <input type="text" id="batchSizeId" size="20" value="1" onchange="inputVolumeChange()" disabled></p></th>
<th align= "left"><p>Num of Channels : <input type="text" id="numOfChanId" size="20" value="1" onchange="inputVolumeChange()" disabled></p></th>
</tr>
<tr>
<th align= "left"><p>Num of Classes : <input type="text" id="numOfClassesId" size="20" value="3" disabled></p></th>
<th align= "left"><p>Background Label : <input type="text" id="bgLabelId" size="20" value="0" disabled></p></th>
</tr>
<tr>
<th align= "left"><input type="checkbox" id="batchOverlapId" name="batchOverlap"> <label for="batchOverlap">Enable Batches Overlapping</label></th>
<th align= "left"><p>Num of Overlapped Batches : <input type="text" id="numOverlapBatchesId" size="20" value="200" disabled></p></th>
</tr>
<tr>
<th align= "left">
<p>Metrics:
<select name="metrics" id="metricsId">
<option value="DiceCoef">Dice Coef</option>
<option value="Accuracy">Accuracy</option>
</select>
</p>
</th>
</tr>
</table>
</div>
<p id="inputVolumeId"></p>
<button onclick="runInference()" id="runInferenceId" disabled>Run</button>
<p id="postProcessHint"></p>
<p id="completed"></p>
<p id="results"></p>
<script type="text/javascript">
document.getElementById('file').addEventListener('change', handleFileSelect, false);
document.getElementById('groundTruthFile').addEventListener('change', handleFileSelect, false);
document.getElementById('batchOverlapId').addEventListener('change', function() {
if(this.checked) {
document.getElementById("numOverlapBatchesId").disabled = false;
} else {
document.getElementById("numOverlapBatchesId").disabled = true;
}
});
</script>
</body>
</html>
