Graphical User Interface (GUI) - Musfiq0/enhanced-screens-comparison GitHub Wiki

🖱️ Graphical User Interface (GUI) - v3.2

The GUI provides an intuitive, modern interface for creating video comparisons with a completely redesigned user experience featuring a unified control panel and professional layout.

🚀 Launching the GUI

Quick Launch Options

# Option 1: Use the launcher (Recommended)
START_HERE.bat
# Choose: "1. 🖼️ Launch GUI Application"

# Option 2: Direct launch
python gui_app.py

# Option 3: Alternative launcher
run_gui.bat

🎨 v3.2 Interface Overview

Modern Design Philosophy

The v3.2 interface has been completely redesigned with these principles:

  • 🎛️ Unified Control Panel: All controls consolidated in a single top panel
  • � Space Optimization: Maximum space allocated to video list and results
  • 🎯 Visual Clarity: Icons and labels make every function immediately clear
  • ⚡ Instant Feedback: Operations provide immediate response and progress updates
  • 🎨 Professional Layout: Clean, modern design with logical grouping

GUI Main Interface

New Interface Layout

🎛️ Unified Control Panel (Top Section)

The interface features a single control panel with four labeled sections:

1. 🎯 Comparison Type

  • Radio button selection for comparison mode
  • Multiple Sources: Compare different releases/versions
  • Source vs Encode: Compare original vs processed version

2. ⚡ Actions

  • � Generate: Create new screenshots (automatically switches to Results tab)
  • 📤 Upload: Upload existing screenshots to slow.pics

3. 🎮 Video Management

  • 🗑 Remove: Delete selected video from comparison
  • ✏ Edit: Modify video settings (name, crop, resolution)
  • 🗂 Clear All: Remove all videos from list
  • ⏹ Stop: Halt current generation process

4. 📊 Status

  • Real-time progress bar during operations
  • Current operation status display

📁 Enhanced Video Loading Area

  • Large, prominent drop zone for file selection
  • Clickable area: Click to browse for files OR drag-and-drop
  • Visual feedback: Clear indication of drop zone boundaries
  • No more "Add Video" button: Streamlined interface

📋 Maximized Video List

  • Full space allocation: Video list takes up maximum available space
  • Clear video information: Name, resolution, crop settings displayed
  • Easy selection: Click to select videos for management operations

🌐 Results Tab Integration

  • Automatic switching: Generate/Upload operations automatically show Results tab
  • Live progress updates: Real-time progress bar and status messages
  • Instant feedback: No waiting to see operation status

⚙️ Settings Dialog (Modal)

All settings moved to a clean modal dialog accessible via the ⚙ Settings button:

GUI Settings Dialog

Settings Categories:

  • File Management: Auto-clear options for screenshots
  • Frame Selection: Interval vs custom frame configuration
  • Upload Options: slow.pics integration and episode support
  • Processing: Backend preferences and quality settings

🎛️ Using the v3.2 Interface

Step-by-Step Workflow

1. 🎯 Select Comparison Type

Use the radio buttons in the Comparison Type section:

Multiple Sources Mode

  • Use when: Comparing different releases of the same content
  • Example: Netflix vs Blu-ray vs Web-DL release comparison
  • Select multiple video sources representing different releases/versions
  • Perfect for quality comparisons between providers

Source vs Encode Mode

  • Use when: Validating encoding quality against original
  • Example: Original source vs your custom encode
  • Compare original vs processed version
  • Ideal for encoder quality validation
  • Typically 2 videos: source and encode

2. 📁 Load Videos

🆕 Enhanced Video Loading

  • Click the large drop zone to browse for video files
  • OR drag video files directly from Windows Explorer onto the drop zone
  • Multiple file support: Add several videos at once
  • Automatic configuration: Settings dialog opens for each video

Video Loading Interface

