Merge pull request #8 from saliherdemk/main

Main
saliherdemk · Aug 9, 2024 · 57b561f · 57b561f
2 parents c5b0cc4 + 78f0595
commit 57b561f
Show file tree

Hide file tree

Showing 14 changed files with 787 additions and 91 deletions.
diff --git a/index.html b/index.html
@@ -2,15 +2,9 @@
 <html>
   <head>
     <link href="style.css" rel="stylesheet" />
+    <link href="table.css" rel="stylesheet" />
   </head>
   <body>
-    <div style="position: absolute">
-      <button id="add-layer" type="button" onclick="addLayer()">
-        Add Layer
-      </button>
-      <button onclick="logMLPs()" type="">Log Mlps</button>
-    </div>
-
     <div id="mlp-edit-container">
       <div>
         <label for="mlp-label">Name</label><br />
@@ -120,26 +114,96 @@
           />
         </div>
       </div>
+
+      <div id="create-dataset-container">
+        <div id="dataset-control-container">
+          <div class="flex-center">
+            <label for="">Name: </label>
+            <input id="dataset-name-inp" class="inp" type="" name="" value="" />
+          </div>
+          <img
+            id="create-dataset-close"
+            class="cancel-icon"
+            src="media/close.png"
+            alt=""
+            width="25"
+            height="25"
+            onclick="closeCreateDataset()"
+          />
+        </div>
+        <div id="scrollable-container">
+          <table id="dynamicTable">
+            <tr>
+              <th class="left-0 top-0 z-4"></th>
+              <th class="left-1 top-0 z-3"></th>
+              <th class="right-0 top-0 z-3"></th>
+            </tr>
+            <tr>
+              <td class="left-0 z-3"></td>
+              <td class="left-1 z-2"></td>
+              <td class="right-0"></td>
+            </tr>
+            <tr>
+              <td class="left-0 bottom-0 z-3"></td>
+              <td class="left-1 bottom-0 z-2"></td>
+              <td class="right-0 bottom-0"></td>
+            </tr>
+          </table>
+        </div>
+
+        <div class="flex-end">
+          <button class="btn btn-blue" type="" onclick="handleCreateDataset()">
+            Create
+          </button>
+        </div>
+      </div>
     </div>
 
-    <script
-      src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"
-      integrity="sha512-d6sc8kbZEtA2LwB9m/ck0FhvyUwVfdmvTeyJRprmj7Wg9wRFtHDIpr6qk4g/y3Ix3O9I6KHIv6SGu9f7RaP1Gw=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    ></script>
+    <div class="control-container">
+      <div id="toggle-dataset-container">
+        <img
+          class="active"
+          id="toggle-dataset-btn"
+          src="media/arrow.svg"
+          onclick="toggleDatasetsContainer()"
+          alt=""
+        />
+      </div>
+      <div id="datasets-container">
+        <div>Datasets</div>
+        <div id="dataset-scrollable"></div>
+        <button onclick="openCreateDataset()" class="btn btn-sky">
+          Create Dataset
+        </button>
+        <button
+          id="add-layer"
+          type="button"
+          class="btn btn-green"
+          onclick="addLayer()"
+        >
+          Add Layer
+        </button>
+      </div>
+    </div>
+
+    <button onclick="logMLPs()" type="">Log Mlps</button>
+
+    <script src="js/p5.min.js"></script>
 
     <script src="js/script.js"></script>
 
     <script src="js/Managers/canvasManager.js"></script>
     <script src="js/Managers/interactionManager.js"></script>
     <script src="js/Managers/eventManager.js"></script>
 
+    <script src="js/Organizers/tableOrganizer.js"></script>
+    <script src="js/Organizers/datasetOrganizer.js"></script>
     <script src="js/Organizers/mainOrganizer.js"></script>
     <script src="js/Organizers/editOrganizer.js"></script>
     <script src="js/Organizers/editLayerOrganizer.js"></script>
     <script src="js/Organizers/editMlpOrganizer.js"></script>
 
+    <script src="js/MLP/Dataset.js"></script>
     <script src="js/MLP/Value.js"></script>
     <script src="js/MLP/ActFunctions.js"></script>
     <script src="js/MLP/Neuron.js"></script>

