Fixes #1063 Help/user guide display in workbench landing page and broken links in the guide

apps/dev-workbench/readme.md

@@ -10,7 +10,7 @@ There are 3 steps involved in creating a model:
 ## 1. Creating/selecting dataset
 Since we're working with tensorflow.js, a preferred type of datasets are `spritesheets` (like MNIST [sprite](https://storage.googleapis.com/learnjs-data/model-builder/mnist_images.png) in [this](https://codelabs.developers.google.com/codelabs/tfjs-training-classfication/index.html#2) example). 
 
-![Step-1](https://i.ibb.co/C5VJY8t/Deepin-Screenshot-select-area-20200810034956.png)
+![Step-1](./images/Deepin-Screenshot-select-area-20200810034956.png)
 
 The workbench accepts only a *zip file* as dataset input which **must contain** three files: ***spritesheet*** (data.jpg), a ***binary labels*** (labels.bin) and the ***classes*** (labelnames.csv) with the filenames as specified. 
 If user has the above specified format of dataset than it can be browsed directly and they can skip to Step 2 - Customising/training the model.
@@ -43,7 +43,7 @@ Some features are:
 ### Complete Layer Customisation
 User can add/remove/modify the CNN layers accordingly to get the desired output. 
 
-![layer customisation](https://i.ibb.co/XYZBG1B/out-1.gif)
+![layer customisation](./images/out-1.gif)
 
 [model.compile()](https://js.tensorflow.org/api/latest/#tf.LayersModel.compile) and [model.fit()](https://js.tensorflow.org/api/latest/#tf.LayersModel.fit) functions and their parameters can also be modified accordingly by the user.
 
@@ -52,7 +52,7 @@ User can add/remove/modify the CNN layers accordingly to get the desired output.
 - Export can be done just after step-1 (dataset selection) or anytime during layers customisation.
 - A zip file will be exported which can be imported anytime by using the import option.
 
-![options](https://i.ibb.co/5F7x8CY/Deepin-Screenshot-select-area-20200810043400.png)
+![options](./images/Deepin-Screenshot-select-area-20200810043400.png)
 
 ### Basic/advanced Mode
 The user can toggle the **_advanced mode_** from the options. This mode is targeted towards more advanced users who might want to customize their models in more detailed fashion.
@@ -68,7 +68,7 @@ Though server-side training does not work with visualization using  [tfjs-vis](h
 ### Training visualisation
 After the user clicks on ‘train’ the training process will start and visualization will be shown using [TFjs-vis](https://github.com/tensorflow/tfjs/tree/master/tfjs-vis). (Only in browser-training mode)
 
-![training visualisation](https://i.ibb.co/NLZrGKX/1-X4y-Q8xws-KRS1f-GFc-J3-C3-A.png)
+![training visualisation](./images/1-X4y-Q8xws-KRS1f-GFc-J3-C3-A.png)
 
 ### Parameters and valid values
 | Name | Value |

apps/dev-workbench/workbench.html

@@ -71,6 +71,7 @@
         <i data-feather="arrow-left" class="text-white"></i>
       </div>
 
+
       <!-- Navbar brand --> 
 
       <div class="navbar-brand-div flex-grow-1">
@@ -79,6 +80,45 @@
       </div>
       <div>
 
+      <!-- Help/User-Guide Modal -->
+        <div
+        class="modal fade"
+        id="helpModal"
+        tabindex="-1"
+        role="dialog"
+        aria-hidden="true"
+      >
+        <div
+          class="modal-dialog modal-top modal-full-height modal-dialog-scrollable"
+          role="document"
+        >
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title" id="helpModalTitle">Help - User Guide</h5>
+              <button
+                type="button"
+                class="close"
+                data-dismiss="modal"
+                aria-label="Close"
+              >
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+            <div class="modal-body" style="align-content: center;"></div>
+            <div class="modal-footer">
+              <button
+                type="button"
+                class="btn btn-secondary px-3"
+                data-dismiss="modal"
+                style="border-radius: 5px; font-size: 1em; padding: 0.65em;"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
 
       <ul class="navbar-nav mr-auto px-2">
 
@@ -119,7 +159,7 @@
               onClick="displayUserGuide()"
             >
               <i class="fas fa-question-circle"></i>
-              &nbsp;&nbsp;Help/User Guide</a
+             &nbsp;&nbsp;Help/User Guide</a
             >
             </div>
 
@@ -258,7 +298,7 @@ <h4 class="card-title">Select your dataset</h4>
                    style="overflow: hidden;"
                    class="custom-file-label spriteInputLabel"
                    for="spriteInput"
-                   > Choose file
+                   >
                  </label>
                </div>
              </div>
@@ -346,7 +386,6 @@ <h5 class="modal-title" id="labelSelectModalTitle"></h5>
                       for="labelsInput"
                       style="overflow: hidden;"
                     >
-                      Choose
                     </label>
                   </div>
                 </div>
@@ -442,45 +481,6 @@ <h5 class="modal-title" id="labelSelectModalTitle"></h5>
       </div>
     </div>
 
-    <!-- Help/User-Guide Modal -->
-    <div
-      class="modal fade"
-      id="helpModal"
-      tabindex="-1"
-      role="dialog"
-      aria-hidden="true"
-    >
-      <div
-        class="modal-dialog modal-top modal-full-height modal-dialog-scrollable"
-        role="document"
-      >
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title" id="helpModalTitle">Help - User Guide</h5>
-            <button
-              type="button"
-              class="close"
-              data-dismiss="modal"
-              aria-label="Close"
-            >
-              <span aria-hidden="true">&times;</span>
-            </button>
-          </div>
-          <div class="modal-body" style="align-content: center;"></div>
-          <div class="modal-footer">
-            <button
-              type="button"
-              class="btn btn-secondary px-3"
-              data-dismiss="modal"
-              style="border-radius: 5px; font-size: 1em; padding: 0.65em;"
-            >
-              Close
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-
     <!-- Toast Alert -->
     <div
       id="toastPlaceholder"