Supported File Formats:

  • MP4 - Most common format
  • MKV - High-quality container
  • AVI - Legacy format support
  • MOV - QuickTime format
  • WMV - Windows Media format
  • FLV - Flash video format
  • WEBM - Web-optimized format
  • M4V - iTunes/Apple format

3. ⚙️ Configure Settings (Optional)

Click the ⚙ Settings button to access the modal settings dialog:

File Management Options:

  • Clear before generation: Remove old screenshots before starting
  • Clear after upload: Remove local files after successful upload

Frame Selection Settings:

  • Interval Mode: Evenly spaced screenshots across video duration
  • Custom Frames Mode: Specific frame numbers (e.g., "1000,5000,10000")

Upload Options:

  • Enable upload: Automatically upload to slow.pics after generation
  • Browser opening: Results open in browser automatically
  • Episode support: Single episode vs season pack naming

4. 🎮 Manage Your Videos

Use the Video Management section for video operations:

  • 🗑 Remove: Delete selected video from comparison list
  • ✏ Edit: Modify video settings, names, crop options, resolution
  • 🗂 Clear All: Remove all videos to start fresh
  • ⏹ Stop: Halt any running generation process

Video Configuration Dialog:

  • Display Name: How the video appears in comparisons
    Examples: "Netflix 1080p", "Blu-ray Source", "My Custom Encode"
    
  • Target Resolution: Output screenshot resolution (480p to 4K)
  • Crop Settings: Remove letterboxes, streaming logos, etc.
  • Trim Options: Skip intro/outro sections

5. ⚡ Execute Operations

Use the Actions section to start processing:

🎬 Generate Screenshots:

  • Creates new comparison screenshots
  • Automatically switches to Results tab with live progress
  • Shows real-time progress bar and status updates
  • Processes all configured videos according to settings

📤 Upload Existing:

  • Uploads previously generated screenshots to slow.pics
  • Automatically switches to Results tab with upload progress
  • Useful for retry attempts or manual uploads
  • Opens results in browser when complete

6. 📊 Monitor Progress

The Status section and Results tab provide comprehensive feedback:

  • Real-time progress bar: Shows completion percentage
  • Current operation display: What's being processed right now
  • Frame counter: Current frame being processed
  • Success/error messages: Clear feedback on operation results

Example Progress Messages:

[🔄] Processing frame 5000 (1/10) - 10.0%
[🔄] Processing source.mkv - Cropping and resizing...
[📊] Screenshot generation complete: 18/20 successful
[🌐] Uploading to slow.pics... (3/5 images uploaded)

🎨 Enhanced User Experience Features

Visual Icon System

Every button features an intuitive icon for immediate recognition:

  • 🎬 Generate: Video/film icon for creation
  • 📤 Upload: Upload arrow for sharing
  • Settings: Gear icon for configuration
  • 🗑 Remove: Trash can for deletion
  • Edit: Pencil for modification
  • 🗂 Clear All: Folder icon for bulk operations
  • Stop: Stop sign for halting processes

Instant Response Design

  • Automatic tab switching: Operations immediately show progress in Results tab
  • Live progress updates: No need to refresh or check separately
  • Visual feedback: Clear indication of current operation status
  • Responsive controls: Buttons update state based on current operations

Space-Optimized Layout

  • Maximized video list: Most screen space dedicated to your video collection
  • Compact controls: Essential functions condensed into efficient top panel
  • Clean design: Minimal visual clutter, maximum functionality
  • Professional appearance: Modern interface suitable for any workflow

⚙️ Settings Dialog - Modal Configuration

Accessing Settings

The settings are now accessed via a clean modal dialog:

  1. Click the ⚙ Settings button in the top control panel
  2. Modal dialog opens with categorized settings
  3. Configure options across different tabs/sections
  4. Apply changes and return to main interface

Settings Dialog

File Management Configuration

Auto-Clear Options

Clear before generation:

  • Removes old screenshots before starting new generation
  • Prevents mixing results from different comparison sessions
  • Keeps output folder clean and organized
  • Recommended: Enabled for most users

