From fb7de98c5ad236022c1688d4b24dced1cd0f69c0 Mon Sep 17 00:00:00 2001
From: Ivan Shanygin <shanygin101@yandex.ru>
Date: Thu, 30 Nov 2023 22:12:19 +0300
Subject: [PATCH 1/5] Add loss type selection

---
 client/templates/main.html | 105 +++++++++++++++++++++++++++----------
 1 file changed, 78 insertions(+), 27 deletions(-)

diff --git a/client/templates/main.html b/client/templates/main.html
index d2e14bfe..d58b2526 100644
--- a/client/templates/main.html
+++ b/client/templates/main.html
@@ -178,6 +178,9 @@ <h3></h3>
         </div>
 
         <div class="relu-layer-parameters" id="relu-layer-parameters" style="display: none">
+          <label for="relu-width-parameter">Width</label>
+          <input id="relu-width-parameter" type="number" value="1" size="4" />
+          <h3></h3>
           <div id="relu-input-selection">
             <ul id="relu-inputs-sortable-list"></ul>
           </div>
@@ -190,6 +193,21 @@ <h3></h3>
             <ul id="special-inputs-sortable-list"></ul>
           </div>
         </div>
+
+        <div class="loss-layer-parameters" id="loss-layer-parameters" style="display: none">
+          <label for="loss-width-parameter">Width</label>
+          <input id="loss-width-parameter" type="number" value="1" size="4" />
+          <h3></h3>
+          <label for="loss-type-parameter">Loss type</label>
+          <select id="loss-type-parameter">
+            <option value="MSE">MSE</option>
+            <option value="NLL">NLL</option>
+            <option value="KLDiv">KLDiv</option>
+          </select>
+          <div id="loss-input-selection">
+            <ul id="loss-inputs-sortable-list"></ul>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -305,7 +323,7 @@ <h3></h3>
         0,
         760,
         450,
-        "special",
+        "loss",
         {},
         '<div class="title-box"><i class="fas fa-file-signature"></i> Loss </div>',
       )
@@ -602,7 +620,7 @@ <h3></h3>
           relu: "",
           data: "width=2",
           output: "width=1",
-          loss: "width=1",
+          loss: "width=1;type=MSE",
           target: "width=1",
         }
 
@@ -640,7 +658,7 @@ <h3></h3>
             break
           case "loss":
             const loss = '<div class="title-box"><i class="fas fa-file-signature"></i> Loss </div>'
-            editor.addNode("MSELoss", 1, 0, pos_x, pos_y, "special", attrs, loss)
+            editor.addNode("MSELoss", 1, 0, pos_x, pos_y, "loss", attrs, loss)
             break
           default:
             throw "Unreachable"
@@ -896,22 +914,22 @@ <h3></h3>
         try {
           let ObjData = {
             type: "Data",
-            parameters: "inputs=0;outputs=1;width=2",
+            parameters: "width=2",
           }
 
           let ObjOutput = {
             type: "Output",
-            parameters: "inputs=1;outputs=0;width=1",
+            parameters: "width=1",
           }
 
           let ObjTarget = {
             type: "Target",
-            parameters: "inputs=0;outputs=1;width=1",
+            parameters: "width=1",
           }
 
           let ObjLoss = {
             type: "MSELoss",
-            parameters: "inputs=2;outputs=0;width=1",
+            parameters: "width=1;type=MSE",
           }
 
           addLayer(ObjData)
@@ -1131,6 +1149,8 @@ <h3></h3>
             return document.querySelector("#relu-inputs-sortable-list")
           case "special":
             return document.querySelector("#special-inputs-sortable-list")
+          case "loss":
+            return document.querySelector("#loss-inputs-sortable-list")
         }
       }
 
@@ -1202,41 +1222,72 @@ <h3></h3>
         })
 
         document.getElementById("layer-data").style.display = "block"
-        var layer_parameters = getParametersFromNode(correct_id)
+        setupLayerParameters(node.class, correct_id)
+      }
 
