Several layout updates, UI description texts.

izzat5233 · Dec 24, 2023 · e4f9790 · e4f9790
1 parent 9a19861
commit e4f9790
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 24 deletions.
diff --git a/web/content/_index.md b/web/content/_index.md
@@ -5,29 +5,29 @@ draft = false
 [accordions]
 [accordions.setup]
 [[accordions.setup.items]]
-title = "Structure Controls"
+title = "Structure Setup"
 file = "setup/structure.html"
 collapseId = "setupCollapseOne"
 expanded = true
 [[accordions.setup.items]]
-title = "Advanced Controls"
+title = "Advanced Settings"
 file = "setup/advanced.html"
 collapseId = "setupCollapseTwo"
 expanded = false
 
 [accordions.control]
 [[accordions.control.items]]
-title = "Load Your Data"
+title = "Data Preparation"
 file = "control/data.html"
 collapseId = "controlCollapseOne"
 expanded = true
 [[accordions.control.items]]
-title = "Train It"
+title = "Training Your Module"
 file = "control/train.html"
 collapseId = "controlCollapseTwo"
 expanded = false
 [[accordions.control.items]]
-title = "Test It"
+title = "Testing & Evaluation"
 file = "control/test.html"
 collapseId = "controlCollapseThree"
 expanded = false
@@ -39,7 +39,14 @@ expanded = false
 {{< include-script "js/data.js" >}}
 {{< include-script "js/io.js" >}}
 
-# Set up The Neural Network
+# Configure Your Neural Network
+
+<br>
+
+- Before diving into data classification, let's set up your neural network. Our setup section is designed to guide you
+  through the process of configuring the basic structure of your network. Adjust the layers, nodes, and more.
+
+- **Important:** changing any option in this section will reset the network weights.
 
 {{< accordion "setup" >}}
 
@@ -48,7 +55,12 @@ expanded = false
 
 ---
 
-# It's Super Fast, Give it a try!
+# It's Super Fast, Give it a Try!
+
+<br>
+
+- Now that your neural network is configured, let’s put it to the test. Upload your data, train the network, and then
+  evaluate its performance.
 
 {{< include-script "js/TableObject.js" >}}
 {{< include-script "js/table.js" >}}

diff --git a/web/content/control/train.html b/web/content/control/train.html
@@ -90,7 +90,8 @@
 <div class="row justify-content-center">
     <div class="col">
         <div class="container">
-            <h4 class="py-4">Train/Pause:</h4>
+            <h4>Train/Pause:</h4>
+            <p class="fw-light">Speed does not affect training accuracy</p>
             <div class="btn-group" role="group" aria-label="Train Speeds">
                 <button type="button" class="btn btn-lg btn-success fs-5 icons-close"
                         onclick="handleTrainPause('pause')">
@@ -114,18 +115,20 @@ <h4 class="py-4">Train/Pause:</h4>
             </div>
             <div class="my-4 d-flex flex-column gap-2">
                 <div>
-                    <label for="learningRateInput" class="form-label text-nowrap">
-                        Learning Rate <span class="fw-light">(changing it will not reset the weights)</span></label>
+                    <label for="learningRateInput" class="form-label text-nowrap fw-bold">
+                        Learning Rate <span class="fw-light">(Safe to change, does not reset the weights)</span></label>
                     <input type="number" step="0.001" min="0.001" max="3" class="form-control" id="learningRateInput"
                            oninput="network.setLearningRate(value)">
                 </div>
                 <div>
-                    <label for="trainErrorGoalInput" class="form-label text-nowrap">Training Error Goal</label>
+                    <label for="trainErrorGoalInput" class="form-label text-nowrap fw-bold">
+                        Training Error Goal <span class="fw-light">(Training auto stops once reached)</span></label>
                     <input type="number" step="0.001" min="0" max="1" value="0.01" class="form-control"
                            id="trainErrorGoalInput" oninput="trainErrorGoal = Number(value)">
                 </div>
                 <div>
-                    <label for="testErrorGoalInput" class="form-label text-nowrap">Testing Error Goal </label>
+                    <label for="testErrorGoalInput" class="form-label text-nowrap fw-bold">
+                        Testing Error Goal <span class="fw-light">(Training auto stops once reached)</span></label>
                     <input type="number" step="0.001" min="0" max="1" value="0.01" class="form-control"
                            id="testErrorGoalInput" oninput="testErrorGoal = Number(value)">
                 </div>
