Merge pull request #9 from saliherdemk/sep

Sep
saliherdemk · Aug 21, 2024 · d8b6b8f · d8b6b8f
2 parents 57b561f + 586e89e
commit d8b6b8f
Show file tree

Hide file tree

Showing 34 changed files with 830 additions and 237 deletions.
diff --git a/index.html b/index.html
@@ -40,9 +40,6 @@
       <button id="mlp-reset-btn" class="btn btn-yellow" type="button">
         Reset Coordinates
       </button>
-      <button id="toggle-layers-locks" class="btn btn-blue" type="button">
-        Lock Layers
-      </button>
 
       <button id="mlp-delete-btn" class="btn btn-rose" type="button">
         Delete
@@ -162,14 +159,13 @@
     <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 id="datasets-container" class="active">
         <div>Datasets</div>
         <div id="dataset-scrollable"></div>
         <button onclick="openCreateDataset()" class="btn btn-sky">
@@ -192,6 +188,7 @@
 
     <script src="js/script.js"></script>
 
+    <script src="js/Managers/themeManager.js"></script>
     <script src="js/Managers/canvasManager.js"></script>
     <script src="js/Managers/interactionManager.js"></script>
     <script src="js/Managers/eventManager.js"></script>
@@ -212,12 +209,17 @@
 
     <script src="js/draggable.js"></script>
 
-    <script src="js/Draw/Minors/CanvasButton.js"></script>
+    <script src="js/Draw/Minors/Buttons/CanvasButton.js"></script>
+    <script src="js/Draw/Minors/Buttons/ImageButton.js"></script>
+    <script src="js/Draw/Minors/Buttons/TextButton.js"></script>
     <script src="js/Draw/Minors/Dot.js"></script>
     <script src="js/Draw/Minors/Line.js"></script>
 
-    <script src="js/Draw/Layer/LayerView.js"></script>
+    <script src="js/Draw/Layer/BaseLayers/LayerView.js"></script>
+    <script src="js/Draw/Layer/BaseLayers/IOLayer.js"></script>
     <script src="js/Draw/Layer/HiddenLayer.js"></script>
+    <script src="js/Draw/Layer/InputLayer.js"></script>
+    <script src="js/Draw/Layer/OutputLayer.js"></script>
 
     <script src="js/Draw/NeuronView.js"></script>
 

