肺結節人工智慧醫療平台
專案屬性:此專案為非公開平台
開發時間:2018年5月 - 2019年9月
功能概述
此專案主要是醫療集團希望針對肺結節的X光圖片
交付大量的資料給AI做機器學習(機器學習部份由其他團隊負責)
最初客戶的客戶(也就是醫生)是透過一套叫Osirix的Mac桌面軟體來標識肺結節
他們希望以這套軟體為標準做出Web版本
而我方團隊開發的平台主要提供以下功能
- 胸腔科醫師上傳大量的肺部X光dicom檔(醫療影像專用檔案)
- dicom檔案上傳(可續傳)後, 我方系統將dicom壓縮檔上傳,接著解壓縮轉成圖檔上傳到系統
- 後台提供醫師登入身份, 讓醫師能夠登入後針對X光圖片正確標示肺結節, 以供後續機器學習用
而我在該專案負責前端的所有功能
以上功能敘述雖然不多
但隱含了高度的技術含量
接下來為該專案較複雜技術說明
大檔上傳
dicom檔案因為量大,一個壓縮檔案動輒5、6GB
因此必須實做續傳功能
才能避免傳一半斷掉後又要重新傳的窘況
續傳的功能我們使用tus續傳協定
先將檔案上傳至Node Tus Server
等檔案完全上傳完成後
Node.js再通知phpgearman啟動任務
Worker再將壓縮檔解壓縮然後dicom檔案轉成圖片依序上傳到系統
因此前端我使用uppy這個套件來做續傳
並且在上傳完成之後
前端每一段時間call api詢問該檔案目前處理進度
並顯示在畫面上
肺結節標識功能
在X光圖上能透過滑鼠拖曳建立出紅色方框來標識肺結節
因此JS必須偵測滑鼠拖曳起始、結束的座標(而且是該X圖上的相對座標)
這部份主要使用JqueryUI的draggable resizable功能來處理
將這兩個座標發api給後端存起來
頁面在每次載入的時候再透過這些相對X光圖片的座標
使用canvas在X光圖片上畫出肺結節標識
此外
這些標識方框必須是可以編輯的
需要在滑鼠點擊兩下後改為編輯狀態
在編輯狀態下該方框可拖曳、可重新調整大小
透過滑鼠滾輪快速切換多張圖片
通常一個病人的肺部環狀X光檔案都是上百張
因此醫師都是使用滑鼠滾輪來切換圖片
而且必須是快速切換讓多張X光圖在轉換時達到類似動畫的效果
醫師才能快速的判定是否為不正常結節
在這行況下必須在手指滑動滾輪一下
可能圖片就要依序切換十幾張
而且這個過程必須是很順的切換圖片不可以有任何停頓
因此我們在進入該頁面一開始就透過前端背景請求將所有圖片依序載入
並建立Image DOM而且全部依序重疊在一起
等圖片全部載完後
醫師只要滑動滾輪
JS會快速切換z-index到指定圖片
達到類似動畫的效果
這個方式是我透過多次摸索才找出的方式
一開始是在切換的時候將圖片做切換
但是發現圖片載入時間在怎麼快也跟不上滑鼠滾輪(手指一滑就可能跳十幾張)
這樣會造成很卡
因此必須要頁面初始化就一次載入所有圖片並且長出Image DOM
才能讓操作順暢
快速切換Demo影片
畫面縮放功能
此功能為透過滑鼠或按鈕能夠將目前的X光圖做縮放
因為有時候X光上的結節非常小
必須放很大醫師才能正確的標示出結節的位置
比較難處理的部份
就是在X光圖片縮放之後
上述的標識功能必須跟著縮放
而滾輪快速切換功能必須也能夠繼續使用
因此這部份我花了很多去處理
主要是使用jquery-panzoom這個套件
並大量的使用它的功能
才完成這個功能
Demo影片(快速切換、縮放X光圖、編輯標識)
總結
一開始光知道這幾個主要需求就有點頭痛
真的是不太好做
尤其是要可以縮放
這個會影響到畫標識(方框)的相對位置
還有大量圖片快速切換而不能卡的問題
這中間tune了又tune終於解決了各種極端的需求
算是在工作上真的有遇到大量技術困難點的一次經驗
不過搞定後經驗值算是有提昇
最後交付時客戶的回應也超乎預期
只說了一句:系統真的很好用,跟原本的桌面軟體幾乎一樣
給了我們系統極大的肯定
算是成功、圓滿而且滿有收穫的一個專案