reload input

demo.html

@@ -264,6 +264,13 @@
             display: block;
         }
 
+        .status-line {
+            margin-top: 12px;
+            font-size: 0.95rem;
+            color: #4b5563;
+            text-align: center;
+        }
+
         .spinner {
             border: 4px solid #e5e7eb;
             border-top: 4px solid #1f2933;
@@ -383,6 +390,7 @@
                 <div class="spinner"></div>
                 <p>Processing video... This may take a while depending on video length.</p>
             </div>
+            <p class="status-line hidden" id="statusLine"></p>
 
             <!-- Results -->
             <div class="section hidden" id="resultsSection">
@@ -437,6 +445,7 @@
         const firstFrameImage = document.getElementById('firstFrameImage');
         const downloadBtn = document.getElementById('downloadBtn');
         let statusPoller = null;
+        const statusLine = document.getElementById('statusLine');
         // Mode selection handler
         modeCards.forEach(card => {
             card.addEventListener('click', (e) => {
@@ -504,7 +513,10 @@
             }
             firstFrameImage.removeAttribute('src');
             processedVideo.removeAttribute('src');
+            processedVideo.load();
             downloadBtn.removeAttribute('href');
+            statusLine.classList.add('hidden');
+            statusLine.textContent = '';
 
             // Prepare form data
             const formData = new FormData();
@@ -529,6 +541,8 @@
                 const data = await response.json();
                 firstFrameImage.src = `${data.first_frame_url}?t=${Date.now()}`;
                 resultsSection.classList.remove('hidden');
+                statusLine.textContent = 'Status: processing';
+                statusLine.classList.remove('hidden');
 
                 statusPoller = setInterval(async () => {
                     try {
@@ -536,6 +550,7 @@
                         if (!statusResponse.ok) {
                             clearInterval(statusPoller);
                             statusPoller = null;
+                            statusLine.textContent = 'Status: expired (please re-upload)';
                             alert('Job expired. Please re-upload the video.');
                             return;
                         }
@@ -543,6 +558,7 @@
                         if (statusData.status === 'completed') {
                             clearInterval(statusPoller);
                             statusPoller = null;
+                            statusLine.textContent = 'Status: completed';
                             const videoResponse = await fetch(data.video_url);
                             if (!videoResponse.ok) {
                                 alert('Failed to fetch processed video.');
@@ -555,15 +571,19 @@
                         } else if (statusData.status === 'failed') {
                             clearInterval(statusPoller);
                             statusPoller = null;
+                            statusLine.textContent = 'Status: failed';
                             alert(statusData.error || 'Processing failed.');
+                        } else if (statusData.status) {
+                            statusLine.textContent = `Status: ${statusData.status}`;
                         }
                     } catch (pollError) {
                         clearInterval(statusPoller);
                         statusPoller = null;
                         console.error('Polling error:', pollError);
+                        statusLine.textContent = 'Status: polling error';
                         alert('Polling error: ' + pollError.message);
                     }
-                }, 2000);
+                }, 10000);
             } catch (error) {
                 console.error('Error:', error);
                 alert('Network error: ' + error.message);