upload

DOCS.md

@@ -0,0 +1,174 @@
+# Distributed Media Encoder Service
+
+A distributed video encoding service with a modern dark-themed UI, supporting multiple encoding instances for high-performance video processing.
+
+## Features
+
+- Modern dark-themed web interface with drag-and-drop
+- Distributed video encoding across multiple workers
+- Multiple quality outputs (480p, 720p, 1080p)
+- Real-time encoding progress tracking
+- Single-port access through Python proxy
+- Temporary directory support for restricted environments
+
+## System Architecture
+
+- **Web Interface**: Modern dark theme UI for video upload and monitoring
+- **Task Queue**: Redis-based distributed task queue
+- **Workers**: Multiple Celery workers for distributed encoding
+- **Storage**: Temporary directory based file storage
+- **Proxy**: Python-based reverse proxy for single-port access
+
+## Prerequisites
+
+- Python 3.8+
+- FFmpeg
+- Redis
+
+## Quick Start
+
+1. Install dependencies:
+```bash
+pip install -r requirements.txt
+```
+
+2. Start the service:
+```bash
+python3 start_service.py --port 5000 --tmp-dir /tmp/encoder
+```
+
+The service will be available at `http://localhost:5000`
+
+## Distributed Setup
+
+### Main Instance
+```bash
+python3 start_service.py --port 5000 --tmp-dir /tmp/encoder
+```
+
+### Additional Worker Instances
+```bash
+# Worker 1
+python3 start_service.py --worker-name encoder_worker_1 --tmp-dir /tmp/encoder_1
+
+# Worker 2
+python3 start_service.py --worker-name encoder_worker_2 --tmp-dir /tmp/encoder_2
+
+# Add more workers as needed
+```
+
+## Command Line Options
+
+- `--port`: Port number for the web interface (default: 5000)
+- `--tmp-dir`: Temporary directory for storage (default: /tmp/encoder)
+- `--worker-name`: Custom name for worker instance
+
+## Directory Structure
+
+```
+/tmp/encoder/
+├── uploads/           # Uploaded video files
+├── encoded/          # Encoded video files
+├── redis.conf        # Redis configuration
+├── redis.rdb         # Redis database
+└── redis.log         # Redis logs
+```
+
+## Monitoring
+
+### View Service Logs
+```bash
+tail -f /tmp/encoder/redis.log  # Redis logs
+```
+
+### Check Worker Status
+```python
+from app.services.encoder_service import celery
+celery.control.inspect().active()  # View active tasks
+celery.control.inspect().registered()  # View registered workers
+```
+
+## Scaling
+
+The service can be scaled by adding more worker instances. Each worker should:
+1. Have FFmpeg installed
+2. Connect to the same Redis instance
+3. Have access to the shared storage directory
+
+### Example Scaling Setup
+
+```bash
+# Main instance (handles web UI and coordination)
+python3 start_service.py --port 5000 --tmp-dir /shared/tmp/encoder
+
+# Worker instances (handle encoding tasks)
+python3 start_service.py --worker-name encoder_worker_1 --tmp-dir /shared/tmp/encoder
+python3 start_service.py --worker-name encoder_worker_2 --tmp-dir /shared/tmp/encoder
+```
+
+## Performance Considerations
+
+1. **Storage Performance**:
+   - Use fast storage for /tmp directory
+   - Consider local SSD for better I/O performance
+
+2. **Network Bandwidth**:
+   - Ensure sufficient bandwidth between workers
+   - Consider network topology when distributing workers
+
+3. **Resource Allocation**:
+   - Monitor CPU usage across workers
+   - Balance memory usage for concurrent encoding
+
+## Troubleshooting
+
+1. **Service Won't Start**:
+   ```bash
+   # Check if Redis is already running
+   ps aux | grep redis
+   # Check port availability
+   netstat -tulpn | grep 5000
+   ```
+
+2. **Encoding Fails**:
+   - Verify FFmpeg installation
+   - Check temporary directory permissions
+   - Verify Redis connectivity
+
+3. **Worker Connection Issues**:
+   - Check Redis connection string
+   - Verify network connectivity
+   - Check firewall settings
+
+## Security Notes
+
+1. **Temporary Directory**:
+   - Regularly clean up old files
+   - Set appropriate permissions
+   ```bash
+   chmod 700 /tmp/encoder
+   ```
+
+2. **Redis Security**:
+   - Use strong passwords in production
+   - Configure proper network restrictions
+
+3. **File Validation**:
+   - Service validates video file types
+   - Implements size restrictions
+   - Sanitizes filenames
+
+## API Endpoints
+
+- `POST /api/upload`: Upload video file
+- `GET /api/status/<job_id>`: Get encoding status
+- `GET /api/video/<job_id>/<quality>`: Stream encoded video
+- `GET /api/jobs`: List all encoding jobs
+
+## Contributing
+
+[Contribution Guidelines]
+
+## License
+
+[Your License Here]

Dockerfile

