29:null 2a:["$","title",null,{"children":"Loading local image files examples | Berend Weel | Observable"}] 2f:Tba6,multiFileDict = { function ensureDirs(result, subdir, type, caseNr, algorithm) { result['metadata']['subdir'] = subdir if (result[subdir] === undefined) { result[subdir] = {}; } if (result[subdir][type] === undefined) { result[subdir][type] = {} } if (algorithm === undefined) { if (result[subdir][type][caseNr] === undefined) { result[subdir][type][caseNr] = {}; } } else { if (result[subdir][type][algorithm] === undefined) { result[subdir][type][algorithm] = {}; } if (result[subdir][type][algorithm][caseNr] === undefined) { result[subdir][type][algorithm][caseNr] = {}; } } } function parseScans(file, result) { const scans = file.webkitRelativePath.match(/(.*)\/(.*)\/scans\/(.*)\/(.*)\.png/i); if (scans) { const subdir = scans[1]; const other_dirs = scans[2]; let caseNr = parseInt(scans[3]); let slice = parseInt(scans[4]); ensureDirs(result, subdir, 'scans', caseNr) result[subdir]['scans'][caseNr][slice] = { name: file.name, path: subdir + '/' + other_dirs, file: file }; } } function parsePredictions(file, result) { const pred = file.webkitRelativePath.match(/(.*)\/(.*)\/predicted_masks\/(.*)\/(.*)\/(.*)\.png/i); if (pred) { const subdir = pred[1]; const other_dirs = pred[2]; let algorithm = pred[3]; let caseNr = parseInt(pred[4]); let slice = parseInt(pred[5]); ensureDirs(result, subdir, 'predicted_masks', caseNr, algorithm) result[subdir]['predicted_masks'][algorithm][caseNr][slice] = { name: file.name, path: subdir + '/' + other_dirs, file: file }; } } function parseGroundTruth(file, result) { const gt = file.webkitRelativePath.match(/(.*)\/(.*)\/ground_truth_masks\/(.*)\/(.*)\.png/i); if (gt) { const subdir = gt[1]; const other_dirs = gt[2]; let caseNr = parseInt(gt[3]); let slice = parseInt(gt[4]); ensureDirs(result, subdir, 'ground_truth', caseNr) result[subdir]['ground_truth'][caseNr][slice] = { name: file.name, path: subdir + '/' + other_dirs, file: file }; } } let result = {}; for (const file of multiFileList) { const name = file.name; const path = file.webkitRelativePath; if (file.name === "manifest.json") { const text = await file.text(); result = { ...JSON.parse(text), ...result } } else { if (result['metadata'] === 'undefined') { result['metadata'] = {} } parseScans(file, result); parseGroundTruth(file, result); parsePredictions(file, result); } } return result; }30:T563,viewof metrics = { function metric_def(algorithm) { if (algorithm === "ground_truth") { return html`

` } else { return html`

DSC: ${multiFileDict.cases[caseNo].algorithms[algorithm].metrics.DSC.value_for_patient}
SDSC: ${multiFileDict.cases[caseNo].algorithms[algorithm].metrics.SDSC_2mm.value_for_patient}

DSC: ${multiFileDict.cases[caseNo].algorithms[algorithm].metrics.DSC.values_per_slice[sliceNo]}
SDSC: ${multiFileDict.cases[caseNo].algorithms[algorithm].metrics.SDSC_2mm.values_per_slice[sliceNo]}

` } } let metrics = [] metrics.push(metric_def('ground_truth')) for (const algorithm of multiFileDict.metadata.clusters) { metrics.push(metric_def(algorithm.name)) } const outer_div = html`

${metrics}

` return outer_div }31:T5e3,function drawComparisonCanvas(canvasIds, targetId) { const canvasContainer = document.getElementById('comparison'); canvasContainer.innerHTML=''; let inputData = []; canvasIds.map(canvas => { const canvasData = canvas.split("/"); // To separate id, caseNo and SliceNo // inputData.push({ // id: canvasData[0], // case: canvasData[1], // slice: canvasData[2], // imageFile: loadImage(canvasData[0], canvasData[1], canvasData[2]) // }); // inputData.push(loadImage(canvasData[0], canvasData[1], canvasData[2])); inputData.push( loadImage(multiFileDict.metadata.subdir, 'predicted_masks', canvasData[1], canvasData[2] , canvasData[0])) }) console.log(inputData); multiSample(loadImage(multiFileDict.metadata.subdir, 'scans', caseNo, sliceNo), inputData, targetId); const canvasToCompare = html`

${targetId}

` canvasContainer.appendChild(canvasToCompare); // const groundTruth = loadImage("segmentations_without_variations", canvasData[1], canvasData[2]); // sample(loadImage("images", canvasData[1], canvasData[2]), loadImage(canvasData[0], canvasData[1], canvasData[2]), groundTruth, 'selected'+canvasData[0]); }32:T74f,multiSample = (background, inputArray, targetId) => { const bg_image = new Image(); bg_image.src = URL.createObjectURL(background); let images = []; inputArray.forEach(function(inputFile) { const image = new Image(); image.src = URL.createObjectURL(inputFile); images.push(image); }); let targetImage = null; let cols = 0; let rows = 0; let bgImageLoaded = new Promise((resolve, reject) => { bg_image.onload = function() { const { cv } = window; targetImage = new cv.imread(bg_image); cols = targetImage.cols; rows = targetImage.rows; resolve(); } }); bgImageLoaded.then(function() { let actions = images.map( function(image) { return new Promise((resolve, reject) => { image.onload = function() { const { cv } = window; // Source image const contour_src = new cv.imread(image); // Convert to binary cv.cvtColor(contour_src, contour_src, cv.COLOR_RGBA2GRAY, 0); cv.threshold(contour_src, contour_src, 120, 200, cv.THRESH_BINARY); // Find contours let contours = new cv.MatVector(); let hierarchy = new cv.Mat(); cv.findContours(contour_src, contours, hierarchy, cv.RETR_CCOMP, cv.CHAIN_APPROX_SIMPLE); // Draw contours on destination image let color = new cv.Scalar(0, 255, 0, 255); cv.drawContours(targetImage, contours, -1, color, 1, cv.LINE_8, hierarchy, 32); // Cleanup contour_src.delete(); contours.delete(); hierarchy.delete(); resolve(); } }) }); let results = Promise.all(actions); results.then(function() { const { cv } = window; cv.imshow(targetId, targetImage); targetImage.delete(); }) }); return }33:T979,sample = (background, input, groundTruth, targetId) => { const bg_image = new Image(); bg_image.src = URL.createObjectURL(background); const image = new Image(); image.src = URL.createObjectURL(input); const imgGroundTruth = new Image(); if (groundTruth) { imgGroundTruth.src = URL.createObjectURL(groundTruth); } image.onload = function() { const { cv } = window; // Source and destination images const contour_src = new cv.imread(image); const ct_scan = new cv.imread(bg_image); const cols = ct_scan.cols; const rows = ct_scan.rows; cv.imshow(targetId, ct_scan); // Convert to binary cv.cvtColor(contour_src, contour_src, cv.COLOR_RGBA2GRAY, 0); cv.threshold(contour_src, contour_src, 120, 200, cv.THRESH_BINARY); // Find contours let contours = new cv.MatVector(); let hierarchy = new cv.Mat(); cv.findContours(contour_src, contours, hierarchy, cv.RETR_CCOMP, cv.CHAIN_APPROX_SIMPLE); // Draw contours on destination image const matContour = cv.Mat.zeros(contour_src.cols, contour_src.rows, cv.CV_8UC1); let color = new cv.Scalar(255); cv.drawContours(matContour, contours, -1, color, 1, cv.LINE_8, hierarchy, 32); if (groundTruth) { // Ring overlap let matMask = getGroundTruthMask(imgGroundTruth); let green = new cv.Mat(matMask.cols, matMask.rows, cv.CV_8UC4, new cv.Scalar(0,255,0,255)); let greenMask = cv.Mat.zeros(cols, rows, cv.CV_8UC1); cv.bitwise_and(matMask, matContour, greenMask) green.copyTo(ct_scan, greenMask); // Not ring overlap let matInvMask = new cv.Mat(); cv.bitwise_not(matMask, matInvMask); let red = new cv.Mat(matMask.cols, matMask.rows, cv.CV_8UC4, new cv.Scalar(255,0,0,255)); let redMask = cv.Mat.zeros(cols, rows, cv.CV_8UC1); cv.bitwise_and(matInvMask, matContour, redMask); red.copyTo(ct_scan, redMask); // Show result and clean up cv.imshow(targetId, ct_scan); } else { // Draw contours on destination image for (let i = 0; i < contours.size(); ++i) { let color = new cv.Scalar(0, 255, 0, 255); cv.drawContours(ct_scan, contours, i, color, 1, cv.LINE_8, hierarchy, 160); } cv.imshow(targetId, ct_scan); } contour_src.delete(); ct_scan.delete(); contours.delete(); hierarchy.delete(); }; }34:T482,getGroundTruthMask = (imgGroundTruth) => { const { cv } = window; const matGroundTruth = new cv.imread(imgGroundTruth); // Convert to binary cv.cvtColor(matGroundTruth, matGroundTruth, cv.COLOR_RGBA2GRAY, 0); cv.threshold(matGroundTruth, matGroundTruth, 120, 200, cv.THRESH_BINARY); // Find contours let contours = new cv.MatVector(); let hierarchy = new cv.Mat(); cv.findContours(matGroundTruth, contours, hierarchy, cv.RETR_CCOMP, cv.CHAIN_APPROX_SIMPLE); // Draw contours on destination image let matContours = cv.Mat.ones(matGroundTruth.cols, matGroundTruth.rows, cv.CV_8U); let color2 = new cv.Scalar(0); cv.drawContours(matContours, contours, -1, color2, 1, cv.LINE_8, hierarchy, 160); // Calculate distance transform let matDist = new cv.Mat(); cv.distanceTransform(matContours, matDist, cv.DIST_L2, 3); // Threshold (range 0 .. 1) let matThreshold = new cv.Mat(); cv.threshold(matDist, matThreshold, distance_threshold, 1, cv.THRESH_BINARY_INV); // Convert to 8U, range 0 .. 255 let matConvert = new cv.Mat(); matThreshold.convertTo(matConvert, cv.CV_8U, 255, 0); return matConvert; }35:[] 2d:{"id":"8b1dfdaa1faaba03","slug":"loading-local-image-files-examples","title":"Loading local image files examples","thumbnail":"773746fb4b00cdaa4cb478619ed5097f3bcfcc7c29074e7da12dbcd5b862fdf6","access_level":"public","create_time":"$D2020-07-07T11:36:21.473Z","update_time":"$D2020-07-10T11:07:40.427Z","view_time":null,"first_public_time":"$D2020-07-07T12:00:18.749Z","has_unpublished_edits":null,"fork":{"id":"d77f991fa3df60a5","slug":"loading-local-image-files-examples","title":"Loading local image files examples","owner":{"id":"137e4289e70da9fc","login":"maartenvm","name":"Maarten van Meersbergen"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7395f578bf999957","login":"bpmweel","name":"Berend Weel","avatar_url":"https://avatars-next.observableusercontent.com/1c8f8234885105c2c346d7241d2c36a454c08bc4afff47fce6f50f922cfa4793","tier":"starter_2024"},"version":1374,"publish_version":1374,"role":null,"authored":false,"authors":[{"type":"individual","id":"97b19b34427b9cf0","login":"bpmweel","name":"Berend Weel","avatar_url":"https://avatars-next.observableusercontent.com/1c8f8234885105c2c346d7241d2c36a454c08bc4afff47fce6f50f922cfa4793","tier":null}],"members":[{"type":"individual","id":"97b19b34427b9cf0","login":"bpmweel","name":"Berend Weel","avatar_url":"https://avatars-next.observableusercontent.com/1c8f8234885105c2c346d7241d2c36a454c08bc4afff47fce6f50f922cfa4793","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Loading local image files examples","cells":[{"id":656,"value":"md`# Loading local image files examples`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"md`## Load all files in folder`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"viewof multiFiles = html`` //load segmentation slices for this case","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"multiFileList = Array.from(multiFiles);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"numberOfCases = Object.keys(multiFileDict[\"cases\"]).length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"numberOfSlices = Object.keys(multiFileDict[\"cases\"][caseNo]).length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"viewof caseNo = {\n const keys = Object.keys(multiFileDict[\"cases\"]);\n let i = 0;\n \n return slider({\n value: this ? this.value : i, step: 1, max: keys.length -1,\n getValue: n => keys[n.value],\n description: \"Case Number\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"viewof sliceNo = {\n const keys = Object.keys(multiFileDict[\"cases\"][caseNo][\"scans\"]);\n let i = 0;\n \n return slider({\n value: this ? this.value : i, step: 1, max: keys.length -1,\n getValue: n => keys[n.value],\n description: \"Slice Number\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1352,"value":"viewof distance_threshold = slider({\n value: 2,\n min: 0, \n max: 10, \n step: 1,\n description: \"Distance Threshold\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"viewof canvasses = {\n function canvas_def(algorithm, addCheckbox) {\n return html`\n

${algorithm}

\n `\n }\n \n let canvs = []\n canvs.push(canvas_def('ground_truth', false))\n for (const algorithm of multiFileDict.metadata.clusters) {\n canvs.push(canvas_def(algorithm.name, true))\n }\n \n const outer_div = html`\n

\n ${canvs}\n

`\n \n return outer_div\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1277,"value":"comparision = html `

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1292,"value":"function compare(){\n const checkboxes = Array.from(document.getElementsByName('selectScan'))\n const selectedIds = checkboxes.filter(c => c.checked).map(ch => ch.dataset.id);\n drawComparisonCanvas(selectedIds, 'comparisonCanvas');\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1295,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1343,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1297,"value":"function setCanvas(algorithm, caseNo, sliceNo) {\nreturn html`

${algorithm}

` \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"loadImage = function(subDir, type, caseNo, sliceNo, algorithm) {\n if (algorithm === undefined){\n if (multiFileDict[subDir][type][caseNo] !== undefined &&\n multiFileDict[subDir][type][caseNo][sliceNo] !== undefined) {\n return multiFileDict[subDir][type][caseNo][sliceNo].file;\n }\n } else {\n if (multiFileDict[subDir][type][algorithm] !== undefined &&\n multiFileDict[subDir][type][algorithm][caseNo] !== undefined &&\n multiFileDict[subDir][type][algorithm][caseNo][sliceNo] !== undefined) {\n return multiFileDict[subDir][type][algorithm][caseNo][sliceNo].file;\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"{\n sample(\n loadImage(multiFileDict.metadata.subdir, 'scans', caseNo, sliceNo),\n loadImage(multiFileDict.metadata.subdir, 'ground_truth', caseNo, sliceNo),\n null,\n 'ground_truth');\n for (const algorithm of multiFileDict.metadata.clusters) {\n sample(loadImage(multiFileDict.metadata.subdir, 'scans', caseNo, sliceNo),\n loadImage(multiFileDict.metadata.subdir, 'predicted_masks', caseNo, sliceNo,algorithm.name), \n loadImage(multiFileDict.metadata.subdir, 'ground_truth', caseNo, sliceNo),\n algorithm.name);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1242,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"loadOpenCv = {\n return new Promise((resolve, reject) => {\n const script = document.createElement('script');\n script.src = 'https://docs.opencv.org/master/opencv.js';\n script.type = 'text/javascript';\n script.async = true;\n\n script.onabort = () => {\n reject('OpenCV Load failed.');\n };\n\n script.onload = () => {\n if (window.cv !== undefined) {\n resolve('OpenCV Load success.');\n }\n console.log('hallo');\n };\n \n document.body.appendChild(script);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1305,"value":"import {html, svg} from \"@observablehq/htl\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1310,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2e:"$2d:body"