encoderPro/UI-HARDWARE-INDICATORS.md

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.