-        if (node.class == "linear") {
-          document.querySelector("#linear-layer-parameters").style.display = "block"
+      function setupLayerParameters(layer_class, layer_id) {
+        let layer_parameters = getParametersFromNode(layer_id)
+        console.log(layer_parameters)
 
-          for (i in layer_parameters) {
-            if (layer_parameters[i][0] == "bias") {
-              document.querySelector("#bias-parameter").value = layer_parameters[i][1] == "1"
+        switch (layer_class) {
+          case "linear":
+            document.querySelector("#linear-layer-parameters").style.display = "block"
+            for (i in layer_parameters) {
+              if (layer_parameters[i][0] == "bias") {
+                document.querySelector("#bias-parameter").value = layer_parameters[i][1] == "1"
+              }
+              if (layer_parameters[i][0] == "inFeatures") {
+                document.querySelector("#linear-inFeatures-parameter").value = layer_parameters[i][1]
+              }
+              if (layer_parameters[i][0] == "outFeatures") {
+                document.querySelector("#linear-outFeatures-parameter").value = layer_parameters[i][1]
+              }
             }
-            if (layer_parameters[i][0] == "inFeatures") {
-              document.querySelector("#linear-inFeatures-parameter").value = layer_parameters[i][1]
+            break
+
+          case "special":
+            document.querySelector("#special-layer-parameters").style.display = "block"
+            for (i in layer_parameters) {
+              if (layer_parameters[i][0] == "width") {
+                document.querySelector("#special-width-parameter").value = layer_parameters[i][1]
+              }
+              if (layer_parameters[i][0] == "type") {
+                console.log("MOROZ I SOLNCE DENb CHUDESNY")
+                document.querySelector("#loss-type-parameter").value = layer_parameters[i][1]
+              }
             }
-            if (layer_parameters[i][0] == "outFeatures") {
-              document.querySelector("#linear-outFeatures-parameter").value = layer_parameters[i][1]
+            break
+
+          case "relu":
+            document.querySelector("#relu-layer-parameters").style.display = "block"
+            for (i in layer_parameters) {
+              if (layer_parameters[i][0] == "width") {
+                document.querySelector("#relu-width-parameter").value = layer_parameters[i][1]
+              }
             }
-          }
-        } else if (node.class == "special") {
-          document.querySelector("#special-layer-parameters").style.display = "block"
+            break
 
-          for (i in layer_parameters) {
-            if (layer_parameters[i][0] == "width") {
-              document.querySelector("#special-width-parameter").value = layer_parameters[i][1]
+          case "loss":
+            document.querySelector("#loss-layer-parameters").style.display = "block"
+            for (i in layer_parameters) {
+              if (layer_parameters[i][0] == "width") {
+                document.querySelector("#loss-width-parameter").value = layer_parameters[i][1]
+              }
+              if (layer_parameters[i][0] == "type") {
+                document.querySelector("#loss-type-parameter").value = layer_parameters[i][1]
+              }
             }
-          }
-        } else if (node.class == "relu") {
-          document.querySelector("#relu-layer-parameters").style.display = "block"
+            break
         }
-        const data = getLayerInfoFromDB(id)
       }
+
       function hideLayerInfo() {
         document.getElementById("layer-data").style.display = "none"
 
         document.querySelector("#linear-layer-parameters").style.display = "none"
         document.querySelector("#special-layer-parameters").style.display = "none"
         document.querySelector("#relu-layer-parameters").style.display = "none"
+        document.querySelector("#loss-layer-parameters").style.display = "none"
 
         deleteIdOnConnections()
       }

From 0e54ccc44b0ef59c72c49bea91e97e4ecb318d19 Mon Sep 17 00:00:00 2001
From: Ivan Shanygin <shanygin101@yandex.ru>
Date: Sun, 10 Dec 2023 18:23:21 +0300
Subject: [PATCH 2/5] Add loss type selection

---
 client/templates/main.html | 30 ++++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/client/templates/main.html b/client/templates/main.html
index d58b2526..b017f29b 100644
--- a/client/templates/main.html
+++ b/client/templates/main.html
@@ -200,9 +200,8 @@ <h3></h3>
           <h3></h3>
           <label for="loss-type-parameter">Loss type</label>
           <select id="loss-type-parameter">
-            <option value="MSE">MSE</option>
-            <option value="NLL">NLL</option>
-            <option value="KLDiv">KLDiv</option>
+            <option value="MSELoss">MSELoss</option>
+            <option value="CrossEntropyLoss">CrossEntropyLoss</option>
           </select>
           <div id="loss-input-selection">
             <ul id="loss-inputs-sortable-list"></ul>
@@ -501,6 +500,26 @@ <h3></h3>
         last_changed_parameters_layer_id = last_selected_node_id
       })
 
+      const loss_type_selector = document.getElementById("loss-type-parameter")
+      loss_type_selector.addEventListener("change", () => {
+        setModelView("irrelevant")
+        const parameters = getParametersFromNode(last_selected_node_id)
+        console.log("last id: " + last_selected_layer_id)
+        const new_value = document.getElementById("loss-type-parameter").value
+
+        for (i in parameters) {
+          if (parameters[i][0] == "type") {
+            if (new_value == "MSELoss") {
+              parameters[i][1] = "MSELoss"
+            } else {
+              parameters[i][1] = "CrossEntropyLoss"
+            }
+            joinUpdatedLayerParameters(parameters, last_selected_node_id)
+            break
+          }
+        }
+      })
+
       /* DRAG EVENT */
       /* Mouse and Touch Actions */
       var elements = document.getElementsByClassName("drag-drawflow")
@@ -620,7 +639,7 @@ <h3></h3>
           relu: "",
           data: "width=2",
           output: "width=1",
-          loss: "width=1;type=MSE",
+          loss: "width=1;type=MSELoss",
           target: "width=1",
         }
 
@@ -929,7 +948,7 @@ <h3></h3>
 
           let ObjLoss = {
             type: "MSELoss",
-            parameters: "width=1;type=MSE",
+            parameters: "width=1;type=MSELoss",
           }
 
           addLayer(ObjData)
@@ -1252,7 +1271,6 @@ <h3></h3>
                 document.querySelector("#special-width-parameter").value = layer_parameters[i][1]
               }
               if (layer_parameters[i][0] == "type") {
-                console.log("MOROZ I SOLNCE DENb CHUDESNY")
                 document.querySelector("#loss-type-parameter").value = layer_parameters[i][1]
               }
             }

