Input & Output heights automatically adjust to train data sizes.

izzat5233 · Dec 18, 2023 · cf380c0 · cf380c0
1 parent e1e96ae
commit cf380c0
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 5 deletions.
diff --git a/web/content/control/data.html b/web/content/control/data.html
@@ -122,12 +122,18 @@ <h5>Testing Data</h5>
         clearTrainPreviewTable()
 
         let input = network.getTrainInPreview();
-        const headers1 = appendTableHeaders("#trainPreviewThead", input.get(0).size(), "Input");
+        const inputSize = input.get(0).size();
+        setStructureInput(inputSize);
+
+        const headers1 = appendTableHeaders("#trainPreviewThead", inputSize, "Input");
         const cells1 = appendTableCells("#trainPreviewTbody", input);
         styleTableSelection(headers1, cells1, 'table-default');
 
         let output = network.getTrainOutPreview();
-        const headers2 = appendTableHeaders("#trainPreviewThead", output.get(0).size(), "Output");
+        const outputSize = output.get(0).size();
+        setStructureOutput(outputSize);
+
+        const headers2 = appendTableHeaders("#trainPreviewThead", outputSize, "Output");
         const cells2 = appendTableCells("#trainPreviewTbody", output);
         styleTableSelection(headers2, cells2, 'table-secondary');
 

diff --git a/web/content/setup/structure.html b/web/content/setup/structure.html
@@ -17,12 +17,12 @@
         updateNetworkDimensions(structure);
     }
 </script>
-<div class="container flex-column gap-4" oninput="onStructureChange()">
+<div class="container flex-column gap-4">
     <div class="row row-cols-1 row-cols-lg-3 g-4">
         <div class="col">
             <label for="inputLayerHeight" class="form-label">Input Layer Height</label>
             <input type="range" class="form-range" min="1" max="10" step="1" id="inputLayerHeight"
-                   value="2" oninput="structure[0] = Number(value)">
+                   value="2" oninput="setStructureInput(Number(value))">
         </div>
         <div class="col">
             <label for="hiddenLayersCount" class="form-label">Hidden Layers Count</label>
@@ -32,7 +32,7 @@
         <div class="col">
             <label for="outputLayerHeight" class="form-label">Output Layer Height</label>
             <input type="range" class="form-range" min="1" max="10" step="1" id="outputLayerHeight"
-                   value="2" oninput="structure[structure.length - 1] = Number(value)">
+                   value="2" oninput="setStructureOutput(Number(value))">
         </div>
     </div>
     <hr>
@@ -45,6 +45,18 @@
         updateOutputFunctionLabel();
     }
 
+    function setStructureInput(value) {
+        structure[0] = value;
+        document.getElementById('inputLayerHeight').value = value;
+        onStructureChange();
+    }
+
+    function setStructureOutput(value) {
+        structure[structure.length - 1] = value;
+        document.getElementById('outputLayerHeight').value = value;
+        onStructureChange();
+    }
+
     function createHiddenLayerInput(index, value) {
         const input = document.createElement('input');
         input.type = 'range';
@@ -78,6 +90,7 @@
         }
 
         structure.push(last);
+        onStructureChange();
     }
 
     function updateOutputFunctionLabel() {