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

Visual Feature Engineering for Machine Learning with React

A5be36c5bd2d025a3305c9d05261b63e?s=47 Olga
October 25, 2019

Visual Feature Engineering for Machine Learning with React

A5be36c5bd2d025a3305c9d05261b63e?s=128

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 ! " # # $ % &

  3. Olga Petrova, @tyoushe Magic What I do Data Aggregation Data

    Preprocessing Feature Engineering What I also do Data Postprocessing Visualizations Dashboards
  4. Olga Petrova, @tyoushe What I also do What I do

    Magic ( ( )
  5. Olga Petrova, @tyoushe

  6. Olga Petrova, @tyoushe Ways of Using TensorFlow.js • Use a

    pre-trained model • Transfer learning • Train a model directly in a browser
  7. Olga Petrova, @tyoushe Tensorflow Playground 7

  8. Olga Petrova, @tyoushe JavaScript JavaScript Feature Engineering JavaScript

  9. 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.
  10. Olga Petrova, @tyoushe Real World Use Case?

  11. Olga Petrova, @tyoushe Predict Results at FIFA World Cups? ⚽

  12. Olga Petrova, @tyoushe FIFA World Cup Dataset • Training 1930–2014

    • Validation 2018
  13. 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
  14. Olga Petrova, @tyoushe Target • Group stage • Team 1

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

    Games • 50% 16 Play-off Games • 37,5% Total
  16. Olga Petrova, @tyoushe

  17. Olga Petrova, @tyoushe Prediction Results • 58% Games predicted correctly

    by the model • 37,5% Random prediction
  18. Olga Petrova, @tyoushe TensorFlow.js

  19. Olga Petrova, @tyoushe TensorFlow.js Pipeline Preprocess Data Prepare Tensors Build

    Model Compile Model Train Model Predict Results
  20. Olga Petrova, @tyoushe Preprocess Data Prepare Tensors Build Model Compile

    Model Train Model Predict Results TensorFlow.js Pipeline
  21. 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 ) ];
  22. Olga Petrova, @tyoushe Preprocess Data Prepare Tensors Build Model Compile

    Model Train Model Predict Results TensorFlow.js Pipeline
  23. 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] );
  24. Olga Petrova, @tyoushe Preprocess Data Prepare Tensors Build Model Compile

    Model Train Model Predict Results TensorFlow.js Pipeline
  25. 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});
  26. Olga Petrova, @tyoushe Preprocess Data Prepare Tensors Build Model Compile

    Model Train Model Predict Results TensorFlow.js Pipeline
  27. 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] });
  28. Olga Petrova, @tyoushe Preprocess Data Prepare Tensors Build Model Compile

    Model Train Model Predict Results TensorFlow.js Pipeline
  29. 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(); } });
  30. Olga Petrova, @tyoushe Preprocess Data Prepare Tensors Build Model Compile

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

    tf.tensor2d( item, [1, item.length] ); return this.model.predict(item_tensor).data(); }
  32. Olga Petrova, @tyoushe D3.js

  33. Olga Petrova, @tyoushe D3.js Visualization

  34. 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>) }
  35. Olga Petrova, @tyoushe ExtReact

  36. Olga Petrova, @tyoushe ExtReact Grid

  37. 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> ) }
  38. Olga Petrova, @tyoushe React

  39. 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>
  40. 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>
  41. Olga Petrova, @tyoushe How to Improve the Model?

  42. Olga Petrova, @tyoushe

  43. Olga Petrova, @tyoushe Prediction Results • 56% Games predicted correctly

    by the model • 37,5% Random prediction
  44. 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
  45. Olga Petrova, @tyoushe 45

  46. Olga Petrova, @tyoushe Prediction Results • 56% Games predicted correctly

    by the model • 37,5% Random prediction
  47. Olga Petrova, @tyoushe 47

  48. Olga Petrova, @tyoushe Prediction Results • 55% Games predicted correctly

    by the model • 37,5% Random prediction
  49. Olga Petrova, @tyoushe 49

  50. Olga Petrova, @tyoushe Prediction Results • 50% Games predicted correctly

    by the model • 37,5% Random prediction
  51. Olga Petrova, @tyoushe 51 Optimal Model

  52. 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
  53. 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
  54. Olga Petrova, @tyoushe @tyoushe