Iris Fed P2P Demo for C4B

iris.html

@@ -5,7 +5,11 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-elements/dist/css/tw-elements.min.css" />
+  <link rel="stylesheet" href="https://cdn.tailwindcss.com">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script type="module" src="./irisFed.js"></script>
   <title>TF.js Lab</title>
 </head>
 
@@ -37,6 +41,45 @@
         <h1 class="text-3xl font-bold text-white">
           Iris
         </h1>
+        <div id="trainLROptions" class="flex flex-1 items-center w-full">
+
+          <div class="relative w-3/6 mx-10 ml-32 my-3">
+            <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>
+            <!-- <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="">
+            <label for="exampleFormControlInput1"
+              class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
+              style="margin-left: 0px;">Iris
+            </label> -->
+            <div class="group flex absolute left-0 top-0 w-full max-w-full h-full text-left pointer-events-none"
+              data-te-input-notch-ref="">
+              <div
+                class="pointer-events-none border border-solid box-border bg-transparent transition-all duration-200 ease-linear motion-reduce:transition-none left-0 top-0 h-full w-2 border-r-0 rounded-l-[0.25rem] group-data-[te-input-focused]:border-r-0 group-data-[te-input-state-active]:border-r-0 border-neutral-300 dark:border-neutral-600 group-data-[te-input-focused]:shadow-[-1px_0_0_#3b71ca,_0_1px_0_0_#3b71ca,_0_-1px_0_0_#3b71ca] group-data-[te-input-focused]:border-primary"
+                data-te-input-notch-leading-ref="" style="width: 9px;"></div>
+              <div
+                class="pointer-events-none border border-solid box-border bg-transparent transition-all duration-200 ease-linear motion-reduce:transition-none grow-0 shrink-0 basis-auto w-auto max-w-[calc(100%-1rem)] h-full border-r-0 border-l-0 group-data-[te-input-focused]:border-x-0 group-data-[te-input-state-active]:border-x-0 group-data-[te-input-focused]:border-t group-data-[te-input-state-active]:border-t group-data-[te-input-focused]:border-solid group-data-[te-input-state-active]:border-solid group-data-[te-input-focused]:border-t-transparent group-data-[te-input-state-active]:border-t-transparent border-neutral-300 dark:border-neutral-600 group-data-[te-input-focused]:shadow-[0_1px_0_0_#3b71ca] group-data-[te-input-focused]:border-primary"
+                data-te-input-notch-middle-ref="" style="width: 88px;"></div>
+              <div
+                class="pointer-events-none border border-solid box-border bg-transparent transition-all duration-200 ease-linear motion-reduce:transition-none grow h-full border-l-0 rounded-r-[0.25rem] group-data-[te-input-focused]:border-l-0 group-data-[te-input-state-active]:border-l-0 border-neutral-300 dark:border-neutral-600 group-data-[te-input-focused]:shadow-[1px_0_0_#3b71ca,_0_-1px_0_0_#3b71ca,_0_1px_0_0_#3b71ca] group-data-[te-input-focused]:border-primary"
+                data-te-input-notch-trailing-ref=""></div>
+            </div>
+          </div>
+          <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>
+          <button id="trainLRBasicBtn"
+            class="w-64 h-16 bg-emerald-700 hover:bg-blue-500 text-white mx-10 px-4 rounded">Start
+            Training</button>
+        </div>
+      </div>
         <!-- <div>
           <button id="trainCNNBtn" class="w-32 h-16 bg-blue-900 hover:bg-blue-800 text-white mx-10 px-4 rounded" onclick="praful.startTraining()">Train CNN</button>
         </div> -->
@@ -53,6 +96,8 @@ <h1 class="text-3xl font-bold text-white">
     </main>
   </div>
 </body>
-<!-- <script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tfjs-vis.umd.min.js"></script> -->
+
+<script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/tw-elements.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tfjs-vis.umd.min.js"></script>
 </html>

