2b:null 2c:["$","title",null,{"children":"Clasificador de imágenes | Ernesto Laval | Observable"}] 31:T642,img = { //const container_ = html`

` const img = html``; img.height = 224; img.width = 224; img.setAttribute('crossorigin', 'anonymous'); img.onload = function () { if (img.naturalHeight > 224) { const sizeProportion = img.naturalWidth / img.naturalHeight img.height = 224; img.width = img.height*sizeProportion; } else { img.height = img.naturalWidth; img.width = img.naturalWidth; } } //container.appendChild(img) // Optional. Show the copy icon when dragging over. Seems to only work for chrome. img.addEventListener('dragover', function(e) { e.stopPropagation(); e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; }); // Get file data on drop img.addEventListener('drop', function(e) { e.stopPropagation(); e.preventDefault(); var files = e.dataTransfer.files; // Array of all files for (var i=0, file; file=files[i]; i++) { if (file.type.match(/image.*/)) { mutable fileName =file.name; var reader = new FileReader(); reader.onload = function(e2) { // finished reading file data. img.src= e2.target.result; mutable droppedImage = true; } reader.readAsDataURL(file); // start reading the file data. } } }); return img; } 32:[] 2f:{"id":"a40dd032f081486a","slug":"image-classifier","title":"Clasificador de imágenes","thumbnail":"5ba34b8d1d0e07658a23748abb8bdd3aa5f427f6ff2cd710f09da7ef7cd18aa9","access_level":"public","create_time":"$D2018-11-15T22:35:38.658Z","update_time":"$D2019-03-12T13:40:20.643Z","view_time":null,"first_public_time":"$D2018-11-16T10:57:14.048Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0843f5dc42ca68a0","login":"elaval","name":"Ernesto Laval","avatar_url":"https://avatars-next.observableusercontent.com/089f0414fc9025dadb05cc06d7a406bc9be10093187c46729cb4ba3a4098dc30","tier":"starter_2024"},"version":396,"publish_version":396,"role":null,"authored":false,"authors":[{"type":"individual","id":"e04cd7b5f4351ae9","login":"elaval","name":"Ernesto Laval","avatar_url":"https://avatars-next.observableusercontent.com/089f0414fc9025dadb05cc06d7a406bc9be10093187c46729cb4ba3a4098dc30","tier":null}],"members":[{"type":"individual","id":"e04cd7b5f4351ae9","login":"elaval","name":"Ernesto Laval","avatar_url":"https://avatars-next.observableusercontent.com/089f0414fc9025dadb05cc06d7a406bc9be10093187c46729cb4ba3a4098dc30","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Clasificador de imágenes","cells":[{"id":0,"value":"md`# Clasificador de imágenes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"viewof imgFile = file({\n title: \"Seleccionar imagen:\",\n description: `Presionar para seleccionar imagen o arrastrar archivo sobre ${droppedImage || selectedImage ? `imagen en sección \"img\"`: `recuadro blanco`}`,\n accept: \".jpg,.gif,.webp,.png\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"selectedImage || droppedImage \n? html`\n

Archivo \"${fileName}\" - Clasificación estimada : ${TYPES[highestProb]}

\n` \n: html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"selectedImage || droppedImage \n? html`\n\n${_.map(probs, (d,i) => `\n

${TYPES[i]}: ${d3.format(\".2%\")(d)}

\n`)}`\n: html``\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"selectedImage || droppedImage \n? md`Nota: el proceso se hace con imagenes de forma cuadrada de 224x224 pixels. La imagen original ha sido recortada y redimensionada antes de ser procesada. A continuación se muestra la imagen utilizada:`\n: html``\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"{\n // Display cropped image\n selectedImage;\n droppedImage;\n\n const width = 224;\n const height= 224;\n const c = DOM.context2d(width, height);\n \n c.canvas.width = width;\n c.canvas.height = height;\n c.canvas.style.width = width + 'px';\n c.canvas.style.height = height + 'px';\n \n const raw = tf.fromPixels(img).toFloat();\n const cropped = cropImage(raw); \n const resized = tf.image.resizeBilinear(cropped, [IMAGE_SIZE, IMAGE_SIZE])\n // Normalize the image from [0, 255] to [0, 1].\n const offset = tf.scalar(255);\n const normalized = resized.div(offset);\n await tf.toPixels(normalized, c.canvas);\n \n // uncomment to view image\n //return c.canvas\n return selectedImage || droppedImage \n ? c.canvas\n : html``\n return c.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"updateImgFile = {\n if (imgFile && imgFile.name) {\n img.src = await Files.url(imgFile);\n mutable selectedImage = true;\n mutable fileName = imgFile.name;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"highestProb = predict.argMax(1).dataSync()[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"probs = predict.dataSync()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"predict = model.predict(partialMobilenet.predict([input]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"input = {\n selectedImage;\n droppedImage;\n const raw = tf.fromPixels(img).toFloat();\n const cropped = cropImage(raw); \n const resized = tf.image.resizeBilinear(cropped, [IMAGE_SIZE, IMAGE_SIZE])\n \n // Normalize the image from [0, 255] to [-1, 1].\n const offset = tf.scalar(127);\n const normalized = resized.sub(offset).div(offset);\n \n // Reshape to a single-element batch so we can pass it to predict.\n const batched = normalized.expandDims(0);\n return batched;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"mutable fileName = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"mutable selectedImage=null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"mutable droppedImage = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"TYPES = [\"K_I\",\"K_II\", \"K_III_S\", \"K_III_L\", \"K_IV\",\"K_V\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"cropImage = (img) => {\n const size = Math.min(img.shape[0], img.shape[1]);\n const centerHeight = img.shape[0] / 2;\n const beginHeight = centerHeight - (size / 2);\n const centerWidth = img.shape[1] / 2;\n const beginWidth = centerWidth - (size / 2);\n return img.slice([Math.round(beginHeight), Math.round(beginWidth), 0], [size, size, 3]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"IMAGE_SIZE = 224","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"//model =tf.loadModel(\"https://raw.githubusercontent.com/elaval/datasets/master/imageClassifier-model-01/model.json\")\nmodel =tf.loadModel(\"https://raw.githubusercontent.com/elaval/datasets/master/biopsia/imageClassifier-model-01/model.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"partialMobilenet = {\n // Return a model that outputs an internal activation.\n const layer = mobilenet.getLayer('conv_pw_13_relu');\n //const layer = model.getLayer('conv_pw_10_relu');\n return tf.model({inputs: mobilenet.inputs, outputs: layer.output});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"mobilenet = await tf.loadModel('https://storage.googleapis.com/tfjs-models/tfjs/mobilenet_v1_0.25_224/model.json')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"tf = require('https://bundle.run/@tensorflow/tfjs@0.14.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"bootstrap = style_bootstrap","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"d3=require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"import {file,color} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"import {style_bootstrap} from \"@elaval/utils\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"