feat: Explain decision tree classifiers

Or try to, at least.

Contributes to: #220

Signed-off-by: Dale Lane <dale.lane@uk.ibm.com>

public/components/describemodel/describemodel.css

@@ -7,6 +7,10 @@
     font-size: 1.1em;
 }
 
+.describemlmodel .decisiontreeexplanation a {
+    font-weight: bold;
+}
+
 .describemlmodel .visualisationpage {
     display: flex;
     flex-direction: row;
@@ -39,4 +43,10 @@
     margin-right: auto;
 }
 
-
+.describemlmodel .describeintro img {
+    float: right;
+    margin: 8px;
+    width: 35%;
+    max-width: 500px;
+    min-width: 300px;
+}

public/components/describemodel/describemodel.html

@@ -11,18 +11,18 @@
 </div>
 <div ng-if="isAuthenticated && projectId" class="describemlmodel">
     <div class="jumbotron">
-        <h2 class="text-center">Understand your machine learning model <sup>(beta)</sup></h2>
+        <h2 class="text-center" translate="DESCRIBEMODEL.TITLE"></h2>
     </div>
     <div class="backbutton">
-        <a ui-sref="mlproject_models({ projectId : projectId, userId : userId })">&lt; Back to your model</a>
+        <a ui-sref="mlproject_models({ projectId : projectId, userId : userId })" translate="APP.BACKTOMODEL"></a>
     </div>
 
     <div ng-repeat="error in vm.errors"
          class="alert alert-danger alert-dismissible pageheadermsg" role="alert"
          ng-click="vm.dismissAlert('errors', $index)"
          id="errors{{error.alertid}}">
         <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <strong>Sorry! This is a new page and I still have some bits left to fix...</strong> it doesn't work well with larger models.<br/><br/>
+        <strong>Sorry! This is a new page and I still have some bits left to fix...</strong><br/><br/>
         <strong translate="APP.ERROR"></strong> {{ error.message }}<br/>
         <em ng-if="error.status >= 500"><span translate="ERRORS.IFPERSISTENT"></span> <a ui-sref="help" translate="ERRORS.LETMEKNOW"></a></em>
     </div>
@@ -32,12 +32,13 @@ <h2 class="text-center">Understand your machine learning model <sup>(beta)</sup>
     </div>
 
     <div class="describeintro">
-        <div class="decisiontreeexplanation">The technique used to create your machine learning model is called a <strong>Decision Tree Classifier</strong>.</div>
-        <div class="decisiontreeexplanation">This is not the only way to train a machine learning model. We're using it because it's very quick and easy to train, and it is one of the easiest to understand. This page shows you the decision tree that was created based on the training examples that you have collected. </div>
-        <div class="decisiontreeexplanation">When you test your model, the computer starts at the top of the tree, and follows a route until it reaches the bottom. The class at the bottom of the tree is the prediction that the machine learning model makes.</div>
-        <div class="decisiontreeexplanation">At each box in the tree, it reads the test described at the top of the box. If your test values pass the test described in the box, it follows the arrow to the left. If it doesn't pass the test, it follows the arrow to the right. </div>
-        <div class="decisiontreeexplanation">The <strong>samples</strong> shown in each box tells you how many examples in your training data matches that part of the decision tree.</div>
-        <div class="decisiontreeexplanation">The <strong>value</strong> shown in each box tells you how many examples in your training data passed the test shown at the top (following the left arrow) and how many examples didn't pass the test at the top (following the right arrow).</div>
+        <img src="static/images/decisiontree.png">
+        <div class="decisiontreeexplanation" translate="DESCRIBEMODEL.EXPLANATION.EXPL_1"></div>
+        <div class="decisiontreeexplanation" translate="DESCRIBEMODEL.EXPLANATION.EXPL_2"></div>
+        <div class="decisiontreeexplanation" translate="DESCRIBEMODEL.EXPLANATION.EXPL_3"></div>
+        <div class="decisiontreeexplanation" translate="DESCRIBEMODEL.EXPLANATION.EXPL_4"></div>
+        <div class="decisiontreeexplanation" translate="DESCRIBEMODEL.EXPLANATION.EXPL_5"></div>
+        <div class="decisiontreeexplanation" translate="DESCRIBEMODEL.EXPLANATION.EXPL_6"></div>
     </div>
 
     <div ng-if="loading" class="loading"> </div>
@@ -58,10 +59,7 @@ <h2 class="text-center">Understand your machine learning model <sup>(beta)</sup>
                     <div class="btn btn-default glyphicon glyphicon-arrow-right" ng-mousedown="vm.goright()" ng-mouseup="vm.stop()" ng-mouseleave="vm.stop()"></div>
                 </div>
 