@@ -0,0 +1,28 @@
+# Use Python 3.9 as the base image
+FROM python:3.9
+
+# Install FFmpeg
+RUN apt-get update && apt-get install -y ffmpeg && rm -rf /var/lib/apt/lists/*
+
+# Create a non-root user
+RUN useradd -m -u 1000 user
+USER user
+
+# Set up environment variables
+ENV PATH="/home/user/.local/bin:$PATH"
+
+# Set the working directory
+WORKDIR /app
+
+# Copy and install dependencies
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+# Copy application files
+COPY --chown=user . /app
+
+# Expose the required port
+EXPOSE 7860
+
+# Run the service
+CMD ["python3", "start_service.py", "--port", "7860", "--tmp-dir", "/tmp/encoder_main"]

app/__init__.py

@@ -0,0 +1,38 @@
+from flask import Flask, render_template
+from app.routes import main_bp, api_bp
+from app.proxy import proxy_bp
+import os
+
+def create_app():
+    app = Flask(__name__, 
+                static_folder='static',
+                template_folder='templates')
+    
+    # Load configuration
+    app.config.from_object('app.config')
+    
+    # Ensure upload and encoded directories exist
+    upload_dir = os.getenv('UPLOAD_FOLDER', 'uploads')
+    encoded_dir = os.getenv('ENCODED_FOLDER', 'encoded')
+    os.makedirs(upload_dir, exist_ok=True)
+    os.makedirs(encoded_dir, exist_ok=True)
+    
+    # Set upload folder in app config
+    app.config['UPLOAD_FOLDER'] = upload_dir
+    app.config['ENCODED_FOLDER'] = encoded_dir
+    app.config['MAX_CONTENT_LENGTH'] = 1024 * 1024 * 1024  # 1GB max file size
+    
+    # Register blueprints
+    app.register_blueprint(main_bp)
+    app.register_blueprint(api_bp, url_prefix='/api')
+    app.register_blueprint(proxy_bp)
+    
+    @app.route('/')
+    def index():
+        return render_template('index.html')
+    
+    @app.route('/favicon.ico')
+    def favicon():
+        return app.send_static_file('favicon.ico')
+    
+    return app

app/config.py

@@ -0,0 +1,31 @@
+import os
+from pathlib import Path
+
+# Base directory
+BASE_DIR = Path(__file__).resolve().parent.parent
+
+# Flask configuration
+DEBUG = True
+SECRET_KEY = os.getenv('SECRET_KEY', 'your-secret-key-here')
+
+# File upload configuration
+UPLOAD_FOLDER = os.getenv('UPLOAD_FOLDER', BASE_DIR / 'uploads')
+ENCODED_FOLDER = os.getenv('ENCODED_FOLDER', BASE_DIR / 'encoded')
+MAX_CONTENT_LENGTH = 1024 * 1024 * 1024  # 1GB max file size
+ALLOWED_EXTENSIONS = {'mp4', 'mov', 'avi', 'mkv', 'wmv'}
+
+# Celery configuration
+CELERY_BROKER_URL = 'redis://localhost:6379/0'
+CELERY_RESULT_BACKEND = 'redis://localhost:6379/0'
+CELERY_TASK_SERIALIZER = 'json'
+CELERY_RESULT_SERIALIZER = 'json'
+CELERY_ACCEPT_CONTENT = ['json']
+CELERY_TASK_TRACK_STARTED = True
+CELERY_TASK_TIME_LIMIT = 30 * 60  # 30 minutes
+
+# Redis configuration
+REDIS_URL = 'redis://localhost:6379/0'
+
+# Create required directories
+Path(UPLOAD_FOLDER).mkdir(parents=True, exist_ok=True)
+Path(ENCODED_FOLDER).mkdir(parents=True, exist_ok=True)

app/error_handlers.py

@@ -0,0 +1,41 @@
+from flask import jsonify
+from werkzeug.exceptions import HTTPException
+import logging
+
+def register_error_handlers(app):
+    # Set up logging
+    logging.basicConfig(level=logging.INFO)
+    logger = logging.getLogger(__name__)
+
+    @app.errorhandler(HTTPException)
+    def handle_http_error(error):
+        """Handle all HTTP exceptions."""
+        response = {
+            'error': True,
+            'message': error.description,
+            'status_code': error.code
+        }
+        logger.error(f'HTTP error occurred: {error.code} - {error.description}')
+        return jsonify(response), error.code
+
+    @app.errorhandler(Exception)
+    def handle_generic_error(error):
+        """Handle all unhandled exceptions."""
+        response = {
+            'error': True,
+            'message': 'An unexpected error occurred',
+            'status_code': 500
+        }
+        logger.error(f'Unhandled error: {str(error)}', exc_info=True)
+        return jsonify(response), 500
+
+    @app.errorhandler(413)
+    def handle_file_too_large(error):
+        """Handle file size exceeding MAX_CONTENT_LENGTH."""
+        response = {
+            'error': True,
+            'message': 'File is too large. Maximum size allowed is 1GB.',
+            'status_code': 413
+        }
+        logger.error('File upload exceeded size limit')
+        return jsonify(response), 413

app/proxy.py

@@ -0,0 +1,53 @@
+from flask import Blueprint, send_from_directory, current_app
+import os
+import logging
+
+logger = logging.getLogger(__name__)
+proxy_bp = Blueprint('proxy', __name__)
+
+@proxy_bp.route('/files/<path:filename>')
+def serve_file(filename):
+    """Serve files from the encoded directory"""
+    try:
+        encoded_dir = current_app.config['ENCODED_FOLDER']
+        # Split the filename to get the job_id and quality
+        parts = filename.split('/')
+        if len(parts) >= 2:
+            job_id = parts[0]
+            quality_file = parts[1]
+            # Construct the full path
+            job_dir = os.path.join(encoded_dir, job_id)
+            return send_from_directory(job_dir, quality_file)
+        else:
+            return {"error": "Invalid file path"}, 400
+    except Exception as e:
+        logger.error(f"Error serving file {filename}: {str(e)}")
+        return {"error": "File not found"}, 404
+
+@proxy_bp.route('/uploads/<path:filename>')
+def serve_upload(filename):
+    """Serve files from the uploads directory"""
+    try:
+        upload_dir = current_app.config['UPLOAD_FOLDER']
+        return send_from_directory(upload_dir, filename)
+    except Exception as e:
+        logger.error(f"Error serving upload {filename}: {str(e)}")
+        return {"error": "File not found"}, 404
+
+@proxy_bp.route('/video/<job_id>/<quality>')
+def serve_video(job_id, quality):
+    """Serve encoded video files"""
+    try:
+        encoded_dir = current_app.config['ENCODED_FOLDER']
+        video_path = os.path.join(encoded_dir, job_id, f"{quality}.mp4")
+        if os.path.exists(video_path):
+            return send_from_directory(
+                os.path.join(encoded_dir, job_id),
+                f"{quality}.mp4",
+                mimetype='video/mp4'
+            )
+        else:
+            return {"error": "Video not found"}, 404
+    except Exception as e:
+        logger.error(f"Error serving video {job_id}/{quality}: {str(e)}")
+        return {"error": "Video not found"}, 404

app/routes.py

@@ -0,0 +1,230 @@
+from flask import Blueprint, request, jsonify, current_app, render_template, send_from_directory
+from werkzeug.utils import secure_filename
+import os
+from pathlib import Path
+import logging
+import json
+from datetime import datetime
+
+from app.services.encoder_service import encoder_service
+
+logger = logging.getLogger(__name__)
+
+# Create blueprints
+main_bp = Blueprint('main', __name__)
+api_bp = Blueprint('api', __name__)
+
+@main_bp.route('/')
+def index():
+    """Render the main page"""
+    return render_template('index.html')
+
+@main_bp.route('/files')
+def files_page():
+    """Render the files page"""
+    return render_template('files.html')
+
+@api_bp.route('/files')
+def list_files():
+    """List all encoded files with their details"""
+    try:
+        encoded_dir = Path(current_app.config['ENCODED_FOLDER'])
+        files = []
+        
+        if encoded_dir.exists():
+            for job_dir in encoded_dir.iterdir():
+                if job_dir.is_dir():
+                    job_id = job_dir.name
+                    job_info = encoder_service.get_job_info(job_id)
+                    
+                    if job_info and job_info.get('status') == 'completed':
+                        files.append({
+                            'job_id': job_id,
+                            'output_name': job_info.get('output_name', ''),
+                            'created_at': job_info.get('start_time'),
+                            'completed_at': job_info.get('completion_time'),
+                            'qualities': {
+                                file['quality']: file['size'] 
+                                for file in job_info.get('files', [])
+                            }
+                        })
+        
+        return jsonify({
+            'files': sorted(files, key=lambda x: x['created_at'], reverse=True)
+        })
+    except Exception as e:
+        logger.error(f"Failed to list files: {str(e)}")
+        return jsonify({
+            'error': True,
+            'message': 'Failed to list files'
+        }), 500
+
+@api_bp.route('/upload', methods=['POST'])
+def upload_video():
+    """Handle video file upload and start encoding process"""
+    try:
+        if 'video' not in request.files:
+            return jsonify({
+                'error': True,
+                'message': 'No video file provided'
+            }), 400
+
+        file = request.files['video']
+        output_name = request.form.get('output_name')
+        
+        if file.filename == '':
+            return jsonify({
+                'error': True,
+                'message': 'No file selected'
+            }), 400
+
+        if not allowed_file(file.filename):
+            return jsonify({
+                'error': True,
+                'message': 'Invalid file type'
+            }), 400
+
+        filename = secure_filename(file.filename)
+        file_path = os.path.join(current_app.config['UPLOAD_FOLDER'], filename)
+        
+        # Save the file
+        file.save(file_path)
+        
+        # Get custom encoding settings if provided
+        settings = request.form.get('settings')
+        
+        # Generate job ID and start encoding
+        job_id = generate_job_id()
+        result = encoder_service.start_encode_job(
+            filename=filename,
+            job_id=job_id,
+            output_name=output_name,
+            settings=settings
+        )
+        
+        return jsonify({
+            'job_id': job_id,
+            'message': 'Video upload successful',
+            'status': result['status']
+        }), 202
+
+    except Exception as e:
+        logger.error(f"Upload failed: {str(e)}")
+        return jsonify({
+            'error': True,
+            'message': 'Failed to process upload'
+        }), 500
+
+@api_bp.route('/jobs', methods=['GET'])
+def list_jobs():
+    """List all encoding jobs"""
+    try:
+        return jsonify({
+            'jobs': encoder_service.jobs
+        }), 200
+    except Exception as e:
+        logger.error(f"Failed to list jobs: {str(e)}")
+        return jsonify({
+            'error': True,
+            'message': 'Failed to list jobs'
+        }), 500
+
+@api_bp.route('/jobs/<job_id>/stop', methods=['POST'])
+def stop_job(job_id):
+    """Stop an encoding job"""
+    try:
+        if encoder_service.stop_job(job_id):
+            return jsonify({
+                'message': 'Job stopped successfully'
+            }), 200
+        else:
+            return jsonify({
+                'error': True,
+                'message': 'Job not found or already completed'
+            }), 404
+    except Exception as e:
+        logger.error(f"Failed to stop job: {str(e)}")
+        return jsonify({
+            'error': True,
+            'message': 'Failed to stop job'
+        }), 500
+
+@api_bp.route('/jobs/<job_id>/clean', methods=['POST'])
+def clean_job(job_id):
+    """Clean up all files related to a job"""
+    try:
+        if encoder_service.clean_job(job_id):
+            return jsonify({
+                'message': 'Job cleaned successfully'
+            }), 200
+        else:
+            return jsonify({
+                'error': True,
+                'message': 'Failed to clean job'
+            }), 500
+    except Exception as e:
+        logger.error(f"Failed to clean job: {str(e)}")
+        return jsonify({
+            'error': True,
+            'message': 'Failed to clean job'
+        }), 500
+
+@api_bp.route('/status/<job_id>', methods=['GET'])
+def get_job_status(job_id):
+    """Get the status of an encoding job"""
+    try:
+        status = encoder_service.get_job_status(job_id)
+        return jsonify(status), 200
+    except Exception as e:
+        logger.error(f"Failed to get status for job {job_id}: {str(e)}")
+        return jsonify({
+            'error': True,
+            'message': 'Failed to get job status'
+        }), 500
+
+@api_bp.route('/video/<job_id>/<quality>')
+def serve_video(job_id, quality):
+    """Serve encoded video files"""
+    try:
+        job_info = encoder_service.get_job_info(job_id)
+        if not job_info:
+            return jsonify({
+                'error': True,
+                'message': 'Job not found'
+            }), 404
+
+        encoded_dir = current_app.config['ENCODED_FOLDER']
+        output_name = job_info.get('output_name', 'video')
+        video_filename = f"{output_name}_{quality}.mp4"
+        video_path = os.path.join(encoded_dir, job_id, video_filename)
+
+        if os.path.exists(video_path):
+            return send_from_directory(
+                os.path.join(encoded_dir, job_id),
+                video_filename,
+                mimetype='video/mp4',
+                as_attachment=True,
+                download_name=video_filename
+            )
+        else:
+            return jsonify({
+                'error': True,
+                'message': 'Video not found'
+            }), 404
+    except Exception as e:
+        logger.error(f"Failed to serve video: {str(e)}")
+        return jsonify({
+            'error': True,
+            'message': 'Failed to serve video'
+        }), 500
+
+def allowed_file(filename):
+    """Check if the file extension is allowed"""
+    ALLOWED_EXTENSIONS = {'mp4', 'mov', 'avi', 'mkv', 'wmv'}
+    return '.' in filename and \
+           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+def generate_job_id():
+    """Generate a unique job ID"""
+    import uuid
+    return str(uuid.uuid4())

app/services/encoder_service.py

@@ -0,0 +1,317 @@
+import subprocess
+import os
+import shutil
+from pathlib import Path
+import logging
+import json
+from datetime import datetime
+import re
+import threading
+import queue
+import signal
+
+# Configure logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+class EncoderService:
+    def __init__(self):
+        self.jobs = {}
+        # Optimized settings for web streaming
+        self.default_qualities = {
+            '480p': {
+                'width': 854,
+                'height': 480,
+                'bitrate': '1000k',
+                'maxrate': '1500k',
+                'bufsize': '2000k',
+                'audio_bitrate': '128k',
+                'keyframe': '48',  # Keyframe every 2 seconds at 24fps
+                'preset': 'slow',  # Better compression
+                'profile': 'main',
+                'level': '3.1',
+                'tune': 'fastdecode'
+            },
+            '720p': {
+                'width': 1280,
+                'height': 720,
+                'bitrate': '2500k',
+                'maxrate': '3000k',
+                'bufsize': '4000k',
+                'audio_bitrate': '128k',
+                'keyframe': '48',
+                'preset': 'slow',
+                'profile': 'main',
+                'level': '3.1',
+                'tune': 'fastdecode'
+            },
+            '1080p': {
+                'width': 1920,
+                'height': 1080,
+                'bitrate': '5000k',
+                'maxrate': '6000k',
+                'bufsize': '8000k',
+                'audio_bitrate': '192k',
+                'keyframe': '48',
+                'preset': 'slow',
+                'profile': 'high',
+                'level': '4.0',
+                'tune': 'fastdecode'
+            }
+        }
+        self.active_processes = {}
+
+    def start_encode_job(self, filename, job_id, output_name=None, settings=None):
+        """Start an encoding job with optional custom settings and output name"""
+        try:
+            qualities = self.default_qualities.copy()
+            if settings:
+                settings_dict = json.loads(settings)
+                for quality, bitrate in settings_dict.items():
+                    if quality in qualities and bitrate:
+                        qualities[quality]['bitrate'] = bitrate
+                        # Adjust maxrate and bufsize based on new bitrate
+                        bitrate_value = int(bitrate.replace('k', ''))
+                        qualities[quality]['maxrate'] = f"{int(bitrate_value * 1.5)}k"
+                        qualities[quality]['bufsize'] = f"{int(bitrate_value * 2)}k"
+
+            self.jobs[job_id] = {
+                'status': 'pending',
+                'progress': 0,
+                'start_time': datetime.now().isoformat(),
+                'filename': filename,
+                'output_name': output_name or os.path.splitext(filename)[0],
+                'current_quality': None,
+                'outputs': [],
+                'settings': qualities
+            }
+
+            # Start encoding in a separate thread
+            thread = threading.Thread(
+                target=self._encode_video,
+                args=(filename, job_id)
+            )
+            thread.daemon = True
+            thread.start()
+
+            return {'status': 'pending', 'job_id': job_id}
+        except Exception as e:
+            logger.error(f"Failed to start encoding job: {str(e)}")
+            return {'status': 'failed', 'error': str(e)}
+
+    def _encode_video(self, filename, job_id):
+        """Internal method to handle video encoding"""
+        try:
+            upload_path = Path(os.getenv('UPLOAD_FOLDER', 'uploads'))
+            encoded_path = Path(os.getenv('ENCODED_FOLDER', 'encoded'))
+            input_file = upload_path / filename
+            output_dir = encoded_path / job_id
+            output_name = self.jobs[job_id]['output_name']
+
+            # Create output directory
+            output_dir.mkdir(parents=True, exist_ok=True)
+
+            qualities = self.jobs[job_id]['settings']
+            total_steps = len(qualities)
+            completed_steps = 0
+            outputs = []
+
+            # Get video duration
+            duration = self._get_video_duration(input_file)
+            if not duration:
+                raise Exception("Could not determine video duration")
+
+            for quality, settings in qualities.items():
+                try:
+                    self.jobs[job_id].update({
+                        'status': 'processing',
+                        'current_quality': quality,
+                        'progress': (completed_steps / total_steps) * 100
+                    })
+
+                    output_file = output_dir / f"{output_name}_{quality}.mp4"
+                    
+                    # FFmpeg command with optimized settings for web streaming
+                    cmd = [
+                        'ffmpeg', '-y',
+                        '-i', str(input_file),
+                        '-c:v', 'libx264',
+                        '-preset', settings['preset'],
+                        '-profile:v', settings['profile'],
+                        '-level', settings['level'],
+                        '-tune', settings['tune'],
+                        '-b:v', settings['bitrate'],
+                        '-maxrate', settings['maxrate'],
+                        '-bufsize', settings['bufsize'],
+                        '-vf', f"scale={settings['width']}:{settings['height']}",
+                        '-g', settings['keyframe'],
+                        '-keyint_min', settings['keyframe'],
+                        '-sc_threshold', '0',  # Disable scene cut detection
+                        '-c:a', 'aac',
+                        '-b:a', settings['audio_bitrate'],
+                        '-ar', '48000',  # Audio sample rate
+                        '-ac', '2',      # Stereo audio
+                        '-movflags', '+faststart',  # Enable fast start for web playback
+                        '-progress', 'pipe:1',
+                        str(output_file)
+                    ]
+
+                    process = subprocess.Popen(
+                        cmd,
+                        stdout=subprocess.PIPE,
+                        stderr=subprocess.PIPE,
+                        universal_newlines=True
+                    )
+
+                    self.active_processes[job_id] = process
+
+                    # Monitor FFmpeg progress
+                    while True:
+                        output = process.stdout.readline()
+                        if output == '' and process.poll() is not None:
+                            break
+                        if output:
+                            progress = self._parse_ffmpeg_progress(output, duration)
+                            if progress is not None:
+                                quality_progress = (completed_steps + progress/100) / total_steps * 100
+                                self.jobs[job_id]['progress'] = quality_progress
+
+                    if process.returncode == 0:
+                        outputs.append({
+                            'quality': quality,
+                            'path': str(output_file),
+                            'settings': settings
+                        })
+                        completed_steps += 1
+                    else:
+                        error_output = process.stderr.read()
+                        logger.error(f"FFmpeg error: {error_output}")
+                        raise Exception(f"FFmpeg failed for quality {quality}")
+
+                except Exception as e:
+                    logger.error(f"Error encoding {quality}: {str(e)}")
+                    self.jobs[job_id].update({
+                        'status': 'failed',
+                        'error': str(e)
+                    })
+                    return
+
+                finally:
+                    if job_id in self.active_processes:
+                        del self.active_processes[job_id]
+
+            self.jobs[job_id].update({
+                'status': 'completed',
+                'progress': 100,
+                'outputs': outputs,
+                'completion_time': datetime.now().isoformat()
+            })
+
+        except Exception as e:
+            logger.error(f"Encoding failed: {str(e)}")
+            self.jobs[job_id].update({
+                'status': 'failed',
+                'error': str(e)
+            })
+
+    def _get_video_duration(self, input_file):
+        """Get video duration using FFprobe"""
+        try:
+            cmd = [
+                'ffprobe',
+                '-v', 'error',
+                '-show_entries', 'format=duration',
+                '-of', 'json',
+                str(input_file)
+            ]
+            result = subprocess.run(cmd, capture_output=True, text=True)
+            data = json.loads(result.stdout)
+            return float(data['format']['duration'])
+        except Exception as e:
+            logger.error(f"Error getting video duration: {str(e)}")
+            return None
+
+    def _parse_ffmpeg_progress(self, output, duration):
+        """Parse FFmpeg progress output"""
+        try:
+            if 'out_time_ms=' in output:
+                time_ms = int(output.split('out_time_ms=')[1].strip())
+                progress = (time_ms / 1000000) / duration * 100
+                return min(100, max(0, progress))
+            return None
+        except Exception:
+            return None
+
+    def stop_job(self, job_id):
+        """Stop an encoding job"""
+        try:
+            if job_id in self.active_processes:
+                process = self.active_processes[job_id]
+                process.send_signal(signal.SIGTERM)
+                process.wait(timeout=5)
+                del self.active_processes[job_id]
+                self.jobs[job_id]['status'] = 'stopped'
+                return True
+            return False
+        except Exception as e:
+            logger.error(f"Error stopping job {job_id}: {str(e)}")
+            return False
+
+    def clean_job(self, job_id):
+        """Clean up all files related to a job"""
+        try:
+            # Get paths
+            upload_path = Path(os.getenv('UPLOAD_FOLDER', 'uploads'))
+            encoded_path = Path(os.getenv('ENCODED_FOLDER', 'encoded'))
+            
+            # Clean up source file if it exists
+            if job_id in self.jobs:
+                source_file = upload_path / self.jobs[job_id]['filename']
+                if source_file.exists():
+                    source_file.unlink()
+
+            # Clean up encoded files
+            job_output_dir = encoded_path / job_id
+            if job_output_dir.exists():
+                shutil.rmtree(job_output_dir)
+
+            # Remove job from jobs dict
+            if job_id in self.jobs:
+                del self.jobs[job_id]
+
+            return True
+        except Exception as e:
+            logger.error(f"Error cleaning job {job_id}: {str(e)}")
+            return False
+
+    def get_job_info(self, job_id):
+        """Get detailed information about a job"""
+        try:
+            if job_id not in self.jobs:
+                return None
+            
+            job = self.jobs[job_id]
+            encoded_path = Path(os.getenv('ENCODED_FOLDER', 'encoded'))
+            job_path = encoded_path / job_id
+
+            # Get file sizes
+            files_info = []
+            if job_path.exists():
+                for output in job.get('outputs', []):
+                    file_path = Path(output['path'])
+                    if file_path.exists():
+                        files_info.append({
+                            'quality': output['quality'],
+                            'size': file_path.stat().st_size,
+                            'path': str(file_path)
+                        })
+
+            return {
+                **job,
+                'files': files_info
+            }
+        except Exception as e:
+            logger.error(f"Error getting job info: {str(e)}")
+            return None
+
+encoder_service = EncoderService()

app/static/css/style.css

@@ -0,0 +1,41 @@
+/* Custom styles */
+.upload-zone {
+    transition: all 0.3s ease;
+}
+
+.upload-zone:hover {
+    background-color: rgba(79, 70, 229, 0.05);
+}
+
+.progress-bar {
+    transition: width 0.3s ease;
+}
+
+.video-preview {
+    aspect-ratio: 16/9;
+    background: #000;
+}
+
+.modal-backdrop {
+    backdrop-filter: blur(2px);
+}
+
+.status-badge {
+    transition: all 0.3s ease;
+}
+
+.job-row {
+    transition: background-color 0.2s ease;
+}
+
+.job-row:hover {
+    background-color: rgba(79, 70, 229, 0.05);
+}
+
+.quality-button {
+    transition: all 0.2s ease;
+}
+
+.quality-button:hover {
+    transform: translateY(-1px);
+}

