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