-                <div style="margin-top: 40px; margin-bottom: 5px;">
-                    Try out your machine learning model to see how it uses the decision tree
-                    to predict a label.
-                </div>
+                <div style="margin-top: 40px; margin-bottom: 5px;" translate="DESCRIBEMODEL.TRYITOUT"></div>
 
                 <form ng-if="project.fields" name="treetestform" ng-submit="vm.highlight(testformData)">
                     <table style="font-size: 0.9em; margin-bottom: 5px;">
@@ -83,14 +81,12 @@ <h2 class="text-center">Understand your machine learning model <sup>(beta)</sup>
                             </td>
                         </tr>
                     </table>
-                    <input type="submit" class="btn btn-primary" value="Test" ng-disabled="treetestform.$invalid" style="margin: 5px;">
-                    <div class="btn btn-default" style="margin: 5px;" ng-click="vm.resetTree()">Reset</div>
+                    <input type="submit" class="btn btn-primary" value="{{ 'APP.TEST' | translate }}" ng-disabled="treetestform.$invalid" style="margin: 5px;">
+                    <div class="btn btn-default" style="margin: 5px;" ng-click="vm.resetTree()" translate="APP.RESET"></div>
                 </form>
             </div>
         </div>
     </div>
-    <div ng-if="!loading && project.type!=='numbers'">
-        Only numbers ML models can be described.
-    </div>
+    <div ng-if="!loading && project.type!=='numbers'" translate="DESCRIBEMODEL.ERRORS.NUMBERSONLY"></div>
 </div>
 

public/components/models/models.html

@@ -383,7 +383,7 @@ <h2 class="text-center" translate="MODELS.TITLE"></h2>
                     </td>
                 </tr>
             </table>
-            <input ng-if="project.type === 'text' || project.type === 'numbers'" type="submit" class="btn btn-primary" value="Test" ng-disabled="testform.$invalid" style="margin-left: 1em;" >
+            <input ng-if="project.type === 'text' || project.type === 'numbers'" type="submit" class="btn btn-primary" value="{{ 'APP.TEST' | translate }}" ng-disabled="testform.$invalid" style="margin-left: 1em;" >
             <div class="btn btn-default" style="margin-left: 50px;" ui-sref="mlproject_model_describe({ projectId : projectId, userId : userId, modelId : projectId })">Describe your model! <span class="badge">beta</span></div>
             <div ng-if="project.type === 'sounds'" style="margin: 1em">
                 <button ng-disabled="listening"  ng-click="vm.startListening()" class="btn btn-primary" translate="MODELS.TESTING.STARTLISTENING"></button>

public/languages/de.json

@@ -4,6 +4,7 @@
 
         "BACK": "Zurück",
         "BACKTOPROJECT": "< Zurück zum Projekt",
+        "BACKTOMODEL": "< Back to model",
         "ERROR": "Fehler:",
         "WARNING": "Warnung:",
         "INFO": "Info:",
@@ -13,6 +14,7 @@
         "DELETE": "Löschen",
         "EDIT": "Bearbeiten",
         "TEST": "Testen",
+        "RESET": "Reset",
 
         "ABOUT": "Über",
         "TEACHER": "Lehrer",
@@ -532,6 +534,21 @@
             "NEXT_QUESTION": "Nächste Frage"
         }
     },
+    "DESCRIBEMODEL": {
+        "TITLE": "Understand your machine learning model",
+        "TRYITOUT": "Try out your machine learning model to see how it uses the decision tree to make predictions",
+        "EXPLANATION": {
+            "EXPL_1": "The technique used to create your machine learning model is called a <a target='_blank' href='https://wikipedia.org/wiki/Decision_tree_learning'>Decision Tree Classifier</a>.",
+            "EXPL_2": "This is not the only way to train a machine learning model. We're using it because it's very quick and easy to train, and it is one of the easiest techniques to understand. This page shows you the decision tree that was created based on the training examples that you have collected.",
+            "EXPL_3": "When you test your model, the computer starts at the top of the tree, and follows a path until it reaches the bottom. The <strong>class</strong> at the bottom of the tree is the prediction that the machine learning model makes.",
+            "EXPL_4": "At each box in the tree, it reads the test described at the top of the box. If your test values pass the test described in the box, it follows the arrow to the left. If it doesn't pass the test, it follows the arrow to the right.",
+            "EXPL_5": "The <strong>samples</strong> shown in each box tells you how many examples in your training data matches that part of the decision tree.",
+            "EXPL_6": "The <strong>value</strong> shown in each box tells you how many examples in your training data passed the test shown at the top (following the left arrow) and how many examples didn't pass the test at the top (following the right arrow)."
+        },
+        "ERRORS": {
+            "NUMBERSONLY": "Only machine learning models for numbers projects can be described"
+        }
+    },
     "MAKES": {
         "TITLE": "Nutze dein Machine Learning Model",
         "SCRATCH2": "Erstelle ein Projekt in der alten Scratch Version",

public/languages/en.json

@@ -4,6 +4,7 @@
 
         "BACK": "Back",
         "BACKTOPROJECT": "< Back to project",
+        "BACKTOMODEL": "< Back to model",
         "ERROR": "Error:",
         "WARNING": "Warning:",
         "INFO": "Info:",
@@ -13,6 +14,7 @@
         "DELETE": "Delete",
         "EDIT": "Edit",
         "TEST": "Test",
+        "RESET": "Reset",
 
         "ABOUT": "About",
         "TEACHER": "Teacher",
@@ -532,6 +534,21 @@
             "NEXT_QUESTION": "Next question"
         }
     },
