專案屬性：此專案為非公開平台

開發時間：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終於解決了各種極端的需求

算是在工作上真的有遇到大量技術困難點的一次經驗

不過搞定後經驗值算是有提昇

最後交付時客戶的回應也超乎預期

只說了一句：系統真的很好用，跟原本的桌面軟體幾乎一樣

給了我們系統極大的肯定

算是成功、圓滿而且滿有收穫的一個專案

肺結節人工智慧醫療平台