From afe3be1854aae649fc6905ec843f6b3c1ed07489 Mon Sep 17 00:00:00 2001
From: Ivan Shanygin <shanygin101@yandex.ru>
Date: Sun, 10 Dec 2023 19:00:58 +0300
Subject: [PATCH 3/5] Remove layer-class loss

---
 client/templates/main.html | 57 +++++++++++++++++++-------------------
 1 file changed, 29 insertions(+), 28 deletions(-)

diff --git a/client/templates/main.html b/client/templates/main.html
index b017f29b..e40287ce 100644
--- a/client/templates/main.html
+++ b/client/templates/main.html
@@ -322,7 +322,7 @@ <h3></h3>
         0,
         760,
         450,
-        "loss",
+        "special",
         {},
         '<div class="title-box"><i class="fas fa-file-signature"></i> Loss </div>',
       )
@@ -677,7 +677,7 @@ <h3></h3>
             break
           case "loss":
             const loss = '<div class="title-box"><i class="fas fa-file-signature"></i> Loss </div>'
-            editor.addNode("MSELoss", 1, 0, pos_x, pos_y, "loss", attrs, loss)
+            editor.addNode("MSELoss", 1, 0, pos_x, pos_y, "special", attrs, loss)
             break
           default:
             throw "Unreachable"
@@ -1160,16 +1160,17 @@ <h3></h3>
         pathsWithWrittenID = []
       }
 
-      function getSortableInputList(layerClass) {
-        switch (layerClass) {
+      function getSortableInputList(layer) {
+        switch (layer.class) {
           case "linear":
             return document.querySelector("#linear-inputs-sortable-list")
           case "relu":
             return document.querySelector("#relu-inputs-sortable-list")
           case "special":
+            if (layer.name == "Loss") {
+              return document.querySelector("#loss-inputs-sortable-list")
+            }
             return document.querySelector("#special-inputs-sortable-list")
-          case "loss":
-            return document.querySelector("#loss-inputs-sortable-list")
         }
       }
 
@@ -1185,7 +1186,7 @@ <h3></h3>
 
         // Input selection
         writeIdOnConnections(correct_id)
-        let sortable_list = getSortableInputList(node.class)
+        let sortable_list = getSortableInputList(node)
         let child = sortable_list.lastElementChild
 
         while (child) {
@@ -1241,14 +1242,14 @@ <h3></h3>
         })
 
         document.getElementById("layer-data").style.display = "block"
-        setupLayerParameters(node.class, correct_id)
+        setupLayerParameters(node, correct_id)
       }
 
