Spaces:
Sleeping
Sleeping
| <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 ; background-color: rgba(99, 102, 241, 0.1) ; } | |
| .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> | |