Clear after upload:

  • Removes local files after successful slow.pics upload
  • Saves disk space by keeping only cloud-hosted results
  • Good for users with limited storage
  • Caution: Ensure upload succeeded before enabling

Folder Organization Settings

  • Structured output: Screenshots organized by video source and timestamp
  • Timestamp folders: Grouped by generation time for easy navigation
  • Clear hierarchy: Logical folder structure for manual access

Frame Selection Configuration

Interval Mode (Recommended)

  • Number of screenshots: Total comparison points to generate
  • Automatic spacing: Evenly distributed across video duration
  • Smart calculation: Adapts to video length automatically
  • Consistent results: Same number of comparisons regardless of video length

Example Settings:

Number of screenshots: 10
Video length: 24 minutes
Result: Screenshots every ~2.4 minutes

Custom Frames Mode (Advanced)

  • Specific frame numbers: Exact frames for comparison
  • Comma-separated input: Enter as "1000,5000,10000,15000"
  • Frame validation: Automatically checks if frames exist in all videos
  • Fallback handling: Uses default frames if custom ones are invalid

Example Custom Frames:

1000,5000,10000,15000,20000    # Specific frames
100,500,1000                    # Early scenes focus
10000,50000,100000              # Longer video sampling

Default Frame Fallback

When custom frames aren't available or invalid:

  • Frame 100: Early scene sample
  • Frame 500: Early-middle sample
  • Frame 1000: Middle sample
  • Auto-adjustment: Adapts for shorter videos automatically

Upload Integration Settings

slow.pics Configuration

Enable automatic upload:

  • Uploads screenshots to slow.pics immediately after generation
  • Creates organized collections with proper naming
  • Opens results in browser automatically when complete

Episode Support:

  • Single Episode: Individual episode comparisons
    Collection name: "ShowName S01E01 source vs encode"
    
  • Season Pack: Multiple episode or batch comparisons
    Collection name: "ShowName Season 1 source vs encode"
    

Browser Integration

  • Auto-open results: Opens slow.pics page in default browser
  • Collection organization: Smart naming for easy organization
  • Upload progress: Real-time feedback during upload process

Processing Preferences

Backend Configuration

Quality Settings:

  • Preferred backend: VapourSynth > OpenCV > PIL (auto-detection)
  • Quality optimization: Balances processing speed vs output quality
  • Fallback handling: Automatically uses best available backend

Performance Options:

  • Memory management: Efficient handling of large video files
  • Multi-threading: Parallel processing where possible
  • Progress reporting: Real-time updates without performance impact

Video Processing Options

  • Crop-first processing: Apply crops before resizing for consistent results
  • Aspect ratio preservation: No stretching or distortion during resizing
  • Quality algorithms: Best available scaling methods for each backend

🌐 Upload Integration - Results Management

Streamlined Upload Workflow

Integrated Upload Actions

The v3.2 interface integrates upload functionality directly into the main workflow:

🎬 Generate with Upload:

  • Configure automatic upload in Settings dialog
  • Generate screenshots as normal
  • Uploads automatically occur after generation completes
  • Automatic Results tab switching shows upload progress
  • Browser opens with results when complete

📤 Upload Existing:

  • Use the 📤 Upload button in the Actions section
  • Uploads previously generated screenshots
  • Automatically switches to Results tab with progress
  • Perfect for retry attempts or manual uploads

Upload Progress

Upload Configuration Options

Collection Management

Smart Collection Naming:

  • Automatic naming: Based on video names and comparison type
  • Episode support: Proper season/episode formatting
  • Source identification: Clear indication of compared sources
  • Timestamp inclusion: When comparisons were generated

Example Collection Names:

"Anime Title S01E01 - Netflix vs Blu-ray vs Encode"
"Movie Title - Source vs Custom Encode"  
"Show Season 1 Batch - Streaming vs Physical"

Upload Status Tracking

