Implement distributed cluster upscaling, custom output dirs, date-based naming, active preemption, and SMB mappings
- Add Output Destination folder selector with file browser and fallback to outputs/ - Apply YYYY-MM-DD start-date suffix naming rule to upscaled outputs - Implement active job preemption (demoting active running job back to queue) via reorder - Implement Coordinator / Worker roles with automatic pull-based chunk processing - Support Shared Storage mode and HTTP-based frame upload/download fallback - Add SMB mapped share configuration and background CIFS mount support - Update index.html and app.js with the new Settings sections and modals
This commit is contained in:
@@ -290,6 +290,20 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Custom Output Directory -->
|
||||
<div class="form-group">
|
||||
<label for="output-dir-input"><i class="fa-solid fa-folder-closed" style="color: var(--primary); margin-right: 0.25rem;"></i> Custom Output Directory</label>
|
||||
<div style="display: flex; gap: 0.5rem; align-items: stretch;">
|
||||
<input type="text" id="output-dir-input" placeholder="e.g. /mnt/fast_ssd/outputs (Leave empty for default outputs/)" style="flex: 1;">
|
||||
<button type="button" id="browse-job-output-btn" class="btn btn-secondary" style="padding: 0 1rem;" title="Browse files">
|
||||
<i class="fa-solid fa-folder-open"></i>
|
||||
</button>
|
||||
</div>
|
||||
<p style="font-size: 0.72rem; color: var(--text-muted); margin-top: 4px;">
|
||||
Specify a custom location to save the final upscaled video file.
|
||||
</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>
|
||||
@@ -609,6 +623,95 @@
|
||||
<div id="temp-dir-status" style="font-size: 0.78rem; margin-top: 0.5rem; min-height: 1.2em;"></div>
|
||||
</div>
|
||||
|
||||
<!-- Default Output Directory Setting -->
|
||||
<div class="output-dir-setting" style="margin-bottom: 1.5rem; padding: 1.25rem; border-radius: 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--border-color);">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem;">
|
||||
<i class="fa-solid fa-folder-closed" style="color: var(--primary); font-size: 1.1rem;"></i>
|
||||
<span style="font-weight: 600; font-size: 0.95rem;">Default Output Directory</span>
|
||||
</div>
|
||||
<p style="font-size: 0.82rem; color: var(--text-muted); margin-bottom: 0.75rem;">
|
||||
Set a persistent default directory where completed upscale videos will be saved. This is applied automatically unless overridden per-job in Advanced Options.
|
||||
</p>
|
||||
<div style="display: flex; gap: 0.5rem; align-items: stretch;">
|
||||
<input type="text" id="default-output-dir-input"
|
||||
placeholder="e.g. /mnt/fast_ssd/upscaled_outputs (Leave empty for default outputs/)"
|
||||
style="flex: 1; padding: 0.6rem 0.85rem; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-primary); font-size: 0.88rem; font-family: 'JetBrains Mono', monospace;">
|
||||
<button type="button" id="browse-default-output-btn" class="btn btn-secondary" style="padding: 0 1rem;" title="Browse files">
|
||||
<i class="fa-solid fa-folder-open"></i>
|
||||
</button>
|
||||
<button type="button" id="save-output-dir-btn" class="btn btn-primary btn-small" style="white-space: nowrap; padding: 0.6rem 1.2rem;">
|
||||
<i class="fa-solid fa-floppy-disk"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
<div id="output-dir-status" style="font-size: 0.78rem; margin-top: 0.5rem; min-height: 1.2em;"></div>
|
||||
</div>
|
||||
|
||||
<!-- Cluster & Network Settings -->
|
||||
<div class="cluster-settings" style="margin-bottom: 1.5rem; padding: 1.25rem; border-radius: 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--border-color);">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem;">
|
||||
<i class="fa-solid fa-network-wired" style="color: var(--primary); font-size: 1.1rem;"></i>
|
||||
<span style="font-weight: 600; font-size: 0.95rem;">Distributed Processing & Node Roles</span>
|
||||
</div>
|
||||
<p style="font-size: 0.82rem; color: var(--text-muted); margin-bottom: 0.75rem;">
|
||||
Link multiple video upscaler servers together to accelerate upscaling tasks by distributing frame processing workload.
|
||||
</p>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem;">
|
||||
<div class="form-group" style="margin-bottom: 0;">
|
||||
<label for="node-role-select" style="font-size: 0.8rem; font-weight: 600; display: block; margin-bottom: 0.25rem;">Server Node Role</label>
|
||||
<select id="node-role-select" style="padding: 0.5rem; border-radius: 6px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); font-size: 0.85rem; width: 100%;">
|
||||
<option value="standalone">Standalone Node (Default)</option>
|
||||
<option value="coordinator">Coordinator Node (Distribute tasks)</option>
|
||||
<option value="worker">Worker Node (upscale assigned chunks)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="coord-url-group" style="display: none; margin-bottom: 0;">
|
||||
<label for="coordinator-url-input" style="font-size: 0.8rem; font-weight: 600; display: block; margin-bottom: 0.25rem;">Coordinator API URL</label>
|
||||
<input type="text" id="coordinator-url-input" placeholder="e.g. http://192.168.1.100:8000" style="padding: 0.5rem; border-radius: 6px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); font-size: 0.85rem; width: 100%;">
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="worker-url-group" style="display: none; margin-bottom: 0;">
|
||||
<label for="worker-url-input" style="font-size: 0.8rem; font-weight: 600; display: block; margin-bottom: 0.25rem;">My Public Worker URL</label>
|
||||
<input type="text" id="worker-url-input" placeholder="e.g. http://192.168.1.101:8000" style="padding: 0.5rem; border-radius: 6px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); font-size: 0.85rem; width: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Shared Storage toggle -->
|
||||
<div style="margin-bottom: 1rem; padding: 0.75rem; border-radius: 8px; background: rgba(255,255,255,0.01); border: 1px solid var(--border-color);">
|
||||
<label class="checkbox-container" style="font-size: 0.85rem; display: flex; align-items: center; gap: 0.5rem; cursor: pointer; user-select: none;">
|
||||
<input type="checkbox" id="use-shared-storage-checkbox"> Use Shared Network Storage (Fastest — skips uploads/downloads)
|
||||
</label>
|
||||
<div id="shared-storage-path-group" style="display: none; margin-top: 0.75rem; display: flex; gap: 0.5rem; align-items: stretch;">
|
||||
<input type="text" id="shared-storage-path-input" placeholder="Local path to mounted share, e.g. /mnt/shared_temp" style="flex: 1; padding: 0.5rem; border-radius: 6px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); font-size: 0.85rem; font-family: monospace;">
|
||||
<button type="button" id="browse-shared-storage-btn" class="btn btn-secondary" style="padding: 0 0.75rem;" title="Browse files">
|
||||
<i class="fa-solid fa-folder-open"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SMB Shares section -->
|
||||
<div style="margin-bottom: 1.25rem;">
|
||||
<h4 style="font-size: 0.85rem; margin-bottom: 0.5rem; display: flex; justify-content: space-between; align-items: center;">
|
||||
<span><i class="fa-solid fa-share-nodes"></i> SMB Network Shares Mapping</span>
|
||||
<button type="button" id="add-smb-share-btn" class="btn btn-secondary btn-small" style="padding: 0.25rem 0.5rem; font-size: 0.75rem;">
|
||||
<i class="fa-solid fa-plus"></i> Add Share
|
||||
</button>
|
||||
</h4>
|
||||
<div id="smb-shares-list" style="display: flex; flex-direction: column; gap: 0.5rem;">
|
||||
<!-- Mapped shares render dynamically -->
|
||||
<div style="text-align: center; padding: 1rem; border: 1px dashed var(--border-color); border-radius: 8px; color: var(--text-muted); font-size: 0.8rem;">
|
||||
No mapped network shares.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" id="save-cluster-settings-btn" class="btn btn-primary btn-small" style="padding: 0.6rem 1.5rem;">
|
||||
<i class="fa-solid fa-floppy-disk"></i> Save Cluster Settings
|
||||
</button>
|
||||
<div id="cluster-settings-status" style="font-size: 0.78rem; margin-top: 0.5rem; min-height: 1.2em;"></div>
|
||||
</div>
|
||||
|
||||
<div class="temp-stats-summary" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;">
|
||||
<div class="glass-card" style="padding: 1rem; background: rgba(255,255,255,0.01); text-align: center;">
|
||||
<span style="font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; display: block;">Total Temp Size</span>
|
||||
@@ -768,6 +871,56 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SMB Share Modal -->
|
||||
<div id="smb-modal" class="modal-overlay" style="display: none; z-index: 1200;">
|
||||
<div class="modal-card" style="max-width: 500px;">
|
||||
<div class="modal-header">
|
||||
<h3><i class="fa-solid fa-folder-plus"></i> Map SMB Network Share</h3>
|
||||
<button type="button" class="close-btn" id="smb-modal-close-btn">×</button>
|
||||
</div>
|
||||
<div class="modal-body" style="padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem;">
|
||||
<div class="form-group">
|
||||
<label for="smb-name" style="font-size: 0.85rem; font-weight: 600;">Share Name (Identifier)</label>
|
||||
<input type="text" id="smb-name" placeholder="e.g. video_share" style="padding: 0.5rem; border-radius: 6px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); width: 100%;">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="smb-server" style="font-size: 0.85rem; font-weight: 600;">SMB Server (IP or Hostname)</label>
|
||||
<input type="text" id="smb-server" placeholder="e.g. 192.168.1.10" style="padding: 0.5rem; border-radius: 6px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); width: 100%;">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="smb-share-name" style="font-size: 0.85rem; font-weight: 600;">Share Folder Name</label>
|
||||
<input type="text" id="smb-share-name" placeholder="e.g. videos" style="padding: 0.5rem; border-radius: 6px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); width: 100%;">
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 0;">
|
||||
<div class="form-group" style="margin-bottom: 0;">
|
||||
<label for="smb-username" style="font-size: 0.85rem; font-weight: 600;">Username (Optional)</label>
|
||||
<input type="text" id="smb-username" placeholder="Guest" style="padding: 0.5rem; border-radius: 6px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); width: 100%;">
|
||||
</div>
|
||||
<div class="form-group" style="margin-bottom: 0;">
|
||||
<label for="smb-password" style="font-size: 0.85rem; font-weight: 600;">Password (Optional)</label>
|
||||
<input type="password" id="smb-password" placeholder="••••••••" style="padding: 0.5rem; border-radius: 6px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); width: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="smb-mount-path" style="font-size: 0.85rem; font-weight: 600;">Local Mount Path</label>
|
||||
<div style="display: flex; gap: 0.5rem; align-items: stretch;">
|
||||
<input type="text" id="smb-mount-path" placeholder="e.g. /home/david/smb_mount/videos" style="flex: 1; padding: 0.5rem; border-radius: 6px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); font-family: monospace; font-size: 0.85rem;">
|
||||
<button type="button" id="browse-smb-mount-btn" class="btn btn-secondary" style="padding: 0 0.75rem;" title="Browse files">
|
||||
<i class="fa-solid fa-folder-open"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="smb-modal-status" style="font-size: 0.78rem; min-height: 1.2em;"></div>
|
||||
|
||||
<div style="display: flex; justify-content: flex-end; gap: 0.75rem; border-top: 1px solid var(--border-color); padding-top: 1rem;">
|
||||
<button type="button" id="smb-cancel-btn" class="btn btn-secondary">Cancel</button>
|
||||
<button type="button" id="smb-save-btn" class="btn btn-primary">Map & Save Share</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Javascript Orchestration -->
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user