Update templates/ltxvideo.html

templates/ltxvideo.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Video Studio</title>
     <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <!-- آیکون‌های جذاب FontAwesome مشابه استودیو صوتی -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
     <style>
         :root {
@@ -214,6 +215,7 @@
             border-color: var(--danger-color);
         }
         
+        /* استایل‌های ارتقا یافته کشویی (Accordion) جهت تاریخچه عریض و حرفه‌ای */
         .history-grid { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; }
 
         .video-result-card { 
@@ -234,6 +236,7 @@
             box-shadow: var(--shadow-md);
         }
 
+        /* هدر جمع‌وجور و آراسته به سبک استودیو صوتی */
         .card-header-layout {
             display: flex;
             align-items: center;
@@ -249,6 +252,7 @@
             flex: 1;
         }
         
+        /* دایره‌ای کردن پیش‌نمایش تصویر و فشرده‌سازی ابعاد کادر بسته */
         .card-thumbnail-container {
             width: 48px;
             height: 48px;
@@ -310,6 +314,7 @@
             flex-wrap: wrap;
         }
         
+        /* بهینه‌سازی تگ وضعیت رندر همگام با تاریخچه صوتی */
         .card-status-badge {
             font-size: 0.7rem;
             font-weight: 700;
@@ -331,13 +336,14 @@
             color: var(--text-tertiary);
             font-size: 0.85rem;
             transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            order: 1;
+            order: 1; /* فلش را در سمت راست‌ترین حالت چیدمان قرار می‌دهد */
         }
         .video-result-card.expanded .chevron-arrow {
             transform: rotate(-90deg);
             color: var(--accent-primary);
         }
 
+        /* کاهش ابعاد دکمه حذف به ابعاد استاندارد ۳۲پیکسلی در حالت بسته */
         .card-delete-btn {
             width: 32px;
             height: 32px;
@@ -350,7 +356,7 @@
             justify-content: center;
             cursor: pointer;
             transition: var(--transition-smooth);
-            order: 2;
+            order: 2; /* دکمه حذف بعد از فلش قرار می‌گیرد تا هم‌ردیف هدر صوتی شود */
         }
         .card-delete-btn:hover {
             background-color: rgba(229, 62, 62, 0.08);
@@ -358,6 +364,7 @@
             border-color: rgba(229, 62, 62, 0.15);
         }
 
+        /* بدنه تاشو آکاردئون */
         .card-expanded-body {
             max-height: 0;
             overflow: hidden;
@@ -365,13 +372,14 @@
             transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
         }
         .video-result-card.expanded .card-expanded-body {
-            max-height: 1500px;
+            max-height: 1500px; /* اجازه بزرگ شدن تا ابعاد واقعی ویدیو */
             opacity: 1;
             margin-top: 1.25rem;
             padding-top: 1.25rem;
             border-top: 1px dashed var(--panel-border);
         }
 
