![顏色辨識－ OpenCV 後端與資料庫 前端設計
Server 與 ngrok LINE Bot
顏色辨識方法 顏色辨識－ YOLO
顏色辨識實現方法 1 － OpenCV
利用 OpenCV 擷取指定 HSV 顏色區塊
11
辨識高飽和、高明度的黃色
lower_yellow = [25, 60, 100]
upper_yellow = [40, 255, 255]
顏色辨識－ OpenCV
H S V
色相 飽和度 明度](https://image.slidesharecdn.com/quicklycollectwords-240812081344-8a8e9aac/85/_-Quickly-Collect-Words-11-320.jpg)
![吉伊卡哇臉盲辨識器 - 艾鍗學院學員專題 [AI人工智慧與邊緣運算工程師班]](https://cdn.slidesharecdn.com/ss_thumbnails/5-241108100914-50424585-thumbnail.jpg?width=560&fit=bounds)
![AI 語音複製 X 翻譯 - 艾鍗學院學員專題 [AI人工智慧與邊緣運算工程師班]](https://cdn.slidesharecdn.com/ss_thumbnails/3aixv4-googleppt-241108100906-87502164-thumbnail.jpg?width=560&fit=bounds)
![以人工智能打造企業內部知識管理系統以PCB板為例 - 艾鍗學院學員專題 [AI人工智慧與邊緣運算工程師班]](https://cdn.slidesharecdn.com/ss_thumbnails/1v9-241108100905-c32c0a44-thumbnail.jpg?width=560&fit=bounds)
第五組_速速單字書 Quickly Collect Words
- 1. 拍照 速速單字書 Quickly Collect Words 儲存單字 組員：周依筠 , 蘇政霖 , 曾國桐 , 陳介祜 1
- 2. 01 02 03 動機與目標 OVERVIEW 開發結構與流程 成果與展望 Origin of the idea, explanation of motivation, project goals Development structure and process and problem solving process Achievements and prospects 2
- 4. 速速單字書 Quickly Collect Words HOW TO SAVE TIME 目前常見的方法皆耗時又費力 1. 人工做單字筆記？ > 耗時 2. 直接翻書來背？ > 不方便 3. 一一輸入到單字卡 App ？ > 耗時 不會的單字如何快 速做成單字書？ 4
- 5. 開發架構與流程 Development structure and process and problem solving 02 5
- 6. 速速單字書 Quickly Collect Words 6 如何自動擷取螢光筆單字 ? Detect highlight
- 7. 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO 螢光筆劃記的單字 文字辨識 (OCR) 顏色辨識方法 7 擷取單字方法
- 8. 速速單字書 Quickly Collect Words 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO OCR 效果比較 : Tesseract EasyOCR Google OCR ✔️ 沒有辨識出完整單字 辨識單字範圍不夠精確 8 文字識別 Identify words: 顏色辨識方法
- 9. 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO 螢光筆劃記的單字 顏色辨識 文字辨識 (OCR) Output: ● personal ● floor ● merchandise 顏色辨識方法 9 只擷取「螢光筆」單字方法
- 10. 速速單字書 Quickly Collect Words 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO 10 顏色辨識方法 Detect highlight methon 1. 2. YOLO (You Only Look Once) 顏色辨識方法 我們共實驗兩種方式進行顏色辨識：
- 11. 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO 顏色辨識實現方法 1 － OpenCV 利用 OpenCV 擷取指定 HSV 顏色區塊 11 辨識高飽和、高明度的黃色 lower_yellow = [25, 60, 100] upper_yellow = [40, 255, 255] 顏色辨識－ OpenCV H S V 色相 飽和度 明度
- 12. 速速單字書 Quickly Collect Words 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO 設計 Merge function 合併顏色小區塊 判斷 1. 合併重疊及距離過近的小區塊 (ex. 40 pixels) 判斷 2. 排除重疊但高度落差太大的區塊 h1/h2 >2 則不合併，避免無效顏色區塊過大 藍框與紫框高度相差一倍以上 (h1/ h2 > 2) 就不合併 h 1 h2 12 顏色辨識實現方法 1 － OpenCV 顏色辨識－ OpenCV
- 13. 速速單字書 Quickly Collect Words 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO 擷取 OpenCV 與 OCR 重疊區塊 OCR 文字區塊 OpenCV 黃色區塊 ½ OCR 文字區塊 OpenCV 黃色區塊 ⅓ 13 顏色辨識實現方法 1 － OpenCV 運算區塊重疊程度判斷方式： 1. 左右 ( 寬度 ) 重疊 > ½ 或 2. 上下 ( 高度 ) 重疊 > ⅓ 者 → 列入選取 顏色辨識－ OpenCV OpenCV 區塊 OCR 區塊
- 14. 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO ❌ 不易區分背景 / 螢光筆顏色 ❌ 色塊雜訊多，不易抓到完整單字區塊 ❌ 容易受光線色偏影響 • 較適合白底黑字 問題 • 顏色辨識即抓到螢光筆 • 可以辨識各種顏色 • 快速開發實現功能 優點 14 OpenCV 優點與問題 顏色辨識－ OpenCV
- 15. 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO 15 嘗試過的解決方式 • HSV 參數重複試調與驗證 • Merge 黃色框參數試調與驗證 • 改用 YOLO 訓練 顏色辨識－ OpenCV
- 16. 速速單字書 Quickly Collect Words 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO 模型選擇 ● 選用 YOLOv5 ● 可商用、支持 CPU 資料集 ● 蒐集 175 張訓練資料 ● 每張圖片包含 3~15 個 螢光筆範圍 ● 來源：網路海巡 Labelimg ● 標註所有螢光筆範圍 16 顏色辨識實現方法 2 － YOLOv5 Detect highlight methon 顏色辨識－ YOLO
- 17. 速速單字書 Quickly Collect Words 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO 17
- 18. 速速單字書 Quickly Collect Words 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO YOLOv5 模型訓練參數 YOLOv5 模型參數 epochs=100, imgsz=640, batch=16, x: 螢光筆畫記的圖片 框螢光筆畫記的單字座標 y: 螢光筆單字框座標的分 類 model 18 顏色辨識實現方法 2 － YOLOv5 顏色辨識－ YOLO
- 19. 速速單字書 Quickly Collect Words 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO YOLOv5 模型具體成效 1. 相較 OpenCV 較不受光線影響 2. 相較 OpenCV 針對特定 " 顏色 " 更精準 3. 相較 OpenCV 不需要太多調校，針對 " 單字區塊 " 更 精準 YOLO 優點 1. 相較 OpenCV 辨識時間較長 2. 相較 OpenCV 需要比較久的訓練時間 YOLO 缺點 19 顏色辨識實現方法 2 － YOLOv5 顏色辨識－ YOLO
- 20. 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO 系統架構圖 20 or Image Processing YOLOv5 Image Processing OpenCV2 words Google Cloud Vision API (OCR) 顏色辨識－ YOLO
- 21. 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO 透過 Gemini 獲取單字詳細意思 / 生成文章 （實際商用應串接語言字典，此專案為練習才串接 Gemini 用） words word details system instruction A. 設計 Gemini output 單字詳細說明的結 構 B. 設計 Gemini output 單字組合的簡短文 章 word article A B 21 後端與資料庫
- 22. 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO 系統架構圖 22 or Image Processing YOLOv5 Image Processing OpenCV2 words Google Cloud Vision API (OCR) 後端與資料庫
- 23. 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO 23 words table 🔑 word_id unique word pos pronunciation definition_en definition_zh synonyms_en synonyms_zh example_en example_zh prefixes roots suffixes user_words table fk 🔑 user_id fk 🔑 word_id fk difficulty_id update_difficulty_time create_time query_count last_query_time user table 🔑 user_id user_name unique account password create_time difficulty table 🔑 difficulty_id difficulty_level 資料庫 Table 設計 使用 建置資料 庫 後端與資料庫
- 24. 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO 系統架構圖 or Image Processing YOLOv5 Image Processing OpenCV2 24 Google Cloud Vision API (OCR) Agent 後端與資料庫
- 25. 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO 系統架構圖 or Image Processing YOLOv5 Image Processing OpenCV2 25 Google Cloud Vision API (OCR) Agent Server 與 ngrok
- 26. 速速單字書 Quickly Collect Words 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO 前端與後端的串聯方式 26 ngrok 與 Flask https://2c11-125-229-69-35.ngrok-free.app http://localhost:5000 Server 與 ngrok
- 27. 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO 系統架構圖 H T T P S or Image Processing YOLOv5 Image Processing OpenCV2 27 Google Cloud Vision API (OCR) Agent Server 與 ngrok
- 28. 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO 1. 使用 Figma 設計良好的使用者體驗 UX/UI 2. WEB 建置 28 Web Design Homepage 拍照新增單字 登入 / 註冊 關於我們 確認單字 查看詳細單字 前端設計
- 29. 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO 29 前端設計
- 30. 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO Software 功能： 登入 / 註冊 單字難易度設定 篩選功能 查詢功能 拍照 / 上傳圖片 辨識單字 30 前端設計
- 31. 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO Software 功能： 讓使用者根據帳號可以創造屬於自己的單字書 登入 / 註冊 前端設計
- 32. 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO Software 功能： 讓使用者可以區分是否已熟悉單字 單字難易度設定 前端設計
- 33. 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO Software 功能： 使用者可以篩選某一個時段內所新增的單字 篩選功能 前端設計
- 34. 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO Software 功能： 使用者可以查詢任意單字，若沒有新增過，會提供新增功能 查詢功能 前端設計
- 35. 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO Software 功能： 使用 webcam 或上傳圖檔的方式讓模型做辨識，更可直接點擊單字直接新增 拍照 / 上傳圖片 辨識單字 前端設計
- 36. 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO 36 Software 功能： 前端設計 我的單字書 直接點擊任何單字可瀏覽單字詳細內容 ( 詞性、字根、例句、、、 )
- 37. 速速單字書 Quickly Collect Words 37 如何讓用戶非常便利的使用？
- 38. 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO 系統架構圖 H T T P S or Image Processing YOLOv5 Image Processing OpenCV2 38 LINE Bot Google Cloud Vision API (OCR) Agent
- 39. 速速單字書 Quickly Collect Words 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO LINE Bot 互動實現方法 1. LINE Bot 透過 LINE Messaging API 串接 2. Flask 依據 LINE 訊息處理邏輯 3. Flask WebhookHandler 監聽需求 4. Flask 透過 LineBotApi reply or push message 5. Flask 與資料庫互動，更新單字書內容 WebhookHandle r LINE Messaging API Webhook Request/Response LINE Bot
- 40. 顏色辨識－ OpenCV 後端與資料庫 前端設計 Server 與 ngrok LINE Bot 顏色辨識方法 顏色辨識－ YOLO 40 LINE Bot 上傳圖片辨識單字 隨選難字複習 隨選短文複習
- 42. 速速單字書 Quickly Collect Words LINE 傳圖片 儲存螢光筆單字 OUR SERVICES WEB 上傳圖片 AI 擷取螢光筆單字 （或直接點擊圖片單字） LINE 智能複習 - 隨選弱點單字 - AI 生成難字文章 42
- 43. 速速單字書 Quickly Collect Words 成果展示 43
- 44. A B C 速速單字書 Quickly Collect Words 1. 自動擷取圖片中用戶不會的單字 2. AI 辦別用戶程度，提供新單字 3. 客製化英文考試 客製化學習里程 1. 抓取原始單字上下文幫助回憶 2. 判斷用戶領域提供常見單字 了解各地區域、年齡層在什麼時 間點需要學會什麼單字等 展望 Product Outlook 依據 DATA 分析用戶弱點 收集 DATA 訓練 AI 預測 需求 44
- 45. 速速單字書 Quickly Collect Words Ｔｈａｎｋ ｙｏｕ！ 45
Editor's Notes
- #26: https://2c11-125-229-69-35.ngrok-free.app -> http://localhost:5000
- #43: https://drive.google.com/file/d/1Hq4cALRscGjUvFnwgVxzji2sgvjxLaNV/view?usp=sharing