welcome page elobrated & UI completed

saliherdemk · Nov 7, 2024 · ab3d9ff · ab3d9ff
1 parent 9dda23e
commit ab3d9ff
Show file tree

Hide file tree

Showing 11 changed files with 234 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -6,37 +6,119 @@
   </head>
 
   <body>
+    <div id="loading-overlay" class="loading-overlay">
+      <div class="loader"></div>
+    </div>
+
     <div id="welcome-container" onclick="toggleWelcome()">
       <div id="popup-container">
         <h3>Grada</h3>
-        <img id="demo-img" src="media/demo.png" />
 
-        <div>
-          Grada is an interactive tool that lets you observe real-time changes
-          as you train a multilayer perceptron.
+        <div id="page-0" class="active">
+          <img id="demo-img" src="media/page-0.png" />
+          <div class="tips">
+            <div>
+              Grada is an interactive tool that lets you observe real-time
+              changes as you train a multilayer perceptron.
+            </div>
+            <div>Double-click on a layer to edit it.</div>
+            <div>
+              You can create or import datasets and apply flattening, min-max
+              normalization, and one-hot encoding operations.
+            </div>
+            <div>Double-click on the MLP to edit its properties.</div>
+            <div>
+              You can evaluate a model by connecting an input component, but to
+              train it, you'll also need to add an output component.
+            </div>
+            <div>
+              <span class="c-blue">Blue</span> represents neuron biases. <br />
+              <span class="c-cyan">Cyan</span> represents bias gradients.
+            </div>
+          </div>
         </div>
 
-        <div class="tips">
-          <div>Double-click on a layer to edit it.</div>
-          <div>
-            You can create or import datasets and apply flattening, min-max
-            normalization, and one-hot encoding operations.
+        <div id="page-1">
+          <img id="demo-img" src="media/page-1.png" />
+          <div class="tips">
+            <div>
+              In input and output layers,
+              <span class="c-yellow">yellow</span> represents fetched data, and
+              <span class="c-green">green</span> represents executed data.
+            </div>
+            <div>
+              Pressing 'E' while hovering over the MLP resets the coordinates of
+              its components.
+            </div>
+            <div>
+              Pressing 'R' while hovering over the digit input clears the grid.
+            </div>
+            <div>
+              Pressing 'Esc' closes the edit layer screen and the MLP edit
+              popup.
+            </div>
           </div>
-          <div>Double-click on the MLP to edit its properties.</div>
-          <div>
-            You can evaluate a model by connecting an input component, but to
-            train it, you'll also need to add an output component.
+        </div>
+
+        <div id="page-2">
+          <img src="media/page-2.png" width="100%" height="100%" />
+          <div class="tips">
+            <div>
+              You can add components to mlp to plot loss graph or see forward
+              pass calculations by pressing the
+              <span class="c-yellow">yellow</span> and
+              <span class="c-blue">blue</span> dots. To alternate between train
+              and evaluation loss graph simply change the mlp's mode.
+            </div>
+            <div>
+              All the numbers shown in the MLP represent the output for the
+              first record. To observe all outputs for the current batch (up to
+              5 records), use the calculationViewer component.
+            </div>
           </div>
-          <div>
-            <span class="c-blue">Blue</span> represents neuron biases. <br />
-            <span class="c-cyan">Cyan</span> represents bias gradients.
+        </div>
+
+        <div id="page-3">
+          <img src="media/page-3.png" width="90%" height="100%" />
+          <div class="tips">
+            <div>
+              Use the flattener component to flatten the dataset if you haven't
+              already done so while creating the dataset. It flattens the
+              incoming data and optionally augments it.
+            </div>
+            <div>
+              For example, in the MNIST dataset, you can crop the image into an
+              arbitrary number of parts and flatten it into a specified number.
+              You can also visulize the incoming data.
+            </div>
+            <div>
+              The data doesn't need to come from handwritten input; you can
+              connect the MNIST train-eval dataset if it hasn't been flattened.
+            </div>
           </div>
-          <div>
-            In input and output layers,
-            <span class="c-yellow">yellow</span> represents fetched data, and
-            <span class="c-green">green</span> represents executed data.
+        </div>
+        <div id="page-4">
+          <img src="media/page-4.png" width="300px" height="350px" />
+          <div class="tips">
+            <div>
+              There is a pre-trained model that you can import in the
+              Handwritten Digits section. You can also evaluate it with your
+              real-time drawings. If you don't use data augmentation (meaning
+              your part number is 1), you don't need to use the grid output but
+              since averaging are done in that component and it highlights the
+              result, don't forget to connect it.
+            </div>
+            <div>
+              Source code is available on GitHub. Contributions, issues and
+              feature requests are welcome.
+            </div>
           </div>
         </div>