+    "DESCRIBEMODEL": {
+        "TITLE": "Understand your machine learning model",
+        "TRYITOUT": "Try out your machine learning model to see how it uses the decision tree to make predictions",
+        "EXPLANATION": {
+            "EXPL_1": "The technique used to create your machine learning model is called a <a target='_blank' href='https://wikipedia.org/wiki/Decision_tree_learning'>Decision Tree Classifier</a>.",
+            "EXPL_2": "This is not the only way to train a machine learning model. We're using it because it's very quick and easy to train, and it is one of the easiest techniques to understand. This page shows you the decision tree that was created based on the training examples that you have collected.",
+            "EXPL_3": "When you test your model, the computer starts at the top of the tree, and follows a path until it reaches the bottom. The <strong>class</strong> at the bottom of the tree is the prediction that the machine learning model makes.",
+            "EXPL_4": "At each box in the tree, it reads the test described at the top of the box. If your test values pass the test described in the box, it follows the arrow to the left. If it doesn't pass the test, it follows the arrow to the right.",
+            "EXPL_5": "The <strong>samples</strong> shown in each box tells you how many examples in your training data matches that part of the decision tree.",
+            "EXPL_6": "The <strong>value</strong> shown in each box tells you how many examples in your training data passed the test shown at the top (following the left arrow) and how many examples didn't pass the test at the top (following the right arrow)."
+        },
+        "ERRORS": {
+            "NUMBERSONLY": "Only machine learning models for numbers projects can be described"
+        }
+    },
     "MAKES": {
         "TITLE": "Make something with your machine learning model",
         "SCRATCH2": "Make a project in the old version of Scratch",

public/languages/es.json

@@ -4,6 +4,7 @@
 
 		"BACK": "Volver",
 		"BACKTOPROJECT": "< Volver al proyecto",
+        "BACKTOMODEL": "< Back to model",
 		"ERROR": "Error:",
 		"WARNING": "Advertencia:",
 		"INFO": "Info:",
@@ -13,6 +14,7 @@
 		"DELETE": "Borrar",
 		"EDIT": "Editar",
 		"TEST": "Probar",
+        "RESET": "Reset",
 
 		"ABOUT": "Acerca de",
 		"TEACHER": "Profesor",
@@ -532,6 +534,21 @@
 			"NEXT_QUESTION": "Next question"
 		}
 	},
+    "DESCRIBEMODEL": {
+        "TITLE": "Understand your machine learning model",
+        "TRYITOUT": "Try out your machine learning model to see how it uses the decision tree to make predictions",
+        "EXPLANATION": {
+            "EXPL_1": "The technique used to create your machine learning model is called a <a target='_blank' href='https://wikipedia.org/wiki/Decision_tree_learning'>Decision Tree Classifier</a>.",
+            "EXPL_2": "This is not the only way to train a machine learning model. We're using it because it's very quick and easy to train, and it is one of the easiest techniques to understand. This page shows you the decision tree that was created based on the training examples that you have collected.",
+            "EXPL_3": "When you test your model, the computer starts at the top of the tree, and follows a path until it reaches the bottom. The <strong>class</strong> at the bottom of the tree is the prediction that the machine learning model makes.",
+            "EXPL_4": "At each box in the tree, it reads the test described at the top of the box. If your test values pass the test described in the box, it follows the arrow to the left. If it doesn't pass the test, it follows the arrow to the right.",
+            "EXPL_5": "The <strong>samples</strong> shown in each box tells you how many examples in your training data matches that part of the decision tree.",
+            "EXPL_6": "The <strong>value</strong> shown in each box tells you how many examples in your training data passed the test shown at the top (following the left arrow) and how many examples didn't pass the test at the top (following the right arrow)."
+        },
+        "ERRORS": {
+            "NUMBERSONLY": "Only machine learning models for numbers projects can be described"
+        }
+	},
 	"MAKES": {
 		"TITLE": "Usa tu modelo de aprendizaje automático para crear algo",
 		"SCRATCH2": "Crea un Proyecto con la version antigua de Scratch",

public/languages/fr.json

@@ -4,6 +4,7 @@
 
         "BACK": "Retour",
         "BACKTOPROJECT": "< Revenir au projet",
+        "BACKTOMODEL": "< Back to model",
         "ERROR": "Erreur :",
         "WARNING": "Attention :",
         "INFO": "Information :",
@@ -13,6 +14,7 @@
         "DELETE": "Effacer",
         "EDIT": "Editer",
         "TEST": "Tester",
+        "RESET": "Reset",
 
         "ABOUT": "A propos",
         "TEACHER": "Enseignants",
@@ -532,6 +534,21 @@
             "NEXT_QUESTION": "Question suivante"
         }
     },
