Upload 5 files

README.md

@@ -1,10 +1,30 @@
 ---
-title: V3
-emoji: 🏢
-colorFrom: gray
-colorTo: red
+title: Async Video Backend
+emoji: ⚡
+colorFrom: green
+colorTo: indigo
 sdk: docker
 pinned: false
+app_port: 7860
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Async Video Backend (V2)
+
+This backend uses a **Job Queue** architecture to support large files (2GB+) and long processing times without timeouts.
+
+## 🚀 How to Upgrade your Space
+
+1.  **Go to your existing Space** (e.g., `clo-up`).
+2.  **Go to "Files"**.
+3.  **Delete** the old `app.py`, `Dockerfile`, and `requirements.txt`.
+4.  **Upload the NEW files** from this `async_v2` folder:
+    *   `app.py`
+    *   `Dockerfile`
+    *   `requirements.txt`
+5.  Wait for it to Rebuild and Run.
+
+## ⚡ Client Usage
+
+Use the **`client-v2.html`** file in this folder.
+-   It handles the new "Submit -> Poll -> Wait" flow.
+-   Compatible with the new V2 backend ONLY.

app.py

@@ -84,45 +84,56 @@ def process_video_background(job_id: str, video_url: str):
         except:
             raise Exception("Failed to get duration.")
 
-        # 3. SPLIT (5-MINUTE CHUNKS)
-        JOBS[job_id]["progress"] = "Splitting video into 5-minute chunks..."
+        # 3. SPLIT
+        JOBS[job_id]["progress"] = "Splitting video into chunks..."
+        CHUNK_LIMIT_MB = 95
+        TARGET_BYTES = CHUNK_LIMIT_MB * 1024 * 1024
         
-        CHUNK_DURATION = 300 # 5 minutes in seconds
-        parts = []
+        file_size = os.path.getsize(filename)
+        avg_bytes_per_sec = file_size / total_duration
         
+        parts = []  # Will store tuples of (chunk_path, duration_seconds)
         current_start = 0.0
         chunk_idx = 0
         
         while current_start < total_duration:
-            chunk_name = os.path.join(work_dir, f"part_{chunk_idx:03d}.mp4")
-            
-            # Simple time-based cut
-            # -ss before -i is faster seeking
-            # -t duration
-            # -c copy is fast (stream copy), no re-encoding
-            # -avoid_negative_ts make_zero ensures timestamps start at 0
-            
-            cmd = f"ffmpeg -y -hide_banner -loglevel error -ss {current_start} -t {CHUNK_DURATION} -i {filename} -c copy -avoid_negative_ts make_zero {chunk_name}"
-            subprocess.run(cmd, shell=True, check=True)
-            
-            if os.path.exists(chunk_name) and os.path.getsize(chunk_name) > 0:
-                parts.append(chunk_name)
-                chunk_idx += 1
-            
-            current_start += CHUNK_DURATION
+            est_duration = TARGET_BYTES / avg_bytes_per_sec
+            success = False
+            while not success:
+                current_end = current_start + est_duration
+                if current_end > total_duration: current_end = total_duration
+                
+                chunk_name = os.path.join(work_dir, f"part_{chunk_idx:03d}.mp4")
+                
+                # Cut command
+                cmd = f"ffmpeg -y -hide_banner -loglevel error -ss {current_start} -to {current_end} -i {filename} -c copy -avoid_negative_ts make_zero {chunk_name}"
+                subprocess.run(cmd, shell=True)
+                
+                if not os.path.exists(chunk_name):
+                    success = True 
+                    break
+
+                chunk_size = os.path.getsize(chunk_name)
+                chunk_size_mb = chunk_size / (1024*1024)
+                
+                if chunk_size_mb > 99.0:
+                    est_duration = est_duration * 0.9
+                    os.remove(chunk_name)
+                else:
+                    # Calculate actual duration of this chunk
+                    chunk_duration = current_end - current_start
+                    parts.append((chunk_name, chunk_duration))
+                    current_start = current_end
+                    chunk_idx += 1
+                    success = True
 
         # 4. UPLOAD
         JOBS[job_id]["progress"] = f"Uploading {len(parts)} chunks to Cloudinary..."
-        uploaded_urls = []
+        uploaded_results = []  # Will store {url, duration}
         
-        # Helper to maintain order if needed, but here simple append is okay? 
-        # Actually parallel upload might scramble order in list. 
-        # Let's map results back to order.
-        
-        def upload_chunk_worker(part_file):
+        def upload_chunk_worker(part_info):
+            part_file, duration = part_info
             try:
-                # Get the chunk index from filename for ordering if needed
-                # But map() preserves order of results iterator
                 response = cloudinary.uploader.unsigned_upload(
                     part_file,
                     UPLOAD_PRESET,
@@ -131,17 +142,16 @@ def process_video_background(job_id: str, video_url: str):
                 )
                 url = response['secure_url']
                 if os.path.exists(part_file): os.remove(part_file)
