# 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.