[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/AppLabView.jsx

@@ -20,6 +20,7 @@ import ExternalRedirectDialog from '@cdo/apps/applab/ExternalRedirectDialog';
 class AppLabView extends React.Component {
   static propTypes = {
     handleVersionHistory: PropTypes.func.isRequired,
+    autogenerateML: PropTypes.func.isRequired,
     hasDataMode: PropTypes.bool.isRequired,
     hasDesignMode: PropTypes.bool.isRequired,
     interfaceMode: PropTypes.oneOf([
@@ -57,6 +58,7 @@ class AppLabView extends React.Component {
           <CodeWorkspace
             withSettingsCog
             style={{display: codeWorkspaceVisible ? 'block' : 'none'}}
+            autogenerateML={this.props.autogenerateML}
           />
           {this.props.hasDesignMode && <ProtectedDesignWorkspace />}
           {this.props.hasDataMode && (

apps/src/applab/ai.js

@@ -0,0 +1,70 @@
+import $ from 'jquery';
+import designMode from './designMode';
+
+export default function autogenerateML(modelId) {
+  return new Promise(function(resolve, reject) {
+    $.ajax({
+      url: `/api/v1/ml_models/${modelId}`,
+      method: 'GET'
+    })
+      .then(modelData => {
+        var x = 20;
+        var y = 20;
+        var SPACE = 20;
+        designMode.onInsertEvent(`var testValues = {};`);
+        modelData.selectedFeatures.forEach(feature => {
+          y = y + SPACE;
+          var label = designMode.createElement('LABEL', x, y);
+          label.textContent = feature + ':';
+          label.id = 'design_' + feature + '_label';
+          label.style.width = '300px';
+          y = y + SPACE;
+          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 + 2 * SPACE;
+        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 + SPACE;
+        var predictionId = modelData.name + '_prediction';
+        var prediction = designMode.createElement('TEXT_INPUT', x, y);
+        prediction.id = 'design_' + predictionId;
+        y = y + 2 * SPACE;
+        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
+          }", "${modelId}", testValues, function(value) {
+            setText("${predictionId}", value);
+          });
+        });`;
+        designMode.onInsertEvent(predictOnClick);
+        return resolve();
+      })
+      .fail((jqXhr, status) => {
+        return alert({message: 'An error occurred'});
+      });
+  });
+}

apps/src/applab/api.js

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

apps/src/applab/applab.js

@@ -86,6 +86,7 @@ import {setExportGeneratedProperties} from '../code-studio/components/exportDial
 import {userAlreadyReportedAbuse} from '@cdo/apps/reportAbuse';
 import {workspace_running_background, white} from '@cdo/apps/util/color';
 import {MB_API} from '../lib/kits/maker/boards/microBit/MicroBitConstants';
+import autogenerateML from '@cdo/apps/applab/ai';
 
 /**
  * Create a namespace for the application.
@@ -973,7 +974,8 @@ Applab.render = function() {
     isEditingProject: project.isEditing(),
     screenIds: designMode.getAllScreenIds(),
     onScreenCreate: designMode.createScreen,
-    handleVersionHistory: Applab.handleVersionHistory
+    handleVersionHistory: Applab.handleVersionHistory,
+    autogenerateML: autogenerateML
   });
   ReactDOM.render(
     <Provider store={getStore()}>

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_name', 'model_id', 'testValues', 'callback'],
+    params: ['"myModel"', '"modelId"', 'testValues', 'function (value) {\n \n}']
+  });
+}
+
 export const categories = {
   'UI controls': {
     id: 'uicontrols',

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

@@ -0,0 +1,77 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import $ from 'jquery';
+import BaseDialog from '@cdo/apps/templates/BaseDialog';
+import Button from '@cdo/apps/templates/Button';
+
+export default class ModelManagerDialog extends React.Component {
+  static propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired,
+    autogenerateML: PropTypes.func
+  };
+
+  state = {
+    models: [],
+    isImportPending: false
+  };
+
+  componentDidUpdate() {
+    this.getModelList();
+  }
+
+  closeModelManager = () => {
+    this.props.onClose();
+  };
+
+  getModelList = () => {
+    $.ajax({
+      url: '/api/v1/ml_models/names',
+      method: 'GET'
+    }).then(models => {
+      this.setState({models});
+    });
+  };
+
+  importMLModel = async () => {
+    this.setState({isImportPending: true});
+    const modelId = this.root.value;
+    await this.props.autogenerateML(modelId);
+    this.setState({isImportPending: false});
+    this.closeModelManager();
+  };
+
+  render() {
+    const {isOpen} = this.props;
+    const noModels = this.state.models.length === 0;
+
+    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>
+          {noModels && <div>You have not trained any AI models yet.</div>}
+          <Button
+            text={'Import'}
+            color={Button.ButtonColor.orange}
+            onClick={this.importMLModel}
+            disabled={noModels}
+            isPending={this.state.isImportPending}
+            pendingText={'Importing...'}
+          />
+          <h3>Model card details will go here.</h3>
+        </BaseDialog>
+      </div>
+    );
+  }
+}

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

@@ -271,7 +271,6 @@ class ShareAllowedDialog extends React.Component {
       this.props.appType === 'applab' || this.props.appType === 'gamelab';
     const artistTwitterHandle =
       SongTitlesToArtistTwitterHandle[this.props.selectedSong];
-
     const hasThumbnail = !!this.props.thumbnailUrl;
     const thumbnailUrl = hasThumbnail
       ? this.props.thumbnailUrl

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

@@ -21,6 +21,7 @@ class ShareDialog extends Component {
       allowSignedOutShare,
       ...otherProps
     } = this.props;
+
     // If we're on a project level (i.e. /projects/appname), always show signed
     // in version of the dialog
 

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: {
@@ -43,7 +45,8 @@ class SettingsCog extends Component {
   static propTypes = {
     isRunning: PropTypes.bool,
     runModeIndicators: PropTypes.bool,
-    showMakerToggle: PropTypes.bool
+    showMakerToggle: PropTypes.bool,
+    autogenerateML: PropTypes.func
   };
 
   // This ugly two-flag state is a workaround for an event-handling bug in
@@ -55,7 +58,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 +81,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 +106,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 +155,20 @@ 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>
+        {experiments.isEnabled(experiments.APPLAB_ML) && (
+          <ModelManagerDialog
+            isOpen={this.state.managingModels}
+            onClose={this.closeModelManager}
+            autogenerateML={this.props.autogenerateML}
+          />
+        )}
         <ConfirmEnableMakerDialog
           isOpen={this.state.confirmingEnableMaker}
           handleConfirm={this.confirmEnableMaker}
@@ -173,6 +193,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,27 @@
+/* global Promise */
+
+import $ from 'jquery';
+import {predict} from '@cdo/apps/MLTrainers';
+
+export const commands = {
+  async getPrediction(opts) {
+    return new Promise((resolve, reject) => {
+      $.ajax({
+        url: '/api/v1/ml_models/' + opts.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'});
+        });
+    });
+  }
+};