Real-Time Progress:

  • Upload progress bar: Shows individual file upload progress
  • Overall completion: Total upload status across all screenshots
  • Success confirmation: Verification of completed uploads
  • Error handling: Clear feedback for failed uploads with retry options

Progress Messages:

[🌐] Uploading to slow.pics... (3/10 images uploaded)
[🌐] Upload complete! Opening results in browser...
[❌] Upload failed: Network error. Use 'Upload Existing' to retry.
[✅] All screenshots uploaded successfully!

Manual Upload Features

Upload Existing Screenshots

When to Use:

  • Failed uploads: Network issues during initial upload
  • Previously generated: Screenshots from earlier sessions
  • Batch processing: Multiple comparison sets
  • Manual collection naming: Custom titles for special cases

How to Use:

  1. Click 📤 Upload button in Actions section
  2. Browse for screenshot folder (if not using default location)
  3. Configure collection name in upload dialog
  4. Monitor progress in automatically opened Results tab
  5. Browser opens with results when complete

Retry Failed Uploads

  • Network resilience: Automatic retry for temporary network issues
  • Selective retry: Upload only failed screenshots
  • Progress preservation: Continue from where upload stopped
  • Error reporting: Clear indication of specific failures

Browser Integration

Automatic Results Opening

  • Default browser: Opens slow.pics results in your default browser
  • New tab/window: Doesn't interfere with current browsing
  • Collection page: Direct link to your organized comparison collection
  • Share-ready: Results immediately available for sharing

Collection Organization on slow.pics

  • Proper metadata: Titles, descriptions, and organization
  • Screenshot order: Logical arrangement of comparison images
  • Source attribution: Clear indication of video sources
  • Professional presentation: Ready for sharing or archival

🎨 Advanced GUI Features

Enhanced Video Configuration

Crop Preset Library

Access through the ✏ Edit button for comprehensive cropping options:

Cinema Format Presets:

  • 2.40:1 Letterbox: Ultra-wide cinema format removal
  • 2.35:1 Letterbox: Wide cinema format removal
  • 1.85:1 Letterbox: Standard cinema format removal
  • Custom letterbox: Manual specification with pixel-perfect control

Streaming Service Presets:

  • Netflix: Remove Netflix interface elements and logos
  • Amazon Prime: Handle Prime Video overlays and UI elements
  • Disney+: Remove Disney+ specific interface elements
  • Generic streaming: Common streaming platform artifacts

Technical Correction Presets:

  • Dirty lines: Remove encoding artifacts and compression issues
  • Overscan: Correct overscan issues from broadcast sources
  • Pillarbox: Handle 4:3 content displayed on 16:9 screens
  • Custom crop: Manual pixel-perfect cropping with preview

Resolution Management System

Target Resolution Options

Available through video configuration dialog:

  • 480p (854×480): Legacy compatibility and smaller file sizes
  • 720p (1280×720): Standard HD for most comparisons
  • 1080p (1920×1080): Full HD - recommended for most use cases
  • 1440p (2560×1440): Quad HD for high-quality sources
  • 4K (3840×2160): Ultra HD for premium source material

Smart Scaling Technology

  • Aspect ratio preservation: No stretching, distortion, or letterboxing
  • Quality optimization: Uses best available scaling algorithms
  • Source-aware processing: Adapts to source resolution and quality
  • Crop-first processing: Ensures consistent results across all resolutions

Professional Interface Design

Visual Design Elements

Icon System:

  • 🎬 Generate: Film/video icon indicating creation process
  • 📤 Upload: Upload arrow for sharing and cloud operations
  • ⚙ Settings: Gear icon for configuration access
  • 🗑 Remove: Trash can for deletion operations
  • ✏ Edit: Pencil icon for modification and editing
  • 🗂 Clear All: Folder icon for bulk management operations
  • ⏹ Stop: Stop sign for process termination

