From 72c80513be798bc168ecf124ad6e4f4aea91f1a3 Mon Sep 17 00:00:00 2001
From: doejoedoe <dokashenko2004@gmail.com>
Date: Sun, 24 Dec 2023 12:40:37 +0300
Subject: [PATCH 1/6] added new layers

---
 client/scripts/auth.js     |   2 -
 client/templates/main.html | 291 ++++++++++++++++++++++++++++++++++---
 2 files changed, 272 insertions(+), 21 deletions(-)

diff --git a/client/scripts/auth.js b/client/scripts/auth.js
index dd1690c4..a871ad46 100644
--- a/client/scripts/auth.js
+++ b/client/scripts/auth.js
@@ -19,8 +19,6 @@ const getSHA256Hash = async input => {
     return hash
 }
 
-const py_server_address = localStorage.getItem("py_server_address")
-
 signup.addEventListener("click", () => {
     formSection.classList.add("form-section-move")
 })
diff --git a/client/templates/main.html b/client/templates/main.html
index c70523ce..d207fed6 100644
--- a/client/templates/main.html
+++ b/client/templates/main.html
@@ -109,6 +109,15 @@ <h2 onmousedown="return false">MLCraft</h2>
         <div class="drag-drawflow" draggable="true" ondragstart="drag(event, `conv2d`)" data-node="conv2d">
           <span> Conv2D</span>
         </div>
+        <div class="drag-drawflow" draggable="true" ondragstart="drag(event, `mean`)" data-node="mean">
+          <span> Mean</span>
+        </div>
+        <div class="drag-drawflow" draggable="true" ondragstart="drag(event, `sum`)" data-node="sum">
+          <span> Sum</span>
+        </div>
+        <div class="drag-drawflow" draggable="true" ondragstart="drag(event, `softmax`)" data-node="softmax">
+          <span> SoftMax</span>
+        </div>
         <br />
 
         <label class="button-wrapper">
@@ -192,8 +201,14 @@ <h3></h3>
         </div>
 
         <div class="layernorm-layer-parameters layer-parameters" id="layernorm-layer-parameters" style="display: none">
-          <label for="layernorm-axis-parameter">Axis</label>
-          <input id="layernorm-axis-parameter" type="number" value="1" size="4" />
+          <label for="layernorm-axes-choice-parameter">Axes number: </label>
+          <select id="layernorm-axes-choice-parameter">
+            <option value="0">0</option>
+            <option value="1">1</option>
+            <option value="2">2</option>
+            <option value="3">3</option>
+          </select>
+          <div id="layernorm-axes-parameter"></div>
           <h3></h3>
           <div id="layernorm-input-selection">
             <label class="layer-input-list" style="display: none">Input ID order: </label>
@@ -201,6 +216,45 @@ <h3></h3>
           </div>
         </div>
 
+        <div class="mean-layer-parameters layer-parameters" id="mean-layer-parameters" style="display: none">
+          <label for="mean-axes-choice-parameter">Axes number: </label>
+          <select id="mean-axes-choice-parameter">
+            <option value="0">0</option>
+            <option value="1">1</option>
+            <option value="2">2</option>
+            <option value="3">3</option>
+          </select>
+          <div id="mean-axes-parameter"></div>
+          <h3></h3>
+          <div id="mean-input-selection">
+            <label class="layer-input-list" style="display: none">Input ID order: </label>
+            <ul id="mean-inputs-sortable-list"></ul>
+          </div>
+        </div>
+
+        <div class="sum-layer-parameters layer-parameters" id="sum-layer-parameters" style="display: none">
+          <div id="sum-input-selection">
+            <label class="layer-input-list" style="display: none">Input ID order: </label>
+            <ul id="sum-inputs-sortable-list"></ul>
+          </div>
+        </div>
+
+        <div class="softmax-layer-parameters layer-parameters" id="softmax-layer-parameters" style="display: none">
+          <label for="softmax-axes-choice-parameter">Axes number: </label>
+          <select id="softmax-axes-choice-parameter">
+            <option value="0">0</option>
+            <option value="1">1</option>
+            <option value="2">2</option>
+            <option value="3">3</option>
+          </select>
+          <div id="softmax-axes-parameter"></div>
+          <h3></h3>
+          <div id="softmax-input-selection">
+            <label class="layer-input-list" style="display: none">Input ID order: </label>
+            <ul id="softmax-inputs-sortable-list"></ul>
+          </div>
+        </div>
+
         <div class="conv2d-layer-parameters layer-parameters" id="conv2d-layer-parameters" style="display: none">
           <label for="conv2d-KernelSize-parameter">kernelSize</label>
           <input id="conv2d-KernelSize-parameter" type="number" value="1" size="4" />