+
+        <div id="page-controls">
+          <img src="media/next.png" alt="" onclick="decrementPage(event)" />
+          <img src="media/next.png" alt="" onclick="incrementPage(event)" />
+        </div>
       </div>
     </div>
 

diff --git a/js/Draw/MLP/Playable.js b/js/Draw/MLP/Playable.js
@@ -325,7 +325,7 @@ class Playable extends Draggable {
 
     this.updateParameters();
     this.setGraphComponentData();
-    this.setMsPerStepText(performance.now() - startTime + "ms / step");
+    this.setMsPerStepText(~~(performance.now() - startTime) + "ms / step");
 
     if (output instanceof DigitOutput) {
       const lastLayer = origin.layers[origin.layers.length - 1];

diff --git a/js/script.js b/js/script.js
@@ -122,6 +122,37 @@ function scaleCanvas(event) {
   iManager.scaleFactor = newScaleFactor;
 }
 
+let currentPage = 0;
+const totalPages = 4;
+
+function updatePageVisibility() {
+  const pages = document.querySelectorAll("[id^='page-']");
+  pages.forEach((page, index) => {
+    if (index === currentPage) {
+      page.classList.add("active");
+    } else {
+      page.classList.remove("active");
+    }
+  });
+  const pageControls = getElementById("page-controls");
+  pageControls.lastElementChild.style.visibility =
+    currentPage == totalPages ? "hidden" : "visible";
+  pageControls.firstElementChild.style.visibility =
+    currentPage == 0 ? "hidden" : "visible";
+}
+
+function incrementPage(e) {
+  e.stopPropagation();
+  currentPage = Math.min(currentPage + 1, totalPages);
+  updatePageVisibility();
+}
+
+function decrementPage(e) {
+  e.stopPropagation();
+  currentPage = Math.max(currentPage - 1, 0);
+  updatePageVisibility();
+}
+
 document.addEventListener("DOMContentLoaded", function () {
   const disableBg = getElementById("disable-background");
   for (let child of disableBg.children) {
@@ -135,3 +166,13 @@ document.addEventListener("DOMContentLoaded", function () {
   mlpEditContainer.addEventListener("mouseover", () => disableCanvas());
   mlpEditContainer.addEventListener("mouseout", () => enableCanvas());
 });
+
+window.addEventListener("load", () => {
+  const loader = getElementById("loading-overlay");
+  loader.style.opacity = 0;
+
+  setTimeout(() => {
+    loader.style.display = "none";
+  }, 300);
+  updatePageVisibility();
+});
diff --git a/media/demo.png b/media/demo.png
diff --git a/media/next.png b/media/next.png
diff --git a/media/page-0.png b/media/page-0.png
diff --git a/media/page-1.png b/media/page-1.png
diff --git a/media/page-2.png b/media/page-2.png
diff --git a/media/page-3.png b/media/page-3.png
diff --git a/media/page-4.png b/media/page-4.png
diff --git a/style.css b/style.css
@@ -43,13 +43,18 @@
   color: var(--green-active);
 }
 
+.c-blue {
+  color: var(--blue);
+}
+
 .pointer {
   cursor: pointer;
 }
 
 #popup-container {
   position: relative;
   max-width: 500px;
+  min-height: 650px;
   border-radius: 10px;
   background-color: var(--white);
   text-align: center;
@@ -61,7 +66,45 @@
   gap: 10px;
   padding: 20px;
   padding-top: 10px;
-  font-size: 0.9em;
+}
+
+#page-controls {
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+}
+
+#page-controls > * {
+  width: 32px;
+  height: 32px;
+  margin: 5px;
+  cursor: pointer;
+}
+
+#page-controls > :last-child {
+  transform: scaleY(-1);
+}
+
+#page-controls > :first-child {
+  rotate: 180deg;
+}
+
+#page-0,
+#page-1,
+#page-2,
+#page-3,
+#page-4 {
+  display: none;
+}
+
+#page-0.active,
+#page-1.active,
+#page-2.active,
+#page-3.active,
+#page-4.active {
+  display: block;
 }
 
 #welcome-container {
@@ -72,7 +115,7 @@
   justify-content: center;
   align-items: center;
   background: rgba(0, 0, 0, 0.2);
-  z-index: 98;
+  z-index: 9999;
 }
 
 #demo-img {
@@ -463,6 +506,15 @@ body {
   box-sizing: border-box;
 }
 
+#dataset-scrollable:empty::before {
+  content: "No datasets";
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%);
+  color: var(--gray);
+  font-style: italic;
+}
+
 #footer {
   position: sticky;
   left: 0;
@@ -474,3 +526,39 @@ body {
   justify-content: space-evenly;
   align-items: center;
 }
+
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10000;
+  background-color: var(--light-gray);
+}
+
+.loader {
+  border: 8px solid #f3f3f3;
+  border-top: 8px solid #3498db;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+#content {
+  pointer-events: none;
+  opacity: 0.5;
+}