initial comment

UI-HARDWARE-INDICATORS.md

@@ -0,0 +1,136 @@
+# UI Hardware Indicators - Summary
+
+## What Was Added
+
+We've enhanced the dashboard UI to show users which profiles use GPU acceleration vs CPU encoding.
+
+## Changes Made
+
+### 1. Hardware Encoders Section (Top of Dashboard)
+**Location**: Right after the info banner, before statistics cards
+
+**What it shows**:
+- 🔷 **Intel QSV** (blue card) - if Intel GPU detected
+- 🟢 **NVIDIA NVENC** (green card) - if NVIDIA GPU detected
+- 🔴 **AMD VAAPI** (red card) - if AMD GPU detected
+- 💻 **CPU** (gray card) - always shown as fallback
+- For each encoder, displays supported codecs: H.264, H.265, AV1
+
+**Purpose**: Immediately shows users what hardware acceleration is available
+
+### 2. Profile Dropdown Hardware Badges
+**Location**: Both profile dropdowns (settings area and file selection area)
+
+**What it shows**:
+Profile names now include hardware indicators:
+- `sweetspot_qsv [Intel GPU]`
+- `av1_quality [Intel GPU]`
+- `sweetspot_gpu [NVIDIA GPU]`
+- `balanced_cpu [CPU]`
+
+**Purpose**: Users can see at a glance which profiles use GPU vs CPU
+
+### 3. Enhanced Profile Description
+**Location**: Profile description area in settings
+
+**What it shows**:
+When a profile is selected, shows:
+- Color-coded hardware badge at the top
+  - 🔷 Intel QSV (blue) - "Intel QSV (GPU Accelerated)"
+  - 🟢 NVIDIA NVENC (green) - "NVIDIA NVENC (GPU Accelerated)"
+  - 🔴 AMD VAAPI (red) - "AMD VAAPI (GPU Accelerated)"
+  - 💻 CPU (gray) - "CPU"
+- Encoder type
+- Quality (CRF value)
+- Preset
+- Description
+
+**Purpose**: Clear visual indicator of hardware acceleration for selected profile
+
+## Files Modified
+
+### dashboard.py
+- Added import of `EncoderDetector` and `EncoderCapabilities` from reencode module
+- Added `/api/encoders` endpoint that returns hardware encoder capabilities
+
+### templates/dashboard.html
+- Added "Hardware Encoders" section to display detected hardware
+- Added `updateEncoders()` function to fetch and display encoder info
+- Added `getHardwareBadge()` helper function to determine hardware type from encoder name
+- Modified profile dropdown population to include hardware badges
+- Enhanced `updateProfileDescription()` to show color-coded hardware indicator
+
+## How It Works
+
+1. **Backend Detection**: The `/api/encoders` endpoint uses `EncoderDetector.detect_capabilities()` to check what FFmpeg encoders are available
+
+2. **Frontend Display**: JavaScript fetches encoder capabilities and displays them in color-coded cards
+
+3. **Profile Indicators**: When loading profiles, the `getHardwareBadge()` function analyzes the encoder name to determine hardware type:
+   - `intel_qsv_*` → [Intel GPU]
+   - `nvidia_nvenc_*` → [NVIDIA GPU]
+   - `amd_vaapi_*` → [AMD GPU]
+   - `cpu_*` or `libx*` → [CPU]
+
+## User Experience
+
+**Before**: Users had to guess which profiles used GPU based on profile names
+
+**After**:
+- Clear visual indicators throughout the UI
+- Hardware detection shown at top of dashboard
+- Profile dropdowns show `[Intel GPU]`, `[NVIDIA GPU]`, `[AMD GPU]`, or `[CPU]` badges
+- Profile description shows color-coded hardware badge
+- Users can immediately see if AV1 is supported on their GPU
+
+## Example Display
+
+### Hardware Encoders Section:
+```
+Hardware Encoders
+┌─────────────────────────────────┐
+│ 🔷 Intel QSV                    │
+│ Hardware Accelerated            │
+│ Codecs: H.264, H.265, AV1       │
+└─────────────────────────────────┘
+
+┌─────────────────────────────────┐
+│ 💻 CPU                          │
+│ Software Encoding               │
+│ Codecs: H.264, H.265            │
+└─────────────────────────────────┘
+```
+
+### Profile Dropdown:
+```
+┌─────────────────────────────────┐
+│ Select Profile ▼                │
+├─────────────────────────────────┤
+│ sweetspot_qsv [Intel GPU]       │
+│ av1_quality [Intel GPU]         │
+│ balanced_qsv [Intel GPU]        │
+│ balanced_cpu [CPU]              │
+│ quality_cpu [CPU]               │
+└─────────────────────────────────┘
+```
+
+### Profile Description:
+```
+┌─────────────────────────────────┐
+│ 🔷 Intel QSV (GPU Accelerated)  │  ← Blue badge
+├─────────────────────────────────┤
+│ Encoder: intel_qsv_av1          │
+│ Quality: CRF 24                 │
+│ Preset: slow                    │
+│ High quality AV1 encoding       │
+└─────────────────────────────────┘
+```
+
+## Testing
+
+Open http://localhost:5000 in your browser to see:
+1. Hardware Encoders section at the top showing detected GPUs
+2. Profile dropdowns with hardware badges
+3. Color-coded profile descriptions
+
+The UI will automatically update based on what hardware encoders are detected by FFmpeg.