Visual Feature Engineering for Machine Learning with React

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