Models:
Samuel Callahan
SCallahan/
brainchop
0
Downloads: 1
Diff of /v3/experimental_mode/CanvasVersion/index.html [000000] .. [b86468]

Switch to unified view

a b/v3/experimental_mode/CanvasVersion/index.html 

  1
  
<!--      Mohamed Masoud,  (Sergey Plis Lab) - 2021      -->





  
  

  2
  
<!--     For [1, 38, 38, 38, 1] input shape, MeshNet     -->





  
  

  3
  
<html>





  
  

  4
  
  <head>





  
  

  5
  
     <meta charset="utf-8" />





  
  

  6
  
     <link rel="shortcut icon" href="#">





  
  

  7
  
     <!-- Tensorflow.js -->





  
  

  8
  
     <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>     





  
  

  9
  
     <script type="text/javascript" src="js/nifti-reader.js"></script>   





  
  

  10
  
     <script type="text/javascript" src="js/mainNiftiReadingFunctions.js"></script>   





  
  

  11
  
     <script type="text/javascript" src="js/mainMeshNetFunctions.js"></script> 





  
  

  12
  
     <!-- ml.js - Machine learning tools in JavaScript -->





  
  

  13
  
     <script src="https://www.lactame.com/lib/ml/6.0.0/ml.min.js"></script>





  
  

  14
  
     <script src="https://cdn.jsdelivr.net/npm/bcijs@1.8.0/dist/bci.min.js"></script>





  
  

  15
  
     <script src="https://docs.opencv.org/3.4.0/opencv.js"></script> 





  
  

  16
  
     <script src="https://www.lactame.com/lib/image-js/0.21.2/image.min.js"></script>  





  
  

  17
  





  
  

  18
  





  
  

  19
  
     <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis"></script>  





  
  

  20
  





  
  

  21
  
     <script src="https://d3js.org/d3.v4.min.js"></script> 





  
  

  22
  





  
  

  23
  
    <style>





  
  

  24
  
    .grid-container {





  
  

  25
  
      display: inline-grid;





  
  

  26
  
      grid-template-columns: auto auto auto auto auto;





  
  

  27
  





  
  

  28
  
      padding: 0px;





  
  

  29
  
    }





  
  

  30
  
    .grid-item {





  
  

  31
  
      background-color: rgba(255, 255, 255, 0.8);





  
  

  32
  
      border: 0px solid rgba(0, 0, 0, 0.8);





  
  

  33
  
      padding: 5px;





  
  

  34
  
      font-size: 15px;





  
  

  35
  
      text-align: center;





  
  

  36
  
    }





  
  

  37
  
    </style>





  
  

  38
  





  
  

  39
  
  </head>





  
  

  40
  
  <body onload="inputVolumeChange()">





  
  

  41
  





  
  

  42
  
    <h1>MeshNet timing with tfjs for whole Brain</h1>





  
  

  43
  





  
  

  44
  
    <p>Measure the performance of tfjs when loading a pretrained MeshNet model in the browser to make whole brain inference.</p>





  
  

  45
  





  
  

  46
  
    <p>Select NIfTI file(*.nii, *.nii.gz) :  <input type="file" id="file" name="files" /></p>





  
  

  47
  
    <p>Select NIfTI label file(*.nii, *.nii.gz) :  <input type="file" id="groundTruthFile" disabled/></p>





  
  

  48
  





  
  

  49
  
    <div class="grid-container">





  
  

  50
  
      <div class="grid-item"><font id="mriTitle"></font></div>





  
  

  51
  
      <div class="grid-item"><font id="gtTitle"></font></div>





  
  

  52
  
      <div class="grid-item"><font id="predTitle"></font></div>  





  
  

  53
  
      <div class="grid-item"><font id="CC2DTitle"></font></div>





  
  

  54
  
      <div class="grid-item"><font id="CC3DTitle"></font></div>       





  
  

  55
  
      <div class="grid-item"><canvas id="inputCanvas" width="100" height="100"></canvas> </div>





  
  

  56
  
      <div class="grid-item"><canvas id="gtCanvas" width="100" height="100"></canvas><br/></div>





  
  

  57
  
      <div class="grid-item"><canvas id="outputCanvas" width="100" height="100"></canvas><br/></div> 





  
  

  58
  
      <div class="grid-item"><canvas id="out2dCC" width="100" height="100"></canvas><br/></div>





  
  

  59
  
      <div class="grid-item"><canvas id="out3dCC" width="100" height="100"></canvas><br/></div>         





  
  

  60
  
      <div class="grid-item"></div>





  
  

  61
  
      <div class="grid-item"></div>





  
  

  62
  
      <div class="grid-item"><font id="accuracyTitleModelPred"></font></div>  





  
  

  63
  
      <div class="grid-item"><font id="accuracyTitleFilter2DCC"></font></div> 





  
  

  64
  
      <div class="grid-item"><font id="accuracyTitleFilter3DCC"></font></div>       





  
  

  65
  
    </div>    





  
  

  66
  





  
  

  67
  
    <div >





  
  

  68
  
      <table >





  
  

  69
  
        <th><p>Slice :<input type="range" min="0" max="100" value="50" class="slider" id="sliceNav"><font id="sliceNumId"></font></p></th>





  
  

  70
  
        <th><input type="checkbox" id="mriColoring" name="mriColoring" checked> <label for="mriColoring">Enable Coloring</label></th>





  
  

  71
  
        <th><input type="checkbox" id="postProcessing" name="postProcessing" checked> <label for="postProcessing">Enable postprocessing</label></th>





  
  

  72
  





  
  

  73
  
        





  
  

  74
  
      </table>    





  
  

  75
  
    </div>  





  
  

  76
  





  
  

  77
  
    <div >





  
  

  78
  
      <table >





  
  

  79
  
        <tr>





  
  

  80
  
          <th align= "left"><p>Batch Size : <input type="text" id="batchSizeId" size="20" value="1" onchange="inputVolumeChange()" disabled></p></th>





  
  

  81
  
          <th align= "left"><p>Num of Channels : <input type="text" id="numOfChanId" size="20" value="1" onchange="inputVolumeChange()" disabled></p></th>





  
  

  82
  
        </tr>





  
  

  83
  
        <tr> 





  
  

  84
  
          <th align= "left"><p>Num of Classes : <input type="text" id="numOfClassesId" size="20" value="3" disabled></p></th>





  
  

  85
  
          <th align= "left"><p>Background Label : <input type="text" id="bgLabelId" size="20" value="0" disabled></p></th>        





  
  

  86
  
        </tr> 





  
  

  87
  
        <tr> 





  
  

  88
  
        <th align= "left"><input type="checkbox" id="batchOverlapId" name="batchOverlap"> <label for="batchOverlap">Enable Batches Overlapping</label></th>  





  
  

  89
  
          <th align= "left"><p>Num of Overlapped Batches : <input type="text" id="numOverlapBatchesId" size="20" value="200" disabled></p></th>        





  
  

  90
  
        </tr>





  
  

  91
  
        <tr>





  
  

  92
  
          <th align= "left">





  
  

  93
  
            <p>Metrics: 





  
  

  94
  
              <select name="metrics" id="metricsId">





  
  

  95
  
                <option value="DiceCoef">Dice Coef</option>





  
  

  96
  
                <option value="Accuracy">Accuracy</option>





  
  

  97
  
              </select>





  
  

  98
  
            </p>





  
  

  99
  
          </th>





  
  

  100
  
        </tr>





  
  

  101
  
      </table>    





  
  

  102
  
    </div> 





  
  

  103
  





  
  

  104
  





  
  

  105
  





  
  

  106
  
    <p id="inputVolumeId"></p>





  
  

  107
  





  
  

  108
  
    <button onclick="runInference()" id="runInferenceId" disabled>Run</button>





  
  

  109
  
    <p id="postProcessHint"></p>





  
  

  110
  
    <p id="completed"></p>





  
  

  111
  
    <p id="results"></p>





  
  

  112
  





  
  

  113
  
    <script type="text/javascript">





  
  

  114
  
      document.getElementById('file').addEventListener('change', handleFileSelect, false);





  
  

  115
  
      document.getElementById('groundTruthFile').addEventListener('change', handleFileSelect, false);





  
  

  116
  
      document.getElementById('batchOverlapId').addEventListener('change',  function() {





  
  

  117
  





  
  

  118
  
             if(this.checked) {





  
  

  119
  
                document.getElementById("numOverlapBatchesId").disabled = false;





  
  

  120
  
             } else {





  
  

  121
  
                document.getElementById("numOverlapBatchesId").disabled = true;





  
  

  122
  
             }





  
  

  123
  





  
  

  124
  
          });





  
  

  125
  
    </script>





  
  

  126
  
  </body>





  
  

  127
  
</html>