david/video_upscaler
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement advanced AI enhancements UI tracking, styling, requirements, and documentation modal

Browse Source
This commit is contained in:
david
2026-06-24 13:45:34 -04:00
parent 212291ea94
commit 7b7cb2866a
7 changed files with 236 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/index.html
+60
View File
@@ -20,6 +20,9 @@
</div>
</div>
<div class="header-actions">
<button type="button" id="docs-btn" class="btn btn-secondary" style="height: 38px; border-radius: 50px; padding: 0 1.25rem; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; box-shadow: none; border: 1px solid var(--border-color);">
<i class="fa-solid fa-book-open"></i> Docs
</button>
<div class="theme-selector">
<label for="theme-select"><i class="fa-solid fa-palette"></i> Theme</label>
<select id="theme-select">
@@ -280,6 +283,22 @@
</div>
</div>
<!-- AI Enhancements Section -->
<div class="filter-group" style="margin-top: 1rem;">
<span style="font-weight: 600; font-size: 0.85rem; display: block; color: var(--primary);">Advanced AI Enhancements</span>
<div class="filter-checkboxes">
<label class="checkbox-container">
<input type="checkbox" id="ai-face-restoration"> AI Face Restoration (GFPGAN)
</label>
<label class="checkbox-container">
<input type="checkbox" id="ai-rife-interpolation"> AI Frame Interpolation (RIFE)
</label>
<label class="checkbox-container">
<input type="checkbox" id="ai-audio-denoise"> AI Audio Denoising (RNNoise)
</label>
</div>
</div>
<!-- Webhook Notify Input -->
<div class="form-group">
<label for="webhook-url">Webhook Notification Callback</label>
@@ -590,6 +609,47 @@
</div>
</div>
<!-- Documentation Modal -->
<div id="docs-modal" class="modal-overlay" style="display: none;">
<div class="modal-card" style="max-width: 800px; max-height: 85vh; display: flex; flex-direction: column;">
<div class="modal-header">
<h3><i class="fa-solid fa-book-open"></i> Help & System Documentation</h3>
<button type="button" class="close-btn" id="docs-modal-close-btn">&times;</button>
</div>
<div class="modal-body" style="overflow-y: auto; padding: 2rem; font-family: var(--font-body); line-height: 1.6; color: var(--text-main);">
<div class="docs-markdown-body">
<h2>🎬 AI Video Upscaler Guide</h2>
<p>Welcome to the AI Video Upscaler! This application leverages neural network models running locally to upscale and enhance video footage.</p>
<h3>💡 Quick Start</h3>
<ol>
<li><strong>Upload:</strong> Drag & drop a video file onto the upload zone, or browse to select one.</li>
<li><strong>Configure:</strong> Choose your AI model, scale factor, and adjust parameters.</li>
<li><strong>Preview:</strong> Select a frame using the timeline and render a single-frame preview or a 5-second video preview to test your options.</li>
<li><strong>Run:</strong> Click "Start Full Upscale" to add the job to the GPU queue.</li>
</ol>
<h3>⚙️ AI Enhancement Features</h3>
<ul>
<li><strong>AI Face Restoration (GFPGAN):</strong> Restores human faces in blurry or low-res footage. Highly recommended for family home videos or film restoration. Requires python <code>gfpgan</code> package.</li>
<li><strong>AI Frame Interpolation (RIFE):</strong> Smooths motion by inserting high-quality AI generated frames (e.g. converting 24/30 FPS to 60 FPS). Requires <code>rife-ncnn-vulkan</code> binary.</li>
<li><strong>AI Audio Denoising (RNNoise):</strong> Eliminates steady background noise, wind, and camera hiss directly from audio tracks using a deep learning RNN model.</li>
</ul>
<h3>📊 Advanced Settings</h3>
<ul>
<li><strong>CRF (Constant Rate Factor):</strong> Controls output quality/compression. Lower values (like 18) are near-lossless, higher values compress more.</li>
<li><strong>Tile Size:</strong> Decreasing this (e.g., to 128 or 64) helps run upscaling on low-end GPUs with limited VRAM.</li>
<li><strong>Video Trimming:</strong> Trim start and end times to only upscale the parts you need.</li>
</ul>
<h3>🔄 Job Resumption</h3>
<p>If the application stops or the server crashes while upscaling, the job will be marked as <strong>interrupted</strong> in the queue. Simply click <strong>Resume</strong> to pick up exactly where you left off. Already upscaled frames will be skipped, saving time and energy.</p>
</div>
</div>
</div>
</div>
<!-- Javascript Orchestration -->
<script src="app.js"></script>
</body>