Refactored code + Additional readme changes

.gitignore

@@ -1,4 +1,5 @@
 *.swp
 .DS_Store
 node_modules
+templates
 package-lock.json

README.md

@@ -1,6 +1,7 @@
-# Aiden. Your physio assistant.
+![Aiden](/assets/aiden.png)
 
-### Aiden is a web app utilising **_tensorflow.js_**, browser-based Machine Learning library, to enable accessible physiotherapy for the Visually Impaired and other people as well - talking through exercises by responding to users' postures in real-time.
+# Aiden - Your Physio assistant.
+#### Aiden is a web app utilising **_tensorflow.js_**, browser-based Machine Learning library, to enable accessible physiotherapy for the Visually Impaired and other people as well - talking through exercises by responding to users' postures in real-time.
 
 Aiden makes it easier for users to not only complete but to improve their techniques independently.
 
@@ -15,8 +16,10 @@ Aiden makes it easier for users to not only complete but to improve their techni
 ### Machine Learning - tensorflow.js
 
 Aiden uses a [tensorflow.js](https://www.tensorflow.org/js)  (browser-based) model to make predictions on the state of the current user's pose. It has been trained on a dataset of images created by us (~300 images per pose) to predict whether the position is correct, or incorrect - and what makes it so.
+
 We have used Azure Machine Learning Studio, an Azure Machine Learning tool, to train our models in the various physiotherapy poses.
 Azure Cognitive Services Speech-to-Text API was also used to enable the application to be accessible by the visually impaired. The user can start their exercises via speech in various languages using Azure Translator Speech API remotely and this is more convenient and easier to use for our target audience.
+
 The application utilizes Azure Cognitive Services for text-to-speech. This is useful for the visually impaired as they can hear if they are in the right position as the application will tell them to adjust their posture if incorrect.
 
 ### Index.html

client/css/style.css

@@ -88,11 +88,21 @@ canvas{
 #particles-js{
   width: 100%;
   height: 100%;
-  background-color: #11231f;
+  background-color: #3d949b;
   background-image: url('');
   background-size: cover;
   background-position: 50% 50%;
   background-repeat: no-repeat;
 }
 
-/* ---- reset ---- */ body{ margin:0; font:normal 75% Arial, Helvetica, sans-serif; } canvas{ display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ #particles-js{ position:absolute; width: 100%; height: 100%; background-color: #273e3a; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } /* ---- stats.js ---- */ .count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles{ border-radius: 0 0 3px 3px; }
+/* ---- reset ---- */ 
+/* body{ margin:0; font:normal 75% Arial, Helvetica, sans-serif; } 
+canvas{ display: block; vertical-align: bottom; }  */
+/* ---- particles.js container ---- */ 
+/* #particles-js{ position:absolute; width: 100%; height: 100%; background-color: #273e3a; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; }  */
+/* ---- stats.js ---- */ 
+/* .count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; }  */
+/* .js-count-particles{ font-size: 1.1em; } 
+#stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } 
+#stats{ border-radius: 3px 3px 0 0; overflow: hidden; } 
+.count-particles{ border-radius: 0 0 3px 3px; } */

client/live_stream.html

@@ -197,7 +197,7 @@
       web.addMessage("Hello, my name is AIDEN. I'll be your physio assistant.");
       web.processMessages();
     </script>
-    <script src="./index.js"></script>
+    <script src="js/index.js"></script>
 
     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
     <script

client/view2.html

@@ -12,15 +12,15 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
-    <link rel="stylesheet" media="screen" href="../client/css/style.css" />
+    <link rel="stylesheet" media="screen" href="css/style.css" />
   </head>
   <body>
     <!-- particles.js container -->
     <div id="particles-js"></div>
     <!-- stats - count particles -->
     <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
     <!-- stats.js lib -->
-    <script src="app.js"></script>
+    <script src="js/app.js"></script>
 
     <script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
     <!-- stats.js -->