@@ -390,6 +444,9 @@ <h3></h3>
             pooling: "Pooling",
             layernorm: "LayerNorm",
             conv2d: "Conv2D",
+            mean: "Mean",
+            sum: "Sum",
+            softmax: "SoftMax",
             data: "Data",
             output: "Output",
             loss: "MSELoss",
@@ -399,8 +456,11 @@ <h3></h3>
             linear: "bias=0;inFeatures=2;outFeatures=1",
             relu: "",
             pooling: "",
-            layernorm: "axis=1",
+            layernorm: "axes=[]",
             conv2d: "kernelSize=1;inChannels=1;outChannels=1",
+            mean: "axes=[]",
+            sum: "",
+            softmax: "axes=[]",
             data: "shape=[3,512,512]",
             output: "",
             loss: "",
@@ -607,6 +667,23 @@ <h3></h3>
         saveCanvasToLocalStorage(editor)
       })
 
+      //needed for axes
+      window.onload = function () {
+        const new_value_layernorm = document.getElementById("layernorm-axes-choice-parameter").value
+        setupAxesParameter(new_value_layernorm, "layernorm")
+        const new_value_mean = document.getElementById("mean-axes-choice-parameter").value
+        setupAxesParameter(new_value_mean, "mean")
+        const new_value_softmax = document.getElementById("softmax-axes-choice-parameter").value
+        setupAxesParameter(new_value_softmax, "softmax")
+      }
+      function getAxes(vals) {
+        let res = []
+        for (let val of vals) {
+          res.push(val.value)
+        }
+        return res
+      }
+
       //linear
       const linear_bias_selector = document.getElementById("bias-parameter")
       linear_bias_selector.addEventListener("change", () => {
@@ -668,21 +745,31 @@ <h3></h3>
       })
 
       //layernorm
