Add frontend service with auth, MFA, and content management

- Node.js/Express backend with TypeScript
- SQLite database for users, sessions, and content metadata
- Authentication with TOTP and WebAuthn MFA support
- Admin user auto-created on first startup
- User content gallery with view/delete functionality
- RunPod API proxy (keeps API keys server-side)
- Docker setup with CI/CD for Gitea registry

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/public/css/style.css

@@ -0,0 +1,624 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    --primary: #667eea;
+    --primary-dark: #5a6fd6;
+    --secondary: #764ba2;
+    --success: #28a745;
+    --danger: #dc3545;
+    --warning: #ffc107;
+    --gray-100: #f8f9fa;
+    --gray-200: #e9ecef;
+    --gray-300: #dee2e6;
+    --gray-400: #ced4da;
+    --gray-500: #adb5bd;
+    --gray-600: #6c757d;
+    --gray-700: #495057;
+    --gray-800: #343a40;
+    --gray-900: #212529;
+    --radius: 8px;
+    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+    background: var(--gray-100);
+    color: var(--gray-800);
+    min-height: 100vh;
+}
+
+.hidden { display: none !important; }
+
+/* Auth Pages */
+.auth-container {
+    max-width: 400px;
+    margin: 100px auto;
+    padding: 40px;
+    background: white;
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-lg);
+}
+
+.auth-header {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+.auth-header h1 {
+    font-size: 24px;
+    color: var(--gray-800);
+    margin-bottom: 8px;
+}
+
+.auth-header p {
+    color: var(--gray-600);
+}
+
+.auth-form .form-group {
+    margin-bottom: 20px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 6px;
+    font-weight: 500;
+    color: var(--gray-700);
+}
+
+.form-group input,
+.form-group textarea,
+.form-group select {
+    width: 100%;
+    padding: 12px;
+    border: 1px solid var(--gray-300);
+    border-radius: var(--radius);
+    font-size: 14px;
+    transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.form-group input:focus,
+.form-group textarea:focus,
+.form-group select:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 15px;
+}
+
+/* Buttons */
+.btn {
+    padding: 12px 20px;
+    border: none;
+    border-radius: var(--radius);
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, var(--primary), var(--secondary));
+    color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+}
+
+.btn-secondary {
+    background: var(--gray-600);
+    color: white;
+}
+
+.btn-secondary:hover {
+    background: var(--gray-700);
+}
+
+.btn-danger {
+    background: var(--danger);
+    color: white;
+}
+
+.btn-link {
+    background: none;
+    color: var(--primary);
+    padding: 8px;
+}
+
+.btn-link:hover {
+    text-decoration: underline;
+}
+
+.btn-block {
+    width: 100%;
+}
+
+.btn-sm {
+    padding: 6px 12px;
+    font-size: 12px;
+}
+
+.btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+/* Error/Status Messages */
+.error-message {
+    color: var(--danger);
+    padding: 10px;
+    text-align: center;
+    font-size: 14px;
+}
+
+.status-message {
+    padding: 15px;
+    border-radius: var(--radius);
+    margin-bottom: 15px;
+}
+
+.status-message.info {
+    background: #d1ecf1;
+    color: #0c5460;
+}
+
+.status-message.success {
+    background: #d4edda;
+    color: #155724;
+}
+
+.status-message.error {
+    background: #f8d7da;
+    color: #721c24;
+}
+
+/* MFA */
+.mfa-section {
+    margin-bottom: 20px;
+}
+
+.mfa-section + .mfa-section {
+    padding-top: 20px;
+    border-top: 1px solid var(--gray-200);
+}
+
+/* Navbar */
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 30px;
+    background: white;
+    box-shadow: var(--shadow);
+}
+
+.navbar-brand {
+    font-size: 20px;
+    font-weight: 700;
+    background: linear-gradient(135deg, var(--primary), var(--secondary));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.navbar-menu {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.nav-link {
+    color: var(--gray-600);
+    text-decoration: none;
+    padding: 8px 12px;
+    border-radius: var(--radius);
+    transition: all 0.2s;
+}
+
+.nav-link:hover,
+.nav-link.active {
+    color: var(--primary);
+    background: var(--gray-100);
+}
+
+.navbar-user {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding-left: 20px;
+    border-left: 1px solid var(--gray-200);
+}
+
+#current-user {
+    font-weight: 500;
+    color: var(--gray-700);
+}
+
+/* Main Content */
+.main-content {
+    padding: 30px;
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+.content-section {
+    animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.section-header h2 {
+    font-size: 24px;
+    color: var(--gray-800);
+}
+
+/* Cards */
+.card {
+    background: white;
+    border-radius: var(--radius);
+    padding: 24px;
+    box-shadow: var(--shadow);
+}
+
+.card h2 {
+    font-size: 16px;
+    color: var(--gray-700);
+    margin-bottom: 20px;
+    padding-bottom: 10px;
+    border-bottom: 2px solid var(--primary);
+}
+
+.section-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 24px;
+}
+
+.section-grid .full-width {
+    grid-column: 1 / -1;
+}
+
+/* File Upload */
+.file-upload {
+    position: relative;
+}
+
+.file-upload input[type="file"] {
+    display: none;
+}
+
+.file-upload-label {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+    border: 2px dashed var(--gray-300);
+    border-radius: var(--radius);
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.file-upload-label:hover {
+    border-color: var(--primary);
+    background: var(--gray-100);
+}
+
+.file-upload.has-file .file-upload-label {
+    display: none;
+}
+
+.upload-icon {
+    font-size: 48px;
+    color: var(--gray-400);
+    margin-bottom: 10px;
+}
+
+.upload-text {
+    color: var(--gray-600);
+}
+
+.preview-image {
+    max-width: 100%;
+    max-height: 300px;
+    border-radius: var(--radius);
+    object-fit: contain;
+}
+
+/* Output */
+.output-video {
+    width: 100%;
+    max-height: 500px;
+    border-radius: var(--radius);
+    background: var(--gray-900);
+}
+
+/* Gallery */
+.gallery-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 20px;
+}
+
+.gallery-item {
+    background: white;
+    border-radius: var(--radius);
+    overflow: hidden;
+    box-shadow: var(--shadow);
+    transition: transform 0.2s;
+}
+
+.gallery-item:hover {
+    transform: translateY(-4px);
+}
+
+.gallery-item-media {
+    position: relative;
+    aspect-ratio: 16/9;
+    background: var(--gray-900);
+}
+
+.gallery-item-media video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.gallery-item-status {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+.gallery-item-status.completed { background: var(--success); color: white; }
+.gallery-item-status.processing { background: var(--warning); color: var(--gray-900); }
+.gallery-item-status.pending { background: var(--gray-500); color: white; }
+.gallery-item-status.failed { background: var(--danger); color: white; }
+
+.gallery-item-info {
+    padding: 15px;
+}
+
+.gallery-item-prompt {
+    font-size: 13px;
+    color: var(--gray-700);
+    margin-bottom: 10px;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.gallery-item-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 12px;
+    color: var(--gray-500);
+}
+
+.gallery-item-actions {
+    display: flex;
+    gap: 8px;
+}
+
+/* Admin */
+.admin-tabs {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+.tab-btn {
+    padding: 10px 20px;
+    border: none;
+    background: var(--gray-200);
+    border-radius: var(--radius);
+    cursor: pointer;
+    font-weight: 500;
+    transition: all 0.2s;
+}
+
+.tab-btn.active {
+    background: var(--primary);
+    color: white;
+}
+
+.admin-tab {
+    animation: fadeIn 0.3s ease;
+}
+
+.users-list {
+    background: white;
+    border-radius: var(--radius);
+    overflow: hidden;
+    box-shadow: var(--shadow);
+}
+
+.user-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+    border-bottom: 1px solid var(--gray-200);
+}
+
+.user-item:last-child {
+    border-bottom: none;
+}
+
+.user-info h4 {
+    font-size: 14px;
+    margin-bottom: 4px;
+}
+
+.user-info p {
+    font-size: 12px;
+    color: var(--gray-500);
+}
+
+.user-badges {
+    display: flex;
+    gap: 8px;
+    margin-top: 4px;
+}
+
+.badge {
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+.badge-admin { background: var(--primary); color: white; }
+.badge-inactive { background: var(--danger); color: white; }
+
+/* Modal */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.modal-content {
+    background: white;
+    border-radius: var(--radius);
+    padding: 30px;
+    max-width: 500px;
+    width: 90%;
+    max-height: 90vh;
+    overflow-y: auto;
+    box-shadow: var(--shadow-lg);
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.modal-header h3 {
+    font-size: 18px;
+}
+
+.modal-close {
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    color: var(--gray-500);
+}
+
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 20px;
+    padding-top: 20px;
+    border-top: 1px solid var(--gray-200);
+}
+
+/* Pagination */
+.pagination {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    margin-top: 20px;
+}
+
+.pagination button {
+    padding: 8px 12px;
+    border: 1px solid var(--gray-300);
+    background: white;
+    border-radius: var(--radius);
+    cursor: pointer;
+}
+
+.pagination button.active {
+    background: var(--primary);
+    color: white;
+    border-color: var(--primary);
+}
+
+.pagination button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Filter */
+.filter-group select {
+    padding: 8px 12px;
+    border: 1px solid var(--gray-300);
+    border-radius: var(--radius);
+}
+
+/* Loading Spinner */
+.spinner {
+    width: 40px;
+    height: 40px;
+    border: 3px solid var(--gray-200);
+    border-top-color: var(--primary);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin: 20px auto;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .section-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .navbar {
+        flex-direction: column;
+        gap: 15px;
+    }
+
+    .navbar-menu {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .form-row {
+        grid-template-columns: 1fr;
+    }
+}

frontend/public/index.html

@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ComfyUI Video Generator</title>
+    <link rel="stylesheet" href="/css/style.css">
+</head>
+<body>
+    <div id="app">
+        <!-- Login Page -->
+        <div id="login-page" class="page">
+            <div class="auth-container">
+                <div class="auth-header">
+                    <h1>ComfyUI Video Generator</h1>
+                    <p>Sign in to continue</p>
+                </div>
+                <form id="login-form" class="auth-form">
+                    <div class="form-group">
+                        <label for="username">Username</label>
+                        <input type="text" id="username" name="username" required autocomplete="username">
+                    </div>
+                    <div class="form-group">
+                        <label for="password">Password</label>
+                        <input type="password" id="password" name="password" required autocomplete="current-password">
+                    </div>
+                    <button type="submit" class="btn btn-primary btn-block">Sign In</button>
+                </form>
+                <div id="login-error" class="error-message"></div>
+            </div>
+        </div>
+
+        <!-- MFA Page -->
+        <div id="mfa-page" class="page hidden">
+            <div class="auth-container">
+                <div class="auth-header">
+                    <h1>Two-Factor Authentication</h1>
+                    <p>Enter your verification code</p>
+                </div>
+                <div id="mfa-options">
+                    <div id="totp-section" class="mfa-section hidden">
+                        <form id="totp-form" class="auth-form">
+                            <div class="form-group">
+                                <label for="totp-code">Authenticator Code</label>
+                                <input type="text" id="totp-code" name="code" pattern="[0-9]{6}" maxlength="6" required autocomplete="one-time-code" inputmode="numeric">
+                            </div>
+                            <button type="submit" class="btn btn-primary btn-block">Verify</button>
+                        </form>
+                    </div>
+                    <div id="webauthn-section" class="mfa-section hidden">
+                        <button id="webauthn-btn" class="btn btn-secondary btn-block">Use Security Key</button>
+                    </div>
+                </div>
+                <div id="mfa-error" class="error-message"></div>
+                <button id="mfa-back" class="btn btn-link">Back to Login</button>
+            </div>
+        </div>
+
+        <!-- Main App -->
+        <div id="main-page" class="page hidden">
+            <nav class="navbar">
+                <div class="navbar-brand">ComfyUI Video Generator</div>
+                <div class="navbar-menu">
+                    <a href="#" class="nav-link active" data-page="generate">Generate</a>
+                    <a href="#" class="nav-link" data-page="gallery">My Videos</a>
+                    <a href="#" class="nav-link admin-only hidden" data-page="admin">Admin</a>
+                    <div class="navbar-user">
+                        <span id="current-user"></span>
+                        <button id="logout-btn" class="btn btn-sm">Logout</button>
+                    </div>
+                </div>
+            </nav>
+
+            <main class="main-content">
+                <!-- Generate Section -->
+                <section id="generate-section" class="content-section">
+                    <div class="section-grid">
+                        <div class="card">
+                            <h2>Input Image</h2>
+                            <div class="file-upload" id="image-upload-area">
+                                <input type="file" id="image-input" accept="image/*">
+                                <label for="image-input" class="file-upload-label">
+                                    <span class="upload-icon">+</span>
+                                    <span class="upload-text">Click or drag to upload</span>
+                                </label>
+                                <img id="preview-image" class="preview-image hidden" alt="Preview">
+                            </div>
+                        </div>
+
+                        <div class="card">
+                            <h2>Generation Settings</h2>
+                            <form id="generate-form">
+                                <div class="form-group">
+                                    <label for="prompt">Prompt</label>
+                                    <textarea id="prompt" name="prompt" rows="3" required placeholder="Describe the motion you want..."></textarea>
+                                </div>
+                                <div class="form-group">
+                                    <label for="negative-prompt">Negative Prompt</label>
+                                    <textarea id="negative-prompt" name="negativePrompt" rows="2" placeholder="What to avoid...">blurry, low quality, distorted</textarea>
+                                </div>
+                                <div class="form-row">
+                                    <div class="form-group">
+                                        <label for="resolution">Resolution</label>
+                                        <select id="resolution" name="resolution">
+                                            <option value="480">480p</option>
+                                            <option value="720" selected>720p</option>
+                                            <option value="1080">1080p</option>
+                                        </select>
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="steps">Steps</label>
+                                        <input type="number" id="steps" name="steps" value="8" min="1" max="50">
+                                    </div>
+                                </div>
+                                <button type="submit" class="btn btn-primary btn-block" id="generate-btn">Generate Video</button>
+                            </form>
+                        </div>
+
+                        <div class="card full-width">
+                            <h2>Output</h2>
+                            <div id="output-container">
+                                <div id="generation-status" class="status-message hidden"></div>
+                                <video id="output-video" class="output-video hidden" controls loop></video>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- Gallery Section -->
+                <section id="gallery-section" class="content-section hidden">
+                    <div class="section-header">
+                        <h2>My Videos</h2>
+                        <div class="filter-group">
+                            <select id="status-filter">
+                                <option value="">All Status</option>
+                                <option value="completed">Completed</option>
+                                <option value="processing">Processing</option>
+                                <option value="pending">Pending</option>
+                                <option value="failed">Failed</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div id="gallery-grid" class="gallery-grid"></div>
+                    <div id="gallery-pagination" class="pagination"></div>
+                </section>
+
+                <!-- Admin Section -->
+                <section id="admin-section" class="content-section hidden">
+                    <div class="admin-tabs">
+                        <button class="tab-btn active" data-tab="users">Users</button>
+                        <button class="tab-btn" data-tab="all-content">All Content</button>
+                    </div>
+
+                    <div id="users-tab" class="admin-tab">
+                        <div class="section-header">
+                            <h2>User Management</h2>
+                            <button id="add-user-btn" class="btn btn-primary">Add User</button>
+                        </div>
+                        <div id="users-list" class="users-list"></div>
+                    </div>
+
+                    <div id="all-content-tab" class="admin-tab hidden">
+                        <div class="section-header">
+                            <h2>All Content</h2>
+                        </div>
+                        <div id="admin-gallery-grid" class="gallery-grid"></div>
+                        <div id="admin-gallery-pagination" class="pagination"></div>
+                    </div>
+                </section>
+            </main>
+        </div>
+
+        <!-- Modals -->
+        <div id="modal-overlay" class="modal-overlay hidden">
+            <div id="modal-content" class="modal-content"></div>
+        </div>
+    </div>
+
+    <script src="/js/app.js"></script>
+</body>
+</html>

frontend/public/js/app.js

@@ -0,0 +1,629 @@
+// State
+let currentUser = null;
+let mfaTypes = [];
+let base64Image = '';
+let currentPage = 1;
+let adminCurrentPage = 1;
+
+// DOM Elements
+const pages = {
+    login: document.getElementById('login-page'),
+    mfa: document.getElementById('mfa-page'),
+    main: document.getElementById('main-page'),
+};
+
+const sections = {
+    generate: document.getElementById('generate-section'),
+    gallery: document.getElementById('gallery-section'),
+    admin: document.getElementById('admin-section'),
+};
+
+// API Helper
+async function api(path, options = {}) {
+    const response = await fetch(`/api${path}`, {
+        ...options,
+        headers: {
+            'Content-Type': 'application/json',
+            ...options.headers,
+        },
+    });
+
+    const data = await response.json();
+
+    if (!response.ok) {
+        throw new Error(data.error || 'Request failed');
+    }
+
+    return data;
+}
+
+// Page Navigation
+function showPage(pageName) {
+    Object.values(pages).forEach(p => p.classList.add('hidden'));
+    pages[pageName]?.classList.remove('hidden');
+}
+
+function showSection(sectionName) {
+    Object.values(sections).forEach(s => s.classList.add('hidden'));
+    sections[sectionName]?.classList.remove('hidden');
+
+    document.querySelectorAll('.nav-link').forEach(link => {
+        link.classList.toggle('active', link.dataset.page === sectionName);
+    });
+
+    if (sectionName === 'gallery') loadGallery();
+    if (sectionName === 'admin') loadUsers();
+}
+
+// Auth
+async function checkAuth() {
+    try {
+        const data = await api('/auth/me');
+        currentUser = data.user;
+        showMainApp();
+    } catch {
+        showPage('login');
+    }
+}
+
+function showMainApp() {
+    showPage('main');
+    document.getElementById('current-user').textContent = currentUser.username;
+
+    if (currentUser.isAdmin) {
+        document.querySelectorAll('.admin-only').forEach(el => el.classList.remove('hidden'));
+    }
+
+    showSection('generate');
+}
+
+// Login
+document.getElementById('login-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const errorEl = document.getElementById('login-error');
+    errorEl.textContent = '';
+
+    const username = document.getElementById('username').value;
+    const password = document.getElementById('password').value;
+
+    try {
+        const data = await api('/auth/login', {
+            method: 'POST',
+            body: JSON.stringify({ username, password }),
+        });
+
+        if (data.requiresMfa) {
+            mfaTypes = data.mfaTypes;
+            showMfaPage();
+        } else {
+            currentUser = data.user;
+            showMainApp();
+        }
+    } catch (error) {
+        errorEl.textContent = error.message;
+    }
+});
+
+function showMfaPage() {
+    showPage('mfa');
+
+    const totpSection = document.getElementById('totp-section');
+    const webauthnSection = document.getElementById('webauthn-section');
+
+    totpSection.classList.toggle('hidden', !mfaTypes.includes('totp'));
+    webauthnSection.classList.toggle('hidden', !mfaTypes.includes('webauthn'));
+}
+
+// TOTP Verification
+document.getElementById('totp-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const errorEl = document.getElementById('mfa-error');
+    errorEl.textContent = '';
+
+    const code = document.getElementById('totp-code').value;
+
+    try {
+        const data = await api('/auth/mfa/totp', {
+            method: 'POST',
+            body: JSON.stringify({ code }),
+        });
+
+        currentUser = data.user;
+        showMainApp();
+    } catch (error) {
+        errorEl.textContent = error.message;
+    }
+});
+
+// WebAuthn
+document.getElementById('webauthn-btn').addEventListener('click', async () => {
+    const errorEl = document.getElementById('mfa-error');
+    errorEl.textContent = '';
+
+    try {
+        const options = await api('/auth/mfa/webauthn/challenge', { method: 'POST' });
+
+        const credential = await navigator.credentials.get({
+            publicKey: {
+                ...options,
+                challenge: base64UrlToBuffer(options.challenge),
+                allowCredentials: options.allowCredentials?.map(c => ({
+                    ...c,
+                    id: base64UrlToBuffer(c.id),
+                })),
+            },
+        });
+
+        const response = {
+            id: credential.id,
+            rawId: bufferToBase64Url(credential.rawId),
+            type: credential.type,
+            response: {
+                clientDataJSON: bufferToBase64Url(credential.response.clientDataJSON),
+                authenticatorData: bufferToBase64Url(credential.response.authenticatorData),
+                signature: bufferToBase64Url(credential.response.signature),
+            },
+        };
+
+        const data = await api('/auth/mfa/webauthn/verify', {
+            method: 'POST',
+            body: JSON.stringify(response),
+        });
+
+        currentUser = data.user;
+        showMainApp();
+    } catch (error) {
+        errorEl.textContent = error.message || 'WebAuthn verification failed';
+    }
+});
+
+// Back to login from MFA
+document.getElementById('mfa-back').addEventListener('click', async () => {
+    await api('/auth/logout', { method: 'POST' });
+    showPage('login');
+});
+
+// Logout
+document.getElementById('logout-btn').addEventListener('click', async () => {
+    await api('/auth/logout', { method: 'POST' });
+    currentUser = null;
+    showPage('login');
+});
+
+// Navigation
+document.querySelectorAll('.nav-link').forEach(link => {
+    link.addEventListener('click', (e) => {
+        e.preventDefault();
+        showSection(link.dataset.page);
+    });
+});
+
+// Image Upload
+const imageInput = document.getElementById('image-input');
+const imageUploadArea = document.getElementById('image-upload-area');
+const previewImage = document.getElementById('preview-image');
+
+imageInput.addEventListener('change', (e) => {
+    const file = e.target.files[0];
+    if (file) {
+        const reader = new FileReader();
+        reader.onload = (event) => {
+            previewImage.src = event.target.result;
+            previewImage.classList.remove('hidden');
+            imageUploadArea.classList.add('has-file');
+            base64Image = event.target.result.split(',')[1];
+        };
+        reader.readAsDataURL(file);
+    }
+});
+
+// Generation
+document.getElementById('generate-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+
+    if (!base64Image) {
+        showStatus('Please upload an image first', 'error');
+        return;
+    }
+
+    const btn = document.getElementById('generate-btn');
+    btn.disabled = true;
+    btn.textContent = 'Generating...';
+
+    const statusEl = document.getElementById('generation-status');
+    const videoEl = document.getElementById('output-video');
+
+    statusEl.className = 'status-message info';
+    statusEl.textContent = 'Submitting job...';
+    statusEl.classList.remove('hidden');
+    videoEl.classList.add('hidden');
+
+    try {
+        const formData = {
+            image: base64Image,
+            prompt: document.getElementById('prompt').value,
+            negativePrompt: document.getElementById('negative-prompt').value,
+            resolution: parseInt(document.getElementById('resolution').value),
+            steps: parseInt(document.getElementById('steps').value),
+        };
+
+        const submitData = await api('/generate', {
+            method: 'POST',
+            body: JSON.stringify(formData),
+        });
+
+        const { jobId, contentId } = submitData;
+        statusEl.textContent = `Job submitted. ID: ${jobId}. Waiting for completion...`;
+
+        // Poll for completion
+        await pollJob(jobId, contentId, statusEl, videoEl);
+
+    } catch (error) {
+        showStatus(error.message, 'error');
+    } finally {
+        btn.disabled = false;
+        btn.textContent = 'Generate Video';
+    }
+});
+
+async function pollJob(jobId, contentId, statusEl, videoEl) {
+    const startTime = Date.now();
+    const maxTime = 10 * 60 * 1000; // 10 minutes
+
+    while (Date.now() - startTime < maxTime) {
+        const elapsed = Math.floor((Date.now() - startTime) / 1000);
+        statusEl.textContent = `Generating... (${elapsed}s elapsed)`;
+
+        try {
+            const status = await api(`/generate/${jobId}/status`);
+
+            if (status.status === 'COMPLETED') {
+                statusEl.className = 'status-message success';
+                statusEl.textContent = 'Generation complete!';
+
+                // Load video
+                videoEl.src = `/api/content/${contentId}/stream`;
+                videoEl.classList.remove('hidden');
+                videoEl.play();
+                return;
+            }
+
+            if (status.status === 'FAILED') {
+                throw new Error(status.error || 'Generation failed');
+            }
+
+            await new Promise(r => setTimeout(r, 5000));
+        } catch (error) {
+            showStatus(error.message, 'error');
+            return;
+        }
+    }
+
+    showStatus('Generation timed out', 'error');
+}
+
+function showStatus(message, type) {
+    const statusEl = document.getElementById('generation-status');
+    statusEl.className = `status-message ${type}`;
+    statusEl.textContent = message;
+    statusEl.classList.remove('hidden');
+}
+
+// Gallery
+async function loadGallery(page = 1) {
+    currentPage = page;
+    const grid = document.getElementById('gallery-grid');
+    const pagination = document.getElementById('gallery-pagination');
+    const status = document.getElementById('status-filter').value;
+
+    grid.innerHTML = '<div class="spinner"></div>';
+
+    try {
+        const params = new URLSearchParams({ page, limit: 12 });
+        if (status) params.append('status', status);
+
+        const data = await api(`/content?${params}`);
+        renderGallery(grid, data.content);
+        renderPagination(pagination, data.pagination, loadGallery);
+    } catch (error) {
+        grid.innerHTML = `<p class="error-message">${error.message}</p>`;
+    }
+}
+
+document.getElementById('status-filter').addEventListener('change', () => loadGallery(1));
+
+function renderGallery(container, items) {
+    if (items.length === 0) {
+        container.innerHTML = '<p style="text-align:center;color:var(--gray-500);grid-column:1/-1;">No content found</p>';
+        return;
+    }
+
+    container.innerHTML = items.map(item => `
+        <div class="gallery-item">
+            <div class="gallery-item-media">
+                ${item.status === 'completed'
+                    ? `<video src="/api/content/${item.id}/stream" muted loop onmouseenter="this.play()" onmouseleave="this.pause()"></video>`
+                    : '<div style="display:flex;align-items:center;justify-content:center;height:100%;color:var(--gray-500)">' + item.status + '</div>'
+                }
+                <span class="gallery-item-status ${item.status}">${item.status}</span>
+            </div>
+            <div class="gallery-item-info">
+                <p class="gallery-item-prompt">${escapeHtml(item.prompt || 'No prompt')}</p>
+                <div class="gallery-item-meta">
+                    <span>${formatDate(item.createdAt)}</span>
+                    <div class="gallery-item-actions">
+                        ${item.status === 'completed' ? `<a href="/api/content/${item.id}/download" class="btn btn-sm btn-secondary">Download</a>` : ''}
+                        <button class="btn btn-sm btn-danger" onclick="deleteContent(${item.id})">Delete</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `).join('');
+}
+
+async function deleteContent(id) {
+    if (!confirm('Are you sure you want to delete this content?')) return;
+
+    try {
+        await api(`/content/${id}`, { method: 'DELETE' });
+        loadGallery(currentPage);
+    } catch (error) {
+        alert(error.message);
+    }
+}
+
+// Admin
+document.querySelectorAll('.tab-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+        document.querySelectorAll('.admin-tab').forEach(t => t.classList.add('hidden'));
+
+        btn.classList.add('active');
+        document.getElementById(`${btn.dataset.tab}-tab`).classList.remove('hidden');
+
+        if (btn.dataset.tab === 'all-content') loadAdminGallery();
+    });
+});
+
+async function loadUsers() {
+    const container = document.getElementById('users-list');
+    container.innerHTML = '<div class="spinner"></div>';
+
+    try {
+        const data = await api('/users');
+        container.innerHTML = data.users.map(user => `
+            <div class="user-item">
+                <div class="user-info">
+                    <h4>${escapeHtml(user.username)}</h4>
+                    <p>${escapeHtml(user.email || 'No email')}</p>
+                    <div class="user-badges">
+                        ${user.isAdmin ? '<span class="badge badge-admin">Admin</span>' : ''}
+                        ${!user.isActive ? '<span class="badge badge-inactive">Inactive</span>' : ''}
+                    </div>
+                </div>
+                <div class="user-actions">
+                    <button class="btn btn-sm btn-secondary" onclick="editUser(${user.id})">Edit</button>
+                    ${user.id !== currentUser.id ? `<button class="btn btn-sm btn-danger" onclick="deleteUser(${user.id})">Delete</button>` : ''}
+                </div>
+            </div>
+        `).join('');
+    } catch (error) {
+        container.innerHTML = `<p class="error-message">${error.message}</p>`;
+    }
+}
+
+document.getElementById('add-user-btn').addEventListener('click', () => {
+    showModal(`
+        <div class="modal-header">
+            <h3>Add User</h3>
+            <button class="modal-close" onclick="hideModal()">&times;</button>
+        </div>
+        <form id="add-user-form">
+            <div class="form-group">
+                <label>Username</label>
+                <input type="text" name="username" required minlength="3">
+            </div>
+            <div class="form-group">
+                <label>Password</label>
+                <input type="password" name="password" required minlength="12">
+            </div>
+            <div class="form-group">
+                <label>Email (optional)</label>
+                <input type="email" name="email">
+            </div>
+            <div class="form-group">
+                <label><input type="checkbox" name="isAdmin"> Admin</label>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" onclick="hideModal()">Cancel</button>
+                <button type="submit" class="btn btn-primary">Create</button>
+            </div>
+        </form>
+    `);
+
+    document.getElementById('add-user-form').addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const form = e.target;
+
+        try {
+            await api('/users', {
+                method: 'POST',
+                body: JSON.stringify({
+                    username: form.username.value,
+                    password: form.password.value,
+                    email: form.email.value || null,
+                    isAdmin: form.isAdmin.checked,
+                }),
+            });
+            hideModal();
+            loadUsers();
+        } catch (error) {
+            alert(error.message);
+        }
+    });
+});
+
+async function editUser(id) {
+    try {
+        const data = await api(`/users/${id}`);
+        const user = data.user;
+
+        showModal(`
+            <div class="modal-header">
+                <h3>Edit User: ${escapeHtml(user.username)}</h3>
+                <button class="modal-close" onclick="hideModal()">&times;</button>
+            </div>
+            <form id="edit-user-form">
+                <div class="form-group">
+                    <label>Username</label>
+                    <input type="text" name="username" value="${escapeHtml(user.username)}" required>
+                </div>
+                <div class="form-group">
+                    <label>Email</label>
+                    <input type="email" name="email" value="${escapeHtml(user.email || '')}">
+                </div>
+                <div class="form-group">
+                    <label><input type="checkbox" name="isAdmin" ${user.isAdmin ? 'checked' : ''}> Admin</label>
+                </div>
+                <div class="form-group">
+                    <label><input type="checkbox" name="isActive" ${user.isActive ? 'checked' : ''}> Active</label>
+                </div>
+                <hr>
+                <div class="form-group">
+                    <label>Reset Password (leave blank to keep)</label>
+                    <input type="password" name="newPassword" minlength="12" placeholder="New password">
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" onclick="hideModal()">Cancel</button>
+                    <button type="submit" class="btn btn-primary">Save</button>
+                </div>
+            </form>
+        `);
+
+        document.getElementById('edit-user-form').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const form = e.target;
+
+            try {
+                await api(`/users/${id}`, {
+                    method: 'PUT',
+                    body: JSON.stringify({
+                        username: form.username.value,
+                        email: form.email.value || null,
+                        isAdmin: form.isAdmin.checked,
+                        isActive: form.isActive.checked,
+                    }),
+                });
+
+                if (form.newPassword.value) {
+                    await api(`/users/${id}/reset-password`, {
+                        method: 'POST',
+                        body: JSON.stringify({ newPassword: form.newPassword.value }),
+                    });
+                }
+
+                hideModal();
+                loadUsers();
+            } catch (error) {
+                alert(error.message);
+            }
+        });
+    } catch (error) {
+        alert(error.message);
+    }
+}
+
+async function deleteUser(id) {
+    if (!confirm('Are you sure you want to delete this user?')) return;
+
+    try {
+        await api(`/users/${id}`, { method: 'DELETE' });
+        loadUsers();
+    } catch (error) {
+        alert(error.message);
+    }
+}
+
+async function loadAdminGallery(page = 1) {
+    adminCurrentPage = page;
+    const grid = document.getElementById('admin-gallery-grid');
+    const pagination = document.getElementById('admin-gallery-pagination');
+
+    grid.innerHTML = '<div class="spinner"></div>';
+
+    try {
+        const data = await api(`/content?page=${page}&limit=12`);
+        renderGallery(grid, data.content);
+        renderPagination(pagination, data.pagination, loadAdminGallery);
+    } catch (error) {
+        grid.innerHTML = `<p class="error-message">${error.message}</p>`;
+    }
+}
+
+// Modal
+function showModal(content) {
+    document.getElementById('modal-content').innerHTML = content;
+    document.getElementById('modal-overlay').classList.remove('hidden');
+}
+
+function hideModal() {
+    document.getElementById('modal-overlay').classList.add('hidden');
+}
+
+document.getElementById('modal-overlay').addEventListener('click', (e) => {
+    if (e.target === e.currentTarget) hideModal();
+});
+
+// Pagination
+function renderPagination(container, pagination, loadFn) {
+    const { page, totalPages } = pagination;
+    if (totalPages <= 1) {
+        container.innerHTML = '';
+        return;
+    }
+
+    let html = '';
+    html += `<button ${page === 1 ? 'disabled' : ''} onclick="(${loadFn.name})(${page - 1})">Prev</button>`;
+
+    for (let i = 1; i <= totalPages; i++) {
+        if (i === 1 || i === totalPages || (i >= page - 1 && i <= page + 1)) {
+            html += `<button class="${i === page ? 'active' : ''}" onclick="(${loadFn.name})(${i})">${i}</button>`;
+        } else if (i === page - 2 || i === page + 2) {
+            html += '<span>...</span>';
+        }
+    }
+
+    html += `<button ${page === totalPages ? 'disabled' : ''} onclick="(${loadFn.name})(${page + 1})">Next</button>`;
+    container.innerHTML = html;
+}
+
+// Utilities
+function escapeHtml(str) {
+    if (!str) return '';
+    return str.replace(/[&<>"']/g, c => ({
+        '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
+    }[c]));
+}
+
+function formatDate(dateStr) {
+    return new Date(dateStr).toLocaleDateString('en-US', {
+        month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit'
+    });
+}
+
+function base64UrlToBuffer(base64url) {
+    const base64 = base64url.replace(/-/g, '+').replace(/_/g, '/');
+    const padding = '='.repeat((4 - base64.length % 4) % 4);
+    const binary = atob(base64 + padding);
+    return Uint8Array.from(binary, c => c.charCodeAt(0)).buffer;
+}
+
+function bufferToBase64Url(buffer) {
+    const bytes = new Uint8Array(buffer);
+    let binary = '';
+    for (const byte of bytes) binary += String.fromCharCode(byte);
+    return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+
+// Init
+checkAuth();