Layout Principles:

  • Unified top panel: All controls accessible without scrolling
  • Logical grouping: Related functions grouped in labeled sections
  • Visual hierarchy: Important actions prominent, secondary actions accessible
  • Space efficiency: Maximum screen real estate for video list and results

Responsive User Experience

Instant Feedback Design:

  • Automatic tab switching: Operations immediately show relevant information
  • Live progress updates: Real-time feedback without manual refresh
  • Visual state indicators: Clear indication of current operation status
  • Responsive controls: Button states update based on current context

Accessibility Features:

  • Tooltips: Helpful hints for all interactive elements
  • Keyboard navigation: Full keyboard accessibility support
  • Clear visual cues: High contrast and readable interface elements
  • Error prevention: Validation and clear error messages

Workflow Optimization Features

Smart Defaults and Memory

  • Session persistence: Remembers settings between application sessions
  • Smart suggestions: Helpful defaults based on video content
  • Configuration templates: Save and reuse common setups
  • Quick actions: Most common operations accessible with single clicks

Batch Processing Support

  • Multiple video handling: Add and configure multiple videos efficiently
  • Consistent settings: Apply same settings across multiple videos
  • Bulk operations: Clear all, remove multiple, edit in batches
  • Progress tracking: Monitor progress across all videos simultaneously

Integration Features

  • Drag-and-drop optimization: Seamless file handling from Windows Explorer
  • Clipboard integration: Easy sharing of results and configuration
  • Browser integration: Automatic result viewing and sharing
  • File association: Optional registration for video file types

🐛 GUI Troubleshooting - v3.2

Common Interface Issues

Interface Loading Problems

GUI doesn't start:

# Check tkinter installation
python -c "import tkinter; print('GUI library available')"

# Check required dependencies
python -c "import tkinterdnd2; print('Drag & drop available')"

# Reinstall GUI dependencies if needed
pip install tkinterdnd2 --force-reinstall

Window not responding:

  • Background processing: Check if operation is running in Results tab
  • Wait for completion: Monitor progress bar and status messages
  • Use ⏹ Stop button: Safely terminate current operation
  • Restart application: If completely frozen, close and restart

Video Loading Issues

Drag & drop not working:

# Verify drag & drop support
python -c "import tkinterdnd2; print('Drag & drop ready')"

# Alternative: Use click-to-browse
# Click the drop zone instead of dragging

Video configuration errors:

  • File accessibility: Ensure video files are not in use by other applications
  • Format validation: Verify file format is supported (MP4, MKV, AVI, etc.)
  • Path issues: Avoid special characters or very long file paths
  • Permission problems: Check file read permissions

Settings dialog issues:

  • Modal dialog stuck: Press Escape to close, then try again
  • Settings not saving: Check if settings dialog completed successfully
  • Reset to defaults: Delete config file and restart application

Operation Problems

Generate/Upload not working:

  • Check video list: Ensure videos are properly loaded and configured
  • Verify settings: Open Settings dialog and confirm configuration
  • Monitor Results tab: Check for error messages and progress updates
  • Network issues: For upload problems, check internet connection

Performance Optimization

System Requirements for v3.2

Minimum Requirements:

  • 4GB RAM: For basic 720p/1080p video processing
  • Dual-core CPU: For reasonable processing speed
  • 1GB free storage: For screenshot output and temporary files
  • Windows 10/11: With latest updates

Recommended for 4K:

  • 8GB+ RAM: For large video file processing
  • Quad-core CPU: For faster generation and upload
  • SSD storage: For improved file I/O performance
  • Stable internet: For reliable slow.pics upload

Performance Tips

For large video files:

  • Close other applications: Free up system memory
  • Use lower resolution: Process at 1080p instead of 4K if acceptable
  • Reduce frame count: Use fewer screenshots for faster processing
  • Enable auto-clear: Remove old screenshots to save disk space

For multiple videos:

  • Process in smaller batches: Add fewer videos per comparison
  • Use consistent settings: Same crop/resolution for all videos
  • Monitor disk space: Large batches require significant storage
  • Consider upload frequency: Upload batches separately if needed

