File size: 4,551 Bytes
cb3c674 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | # Pose Analysis Display Relocation
## Overview
The **Pose Risk, Action, and Score** information has been moved from the live video frame to the **Behavior Analysis panel** in the alerts section for a cleaner camera view.
## Changes Made
### 1. Backend Changes (`app.py` & `webapp/app.py`)
#### VideoProcessor Class
- Added `last_pose_summary` attribute to store the latest pose detection results
- Removed the `_annotate_pose_banner()` call from `process_frame()` method
- Now stores pose information in `self.last_pose_summary` instead of drawing it on the frame
#### API Updates
- Updated `/api/live-stats` endpoint to include `pose_analysis` data:
```json
{
"pose_analysis": {
"risk_level": "SAFE|LOW_RISK|HIGH_RISK",
"action": "standing|walking|running|etc",
"risk_score": 0.0-1.0
}
}
```
### 2. Frontend Changes
#### HTML Template (`live_camera.html`)
- Added new **Pose Analysis** section in the alerts panel
- Displays:
- 🧍 **Risk Level**: Color-coded status (Green=SAFE, Orange=LOW_RISK, Red=HIGH_RISK)
- **Action**: Current action being detected
- **Score**: Risk score with 2 decimal places
- Uses orange color scheme (`--orange-100`, `--orange-600`) to distinguish from other sections
#### JavaScript (`live_camera.js`)
- Enhanced `updateLiveStats()` function to fetch pose data from `/api/live-stats`
- Automatically updates HTML elements:
- `#pose-risk-level`
- `#pose-action`
- `#pose-score`
- Implements dynamic color coding:
- **HIGH_RISK**: Red (`--danger`)
- **LOW_RISK**: Orange (`--orange-600`)
- **SAFE**: Green (`--ok`)
## Benefits
✅ **Cleaner Video Frame**: No overlays cluttering the live camera feed
✅ **Better Organization**: Pose info grouped with other behavioral analysis
✅ **Real-time Updates**: Stats poll every second with latest pose data
✅ **Visual Hierarchy**: Color-coded risk levels for quick assessment
✅ **Responsive Design**: Works on all screen sizes
## Display Location
### Before
```
[Video Frame]
┌─────────────────────────────────────────┐
│ Pose Risk: HIGH_RISK | Action: ... ← Overlaid on video
│ (Cluttering the view)
└─────────────────────────────────────────┘
```
### After
```
[Video Frame - Clean] [Alerts Panel]
┌──────────────────┐ ┌──────────────┐
│ │ │ 🚨 Alerts │
│ Clear View! │ ├──────────────┤
│ │ │ 📊 Statistics│
│ │ ├──────────────┤
└──────────────────┘ │ 🧍 Pose │
│ Risk: SAFE │
│ Score: 0.00 │
└──────────────┘
```
## Configuration
The pose banner drawing method (`_annotate_pose_banner`) is still available if needed for other views:
- Location: `VideoProcessor._annotate_pose_banner()` in both `app.py` and `webapp/app.py`
- Can be re-enabled by uncommenting the call in `process_frame()`
## Testing Checklist
- ✅ Live camera starts without pose banner on frame
- ✅ Pose Analysis section appears in alerts panel
- ✅ Risk level updates in real-time (every ~1 second)
- ✅ Action label shows current detected action
- ✅ Score displays with 2 decimal places
- ✅ Colors change based on risk level (Green/Orange/Red)
- ✅ Works on mobile (640px) and tablet (960px) viewports
- ✅ No console errors in browser dev tools
## Files Modified
1. `app.py` - VideoProcessor and /api/live-stats endpoint
2. `webapp/app.py` - VideoProcessor and /api/live-stats endpoint
3. `webapp/templates/live_camera.html` - Added Pose Analysis section
4. `webapp/static/js/live_camera.js` - Enhanced updateLiveStats() function
## Related Documentation
- [Pose Detection Feature Guide](./PERSON_DETECTION_FEATURE.md)
- [Frontend Enhancements](./FRONTEND_ENHANCEMENTS.md)
- [API Reference](./ARCHITECTURE.md)
---
**Version**: 2.1
**Date**: May 2026
**Impact**: UI/UX Improvement, No breaking changes
|