29:null 2a:["$","title",null,{"children":"Medical Image Segmentation Clustering and Benchmarking | Maarten van Meersbergen | Observable"}] 2f:T527,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])); }) console.log(inputData); multiSample(loadImage("images", 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]); }30: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 }31:T87d,sample = (background, input, groundTruth, targetId) => { const bg_image = new Image(); bg_image.src = URL.createObjectURL(background); if(input && groundTruth) { const image = new Image(); image.src = URL.createObjectURL(input); const imgGroundTruth = new Image(); 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); // 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); //getGroundTruthMask(imgGroundTruth)); contour_src.delete(); ct_scan.delete(); contours.delete(); hierarchy.delete(); }; } return }32: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; }33:Tca4,surfaceDiceHighlight = (background, input, targetId) => { const bg_image = new Image(); bg_image.src = URL.createObjectURL(background); const image = new Image(); image.src = URL.createObjectURL(input); 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); 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 let contour_img_for_distance = cv.Mat.ones(contour_src.cols, contour_src.rows, cv.CV_8UC1); let contour_img_for_coloring = new cv.Mat(contour_src.cols, contour_src.rows, cv.CV_8UC4, new cv.Scalar(0,0,0,255)); let color = new cv.Scalar(0, 255, 0, 255); let color2 = new cv.Scalar(0); let color3 = new cv.Scalar(255, 255, 255, 255); cv.drawContours(ct_scan, contours, -1, color, 1, cv.LINE_8, hierarchy, 160); cv.drawContours(contour_img_for_distance, contours, -1, color2, 1, cv.LINE_8, hierarchy, 160); cv.drawContours(contour_img_for_coloring, contours, -1, color3, 1, cv.LINE_8, hierarchy, 160); // Calculate distance transform let dist = new cv.Mat(contour_src.cols, contour_src.rows, cv.CV_8UC1); cv.distanceTransform(contour_img_for_distance, dist, cv.DIST_L2, 3); let threshold = new cv.Mat(contour_src.cols, contour_src.rows, cv.CV_8UC1); cv.threshold(dist, threshold, distance_threshold, 255, cv.THRESH_BINARY_INV); let imgNormalize = new cv.Mat(contour_src.cols, contour_src.rows, cv.CV_8UC1); console.log(type2str(imgNormalize.type())); cv.normalize(threshold, imgNormalize, 0, 1.0, cv.NORM_MINMAX); console.log(type2str(imgNormalize.type())); imgNormalize.convertTo(imgNormalize, cv.CV_8UC4); console.log(type2str(imgNormalize.type())); cv.cvtColor(imgNormalize, imgNormalize, cv.COLOR_GRAY2RGB); console.log(type2str(imgNormalize.type())); let diff = new cv.Mat(contour_src.cols, contour_src.rows, cv.CV_8UC4, new cv.Scalar(0,0,0,255)); // console.log(type2str(contour_img_for_coloring.type())); // cv.cvtColor(contour_img_for_coloring, contour_img_for_coloring, cv.COLOR_RGB2RGBA); // console.log(type2str(contour_img_for_coloring.type())); // cv.cvtColor(imgNormalize, imgNormalize, cv.COLOR_GRAY2RGB); // console.log(type2str(imgNormalize.type())); // cv.absdiff(contour_img_for_coloring, imgNormalize, diff); // Show result and clean up cv.imshow(targetId, contour_img_for_coloring); contour_src.delete(); ct_scan.delete(); contours.delete(); hierarchy.delete(); contour_img_for_distance.delete(); dist.delete(); threshold.delete(); imgNormalize.delete(); diff.delete(); // mask.delete(); contour_img_for_coloring.delete(); }; }34:[] 2d:{"id":"257af07ce4e536b2","slug":"medical-image-segmentation-clustering-and-benchmarking","title":"Medical Image Segmentation Clustering and Benchmarking","thumbnail":"638a564d51bc7fdff8d4dcc7c4809307ed6264e3485dbbfe7d4ba3ec352e3fd7","access_level":"public","create_time":"$D2020-07-10T08:37:26.047Z","update_time":"$D2020-07-10T10:22:41.240Z","view_time":null,"first_public_time":"$D2020-07-10T10:23:17.985Z","has_unpublished_edits":null,"fork":{"id":"5bd1b466db0f99c4","slug":"loading-local-image-files-examples/5","title":"Loading local image files examples","owner":{"id":"4c86536cb4c6cf1e","login":"pushpanjalip","name":"Pushpanjali"}},"stars":0,"starred":false,"owner":{"type":"team","id":"137e4289e70da9fc","login":"maartenvm","name":"Maarten van Meersbergen","avatar_url":"https://avatars-next.observableusercontent.com/5480f938072b1f5f75f78a2dc622b8d012e1c72b52d09e633e25a1b9bfb2d85c","tier":"starter_2024"},"version":1077,"publish_version":1077,"role":null,"authored":false,"authors":[{"type":"individual","id":"efce69e3c64a4fb9","login":"maartenvm","name":"Maarten van Meersbergen","avatar_url":"https://avatars-next.observableusercontent.com/5480f938072b1f5f75f78a2dc622b8d012e1c72b52d09e633e25a1b9bfb2d85c","tier":null}],"members":[{"type":"individual","id":"efce69e3c64a4fb9","login":"maartenvm","name":"Maarten van Meersbergen","avatar_url":"https://avatars-next.observableusercontent.com/5480f938072b1f5f75f78a2dc622b8d012e1c72b52d09e633e25a1b9bfb2d85c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Medical Image Segmentation Clustering and Benchmarking","cells":[{"id":46,"value":"md `# Medical Image Segmentation Clustering and Benchmarking`","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":"multiFileDict = {\n var result = {};\n \n multiFileList.forEach(function(f) { \n var name = f.name;\n var path = f.webkitRelativePath;\n var subdir = f.webkitRelativePath.match(/variations_decathlon_dataset\\/(.*)\\//i)[1];\n var caseNr = parseInt(f.name.match(/Case([0-9]+)_/i)[1]);\n var slice = parseInt(f.name.match(/Case[0-9]+[a-zA-Z_]+([0-9]+)/i)[1]);\n \n if (result[subdir] === undefined) { \n result[subdir] = [];\n }\n if (result[subdir][caseNr] === undefined) {\n result[subdir][caseNr] = [];\n }\n result[subdir][caseNr][slice] = {\n name: name,\n path: subdir,\n file: f\n }; \n })\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"numberOfCases = Object.keys(multiFileDict[\"images\"]).length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"numberOfSlices = Object.keys(multiFileDict[\"images\"][caseNo]).length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"viewof caseSlider = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"caseNo = Object.keys(multiFileDict.images)[caseSlider];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"viewof sliceNo = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1028,"value":"md `Surface Distance (For Highlight)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1021,"value":"viewof distance_threshold = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"sliceNo\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"gallery = html`\n

\n ${Object.keys(multiFileDict).sort().slice(1).map((fileName, index) => {\n const groundTruth = loadImage(\"segmentations_without_variations\", caseNo, sliceNo);\n if(groundTruth) {\n sample(loadImage(\"images\", caseNo, sliceNo), \n loadImage(fileName, caseNo,sliceNo),groundTruth, fileName);\n return setCanvas(fileName, caseNo, sliceNo, true)\n } else {\n return html `

No slice found

`\n }\n })}\n

\n\n\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":901,"value":"comparison = html `

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":939,"value":"popup = html ``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":884,"value":"function getCanvasContent() {\n Object.keys(multiFileDict).sort().slice(1).map((fileName, index) => {\n const groundTruth = loadImage(\"segmentations_without_variations\", caseNo, sliceNo);\n \n const canvasses = setCanvas(fileName, caseNo, sliceNo, true)\n if(sample(loadImage(\"images\", caseNo, sliceNo), loadImage(fileName, caseNo, sliceNo),groundTruth, fileName)) {\n return canvasses\n } else {\n return html `

No slices found

`\n }\n })\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"function setCanvas(id, caseNo, sliceNo, addCheckbox) {\nreturn html`

\n ${addCheckbox ? \n html`` \n : null}\n \n

\n ${id}\n \n

` \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"function compare(){\n const checkboxes = Array.from(document.getElementsByName('selectScan'))\n const selected = checkboxes.filter(c => c.checked)\n if(selected.length === 2) {\n const selectedIds = selected.map(ch => ch.dataset.id);\n drawComparisonCanvas(selectedIds, 'comparisonCanvas');\n } else {\n const container = document.getElementById('comparison');\n comparison.innerHTML = `

You can select only 2 scans to compare

`\n }\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"loadImage = function(subDir, caseNo, sliceNo) {\n if (multiFileDict[subDir][caseNo] != undefined &&\n multiFileDict[subDir][caseNo][sliceNo] != undefined) {\n var file = multiFileDict[subDir][caseNo][sliceNo].file;\n if (file != undefined) {\n return file;\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1058,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":820,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"type2str = function(type) {\n const { cv } = window;\n \n let r;\n\n let depth = type & cv.CV_MAT_DEPTH_MASK;\n let chans = 1 + (type >> cv.CV_CN_SHIFT);\n\n switch ( depth ) {\n case cv.CV_8U: r = \"8U\"; break;\n case cv.CV_8S: r = \"8S\"; break;\n case cv.CV_16U: r = \"16U\"; break;\n case cv.CV_16S: r = \"16S\"; break;\n case cv.CV_32S: r = \"32S\"; break;\n case cv.CV_32F: r = \"32F\"; break;\n case cv.CV_64F: r = \"64F\"; break;\n default: r = \"User\"; break;\n }\n\n r += \"C\";\n r += (chans+'0');\n\n return r;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"import {html, svg} from \"@observablehq/htl\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"function unsafe_html() {\n const span = document.createElement(\"span\");\n span.innerHTML = String.raw.apply(this, arguments);\n return span;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"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"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2e:"$2d:body"