影像檢視與指標計算

本專案利用 Flask 建立一個簡單的網頁應用程式，提供影像檢視與模型指標計算功能。應用程式能夠展示原始影像、模型預測（二值圖）、真實標註（二值圖）以及在原始影像上標註的結果，同時計算 IoU 與 Dice 指標，方便評估預測效果。

專案結構

impact/
├── app.py
├── templates/
│   └── index.html
└── static/
    ├── original/         # 原始圖像目錄
    ├── predict/          # 模型輸出 Predict（二值圖）目錄
    ├── ground_truth/     # 原始 Ground Truth（二值圖）目錄
    └── draw_predict/     # 在原始圖像上標註的 Label 目錄

功能說明

• 原始影像 (Original): 放置待檢視的原始影像檔案。
• 模型預測 (Predict): 放置模型輸出的二值化預測影像；若預測影像的前景像素數為 0，則表示該影像未檢測到物件。
• 真實標註 (Ground Truth): 放置正確的二值化標註影像。
• 疊加標註 (Draw Predict): 放置將預測結果疊加於原始影像上的影像檔案。

此外，應用程式會針對共同存在於各資料夾中的影像計算以下指標：

• IoU (Intersection over Union): 預測與真實標註之交集與聯集比率。
• Dice Coefficient: 衡量預測與真實標註間相似度的指標。

使用方法

1. 環境建置

請先安裝 Python 與下列必要套件，建議使用虛擬環境管理相依套件：

pip install flask pillow numpy

2. 準備資料夾

將影像檔案依照以下對應放置至各自資料夾中，請注意檔案名稱需一致（副檔名可不同）：

• static/original: 放置原始影像
• static/predict: 放置模型預測影像（二值圖）
• static/ground_truth: 放置真實標註影像（二值圖）
• static/draw_predict: 放置疊加標註後的影像

3. 啟動應用程式

在專案根目錄下執行：

python app.py

啟動後，請使用瀏覽器開啟 http://127.0.0.1:5000/ 以檢視網頁效果。

4. 功能展示

• 左側欄位： 顯示所有影像檔案清單，點擊後可直接跳轉到對應影像展示區塊。
• 右側主要區域： 分別展示原始影像、模型預測、真實標註以及疊加標註的結果，同時呈現各影像的 IoU 與 Dice 指標。
• 統計資訊： 頁面上方會顯示 Predict 與 Original 影像的數量、預測缺失狀況以及未檢測到物件的影像列表。

Code 說明

• app.py：

  • 讀取並比對 static/ 下各資料夾中的影像檔案。
  • 計算 IoU 與 Dice 指標。
  • 檢查 Predict 影像是否未檢測到任何物件（前景像素為 0）。
  • 使用 Flask 與 Jinja2 模板引擎渲染 templates/index.html。

• templates/index.html：

  • 定義網頁前端樣式與版面，包含影像展示、統計資訊、導航列表及回頂部功能按鈕。
  • 透過 Jinja2 迴圈動態生成各影像的展示區塊。

注意事項

• 請確認四個資料夾中的影像檔名一致，否則部分功能可能無法正常運作。
• IoU 與 Dice 指標計算基於二值化影像，請確認影像在預處理階段已正確轉換。
• 若遇執行錯誤，請檢查影像檔案的完整性及路徑設定是否正確。

授權

本專案採用 MIT 授權，歡迎 fork 與修改，請遵守授權條款。