-      function setupLayerParameters(layer_class, layer_id) {
+      function setupLayerParameters(layer, layer_id) {
         let layer_parameters = getParametersFromNode(layer_id)
         console.log(layer_parameters)
 
-        switch (layer_class) {
+        switch (layer.class) {
           case "linear":
             document.querySelector("#linear-layer-parameters").style.display = "block"
             for (i in layer_parameters) {
@@ -1265,13 +1266,25 @@ <h3></h3>
             break
 
           case "special":
-            document.querySelector("#special-layer-parameters").style.display = "block"
-            for (i in layer_parameters) {
-              if (layer_parameters[i][0] == "width") {
-                document.querySelector("#special-width-parameter").value = layer_parameters[i][1]
+            if (layer.name == "Loss") {
+              document.querySelector("#loss-layer-parameters").style.display = "block"
+              for (i in layer_parameters) {
+                if (layer_parameters[i][0] == "width") {
+                  document.querySelector("#loss-width-parameter").value = layer_parameters[i][1]
+                }
+                if (layer_parameters[i][0] == "type") {
+                  document.querySelector("#loss-type-parameter").value = layer_parameters[i][1]
+                }
               }
-              if (layer_parameters[i][0] == "type") {
-                document.querySelector("#loss-type-parameter").value = layer_parameters[i][1]
+            } else {
+              document.querySelector("#special-layer-parameters").style.display = "block"
+              for (i in layer_parameters) {
+                if (layer_parameters[i][0] == "width") {
+                  document.querySelector("#special-width-parameter").value = layer_parameters[i][1]
+                }
+                if (layer_parameters[i][0] == "type") {
+                  document.querySelector("#loss-type-parameter").value = layer_parameters[i][1]
+                }
               }
             }
             break
@@ -1284,18 +1297,6 @@ <h3></h3>
               }
             }
             break
-
-          case "loss":
-            document.querySelector("#loss-layer-parameters").style.display = "block"
-            for (i in layer_parameters) {
-              if (layer_parameters[i][0] == "width") {
-                document.querySelector("#loss-width-parameter").value = layer_parameters[i][1]
-              }
-              if (layer_parameters[i][0] == "type") {
-                document.querySelector("#loss-type-parameter").value = layer_parameters[i][1]
-              }
-            }
-            break
         }
       }
 

From 7ea89d80ea9f0b0a85207661ed58d1f4973a24c8 Mon Sep 17 00:00:00 2001
From: Ivan Shanygin <shanygin101@yandex.ru>
Date: Thu, 14 Dec 2023 12:07:24 +0300
Subject: [PATCH 4/5] Clean up Loss type

---
 client/templates/main.html | 57 ++++++++++++++++++--------------------
 1 file changed, 27 insertions(+), 30 deletions(-)

diff --git a/client/templates/main.html b/client/templates/main.html
index e40287ce..facf89b8 100644
--- a/client/templates/main.html
+++ b/client/templates/main.html
@@ -422,7 +422,6 @@ <h3></h3>
       linear_bias_selector.addEventListener("change", () => {
         setModelView("irrelevant")
         const parameters = getParametersFromNode(last_selected_node_id)
-        console.log("last id: " + last_selected_layer_id)
         const new_value = document.getElementById("bias-parameter").value
 
         for (i in parameters) {
@@ -444,7 +443,6 @@ <h3></h3>
       linear_inFeatures_input.addEventListener("change", () => {
         setModelView("irrelevant")
         const parameters = getParametersFromNode(last_changed_parameters_layer_id)
-        console.log("last id: " + last_selected_layer_id)
         const new_value = document.getElementById("linear-inFeatures-parameter").value
 
         for (i in parameters) {
@@ -464,7 +462,6 @@ <h3></h3>
       linear_outFeatures_input.addEventListener("change", () => {
         setModelView("irrelevant")
         const parameters = getParametersFromNode(last_changed_parameters_layer_id)
-        console.log("last id: " + last_selected_layer_id)
         const new_value = document.getElementById("linear-outFeatures-parameter").value
 
         for (i in parameters) {
@@ -484,7 +481,6 @@ <h3></h3>
       special_width_input.addEventListener("change", () => {
         setModelView("irrelevant")
         const parameters = getParametersFromNode(last_changed_parameters_layer_id)
-        console.log("last id: " + last_selected_layer_id)
         const new_value = document.getElementById("special-width-parameter").value
 
         for (i in parameters) {
@@ -504,16 +500,11 @@ <h3></h3>
       loss_type_selector.addEventListener("change", () => {
         setModelView("irrelevant")
         const parameters = getParametersFromNode(last_selected_node_id)
-        console.log("last id: " + last_selected_layer_id)
-        const new_value = document.getElementById("loss-type-parameter").value
+        const new_value = loss_type_selector.value
 
         for (i in parameters) {
           if (parameters[i][0] == "type") {
-            if (new_value == "MSELoss") {
-              parameters[i][1] = "MSELoss"
-            } else {
-              parameters[i][1] = "CrossEntropyLoss"
-            }
+            parameters[i][1] = new_value
             joinUpdatedLayerParameters(parameters, last_selected_node_id)
             break
           }
@@ -1247,20 +1238,22 @@ <h3></h3>
 
       function setupLayerParameters(layer, layer_id) {
         let layer_parameters = getParametersFromNode(layer_id)
-        console.log(layer_parameters)
 
         switch (layer.class) {
           case "linear":
             document.querySelector("#linear-layer-parameters").style.display = "block"
+
             for (i in layer_parameters) {
-              if (layer_parameters[i][0] == "bias") {
-                document.querySelector("#bias-parameter").value = layer_parameters[i][1] == "1"
-              }
-              if (layer_parameters[i][0] == "inFeatures") {
-                document.querySelector("#linear-inFeatures-parameter").value = layer_parameters[i][1]
-              }
-              if (layer_parameters[i][0] == "outFeatures") {
-                document.querySelector("#linear-outFeatures-parameter").value = layer_parameters[i][1]
+              switch (layer_parameters[i][0]) {
+                case "bias":
+                  document.querySelector("#bias-parameter").value = layer_parameters[i][1] == "1"
+                  break
+                case "inFeatures":
+                  document.querySelector("#linear-inFeatures-parameter").value = layer_parameters[i][1]
+                  break
+                case "outFeatures":
+                  document.querySelector("#linear-outFeatures-parameter").value = layer_parameters[i][1]
+                  break
               }
             }
             break
@@ -1269,21 +1262,25 @@ <h3></h3>
             if (layer.name == "Loss") {
               document.querySelector("#loss-layer-parameters").style.display = "block"
               for (i in layer_parameters) {
-                if (layer_parameters[i][0] == "width") {
-                  document.querySelector("#loss-width-parameter").value = layer_parameters[i][1]
-                }
-                if (layer_parameters[i][0] == "type") {
-                  document.querySelector("#loss-type-parameter").value = layer_parameters[i][1]
+                switch (layer_parameters[i][0]) {
+                  case "width":
+                    document.querySelector("#loss-width-parameter").value = layer_parameters[i][1]
+                    break
+                  case "type":
+                    document.querySelector("#loss-type-parameter").value = layer_parameters[i][1]
+                    break
                 }
               }
             } else {
               document.querySelector("#special-layer-parameters").style.display = "block"
               for (i in layer_parameters) {
-                if (layer_parameters[i][0] == "width") {
-                  document.querySelector("#special-width-parameter").value = layer_parameters[i][1]
-                }
-                if (layer_parameters[i][0] == "type") {
-                  document.querySelector("#loss-type-parameter").value = layer_parameters[i][1]
+                switch (layer_parameters[i][0]) {
+                  case "width":
+                    document.querySelector("#special-width-parameter").value = layer_parameters[i][1]
+                    break
+                  case "type":
+                    document.querySelector("#loss-type-parameter").value = layer_parameters[i][1]
+                    break
                 }
               }
             }

From 8bdf27a3963ce7183fe36ed89938b8e79d17d180 Mon Sep 17 00:00:00 2001
From: Ivan Shanygin <shanygin101@yandex.ru>
Date: Thu, 14 Dec 2023 12:17:55 +0300
Subject: [PATCH 5/5] Make format

---
 client/templates/main.html | 2 --
 1 file changed, 2 deletions(-)

diff --git a/client/templates/main.html b/client/templates/main.html
index 076c2699..f7fcc3a0 100644
--- a/client/templates/main.html
+++ b/client/templates/main.html
@@ -180,7 +180,6 @@ <h3></h3>
           </div>
         </div>
 
-
         <div class="relu-layer-parameters" id="relu-layer-parameters" style="display: none">
           <label for="relu-width-parameter">Width</label>
           <input id="relu-width-parameter" type="number" value="1" size="4" />
@@ -780,7 +779,6 @@ <h3></h3>
         pos_x -= layer_drag_offset_X
         pos_y -= layer_drag_offset_Y
 
-
         const empty_data = {}
         switch (name) {
           case "linear":