@@ -134,7 +137,7 @@ <h4 class="py-4">Train/Pause:</h4>
         <hr>
         <div class="container mb-4">
             <h4>Fixed Epochs:</h4>
-            <p class="fw-light">(it will keep training even past the error goals)</p>
+            <p class="fw-light">Keeps training even past the error goals</p>
             <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
                 <input type="radio" class="btn-check" name="epochsRadio" id="epochsRadio1"
                        autocomplete="off" value="1" checked>
@@ -167,11 +170,11 @@ <h4>Fixed Epochs:</h4>
         </script>
         <hr>
         <div class="container mb-4">
-            <h4 class="py-4">Options:</h4>
-            <div class="my-4 d-flex flex-column gap-2">
+            <h4>Options:</h4>
+            <div class="mt-4 d-flex flex-column gap-2">
                 <div class="form-check">
                     <input class="form-check-input" type="checkbox" id="useTestDataCheck" checked>
-                    <label class="form-check-label" for="useTestDataCheck">Use Testing Data</label>
+                    <label class="form-check-label" for="useTestDataCheck">Include Testing Data</label>
                 </div>
             </div>
             <div class="mt-4 d-flex">

diff --git a/web/content/setup/advanced.html b/web/content/setup/advanced.html
@@ -1,6 +1,6 @@
 <div class="row gy-4">
     <div class="col-sm-6">
-        <label for="activationFunctionInput" class="form-label">Activation Function</label>
+        <label for="activationFunctionInput" class="form-label fw-bold">Activation Function</label>
         <select class="form-select" id="activationFunctionInput"
                 onchange="network.setActivationFunction(value)">
             <option value="relu">ReLU</option>
@@ -9,19 +9,19 @@
         </select>
     </div>
     <div class="col-sm-6">
-        <label for="lossFunctionInput" class="form-label">Loss Function</label>
+        <label for="lossFunctionInput" class="form-label fw-bold">Loss Function</label>
         <select class="form-select" id="lossFunctionInput" onchange="network.setLossFunction(value)">
             <option value="sse">Sum Square Error</option>
             <option value="mse">Mean Square Error</option>
         </select>
     </div>
     <div class="col-sm-6">
-        <label for="outputFunctionInput" class="form-label">Output Function</label>
+        <label for="outputFunctionInput" class="form-label fw-bold">Output Function</label>
         <input id="outputFunctionInput" class="form-control" type="text" aria-label="Disabled input example"
                disabled readonly>
     </div>
     <div class="col-sm-6">
-        <label for="normalizationInput" class="form-label">Normalization</label>
+        <label for="normalizationInput" class="form-label fw-bold">Normalization</label>
         <select class="form-select" id="normalizationInput">
             <option value="minmax">Minmax [0, 1]</option>
         </select>

diff --git a/web/content/setup/structure.html b/web/content/setup/structure.html
@@ -1,17 +1,17 @@
 <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>
+            <label for="inputLayerHeight" class="form-label fw-bold">Input Layer Height</label>
             <input type="range" class="form-range" min="1" max="30" step="1" id="inputLayerHeight"
                    value="2" oninput="setInputHeight(Number(value))">
         </div>
         <div class="col">
-            <label for="hiddenLayersCount" class="form-label">Hidden Layers Count</label>
+            <label for="hiddenLayersCount" class="form-label fw-bold">Hidden Layers Count</label>
             <input type="range" class="form-range" min="0" max="10" step="1" id="hiddenLayersCount"
                    value="1" oninput="setHiddenLayersCount(Number(value))">
         </div>
         <div class="col">
-            <label for="outputLayerHeight" class="form-label">Output Layer Height</label>
+            <label for="outputLayerHeight" class="form-label fw-bold">Output Layer Height</label>
             <input type="range" class="form-range" min="1" max="30" step="1" id="outputLayerHeight"
                    value="2" oninput="setOutputHeight(Number(value))">
         </div>

diff --git a/web/layouts/shortcodes/accordion.html b/web/layouts/shortcodes/accordion.html
@@ -1,6 +1,6 @@
 {{ $accordionKey := .Get 0 }}
 {{ $accordionData := index .Page.Params.accordions $accordionKey }}
-<div id="accordion-{{ $accordionKey }}" class="accordion py-5">
+<div id="accordion-{{ $accordionKey }}" class="accordion py-3">
     {{ range $accordionData.items }}
     <div class="accordion-item">
         <h2 class="accordion-header">