Visual Feature Engineering for Machine Learning with React - Speaker Deck

Tweet

Tweet

Slide 1

Slide 1 text

Olga Petrova, @tyoushe Visual Feature Engineering for Machine Learning with React Olga Petrova, @tyoushe Developer Advocate, Sencha

Slide 2

Slide 2 text

Olga Petrova, @tyoushe ! " # # $ % &

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Olga Petrova, @tyoushe What I also do What I do Magic ( ( )

Slide 5

Slide 5 text

Olga Petrova, @tyoushe

Slide 6

Slide 6 text

Olga Petrova, @tyoushe Ways of Using TensorFlow.js • Use a pre-trained model • Transfer learning • Train a model directly in a browser

Slide 7

Slide 7 text

Olga Petrova, @tyoushe Tensorﬂow Playground 7

Slide 8

Slide 8 text

Olga Petrova, @tyoushe JavaScript JavaScript Feature Engineering JavaScript

Slide 9

Slide 9 text

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.

Slide 10

Slide 10 text

Olga Petrova, @tyoushe Real World Use Case?

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Olga Petrova, @tyoushe FIFA World Cup Dataset • Training 1930–2014 • Validation 2018

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Olga Petrova, @tyoushe Target • Group stage • Team 1 won • Team 2 won • Draw • Play-off game • Team 1 won • Team 2 won

Slide 15

Slide 15 text

Olga Petrova, @tyoushe Random Prediction • 33,3% 48 Group Stage Games • 50% 16 Play-off Games • 37,5% Total

Slide 16

Slide 16 text

Olga Petrova, @tyoushe

Slide 17

Slide 17 text

Olga Petrova, @tyoushe Prediction Results • 58% Games predicted correctly by the model • 37,5% Random prediction

Slide 18

Slide 18 text

Olga Petrova, @tyoushe TensorFlow.js

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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 ) ];

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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] );

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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});

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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] });

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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(); } });

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Olga Petrova, @tyoushe Predict Result predict(item) { const item_tensor = tf.tensor2d( item, [1, item.length] ); return this.model.predict(item_tensor).data(); }

Slide 32

Slide 32 text

Olga Petrova, @tyoushe D3.js

Slide 33

Slide 33 text

Olga Petrova, @tyoushe D3.js Visualization

Slide 34

Slide 34 text

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 () }

Slide 35

Slide 35 text

Olga Petrova, @tyoushe ExtReact

Slide 36

Slide 36 text

Olga Petrova, @tyoushe ExtReact Grid

Slide 37

Slide 37 text

Olga Petrova, @tyoushe DataGrid render() { return (

Slide 38

Slide 38 text

Olga Petrova, @tyoushe React

Slide 39

Slide 39 text

Olga Petrova, @tyoushe Application View /* validate model against full test dataset */ ...

Slide 40

Slide 40 text

Olga Petrova, @tyoushe Application View /*re-run model if features changed */

Slide 41

Slide 41 text

Olga Petrova, @tyoushe How to Improve the Model?

Slide 42

Slide 42 text

Olga Petrova, @tyoushe

Slide 43

Slide 43 text

Olga Petrova, @tyoushe Prediction Results • 56% Games predicted correctly by the model • 37,5% Random prediction

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Olga Petrova, @tyoushe 45

Slide 46

Slide 46 text

Olga Petrova, @tyoushe Prediction Results • 56% Games predicted correctly by the model • 37,5% Random prediction

Slide 47

Slide 47 text

Olga Petrova, @tyoushe 47

Slide 48

Slide 48 text

Olga Petrova, @tyoushe Prediction Results • 55% Games predicted correctly by the model • 37,5% Random prediction

Slide 49

Slide 49 text

Olga Petrova, @tyoushe 49

Slide 50

Slide 50 text

Olga Petrova, @tyoushe Prediction Results • 50% Games predicted correctly by the model • 37,5% Random prediction

Slide 51

Slide 51 text

Olga Petrova, @tyoushe 51 Optimal Model

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Olga Petrova, @tyoushe @tyoushe