Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Visual Feature Engineering for Machine Learning with React

Olga
October 25, 2019

Visual Feature Engineering for Machine Learning with React

Olga

October 25, 2019
Tweet

More Decks by Olga

Other Decks in Technology

Transcript

  1. Olga Petrova, @tyoushe Visual Feature Engineering for Machine Learning with

    React Olga Petrova, @tyoushe Developer Advocate, Sencha
  2. Olga Petrova, @tyoushe Magic What I do Data Aggregation Data

    Preprocessing Feature Engineering What I also do Data Postprocessing Visualizations Dashboards
  3. Olga Petrova, @tyoushe Ways of Using TensorFlow.js • Use a

    pre-trained model • Transfer learning • Train a model directly in a browser
  4. Olga Petrova, @tyoushe Used Technologies TensorFlow.js Trains a model and

    makes predictions D3.js Visualizes the training process ExtReact Renders UI components: Grid, TabPanel, Toolbar, etc.
  5. Olga Petrova, @tyoushe Features • Previous wins count for Team

    1 minus previous wins count for Team 2 • In total • In last 12 years • Previous wins count for Team 1 against Team 2 • In total • In last 12 years • At the same stage • The game is played in Team 1 or Team 2's home country • Stage
  6. Olga Petrova, @tyoushe Target • Group stage • Team 1

    won • Team 2 won • Draw • Play-off game • Team 1 won • Team 2 won
  7. Olga Petrova, @tyoushe Random Prediction • 33,3% 48 Group Stage

    Games • 50% 16 Play-off Games • 37,5% Total
  8. Olga Petrova, @tyoushe Preprocess Data Prepare Tensors Build Model Compile

    Model Train Model Predict Results TensorFlow.js Pipeline
  9. Olga Petrova, @tyoushe Preprocess Data var [trainData, testData] = this.split(this.data,

    this.splitter); return [ this.extract( trainData, this.meta, /* features state: included/excluded/normalized */ this.targetField /* matchResult field in our case*/ ), this.extract( testData, this.meta, this.targetField ) ];
  10. Olga Petrova, @tyoushe Preprocess Data Prepare Tensors Build Model Compile

    Model Train Model Predict Results TensorFlow.js Pipeline
  11. Olga Petrova, @tyoushe Prepare Tensors const features = tf.tensor2d( features_data,

    [features_data.length, features_data[0].length] ); const target = tf.tensor2d( target_data, [target_data.length, 1] );
  12. Olga Petrova, @tyoushe Preprocess Data Prepare Tensors Build Model Compile

    Model Train Model Predict Results TensorFlow.js Pipeline
  13. Olga Petrova, @tyoushe Build Model //input layer const input =

    tf.input({shape: [inputSize,]}); //chain layers var currentLayer = input; for (let layerConfig of this.config.layers) { const layer = tf.layers[layerConfig.type](layerConfig); currentLayer = layer.apply(currentLayer); } //output layer const output = currentLayer; this.model = tf.model({inputs: input, outputs: output});
  14. Olga Petrova, @tyoushe Preprocess Data Prepare Tensors Build Model Compile

    Model Train Model Predict Results TensorFlow.js Pipeline
  15. Olga Petrova, @tyoushe Compile Model const optimizer = tf.train[this.config.optimizer](this.config.learningRate); this.model.compile({

    loss: tf.losses[this.config.loss], optimizer: optimizer, metrics: [this.config.metrics] });
  16. Olga Petrova, @tyoushe Preprocess Data Prepare Tensors Build Model Compile

    Model Train Model Predict Results TensorFlow.js Pipeline
  17. Olga Petrova, @tyoushe Train Model this.model.fit(features, target, { epochs: this.config.numberOfEpochs,

    batchSize: 30, callbacks: { onEpochEnd: async (epoch, logs) => { //stop training process if needed ... //update visualization updateFn.call(null, epoch, this.model.layers); await tf.nextFrame(); } }}).then((training) => { //training process is finished completeFn.call(); } });
  18. Olga Petrova, @tyoushe Preprocess Data Prepare Tensors Build Model Compile

    Model Train Model Predict Results TensorFlow.js Pipeline
  19. Olga Petrova, @tyoushe Predict Result predict(item) { const item_tensor =

    tf.tensor2d( item, [1, item.length] ); return this.model.predict(item_tensor).data(); }
  20. Olga Petrova, @tyoushe D3.js Visualization refresh(layers) { let graph =

    this.getChartData(layers); this.refreshChart(graph); } refreshChart(graph) { this.createSVG(); this.generateNodesData(graph); //render/update nodes and edges } render() { return (<Panel title={"Epoch: " + this.state.step}></Panel>) }
  21. Olga Petrova, @tyoushe DataGrid render() { return ( <Grid store={this.store}

    columns={this.columns} plugins={{ gridfilters: true }} border="1" flex="1“ onColumnHide={this.onHeadersChange} onColumnShow={this.onHeadersChange} ></Grid> ) }
  22. Olga Petrova, @tyoushe Application View <Panel layout="vbox"> <ControlToolbar config={this.state.config} /*

    default model’s setup */ onChange={this.onConfigChange} /* re-run model if setup is changed */ onValidate={this.onValidate}> /* validate model against full test dataset */ </ControlToolbar> <Visualization layers={this.state.layers} /* updated on every epoch change */ epoch={this.state.epoch}> </Visualization> <TabPanel> ... </TabPanel> </Panel>
  23. Olga Petrova, @tyoushe Application View <DataGrid fields={this.state.fields} /* all features

    */ meta={this.state.meta} /* features state: included/excluded/normalized */ tensors={this.state.tensors} /* train dataset */ onFieldsChange={this.onFieldsChange}>/*re-run model if features changed */ </DataGrid>
  24. Olga Petrova, @tyoushe Most Valuable Features • Previous wins count

    for Team 1 minus previous wins count for Team 2 in last 12 years • Previous wins count for Team 1 against Team 2 in total • The game is played in Team 1 or Team 2's home country • Stage
  25. Olga Petrova, @tyoushe Insights • Teams that won more games

    in last 12 years perform better • Teams playing in the home country perform better • Weaker teams perform better on a higher stage • Teams that lost more games against this opponent in the past perform better
  26. Olga Petrova, @tyoushe Links • Source code https://github.com/olga-petrova/TensorflowVisualization • Live

    demo https://se.sencha.com/TensorflowVisualization/ • Original dataset https://www.kaggle.com/abecklas/fifa-world-cup