+        /* نمایش ویدیو در ابعاد بزرگ، کاملاً اورجینال و بدون کوچک شدن */
         .video-result-card video { 
             width: 100%; 
             max-width: 100%;
@@ -396,6 +404,7 @@
         .video-button:not(.primary):hover:not(:disabled) { background-color: var(--panel-border); color: var(--text-primary); }
         .video-button:disabled { cursor: not-allowed; opacity: 0.6; }
 
+        /* استایل لایت‌باکس بزرگنمایی تصویر ورودی */
         #image-lightbox-modal {
             display: none;
             position: fixed;
@@ -429,6 +438,7 @@
         .lightbox-close:hover { color: var(--danger-color); transform: scale(1.1); }
         @keyframes zoomIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
 
+        /* کارت ویدیویی در حال پردازش موازی در تاریخچه */
         .processing-card-overlay {
             position: relative;
             width: 100%;
@@ -487,6 +497,7 @@
             text-shadow: 0 2px 4px rgba(0,0,0,0.8);
         }
 
+        /* کارت شکست خورده در تاریخچه */
         .failed-card-overlay {
             position: relative;
             width: 100%;
@@ -513,6 +524,7 @@
         .failed-card-content i { font-size: 2rem; }
         .failed-card-content p { font-size: 0.8rem; margin: 0; line-height: 1.6; }
 
+        /* نوار ناوبری شناور در پایین صفحه - کاملا مشابه برنامه تغییر صدا */
         .bottom-nav-container {
             position: fixed;
             bottom: 24px;
@@ -583,6 +595,7 @@
             transition: var(--transition-smooth);
         }
         
+        /* نشانگر قرمز تعداد ویدیوهای در حال ساخت روی تب تاریخچه */
         .nav-badge {
             position: absolute;
             top: 6px;
@@ -602,6 +615,7 @@
             animation: badge-fade-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
 
+        /* انیمیشن لرزش ملایم در زمان دریافت پروژه جدید */
         @keyframes nav-bounce {
             0%, 100% { transform: scale(1); }
             50% { transform: scale(1.2) translateY(-6px); }
@@ -610,6 +624,7 @@
             animation: nav-bounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
         }
 
+        /* المان پرواز درخشان (Fly to History) */
         .fly-orb {
             position: fixed;
             pointer-events: none;
@@ -650,6 +665,7 @@
             .history-header { flex-direction: column; align-items: flex-start; } 
             .btn-clear-history { width: 100%; justify-content: center; } 
             
+            /* اعمال تغییر فاصله فقط و فقط روی کادرهای تاریخچه بدون تغییر در ساختار اصلی هوم‌پج */
             .history-section {
                 margin-left: -1.5rem;
                 margin-right: -1.5rem;
@@ -678,11 +694,13 @@
             </div>
         </header>
 
+        <!-- المان شناور پرواز برای انیمیشن ساخت ویدیو -->
         <div id="fly-orb" class="fly-orb">
             <i class="fas fa-wand-magic-sparkles"></i>
         </div>
 
         <main>
+            <!-- بخش خانه (سفارش ویدیو جدید) -->
             <div id="tab-home-content">
                 <div id="main-controls">
                     <div class="form-group">
@@ -732,6 +750,7 @@
                 </div>
             </div>
 
+            <!-- بخش تاریخچه پروژه‌ها (کشویی، حرفه‌ای و مستقل) -->
             <div id="tab-history-content" style="display: none;">
                 <div class="history-section">
                     <div class="history-header">
@@ -745,10 +764,12 @@
                         </button>
                     </div>
                     
+                    <!-- گرید پیشرفته نمایش کارت ویدیوها یا وضعیت‌های پردازش فعال -->
                     <div id="history-grid" class="history-grid"></div>
                 </div>
             </div>
 
+            <!-- بخش باکس متحرک رندر (این بخش اکنون برای پروژه‌های مجزا در کارت‌های تاریخچه رندر می‌شود و برای کاربردهای کلی نیست) -->
             <div id="processing-container" class="form-group" style="display: none; margin-top: 2.5rem;">
                 <div id="results-container">
                     <div id="statusSection">
@@ -771,6 +792,7 @@
         </main>
     </div>
 
+    <!-- نوار ناوبری شناور در پایین کل صفحه (خانه و تاریخچه) -->
     <div class="bottom-nav-container">
         <div class="bottom-nav-inner">
             <button id="tab-home-btn" class="nav-tab active">
@@ -780,16 +802,19 @@
             <button id="tab-history-btn" class="nav-tab">
                 <i class="fas fa-clock-rotate-left"></i>
                 <span>تاریخچه</span>
+                <!-- نشانگر فعال پروژه‌های در حال پردازش موازی -->
                 <span id="active-badge" class="nav-badge" style="display: none;">0</span>
             </button>
         </div>
     </div>
 
+    <!-- مودال بزرگنمایی تصویر ورودی (Lightbox) -->
     <div class="modal-overlay" id="image-lightbox-modal">
         <span class="lightbox-close" id="close-lightbox-btn">&times;</span>
         <img class="lightbox-img" id="lightbox-image-element" src="" alt="Input Image Preview">
     </div>
 
+    <!-- مودال اختصاصی و زیبای محدودیت ظرفیت ۵ پروژه موازی -->
     <div class="modal-overlay" id="limit-reached-modal">
         <div class="modal-content">
             <div class="modal-icon" style="color: var(--accent-premium); background: rgba(255, 193, 7, 0.12)">
@@ -843,7 +868,7 @@
         <div class="modal-content">
             <div class="modal-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg></div>
             <h3 class="modal-title">آیا مطمئن هستید؟</h3>
-            <p class="modal-text">با این کار تمام نتایج فعلی حذف شده و پروژه از ابتدا شروع می‌شود.</p>
+            <p class="modal-text">با این کار تمام تصویر آپلودی حذف شده و پر��ژه از ابتدا شروع می‌شود.</p>
             <div class="modal-buttons">
                 <button class="modal-button secondary" id="toast-cancel-btn">انصراف</button>
                 <button class="modal-button" id="toast-confirm-btn">تایید و حذف</button>
@@ -878,6 +903,7 @@
     <script>
         const MAX_VIDEOS = 20;
 
+        // توسعه سیستم پایگاه‌داده محلی پیشرفته IndexedDB برای ذخیره‌سازی داده‌ها و تصاویر به تفکیک پروژه
         const projectDB = {
             db: null,
             init() { 
@@ -1003,6 +1029,7 @@
         const durationValueDisplay = document.getElementById('durationValue');
         const durationInfoIcon = document.getElementById('duration-info-icon');
         const durationModal = document.getElementById('duration-modal');
+        
         const closeDurationModalBtn = document.getElementById('close-duration-modal');
         const confirmResetModal = document.getElementById('confirm-reset-modal');
         const toastConfirmBtn = document.getElementById('toast-confirm-btn');
@@ -1024,6 +1051,7 @@
         const activeBadge = document.getElementById('active-badge');
         const flyOrb = document.getElementById('fly-orb');
 
+        // المان‌های بزرگنمایی تصویر (Lightbox)
         const lightboxModal = document.getElementById('image-lightbox-modal');
         const lightboxImg = document.getElementById('lightbox-image-element');
         const closeLightboxBtn = document.getElementById('close-lightbox-btn');
@@ -1033,8 +1061,9 @@
         let currentImageObjectURL = null;
         let globalPollInterval = null;
         let currentReportingVideoId = null;
-        let expandedCardId = null;
+        let expandedCardId = null; // ذخیره شناسه کادر باز شده جاری
 
+        // رنگ آمیزی لغزنده مدت زمان
         function updateSliderStyle(slider) { 
             const percentage = ((slider.value - slider.min) / (slider.max - slider.min)) * 100; 
             const colorStops = `var(--accent-primary), var(--accent-secondary)`; 
@@ -1051,6 +1080,7 @@
             imageFileInput.disabled = locked;
         }
 
+        // ناوبری بین تب ها
         function switchTab(target) {
             if (target === 'home') {
                 tabHomeBtn.classList.add('active');
@@ -1062,13 +1092,14 @@
                 tabHistoryBtn.classList.add('active');
                 tabHomeContent.style.display = 'none';
                 tabHistoryContent.style.display = 'block';
-                renderHistoryGrid();
+                renderHistoryGrid(); // رندر به‌روز تاریخچه در زمان کلیک
             }
         }
 
         tabHomeBtn.addEventListener('click', () => switchTab('home'));
         tabHistoryBtn.addEventListener('click', () => switchTab('history'));
 
+        // باز و بسته کردن لایت باکس تصویر
         function openLightbox(url) {
             lightboxImg.src = url;
             lightboxModal.classList.add('active');
@@ -1082,6 +1113,9 @@
             if (e.target === lightboxModal) closeLightbox();
         });
 
+        // ==========================================
+        //  سیستم پردازش چندوظیفه‌ای موازی (تا ۵ پروژه)
+        // ==========================================
         async function getActiveProjectsCount() {
             const projects = await projectDB.getAllProjects();
             return projects.filter(p => p.status === 'started' || p.status === 'processing').length;
@@ -1099,6 +1133,7 @@
             });
         }
 
+        // انیمیشن سه‌بعدی زیبای پرواز به تاریخچه (Fly to History)
         function triggerFlyToHistoryAnimation() {
             const rectBtn = generateButton.getBoundingClientRect();
             const rectTarget = tabHistoryBtn.getBoundingClientRect();
@@ -1108,12 +1143,14 @@
             const endX = rectTarget.left + rectTarget.width / 2;
             const endY = rectTarget.top + rectTarget.height / 2;
 
+            // بازنشانی موقعیت اورب به دکمه ساخت
             flyOrb.style.display = 'flex';
             flyOrb.style.top = `${startY}px`;
             flyOrb.style.left = `${startX}px`;
             flyOrb.style.transform = 'translate(-50%, -50%) scale(1.5)';
             flyOrb.style.opacity = '1';
 
+            // آغاز پرواز شتاب‌دار بعد از مکث کوتاه
             setTimeout(() => {
                 flyOrb.style.top = `${endY}px`;
                 flyOrb.style.left = `${endX}px`;
@@ -1121,6 +1158,7 @@
                 flyOrb.style.opacity = '0.1';
             }, 50);
 
+            // خاتمه انیمیشن و لرزاندن ملایم آیکون تاریخچه در زمان فرود
             setTimeout(() => {
                 flyOrb.style.display = 'none';
                 tabHistoryBtn.classList.add('bounce-nav-tab');
@@ -1128,6 +1166,9 @@
             }, 900);
         }
 
+        // ==========================================
+        //  موتور بررسی وضعیت همزمان (Unified Multi-Poll)
+        // ==========================================
         function startGlobalStatusPolling() {
             if (globalPollInterval) return;
 
@@ -1149,31 +1190,28 @@
                         const statusRes = await fetch(`/api/status/${proj.id}`);
                         const statusData = await statusRes.json();
 
+                        // افزایش مجازی پیشرفت (طراحی شده برای رسیدن به ۹۸٪ در حدود ۳ دقیقه و توقف در آنجا)
                         let currentProgress = proj.progress || 10;
                         if (currentProgress < 98) {
+                            // افزایش ملایم حدود ۲ درصد در هر نوبت بررسی (هر ۴ ثانیه) جهت توزیع در بازه ۱۸۰ ثانیه‌ای
                             currentProgress += (Math.random() * 1.0) + 1.5;
                         }
                         proj.progress = Math.min(Math.round(currentProgress), 98);
 
                         if (statusData.status === 'ready') {
-                            // تغییر آنی وضعیت محلی به completed برای جلوگیری از پردازش مجدد تیک‌های پایش همزمان
                             proj.status = 'completed';
                             proj.progress = 100;
+                            
+                            // واکشی خودکار فایل ویدیو آماده شده به عنوان باینری
+                            const vidRes = await fetch(statusData.url);
+                            const videoBlob = await vidRes.blob();
+                            proj.videoBlob = videoBlob;
+                            proj.remoteUrl = window.location.origin + statusData.url;
+
                             await projectDB.saveProject(proj);
                             renderHistoryGrid();
-
-                            try {
-                                const vidRes = await fetch(statusData.url);
-                                const videoBlob = await vidRes.blob();
-                                proj.videoBlob = videoBlob;
-                                proj.remoteUrl = window.location.origin + statusData.url;
-
-                                await projectDB.saveProject(proj);
-                                renderHistoryGrid();
-                            } catch (downloadErr) {
-                                console.error("Error downloading video file:", downloadErr);
-                            }
                             
+                            // کاهش خودکار موجودی اعتبار برای کاربران رایگان به ازای ویدیوی تکمیلی موفق
                             if (userSubscriptionStatus === 'free') {
                                 await fetch('/api/use-credit', { 
                                     method: 'POST', 
@@ -1194,6 +1232,7 @@
                             proj.status = 'processing';
                             await projectDB.saveProject(proj);
                             
+                            // به‌روزرسانی زنده درصد روی کارت رندر فعال
                             const progressElement = document.getElementById(`prog-text-${proj.id}`);
                             const progressBarElement = document.getElementById(`prog-bar-${proj.id}`);
                             if (progressElement) progressElement.textContent = `در حال پردازش: ${proj.progress}%`;
@@ -1206,8 +1245,10 @@
             }, 4000);
         }
 
+        // رندر و ساخت پویا کارت های تاریخچه (کشویی، کاملا منطبق با استودیو صوتی و دارای لایت باکس بزرگنمایی)
         async function renderHistoryGrid() {
             const projects = await projectDB.getAllProjects();
+            // مرتب سازی از جدیدترین پروژه به قدیمی‌ترین
             projects.sort((a, b) => b.timestamp - a.timestamp);
 
             historyGrid.innerHTML = '';
@@ -1220,18 +1261,21 @@
             const totalCount = projects.length;
 
             projects.forEach((proj, index) => {
+                // تعیین شماره ویدیو به ترتیب معکوس (قدیمی‌ترین=ویدیو شماره ۱، جدیدترین=ویدیو شماره N)
                 const videoNumber = totalCount - index;
 
                 const card = document.createElement('div');
                 card.className = `video-result-card ${expandedCardId === proj.id ? 'expanded' : ''}`;
                 card.id = proj.id;
 
+                // ۱. هدر آکاردئون (همیشه قابل مشاهده است)
                 const headerLayout = document.createElement('div');
                 headerLayout.className = 'card-header-layout';
 
                 const headerLeft = document.createElement('div');
                 headerLeft.className = 'card-header-left';
 
+                // کانتینر تصویر ورودی کوچک شده (با قابلیت کلیک برای زوم)
                 const thumbContainer = document.createElement('div');
                 thumbContainer.className = 'card-thumbnail-container';
                 thumbContainer.title = 'کلیک برای بزرگنمایی تصویر ورودی';
@@ -1246,11 +1290,13 @@
                     thumbContainer.innerHTML = `<i class="fas fa-image" style="font-size: 1.2rem; color: var(--text-tertiary);"></i>`;
                 }
 
+                // افکت ذره بین روی تصویر
                 const zoomOverlay = document.createElement('div');
                 zoomOverlay.className = 'card-thumbnail-zoom-overlay';
                 zoomOverlay.innerHTML = `<i class="fas fa-search-plus"></i>`;
                 thumbContainer.appendChild(zoomOverlay);
 
+                // ممانعت از باز شدن کادر در زمان کلیک روی تصویر جهت زوم لایت‌باکس
                 thumbContainer.addEventListener('click', (e) => {
                     e.stopPropagation();
                     if (imgUrl) {
@@ -1259,6 +1305,7 @@
                 });
                 headerLeft.appendChild(thumbContainer);
 
+                // متون و مشخصات اصلی هدر
                 const titlesDiv = document.createElement('div');
                 titlesDiv.className = 'card-header-titles';
 
@@ -1274,6 +1321,7 @@
                 dateSpan.innerHTML = `<i class="far fa-calendar" style="margin-left: 4px;"></i>${fDate}`;
                 metaDiv.appendChild(dateSpan);
 
+                // تگ وضعیت پردازش در هدر کادر
                 const statusBadge = document.createElement('span');
                 statusBadge.className = 'card-status-badge';
                 if (proj.status === 'completed') {
@@ -1293,6 +1341,7 @@
                 headerLeft.appendChild(titlesDiv);
                 headerLayout.appendChild(headerLeft);
 
+                // دکمه‌های حذفی و آیکون چرخشی چوران
                 const headerActions = document.createElement('div');
                 headerActions.className = 'card-header-actions';
 
@@ -1301,7 +1350,7 @@
                 btnDelete.title = 'حذف ویدیو';
                 btnDelete.innerHTML = `<i class="fas fa-trash-alt"></i>`;
                 btnDelete.addEventListener('click', (e) => {
-                    e.stopPropagation();
+                    e.stopPropagation(); // ممانعت از باز شدن آکاردئون در زمان حذف
                     videoToDeleteId = proj.id;
                     deleteVideoModal.classList.add('active');
                 });
@@ -1314,9 +1363,11 @@
                 headerLayout.appendChild(headerActions);
                 card.appendChild(headerLayout);
 
+                // ۲. بدنه تاشوی آکاردئون (تنها در صورت کلیک و بسط یافتن فعال می‌شود)
                 const expandedBody = document.createElement('div');
                 expandedBody.className = 'card-expanded-body';
                 
+                // جلوگیری از بسته شدن کارت هنگام کلیک روی هر کجای بدنه داخلی (ویدیو، متون، دکمه‌ها و غیره)
                 expandedBody.addEventListener('click', (e) => {
                     e.stopPropagation();
                 });
@@ -1356,6 +1407,7 @@
                     expandedBody.appendChild(failedOverlay);
 
                 } else {
+                    // پخش کننده ویدیو در ابعاد واقعی و بزرگ اورجینال
                     const video = document.createElement('video');
                     video.src = URL.createObjectURL(proj.videoBlob);
                     video.controls = true;
@@ -1366,38 +1418,39 @@
                     expandedBody.appendChild(video);
                 }
 
-                const infoContainer = document.createElement('div');
-                infoContainer.className = 'video-info-container';
-
-                const promptLbl = document.createElement('div');
-                promptLbl.className = 'video-prompt-lbl';
-                const originalPrompt = proj.prompt || 'تصویر بدون توضیحات متنی';
-                const isLongPrompt = originalPrompt.length > 60;
-
-                if (isLongPrompt) {
-                    promptLbl.innerHTML = `
-                        <strong>دستور ساخت:</strong>
-                        <span class="prompt-text" style="display: inline-block; max-width: 70%; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${originalPrompt}</span>
-                        <button class="toggle-prompt-btn" style="display: inline-block; vertical-align: middle; background: none; border: none; color: var(--accent-primary); cursor: pointer; font-family: var(--app-font); font-size: 0.85rem; font-weight: 700; padding: 0 4px; margin-right: 4px; outline: none;">نمایش بیشتر</button>
-                    `;
-                    const btn = promptLbl.querySelector('.toggle-prompt-btn');
-                    const txt = promptLbl.querySelector('.prompt-text');
-                    btn.addEventListener('click', (e) => {
-                        e.stopPropagation();
-                        if (txt.style.whiteSpace === 'nowrap') {
-                            txt.style.whiteSpace = 'normal';
-                            txt.style.maxWidth = '100%';
-                            btn.textContent = 'نمایش کمتر';
-                        } else {
-                            txt.style.whiteSpace = 'nowrap';
-                            txt.style.maxWidth = '70%';
-                            btn.textContent = 'نمایش بیشتر';
-                        }
-                    });
+                // مشخصات داخلی و متن دستور ساخت ویدیو
+        const infoContainer = document.createElement('div');
+        infoContainer.className = 'video-info-container';
+
+        const promptLbl = document.createElement('div');
+        promptLbl.className = 'video-prompt-lbl';
+        const originalPrompt = proj.prompt || 'تصویر بدون توضیحات متنی';
+        const isLongPrompt = originalPrompt.length > 60; // تعیین حد نصاب طول کاراکتر برای نمایش دکمه
+
+        if (isLongPrompt) {
+            promptLbl.innerHTML = `
+                <strong>دستور ساخت:</strong>
+                <span class="prompt-text" style="display: inline-block; max-width: 70%; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${originalPrompt}</span>
+                <button class="toggle-prompt-btn" style="display: inline-block; vertical-align: middle; background: none; border: none; color: var(--accent-primary); cursor: pointer; font-family: var(--app-font); font-size: 0.85rem; font-weight: 700; padding: 0 4px; margin-right: 4px; outline: none;">نمایش بیشتر</button>
+            `;
+            const btn = promptLbl.querySelector('.toggle-prompt-btn');
+            const txt = promptLbl.querySelector('.prompt-text');
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation(); // جلوگیری از بسته شدن خودکار کادر آکاردئون
+                if (txt.style.whiteSpace === 'nowrap') {
+                    txt.style.whiteSpace = 'normal';
+                    txt.style.maxWidth = '100%';
+                    btn.textContent = 'نمایش کمتر';
                 } else {
-                    promptLbl.innerHTML = `<strong>دستور ساخت:</strong> <span class="prompt-text">${originalPrompt}</span>`;
+                    txt.style.whiteSpace = 'nowrap';
+                    txt.style.maxWidth = '70%';
+                    btn.textContent = 'نمایش بیشتر';
                 }
-                infoContainer.appendChild(promptLbl);
+            });
+        } else {
+            promptLbl.innerHTML = `<strong>دستور ساخت:</strong> <span class="prompt-text">${originalPrompt}</span>`;
+        }
+        infoContainer.appendChild(promptLbl);
 
                 const metaLbl = document.createElement('div');
                 metaLbl.className = 'video-meta-lbl';
@@ -1409,13 +1462,14 @@
                 infoContainer.appendChild(metaLbl);
                 expandedBody.appendChild(infoContainer);
 
+                // بخش دانلود یا رندر کارت تاشو
                 if (proj.status === 'completed') {
                     const controlsDiv = document.createElement('div');
                     controlsDiv.className = 'video-controls';
 
                     const btnDownload = document.createElement('button');
                     btnDownload.className = 'video-button primary';
-                    btnDownload.innerHTML = `<i class="fas fa-download"></i> دانلود ویدیو`;
+                    btnDownload.innerHTML = `<i class="fas fa-download"></i> دانلود ویدیو سینمایی`;
                     btnDownload.addEventListener('click', (e) => {
                         e.preventDefault();
                         e.stopPropagation();
@@ -1453,17 +1507,21 @@
 
                 card.appendChild(expandedBody);
 
+                // هندل اکشن باز و بسته شدن کشویی با کلیک روی کارت
                 card.addEventListener('click', () => {
                     const isExpanded = card.classList.contains('expanded');
                     
+                    // متوقف کردن پخش تمامی ویدیوها در زمان بستن یا تغییر کادرها
                     document.querySelectorAll('.video-result-card video').forEach(vid => {
                         vid.pause();
                     });
 
+                    // بستن تمام کارت‌های باز دیگر
                     document.querySelectorAll('.video-result-card').forEach(c => {
                         c.classList.remove('expanded');
                     });
 
+                    // بازنشانی وضعیت نمایش متن‌ها به حالت خلاصه (کوتاه شده)
                     document.querySelectorAll('.video-result-card').forEach(c => {
                         const txt = c.querySelector('.prompt-text');
                         const btn = c.querySelector('.toggle-prompt-btn');
@@ -1487,6 +1545,7 @@
             });
         }
 
+        // آغاز مکانیزم ساخت سفارش جدید در فرانت‌اند
         async function startGenerationProcess() {
             let promptToUse = promptInput.value.trim();
             const promptToUseLower = promptToUse.toLowerCase();
@@ -1504,9 +1563,11 @@
                 return;
             }
 
+            // ۱. بررسی سقف موازی پردازش فعال بر اساس نوع اشتراک (۵ برای پولی، ۲ برای رایگان)
             const activeCount = await getActiveProjectsCount();
             const maxAllowedActive = (userSubscriptionStatus === 'paid') ? 5 : 2;
             if (activeCount >= maxAllowedActive) {
+                // پویا کردن متن درون مودال متناسب با سقف مجاز کاربر
                 const modalText = limitReachedModal.querySelector('.modal-text');
                 if (modalText) {
                     modalText.innerHTML = `شما در حال حاضر دارای ${maxAllowedActive} پروژه فعال در حال رندر و پردازش همزمان هستید.<br><br>لطفاً منتظر بمانید تا فرآیند ساخت یکی از ویدیوها به اتمام برسد و مجدداً تلاش کنید.`;
@@ -1516,6 +1577,7 @@
                 return;
             }
 
+            // ۲. بررسی اعتبار حساب‌های کاربری رایگان
             if (userSubscriptionStatus !== 'paid') {
                 try {
                     const response = await fetch('/api/check-credit', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ fingerprint: userFingerprint }) });
@@ -1533,64 +1595,52 @@
                 }
             }
 
-            // قفل کردن کلیدها و تغییر آنی متن به در حال آپلود تصویر
-            setUiLock(true);
-            setGenerateButtonState("در حال آپلود تصویر...", true);
-
+            // ۳. ایجاد آبجکت پروژه جدید موقت در دیتابیس
             const newProjectId = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                 const r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
                 return v.toString(16);
             });
 
-            try {
-                // شروع آپلود و سپس تغییر آنی تب به سابقه به محض اتمام انتقال فایل
-                const uploadExt = await uploadFileToDocker(currentImageFile, newProjectId, 'img');
-
-                const newProject = {
-                    id: newProjectId,
-                    prompt: promptToUse,
-                    duration: parseFloat(durationSlider.value),
-                    status: 'started',
-                    progress: 10,
-                    timestamp: Date.now(),
-                    imageFile: currentImageFile,
-                    imageBlob: currentImageFile
-                };
-
-                await projectDB.saveProject(newProject);
-                
-                triggerFlyToHistoryAnimation();
-                updateActiveBadge();
-                switchTab('history');
+            const newProject = {
+                id: newProjectId,
+                prompt: promptToUse,
+                duration: parseFloat(durationSlider.value),
+                status: 'started',
+                progress: 10,
+                timestamp: Date.now(),
+                imageFile: currentImageFile,
+                imageBlob: currentImageFile // ذخیره سازی موازی تصویر باینری
+            };
 
-                // ریست کردن فرم خانه برای سفارش بعدی
-                promptInput.value = '';
-                imageFileInput.value = '';
-                if (currentImageObjectURL) { URL.revokeObjectURL(currentImageObjectURL); }
-                currentImageObjectURL = null;
-                imagePreview.src = '';
-                imageDropZone.classList.remove('has-image');
-                currentImageFile = null;
-                setUiLock(false);
-                setGenerateButtonState("ساخت ویدیو جادویی", false);
+            await projectDB.saveProject(newProject);
+            
+            // اجرای انیمیشن بی‌نظیر پرواز همزمان با ثبت
+            triggerFlyToHistoryAnimation();
 
-                // آغاز مخابره سیگنال گیت‌هاب اکشن در پس‌زمینه
-                proceedWithBackendGeneration(newProject);
+            // شروع بلافاصله بررسی سرور برای پروژه تازه متولد شده
+            updateActiveBadge();
+            switchTab('home');
 
-            } catch (err) {
-                alert(`خطا در آپلود فایل: ${err.message}`);
-                setUiLock(false);
-                setGenerateButtonState("ساخت ویدیو جادویی", false);
-            }
+            // منتظر ماندن برای اتمام کامل ثبت بک‌باند جهت جلوگیری از تداخل
+            await proceedWithBackendGeneration(newProject);
         }
 
         async function proceedWithBackendGeneration(projectObj) {
             try {
+                const formData = new FormData();
+                formData.append('run_id', projectObj.id + '_img');
+                formData.append('ext', 'png');
+                formData.append('file', projectObj.imageFile);
+
+                const uploadRes = await fetch('/api/webhook/upload', { method: 'POST', body: formData });
+                if (!uploadRes.ok) throw new Error("آپلود تصویر با خطا مواجه شد.");
+                
                 const imageUrl = window.location.origin + `/static/images/${projectObj.id}_img.png`;
 
                 const ltxPayload = {
                     image_path: imageUrl,
                     prompt: projectObj.prompt,
+                    // اضافه کردن 0.1 ثانیه فقط برای مدت زمان‌های کمتر از 5 ثانیه
                     seconds: projectObj.duration < 5.0 ? projectObj.duration + 0.1 : projectObj.duration,
                     seed: -1
                 };
@@ -1611,17 +1661,22 @@
                 
                 if (data.status === 'success') {
                     const actualRunId = data.run_id;
+                    
+                    // حذف شناسه موقت قدیمی از دیتابیس
                     await projectDB.deleteProject(projectObj.id);
                     
+                    // جایگذاری شناسه اصلی و واقعی رندر سرور
                     projectObj.id = actualRunId;
                     projectObj.status = 'processing';
                     projectObj.progress = 20;
                     
+                    // ذخیره مجدد با شناسه اصلی رندر برای شروع صحیح فرآیند پولینگ
                     await projectDB.saveProject(projectObj);
-                    renderHistoryGrid();
+                    
+                    // فراخوانی مجدد لوپ پولینگ برای پایش دائمی رندرها
                     startGlobalStatusPolling();
                 } else {
-                    throw new Error(data.message || 'خطا در ثبت نوبت صف.');
+                    throw new Error(data.message || 'خطا در صف پردازش سرور موازی.');
                 }
             } catch (error) {
                 projectObj.status = 'failed';
@@ -1633,11 +1688,22 @@
 
         generateButton.addEventListener('click', async () => {
             if (generateButton.disabled) return;
-            await startGenerationProcess();
+            setUiLock(true);
+            try {
+                // منتظر ماندن واقعی تا ثبت کامل پروژه در سرور و دیتابیس
+                await startGenerationProcess();
+                // ریست فرم خانه پس از ثبت موفقیت‌آمیز
+                promptInput.value = '';
+                removeImageBtn.click();
+            } catch (err) {
+                console.error("خطا در ثبت پروژه:", err);
+            } finally {
+                // فعال‌سازی مجدد دکمه فقط و فقط پس از اتمام کامل فرآیند ثبت سرور
+                setUiLock(false);
+            }
         });
 
         async function initializeForm() {
-            if(pollTimer) clearInterval(pollTimer);
             imageFileInput.value = '';
             if (currentImageObjectURL) { URL.revokeObjectURL(currentImageObjectURL); }
             currentImageObjectURL = null; 
@@ -1650,6 +1716,7 @@
             updateSliderStyle(durationSlider);
         }
 
+        // اعمال اکشن حذف تکی روی مودال
         document.getElementById('confirm-delete-btn').addEventListener('click', async () => {
             if (videoToDeleteId) {
                 deleteVideoModal.classList.remove('active');
@@ -1671,6 +1738,7 @@
 
         document.getElementById('cancel-delete-btn').addEventListener('click', () => { deleteVideoModal.classList.remove('active'); videoToDeleteId = null; });
         
+        // فعال‌سازی و نمایش مودال تایید در زمان کلیک روی دکمه حذف کل تاریخچه
         document.getElementById('clear-history-btn').addEventListener('click', () => {
             clearHistoryModal.classList.add('active');
         });
@@ -1685,6 +1753,7 @@
             updateActiveBadge();
         });
 
+        // لغو ریست یا ریست کلی پروژه جاری تصویر
         toastConfirmBtn.addEventListener('click', async () => { 
             confirmResetModal.classList.remove('active'); 
             await initializeForm(); 
@@ -1720,6 +1789,7 @@
             imagePreview.src = currentImageObjectURL;
         });
 
+        // ران تایم اولیه بالا آمدن داکیومنت
         document.addEventListener('DOMContentLoaded', async () => { 
             updateSliderStyle(durationSlider);
             userFingerprint = await getBrowserFingerprint(); 
@@ -1727,8 +1797,10 @@
             
             try { 
                 await projectDB.init(); 
+                // رندر آغازین پروژه‌ها از دیتابیس لوکال آفلاین
                 await renderHistoryGrid();
                 updateActiveBadge();
+                // فعال کردن وضعیت پولینگ خودکار در صورت وجود رندرهای نیمه کاره
                 startGlobalStatusPolling();
             } 
             catch (error) { 
@@ -1778,6 +1850,7 @@
         reportVideoModal.addEventListener('click', (e) => { if(e.target === reportVideoModal) reportVideoModal.classList.remove('active'); });
         reportVideoModal.querySelectorAll('.emoji').forEach(emoji => { emoji.addEventListener('click', () => { reportVideoModal.querySelector('#custom-report-text').value += emoji.textContent; }); });
 
+        // پیاده سازی انیمیشن پس زمینه هدر
         document.addEventListener('DOMContentLoaded', () => {
             const canvas = document.getElementById('neural-network-canvas');
             if (!canvas) return; const header = canvas.parentElement; const ctx = canvas.getContext('2d');
@@ -1788,7 +1861,7 @@
             function resizeCanvas() { canvas.width = header.clientWidth; canvas.height = header.clientHeight; init(); }
             class Particle { constructor() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.vx = (Math.random() - 0.5) * 0.3; this.vy = (Math.random() - 0.5) * 0.3; this.radius = 1.2; } update() { this.x += this.vx; this.y += this.vy; if (this.x < 0 || this.x > canvas.width) this.vx *= -1; if (this.y < 0 || this.y > canvas.height) this.vy *= -1; } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = particleColor; ctx.fill(); } }
             function init() { particles = []; for (let i = 0; i < particleCount; i++) { particles.push(new Particle()); } }
-            const connectParticles = function() { for (let i = 0; i < particles.length; i++) { for (let j = i + 1; j < particles.length; j++) { const dx = particles[i].x - particles[j].x; const dy = particles[i].y - particles[j].y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < maxDistance) { ctx.beginPath(); ctx.moveTo(particles[i].x, particles[i].y); ctx.lineTo(particles[j].x, particles[j].y); ctx.strokeStyle = lineColor; ctx.lineWidth = 0.2; ctx.globalAlpha = 1 - distance / maxDistance; ctx.stroke(); } } } ctx.globalAlpha = 1; }
+            connectParticles = function() { for (let i = 0; i < particles.length; i++) { for (let j = i + 1; j < particles.length; j++) { const dx = particles[i].x - particles[j].x; const dy = particles[i].y - particles[j].y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < maxDistance) { ctx.beginPath(); ctx.moveTo(particles[i].x, particles[i].y); ctx.lineTo(particles[j].x, particles[j].y); ctx.strokeStyle = lineColor; ctx.lineWidth = 0.2; ctx.globalAlpha = 1 - distance / maxDistance; ctx.stroke(); } } } ctx.globalAlpha = 1; }
             function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); particles.forEach(particle => { particle.update(); particle.draw(); }); connectParticles(); requestAnimationFrame(animate); }
             window.addEventListener('resize', resizeCanvas); resizeCanvas(); animate();
         });