2c:null 2d:["$","title",null,{"children":"Tensorflow.js Model Viewer - Iris | Cornel Stefanache | Observable"}] 32:T80c,modelView = { const scale = d3.scaleOrdinal(d3.schemePastel2); const modelView = new ModelView(model, { appendImmediately: false, renderer: 'd3', radius: 15, prepareRenderContext: svg => { ['setosa', 'versicolor', 'virginica'].forEach((species, index) => { svg .append('image') .attr('class', species) .attr('href', `https://raw.githubusercontent.com/cstefanache/cstefanache.github.io/master/media/img/${species}.png`) .attr('width', 100) .attr('x', 400) .attr('y', 120 + index * 100) }) }, onPredict: (svg, res) => { ['setosa', 'versicolor', 'virginica'].forEach((species, index) => { svg.select(`.${species}`).attr('opacity', res.output[index]); svg.select(`[id="dense_Dense2/dense_Dense2-node-${index}"] text`).text(res.output[index].toFixed(2)); }); }, updateNode: (node, value) => { node.dom.select('text').text(value.toFixed(2)); }, nodeRenderer: context => { const { node } = context; node .append('rect') .attr('x', -10) .attr('y', -10) .attr('width', 20) .attr('height', 20) .attr('stroke', '#000') .attr('fill', d => scale(d.groupIndex)) .attr('stroke-width', 1); node .append('text') .attr('font-size', 10) .attr('x', -9) .attr('y', 4); node .append('text') .attr('font-size', 10) .text(d => { switch (d.layerIndex) { case 1: return INPUTS[d.indexInColumn]; case 3: return IRIS_CLASSES[d.indexInColumn]; default: return ''; } }) .attr('x', d => { switch (d.layerIndex) { case 1: return -100; case 3: return 15; default: return -8; } }) .attr('y', 5) } }); return modelView.getDOMElement(); }33:Ta71,getIrisData = testSplit => { const IRIS_NUM_CLASSES = 3; function convertToTensors(data, targets, testSplit) { const numExamples = data.length; if (numExamples !== targets.length) { throw new Error('data and split have different numbers of examples'); } // Randomly shuffle `data` and `targets`. const indices = []; for (let i = 0; i < numExamples; ++i) { indices.push(i); } tf.util.shuffle(indices); const shuffledData = []; const shuffledTargets = []; for (let i = 0; i < numExamples; ++i) { shuffledData.push(data[indices[i]]); shuffledTargets.push(targets[indices[i]]); } // Split the data into a training set and a tet set, based on `testSplit`. const numTestExamples = Math.round(numExamples * testSplit); const numTrainExamples = numExamples - numTestExamples; const xDims = shuffledData[0].length; // Create a 2D `tf.Tensor` to hold the feature data. const xs = tf.tensor2d(shuffledData, [numExamples, xDims]); // Create a 1D `tf.Tensor` to hold the labels, and convert the number label // from the set {0, 1, 2} into one-hot encoding (.e.g., 0 --> [1, 0, 0]). const ys = tf.oneHot(tf.tensor1d(shuffledTargets).toInt(), IRIS_NUM_CLASSES); // Split the data into training and test sets, using `slice`. const xTrain = xs.slice([0, 0], [numTrainExamples, xDims]); const xTest = xs.slice([numTrainExamples, 0], [numTestExamples, xDims]); const yTrain = ys.slice([0, 0], [numTrainExamples, IRIS_NUM_CLASSES]); const yTest = ys.slice([0, 0], [numTestExamples, IRIS_NUM_CLASSES]); return [xTrain, yTrain, xTest, yTest]; } return tf.tidy(() => { const dataByClass = []; const targetsByClass = []; for (let i = 0; i < IRIS_CLASSES.length; ++i) { dataByClass.push([]); targetsByClass.push([]); } for (const example of data) { const target = example[example.length - 1]; const data = example.slice(0, example.length - 1); dataByClass[target].push(data); targetsByClass[target].push(target); } const xTrains = []; const yTrains = []; const xTests = []; const yTests = []; for (let i = 0; i < IRIS_CLASSES.length; ++i) { const [xTrain, yTrain, xTest, yTest] = convertToTensors(dataByClass[i], targetsByClass[i], testSplit); xTrains.push(xTrain); yTrains.push(yTrain); xTests.push(xTest); yTests.push(yTest); } const concatAxis = 0; return [ tf.concat(xTrains, concatAxis), tf.concat(yTrains, concatAxis), tf.concat(xTests, concatAxis), tf.concat(yTests, concatAxis) ]; }); }34:Tfd7,data = [[5.1, 3.5, 1.4, 0.2, 0], [4.9, 3.0, 1.4, 0.2, 0], [4.7, 3.2, 1.3, 0.2, 0], [4.6, 3.1, 1.5, 0.2, 0], [5.0, 3.6, 1.4, 0.2, 0], [5.4, 3.9, 1.7, 0.4, 0], [4.6, 3.4, 1.4, 0.3, 0], [5.0, 3.4, 1.5, 0.2, 0], [4.4, 2.9, 1.4, 0.2, 0], [4.9, 3.1, 1.5, 0.1, 0], [5.4, 3.7, 1.5, 0.2, 0], [4.8, 3.4, 1.6, 0.2, 0], [4.8, 3.0, 1.4, 0.1, 0], [4.3, 3.0, 1.1, 0.1, 0], [5.8, 4.0, 1.2, 0.2, 0], [5.7, 4.4, 1.5, 0.4, 0], [5.4, 3.9, 1.3, 0.4, 0], [5.1, 3.5, 1.4, 0.3, 0], [5.7, 3.8, 1.7, 0.3, 0], [5.1, 3.8, 1.5, 0.3, 0], [5.4, 3.4, 1.7, 0.2, 0], [5.1, 3.7, 1.5, 0.4, 0], [4.6, 3.6, 1.0, 0.2, 0], [5.1, 3.3, 1.7, 0.5, 0], [4.8, 3.4, 1.9, 0.2, 0], [5.0, 3.0, 1.6, 0.2, 0], [5.0, 3.4, 1.6, 0.4, 0], [5.2, 3.5, 1.5, 0.2, 0], [5.2, 3.4, 1.4, 0.2, 0], [4.7, 3.2, 1.6, 0.2, 0], [4.8, 3.1, 1.6, 0.2, 0], [5.4, 3.4, 1.5, 0.4, 0], [5.2, 4.1, 1.5, 0.1, 0], [5.5, 4.2, 1.4, 0.2, 0], [4.9, 3.1, 1.5, 0.1, 0], [5.0, 3.2, 1.2, 0.2, 0], [5.5, 3.5, 1.3, 0.2, 0], [4.9, 3.1, 1.5, 0.1, 0], [4.4, 3.0, 1.3, 0.2, 0], [5.1, 3.4, 1.5, 0.2, 0], [5.0, 3.5, 1.3, 0.3, 0], [4.5, 2.3, 1.3, 0.3, 0], [4.4, 3.2, 1.3, 0.2, 0], [5.0, 3.5, 1.6, 0.6, 0], [5.1, 3.8, 1.9, 0.4, 0], [4.8, 3.0, 1.4, 0.3, 0], [5.1, 3.8, 1.6, 0.2, 0], [4.6, 3.2, 1.4, 0.2, 0], [5.3, 3.7, 1.5, 0.2, 0], [5.0, 3.3, 1.4, 0.2, 0], [7.0, 3.2, 4.7, 1.4, 1], [6.4, 3.2, 4.5, 1.5, 1], [6.9, 3.1, 4.9, 1.5, 1], [5.5, 2.3, 4.0, 1.3, 1], [6.5, 2.8, 4.6, 1.5, 1], [5.7, 2.8, 4.5, 1.3, 1], [6.3, 3.3, 4.7, 1.6, 1], [4.9, 2.4, 3.3, 1.0, 1], [6.6, 2.9, 4.6, 1.3, 1], [5.2, 2.7, 3.9, 1.4, 1], [5.0, 2.0, 3.5, 1.0, 1], [5.9, 3.0, 4.2, 1.5, 1], [6.0, 2.2, 4.0, 1.0, 1], [6.1, 2.9, 4.7, 1.4, 1], [5.6, 2.9, 3.6, 1.3, 1], [6.7, 3.1, 4.4, 1.4, 1], [5.6, 3.0, 4.5, 1.5, 1], [5.8, 2.7, 4.1, 1.0, 1], [6.2, 2.2, 4.5, 1.5, 1], [5.6, 2.5, 3.9, 1.1, 1], [5.9, 3.2, 4.8, 1.8, 1], [6.1, 2.8, 4.0, 1.3, 1], [6.3, 2.5, 4.9, 1.5, 1], [6.1, 2.8, 4.7, 1.2, 1], [6.4, 2.9, 4.3, 1.3, 1], [6.6, 3.0, 4.4, 1.4, 1], [6.8, 2.8, 4.8, 1.4, 1], [6.7, 3.0, 5.0, 1.7, 1], [6.0, 2.9, 4.5, 1.5, 1], [5.7, 2.6, 3.5, 1.0, 1], [5.5, 2.4, 3.8, 1.1, 1], [5.5, 2.4, 3.7, 1.0, 1], [5.8, 2.7, 3.9, 1.2, 1], [6.0, 2.7, 5.1, 1.6, 1], [5.4, 3.0, 4.5, 1.5, 1], [6.0, 3.4, 4.5, 1.6, 1], [6.7, 3.1, 4.7, 1.5, 1], [6.3, 2.3, 4.4, 1.3, 1], [5.6, 3.0, 4.1, 1.3, 1], [5.5, 2.5, 4.0, 1.3, 1], [5.5, 2.6, 4.4, 1.2, 1], [6.1, 3.0, 4.6, 1.4, 1], [5.8, 2.6, 4.0, 1.2, 1], [5.0, 2.3, 3.3, 1.0, 1], [5.6, 2.7, 4.2, 1.3, 1], [5.7, 3.0, 4.2, 1.2, 1], [5.7, 2.9, 4.2, 1.3, 1], [6.2, 2.9, 4.3, 1.3, 1], [5.1, 2.5, 3.0, 1.1, 1], [5.7, 2.8, 4.1, 1.3, 1], [6.3, 3.3, 6.0, 2.5, 2], [5.8, 2.7, 5.1, 1.9, 2], [7.1, 3.0, 5.9, 2.1, 2], [6.3, 2.9, 5.6, 1.8, 2], [6.5, 3.0, 5.8, 2.2, 2], [7.6, 3.0, 6.6, 2.1, 2], [4.9, 2.5, 4.5, 1.7, 2], [7.3, 2.9, 6.3, 1.8, 2], [6.7, 2.5, 5.8, 1.8, 2], [7.2, 3.6, 6.1, 2.5, 2], [6.5, 3.2, 5.1, 2.0, 2], [6.4, 2.7, 5.3, 1.9, 2], [6.8, 3.0, 5.5, 2.1, 2], [5.7, 2.5, 5.0, 2.0, 2], [5.8, 2.8, 5.1, 2.4, 2], [6.4, 3.2, 5.3, 2.3, 2], [6.5, 3.0, 5.5, 1.8, 2], [7.7, 3.8, 6.7, 2.2, 2], [7.7, 2.6, 6.9, 2.3, 2], [6.0, 2.2, 5.0, 1.5, 2], [6.9, 3.2, 5.7, 2.3, 2], [5.6, 2.8, 4.9, 2.0, 2], [7.7, 2.8, 6.7, 2.0, 2], [6.3, 2.7, 4.9, 1.8, 2], [6.7, 3.3, 5.7, 2.1, 2], [7.2, 3.2, 6.0, 1.8, 2], [6.2, 2.8, 4.8, 1.8, 2], [6.1, 3.0, 4.9, 1.8, 2], [6.4, 2.8, 5.6, 2.1, 2], [7.2, 3.0, 5.8, 1.6, 2], [7.4, 2.8, 6.1, 1.9, 2], [7.9, 3.8, 6.4, 2.0, 2], [6.4, 2.8, 5.6, 2.2, 2], [6.3, 2.8, 5.1, 1.5, 2], [6.1, 2.6, 5.6, 1.4, 2], [7.7, 3.0, 6.1, 2.3, 2], [6.3, 3.4, 5.6, 2.4, 2], [6.4, 3.1, 5.5, 1.8, 2], [6.0, 3.0, 4.8, 1.8, 2], [6.9, 3.1, 5.4, 2.1, 2], [6.7, 3.1, 5.6, 2.4, 2], [6.9, 3.1, 5.1, 2.3, 2], [5.8, 2.7, 5.1, 1.9, 2], [6.8, 3.2, 5.9, 2.3, 2], [6.7, 3.3, 5.7, 2.5, 2], [6.7, 3.0, 5.2, 2.3, 2], [6.3, 2.5, 5.0, 1.9, 2], [6.5, 3.0, 5.2, 2.0, 2], [6.2, 3.4, 5.4, 2.3, 2], [5.9, 3.0, 5.1, 1.8, 2]]35:[] 30:{"id":"33b8c0b55b492a37","slug":"tensorflow-js-model-viewer-iris","title":"Tensorflow.js Model Viewer - Iris","thumbnail":"e96582a8042594d7ee1390feb84e782840d57d0a92f9f25903bc5b3c74c0fb08","access_level":"public","create_time":"$D2019-02-11T17:14:41.296Z","update_time":"$D2019-03-13T16:55:26.559Z","view_time":null,"first_public_time":"$D2019-02-11T20:29:35.222Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"423c95581e37a479","login":"cstefanache","name":"Cornel Stefanache","avatar_url":"https://avatars-next.observableusercontent.com/26083dee70ebc8f99b9ec2d7890fa4a8dabeccd8443043ee9e90aa2874204d4b","tier":"starter_2024","bio":"Technical Something, Code Pusher, Ex. Hacker for MIT, co-creator of www.monkeyuser.com, passionate developer"},"version":87,"publish_version":87,"role":null,"authored":false,"authors":[{"type":"individual","id":"618e83635ad291a1","login":"cstefanache","name":"Cornel Stefanache","avatar_url":"https://avatars-next.observableusercontent.com/26083dee70ebc8f99b9ec2d7890fa4a8dabeccd8443043ee9e90aa2874204d4b","tier":null,"bio":"Technical Something, Code Pusher, Ex. Hacker for MIT, co-creator of www.monkeyuser.com, passionate developer"}],"members":[{"type":"individual","id":"618e83635ad291a1","login":"cstefanache","name":"Cornel Stefanache","avatar_url":"https://avatars-next.observableusercontent.com/26083dee70ebc8f99b9ec2d7890fa4a8dabeccd8443043ee9e90aa2874204d4b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Tensorflow.js Model Viewer - Iris","cells":[{"id":0,"value":"md`# Tensorflow.js Model Viewer - Iris`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"md`## Model`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"model = { \n const [xTrain, yTrain, xTest, yTest] = getIrisData(0.15);\n \n \n const model = tf.sequential();\n model.add(tf.layers.dense({\n units: 10,\n activation: 'sigmoid',\n inputShape: [xTrain.shape[1]]\n }));\n\n model.add(tf.layers.dense({\n units: 3,\n activation: 'softmax'\n }));\n\n model.summary();\n\n const optimizer = tf.train.adam(0.02);\n model.compile({\n optimizer: optimizer,\n loss: 'categoricalCrossentropy',\n metrics: ['accuracy']\n });\n\n /** Render model view */\n \n model.fit(xTrain, yTrain, {\n epochs: 100,\n validationData: [xTest, yTest]\n }); \n \n return model;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"viewof config = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"prediction = {\n setTimeout( () => {\n model.predict(tf.tensor([[config.sepall, config.sepalw, config.petall, config.petalw]]));\n }, 1000);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"IRIS_CLASSES = ['Iris-setosa', 'Iris-versicolor', 'Iris-virginica']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"\nINPUTS = ['Sepal Length (Cm)', 'Sepal Width (Cm)', 'Petal Length (Cm)', 'Petal Width (Cm)'];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"tf = require(\"@tensorflow/tfjs\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"ModelView = require(\"tfjs-model-view@0.1.3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"