前情提要
家里養了三只貓咪，其中一只布偶貓經常出入廁所。但因為平時忙于學業，沒法時刻關注牠的行為。我知道貓咪的如廁頻率和時長與健康狀況密切相關，頻繁如廁可能是泌尿問題，停留過久也可能是便秘或不適。為了更科學地了解牠的如廁習慣，我計劃搭建一個基于視頻監控和AI識別的系統，自動識別貓咪進出廁所的行為，記錄如廁時間和停留時長，并區分不同貓咪。這樣即使我不在家，也能掌握貓咪的健康狀態，更安心地照顧它們。
🎓 各位的關注與點贊是我持續分享的最大動力，衷心感謝大家的支持！
📢 歡迎正在攻讀碩博學位的同學，或是對人工智能充滿熱情的朋友們，關注我的個人公眾號。在這里，我將持續更新博士期間閱讀的前沿論文解讀、項目實戰經驗分享，以及我對AI技術趨勢的思考與探討。
? 無論你是科研工作者、工程開發者，還是AI初學者，都能在這里找到干貨與靈感。讓我們一起交流、成長、探索人工智能的無限可能！
已完成工作：
?貓咪如廁檢測與分類識別系統系列【一】 功能需求分析及貓咪分類特征提取
?貓咪如廁檢測與分類識別系統系列【二】多圖上傳及貓咪分類特征提取更新
?貓咪如廁檢測與分類識別系統系列【三】 融合yolov11目標檢測
?貓咪如廁檢測與分類識別系統系列【四】融合檢測日志輸出及前端展示界面制作
?貓咪如廁檢測與分類識別系統系列【五】信息存儲數據庫改進+添加貓咪頁面制作+貓咪軀體匹配算法架構更新
?貓咪如廁檢測與分類識別系統系列【六】分類模型訓練+混合檢測分類+未知目標自動更新
?貓咪如廁檢測與分類識別系統系列【七】 當前階段總結報告
?貓咪如廁檢測與分類識別系統系列【八】 檢測推理事件整合+視頻推流架構分析
計劃工作：
? 貓咪管理功能：已完成貓咪照片上傳與名稱登記模塊。
? 多圖上傳與分類特征提取：已支持批量上傳貓咪圖像并自動更新個體特征庫。
? 目標檢測與事件識別集成（YOLOv11）: 基本實現
🔄 檢測區域繪制功能：進行中，計劃支持用戶自定義如廁檢測區域。
🔄 事件行為記錄模塊：進行中，將實現如廁進出時間、停留時長等事件記錄功能。
? 檢測結果推流展示：進行中，計劃支持算法結果實時推流。本章將實現頁面MJPEG推理
? 整體運行結果推流整合：待更新，計劃集成檢測圖像與系統狀態為統一視頻流輸出。
本小節將添加一個交互式區域標注功能 ，讓你在前端網頁上手動框選如廁區域，然后保存坐標用于檢測。
? 實現方案
🔧 前端功能（HTML + JS）
-
展示當前攝像頭幀（或靜態圖）
-
鼠標拖動繪制矩形框
-
顯示框的坐標
(x1, y1, x2, y2) -
提交后將坐標發送給 Flask 后端
🔧 后端 Flask
-
接收坐標并保存為配置文件（如
region.json） -
inference.py在啟動時讀取區域配置用于判斷
🎯 示例頁面流程
GET /set-region → 展示攝像頭圖并支持標框
POST /set-region → 提交區域坐標保存
-
/set-region頁面：可交互設置區域 -
保存為
config/region.json -
CatDetector自動加載該區域
? 第一步：自動截圖一幀用于標注
添加一個 Flask 路由 /snapshot，它會：
-
從當前攝像頭或 RTSP 獲取一幀
-
保存為
static/snapshot.jpg -
用作標注背景圖
? 第二步：創建 /set-region 前端頁面
-
顯示
snapshot.jpg -
鼠標框選區域
-
顯示坐標
-
點擊保存后寫入
config/region.json
? 已完成后端部分：
? 說明
| 路由 | 功能 |
|---|---|
| /snapshot | 從攝像頭讀取一幀并保存為 static/snapshot.jpg |
| /set-region | 打開前端頁面進行手動框選區域 |
| /save-region | 接收 POST 坐標并保存為 config/region.json |
🔜 下一步
添加對應的前端頁面 templates/set_region.html，包含：
-
顯示圖像
-
鼠標框選
-
提交保存區域坐標
? 前端標注頁面 set_region.html 功能包括：
- 打開瀏覽器訪問：http://localhost:5000/snapshot
- 自動截取一幀作為標注背景
- 然后訪問：http://localhost:5000/set-region
-
鼠標拖動標記區域
-
點擊 “保存區域” 將坐標保存到
config/region.json
- 后續在
CatDetector中讀取并使用區域：
with open("config/region.json") as f:self.toilet_region = tuple(json.load(f).values())
然后在 CatDetector 中加上自動讀取 region.json 的功能？這樣可以完全替代硬編碼區域 (100, 100, 400, 400)。 inference.py 自動加載區域配置的集成
📌 區域設置邏輯更新如下：
-
啟動時嘗試讀取
config/region.json -
如果存在 → 使用手動標注區域
-
如果不存在 → 使用默認區域
(100, 100, 400, 400)并打印警告
🚀 現在完整使用流程：
-
打開攝像頭截圖：
http://localhost:5000/snapshot -
打開手動標注：
http://localhost:5000/set-region -
框選區域并保存
-
系統將自動加載你框出的區域用于如廁判斷
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>設置如廁區域</title><style>canvas { border: 2px solid #333; cursor: crosshair; }#coords { margin-top: 10px; font-weight: bold; }</style>
</head>
<body>
<h2>🐱 設置如廁區域</h2>
<canvas id="canvas"></canvas>
<div id="coords">區域: (x1, y1) → (x2, y2)</div>
<button onclick="saveRegion()">保存區域</button><script>
const img = new Image();
img.src = "/static/snapshot.jpg";
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');let startX, startY, endX, endY, isDrawing = false;img.onload = () => {canvas.width = img.width;canvas.height = img.height;ctx.drawImage(img, 0, 0);
};canvas.onmousedown = (e) => {isDrawing = true;startX = e.offsetX;startY = e.offsetY;
};canvas.onmousemove = (e) => {if (!isDrawing) return;endX = e.offsetX;endY = e.offsetY;ctx.drawImage(img, 0, 0);ctx.strokeStyle = 'red';ctx.lineWidth = 2;ctx.strokeRect(startX, startY, endX - startX, endY - startY);document.getElementById('coords').innerText = `區域: (${startX}, ${startY}) → (${endX}, ${endY})`;
};canvas.onmouseup = () => isDrawing = false;function saveRegion() {const region = {x1: Math.min(startX, endX),y1: Math.min(startY, endY),x2: Math.max(startX, endX),y2: Math.max(startY, endY)};fetch('/save-region', {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify(region)}).then(res => res.json()).then(data => {alert('? 區域保存成功！');});
}
</script>
</body>
</html>
可以將該文件保存為 templates/set_region.html。訪問 /snapshot 截圖后，再訪問 /set-region 進行區域標注。
接下來實現在一個頁面上 輸入地址，然后截圖，然后選擇坐標，流程如下
? 輸入 RTSP 地址
? 點擊「截圖」抓取攝像頭畫面
? 鼠標框選如廁區域
? 保存區域坐標
全部集成到 一個前端頁面 中，交互非常清晰！
? 頁面結構設計
| 功能區域 | 描述 |
|---|---|
| 📥 輸入框 | 手動填寫 RTSP 地址 |
| 🎬 截圖按鈕 | 請求后端從該地址截圖 |
| 🖼? 圖像顯示區 | 顯示截圖并支持框選區域 |
| 💾 保存按鈕 | 提交所框選的坐標（保存為 region.json） |
🧪 使用方式：
-
訪問 /set-region
-
輸入 RTSP 地址（或攝像頭路徑）
-
點擊【📸 截圖】，自動生成并顯示圖片
-
用鼠標框選區域，點擊【保存區域】
-
坐標將保存在
config/region.json
🧠 inference.py 會自動加載 region.json 并使用你選定的區域進行判斷。
你現在已經擁有前端交互設置 + 實時應用識別 的完整閉環了！剛剛已經實現了手動標注如廁區域并保存為 config/region.json，現在你只需要確保 CatDetector 自動讀取這個配置。
之前的 inference.py 中已經包含了這個邏輯 ?：
def _load_region(self):try:with open("config/region.json") as f:data = json.load(f)return (data['x1'], data['y1'], data['x2'], data['y2'])except Exception as e:print("?? 無法加載區域配置，使用默認區域 (100, 100, 400, 400)")return (100, 100, 400, 400)
只需要在 __init__ 中有這行就可以：
self.toilet_region = self._load_region()
最后，只要保證：
self.toilet_region = self._load_region()
就能讓系統自動加載你剛剛前端標注并保存的區域了。
)
)
