|
| 1 | +import { |
| 2 | + Enums, |
| 3 | + RenderingEngine, |
| 4 | + imageLoader, |
| 5 | + setVolumesForViewports, |
| 6 | + volumeLoader, |
| 7 | +} from '@cornerstonejs/core'; |
| 8 | +import * as cornerstoneTools from '@cornerstonejs/tools'; |
| 9 | +import { |
| 10 | + createImageIdsAndCacheMetaData, |
| 11 | + initDemo, |
| 12 | + addToggleButtonToToolbar, |
| 13 | + addSliderToToolbar, |
| 14 | + addButtonToToolbar, |
| 15 | + setTitleAndDescription, |
| 16 | + getLocalUrl, |
| 17 | + addSegmentIndexDropdown, |
| 18 | +} from '../../../../utils/demo/helpers'; |
| 19 | +import { ONNXSegmentationController } from '@cornerstonejs/ai'; |
| 20 | +const { MouseBindings, SegmentationRepresentations, Events, KeyboardBindings } = |
| 21 | + cornerstoneTools.Enums; |
| 22 | +const { ViewportType, OrientationAxis } = Enums; |
| 23 | + |
| 24 | +const { segmentation } = cornerstoneTools; |
| 25 | +const { segmentation: segmentationUtils } = cornerstoneTools.utilities; |
| 26 | +const currentViewportType = ViewportType.STACK; |
| 27 | + |
| 28 | +setTitleAndDescription( |
| 29 | + 'Segment Assistant', |
| 30 | + 'Segment Assistant for Segmentation' |
| 31 | +); |
| 32 | + |
| 33 | +// Model configuration for segmentation |
| 34 | +const segmentAI = new ONNXSegmentationController({ |
| 35 | + autoSegmentMode: true, |
| 36 | + models: { |
| 37 | + sam_b: [ |
| 38 | + { |
| 39 | + name: 'sam-b-encoder', |
| 40 | + url: 'https://huggingface.co/schmuell/sam-b-fp16/resolve/main/sam_vit_b_01ec64.encoder-fp16.onnx', |
| 41 | + size: 180, |
| 42 | + key: 'encoder', |
| 43 | + }, |
| 44 | + { |
| 45 | + name: 'sam-b-decoder', |
| 46 | + url: 'https://huggingface.co/schmuell/sam-b-fp16/resolve/main/sam_vit_b_01ec64.decoder.onnx', |
| 47 | + size: 17, |
| 48 | + key: 'decoder', |
| 49 | + }, |
| 50 | + ], |
| 51 | + }, |
| 52 | + modelName: 'sam_b', |
| 53 | +}); |
| 54 | + |
| 55 | +addSliderToToolbar({ |
| 56 | + title: 'Brush Size', |
| 57 | + range: [5, 50], |
| 58 | + defaultValue: 25, |
| 59 | + onSelectedValueChange: (valueAsStringOrNumber) => { |
| 60 | + const value = Number(valueAsStringOrNumber); |
| 61 | + segmentationUtils.setBrushSizeForToolGroup(toolGroupId, value); |
| 62 | + }, |
| 63 | +}); |
| 64 | + |
| 65 | +addToggleButtonToToolbar({ |
| 66 | + title: 'Toggle Enable', |
| 67 | + onClick: () => { |
| 68 | + // Toggle the enable state |
| 69 | + segmentAI.enabled = !segmentAI.enabled; |
| 70 | + segmentAI.initViewport(viewport); |
| 71 | + }, |
| 72 | +}); |
| 73 | + |
| 74 | +const toolGroupId = 'DEFAULT_TOOLGROUP_ID'; |
| 75 | +const renderingEngineId = 'myRenderingEngine'; |
| 76 | +const volumeId = 'volumeId'; |
| 77 | + |
| 78 | +let renderingEngine; |
| 79 | +let viewport; |
| 80 | +let activeViewport; |
| 81 | + |
| 82 | +// Add the base tools we need |
| 83 | +cornerstoneTools.addTool(cornerstoneTools.PanTool); |
| 84 | +cornerstoneTools.addTool(cornerstoneTools.ZoomTool); |
| 85 | +cornerstoneTools.addTool(cornerstoneTools.StackScrollTool); |
| 86 | +cornerstoneTools.addTool(cornerstoneTools.ProbeTool); // Needed as a base for MarkerInclude/Exclude |
| 87 | +cornerstoneTools.addTool(cornerstoneTools.RectangleROITool); // Base for BoxPrompt |
| 88 | +cornerstoneTools.addTool(cornerstoneTools.BrushTool); // Base for BoxPrompt |
| 89 | +// Create a tool group and add the needed tools |
| 90 | +const toolGroup = |
| 91 | + cornerstoneTools.ToolGroupManager.createToolGroup(toolGroupId); |
| 92 | + |
| 93 | +toolGroup.addTool(cornerstoneTools.ZoomTool.toolName); |
| 94 | +toolGroup.addTool(cornerstoneTools.StackScrollTool.toolName); |
| 95 | +toolGroup.addTool(cornerstoneTools.PanTool.toolName); |
| 96 | +toolGroup.addTool(cornerstoneTools.ProbeTool.toolName); |
| 97 | +toolGroup.addToolInstance( |
| 98 | + 'CircularBrush', |
| 99 | + cornerstoneTools.BrushTool.toolName, |
| 100 | + { |
| 101 | + activeStrategy: 'FILL_INSIDE_CIRCLE', |
| 102 | + preview: { |
| 103 | + enabled: true, |
| 104 | + }, |
| 105 | + useCenterSegmentIndex: true, |
| 106 | + } |
| 107 | +); |
| 108 | + |
| 109 | +// Pan (middle or Ctrl+drag) |
| 110 | +toolGroup.setToolActive(cornerstoneTools.PanTool.toolName, { |
| 111 | + bindings: [{ mouseButton: MouseBindings.Auxiliary }], |
| 112 | +}); |
| 113 | +toolGroup.setToolPassive(cornerstoneTools.ProbeTool.toolName, {}); |
| 114 | + |
| 115 | +// Zoom (right mouse) |
| 116 | +toolGroup.setToolActive(cornerstoneTools.ZoomTool.toolName, { |
| 117 | + bindings: [ |
| 118 | + { mouseButton: MouseBindings.Secondary }, |
| 119 | + { mouseButton: MouseBindings.Wheel, modifierKey: KeyboardBindings.Ctrl }, |
| 120 | + ], |
| 121 | +}); |
| 122 | + |
| 123 | +// Stack Scroll (mouse wheel or Alt+drag) |
| 124 | +toolGroup.setToolActive(cornerstoneTools.StackScrollTool.toolName, { |
| 125 | + bindings: [{ mouseButton: MouseBindings.Wheel }], |
| 126 | +}); |
| 127 | +toolGroup.setToolActive('CircularBrush', { |
| 128 | + bindings: [{ mouseButton: MouseBindings.Primary }], |
| 129 | +}); |
| 130 | + |
| 131 | +const content = document.getElementById('content'); |
| 132 | +const viewportContainer = document.createElement('div'); |
| 133 | +viewportContainer.style.width = '512px'; |
| 134 | +viewportContainer.style.height = '512px'; |
| 135 | +viewportContainer.style.position = 'relative'; |
| 136 | +content.appendChild(viewportContainer); |
| 137 | + |
| 138 | +// Logging elements on the page |
| 139 | +const encoderLatency = document.createElement('div'); |
| 140 | +encoderLatency.id = 'encoder'; |
| 141 | +content.appendChild(encoderLatency); |
| 142 | + |
| 143 | +const decoderLatency = document.createElement('div'); |
| 144 | +decoderLatency.id = 'decoder'; |
| 145 | +content.appendChild(decoderLatency); |
| 146 | + |
| 147 | +const logDiv = document.createElement('div'); |
| 148 | +logDiv.id = 'status'; |
| 149 | +content.appendChild(logDiv); |
| 150 | + |
| 151 | +// disable context menu |
| 152 | +viewportContainer.oncontextmenu = () => false; |
| 153 | + |
| 154 | +segmentationUtils.setBrushSizeForToolGroup(toolGroupId, 15); |
| 155 | + |
| 156 | +addButtonToToolbar({ |
| 157 | + title: 'Clear', |
| 158 | + onClick: () => { |
| 159 | + segmentAI.clear(activeViewport); |
| 160 | + viewport.render(); |
| 161 | + }, |
| 162 | +}); |
| 163 | + |
| 164 | +const viewportId = 'CURRENT_VIEWPORT'; |
| 165 | +const segmentationId = 'segmentationId'; |
| 166 | + |
| 167 | +addSegmentIndexDropdown(segmentationId); |
| 168 | + |
| 169 | +async function updateViewport() { |
| 170 | + await initDemo(); |
| 171 | + |
| 172 | + if (renderingEngine) { |
| 173 | + // renderingEngine.destroy(); |
| 174 | + segmentation.removeAllSegmentationRepresentations(); |
| 175 | + segmentation.removeAllSegmentations(); |
| 176 | + } |
| 177 | + |
| 178 | + renderingEngine = new RenderingEngine(renderingEngineId); |
| 179 | + |
| 180 | + const viewportInput = { |
| 181 | + viewportId, |
| 182 | + element: viewportContainer, |
| 183 | + type: currentViewportType, |
| 184 | + defaultOptions: {}, |
| 185 | + }; |
| 186 | + |
| 187 | + if (currentViewportType === ViewportType.ORTHOGRAPHIC) { |
| 188 | + viewportInput.defaultOptions.orientation = OrientationAxis.SAGITTAL; |
| 189 | + } |
| 190 | + |
| 191 | + renderingEngine.setViewports([viewportInput]); |
| 192 | + toolGroup.addViewport(viewportId, renderingEngineId); |
| 193 | + |
| 194 | + const imageIds = await createAndLoadData(); |
| 195 | + |
| 196 | + if (currentViewportType === ViewportType.STACK) { |
| 197 | + viewport = renderingEngine.getViewport(viewportId); |
| 198 | + await viewport.setStack(imageIds.reverse().slice(50, 190)); |
| 199 | + |
| 200 | + cornerstoneTools.utilities.stackContextPrefetch.enable(viewportContainer); |
| 201 | + viewport.render(); |
| 202 | + } else { |
| 203 | + // For sagittal, create volume and set it |
| 204 | + const volume = await volumeLoader.createAndCacheVolume(volumeId, { |
| 205 | + imageIds, |
| 206 | + }); |
| 207 | + volume.load(); |
| 208 | + await setVolumesForViewports(renderingEngine, [{ volumeId }], [viewportId]); |
| 209 | + viewport = renderingEngine.getViewport(viewportId); |
| 210 | + viewport.render(); |
| 211 | + } |
| 212 | + |
| 213 | + // Add a segmentation that will contains the contour annotations |
| 214 | + const segmentationImages = |
| 215 | + await imageLoader.createAndCacheDerivedLabelmapImages(imageIds); |
| 216 | + |
| 217 | + const segmentationImageIds = segmentationImages.map((image) => image.imageId); |
| 218 | + |
| 219 | + segmentation.addSegmentations([ |
| 220 | + { |
| 221 | + segmentationId, |
| 222 | + representation: { |
| 223 | + type: SegmentationRepresentations.Labelmap, |
| 224 | + data: { |
| 225 | + imageIds: segmentationImageIds, |
| 226 | + }, |
| 227 | + }, |
| 228 | + }, |
| 229 | + ]); |
| 230 | + |
| 231 | + const segMap = { |
| 232 | + [viewport.id]: [{ segmentationId }], |
| 233 | + }; |
| 234 | + |
| 235 | + // Create a segmentation representation associated to the toolGroupId |
| 236 | + await segmentation.addLabelmapRepresentationToViewportMap(segMap); |
| 237 | + |
| 238 | + activeViewport = viewport; |
| 239 | + await segmentAI.initModel(); |
| 240 | + |
| 241 | + viewport.element.addEventListener(Events.KEY_DOWN, (evt) => { |
| 242 | + const { key } = evt.detail; |
| 243 | + const { element } = activeViewport; |
| 244 | + if (key === 'Escape') { |
| 245 | + cornerstoneTools.cancelActiveManipulations(element); |
| 246 | + segmentAI.rejectPreview(element); |
| 247 | + } else if (key === 'Enter') { |
| 248 | + segmentAI.acceptPreview(element); |
| 249 | + } |
| 250 | + }); |
| 251 | +} |
| 252 | + |
| 253 | +async function createAndLoadData() { |
| 254 | + const imageIdsFull = await createImageIdsAndCacheMetaData({ |
| 255 | + StudyInstanceUID: |
| 256 | + '1.3.6.1.4.1.14519.5.2.1.7009.2403.334240657131972136850343327463', |
| 257 | + SeriesInstanceUID: |
| 258 | + '1.3.6.1.4.1.14519.5.2.1.7009.2403.226151125820845824875394858561', |
| 259 | + wadoRsRoot: |
| 260 | + getLocalUrl() || 'https://d14fa38qiwhyfd.cloudfront.net/dicomweb', |
| 261 | + }); |
| 262 | + return imageIdsFull.reverse(); |
| 263 | +} |
| 264 | + |
| 265 | +updateViewport(); |
![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4&size=40){kind=avatar}
0 commit comments