Fix mobile device freezing issues with performance optimizations and resource constraints

[Copilot]

Resolves the mobile device freezing issues when accessing the Flashcut application on Railway by implementing comprehensive mobile optimizations and resource management.

Problem

The application was experiencing freezing issues on mobile devices while working fine on laptops, likely due to:

• Heavy computational load from librosa audio analysis
• Excessive memory usage from loading full audio files
• No mobile-specific optimizations or constraints
• Lack of progress feedback during long operations

Solution

Implemented a comprehensive mobile optimization system that automatically detects mobile devices and applies appropriate performance constraints:

Mobile Device Detection

• Automatic detection via User-Agent analysis using regex patterns
• Supports iPhone, iPad, Android, and other mobile platforms
• Provides device-specific configuration and diagnostics

Performance Optimizations

• Audio Duration Limit: 60-second maximum for mobile devices
• File Size Constraint: 10MB upload limit for mobile
• Reduced Sample Rate: 22050 Hz instead of default for faster processing
• Larger Hop Size: 1024 vs 512 for more efficient onset detection
• Plot Optimization: Lower DPI (100 vs 150) and downsampled waveforms

Resource Management

• Video Rendering Disabled: Automatically disabled on mobile to save resources
• Memory Optimization: Downsampled plotting data to reduce memory footprint
• Graceful Degradation: Flash detection skipped if it fails on mobile

User Experience Improvements

• Progress Indicators: Loading spinner with mobile-specific messaging
• Enhanced Error Handling: Mobile-aware error messages and helpful guidance
• Performance Monitoring: New /logs endpoint for debugging mobile issues
• Diagnostic Information: Device type and mobile settings displayed in diagnostics

Technical Implementation

# Mobile detection
def is_mobile_device() -> bool:
    user_agent = request.headers.get('User-Agent', '').lower()
    mobile_patterns = [r'mobile', r'android', r'iphone', r'ipad', ...]
    return any(re.search(pattern, user_agent) for pattern in mobile_patterns)

# Optimized processing configuration
def get_processing_config() -> dict:
    if is_mobile_device():
        return {
            'max_duration': 60.0,
            'sample_rate': 22050,
            'hop_length': 1024,
            'plot_dpi': 100,
            'device_type': 'mobile'
        }

Performance Monitoring

Added comprehensive logging system to track performance metrics by device type, helping identify and resolve mobile-specific issues in production.

Testing

• Validated mobile detection with various User-Agent strings
• Confirmed audio processing works correctly with mobile-optimized parameters
• Verified performance logging captures device-specific metrics
• All optimizations tested and working as expected

This implementation provides a smooth mobile experience while maintaining full functionality on desktop browsers, effectively resolving the Railway mobile freezing issues.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.