V3.2 - Vector representation, fixed prettier pipeline, improved training page

[r59q]

Preview: https://ml-machine-484.r59q.com/

• Adds a LiveDataVector interface that live data values should implement. It exposes a getVector(): number[] function that is used for generalization

A view of the liveGraph with more than 3 axes

• Combines all stores in stores.ts into one Stores object. This allows for setting stores at a later point such as stores.setLiveData(...) useful for specifying LiveData store objects which now could be differently sized
• Improves the state of logging, adding a welcome message and stack trace to logging messages
  
  This message appears the first time vite refreshes and only the first time. You can disable stack traces by typing ds() in the console
  
• Added Dockerfile and a docker-compose file for easy deployment. This allows users to run docker-compose up to quickly setup a local version on port 5174, without having to worry about node versions, etc.
  • Additionally added an express server (public/main.cjs) for hosting the production builds
  • Hopefully this lowers the barrier to contribution and distribution of the project
• Removed LiveGraphHighlighted, as it has become redundant
• Loss-Graph is now linear instead of logarithmic
  
• Fixed prettier and formatted files
• CI pipline now uses npm ci instead of npm i
• Makes the makecode experience better by reducing the number of 'fluke' outdated messages
• Adds a filter list for quick overview of selected filters on training page
  
  Clicking on the parallelogram icon, redirects the user to the old filters page
• Splits up the training page into tabs, NN and KNN
  
  
• Binds a color to each gesture. These colors can then be used to draw data points in the graphs and give some consistency and rememberability to the gestures. The colors are assigned in StaticConfiguration
  
• LocalStorage now enforces version numbers. Meaning increasing ControlledStorage.localStorageVersion, marks old data as invalid and will automatically delete it from the user's localStorage. This is because we added the colors property, which old users will not have, causing NPE's whenever the gesture.getColor() method is called.
• Added lossGraph to features.json
• Makes K in KNN models configurable. The preffered value of k is stored in localStorage. Default is configured in StaticConfiguration
  
• Adds a check to ensure the minimum number of samples are present before predicting
• Reworks the confidences to make it easier to use
• Disabled the outdate version warning due to false positives
• Color-coding axis selector buttons
  
• KNN model graph will now zoom out by default whenever PEAKS or ACC filter is selected
• Adds Feature.MAKECODE to features

[Karlo-Emilo]

KNN

Scaling of axes: The ranges seem to be hardcoded, which causes issues with some of the filters. For example, if you choose 'Total acceleration, ' all the points are placed outside the visualized area.

Can we color the X, Y, and Z buttons in the same colors as the live graphs? These buttons:

NN

Does the NN train on data from all the axes or only the highlighted axis in the live graph? It is not clear.

Model page

It can be unclear which model is used for prediction. For example, if I train an NN model, click on the KNN page, and go to the Model page - does it then use the KNN or NN model? I have two suggestions for making this more clear:

1. We could introduce a 'build model' step on the KKN page to clarify which model is active. So, students choose filters and axes before clicking a 'build model' button, which starts the prediction and visualizes the model (if they have chosen two filters). I am not sure if 'number of neighbours' should be selected here or in live mode.

2. Use the model menu to describe the active model.

This area could describe the type of model, filters, axis, number of neighbors, and other hyperparameters.

The two suggestions can be used together.

[r59q]

KNN

Scaling of axes: The ranges seem to be hardcoded, which causes issues with some of the filters. For example, if you choose 'Total acceleration, ' all the points are placed outside the visualized area.

Can we color the X, Y, and Z buttons in the same colors as the live graphs? These buttons:

NN

Does the NN train on data from all the axes or only the highlighted axis in the live graph? It is not clear.

Model page

It can be unclear which model is used for prediction. For example, if I train an NN model, click on the KNN page, and go to the Model page - does it then use the KNN or NN model? I have two suggestions for making this more clear:

1. We could introduce a 'build model' step on the KKN page to clarify which model is active. So, students choose filters and axes before clicking a 'build model' button, which starts the prediction and visualizes the model (if they have chosen two filters). I am not sure if 'number of neighbours' should be selected here or in live mode.
2. Use the model menu to describe the active model.

This area could describe the type of model, filters, axis, number of neighbors, and other hyperparameters.

The two suggestions can be used together.

The scaling is indeed hardcoded, we could do this dynamically. Will solve this in #514.

I will make an issue to add the colors to the buttons #515

Highlighted axes on the NN page is a bug, it is fixed now. We don't support highlighted axes for neural network models.

I understand the confusion where the model being used can be ambiguous, but I think adding a 'train model' button to the knn page may be overcompensating, maybe, as you propose, the best solution would be to add a 'status' area, indicating the current state of the application. I.e if it is trained, what model is being used, etc.