137 lines
5.2 KiB
Markdown
137 lines
5.2 KiB
Markdown
# 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.
|