Configuration and Maintenance

Settings Management

Reset configuration:

# Delete config file to reset all settings
# Location: same directory as gui_app.py
del config.ini  # Or delete manually

Backup settings:

  • Copy config.ini: Save your configuration before major changes
  • Document custom crops: Keep notes on successful crop settings
  • Save successful workflows: Remember working configurations for future use

File Management

Clean up old screenshots:

  • Enable auto-clear: Use Settings dialog options
  • Manual cleanup: Regularly clean Screenshots folder
  • Organize by project: Create subfolders for different comparison projects

Manage upload history:

  • Bookmark successful uploads: Save slow.pics URLs for future reference
  • Collection naming: Use consistent, descriptive collection names
  • Archive old results: Download important comparisons for offline storage

💡 GUI Tips and Tricks - v3.2

Workflow Efficiency

Quick Start Workflow

  1. Launch application (START_HERE.bat → Option 1)
  2. Select comparison type (Multiple Sources vs Source vs Encode)
  3. Click drop zone or drag videos directly
  4. Configure each video with descriptive names and appropriate crops
  5. Click 🎬 Generate (automatically switches to Results tab)
  6. Monitor progress and wait for completion/upload

Power User Features

  • Keyboard shortcuts: Use shortcuts for faster operation
  • Batch processing: Add multiple videos at once
  • Template configurations: Save common crop/resolution combinations
  • Drag & drop mastery: Drag multiple files simultaneously

Quality Best Practices

Frame Selection Strategy

  • Use interval mode: For comprehensive coverage across video duration
  • Choose detailed scenes: Avoid static scenes or pure black/white frames
  • Consider video content: Action scenes show compression differences better
  • Test with custom frames: Use specific frames for problematic areas

Configuration Optimization

  • Descriptive naming: Use clear, informative video names
  • Appropriate cropping: Remove irrelevant areas while preserving important content
  • Resolution matching: Target resolution should match or slightly exceed source quality
  • Consistent settings: Use same crop/resolution across videos for fair comparison

Organization and Sharing

Collection Management

Naming Conventions:

"[Series] S##E## - [Sources] - [Date]"
"Anime Title S01E01 - Netflix vs Blu-ray - 2025-07-07"
"Movie Title - Source vs Encode - High Quality"

Sharing Best Practices:

  • Include context: Mention encoding settings, source information
  • Provide metadata: Video specifications, processing details
  • Use descriptive titles: Make collections easily searchable
  • Archive important results: Save URLs and download copies

Keyboard Shortcuts (v3.2)

Primary Actions

  • Ctrl+O: Click drop zone / Add video files
  • Ctrl+G: Generate screenshots (🎬 Generate button)
  • Ctrl+U: Upload existing screenshots (📤 Upload button)
  • Ctrl+S: Open Settings dialog (⚙ Settings button)
  • Escape: Stop current operation / Close dialogs
  • Delete: Remove selected video (🗑 Remove button)

Navigation

  • Tab: Navigate between interface elements
  • Enter: Activate focused button or confirm dialog
  • Ctrl+Q: Exit application
  • F5: Refresh video list
  • Ctrl+A: Select all videos (for bulk operations)

Quick Operations

  • Ctrl+E: Edit selected video (✏ Edit button)
  • Ctrl+Shift+C: Clear all videos (🗂 Clear All button)
  • Ctrl+R: Switch to Results tab
  • Ctrl+1: Switch to Multiple Sources mode
  • Ctrl+2: Switch to Source vs Encode mode

The v3.2 GUI makes professional video comparison accessible and efficient for everyone! 🎨✨

GUI Configuration Example

🎯 Ready to start comparing? The new interface design ensures every function is just one click away, with immediate feedback and professional results. Whether you're comparing streaming releases or validating your own encodes, the v3.2 GUI provides the tools and workflow you need for efficient, high-quality video comparisons.