+    "DESCRIBEMODEL": {
+        "TITLE": "Understand your machine learning model",
+        "TRYITOUT": "Try out your machine learning model to see how it uses the decision tree to make predictions",
+        "EXPLANATION": {
+            "EXPL_1": "The technique used to create your machine learning model is called a <a target='_blank' href='https://wikipedia.org/wiki/Decision_tree_learning'>Decision Tree Classifier</a>.",
+            "EXPL_2": "This is not the only way to train a machine learning model. We're using it because it's very quick and easy to train, and it is one of the easiest techniques to understand. This page shows you the decision tree that was created based on the training examples that you have collected.",
+            "EXPL_3": "When you test your model, the computer starts at the top of the tree, and follows a path until it reaches the bottom. The <strong>class</strong> at the bottom of the tree is the prediction that the machine learning model makes.",
+            "EXPL_4": "At each box in the tree, it reads the test described at the top of the box. If your test values pass the test described in the box, it follows the arrow to the left. If it doesn't pass the test, it follows the arrow to the right.",
+            "EXPL_5": "The <strong>samples</strong> shown in each box tells you how many examples in your training data matches that part of the decision tree.",
+            "EXPL_6": "The <strong>value</strong> shown in each box tells you how many examples in your training data passed the test shown at the top (following the left arrow) and how many examples didn't pass the test at the top (following the right arrow)."
+        },
+        "ERRORS": {
+            "NUMBERSONLY": "Only machine learning models for numbers projects can be described"
+        }
+    },
     "MAKES": {
         "TITLE": "Faites quelque chose avec votre modèle d'apprentissage machine",
         "SCRATCH2": "Créer un projet dans l'ancienne version de Scratch",

public/languages/ja.json

@@ -4,6 +4,7 @@
 
         "BACK": "戻る",
         "BACKTOPROJECT": "< プロジェクトに戻る",
+        "BACKTOMODEL": "< Back to model",
         "ERROR": "エラー:",
         "WARNING": "注意:",
         "INFO": "情報:",
@@ -13,6 +14,7 @@
         "DELETE": "Delete",
         "EDIT": "Edit",
         "TEST": "Test",
+        "RESET": "Reset",
 
         "ABOUT": "本サイトについて",
         "TEACHER": "先生",
@@ -532,6 +534,21 @@
             "NEXT_QUESTION": "次の質問"
         }
     },
+    "DESCRIBEMODEL": {
+        "TITLE": "Understand your machine learning model",
+        "TRYITOUT": "Try out your machine learning model to see how it uses the decision tree to make predictions",
+        "EXPLANATION": {
+            "EXPL_1": "The technique used to create your machine learning model is called a <a target='_blank' href='https://wikipedia.org/wiki/Decision_tree_learning'>Decision Tree Classifier</a>.",
+            "EXPL_2": "This is not the only way to train a machine learning model. We're using it because it's very quick and easy to train, and it is one of the easiest techniques to understand. This page shows you the decision tree that was created based on the training examples that you have collected.",
+            "EXPL_3": "When you test your model, the computer starts at the top of the tree, and follows a path until it reaches the bottom. The <strong>class</strong> at the bottom of the tree is the prediction that the machine learning model makes.",
+            "EXPL_4": "At each box in the tree, it reads the test described at the top of the box. If your test values pass the test described in the box, it follows the arrow to the left. If it doesn't pass the test, it follows the arrow to the right.",
+            "EXPL_5": "The <strong>samples</strong> shown in each box tells you how many examples in your training data matches that part of the decision tree.",
+            "EXPL_6": "The <strong>value</strong> shown in each box tells you how many examples in your training data passed the test shown at the top (following the left arrow) and how many examples didn't pass the test at the top (following the right arrow)."
+        },
+        "ERRORS": {
+            "NUMBERSONLY": "Only machine learning models for numbers projects can be described"
+        }
+    },
     "MAKES": {
         "TITLE": "あなたの機械学習モデルを使って何か作ってみましょう。",
         "SCRATCH2": "Scratch（Version 2)を使ってプロジェクトを作成する。",