-      const layernorm_axis_input = document.getElementById("layernorm-axis-parameter")
-      layernorm_axis_input.addEventListener("change", () => {
+      const layernorm_axes_input = document.getElementById("layernorm-axes-parameter")
+      layernorm_axes_input.addEventListener("change", () => {
         setModelView("irrelevant")
         const parameters = getParametersFromNode(last_changed_parameters_layer_id)
-        const new_value = document.getElementById("layernorm-axis-parameter").value
-
+        const new_value = getAxes(document.getElementsByName("layernorm-axes[]"))
         for (i in parameters) {
-          if (parameters[i][0] == "axis") {
-            parameters[i][1] = new_value
+          if (parameters[i][0] == "axes") {
+            parameters[i][1] = "[" + new_value.toString() + "]"
             joinUpdatedLayerParameters(parameters, last_changed_parameters_layer_id)
             break
           }
         }
       })
-      layernorm_axis_input.addEventListener("input", () => {
+      layernorm_axes_input.addEventListener("change", () => {
+        setModelView("irrelevant")
+        last_changed_parameters_layer_id = last_selected_node_id
+      })
+
+      const layernorm_axes_choice_input = document.getElementById("layernorm-axes-choice-parameter")
+      layernorm_axes_choice_input.addEventListener("change", () => {
+        setModelView("irrelevant")
+        const new_value = document.getElementById("layernorm-axes-choice-parameter").value
+        setupAxesParameter(new_value, "layernorm")
+      })
+      layernorm_axes_choice_input.addEventListener("input", () => {
         setModelView("irrelevant")
         last_changed_parameters_layer_id = last_selected_node_id
       })
@@ -745,6 +832,66 @@ <h3></h3>
         last_changed_parameters_layer_id = last_selected_node_id
       })
 
+      //mean
+      const mean_axes_input = document.getElementById("mean-axes-parameter")
+      mean_axes_input.addEventListener("change", () => {
+        setModelView("irrelevant")
+        const parameters = getParametersFromNode(last_changed_parameters_layer_id)
+        const new_value = getAxes(document.getElementsByName("mean-axes[]"))
+        for (i in parameters) {
+          if (parameters[i][0] == "axes") {
+            parameters[i][1] = "[" + new_value.toString() + "]"
+            joinUpdatedLayerParameters(parameters, last_changed_parameters_layer_id)
+            break
+          }
+        }
+      })
+      mean_axes_input.addEventListener("change", () => {
+        setModelView("irrelevant")
+        last_changed_parameters_layer_id = last_selected_node_id
+      })
+
+      const mean_axes_choice_input = document.getElementById("mean-axes-choice-parameter")
+      mean_axes_choice_input.addEventListener("change", () => {
+        setModelView("irrelevant")
+        const new_value = document.getElementById("mean-axes-choice-parameter").value
+        setupAxesParameter(new_value, "mean")
+      })
+      mean_axes_choice_input.addEventListener("input", () => {
+        setModelView("irrelevant")
+        last_changed_parameters_layer_id = last_selected_node_id
+      })
+
+      //softmax
+      const softmax_axes_input = document.getElementById("softmax-axes-parameter")
+      softmax_axes_input.addEventListener("change", () => {
+        setModelView("irrelevant")
+        const parameters = getParametersFromNode(last_changed_parameters_layer_id)
+        const new_value = getAxes(document.getElementsByName("softmax-axes[]"))
+        for (i in parameters) {
+          if (parameters[i][0] == "axes") {
+            parameters[i][1] = "[" + new_value.toString() + "]"
+            joinUpdatedLayerParameters(parameters, last_changed_parameters_layer_id)
+            break
+          }
+        }
+      })
+      softmax_axes_input.addEventListener("change", () => {
+        setModelView("irrelevant")
+        last_changed_parameters_layer_id = last_selected_node_id
+      })
+
+      const softmax_axes_choice_input = document.getElementById("softmax-axes-choice-parameter")
+      softmax_axes_choice_input.addEventListener("change", () => {
+        setModelView("irrelevant")
+        const new_value = document.getElementById("softmax-axes-choice-parameter").value
+        setupAxesParameter(new_value, "softmax")
+      })
+      softmax_axes_choice_input.addEventListener("input", () => {
+        setModelView("irrelevant")
+        last_changed_parameters_layer_id = last_selected_node_id
+      })
+
       //special
       const special_width_input = document.getElementById("special-width-parameter")
       special_width_input.addEventListener("change", () => {
@@ -818,6 +965,18 @@ <h3></h3>
             layer_drag_offset_X = ev.clientX - 50 // Conv2D layer offset X coord
             layer_drag_offset_Y = ev.clientY - 361 // Conv2D layer offset Y coord
             break
+          case "mean":
+            layer_drag_offset_X = ev.clientX - 50 // Mean layer offset X coord
+            layer_drag_offset_Y = ev.clientY - 427 // Mean layer offset Y coord
+            break
+          case "sum":
+            layer_drag_offset_X = ev.clientX - 50 // Sum layer offset X coord
+            layer_drag_offset_Y = ev.clientY - 493 // Sum layer offset Y coord
+            break
+          case "softmax":
+            layer_drag_offset_X = ev.clientX - 50 // SoftMax layer offset X coord
+            layer_drag_offset_Y = ev.clientY - 559 // SoftMax layer offset Y coord
+            break
           default:
             throw "Unreachable"
         }
@@ -910,25 +1069,37 @@ <h3></h3>
         const empty_data = {}
         switch (name) {
           case "linear":
-            const linear = `<div class="layer"><i class="fab moduleA"></i> Linear</div>`
+            const linear = `<div class="layer"> Linear </div>`
             editor.addNode("linear", 1, 1, pos_x, pos_y, "linear", empty_data, linear)
             break
           case "relu":
-            const relu = `<div class="layer"><i class="fab moduleA"></i> ReLU</div>`
+            const relu = `<div class="layer"> ReLU </div>`
             editor.addNode("relu", 1, 1, pos_x, pos_y, "relu", empty_data, relu)
             break
           case "pooling":
-            const pooling = `<div class="layer"><i class="fab moduleA"></i> Pooling</div>`
+            const pooling = `<div class="layer"> Pooling </div>`
             editor.addNode("pooling", 1, 1, pos_x, pos_y, "pooling", empty_data, pooling)
             break
           case "layernorm":
-            const layernorm = `<div class="layer"><i class="fab moduleA"></i> LayerNorm</div>`
+            const layernorm = `<div class="layer"> LayerNorm </div>`
             editor.addNode("layernorm", 1, 1, pos_x, pos_y, "layernorm", empty_data, layernorm)
             break
           case "conv2d":
-            const conv2d = `<div class="layer"><i class="fab moduleA"></i> Conv2D</div>`
+            const conv2d = `<div class="layer"> Conv2D </div>`
             editor.addNode("conv2d", 1, 1, pos_x, pos_y, "conv2d", empty_data, conv2d)
             break
+          case "mean":
+            const mean = `<div class="layer"> Mean </div>`
+            editor.addNode("mean", 1, 1, pos_x, pos_y, "mean", empty_data, mean)
+            break
+          case "sum":
+            const sum = `<div class="layer"> Sum </div>`
+            editor.addNode("sum", 1, 1, pos_x, pos_y, "sum", empty_data, sum)
+            break
+          case "softmax":
+            const softmax = `<div class="layer"> SoftMax </div>`
+            editor.addNode("softmax", 1, 1, pos_x, pos_y, "softmax", empty_data, softmax)
+            break
           case "data":
             const data = '<div class="title-box"><i class="fas fa-file-signature"></i> Data </div>'
             editor.addNode("data", 0, 1, pos_x, pos_y, "special", empty_data, data)
@@ -1371,6 +1542,12 @@ <h3></h3>
             return document.querySelector("#layernorm-inputs-sortable-list")
           case "conv2d":
             return document.querySelector("#conv2d-inputs-sortable-list")
+          case "mean":
+            return document.querySelector("#mean-inputs-sortable-list")
+          case "sum":
+            return document.querySelector("#sum-inputs-sortable-list")
+          case "softmax":
+            return document.querySelector("#softmax-inputs-sortable-list")
           case "special":
             if (layer.name == "Loss") {
               return document.querySelector("#loss-inputs-sortable-list")
@@ -1465,10 +1642,23 @@ <h3></h3>
             matchConnectionsAfterSelection(new_input_order)
           },
         })
-
+        document.getElementById("layer-id").innerHTML = "ID: " + layer_dbid.toString()
         document.getElementById("layer-data").style.display = "block"
         setupLayerParameters(node, correct_id)
       }
+      function setupAxesParameter(num, type) {
+        let contents = ""
+        for (let i = 0; i < num; i++) {
+          contents = contents + '<input type="number" name="' + type + '-axes[]"/> <br>'
+        }
+        let elem = document.getElementById(`${type}-axes-parameter`)
+        elem.innerHTML = contents
+        if (num != 0) {
+          elem.style.display = "block"
+        } else {
+          elem.style.display = "none"
+        }
+      }
 
       function setupLayerParameters(layer, layer_id) {
         let layer_parameters = getParametersFromNode(layer_id)
@@ -1530,7 +1720,7 @@ <h3></h3>
             break
 
           case "pooling":
-            document.querySelector("#pooling-layer-parameters").style.display = "block"
+            document.querySelector("#pooling-layer-parasmeters").style.display = "block"
             for (i in layer_parameters) {
               // Not given
             }
@@ -1539,8 +1729,21 @@ <h3></h3>
           case "layernorm":
             document.querySelector("#layernorm-layer-parameters").style.display = "block"
             for (i in layer_parameters) {
-              if (layer_parameters[i][0] == "axis") {
-                document.querySelector("#layernorm-axis-parameter").value = layer_parameters[i][1]
+              if (layer_parameters[i][0] == "axes") {
+                let vals = layer_parameters[i][1].replace("[", "").replace("]", "").split(",")
+                if (vals[0] == "") {
+                  setupAxesParameter(0, "layernorm")
+                  document.querySelector("#layernorm-axes-choice-parameter").value = 0
+                  break
+                }
+                setupAxesParameter(vals.length, "layernorm")
+                document.querySelector("#layernorm-axes-choice-parameter").value = vals.length
+                let axes_list = document.getElementsByName("layernorm-axes[]")
+                let j = 0
+                for (let node of axes_list) {
+                  node.value = vals[j]
+                  j++
+                }
               }
             }
             break
@@ -1561,6 +1764,53 @@ <h3></h3>
               }
             }
             break
+
+          case "mean":
+            document.querySelector("#mean-layer-parameters").style.display = "block"
+            for (i in layer_parameters) {
+              if (layer_parameters[i][0] == "axes") {
+                let vals = layer_parameters[i][1].replace("[", "").replace("]", "").split(",")
+                if (vals[0] == "") {
+                  setupAxesParameter(0, "mean")
+                  document.querySelector("#mean-axes-choice-parameter").value = 0
+                  break
+                }
+                setupAxesParameter(vals.length, "mean")
+                document.querySelector("#mean-axes-choice-parameter").value = vals.length
+                let axes_list = document.getElementsByName("mean-axes[]")
+                let j = 0
+                for (let node of axes_list) {
+                  node.value = vals[j]
+                  j++
+                }
+              }
+            }
+            break
+
+          case "sum":
+            break
+
+          case "softmax":
+            document.querySelector("#softmax-layer-parameters").style.display = "block"
+            for (i in layer_parameters) {
+              if (layer_parameters[i][0] == "axes") {
+                let vals = layer_parameters[i][1].replace("[", "").replace("]", "").split(",")
+                if (vals[0] == "") {
+                  setupAxesParameter(0, "softmax")
+                  document.querySelector("#softmax-axes-choice-parameter").value = 0
+                  break
+                }
+                setupAxesParameter(vals.length, "softmax")
+                document.querySelector("#softmax-axes-choice-parameter").value = vals.length
+                let axes_list = document.getElementsByName("softmax-axes[]")
+                let j = 0
+                for (let node of axes_list) {
+                  node.value = vals[j]
+                  j++
+                }
+              }
+            }
+            break
         }
       }
 
