2e:null 2f:["$","title",null,{"children":"MNIST Tensorflow.JS Network View ([tfjs-model-view](https://github.com/cstefanache/tfjs-model-view)) | Cornel Stefanache | Observable"}] 34:Tdfa,view = { const div = document.createElement('div') const modelView = new ModelView(model, { radius: 2, nodePadding: 0, printStats: true, domain: [0, 255], onBeginRender: renderer => { const { renderContext } = renderer; renderContext.fillStyle = '#000'; renderContext.fillRect(0, 0, renderer.width, renderer.height); }, layer: { 'conv2d_Conv2D1_input': { color: [255, 255, 255], nodeStroke: false, radius: 6 }, 'conv2d_Conv2D1/conv2d_Conv2D1': { color: [255, 255, 255] }, 'max_pooling2d_MaxPooling2D1/max_pooling2d_MaxPooling2D1': { color: [255, 0, 0], radius: 1 }, 'conv2d_Conv2D2/conv2d_Conv2D2': { radius: 4, groupPadding: 5, nodeStroke: false }, 'max_pooling2d_MaxPooling2D2/max_pooling2d_MaxPooling2D2': { radius: 4, groupPadding: 5, nodeStroke: false }, 'flatten_Flatten1/flatten_Flatten1': { reshape: [16, 16, 1] }, 'dense_Dense1/dense_Dense1': { radius: 25, domain: [0, 1], renderNode: (ctx, node, nodeIdx) => { const { x, y } = node; ctx.font = '10px Arial'; ctx.fillStyle = '#000'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(nodeIdx, x, y); } } }, onRendererInitialized: renderer => div.appendChild(renderer.canvas) }); const val = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,201,255,255,255,15,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,242,255,255,255,255,251,255,255,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,255,255,255,255,0,0,0,0,0,255,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,255,255,0,0,0,0,0,0,0,0,255,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,255,255,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,255,237,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,255,255,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,255,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,255,255,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,255,255,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,255,255,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,244,255,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,32,255,114,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,255,255,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,255,255,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,53,255,0,0,0,0,0,0,0,0,0,175,255,255,255,255,255,255,255,0,0,0,0,0,0,0,0,0,255,255,116,255,255,255,255,255,255,255,255,255,255,255,240,69,0,0,0,0,0,0,0,0,0,0,0,0,0,255,255,255,255,255,255,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]; const tensor = tf.tensor([val]); const reshaped = tensor.reshape([1, 28, 28, 1]); const casted = tf.cast(reshaped, 'float32') setTimeout( () => { model.predict(casted); }, 100) return div; } 35:T563,predict = { const canvas = document.createElement('canvas') const context = canvas.getContext('2d') const size = 28 canvas.width = 28 canvas.height = 28 return () => { context.clearRect(0, 0, size, size) context.beginPath() context.rect(0, 0, size, size) context.fillStyle = '#fff' context.fill() // center draw let {x1: sx, y1: sy, width: sw, height: sh} = getBounds(input.canvas) if (sw > sh) { sy -= (sw - sh) / 2 sh = sw } if (sh > sw) { sx -= (sh - sw) / 2 sw = sh } context.drawImage( input.canvas, sx, sy, sw, sh, 4, 4, size - 8, size - 8 ) const imgData = context.getImageData(0, 0, size, size) const data = imgData.data // invert for(let i = 0; i < imgData.data.length; i += 4) { imgData.data[i] = 255 - imgData.data[i] imgData.data[i + 1] = 255 - imgData.data[i + 1] imgData.data[i + 2] = 255 - imgData.data[i + 2] } return tf.tidy(() => { const image = tf.browser.fromPixels(imgData, 1) const reshaped = image.reshape([1, 28, 28, 1]) const casted = tf.cast(reshaped, 'float32') // const output = model.predict(casted) return model.predict(casted) }) } // } }36:T421,function getBounds(canvas) { const { width: w, height: h } = canvas const context = canvas.getContext('2d') const imageData = context.getImageData(0, 0, w, h) const buffer = imageData.data let x1 = w let y1 = h let x2 = 0 let y2 = 0 // get left edge for (let y = 0; y < h; y++) { for (let x = 0; x < w; x++) { if (buffer[(x + y * w) * 4 + 3] > 0) { if (x < x1) x1 = x } } } // get right edge for (let y = 0; y < h; y++) { for (let x = w; x >= 0; x--) { if (buffer[(x + y * w) * 4 + 3] > 0) { if (x > x2) x2 = x } } } // get top edge for (let x = 0; x < w; x++) { for (let y = 0; y < h; y++) { if (buffer[(x + y * w) * 4 + 3] > 0) { if (y < y1) y1 = y } } } // get bottom edge for (let x = 0; x < w; x++) { for (let y = h; y >= 0; y--) { if (buffer[(x + y * w) * 4 + 3] > 0) { if (y > y2) y2 = y } } } const width = x2 - x1 const height = y2 - y1 return {x1, y1, x2, y2, width, height} }37:T5c9,function createInput({ onDraw, onClear }) { const dpi = window.devicePixelRatio const canvas = document.createElement('canvas') const context = canvas.getContext('2d') const size = 200 canvas.width = size * dpi canvas.height = size * dpi canvas.style.width = size + 'px' canvas.style.border = '1px solid black' context.scale(dpi, dpi) let paths = [] const line = d3.line() .curve(d3.curveBasis) .context(context) function draw() { context.clearRect(0, 0, size, size) context.beginPath() context.lineCap = 'round' paths.forEach(path => { line(path) }) context.lineWidth = 10 context.stroke() } function dragstarted() { const d = d3.event.subject let x0 = d3.event.x let y0 = d3.event.y paths.push(d) d3.event.on('drag', function() { var x1 = d3.event.x, y1 = d3.event.y, dx = x1 - x0, dy = y1 - y0; if (dx * dx + dy * dy > 100) d.push([x0 = x1, y0 = y1]) else d[d.length - 1] = [x1, y1] draw() onDraw && onDraw(canvas) }) } d3.select(canvas).call(d3.drag() .container(function() { return this }) .subject(function() { var p = [d3.event.x, d3.event.y]; return [p, p]; }) .on("start", dragstarted) ) return { canvas, clear() { paths = [] draw() onClear() }, read() { return context.getImageData(0, 0, size * dpi, size * dpi) } } }38:[] 32:{"id":"683649860fee0619","slug":"mnist-tensorflow-js-network-view-tfjs-model-view","title":"MNIST Tensorflow.JS Network View ([tfjs-model-view](https://github.com/cstefanache/tfjs-model-view))","thumbnail":"c88e76797630bb2c743fc18dc94822a2b7025bedd9f1df199854a8c9f98e37b6","access_level":"public","create_time":"$D2019-02-12T13:06:45.738Z","update_time":"$D2019-12-27T12:26:44.194Z","view_time":null,"first_public_time":"$D2019-02-14T12:52:27.943Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"423c95581e37a479","login":"cstefanache","name":"Cornel Stefanache","avatar_url":"https://avatars-next.observableusercontent.com/26083dee70ebc8f99b9ec2d7890fa4a8dabeccd8443043ee9e90aa2874204d4b","tier":"starter_2024"},"version":213,"publish_version":213,"role":null,"authored":false,"authors":[{"type":"individual","id":"618e83635ad291a1","login":"cstefanache","name":"Cornel Stefanache","avatar_url":"https://avatars-next.observableusercontent.com/26083dee70ebc8f99b9ec2d7890fa4a8dabeccd8443043ee9e90aa2874204d4b","tier":null}],"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":6,"collection":null,"type":"notebook","body":{"title":"MNIST Tensorflow.JS Network View ([tfjs-model-view](https://github.com/cstefanache/tfjs-model-view))","cells":[{"id":0,"value":"md`\n # MNIST Tensorflow.JS Network View ([tfjs-model-view](https://github.com/cstefanache/tfjs-model-view))\n Draw a digit on the box below and click \"predict\" to trigger network prediction\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"input.canvas","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"{\n const elem = html`

\n \n \n

`\n elem.querySelector('#clear').onclick = (e) => {\n e.preventDefault()\n input.clear()\n }\n \n elem.querySelector('#predict').onclick = (e) => {\n e.preventDefault()\n predict()\n }\n\n \n return elem;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"md`## Model loading & utilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"model = { \nconst model = await tf.loadLayersModel('https://gitcdn.link/repo/cstefanache/cstefanache.github.io/master/models/mnistconv/mnist-conv.json')\n return model\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"mutable canvasWithInput = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"scaleImageData = (ctx, imageData, scale) => {\n var scaled = ctx.createImageData(imageData.width * scale, imageData.height * scale);\n var subLine = ctx.createImageData(scale, 1).data\n for (var row = 0; row < imageData.height; row++) {\n for (var col = 0; col < imageData.width; col++) {\n var sourcePixel = imageData.data.subarray(\n (row * imageData.width + col) * 4,\n (row * imageData.width + col) * 4 + 4\n );\n for (var x = 0; x < scale; x++) subLine.set(sourcePixel, x*4)\n for (var y = 0; y < scale; y++) {\n var destRow = row * scale + y;\n var destCol = col * scale;\n scaled.data.set(subLine, (destRow * scaled.width + destCol) * 4)\n }\n }\n }\n\n return scaled;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"input = createInput({\n onDraw(canvas) {\n mutable canvasWithInput = canvas\n },\n onClear() {\n mutable canvasWithInput = null\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"tf = require('@tensorflow/tfjs')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"ModelView = require(\"tfjs-model-view@0.2.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 33:"$32:body"