irisFed.html

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-elements/dist/css/tw-elements.min.css" />
+  <link rel="stylesheet" href="https://cdn.tailwindcss.com">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script type="module" src="./irisFed.js"></script>
+  <title>WebFed Lab</title>
+</head>
+
+<body class="bg-black">
+  <div class="container grid w-full h-screen max-w-full max-h-screen" style="grid-template-rows: auto auto 1fr;">
+
+    <nav class="bg-slate-800 border-b border-solid border-slate-500">
+      <div class="max-w-full mx-auto px-2 sm:px-6 lg:px-8">
+        <div class="relative flex items-center justify-between h-16">
+          <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
+            <div class="sm:block">
+              <div class="flex space-x-4">
+                <!-- Current: "bg-slate-900 text-white", Default: "text-slate-300 hover:bg-slate-700 hover:text-white" -->
+                <a href="#" class="bg-slate-900 text-white px-5 py-2 rounded-md text-sm font-medium"
+                  aria-current="page">Iris</a>
+
+                <a href="./mnistFed.html"
+                  class="hover:bg-slate-700 hover:text-white text-slate-300 px-5 py-2 rounded-md text-sm font-medium">
+                MNIST</a>
+
+                <a href="./sequencing.html"
+                  class="text-slate-300 hover:bg-slate-700 hover:text-white px-5 py-2 rounded-md text-sm font-medium">Sequencing</a>
+
+                <a href="./timeSeries.html"
+                  class="text-slate-300 hover:bg-slate-700 hover:text-white px-5 py-2 rounded-md text-sm font-medium">Time
+                  Series</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+    <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
+        </h1>
+        <div class="flex flex-1 items-center w-full">
+          <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-40 h-16 bg-blue-900 hover:bg-blue-800 text-white mx-5 px-4 rounded">Join Federation</button>
+        </div>
+
+        <!-- <div class="hidden flex flex-1 items-center w-full">
+          <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="Dataset URL">
+          </div>
+          <button id="trainLR" class="w-40 h-16 bg-blue-900 hover:bg-blue-800 text-white mx-5 px-4 rounded">Train LR Model</button>
+        </div> -->
+
+          <div id="trainLROptions" 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">
+                <option value="1">Iris 1</option>
+                <option value="2">Iris 2</option>
+                <option value="3">Iris 3</option>
+              </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="">
+              <label for="exampleFormControlInput1"
+                class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
+                style="margin-left: 0px;">Iris
+              </label> -->
+              <div class="group flex absolute left-0 top-0 w-full max-w-full h-full text-left pointer-events-none"
+                data-te-input-notch-ref="">
+                <div
+                  class="pointer-events-none border border-solid box-border bg-transparent transition-all duration-200 ease-linear motion-reduce:transition-none left-0 top-0 h-full w-2 border-r-0 rounded-l-[0.25rem] group-data-[te-input-focused]:border-r-0 group-data-[te-input-state-active]:border-r-0 border-neutral-300 dark:border-neutral-600 group-data-[te-input-focused]:shadow-[-1px_0_0_#3b71ca,_0_1px_0_0_#3b71ca,_0_-1px_0_0_#3b71ca] group-data-[te-input-focused]:border-primary"
+                  data-te-input-notch-leading-ref="" style="width: 9px;"></div>
+                <div
+                  class="pointer-events-none border border-solid box-border bg-transparent transition-all duration-200 ease-linear motion-reduce:transition-none grow-0 shrink-0 basis-auto w-auto max-w-[calc(100%-1rem)] h-full border-r-0 border-l-0 group-data-[te-input-focused]:border-x-0 group-data-[te-input-state-active]:border-x-0 group-data-[te-input-focused]:border-t group-data-[te-input-state-active]:border-t group-data-[te-input-focused]:border-solid group-data-[te-input-state-active]:border-solid group-data-[te-input-focused]:border-t-transparent group-data-[te-input-state-active]:border-t-transparent border-neutral-300 dark:border-neutral-600 group-data-[te-input-focused]:shadow-[0_1px_0_0_#3b71ca] group-data-[te-input-focused]:border-primary"
+                  data-te-input-notch-middle-ref="" style="width: 88px;"></div>
+                <div
+                  class="pointer-events-none border border-solid box-border bg-transparent transition-all duration-200 ease-linear motion-reduce:transition-none grow h-full border-l-0 rounded-r-[0.25rem] group-data-[te-input-focused]:border-l-0 group-data-[te-input-state-active]:border-l-0 border-neutral-300 dark:border-neutral-600 group-data-[te-input-focused]:shadow-[1px_0_0_#3b71ca,_0_-1px_0_0_#3b71ca,_0_1px_0_0_#3b71ca] group-data-[te-input-focused]:border-primary"
+                  data-te-input-notch-trailing-ref=""></div>
+              </div>
+            </div>
+            <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>
+            <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>
+          </div>
+        </div>
+    </header>
+    <main id="consoleParent" class="h-auto max-h-full overflow-y-auto" >
+      <div class="max-w-full px-1">
+        <div class="py-2 sm:px-0">
+          <div id="console" class="px-3 py-3"></div>
+          <!-- <div id="console" class="border-2 border-solid border-green-500 h-96 px-3 py-3 overflow-y-auto"></div> -->
+        </div>
+      </div>
+    </main>
+  </div>
+  <script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/tw-elements.umd.min.js"></script>
+</body>
+<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tfjs-vis.umd.min.js"></script>
+
+</html>