diff --git a/js/Draw/DatasetView.js b/js/Draw/DatasetView.js
@@ -0,0 +1,17 @@
+class DatasetView {
+  constructor(dataset) {
+    this.dataset = dataset;
+  }
+
+  getTrainX() {
+    return this.dataset.trainX;
+  }
+
+  getTrainY() {
+    this.dataset.trainY;
+  }
+
+  getLabels() {
+    return this.dataset.labels;
+  }
+}
diff --git a/js/MLP/Dataset.js b/js/MLP/Dataset.js
@@ -0,0 +1,35 @@
+class Dataset {
+  constructor(id, name, data) {
+    this.id = id;
+    this.name = name;
+    this.trainX = [];
+    this.trainY = [];
+    this.labels = [];
+    this.setData(data);
+  }
+
+  setName(name) {
+    this.name = name;
+  }
+
+  setData(data) {
+    for (let i = 0; i < data.length; i++) {
+      const row = data[i];
+      const values = [];
+
+      for (let j = 0; j < row.length; j++) {
+        const value = row[j];
+        if (i == 0) {
+          this.labels.push(value);
+          continue;
+        }
+        if (j == row.length - 1) {
+          this.trainY.push(value);
+          continue;
+        }
+        values.push(value);
+      }
+      values.length && this.trainX.push(values);
+    }
+  }
+}
diff --git a/js/Managers/interactionManager.js b/js/Managers/interactionManager.js
@@ -70,10 +70,12 @@ class InteractionManager {
   }
 
   handlePress() {
+    if (mainOrganizer.isDisabled()) return;
     mainOrganizer.schemas.forEach((schema) => schema.handlePressed());
   }
 
   handleDrag() {
+    if (mainOrganizer.isDisabled()) return;
     if (this.getSelected()) {
       this.updateSelectedCoordinates();
       return;
@@ -89,6 +91,11 @@ class InteractionManager {
     this.disableCanvasDragging();
   }
 
+  handleDoubleClicked() {
+    if (mainOrganizer.isDisabled()) return;
+    mainOrganizer.schemas.forEach((schema) => schema.handleDoubleClicked());
+  }
+
   isHovered(obj) {
     const { mouseX, mouseY } = getCurrentMouseCoordinates();
     const { x: px, y: py } = this.getAbsoluteCoordinates(mouseX, mouseY);

diff --git a/js/Organizers/datasetOrganizer.js b/js/Organizers/datasetOrganizer.js
@@ -0,0 +1,27 @@
+class DatasetOrganizer {
+  constructor() {
+    this.lastDatasetId = -1;
+    this.datasets = [];
+  }
+
+  createButtonForDataset(name, id) {
+    const btn = createButton("dataset-scrollable");
+    btn.innerText = name;
+    btn.setAttribute("id", id);
+    btn.classList.add("btn", "btn-gray");
+  }
+
+  addDataset(name, data) {
+    const id = this.getDatasetId();
+    this.datasets.push(new Dataset(id, name, data));
+    this.createButtonForDataset(name, id);
+  }
+
+  getDatasetId() {
+    return ++this.lastDatasetId;
+  }
+
+  getDatasetById(id) {
+    return this.datasets.filter((d) => d.id == id);
+  }
+}
diff --git a/js/Organizers/editLayerOrganizer.js b/js/Organizers/editLayerOrganizer.js
@@ -61,7 +61,7 @@ class EditLayerOrganizer extends EditOrganizer {
     this.selectedCopy = null;
     this.shrank = false;
     this.enabled = false;
-    getElementById("disable-background").style.display = "none";
+    closeEditLayer();
   }
 
   copyNeurons(from, to) {
@@ -73,7 +73,7 @@ class EditLayerOrganizer extends EditOrganizer {
   }
 
   enable(layer) {
-    getElementById("disable-background").style.display = "flex";
+    openEditLayer();
     this.selected = layer;
     const copy = new HiddenLayer(0, 0, null);
     this.copyNeurons(layer, copy);

diff --git a/js/Organizers/mainOrganizer.js b/js/Organizers/mainOrganizer.js
@@ -2,12 +2,26 @@ class MainOrganizer {
   constructor() {
     this.activeLine = null;
     this.schemas = [];
-    this.displayedFps = 0;
-    this.fps = 0;
-    this.counter = 0;
+    this.mainDisabled = false;
     this.setImages();
   }
 
+  enable() {
+    getElementById("disable-background").style.display = "none";
+    getElementById("create-dataset-container").style.display = "none";
+    getElementById("canvas-parent").style.display = "none";
+    this.mainDisabled = false;
+  }
+
+  disable() {
+    getElementById("disable-background").style.display = "flex";
+    this.mainDisabled = true;
+  }
+
+  isDisabled() {
+    return this.mainDisabled;
+  }
+
   setImages() {
     const p = canvasManager.getInstance();
     this.images = {
@@ -17,18 +31,6 @@ class MainOrganizer {
       lockOpen: p.loadImage("media/lock-open.png"),
     };
   }
-
-  accumulateFps() {
-    this.fps += getFps();
-    this.counter++;
-  }
-
-  updateDisplay() {
-    this.displayedFps = parseFloat((this.fps / this.counter).toFixed(2));
-    this.counter = 0;
-    this.fps = 0;
-  }
-
   getImageByKey(key) {
     return this.images[key];
   }
@@ -50,21 +52,7 @@ class MainOrganizer {
     this.activeLine = line;
   }
 
-  showFps() {
-    const commands = [
-      {
-        func: "text",
-        args: ["FPS:" + this.displayedFps, 500, 10, 25, 25],
-      },
-    ];
-
-    executeDrawingCommands(commands);
-  }
-
   draw() {
-    this.showFps();
-    this.accumulateFps();
-    this.counter == 100 && this.updateDisplay();
     this.schemas.forEach((schema) => schema.draw());
     this.getActiveLine()?.draw();
   }