Spaces:

Hans-Den
/

Nexora-Encoder

Sleeping

App Files Files Community

ChandimaPrabath commited on Mar 8, 2025

Commit

c9b5d14

1 Parent(s): 75d8495

update debug

Browse files

Files changed (2) hide show

app/routes.py +87 -0
app/templates/index.html +389 -305

app/routes.py CHANGED Viewed

@@ -5,6 +5,8 @@ from pathlib import Path
 import logging
 import json
 from datetime import datetime
 from app.services.encoder_service import encoder_service
@@ -115,6 +117,91 @@ def upload_video():
             'message': 'Failed to process upload'
         }), 500
 @api_bp.route('/jobs', methods=['GET'])
 def list_jobs():
     """List all encoding jobs"""

 import logging
 import json
 from datetime import datetime
+import requests
+from urllib.parse import urlparse
 from app.services.encoder_service import encoder_service
             'message': 'Failed to process upload'
         }), 500
+@api_bp.route('/upload-url', methods=['POST'])
+def upload_video_from_url():
+    """
+    Handle video file upload from a provided URL and start the encoding process.
+    Expects a JSON payload with:
+        - url: The URL of the video file.
+        - output_name: (optional) Desired output name without extension.
+        - settings: (optional) Custom encoding settings.
+    """
+    try:
+        data = request.get_json()
+        if not data or 'url' not in data:
+            return jsonify({
+                'error': True,
+                'message': 'No URL provided'
+            }), 400
+        video_url = data['url']
+        output_name = data.get('output_name')
+        settings = data.get('settings')
+        # Download the video file from the URL
+        response = requests.get(video_url, stream=True)
+        if response.status_code != 200:
+            return jsonify({
+                'error': True,
+                'message': 'Failed to download file from the provided URL'
+            }), 400
+        # Extract filename from URL
+        parsed_url = urlparse(video_url)
+        filename = os.path.basename(parsed_url.path)
+        if not filename:
+            # Fallback if filename is not present in the URL
+            content_type = response.headers.get('content-type', '')
+            extension = 'mp4'
+            if 'mov' in content_type:
+                extension = 'mov'
+            elif 'avi' in content_type:
+                extension = 'avi'
+            elif 'mkv' in content_type:
+                extension = 'mkv'
+            filename = f"downloaded_video.{extension}"
+        if not allowed_file(filename):
+            return jsonify({
+                'error': True,
+                'message': 'Invalid file type from URL'
+            }), 400
+        filename = secure_filename(filename)
+        file_path = os.path.join(current_app.config['UPLOAD_FOLDER'], filename)
+        # Save the downloaded file in chunks
+        with open(file_path, 'wb') as f:
+            for chunk in response.iter_content(chunk_size=8192):
+                if chunk:
+                    f.write(chunk)
+        # Set default output name if not provided
+        if not output_name:
+            output_name = filename.rsplit('.', 1)[0]
+        # Generate job ID and start encoding job
+        job_id = generate_job_id()
+        result = encoder_service.start_encode_job(
+            filename=filename,
+            job_id=job_id,
+            output_name=output_name,
+            settings=json.dumps(settings) if settings else None
+        )
+        return jsonify({
+            'job_id': job_id,
+            'message': 'Video download and encoding started',
+            'status': result['status']
+        }), 202
+    except Exception as e:
+        logger.error(f"Video download from URL failed: {str(e)}")
+        return jsonify({
+            'error': True,
+            'message': 'Failed to process video from URL'
+        }), 500
 @api_bp.route('/jobs', methods=['GET'])
 def list_jobs():
     """List all encoding jobs"""

app/templates/index.html CHANGED Viewed

@@ -1,341 +1,425 @@
 <!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);
-                        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="/api/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>

 <!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; }
+    .tab-button {
+      padding: 0.5rem 1rem;
+      border: 1px solid #475569;
+      border-radius: 0.375rem;
+      cursor: pointer;
+    }
+    .tab-button.active {
+      background-color: #4f46e5;
+      color: white;
+    }
+  </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">
+    <!-- Upload Options Tabs -->
+    <div class="flex justify-center space-x-4 mb-6">
+      <button id="tabLocal" class="tab-button active">Upload from Device</button>
+      <button id="tabUrl" class="tab-button">Upload from URL</button>
+    </div>
+    <!-- Upload Form -->
+    <form id="uploadForm" class="bg-dark-800 border border-dark-700 shadow rounded-lg p-6 mb-6 space-y-6">
+      <!-- File Upload Section -->
+      <div id="localUploadSection">
+        <h2 class="text-lg font-medium mb-4">Upload Video from Device</h2>
+        <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>
+      <!-- URL Upload Section -->
+      <div id="urlUploadSection" class="hidden">
+        <h2 class="text-lg font-medium mb-4">Upload Video from URL</h2>
+        <div>
+          <label for="videoUrl" class="block text-sm font-medium text-gray-300 mb-2">Video URL</label>
+          <input type="text" id="videoUrl" placeholder="Enter video URL" class="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>
+      <!-- Shared Settings Section -->
+      <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>
+    </form>
+    <!-- Encoding Jobs Table -->
+    <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>
+    let uploadMethod = 'local'; // default upload method
+    const tabLocal = document.getElementById('tabLocal');
+    const tabUrl = document.getElementById('tabUrl');
+    const localUploadSection = document.getElementById('localUploadSection');
+    const urlUploadSection = document.getElementById('urlUploadSection');
+    tabLocal.addEventListener('click', () => {
+      uploadMethod = 'local';
+      tabLocal.classList.add('active');
+      tabUrl.classList.remove('active');
+      localUploadSection.classList.remove('hidden');
+      urlUploadSection.classList.add('hidden');
+    });
+    tabUrl.addEventListener('click', () => {
+      uploadMethod = 'url';
+      tabUrl.classList.add('active');
+      tabLocal.classList.remove('active');
+      urlUploadSection.classList.remove('hidden');
+      localUploadSection.classList.add('hidden');
+    });
+    // File upload handling elements
+    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();
+      // Shared encoding settings and output name
+      const settings = {
+        '480p': document.getElementById('480p_bitrate').value || '1000k',
+        '720p': document.getElementById('720p_bitrate').value || '2500k',
+        '1080p': document.getElementById('1080p_bitrate').value || '5000k'
+      };
+      if (uploadMethod === 'local') {
+        // Local file upload
+        if (!videoFile.files[0]) {
+          alert('Please select a file to upload.');
+          return;
         }
+        const formData = new FormData();
+        formData.append('video', videoFile.files[0]);
+        formData.append('output_name', outputName.value || videoFile.files[0].name.replace(/\.[^/.]+$/, ""));
+        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) {
+              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);
+        }
+      } else {
+        // URL upload
+        const videoUrl = document.getElementById('videoUrl').value.trim();
+        if (!videoUrl) {
+          alert('Please enter a video URL.');
+          return;
         }
+        const payload = {
+          url: videoUrl,
+          output_name: outputName.value || '',
+          settings: settings
+        };
+        try {
+          const response = await fetch('/api/upload-url', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload)
+          });
+          if (response.status === 202) {
+            uploadForm.reset();
+            fetchJobs();
+          } else {
+            const resText = await response.text();
+            alert('Upload failed: ' + resText);
+          }
+        } catch (error) {
+          alert('Error uploading video from URL: ' + 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="/api/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 and polling
+    fetchJobs();
+    setInterval(fetchJobs, 2000);
+  </script>
 </body>
 </html>