Merge pull request #59 from microbit-foundation/update-model-page

Update model page

src/components/StandardButton.svelte

@@ -26,11 +26,14 @@
   }
 </style>
 
+<script lang="ts" context="module">
+  export type ButtonVariant = 'secondary' | 'primary' | 'warning' | 'info' | 'infolight';
+</script>
+
 <script lang="ts">
   import TypingUtils from '../script/TypingUtils.js';
 
   type ButtonSize = 'small' | 'normal' | 'large';
-  type ButtonVariant = 'secondary' | 'primary' | 'warning' | 'info' | 'infolight';
 
   export let type: ButtonVariant = 'secondary';
   export let onClick: (e: Event) => void = TypingUtils.emptyFunction;

src/components/TrainModelFirstTitle.svelte

@@ -1,17 +1,32 @@
 <!--
   (c) 2023, Center for Computational Thinking and Design at Aarhus University and contributors
- 
+
   SPDX-License-Identifier: MIT
  -->
 
 <script lang="ts">
   import { t } from '../i18n';
+  import testModelImage from '../imgs/TestModel.svg';
+  import StandardButton from './StandardButton.svelte';
+  import TrainingButton from '../pages/training/TrainingButton.svelte';
+  import { Paths, navigate } from '../router/paths';
 </script>
 
-<div class="flex flex-col flex-grow justify-center">
-  <p class="text-primarytext text-center text-3xl bold">
+<div class="flex flex-col items-center">
+  <img src={testModelImage} width="300" class="mb-10" />
+  <h2 class="text-xl font-bold mb-3">
     {$t('content.model.trainModelFirstHeading')}
-    <br />
-    {$t('content.model.trainModelFirstBody')}
+  </h2>
+  <p class="mb-5 font-light">
+    {$t('content.model.trainModelBody1')}
+  </p>
+  <p class="mb-10 font-light">
+    {$t('content.model.trainModelBody2')}
   </p>
+  <div class="flex gap-20">
+    <StandardButton onClick={() => navigate(Paths.DATA)}>
+      {$t('content.model.addData')}
+    </StandardButton>
+    <TrainingButton type="secondary" action="navigate" />
+  </div>
 </div>

src/messages/ui.da.json

@@ -71,8 +71,9 @@
   "content.filters.rms.title": "Effektiv værdi ",
   "content.filters.rms.description": "Root mean square.",
 
-  "content.model.trainModelFirstHeading": "Træn modellen først!",
-  "content.model.trainModelFirstBody": "Gå til 'Træner'-siden",
+  "content.model.trainModelFirstHeading": "TRANSLATION_NEEDED",
+  "content.model.trainModelBody1": "TRANSLATION_NEEDED",
+  "content.model.trainModelBody2": "TRANSLATION_NEEDED",
   "content.model.classification.helpHeading": "Sandsynligheds-meteret",
   "content.model.classification.helpBody": "For hver forudsigelse, vil modellen producere et procent-tal, der beskriver hvor sikker modellen er i sin fordusigelse. Dette meter går fra 0% til 100%. Med slideren ved siden af, kan du bestemme grænsen for, hvor sikker modellen skal være i sin forudsigelse for at lave et output (fx afspille en lyd)",
   "content.model.output.soundOptionCongratulations": "Tillykke",
@@ -104,6 +105,8 @@
   "content.model.output.popup.header": "Tilslut output-micro:bit",
   "content.model.output.popup.body": "Hvis du ikke har tilsluttet en output-micro:bit, kan du ikke se resultatet af de ændringer du laver på denne side. Tilslut nedenfor.",
 
+  "content.model.addData": "TRANSLATION_NEEDED",
+
   "footer.connectButtonNotConnected": "TRANSLATION_NEEDED",
   "footer.disconnectButton": "Frakobl",
   "footer.helpHeader": "Live graf",

src/messages/ui.en.json

@@ -71,8 +71,9 @@
   "content.filters.rms.title": "Root mean square",
   "content.filters.rms.description": "",
 
-  "content.model.trainModelFirstHeading": "Train the model first!",
-  "content.model.trainModelFirstBody": "Go to the 'Trainer' page",
+  "content.model.trainModelFirstHeading": "Test model",
+  "content.model.trainModelBody1": "You cannot test the model until it has been trained.",
+  "content.model.trainModelBody2": "You need at least 3 data samples for 2 actions to train a model.",
   "content.model.classification.helpHeading": "Probabil-ometer",
   "content.model.classification.helpBody": "For each prediction you make, the model will produce a percentage that describes how confident the model is in its prediction. This meter goes from 0% to 100%. With the slider next to it, you can determine the limit of how certain the model should be in its preduction to make an output (e.g. play a sound)",
   "content.model.output.soundOptionCongratulations": "Congratulations",
@@ -104,6 +105,8 @@
   "content.model.output.popup.header": "Connect output micro:bit",
   "content.model.output.popup.body": "If you have not connected an output micro:bit, you cannot see the results of the changed made on this page. Use the connect button below",
 
+  "content.model.addData": "Add data",
+
   "footer.connectButtonNotConnected": "Start",
   "footer.disconnectButton": "Disconnect",
   "footer.helpHeader": "Live graph",

src/pages/DataPage.svelte

@@ -123,6 +123,6 @@
 
       <NewGestureButton />
     </div>
-    <TrainingButton type="navigate" />
+    <TrainingButton action="navigate" />
   {/if}
 </main>

src/pages/model/stackview/ModelPageStackView.svelte

@@ -1,6 +1,6 @@
 <!--
   (c) 2023, Center for Computational Thinking and Design at Aarhus University and contributors
- 
+
   SPDX-License-Identifier: MIT
  -->
 
@@ -91,11 +91,7 @@
 <!-- Main pane -->
 <main class="h-full flex flex-col">
   {#if $state.isPredicting}
-    {#if $state.isInputReady}
-      <ModelPageStackViewContent />
-    {:else}
-      <PleaseConnectFirst />
-    {/if}
+    <ModelPageStackViewContent />
   {:else}
     <TrainModelFirstTitle />
   {/if}

src/pages/training/TrainingButton.svelte

@@ -6,13 +6,14 @@
 
 <script lang="ts">
   import { hasSufficientData, state } from '../../script/stores/uiStore';
-  import StandardButton from '../../components/StandardButton.svelte';
+  import StandardButton, { ButtonVariant } from '../../components/StandardButton.svelte';
   import { trainModel } from '../../script/ml';
   import { t } from '../../i18n';
   import { Paths, navigate } from '../../router/paths';
   import { gestures } from '../../script/stores/Stores';
 
-  export let type: 'navigate' | 'train' = 'train';
+  export let type: ButtonVariant = 'primary';
+  export let action: 'navigate' | 'train' = 'train';
 
   $: trainButtonLabel = !$state.isPredicting
     ? 'menu.trainer.trainModelButton'
@@ -40,8 +41,8 @@
 </script>
 
 <StandardButton
-  onClick={type === 'navigate' ? navitgateToTrainingPage : startTraining}
+  onClick={action === 'navigate' ? navitgateToTrainingPage : startTraining}
   disabled={trainingButtonDisabled}
-  type="primary"
+  {type}
   >{$t(trainButtonLabel)}
 </StandardButton>