@@ -1573,6 +1823,9 @@ <h3></h3>
         document.querySelector("#pooling-layer-parameters").style.display = "none"
         document.querySelector("#layernorm-layer-parameters").style.display = "none"
         document.querySelector("#conv2d-layer-parameters").style.display = "none"
+        document.querySelector("#mean-layer-parameters").style.display = "none"
+        document.querySelector("#sum-layer-parameters").style.display = "none"
+        document.querySelector("#softmax-layer-parameters").style.display = "none"
         document.querySelector("#loss-layer-parameters").style.display = "none"
 
         if (is_id_on_paths) {

From add4ebdfb616eb0781cfbbd3ee40ea1221f24946 Mon Sep 17 00:00:00 2001
From: doejoedoe <dokashenko2004@gmail.com>
Date: Sun, 24 Dec 2023 18:40:26 +0300
Subject: [PATCH 2/6] added loss

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

diff --git a/client/templates/main.html b/client/templates/main.html
index d207fed6..5bd2a29b 100644
--- a/client/templates/main.html
+++ b/client/templates/main.html
@@ -202,7 +202,7 @@ <h3></h3>
 
         <div class="layernorm-layer-parameters layer-parameters" id="layernorm-layer-parameters" style="display: none">
           <label for="layernorm-axes-choice-parameter">Axes number: </label>
-          <select id="layernorm-axes-choice-parameter">
+          <select id="layernorm-axes-choice-parameter" style="margin-right: 10px">
             <option value="0">0</option>
             <option value="1">1</option>
             <option value="2">2</option>
@@ -218,7 +218,7 @@ <h3></h3>
 
         <div class="mean-layer-parameters layer-parameters" id="mean-layer-parameters" style="display: none">
           <label for="mean-axes-choice-parameter">Axes number: </label>
-          <select id="mean-axes-choice-parameter">
+          <select id="mean-axes-choice-parameter" style="margin-right: 10px">
             <option value="0">0</option>
             <option value="1">1</option>
             <option value="2">2</option>
@@ -241,7 +241,7 @@ <h3></h3>
 
         <div class="softmax-layer-parameters layer-parameters" id="softmax-layer-parameters" style="display: none">
           <label for="softmax-axes-choice-parameter">Axes number: </label>
-          <select id="softmax-axes-choice-parameter">
+          <select id="softmax-axes-choice-parameter" style="margin-right: 10px">
             <option value="0">0</option>
             <option value="1">1</option>
             <option value="2">2</option>
@@ -281,18 +281,23 @@ <h3></h3>
           </div>
         </div>
 
+        <div class="data-layer-parameters layer-parameters" id="data-layer-parameters" style="display: none">
+          <label for="data-shape-choice-parameter">Shape number: </label>
+          <select id="data-shape-choice-parameter" style="margin-right: 10px">
+            <option value="1">1</option>
+            <option value="3">3</option>
+          </select>
+          <div id="data-shape-parameter"></div>
+        </div>
+
         <div class="loss-layer-parameters 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="MSELoss">MSELoss</option>
-            <option value="CrossEntropyLoss">CrossEntropyLoss</option>
+          <select id="loss-type-parameter" style="margin-right: 10px">
+            <option value="MSE">MSE</option>
+            <option value="Entropy">Entropy</option>
           </select>
-          <div id="loss-input-selection">
-            <ul id="loss-inputs-sortable-list"></ul>
-          </div>
+          <h3></h3>
+          <div id="loss-classCount-parameter"></div>
         </div>
       </div>
     </div>
@@ -449,7 +454,7 @@ <h3></h3>
             softmax: "SoftMax",
             data: "Data",
             output: "Output",
-            loss: "MSELoss",
+            loss: "Loss",
             target: "Target",
           }
           const parametersMap = {
@@ -463,7 +468,7 @@ <h3></h3>
             softmax: "axes=[]",
             data: "shape=[3,512,512]",
             output: "",
-            loss: "",
+            loss: "type=MSE;classCount=0",
             target: "shape=[1]",
           }
           const layer = {
@@ -675,8 +680,12 @@ <h3></h3>
         setupAxesParameter(new_value_mean, "mean")
         const new_value_softmax = document.getElementById("softmax-axes-choice-parameter").value
         setupAxesParameter(new_value_softmax, "softmax")
+        const new_value_data = document.getElementById("data-shape-choice-parameter").value
+        setupShapeParameter(new_value_data)
+        const new_value_loss = document.getElementById("loss-type-parameter").value
+        setupLossParameter(new_value_loss)
       }
