[AiLab] Model Manager Dialog and autogenerated design elements and code

apps/src/MLTrainers.js

@@ -1,4 +1,4 @@
-const KNN = require('ml-knn');
+import KNN from 'ml-knn';
 
 const KNNTrainers = ['knnClassify', 'knnRegress'];
 
@@ -31,18 +31,20 @@ modelData = {
 }
 
   value in testData is the converted algorithm-ready number, not the string
+
+  TODO: convert string data in testValues using the featureNumberKey
 */
 export function predict(modelData) {
   // Determine which algorithm to use.
   if (KNNTrainers.includes(modelData.selectedTrainer)) {
     // Re-instantiate the trained model.
     const model = KNN.load(modelData.trainedModel);
     // Prepare test data.
-    const testValues = modelData.selectedFeatures.map(
-      feature => modelData.testData[feature]
+    const testValues = modelData.selectedFeatures.map(feature =>
+      parseInt(modelData.testData[feature])
     );
     // Make a prediction.
-    const rawPrediction = model.predict(testValues)[0];
+    const rawPrediction = model.predict(testValues);
     // Convert prediction to human readable (if needed)
     const prediction = Object.keys(modelData.featureNumberKey).includes(
       modelData.labelColumn

apps/src/applab/api.js

@@ -534,3 +534,11 @@ export function drawChartFromRecords(
     callback: callback
   });
 }
+
+export function getPrediction(model, testValues, callback) {
+  return Applab.executeCmd(null, 'getPrediction', {
+    model,
+    testValues,
+    callback
+  });
+}

apps/src/applab/applab.js

@@ -262,6 +262,64 @@ function renderFooterInSharedGame() {
   );
 }
 
+Applab.autogenerateML = function(modelId) {
+  $.ajax({
+    url: `/api/v1/ml_models/${modelId}`,
+    method: 'GET'
+  }).then(modelData => {
+    var x = 20;
+    var y = 20;
+    designMode.onInsertEvent(`var testValues = {};`);
+    modelData.selectedFeatures.forEach(feature => {
+      y = y + 20;
+      var label = designMode.createElement('LABEL', x, y);
+      label.textContent = feature + ':';
+      label.id = 'design_' + feature + '_label';
+      label.style.width = '300px';
+      y = y + 20;
+      if (Object.keys(modelData.featureNumberKey).includes(feature)) {
+        var selectId = feature + '_dropdown';
+        var select = designMode.createElement('DROPDOWN', x, y);
+        select.id = 'design_' + selectId;
+        // App Lab automatically addss "option 1" and "option 2", remove them.
+        select.options.remove(0);
+        select.options.remove(0);
+        Object.keys(modelData.featureNumberKey[feature]).forEach(option => {
+          var optionElement = document.createElement('option');
+          optionElement.text = option;
+          select.options.add(optionElement);
+        });
+      } else {
+        var input = designMode.createElement('TEXT_INPUT');
+        input.id = 'design_' + feature + '_input';
+      }
+      var addFeature = `testValues.${feature} = getText("${selectId}");`;
+      designMode.onInsertEvent(addFeature);
+    });
+    y = y + 40;
+    var label = designMode.createElement('LABEL', x, y);
+    label.textContent = modelData.labelColumn;
+    // TODO: this could be problematic if the name isn't formatted appropriately
+    label.id = 'design_' + modelData.name + '_label';
+    label.style.width = '300px';
+    y = y + 20;
+    var predictionId = modelData.name + '_prediction';
+    var prediction = designMode.createElement('TEXT_INPUT', x, y);
+    prediction.id = 'design_' + predictionId;
+    y = y + 40;
+    var predictButton = designMode.createElement('BUTTON', x, y);
+    predictButton.textContent = 'Predict';
+    var predictButtonId = modelData.name + '_predict';
+    designMode.updateProperty(predictButton, 'id', predictButtonId);
+    var predictOnClick = `onEvent("${predictButtonId}", "click", function() {
+      getPrediction("${modelData.name}", testValues, function(value) {
+        setText("${predictionId}", value);
+      });
+    });`;
+    designMode.onInsertEvent(predictOnClick);
+  });
+};
+
 /**
  * @param {string} code The code to search for Data Storage APIs
  * @return {boolean} True if the code uses any data storage APIs

apps/src/applab/commands.js

@@ -19,6 +19,7 @@ import {
 } from '../lib/util/javascriptMode';
 import {commands as audioCommands} from '@cdo/apps/lib/util/audioApi';
 import {commands as timeoutCommands} from '@cdo/apps/lib/util/timeoutApi';
+import {commands as mlCommands} from '@cdo/apps/lib/util/mlApi';
 import * as makerCommands from '@cdo/apps/lib/kits/maker/commands';
 import {getAppOptions} from '@cdo/apps/code-studio/initApp/loadApp';
 import {AllowedWebRequestHeaders} from '@cdo/apps/util/sharedConstants';
@@ -2291,4 +2292,5 @@ function stopLoadingSpinnerFor(elementId) {
 // Include playSound, stopSound, etc.
 Object.assign(applabCommands, audioCommands);
 Object.assign(applabCommands, timeoutCommands);
+Object.assign(applabCommands, mlCommands);
 Object.assign(applabCommands, makerCommands);

apps/src/applab/dropletConfig.js

@@ -18,6 +18,7 @@ import {
 } from './setPropertyDropdown';
 import {getStore} from '../redux';
 import * as applabConstants from './constants';
+import experiments from '../util/experiments';
 
 var DEFAULT_WIDTH = applabConstants.APP_WIDTH.toString();
 var DEFAULT_HEIGHT = (
@@ -1131,6 +1132,16 @@ export var blocks = [
   }
 ];
 
+if (experiments.isEnabled(experiments.APPLAB_ML)) {
+  blocks.push({
+    func: 'getPrediction',
+    parent: api,
+    category: 'Data',
+    paletteParams: ['model', 'testValues', 'callback'],
+    params: ['"myModel"', 'testValues', 'function (value) {\n \n}']
+  });
+}
+
 export const categories = {
   'UI controls': {
     id: 'uicontrols',

apps/src/code-studio/components/ModelManagerDialog.jsx

@@ -0,0 +1,67 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import BaseDialog from '@cdo/apps/templates/BaseDialog';
+import Button from '@cdo/apps/templates/Button';
+import Applab from '@cdo/apps/applab/applab';
+
+export default class ModelManagerDialog extends React.Component {
+  static propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired
+  };
+
+  state = {
+    models: []
+  };
+
+  componentDidUpdate() {
+    this.getModelList();
+  }
+
+  closeModelManager = () => {
+    this.props.onClose();
+  };
+
+  getModelList = () => {
+    $.ajax({
+      url: '/api/v1/ml_models/names',
+      method: 'GET'
+    }).then(models => {
+      this.setState({models});
+    });
+  };
+
+  importMLModel = () => {
+    const modelId = this.root.value;
+    Applab.autogenerateML(modelId);
+  };
+
+  render() {
+    const {isOpen} = this.props;
+
+    return (
+      <div>
+        <BaseDialog
+          isOpen={isOpen}
+          handleClose={this.closeModelManager}
+          useUpdatedStyles
+        >
+          <h2>Machine Learning Models</h2>
+          <select name="model" ref={element => (this.root = element)}>
+            {this.state.models.map(model => (
+              <option key={model.id} value={model.id}>
+                {model.name}
+              </option>
+            ))}
+          </select>
+          <Button
+            text={'Import'}
+            color={Button.ButtonColor.orange}
+            onClick={this.importMLModel}
+          />
+          <h3>Model card details will go here.</h3>
+        </BaseDialog>
+      </div>
+    );
+  }
+}

apps/src/lib/ui/SettingsCog.jsx

@@ -13,6 +13,8 @@ import PopUpMenu from './PopUpMenu';
 import ConfirmEnableMakerDialog from './ConfirmEnableMakerDialog';
 import LibraryManagerDialog from '@cdo/apps/code-studio/components/libraries/LibraryManagerDialog';
 import {getStore} from '../../redux';
+import experiments from '@cdo/apps/util/experiments';
+import ModelManagerDialog from '@cdo/apps/code-studio/components/ModelManagerDialog';
 
 const style = {
   iconContainer: {
@@ -55,7 +57,8 @@ class SettingsCog extends Component {
     open: false,
     canOpen: true,
     confirmingEnableMaker: false,
-    managingLibraries: false
+    managingLibraries: false,
+    managingModels: false
   };
 
   open = () => this.setState({open: true, canOpen: false});
@@ -77,6 +80,11 @@ class SettingsCog extends Component {
     this.setState({managingLibraries: true});
   };
 
+  manageModels = () => {
+    this.close();
+    this.setState({managingModels: true});
+  };
+
   toggleMakerToolkit = () => {
     this.close();
     if (!makerToolkitRedux.isEnabled(getStore().getState())) {
@@ -97,6 +105,7 @@ class SettingsCog extends Component {
   showConfirmation = () => this.setState({confirmingEnableMaker: true});
   hideConfirmation = () => this.setState({confirmingEnableMaker: false});
   closeLibraryManager = () => this.setState({managingLibraries: false});
+  closeModelManager = () => this.setState({managingModels: false});
 
   setTargetPoint(icon) {
     if (!icon) {
@@ -145,10 +154,17 @@ class SettingsCog extends Component {
           {this.areLibrariesEnabled() && (
             <ManageLibraries onClick={this.manageLibraries} />
           )}
+          {experiments.isEnabled(experiments.APPLAB_ML) && (
+            <ManageModels onClick={this.manageModels} />
+          )}
           {this.props.showMakerToggle && (
             <ToggleMaker onClick={this.toggleMakerToolkit} />
           )}
         </PopUpMenu>
+        <ModelManagerDialog
+          isOpen={this.state.managingModels}
+          onClose={this.closeModelManager}
+        />
         <ConfirmEnableMakerDialog
           isOpen={this.state.confirmingEnableMaker}
           handleConfirm={this.confirmEnableMaker}
@@ -173,6 +189,10 @@ ManageAssets.propTypes = {
   last: PropTypes.bool
 };
 
+export function ManageModels(props) {
+  return <PopUpMenu.Item {...props}>{'Manage Models'}</PopUpMenu.Item>;
+}
+
 export function ManageLibraries(props) {
   return <PopUpMenu.Item {...props}>{msg.manageLibraries()}</PopUpMenu.Item>;
 }

apps/src/lib/util/mlApi.js

@@ -0,0 +1,32 @@
+/* global Promise */
+
+import {predict} from '@cdo/apps/MLTrainers';
+
+export const commands = {
+  async getPrediction(opts) {
+    return new Promise((resolve, reject) => {
+      $.ajax({
+        url: '/api/v1/ml_models/names',
+        method: 'GET'
+      })
+        .then(data => {
+          const modelId = data.find(model => model.name === opts.model).id;
+          $.ajax({
+            url: '/api/v1/ml_models/' + modelId,
+            method: 'GET'
+          }).then(modelData => {
+            const predictParams = {
+              ...modelData,
+              testData: opts.testValues
+            };
+            const result = predict(predictParams);
+            opts.callback(result);
+          });
+          return resolve();
+        })
+        .fail((jqXhr, status) => {
+          return reject({message: 'An error occurred'});
+        });
+    });
+  }
+};

dashboard/app/controllers/api/v1/ml_models_controller.rb

@@ -18,7 +18,7 @@ def save
     )
     upload_to_s3(model_id, params["ml_model"].to_json)
 
-    render json: "hooray!"
+    render json: {id: model_id}
   end
 
   # GET api/v1/ml_models/names
@@ -31,7 +31,8 @@ def user_ml_model_names
   # GET api/v1/ml_models/:model_id
   # Retrieve a trained ML model from S3
   def get_trained_model
-    model = download_from_s3(params[:model_id])
+    model_id = params[:model_id] ? params[:model_id] : UserMlModel.where(user_id: current_user.id).last.model_id
+    model = download_from_s3(model_id)
     render json: model
   end
 

dashboard/config/routes.rb

@@ -695,7 +695,7 @@
 
       post 'ml_models/save', to: 'ml_models#save'
       get 'ml_models/names', to: 'ml_models#user_ml_model_names'
-      get 'ml_models/:model_id', to: 'ml_models#get_trained_model'
+      get 'ml_models(/:model_id)', to: 'ml_models#get_trained_model'
 
       resources :teacher_feedbacks, only: [:index, :create] do
         collection do

lib/cdo/shared_constants.rb

@@ -193,6 +193,7 @@ module SharedConstants
       "getUserId": null,
       "drawChart": null,
       "drawChartFromRecords": null,
+      "getPrediction": null,
 
       // Turtle
       "moveForward": null,