# quapni-fishler
## 系統
- [網頁](https://fishler.quapni.com.tw/)
- [前端](https://github.com/Quapni-Lab/quapni-fishler)
- [後端](https://gitlab.com/quapni-outdoor/quapni-fishler-flask)

## 開發技術
- AI模型
- TensorFlow 2.3
- U-Net: Convolutional Networks for Image Segmentation
- OpenCV
- 前端
- React.js
- Bootstrap
- 後端
- Python Flask API

## AI模型辨識魚尺技術
蒐集971張卡片照片作為訓練資料，並採人工標記方式標記卡片範圍&位置。模型端使用 Tensorflow 框架實作 U-Net 網路架構，練AI模型辨識卡片位置。輸出卡片位置遮罩(Red Mask)、卡片定位框(Region Proposal) 視覺呈現驗證。

1. 使用者開啟網頁APP並拍照上傳影像。
2. 將圖片送到事先預訓練好的AI模型，並進行魚尺位置辨識。
3. 辨識成功後將魚尺所在位置利用方框標示出來。


## 系統架構
1. 網頁前端收到影像並上傳至雲端API。
2. 後端API接收到訊息，進行影像處理並預測卡片位置。
3. 取得辨識結果。


## Demo
<img src="https://imgur.com/bpcnE15.gif" width="230px">

| 卡片位置遮罩 | 卡片定位框 | 卡片字體辨識 |
|---|---|---|
| <img src="https://i.imgur.com/B2pZ4mI.png" width="220px"> | <img src="https://i.imgur.com/ZeS5Pnl.png" width="220px"> | <img src="https://i.imgur.com/zIQTKXt.png" width="220px"> |
| <img src="https://i.imgur.com/uWpfM7x.png" width="220px"> | <img src="https://i.imgur.com/Lh6gOfE.png" width="220px"> | <img src="https://i.imgur.com/YM7fZaM.png" width="220px"> |
| <img src="https://i.imgur.com/le3DSIK.png" width="220px"> | <img src="https://i.imgur.com/IfWfZCb.png" width="220px"> | <img src="https://i.imgur.com/3fLhPn7.png" width="220px"> |