Implement batch processing, pause/resume, custom temp directory, and detailed pipeline logs

static/index.html

@@ -42,10 +42,10 @@
             <!-- Step 1: Upload Video -->
             <div id="step-upload" class="step-container active">
                 <div class="glass-card">
+                    <input type="file" id="file-input" accept="video/*" multiple style="display: none;">
                     <div id="drop-zone" class="upload-area">
-                        <input type="file" id="file-input" accept="video/*" style="display: none;">
                         <span class="upload-icon"><i class="fa-solid fa-cloud-arrow-up"></i></span>
-                        <h3>Drag & Drop Video File</h3>
+                        <h3>Drag & Drop Video File(s)</h3>
                         <p>Supports MP4, MKV, AVI, MOV, WEBM (Max 500MB recommended for local upscaling)</p>
                         <button type="button" class="btn" onclick="document.getElementById('file-input').click()">
                             <i class="fa-solid fa-folder-open"></i> Browse Files
@@ -61,6 +61,15 @@
                             <i class="fa-solid fa-arrows-rotate"></i> Refresh
                         </button>
                     </div>
+                    
+                    <!-- Batch Configuration Bar -->
+                    <div id="batch-config-bar" style="display: none; background: rgba(var(--primary-rgb), 0.1); border: 1px solid var(--primary); border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 1rem; justify-content: space-between; align-items: center; gap: 1rem;">
+                        <span style="font-size: 0.9rem; color: var(--primary); font-weight: bold;"><i class="fa-solid fa-square-check"></i> <span id="batch-selected-count">0</span> video(s) selected</span>
+                        <button type="button" id="batch-configure-btn" class="btn btn-primary btn-small">
+                            <i class="fa-solid fa-sliders"></i> Configure Batch Settings
+                        </button>
+                    </div>
+
                     <div id="uploads-browser-list" style="display: flex; flex-direction: column; gap: 0.75rem;">
                         <!-- Dynamically populated files -->
                         <div style="text-align: center; padding: 2rem; color: var(--text-muted);">
@@ -267,6 +276,15 @@
                                     </select>
                                 </div>
 
+                                <!-- Custom Temporary Directory -->
+                                <div class="form-group">
+                                    <label for="temp-dir-input"><i class="fa-solid fa-folder-open" style="color: var(--primary); margin-right: 0.25rem;"></i> Custom Temporary Files Directory</label>
+                                    <input type="text" id="temp-dir-input" placeholder="e.g. /mnt/fast_ssd/temp (Leave empty for default temp/)">
+                                    <p style="font-size: 0.72rem; color: var(--text-muted); margin-top: 2px;">
+                                        Specify a custom location for temporary image frames to prevent running out of primary drive space.
+                                    </p>
+                                </div>
+
                                 <!-- Pre-filters selection checkboxes -->
                                 <div class="filter-group">
                                     <span style="font-weight: 600; font-size: 0.85rem; display: block; color: var(--primary);">Pre-Filters & Enhancing</span>