--- a
+++ b/v3/experimental_mode/CanvasVersion/index.html
@@ -0,0 +1,127 @@
+<!--      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>
\ No newline at end of file