-      function getAxes(vals) {
+      function getAxesOrShape(vals) {
         let res = []
         for (let val of vals) {
           res.push(val.value)
@@ -749,7 +758,7 @@ <h3></h3>
       layernorm_axes_input.addEventListener("change", () => {
         setModelView("irrelevant")
         const parameters = getParametersFromNode(last_changed_parameters_layer_id)
-        const new_value = getAxes(document.getElementsByName("layernorm-axes[]"))
+        const new_value = getAxesOrShape(document.getElementsByName("layernorm-axes[]"))
         for (i in parameters) {
           if (parameters[i][0] == "axes") {
             parameters[i][1] = "[" + new_value.toString() + "]"
@@ -837,7 +846,7 @@ <h3></h3>
       mean_axes_input.addEventListener("change", () => {
         setModelView("irrelevant")
         const parameters = getParametersFromNode(last_changed_parameters_layer_id)
-        const new_value = getAxes(document.getElementsByName("mean-axes[]"))
+        const new_value = getAxesOrShape(document.getElementsByName("mean-axes[]"))
         for (i in parameters) {
           if (parameters[i][0] == "axes") {
             parameters[i][1] = "[" + new_value.toString() + "]"
@@ -867,7 +876,7 @@ <h3></h3>
       softmax_axes_input.addEventListener("change", () => {
         setModelView("irrelevant")
         const parameters = getParametersFromNode(last_changed_parameters_layer_id)
-        const new_value = getAxes(document.getElementsByName("softmax-axes[]"))
+        const new_value = getAxesOrShape(document.getElementsByName("softmax-axes[]"))
         for (i in parameters) {
           if (parameters[i][0] == "axes") {
             parameters[i][1] = "[" + new_value.toString() + "]"
@@ -892,6 +901,77 @@ <h3></h3>
         last_changed_parameters_layer_id = last_selected_node_id
       })
 
+      //data
+      const data_shape_input = document.getElementById("data-shape-parameter")
+      data_shape_input.addEventListener("change", () => {
+        setModelView("irrelevant")
+        const parameters = getParametersFromNode(last_changed_parameters_layer_id)
+        const new_value = getAxesOrShape(document.getElementsByName("shape[]"))
+        for (i in parameters) {
+          if (parameters[i][0] == "shape") {
+            parameters[i][1] = "[" + new_value.toString() + "]"
+            joinUpdatedLayerParameters(parameters, last_changed_parameters_layer_id)
+            break
+          }
+        }
+      })
+      data_shape_input.addEventListener("change", () => {
+        setModelView("irrelevant")
+        last_changed_parameters_layer_id = last_selected_node_id
+      })
+
+      const data_shape_choice_input = document.getElementById("data-shape-choice-parameter")
+      data_shape_choice_input.addEventListener("change", () => {
+        setModelView("irrelevant")
+        const new_value = document.getElementById("data-shape-choice-parameter").value
+        setupShapeParameter(new_value)
+      })
+      data_shape_choice_input.addEventListener("input", () => {
+        setModelView("irrelevant")
+        last_changed_parameters_layer_id = last_selected_node_id
+      })
+
+      //loss
+      const loss_type_input = document.getElementById("loss-type-parameter")
+      loss_type_input.addEventListener("change", () => {
+        setModelView("irrelevant")
+        const parameters = getParametersFromNode(last_changed_parameters_layer_id)
+        const new_value = document.getElementById("loss-type-parameter").value
+
+        for (i in parameters) {
+          if (parameters[i][0] == "type") {
+            parameters[i][1] = new_value
+            joinUpdatedLayerParameters(parameters, last_changed_parameters_layer_id)
+            break
+          }
+        }
+
+        setupLossParameter(new_value)
+      })
+      loss_type_input.addEventListener("input", () => {
+        setModelView("irrelevant")
+        last_changed_parameters_layer_id = last_selected_node_id
+      })
+
+      const loss_classCount_input = document.getElementById("loss-classCount-parameter")
+      loss_classCount_input.addEventListener("change", () => {
+        setModelView("irrelevant")
+        const parameters = getParametersFromNode(last_changed_parameters_layer_id)
+        const new_value = document.getElementById("loss-classCount-parameter").value
+
+        for (i in parameters) {
+          if (parameters[i][0] == "classCount") {
+            parameters[i][1] = new_value
+            joinUpdatedLayerParameters(parameters, last_changed_parameters_layer_id)
+            break
+          }
+        }
+      })
+      loss_classCount_input.addEventListener("input", () => {
+        setModelView("irrelevant")
+        last_changed_parameters_layer_id = last_selected_node_id
+      })
+
       //special
       const special_width_input = document.getElementById("special-width-parameter")
       special_width_input.addEventListener("change", () => {
@@ -1549,9 +1629,6 @@ <h3></h3>
           case "softmax":
             return document.querySelector("#softmax-inputs-sortable-list")
           case "special":
-            if (layer.name == "Loss") {
-              return document.querySelector("#loss-inputs-sortable-list")
-            }
             return document.querySelector("#special-inputs-sortable-list")
         }
       }
@@ -1660,6 +1737,29 @@ <h3></h3>
         }
       }
 
+      function setupShapeParameter(num) {
+        let contents = ""
+        for (let i = 0; i < num; i++) {
+          contents = contents + '<input type="number" name="shape[]"/> <br>'
+        }
+        let elem = document.getElementById("data-shape-parameter")
+        elem.innerHTML = contents
+        if (num != 0) {
+          elem.style.display = "block"
+        } else {
+          elem.style.display = "none"
+        }
+      }
+
+      function setupLossParameter(type) {
+        let elem = document.getElementById("loss-classCount-parameter")
+        if (type == "Entropy") {
+          elem.innerHTML = 'classCount <input type="number" value="1" size="4" />'
+        } else {
+          elem.innerHTML = ''
+        }
+      }
+
       function setupLayerParameters(layer, layer_id) {
         let layer_parameters = getParametersFromNode(layer_id)
 
@@ -1683,18 +1783,33 @@ <h3></h3>
             break
 
           case "special":
-            if (layer.name == "Loss") {
+            if (layer.name == "loss") {
               document.querySelector("#loss-layer-parameters").style.display = "block"
               for (i in layer_parameters) {
                 switch (layer_parameters[i][0]) {
-                  case "width":
-                    document.querySelector("#loss-width-parameter").value = layer_parameters[i][1]
+                  case "classCount":
+                    document.querySelector("#loss-classCount-parameter").value = layer_parameters[i][1]
                     break
                   case "type":
                     document.querySelector("#loss-type-parameter").value = layer_parameters[i][1]
                     break
                 }
               }
+            } else if (layer.name == "data") {
+              document.querySelector("#data-layer-parameters").style.display = "block"
+              for (i in layer_parameters) {
+                if (layer_parameters[i][0] == "shape") {
+                  let vals = layer_parameters[i][1].replace("[", "").replace("]", "").split(",")
+                  setupShapeParameter(vals.length)
+                  document.querySelector("#data-shape-choice-parameter").value = vals.length
+                  let axes_list = document.getElementsByName("shape[]")
+                  let j = 0
+                  for (let node of axes_list) {
+                    node.value = vals[j]
+                    j++
+                  }
+                }
+              }
             } else {
               document.querySelector("#special-layer-parameters").style.display = "block"
               for (i in layer_parameters) {
@@ -1827,6 +1942,7 @@ <h3></h3>
         document.querySelector("#sum-layer-parameters").style.display = "none"
         document.querySelector("#softmax-layer-parameters").style.display = "none"
         document.querySelector("#loss-layer-parameters").style.display = "none"
+        document.querySelector("#data-layer-parameters").style.display = "none"
 
         if (is_id_on_paths) {
           deleteIdOnConnections()

From 8769e8a309562f987d9f5fa70f5d913858a6cf39 Mon Sep 17 00:00:00 2001
From: doejoedoe <dokashenko2004@gmail.com>
Date: Sun, 24 Dec 2023 18:43:55 +0300
Subject: [PATCH 3/6] fixed format

---
 client/templates/main.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/templates/main.html b/client/templates/main.html
index 5bd2a29b..b4b44b08 100644
--- a/client/templates/main.html
+++ b/client/templates/main.html
@@ -1756,7 +1756,7 @@ <h3></h3>
         if (type == "Entropy") {
           elem.innerHTML = 'classCount <input type="number" value="1" size="4" />'
         } else {
-          elem.innerHTML = ''
+          elem.innerHTML = ""
         }
       }
 

From dff09eed75f82cce021b16317f8eee561df14ad9 Mon Sep 17 00:00:00 2001
From: doejoedoe <dokashenko2004@gmail.com>
Date: Sun, 24 Dec 2023 20:17:58 +0300
Subject: [PATCH 4/6] fixed loss

---
 client/templates/main.html | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/client/templates/main.html b/client/templates/main.html
index b4b44b08..b86c6822 100644
--- a/client/templates/main.html
+++ b/client/templates/main.html
@@ -298,6 +298,11 @@ <h3></h3>
           </select>
           <h3></h3>
           <div id="loss-classCount-parameter"></div>
+          <h3></h3>
+          <div id="loss-input-selection">
+            <label class="layer-input-list" style="display: none"> Input ID order: </label>
+            <ul id="loss-inputs-sortable-list"></ul>
+          </div>
         </div>
       </div>
     </div>
@@ -1465,7 +1470,7 @@ <h3></h3>
                 <span class="text-wrapper"> ${name} </span>
                 <label class="button-wrapper">
                     Open
-                    <input type="button" onclick="openNNInConstructor(this.parentElement.parentElement.children[0])"> <!--передает id nn-->
+                    <input type="button" onclick="openNNInConstructor(this.parentElement.parentElement.children[0])">
                 </label>
                 <label class="button-wrapper">
                     Export
@@ -1629,6 +1634,9 @@ <h3></h3>
           case "softmax":
             return document.querySelector("#softmax-inputs-sortable-list")
           case "special":
+            if (layer.name == "loss") {
+              return document.querySelector("#loss-inputs-sortable-list")
+            }
             return document.querySelector("#special-inputs-sortable-list")
         }
       }

From 921d49c9178084c9d5320bb0f92cf2dd7ff32f05 Mon Sep 17 00:00:00 2001
From: doejoedoe <dokashenko2004@gmail.com>
Date: Sun, 24 Dec 2023 21:15:22 +0300
Subject: [PATCH 5/6] updated default values

---
 client/templates/main.html | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/client/templates/main.html b/client/templates/main.html
index b86c6822..cb8dc8a9 100644
--- a/client/templates/main.html
+++ b/client/templates/main.html
@@ -285,6 +285,7 @@ <h3></h3>
           <label for="data-shape-choice-parameter">Shape number: </label>
           <select id="data-shape-choice-parameter" style="margin-right: 10px">
             <option value="1">1</option>
+            <option value="2">2</option>
             <option value="3">3</option>
           </select>
           <div id="data-shape-parameter"></div>
@@ -466,11 +467,11 @@ <h3></h3>
             linear: "bias=0;inFeatures=2;outFeatures=1",
             relu: "",
             pooling: "",
-            layernorm: "axes=[]",
+            layernorm: "axes=[2,3]",
             conv2d: "kernelSize=1;inChannels=1;outChannels=1",
-            mean: "axes=[]",
+            mean: "axes=[2]",
             sum: "",
-            softmax: "axes=[]",
+            softmax: "axes=[3]",
             data: "shape=[3,512,512]",
             output: "",
             loss: "type=MSE;classCount=0",

From 83c06657170309f1fd8dcd22d9fc4d72d1f40fb3 Mon Sep 17 00:00:00 2001
From: doejoedoe <dokashenko2004@gmail.com>
Date: Sun, 24 Dec 2023 23:20:06 +0300
Subject: [PATCH 6/6] fixed loss (again)

---
 client/templates/main.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/client/templates/main.html b/client/templates/main.html
index cb8dc8a9..edd6a2bd 100644
--- a/client/templates/main.html
+++ b/client/templates/main.html
@@ -474,7 +474,7 @@ <h3></h3>
             softmax: "axes=[3]",
             data: "shape=[3,512,512]",
             output: "",
-            loss: "type=MSE;classCount=0",
+            loss: "type=MSE;classCount=2",
             target: "shape=[1]",
           }
           const layer = {
@@ -963,8 +963,7 @@ <h3></h3>
       loss_classCount_input.addEventListener("change", () => {
         setModelView("irrelevant")
         const parameters = getParametersFromNode(last_changed_parameters_layer_id)
-        const new_value = document.getElementById("loss-classCount-parameter").value
-
+        const new_value = document.getElementsByName("classCount-parameter[]")[0].value
         for (i in parameters) {
           if (parameters[i][0] == "classCount") {
             parameters[i][1] = new_value
@@ -1735,7 +1734,7 @@ <h3></h3>
       function setupAxesParameter(num, type) {
         let contents = ""
         for (let i = 0; i < num; i++) {
-          contents = contents + '<input type="number" name="' + type + '-axes[]"/> <br>'
+          contents = contents + '<input type="number" name="' + type + '-axes[]" size="4"/> <br>'
         }
         let elem = document.getElementById(`${type}-axes-parameter`)
         elem.innerHTML = contents
@@ -1749,7 +1748,7 @@ <h3></h3>
       function setupShapeParameter(num) {
         let contents = ""
         for (let i = 0; i < num; i++) {
-          contents = contents + '<input type="number" name="shape[]"/> <br>'
+          contents = contents + '<input type="number" name="shape[]" size="4"/> <br>'
         }
         let elem = document.getElementById("data-shape-parameter")
         elem.innerHTML = contents
@@ -1763,7 +1762,7 @@ <h3></h3>
       function setupLossParameter(type) {
         let elem = document.getElementById("loss-classCount-parameter")
         if (type == "Entropy") {
-          elem.innerHTML = 'classCount <input type="number" value="1" size="4" />'
+          elem.innerHTML = 'classCount <input type="number" name="classCount-parameter[]" size="4"/>'
         } else {
           elem.innerHTML = ""
         }
@@ -1797,9 +1796,10 @@ <h3></h3>
               for (i in layer_parameters) {
                 switch (layer_parameters[i][0]) {
                   case "classCount":
-                    document.querySelector("#loss-classCount-parameter").value = layer_parameters[i][1]
+                    document.getElementsByName("classCount-parameter[]")[0].value = layer_parameters[i][1]
                     break
                   case "type":
+                    setupLossParameter(layer_parameters[i][1])
                     document.querySelector("#loss-type-parameter").value = layer_parameters[i][1]
                     break
                 }