-                return url
+                return {"url": url, "duration": round(duration, 2)}
             except Exception as e:
                 print(f"Upload Error: {e}")
                 return None
 
         # Parallel Upload
         with concurrent.futures.ThreadPoolExecutor(max_workers=4) as executor:
-            # map returns iterator in order of inputs
             results = executor.map(upload_chunk_worker, parts)
             for res in results:
-                if res: uploaded_urls.append(res)
+                if res: uploaded_results.append(res)
         
         # 5. CLEANUP & FINISH
         if os.path.exists(filename): os.remove(filename)
@@ -151,7 +161,7 @@ def process_video_background(job_id: str, video_url: str):
 
         JOBS[job_id]["status"] = "completed"
         JOBS[job_id]["progress"] = "Done"
-        JOBS[job_id]["result"] = uploaded_urls
+        JOBS[job_id]["result"] = uploaded_results
         print(f"[{job_id}] Completed.")
 
     except Exception as e:
@@ -191,4 +201,4 @@ def get_job_status(job_id: str):
 
 @app.get("/")
 def home():
-    return {"message": "Async Video Processor V3 (5-min chunks) is Running"}
+    return {"message": "Async Video Processor V2 is Running"}

client-v2.html

@@ -0,0 +1,339 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hugging Face Video Uploader (Async V2)</title>
+    <style>
+        :root {
+            --primary: #10b981;
+            /* Emerald Green */
+            --bg: #111827;
+            --surface: #1f2937;
+            --text: #f3f4f6;
+        }
+
+        body {
+            font-family: 'Inter', system-ui, sans-serif;
+            background: var(--bg);
+            color: var(--text);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            margin: 0;
+        }
+
+        .container {
+            background: var(--surface);
+            padding: 2rem;
+            border-radius: 12px;
+            width: 100%;
+            max-width: 550px;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
+            border: 1px solid #374151;
+        }
+
+        h2 {
+            margin-top: 0;
+            text-align: center;
+            color: var(--primary);
+        }
+
+        h4 {
+            margin: 0;
+            color: #9ca3af;
+            text-align: center;
+            font-weight: 400;
+            margin-bottom: 1.5rem;
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+
+        label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-size: 0.9rem;
+            color: #d1d5db;
+        }
+
+        input {
+            width: 100%;
+            padding: 0.75rem;
+            background: #111827;
+            border: 1px solid #374151;
+            border-radius: 6px;
+            color: white;
+            box-sizing: border-box;
+        }
+
+        input:focus {
+            outline: 2px solid var(--primary);
+            border-color: transparent;
+        }
+
+        button {
+            width: 100%;
+            padding: 0.75rem;
+            background: var(--primary);
+            color: #064e3b;
+            border: none;
+            border-radius: 6px;
+            font-weight: 700;
+            cursor: pointer;
+            transition: transform 0.1s;
+        }
+
+        button:hover {
+            opacity: 0.9;
+            transform: scale(1.02);
+        }
+
+        button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        #statusBox {
+            margin-top: 2rem;
+            display: none;
+            background: #111827;
+            padding: 1.5rem;
+            border-radius: 8px;
+            border: 1px solid #374151;
+            text-align: center;
+        }
+
+        .status-badge {
+            display: inline-block;
+            padding: 4px 12px;
+            border-radius: 99px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            background: #374151;
+            color: white;
+            margin-bottom: 1rem;
+        }
+
+        .status-badge.queued {
+            background: #f59e0b;
+            color: black;
+        }
+
+        .status-badge.processing {
+            background: #3b82f6;
+            color: white;
+        }
+
+        .status-badge.completed {
+            background: #10b981;
+            color: black;
+        }
+
+        .status-badge.failed {
+            background: #ef4444;
+            color: white;
+        }
+
+        #progressText {
+            color: #d1d5db;
+            margin-bottom: 1rem;
+            font-size: 0.95rem;
+        }
+
+        .result-item {
+            background: #374151;
+            padding: 0.5rem;
+            border-radius: 6px;
+            margin-bottom: 0.5rem;
+            word-break: break-all;
+            font-size: 0.85rem;
+            text-align: left;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .copy-btn {
+            background: #1f2937;
+            border: none;
+            color: white;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 0.75rem;
+            cursor: pointer;
+            width: auto;
+            margin-left: 10px;
+        }
+
+        /* Spinner */
+        .spinner {
+            border: 4px solid #374151;
+            border-top: 4px solid var(--primary);
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 1rem auto;
+            display: none;
+        }
+
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+            }
+
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="container">
+        <h2>⚡ Async Video Uploader</h2>
+        <h4>Support for Huge Files (2GB+)</h4>
+
+        <div class="form-group">
+            <label>1. Your Space URL (Direct link)</label>
+            <input type="text" id="serverUrl" value="https://adxabhi-v3.hf.space"
+                placeholder="https://username-space-name.hf.space" required>
+            <small style="color: #6b7280; display: block; margin-top: 4px;">Found in Space > Embed this Space > Direct
+                URL</small>
+        </div>
+
+        <div class="form-group">
+            <label>2. Video URL (Direct link)</label>
+            <input type="text" id="videoUrl" placeholder="https://example.com/huge_video.mp4" required>
+        </div>
+
+        <button id="processBtn" onclick="submitJob()">Start Background Job</button>
+
+        <div id="statusBox">
+            <div id="spinner" class="spinner"></div>
+            <span id="statusBadge" class="status-badge">Waiting</span>
+            <div id="progressText">Initializing...</div>
+            <div id="linksList"></div>
+        </div>
+    </div>
+
+    <script>
+        let pollInterval = null;
+
+        async function submitJob() {
+            let serverUrl = document.getElementById('serverUrl').value.trim();
+            serverUrl = serverUrl.replace(/\/$/, "");
+
+            const videoUrl = document.getElementById('videoUrl').value.trim();
+            const btn = document.getElementById('processBtn');
+            const statusBox = document.getElementById('statusBox');
+
+            if (!serverUrl || !videoUrl) { alert("Please fill in both fields"); return; }
+
+            btn.disabled = true;
+            statusBox.style.display = 'block';
+            updateStatus("queued", "Submitting job...");
+
+            try {
+                // 1. SUBMIT JOB
+                const response = await fetch(`${serverUrl}/jobs`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ video_url: videoUrl })
+                });
+
+                const data = await response.json();
+
+                if (data.job_id) {
+                    console.log("Job Submitted:", data.job_id);
+                    startPolling(serverUrl, data.job_id);
+                } else {
+                    updateStatus("failed", "Failed to get Job ID");
+                    btn.disabled = false;
+                }
+
+            } catch (error) {
+                console.error(error);
+                updateStatus("failed", "Connection Error. Check URL.");
+                btn.disabled = false;
+            }
+        }
+
+        function startPolling(serverUrl, jobId) {
+            if (pollInterval) clearInterval(pollInterval);
+
+            pollInterval = setInterval(async () => {
+                try {
+                    const res = await fetch(`${serverUrl}/jobs/${jobId}`);
+                    const job = await res.json();
+
+                    updateStatus(job.status, job.progress);
+
+                    if (job.status === 'completed') {
+                        clearInterval(pollInterval);
+                        showResults(job.result);
+                        document.getElementById('processBtn').disabled = false;
+                    }
+
+                    if (job.status === 'failed') {
+                        clearInterval(pollInterval);
+                        document.getElementById('progressText').innerText = "Error: " + job.error;
+                        document.getElementById('processBtn').disabled = false;
+                    }
+
+                } catch (e) {
+                    console.error("Polling error", e);
+                }
+            }, 3000); // Check every 3 seconds
+        }
+
+        function updateStatus(status, message) {
+            const badge = document.getElementById('statusBadge');
+            const spinner = document.getElementById('spinner');
+            const text = document.getElementById('progressText');
+
+            badge.className = `status-badge ${status}`;
+            badge.innerText = status.toUpperCase();
+            text.innerText = message || "Processing...";
+
+            if (status === 'processing' || status === 'queued') {
+                spinner.style.display = 'block';
+            } else {
+                spinner.style.display = 'none';
+            }
+        }
+
+        function formatDuration(seconds) {
+            const mins = Math.floor(seconds / 60);
+            const secs = Math.floor(seconds % 60);
+            return `${mins}:${secs.toString().padStart(2, '0')}`;
+        }
+
+        function showResults(results) {
+            const list = document.getElementById('linksList');
+            list.innerHTML = '';
+            results.forEach((item, index) => {
+                const div = document.createElement('div');
+                div.className = 'result-item';
+                // Handle both old format (just url string) and new format ({url, duration})
+                const url = typeof item === 'string' ? item : item.url;
+                const duration = typeof item === 'object' && item.duration ? formatDuration(item.duration) : '';
+                const durationBadge = duration ? `<span style="color:#f59e0b; margin-left:8px;">[${duration}]</span>` : '';
+                div.innerHTML = `
+                <span>Part ${index + 1}${durationBadge}: <a href="${url}" target="_blank" style="color:#10b981">${url.substring(0, 30)}...</a></span>
+                <button class="copy-btn" onclick="navigator.clipboard.writeText('${url}')">Copy</button>
+            `;
+                list.appendChild(div);
+            });
+        }
+    </script>
+
+</body>
+
+</html>