Cautious commit for Wednesday's demo

irisFed.html

@@ -45,7 +45,7 @@
     <header class="bg-slate-800 shadow">
       <div class="flex items-center mx-auto py-10 px-2 sm:px-6 lg:px-8">
         <h1 class="text-3xl font-bold text-white">
-          Iris Federated
+          Iris Decentralized
         </h1>
         <div class="flex flex-1 items-center w-full">
           <div class="relative w-96 mx-10 my-3">

irisFed.js

@@ -817,34 +817,40 @@ iris.trainLR = async (datasetIndex=1, iid=true) => {
   iris.ui.writeToConsole("All peers ready. Starting training...")
 
   await new Promise(res => setTimeout(res, 1000))
+
   tfvis.visor()
   tfvis.show.modelSummary({
     'name': "Model Architecture",
     'tab': "Model"
   }, model)
+
   model.layers.forEach(async (layer, index) => {
     tfvis.show.layer({
       'name': `Layer ${index+1}`,
       'tab': "Model"
     }, layer)
   })
 
-  for (let epoch = 0; epoch < 50; epoch++) {
+  const historyMetrics = {
+    'history': {
+      'loss': [],
+      'acc': []
+    }
+  }
+  const historySurface = {name: 'show.history', tab: 'Training'}
+  for (let epoch = 0; epoch < 200; epoch++) {
     console.log("Epoch", epoch)
     // for (let row in trainingData) {
     //   const gradientUpdate = await model.trainOnBatch(trainingData[row], trainingLabels[row])
     // }
     const gradientUpdate = await model.fit(trainingData, trainingLabels, {
       batchSize: irisTrainingData.length,
       epochs: epoch+1,
-      initialEpoch: epoch,
-      callbacks: tfvis.show.fitCallbacks({
-        'name': "Training",
-        'tab': "Training"
-      }, ["loss", "acc"], {
-        'callbacks': ["onEpochEnd"]
-      })
+      initialEpoch: epoch
     })
+    historyMetrics.history.loss.push(gradientUpdate.history.loss)
+    historyMetrics.history.acc.push(gradientUpdate.history.acc)
+    tfvis.show.history(historySurface, historyMetrics, ['loss', 'acc']);
     // console.log("Loss:",gradientUpdate.history.loss[0])
     // console.log("Accuracy:",gradientUpdate.history.acc[0])
     const layerWiseWeights = model.trainableWeights.map(layer => layer.val.dataSync())
@@ -861,7 +867,7 @@ iris.trainLR = async (datasetIndex=1, iid=true) => {
     let allResponsesReceived = false
     while(!allResponsesReceived) {
       await new Promise(res => setTimeout(res, 500))
-      allResponsesReceived = responseFromPeers['weightUpdates'].find(o => o.epoch === epoch).weightUpdates.length === iris.group.userIDs.size - 1
+      allResponsesReceived = responseFromPeers['weightUpdates'].find(o => o.epoch === epoch)?.weightUpdates.length === iris.group.userIDs.size - 1
     }
 
     const receivedWeights = responseFromPeers['weightUpdates'].find(o => o.epoch === epoch).weightUpdates.map(peerUpdate => {

mnistFed.html

@@ -47,35 +47,56 @@ <h1 class="text-3xl font-bold text-white">
           MNIST Federated
         </h1>
         <div class="relative flex">
-          <button id="newFederationBtn" class="w-32 h-16 bg-blue-900 hover:bg-blue-800 text-white mx-10 px-4 rounded">+
+          <!-- <button id="newFederationBtn" class="w-32 h-16 bg-blue-900 hover:bg-blue-800 text-white mx-10 px-4 rounded">+
             New Federation</button>
-          <div class="relative" data-te-dropdown-item-ref>
-
+          <div class="relative" data-te-dropdown-item-ref> -->
+            <div class="relative w-96 mx-10 my-3">
+              <input type="text"
+                class="w-64 peer block min-h-[auto] w-full rounded border-0 bg-white px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-900 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-900 motion-reduce:transition-none dark:text-neutral-800 dark:placeholder:text-neutral-700 dark:peer-focus:text-primary"
+                id="federationIdTextInput" placeholder="Federation ID (optional)">
+            </div>
             <button id="joinFederationBtn"
               class="w-32 flex items-center h-16 bg-blue-900 hover:bg-blue-800 text-white mx-10 px-4 rounded"
-              disabled="true" data-te-dropdown-toggle-ref>
+              >
               Join Federation
-              <span class="ml-2 w-2">
+              <!-- <span class="ml-2 w-2">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
                   <path fill-rule="evenodd"
                     d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                     clip-rule="evenodd" />
                 </svg>
-              </span>
+              </span> -->
             </button>
-            <ul id="federationIdsList"
+            <!-- <ul id="federationIdsList"
               class="absolute z-[1000] float-left m-0 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg dark:bg-neutral-700 [&[data-te-dropdown-show]]:block"
               data-te-dropdown-menu-ref>
             </ul>
-          </div>
-          <div class="hidden flex flex-1 items-center w-full">
-
-            <div class="relative w-full my-3">
-              <select id="datasetSelector" class="text-white dark:placeholder:text-white-700 " value="1" data-te-select-init value="1">
+          </div> -->
+          <div id="trainLROptions" class="hidden flex flex-1 items-center w-full">
+            <div class="relative">
+              <button id="classesPropBtn"
+                class="w-full flex items-center h-16 bg-blue-900 hover:bg-blue-800 text-white px-4 rounded"
+                data-te-dropdown-toggle-ref
+                >
+                Classes Proportion
+                <span class="ml-2 w-2">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
+                    <path fill-rule="evenodd"
+                      d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
+                      clip-rule="evenodd" />
+                  </svg>
+                </span>
+                </button>
+                <ul id="classProportionSelector"
+                  class="absolute z-[1000] float-left m-0 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg dark:bg-neutral-700 [&[data-te-dropdown-show]]:block"
+                  data-te-dropdown-menu-ref>
+                  <li></li>
+                </ul>
+                <!-- <select id="datasetSelector" class="text-white dark:placeholder:text-white-700 " value="1" data-te-select-init value="1">
                 <option value="1">Iris 1</option>
                 <option value="2">Iris 2</option>
                 <option value="3">Iris 3</option>
-              </select>
+              </select> -->
               <!-- <input type="text" disabled
                 class="w-64 peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&amp;:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
                 id="exampleFormControlInput1" placeholder="">
@@ -96,12 +117,12 @@ <h1 class="text-3xl font-bold text-white">
                   data-te-input-notch-trailing-ref=""></div>
               </div>
             </div>
-            <div class="flex flex-1 items-center block min-h-[1.5rem] ml-1">
+            <!-- <div class="flex flex-1 items-center block min-h-[1.5rem] ml-1">
               <input class="relative float-left mr-[6px] mt-[0.15rem] h-[1.125rem] w-5 appearance-none rounded-[0.25rem] border-[0.125rem] border-solid border-neutral-300 outline-none before:pointer-events-none before:absolute before:h-[0.875rem] before:w-[0.875rem] before:scale-0 before:rounded-full before:bg-transparent before:opacity-0 before:shadow-[0px_0px_0px_13px_transparent] before:content-[''] checked:border-primary checked:bg-primary checked:before:opacity-[0.16] checked:after:absolute checked:after:-mt-px checked:after:ml-[0.25rem] checked:after:block checked:after:h-[0.8125rem] checked:after:w-[0.375rem] checked:after:rotate-45 checked:after:border-[0.125rem] checked:after:border-l-0 checked:after:border-t-0 checked:after:border-solid checked:after:border-white checked:after:bg-transparent checked:after:content-[''] hover:cursor-pointer hover:before:opacity-[0.04] hover:before:shadow-[0px_0px_0px_13px_rgba(0,0,0,0.6)] focus:shadow-none focus:transition-[border-color_0.2s] focus:before:scale-100 focus:before:opacity-[0.12] focus:before:shadow-[0px_0px_0px_13px_rgba(0,0,0,0.6)] focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-[0.875rem] focus:after:w-[0.875rem] focus:after:rounded-[0.125rem] focus:after:content-[''] checked:focus:before:scale-100 checked:focus:before:shadow-[0px_0px_0px_13px_#3b71ca] checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] checked:focus:after:-mt-px checked:focus:after:ml-[0.25rem] checked:focus:after:h-[0.8125rem] checked:focus:after:w-[0.375rem] checked:focus:after:rotate-45 checked:focus:after:rounded-none checked:focus:after:border-[0.125rem] checked:focus:after:border-l-0 checked:focus:after:border-t-0 checked:focus:after:border-solid checked:focus:after:border-white checked:focus:after:bg-transparent dark:border-neutral-600 dark:checked:border-primary dark:checked:bg-primary dark:focus:before:shadow-[0px_0px_0px_13px_rgba(255,255,255,0.4)] dark:checked:focus:before:shadow-[0px_0px_0px_13px_#3b71ca]" type="checkbox" value="" id="iidCheckbox" checked="">
               <label class="text-white inline-block pl-[0.15rem] hover:cursor-pointer" for="iidCheckbox">
                 IID
               </label>
-            </div>
+            </div> -->
             <button id="trainCNNBtn"
               class="w-64 h-16 bg-emerald-700 hover:bg-blue-500 text-white mx-10 px-4 rounded">Start
               Training</button>