app/templates/files.html

@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Files - Media Encoder Dashboard</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        dark: {
+                            900: '#0f172a',
+                            800: '#1e293b',
+                            700: '#334155',
+                            600: '#475569',
+                            500: '#64748b'
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        body { font-family: 'Inter', sans-serif; background-color: #0f172a; }
+    </style>
+</head>
+<body class="text-gray-100">
+    <nav class="bg-dark-800 border-b border-dark-700">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex items-center">
+                    <i class="fas fa-video text-indigo-500 text-2xl mr-2"></i>
+                    <h1 class="text-xl font-semibold">Media Encoder Dashboard</h1>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <a href="/" class="text-gray-300 hover:text-gray-100">Home</a>
+                    <a href="/files" class="text-indigo-400 hover:text-indigo-300">Files</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+        <div class="bg-dark-800 border border-dark-700 shadow rounded-lg p-6">
+            <h2 class="text-lg font-medium mb-4">Encoded Files</h2>
+            <div id="fileList" class="space-y-4">
+                <!-- Files will be listed here -->
+            </div>
+        </div>
+    </main>
+
+    <!-- Video Preview Modal -->
+    <div id="videoModal" class="hidden fixed inset-0 bg-black bg-opacity-75 backdrop-blur-sm flex items-center justify-center z-50">
+        <div class="bg-dark-800 border border-dark-700 rounded-lg p-6 max-w-4xl w-full mx-4">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-medium">Video Preview</h3>
+                <button onclick="closeVideoModal()" class="text-gray-400 hover:text-gray-300">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="aspect-w-16 aspect-h-9">
+                <video id="videoPlayer" controls class="w-full rounded-lg">
+                    Your browser does not support the video tag.
+                </video>
+            </div>
+        </div>
+    </div>
+
+    <!-- Confirmation Modal -->
+    <div id="confirmModal" class="hidden fixed inset-0 bg-black bg-opacity-75 backdrop-blur-sm flex items-center justify-center z-50">
+        <div class="bg-dark-800 border border-dark-700 rounded-lg p-6 max-w-md w-full mx-4">
+            <h3 class="text-lg font-medium mb-4">Confirm Deletion</h3>
+            <p class="text-gray-300 mb-6">Are you sure you want to delete this job and all its associated files? This action cannot be undone.</p>
+            <div class="flex justify-end space-x-3">
+                <button onclick="closeConfirmModal()" class="px-4 py-2 bg-dark-600 text-gray-300 rounded hover:bg-dark-500 transition-colors">
+                    Cancel
+                </button>
+                <button id="confirmDeleteBtn" class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors">
+                    Delete
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        function formatFileSize(bytes) {
+            if (bytes === 0) return '0 Bytes';
+            const k = 1024;
+            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+        }
+
+        function formatDate(dateString) {
+            const date = new Date(dateString);
+            return date.toLocaleString();
+        }
+
+        async function loadFiles() {
+            try {
+                const response = await fetch('/api/files');
+                const data = await response.json();
+                
+                const fileList = document.getElementById('fileList');
+                fileList.innerHTML = '';
+
+                data.files.forEach(file => {
+                    const fileCard = document.createElement('div');
+                    fileCard.className = 'bg-dark-700 rounded-lg p-4 hover:bg-dark-600 transition-colors duration-200';
+                    fileCard.innerHTML = `
+                        <div class="flex justify-between items-start">
+                            <div class="space-y-1">
+                                <h3 class="text-lg font-medium text-gray-100">${file.output_name}</h3>
+                                <p class="text-sm text-gray-400">Job ID: ${file.job_id}</p>
+                                <p class="text-sm text-gray-400">Created: ${formatDate(file.created_at)}</p>
+                                ${file.completed_at ? `<p class="text-sm text-gray-400">Completed: ${formatDate(file.completed_at)}</p>` : ''}
+                            </div>
+                            <div class="flex items-start space-x-4">
+                                <div class="flex flex-col items-end space-y-2">
+                                    ${Object.entries(file.qualities).map(([quality, size]) => `
+                                        <div class="flex items-center space-x-2">
+                                            <button onclick="playVideo('${file.job_id}', '${quality}', '${file.output_name}')" 
+                                                    class="text-xs bg-dark-600 hover:bg-dark-500 px-3 py-1.5 rounded transition-all duration-300">
+                                                <i class="fas fa-play mr-1"></i>${quality}
+                                            </button>
+                                            <a href="/video/${file.job_id}/${quality}"
+                                               download="${file.output_name}_${quality}.mp4"
+                                               class="text-xs bg-indigo-900 hover:bg-indigo-800 text-indigo-300 px-2 py-1.5 rounded transition-all duration-300">
+                                                <i class="fas fa-download"></i>
+                                            </a>
+                                            <span class="text-xs text-gray-400">${formatFileSize(size)}</span>
+                                        </div>
+                                    `).join('')}
+                                </div>
+                                <button onclick="showDeleteConfirmation('${file.job_id}')" 
+                                        class="text-xs bg-red-900 hover:bg-red-800 text-red-300 px-3 py-1.5 rounded transition-all duration-300">
+                                    <i class="fas fa-trash"></i>
+                                </button>
+                            </div>
+                        </div>
+                    `;
+                    fileList.appendChild(fileCard);
+                });
+            } catch (error) {
+                console.error('Error loading files:', error);
+            }
+        }
+
+        function playVideo(jobId, quality, outputName) {
+            const videoPlayer = document.getElementById('videoPlayer');
+            const videoModal = document.getElementById('videoModal');
+            videoPlayer.src = `/video/${jobId}/${quality}`;
+            videoModal.classList.remove('hidden');
+        }
+
+        function closeVideoModal() {
+            const videoModal = document.getElementById('videoModal');
+            const videoPlayer = document.getElementById('videoPlayer');
+            videoModal.classList.add('hidden');
+            videoPlayer.pause();
+            videoPlayer.src = '';
+        }
+
+        let jobToDelete = null;
+
+        function showDeleteConfirmation(jobId) {
+            jobToDelete = jobId;
+            document.getElementById('confirmModal').classList.remove('hidden');
+        }
+
+        function closeConfirmModal() {
+            jobToDelete = null;
+            document.getElementById('confirmModal').classList.add('hidden');
+        }
+
+        document.getElementById('confirmDeleteBtn').addEventListener('click', async () => {
+            if (!jobToDelete) return;
+
+            try {
+                const response = await fetch(`/api/jobs/${jobToDelete}/clean`, {
+                    method: 'POST'
+                });
+
+                if (response.ok) {
+                    closeConfirmModal();
+                    loadFiles();
+                } else {
+                    alert('Failed to delete job');
+                }
+            } catch (error) {
+                console.error('Error deleting job:', error);
+                alert('Error deleting job');
+            }
+        });
+
+        // Close modals when clicking outside
+        window.addEventListener('click', (e) => {
+            const videoModal = document.getElementById('videoModal');
+            const confirmModal = document.getElementById('confirmModal');
+            if (e.target === videoModal) closeVideoModal();
+            if (e.target === confirmModal) closeConfirmModal();
+        });
+
+        // Load files on page load
+        loadFiles();
+
+        // Refresh files list every 30 seconds
+        setInterval(loadFiles, 30000);
+    </script>
+</body>
+</html>

app/templates/index.html

@@ -0,0 +1,342 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Media Encoder Dashboard</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        dark: {
+                            900: '#0f172a',
+                            800: '#1e293b',
+                            700: '#334155',
+                            600: '#475569',
+                            500: '#64748b'
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        body { font-family: 'Inter', sans-serif; background-color: #0f172a; }
+        .drag-over { border-color: #6366f1 !important; background-color: rgba(99, 102, 241, 0.1) !important; }
+        .upload-progress { transition: width 0.3s ease-in-out; }
+    </style>
+</head>
+<body class="text-gray-100">
+    <nav class="bg-dark-800 border-b border-dark-700">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex items-center">
+                    <i class="fas fa-video text-indigo-500 text-2xl mr-2"></i>
+                    <h1 class="text-xl font-semibold">Media Encoder Dashboard</h1>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <a href="/" class="text-indigo-400 hover:text-indigo-300">Home</a>
+                    <a href="/files" class="text-gray-300 hover:text-gray-100">Files</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+        <div class="bg-dark-800 border border-dark-700 shadow rounded-lg p-6 mb-6">
+            <h2 class="text-lg font-medium mb-4">Upload Video</h2>
+            <form id="uploadForm" class="space-y-4">
+                <div class="flex items-center justify-center w-full">
+                    <label id="dropZone" class="flex flex-col w-full h-32 border-2 border-dashed border-dark-600 rounded-lg cursor-pointer hover:border-indigo-500 transition-all duration-300">
+                        <div class="flex flex-col items-center justify-center pt-7">
+                            <i class="fas fa-cloud-upload-alt text-3xl text-indigo-500 mb-2"></i>
+                            <p class="text-sm text-gray-300">Drag and drop or click to select</p>
+                            <p class="text-xs text-gray-400">Supported formats: MP4, MOV, AVI, MKV, WMV</p>
+                        </div>
+                        <input type="file" id="videoFile" name="video" class="hidden" accept=".mp4,.mov,.avi,.mkv,.wmv">
+                    </label>
+                </div>
+                <div id="fileInfo" class="hidden space-y-2">
+                    <p class="text-sm text-gray-300">Selected file: <span id="fileName" class="font-medium text-indigo-400"></span></p>
+                    <div id="uploadProgress" class="hidden">
+                        <div class="w-full bg-dark-600 rounded-full h-2">
+                            <div class="upload-progress bg-indigo-600 h-2 rounded-full" style="width: 0%"></div>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-1"><span id="uploadPercent">0</span>% uploaded</p>
+                    </div>
+                </div>
+                <div class="space-y-4">
+                    <div class="bg-dark-700 p-4 rounded-lg">
+                        <h3 class="text-sm font-medium mb-4">Output Settings</h3>
+                        <div class="space-y-4">
+                            <div>
+                                <label class="block text-sm font-medium text-gray-300 mb-2">Output Name</label>
+                                <input type="text" id="outputName" placeholder="Enter output name (without extension)" 
+                                    class="w-full px-3 py-2 bg-dark-600 border border-dark-500 rounded-md text-sm text-gray-100 placeholder-gray-400">
+                                <p class="text-xs text-gray-400 mt-1">Quality will be appended automatically (e.g., name_480p.mp4)</p>
+                            </div>
+                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-300">480p Settings</label>
+                                    <input type="text" id="480p_bitrate" placeholder="1000k" 
+                                        class="mt-1 block w-full px-3 py-2 bg-dark-600 border border-dark-500 rounded-md text-sm text-gray-100 placeholder-gray-400">
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-300">720p Settings</label>
+                                    <input type="text" id="720p_bitrate" placeholder="2500k" 
+                                        class="mt-1 block w-full px-3 py-2 bg-dark-600 border border-dark-500 rounded-md text-sm text-gray-100 placeholder-gray-400">
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-300">1080p Settings</label>
+                                    <input type="text" id="1080p_bitrate" placeholder="5000k" 
+                                        class="mt-1 block w-full px-3 py-2 bg-dark-600 border border-dark-500 rounded-md text-sm text-gray-100 placeholder-gray-400">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <button type="submit" id="uploadButton" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-300">
+                        <i class="fas fa-upload mr-2"></i>
+                        Upload & Start Encoding
+                    </button>
+                </div>
+            </form>
+        </div>
+
+        <div class="bg-dark-800 border border-dark-700 shadow rounded-lg p-6">
+            <h2 class="text-lg font-medium mb-4">Encoding Jobs</h2>
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-dark-700">
+                    <thead class="bg-dark-700">
+                        <tr>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Job ID</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Output Name</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Status</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Progress</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Current Quality</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody id="jobsList" class="bg-dark-800 divide-y divide-dark-700">
+                        <!-- Jobs will be inserted here -->
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // File upload handling
+        const uploadForm = document.getElementById('uploadForm');
+        const videoFile = document.getElementById('videoFile');
+        const fileInfo = document.getElementById('fileInfo');
+        const fileName = document.getElementById('fileName');
+        const uploadProgress = document.getElementById('uploadProgress');
+        const uploadPercent = document.getElementById('uploadPercent');
+        const progressBar = document.querySelector('.upload-progress');
+        const jobsList = document.getElementById('jobsList');
+        const dropZone = document.getElementById('dropZone');
+        const outputName = document.getElementById('outputName');
+
+        // Drag and drop handling
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            dropZone.addEventListener(eventName, preventDefaults, false);
+            document.body.addEventListener(eventName, preventDefaults, false);
+        });
+
+        ['dragenter', 'dragover'].forEach(eventName => {
+            dropZone.addEventListener(eventName, highlight, false);
+        });
+
+        ['dragleave', 'drop'].forEach(eventName => {
+            dropZone.addEventListener(eventName, unhighlight, false);
+        });
+
+        dropZone.addEventListener('drop', handleDrop, false);
+
+        function preventDefaults(e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+
+        function highlight(e) {
+            dropZone.classList.add('drag-over');
+        }
+
+        function unhighlight(e) {
+            dropZone.classList.remove('drag-over');
+        }
+
+        function handleDrop(e) {
+            const dt = e.dataTransfer;
+            const files = dt.files;
+            if (files.length > 0) {
+                videoFile.files = files;
+                updateFileInfo(files[0]);
+            }
+        }
+
+        videoFile.addEventListener('change', (e) => {
+            const file = e.target.files[0];
+            if (file) {
+                updateFileInfo(file);
+                // Set default output name from file name (without extension)
+                const defaultName = file.name.replace(/\.[^/.]+$/, "");
+                outputName.value = defaultName;
+            }
+        });
+
+        function updateFileInfo(file) {
+            fileName.textContent = file.name;
+            fileInfo.classList.remove('hidden');
+            uploadProgress.classList.add('hidden');
+            progressBar.style.width = '0%';
+            uploadPercent.textContent = '0';
+        }
+
+        uploadForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const formData = new FormData();
+            formData.append('video', videoFile.files[0]);
+            formData.append('output_name', outputName.value || videoFile.files[0].name.replace(/\.[^/.]+$/, ""));
+
+            // Add encoding settings
+            const settings = {
+                '480p': document.getElementById('480p_bitrate').value || '1000k',
+                '720p': document.getElementById('720p_bitrate').value || '2500k',
+                '1080p': document.getElementById('1080p_bitrate').value || '5000k'
+            };
+            formData.append('settings', JSON.stringify(settings));
+
+            try {
+                uploadProgress.classList.remove('hidden');
+                const xhr = new XMLHttpRequest();
+                
+                xhr.upload.addEventListener('progress', (e) => {
+                    if (e.lengthComputable) {
+                        const percent = Math.round((e.loaded / e.total) * 100);
+                        progressBar.style.width = percent + '%';
+                        uploadPercent.textContent = percent;
+                    }
+                });
+
+                xhr.onload = function() {
+                    if (xhr.status === 202) {
+                        const response = JSON.parse(xhr.responseText);
+                        alert('Upload successful! Job ID: ' + response.job_id);
+                        uploadForm.reset();
+                        fileInfo.classList.add('hidden');
+                        fetchJobs();
+                    } else {
+                        alert('Upload failed: ' + xhr.responseText);
+                    }
+                };
+
+                xhr.onerror = function() {
+                    alert('Upload failed. Please try again.');
+                };
+
+                xhr.open('POST', '/api/upload', true);
+                xhr.send(formData);
+            } catch (error) {
+                alert('Error uploading file: ' + error.message);
+            }
+        });
+
+        async function fetchJobs() {
+            try {
+                const response = await fetch('/api/jobs');
+                const data = await response.json();
+                
+                jobsList.innerHTML = '';
+                
+                Object.entries(data.jobs).forEach(([jobId, job]) => {
+                    const row = document.createElement('tr');
+                    row.className = 'hover:bg-dark-700 transition-colors duration-200';
+                    row.innerHTML = `
+                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-100">${jobId}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">${job.output_name || '-'}</td>
+                        <td class="px-6 py-4 whitespace-nowrap">
+                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusClass(job.status)}">
+                                ${job.status}
+                            </span>
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap">
+                            <div class="w-full bg-dark-600 rounded-full h-2.5">
+                                <div class="bg-indigo-600 h-2.5 rounded-full transition-all duration-300" style="width: ${job.progress || 0}%"></div>
+                            </div>
+                            <span class="text-xs text-gray-400 mt-1">${Math.round(job.progress || 0)}%</span>
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
+                            ${job.current_quality || '-'}
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
+                            ${job.status === 'completed' ? getVideoButtons(jobId, job.outputs, job.output_name) : ''}
+                            ${job.status === 'processing' ? `
+                                <button onclick="stopJob('${jobId}')" class="text-xs bg-red-900 hover:bg-red-800 text-red-300 px-2 py-1 rounded transition-all duration-300">
+                                    Stop
+                                </button>
+                            ` : ''}
+                        </td>
+                    `;
+                    jobsList.appendChild(row);
+                });
+            } catch (error) {
+                console.error('Error fetching jobs:', error);
+            }
+        }
+
+        function getStatusClass(status) {
+            const classes = {
+                'completed': 'bg-green-900 text-green-300',
+                'processing': 'bg-yellow-900 text-yellow-300',
+                'failed': 'bg-red-900 text-red-300',
+                'pending': 'bg-dark-600 text-gray-300',
+                'stopped': 'bg-gray-900 text-gray-300'
+            };
+            return classes[status] || classes.pending;
+        }
+
+        function getVideoButtons(jobId, outputs, outputName) {
+            if (!outputs) return '';
+            
+            return `
+                <div class="space-x-2">
+                    ${outputs.map(output => `
+                        <a href="/video/${jobId}/${output.quality}" 
+                           class="text-xs bg-dark-700 hover:bg-dark-600 px-2 py-1 rounded transition-all duration-300"
+                           download="${outputName || 'video'}_${output.quality}.mp4">
+                            ${output.quality}
+                        </a>
+                    `).join('')}
+                </div>
+            `;
+        }
+
+        async function stopJob(jobId) {
+            try {
+                const response = await fetch(`/api/jobs/${jobId}/stop`, {
+                    method: 'POST'
+                });
+                if (response.ok) {
+                    fetchJobs();
+                } else {
+                    alert('Failed to stop job');
+                }
+            } catch (error) {
+                console.error('Error stopping job:', error);
+            }
+        }
+
+        // Initial jobs fetch
+        fetchJobs();
+
+        // Poll for updates every 2 seconds
+        setInterval(fetchJobs, 2000);
+    </script>
+</body>
+</html>

app/utils.py

@@ -0,0 +1,66 @@
+import uuid
+import os
+from pathlib import Path
+from werkzeug.utils import secure_filename
+import logging
+
+logger = logging.getLogger(__name__)
+
+def generate_job_id():
+    """Generate a unique job ID."""
+    return str(uuid.uuid4())
+
+def allowed_file(filename, allowed_extensions):
+    """Check if the file extension is allowed."""
+    return Path(filename).suffix.lower() in allowed_extensions
+
+def get_secure_filename(filename):
+    """Generate a secure filename while preserving the extension."""
+    name, ext = os.path.splitext(filename)
+    secure_name = secure_filename(name)
+    return f"{secure_name}{ext}"
+
+def ensure_directory(directory):
+    """Ensure a directory exists, create if it doesn't."""
+    try:
+        Path(directory).mkdir(parents=True, exist_ok=True)
+        return True
+    except Exception as e:
+        logger.error(f"Failed to create directory {directory}: {str(e)}")
+        return False
+
+def get_video_path(job_id, quality, base_dir):
+    """Generate the path for an encoded video file."""
+    return Path(base_dir) / job_id / f"{quality}.mp4"
+
+def cleanup_job_files(job_id, upload_dir, encoded_dir):
+    """Clean up temporary files after job completion or failure."""
+    try:
+        # Remove uploaded file
+        upload_path = Path(upload_dir) / job_id
+        if upload_path.exists():
+            upload_path.unlink()
+            
+        # Remove encoded files directory
+        encoded_path = Path(encoded_dir) / job_id
+        if encoded_path.exists():
+            for file in encoded_path.glob('*'):
+                file.unlink()
+            encoded_path.rmdir()
+            
+        logger.info(f"Cleaned up files for job {job_id}")
+        return True
+    except Exception as e:
+        logger.error(f"Failed to cleanup files for job {job_id}: {str(e)}")
+        return False
+
+def get_job_status_message(status_code):
+    """Convert status code to human-readable message."""
+    status_messages = {
+        'pending': 'Job is queued for processing',
+        'processing': 'Video encoding is in progress',
+        'completed': 'Video encoding completed successfully',
+        'failed': 'Video encoding failed',
+        'invalid_file': 'Invalid file type uploaded'
+    }
+    return status_messages.get(status_code, 'Unknown status')

create_favicon.py

@@ -0,0 +1,27 @@
+import base64
+
+# Simple video camera icon in ICO format
+icon_data = """
+AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAABILAAASCwAAAAAA
+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABVVVUBVVVVBlVVVQZVVVUBAAAAAAAA
+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFVVVQFVVVUjVVVVaVVVVWlVVVUjVVVV
+AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVVVVAVVVVSNVVVWUVVVVzVVVVc1VVVWU
+VVVVJFVVVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABVVVUBVVVVJFVVVZRVVVXpVVVV/1VVVf9V
+VVXpVVVVlFVVVSRVVVUBAAAAAAAAAAAAAAAAVVVVAVVVVQZVVVUjVVVVlFVVVelVVVX/VVVV/1VV
+Vf9VVVX/VVVVk1VVVSNVVVUGVVVVAQAAAAAAAAAAVVVVBlVVVSlVVVWUVVVV6VVVVf9VVVX/VVVV
+/1VVVf9VVVX/VVVVlFVVVSlVVVUGAAAAAAAAAAAAAAAAAAAAAFVVVQZVVVUjVVVVlFVVVelVVVX/
+VVVV/1VVVf9VVVX/VVVVlFVVVSNVVVUGAAAAAAAAAAAAAAAAAAAAAAAAAABVVVUBVVVVJFVVVZRV
+VVXpVVVV/1VVVf9VVVXpVVVVlFVVVSRVVVUBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFVV
+VQFVVVUjVVVVlFVVVc1VVVXNVVVVlFVVVSNVVVUBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
+AAAAAABVVVUBVVVVIlVVVWlVVVVpVVVVIlVVVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
+AAAAAAAAAAAAAAAAAFVVVQFVVVUGVVVVBlVVVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
+AAA=
+"""
+
+# Decode base64 and write to file
+with open('app/static/favicon.ico', 'wb') as f:
+    f.write(base64.b64decode(icon_data.strip()))

requirements.txt

@@ -0,0 +1,4 @@
+Flask==2.0.1
+Werkzeug==2.0.1
+requests==2.31.0
+python-dotenv==1.0.0

start_service.py

@@ -0,0 +1,109 @@
+#!/usr/bin/env python3
+import subprocess
+import sys
+import os
+import time
+import signal
+import argparse
+from pathlib import Path
+import logging
+from app import create_app
+
+# Configure logging
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
+)
+logger = logging.getLogger(__name__)
+
+class ServiceManager:
+    def __init__(self, tmp_dir="/tmp", port=5000, worker_name=None):
+        self.processes = {}
+        self.tmp_dir = Path(tmp_dir)
+        self.port = port
+        self.worker_name = worker_name or f"encoder_worker_{os.getpid()}"
+        
+        # Ensure required directories exist
+        self.uploads_dir = self.tmp_dir / "uploads"
+        self.encoded_dir = self.tmp_dir / "encoded"
+        self.uploads_dir.mkdir(parents=True, exist_ok=True)
+        self.encoded_dir.mkdir(parents=True, exist_ok=True)
+
+        # Set environment variables
+        os.environ['UPLOAD_FOLDER'] = str(self.uploads_dir)
+        os.environ['ENCODED_FOLDER'] = str(self.encoded_dir)
+
+    def start_flask(self):
+        """Start Flask application"""
+        try:
+            app = create_app()
+            from werkzeug.serving import run_simple
+            run_simple('0.0.0.0', self.port, app, use_reloader=False)
+            return True
+        except Exception as e:
+            logger.error(f"Failed to start Flask: {e}")
+            return False
+
+    def start_all(self):
+        """Start all services"""
+        return self.start_flask()
+
+    def stop_all(self):
+        """Stop all services"""
+        for name, process in self.processes.items():
+            try:
+                process.terminate()
+                process.wait(timeout=5)
+                logger.info(f"Stopped {name}")
+            except Exception as e:
+                logger.error(f"Error stopping {name}: {e}")
+                process.kill()
+
+    def cleanup(self):
+        """Clean up temporary files"""
+        try:
+            logger.info("Cleanup completed")
+        except Exception as e:
+            logger.error(f"Cleanup error: {e}")
+
+def signal_handler(signum, frame):
+    """Handle termination signals"""
+    logger.info("Received termination signal")
+    manager.stop_all()
+    manager.cleanup()
+    sys.exit(0)
+
+if __name__ == "__main__":
+    parser = argparse.ArgumentParser(description="Media Encoder Service Manager")
+    parser.add_argument("--tmp-dir", default="/tmp/encoder", help="Temporary directory path")
+    parser.add_argument("--port", type=int, default=5000, help="Port for the service")
+    parser.add_argument("--worker-name", help="Custom name for worker instance")
+    
+    args = parser.parse_args()
+
+    # Register signal handlers
+    signal.signal(signal.SIGTERM, signal_handler)
+    signal.signal(signal.SIGINT, signal_handler)
+
+    # Create and start service manager
+    manager = ServiceManager(
+        tmp_dir=args.tmp_dir,
+        port=args.port,
+        worker_name=args.worker_name
+    )
+
+    if manager.start_all():
+        logger.info("Service started successfully")
+        try:
+            # Keep the script running
+            while True:
+                time.sleep(1)
+        except KeyboardInterrupt:
+            logger.info("Shutting down...")
+            manager.stop_all()
+            manager.cleanup()
+    else:
+        logger.error("Failed to start service")
+        manager.stop_all()
+        manager.cleanup()
+        sys.exit(1)