diff --git a/js/Draw/DatasetView.js b/js/Draw/DatasetView.js
diff --git a/js/Draw/Layer/BaseLayers/IOLayer.js b/js/Draw/Layer/BaseLayers/IOLayer.js
@@ -0,0 +1,64 @@
+class IOLayer extends LayerView {
+  constructor(name, data, _x, _y) {
+    const { x, y } = iManager.getAbsoluteCoordinates(_x, _y);
+    super(x, y, 300, 300);
+    this.name = name;
+    this.data = data;
+  }
+
+  isInput() {
+    return this.outputDot !== null;
+  }
+
+  getDot() {
+    return this.inputDot ?? this.outputDot;
+  }
+
+  updateNeuronsCoordinates() {
+    this.neurons.forEach((n, i) => {
+      const x = this.x - 25 + (this.isInput() ? this.w : 50);
+      n.updateCoordinates(x, this.y + 30 + i * 50);
+    });
+    this.updateBorders();
+  }
+
+  updateBorders() {
+    this.h = this.neurons[this.neurons.length - 1].y - this.y + 30;
+    this.getDot().updateCoordinates();
+  }
+
+  reInitializeNeurons() {
+    const varNum = this.data[0].length;
+    for (let i = 0; i < varNum; i++) {
+      const neuron = new NeuronView();
+      this.neurons.push(neuron);
+    }
+    this.updateNeuronsCoordinates();
+  }
+
+  pressed() {
+    iManager.checkRollout(this);
+    this.getDot().handlePressed();
+  }
+
+  setCoordinates(x, y) {
+    super.setCoordinates(x, y);
+  }
+
+  createColCommand(text, x, y) {
+    return {
+      func: "text",
+      args: [text, this.x + 25 + x, this.y + 25 + y, this.w, this.h],
+    };
+  }
+
+  doubleClicked() {}
+
+  draw() {
+    this.isEditModeOpen() && this.getDot().draw();
+    const commands = [...this.outerCommands(), ...this.dataCommands()];
+    executeDrawingCommands(commands);
+
+    this.neurons.forEach((n) => n.draw());
+  }
+}
diff --git a/js/Draw/Layer/LayerView.js → js/Draw/Layer/BaseLayers/LayerView.js b/js/Draw/Layer/LayerView.js → js/Draw/Layer/BaseLayers/LayerView.js
@@ -2,18 +2,23 @@ class LayerView extends Draggable {
   constructor(x, y, w, h, parent) {
     super(x, y, w, h);
     this.parent = parent;
+    this.origin = null;
+    this.neurons = [];
     this.inputDot = null;
     this.outputDot = null;
     this.label = "";
     this.removeButton;
     this.editMode = true;
+    this.shrank = false;
+    this.shownNeurons = { num: 0, indexes: [] };
+
     this.initializeDots();
   }
 
   initializeDots() {}
 
   initializeButton() {
-    this.removeButton = new CanvasButton("delete", () => this.handleRemove());
+    this.removeButton = new ImageButton("delete", () => this.handleRemove());
     this.updateButtonCoordinates();
   }
 
@@ -38,24 +43,99 @@ class LayerView extends Draggable {
     return [this.inputDot, this.outputDot];
   }
 
+  postUpdateCoordinates() {
+    this.updateButtonCoordinates();
+    this.updateNeuronsCoordinates();
+    this.parent?.updateBorders();
+  }
+
+  clearOrigin() {
+    this.neurons.forEach((n) => n.clearOrigin());
+    this.origin = null;
+  }
+
+  setOrigin(obj) {
+    // Thanks to MLP class, we can't get rid of this mess. There is no input layer in original MLP class and all weights belongs to target neurons. Too much work to change. Maybe later.
+    const { prev } = this.parent.getPrevAndNext(this);
+    for (let i = 0; i < this.neurons.length; i++) {
+      for (let j = 0; j < prev.neurons.length; j++) {
+        this.neurons[i].setOrigin(obj.neurons[i]);
+        prev.neurons[j].lines[i].setOrigin(obj.neurons[i].w[j]);
+      }
+    }
+    this.origin = obj;
+  }
+
   setCoordinates(x, y) {
-    this.x = x;
-    this.y = y;
+    super.setCoordinates(x, y);
     this.postUpdateCoordinates();
   }
 
   setLabel(label) {
     this.label = label;
   }
 
+  setParent(parent) {
+    this.parent = parent;
+  }
+
   isEditModeOpen() {
     return this.editMode;
   }
 
+  isShrank() {
+    return this.shrank;
+  }
+
   toggleEditMode() {
     this.editMode = !this.editMode;
   }
 
+  pushNeuron() {
+    this.neurons.push(new NeuronView());
+  }
+
+  popNeuron() {
+    this.neurons.pop();
+  }
+
+  getNeuronNum() {
+    return this.neurons.length;
+  }
+
+  getShownNeuronsNum() {
+    return this.shownNeurons.num;
+  }
+
+  setShownNeuronsNum(shownNeuronsNum) {
+    this.shownNeurons.num = this.isShrank()
+      ? shownNeuronsNum
+      : this.getNeuronNum();
+    this.setShownNeurons();
+    editLayerOrganizer.isEnabled && editLayerOrganizer.setInfoText();
+  }
+
+  // GIANT MESS -> LESS GIANT MESS -> Acceptable mess
+  setShownNeurons() {
+    this.shownNeurons.indexes = [];
+    const shownNeuronsNum = this.getShownNeuronsNum();
+    const neuronsNum = this.getNeuronNum();
+    this.infoBox.val = neuronsNum - shownNeuronsNum;
+    const mid =
+      (this.parent ? shownNeuronsNum : Math.min(shownNeuronsNum, 5)) / 2;
+
+    this.neurons.forEach((neuron, i) => {
+      if (i < mid || i >= neuronsNum - mid) {
+        neuron.visible();
+        this.shownNeurons.indexes.push(i);
+      } else {
+        neuron.hide();
+      }
+    });
+
+    this.updateNeuronsCoordinates();
+  }
+
   isIsolated() {
     return this.parent.layers.length == 1;
   }
@@ -84,12 +164,13 @@ class LayerView extends Draggable {
     const [x, y] = [newLayers[0].x, newLayers[0].y];
 
     // FIXME: Don't destroy and recreate, just move -> Done but not satisfying
-    const newSchema = new Schema(x, y);
+    const newMlpView = new MlpView(x, y);
 
-    newSchema.setLayers(newLayers);
-    newSchema.updateBorders();
+    newMlpView.setLayers(newLayers);
+    newMlpView.updateBorders();
     parent.updateBorders();
-    mainOrganizer.addSchema(newSchema);
+    parent.checkMlpCompleted();
+    mainOrganizer.addMlpView(newMlpView);
   }
 
   reconnectNeurons() {
@@ -105,7 +186,7 @@ class LayerView extends Draggable {
 
   connectNeurons(targetLayer) {
     this.neurons.forEach((n1) => {
-      n1.setLines([]);
+      n1.removeLines();
       targetLayer.neurons.forEach((n2) => {
         n1.addLine(new Line(n1, n2));
       });

diff --git a/js/Draw/Layer/HiddenLayer.js b/js/Draw/Layer/HiddenLayer.js
@@ -1,11 +1,8 @@
 class HiddenLayer extends LayerView {
   constructor(x, y, parent) {
     super(x, y, 50, 0, parent);
-    this.neurons = [];
     this.yGap = 40;
     this.infoBox = { h: 70, y: 0, val: 0 };
-    this.shrank = false;
-    this.shownNeurons = { num: 0, indexes: [] };
     this.initializeNeurons();
     !this.isCopy() && this.initializeButton();
   }
@@ -21,19 +18,12 @@ class HiddenLayer extends LayerView {
   initializeNeurons() {
     const numOfNeurons = parseInt(Math.random() * 7) + 1;
     for (let i = 0; i < numOfNeurons; i++) {
-      this.neurons.push(new DrawNeuron());
+      this.neurons.push(new NeuronView());
     }
 
     this.setShownNeuronsNum(this.getNeuronNum());
   }
 
-  postUpdateCoordinates() {
-    this.updateButtonCoordinates();
-    this.updateNeuronsCoordinates();
-    this.updateDotsCoordinates();
-    this.parent?.updateBorders();
-  }
-
   isShrank() {
     return this.shrank || this.isCopy();
   }
@@ -42,51 +32,6 @@ class HiddenLayer extends LayerView {
     return !this.parent;
   }
 
-  pushNeuron() {
-    this.neurons.push(new DrawNeuron());
-  }
-
-  popNeuron() {
-    this.neurons.pop();
-  }
-
-  getNeuronNum() {
-    return this.neurons.length;
-  }
-
-  getShownNeuronsNum() {
-    return this.shownNeurons.num;
-  }
-
-  setShownNeuronsNum(shownNeuronsNum) {
-    this.shownNeurons.num = this.isShrank()
-      ? shownNeuronsNum
-      : this.getNeuronNum();
-    this.setShownNeurons();
-    editLayerOrganizer.isEnabled && editLayerOrganizer.setInfoText();
-  }
-
-  // GIANT MESS -> LESS GIANT MESS -> Acceptable mess
-  setShownNeurons() {
-    this.shownNeurons.indexes = [];
-    const shownNeuronsNum = this.getShownNeuronsNum();
-    const neuronsNum = this.getNeuronNum();
-    this.infoBox.val = neuronsNum - shownNeuronsNum;
-    const mid =
-      (this.parent ? shownNeuronsNum : Math.min(shownNeuronsNum, 5)) / 2;
-
-    this.neurons.forEach((neuron, i) => {
-      if (i < mid || i >= neuronsNum - mid) {
-        neuron.visible();
-        this.shownNeurons.indexes.push(i);
-      } else {
-        neuron.hide();
-      }
-    });
-
-    this.updateNeuronsCoordinates();
-  }
-
   updateNeuronsCoordinates() {
     const isShrank = this.isShrank();
     const neurons = this.shownNeurons.indexes.map((i) => this.neurons[i]);
@@ -143,6 +88,7 @@ class HiddenLayer extends LayerView {
       this.getDots().forEach((dot) => dot?.draw());
       this.removeButton?.draw();
     }
+
     this.show();
     this.isShrank() && this.showInfoBox();