Update index.html

index.html

@@ -53,7 +53,7 @@
     .free-badge { background: linear-gradient(45deg, #6c757d, #495057); color: white; box-shadow: 0 4px 10px rgba(108, 117, 125, 0.3); }
     .paid-badge { background: linear-gradient(45deg, var(--premium-color), #ffca2c); color: #333; box-shadow: 0 4px 10px var(--premium-glow); }
     
-    /* انیمیشن جدید برای محدودیت‌ها */
+    /* انیمیشن برای محدودیت‌ها */
     @keyframes slideUpFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
     .usage-info-container { margin-top: 1rem; }
     .usage-info-line { opacity: 0; animation: slideUpFadeIn 0.7s ease-out forwards; }
@@ -82,12 +82,16 @@
     .upload-area.file-selected.is-playing .icon-play { opacity: 0; transform: translate(-50%, -50%) scale(0); }
     .upload-area.file-selected.is-playing .icon-pause { opacity: 1; transform: translate(-50%, -50%) scale(1); }
 
-    /* --- سایر استایل‌ها (بدون تغییر) --- */
+    /* --- تنظیمات الگوریتم و نویز --- */
     .solver-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 20px; } .solver-card { position: relative; cursor: pointer; } .solver-card input { display: none; } .solver-content { display: flex; align-items: center; padding: 12px 15px; border: 2px solid var(--border-color); border-radius: 16px; background: white; transition: all 0.3s ease; } .solver-icon { width: 40px; height: 40px; background: #f1f5f9; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #64748b; font-size: 1.1rem; margin-left: 12px; transition: 0.3s; } .solver-text h6 { margin: 0; font-weight: 700; font-size: 0.9rem; color: var(--text-dark); } .solver-text p { margin: 0; font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; } .check-circle { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #cbd5e1; margin-right: auto; transition: 0.3s; display: flex; align-items: center; justify-content: center; } .check-circle::after { content: '\f00c'; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; color: white; opacity: 0; transform: scale(0); transition: 0.2s; } .solver-card input:checked + .solver-content { border-color: var(--primary-color); background: #f5f3ff; } .solver-card input:checked + .solver-content .solver-icon { background: var(--primary-color); color: white; } .solver-card input:checked + .solver-content .check-circle { background: var(--primary-color); border-color: var(--primary-color); } .solver-card input:checked + .solver-content .check-circle::after { opacity: 1; transform: scale(1); } .denoise-card { cursor: pointer; display: block; margin-bottom: 20px; } .denoise-card input { display: none; } .denoise-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; border: 2px solid var(--border-color); border-radius: 50px; background: white; transition: 0.3s; } .denoise-left { display: flex; align-items: center; gap: 10px; } .denoise-ico { width: 35px; height: 35px; border-radius: 50%; background: #f1f5f9; color: #64748b; display: flex; align-items: center; justify-content: center; transition: 0.4s; } .denoise-toggle { width: 40px; height: 22px; background: #cbd5e1; border-radius: 20px; position: relative; transition: 0.3s; } .denoise-toggle::after { content: ''; position: absolute; width: 16px; height: 16px; background: white; border-radius: 50%; top: 3px; left: 3px; transform: translateX(0); transition: 0.3s; } .denoise-card input:checked + .denoise-inner { border-color: #10b981; background: #ecfdfdf5; } .denoise-card input:checked + .denoise-inner .denoise-ico { background: #10b981; color: white; transform: rotate(360deg); } .denoise-card input:checked + .denoise-inner .denoise-toggle { background: #10b981; } .denoise-card input:checked + .denoise-inner .denoise-toggle::after { transform: translateX(18px); } .slider-group { background: #f8fafc; border-radius: 16px; padding: 15px; margin-bottom: 15px; } .slider-label { display: flex; justify-content: space-between; font-weight: 700; font-size: 0.85rem; color: #334155; margin-bottom: 8px; } .slider-desc { font-size: 0.75rem; color: #64748b; margin-top: 8px; line-height: 1.5; background: rgba(255,255,255,0.5); padding: 6px; border-radius: 6px; } input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: var(--primary-color); cursor: pointer; margin-top: -8px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: #cbd5e1; border-radius: 10px; }
+    
+    /* --- دکمه‌ها و تاریخچه --- */
     .btn-magic { background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%); color: white; border: none; padding: 15px; border-radius: 16px; font-weight: 800; width: 100%; font-size: 1.1rem; box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.4); transition: 0.3s; } .btn-magic:hover { transform: translateY(-2px); box-shadow: 0 15px 35px -5px rgba(79, 70, 229, 0.5); } .btn-magic:disabled { filter: grayscale(1); opacity: 0.7; cursor: not-allowed; }
     .history-card { background: white; border-radius: 20px; border: 1px solid #e2e8f0; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 5px 20px -5px rgba(0,0,0,0.05); } .history-card-header { padding: 1.25rem; } .history-card-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .history-card-title h6 { font-weight: 800; margin: 0; color: var(--text-dark); } .request-badge { font-size: 0.7rem; font-weight: 700; background: #f1f5f9; color: #64748b; padding: 5px 10px; border-radius: 8px; } .status-description { background: #f8fafc; border: 1px solid #e2e8f0; color: #475569; font-size: 0.85rem; padding: 1rem; border-radius: 12px; margin-bottom: 1.25rem; } .progress-display { text-align: center; margin-bottom: 1rem; } .progress-percentage { font-size: 2.5rem; font-weight: 900; color: var(--primary-color); letter-spacing: -1px; } .progress-bar-custom { height: 10px; background: #e2e8f0; border-radius: 10px; overflow: hidden; width: 100%; } .progress-bar-custom-fill { height: 100%; width: 0%; border-radius: 10px; background: linear-gradient(90deg, var(--secondary-color), var(--primary-color)); transition: width 0.5s ease; } .action-buttons { display: flex; gap: 10px; } .btn-delete-icon { width: 50px; flex-shrink: 0; background: #fee2e2; color: #ef4444; border: none; border-radius: 12px; font-size: 1rem; transition: 0.3s; } .btn-delete-icon:hover { background: #ef4444; color: white; } .btn-status { width: 100%; padding: 10px; font-weight: 700; border-radius: 12px; border: none; font-size: 0.9rem; transition: 0.3s; } .history-card.processing .btn-status { background: #f1f5f9; color: #475569; } .history-card.completed .btn-status { background: var(--secondary-color); color: white; cursor: pointer; } .history-card.failed .btn-status { background: #fecaca; color: #b91c1c; } .history-card.completed .progress-percentage { color: var(--secondary-color); font-size: 1.8rem; } .history-card.failed .progress-percentage { color: #ef4444; }
-    .history-card-body { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-out; background: #f8fafc; border-top: 1px solid transparent; padding: 0 1.25rem; } .history-card.expanded { border-color: var(--primary-color); } .history-card.expanded .history-card-body { max-height: 600px; border-top-color: #e2e8f0; padding: 1.25rem; overflow-y: auto; } @keyframes slideInFadeUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } .audio-player-wrapper { opacity: 0; animation: slideInFadeUp 0.5s forwards; } .history-card.expanded .audio-player-wrapper:nth-child(2) { animation-delay: 0.1s; }
+    .history-card-body { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-out; background: #f8fafc; border-top: 1px solid transparent; padding: 0 1.25rem; } .history-card.expanded { border-color: var(--primary-color); } .history-card.expanded .history-card-body { max-height: 500px; border-top-color: #e2e8f0; padding: 1.25rem; overflow-y: auto; } @keyframes slideInFadeUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } .audio-player-wrapper { opacity: 0; animation: slideInFadeUp 0.5s forwards; } .history-card.expanded .audio-player-wrapper:nth-child(2) { animation-delay: 0.1s; }
     .history-separator { border: 0; height: 1px; background: linear-gradient(to right, transparent, #cbd5e1, transparent); margin: 2rem 0; }
+    
+    /* --- مودال‌ها --- */
     .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 9999; display: none; justify-content: center; align-items: center; padding: 20px; } @keyframes pop { from{transform:scale(0.9)} to{transform:scale(1)} } .modal-box { background: white; padding: 25px; border-radius: 20px; width: 100%; max-width: 320px; text-align: center; box-shadow: 0 20px 40px rgba(0,0,0,0.2); animation: pop 0.3s; }
     @keyframes pulse-premium { 0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(255, 193, 7, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); } } .limit-modal-icon { width: 70px; height: 70px; background: linear-gradient(45deg, var(--premium-color), #ffda77); border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 1.5rem; animation: pulse-premium 2s infinite; } .btn-upgrade { background: linear-gradient(45deg, var(--premium-color), #ffca2c); color: #333; font-weight: 800; border: none; }
     
@@ -101,7 +105,6 @@
     .queue-status-message i { margin-left: 5px; }
 
     .mini-player { width: 100%; height: 40px; }
-
 </style>
 </head>
 <body>
@@ -143,7 +146,7 @@
     </div>
 
     <div class="row g-4 justify-content-center">
-        <!-- ستون چپ: فرم -->
+        <!-- ستون چپ: فرم تنظیمات و آپلود -->
         <div class="col-12 col-lg-6">
             <div class="glass-card">
                 <form id="uploadForm">
@@ -157,36 +160,91 @@
                         <small class="text-muted" id="fileNameText">کلیک کنید (MP3, WAV)</small>
                         <input type="file" id="srcFile" hidden accept="audio/*" onchange="handleFile(this)">
                     </div>
+                    
                     <div class="mt-4">
                         <div class="d-flex align-items-center justify-content-between mb-3 p-3 rounded-4" data-bs-toggle="collapse" data-bs-target="#settingsCollapse" style="cursor:pointer; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 2px 5px rgba(0,0,0,0.02);">
                             <span class="fw-bold text-dark"><i class="fas fa-sliders-h me-2 text-primary"></i> تنظیمات کیفیت</span>
                             <i class="fas fa-chevron-down text-muted small"></i>
                         </div>
                         <div class="collapse" id="settingsCollapse">
-                            <!-- فیلد توکن هافینگ فیس -->
-                            <div class="mb-3 px-2">
-                                <label class="fw-bold text-secondary mb-1 small" for="hfToken">توکن Hugging Face (Bearer Token - اختیاری)</label>
-                                <input type="password" id="hfToken" placeholder="hf_..." class="form-control rounded-4 border-2" style="font-size: 0.9rem; font-family: monospace; text-align: left; direction: ltr;">
-                                <div class="text-muted mt-1" style="font-size: 0.7rem;">اگر اسپیس با محدودیت ترافیک مواجه شد یا خصوصی بود، توکن خود را وارد کنید.</div>
-                            </div>
-                            
                             <h6 class="fw-bold text-secondary mb-2 small px-2">الگوریتم پردازش (Solver)</h6>
                             <div class="solver-grid">
-                                <label class="solver-card"><input type="radio" name="solver" value="Midpoint" checked><div class="solver-content"><div class="solver-icon"><i class="fas fa-balance-scale"></i></div><div class="solver-text flex-grow-1 mx-2"><h6>Midpoint (پیشنهادی)</h6><p>بهترین تعادل بین سرعت و کیفیت.</p></div><div class="check-circle"></div></div></label>
-                                <label class="solver-card"><input type="radio" name="solver" value="RK4"><div class="solver-content"><div class="solver-icon"><i class="fas fa-microscope"></i></div><div class="solver-text flex-grow-1 mx-2"><h6>RK4 (دقیق)</h6><p>حداکثر دقت ریاضی، کمی کندتر.</p></div><div class="check-circle"></div></div></label>
-                                <label class="solver-card"><input type="radio" name="solver" value="Euler"><div class="solver-content"><div class="solver-icon"><i class="fas fa-bolt"></i></div><div class="solver-text flex-grow-1 mx-2"><h6>Euler (سریع)</h6><p>پردازش سریع برای تست اولیه.</p></div><div class="check-circle"></div></div></label>
+                                <label class="solver-card">
+                                    <input type="radio" name="solver" value="Midpoint" checked>
+                                    <div class="solver-content">
+                                        <div class="solver-icon"><i class="fas fa-balance-scale"></i></div>
+                                        <div class="solver-text flex-grow-1 mx-2">
+                                            <h6>Midpoint (پیشنهادی)</h6>
+                                            <p>بهترین تعادل بین سرعت و کیفیت.</p>
+                                        </div>
+                                        <div class="check-circle"></div>
+                                    </div>
+                                </label>
+                                <label class="solver-card">
+                                    <input type="radio" name="solver" value="RK4">
+                                    <div class="solver-content">
+                                        <div class="solver-icon"><i class="fas fa-microscope"></i></div>
+                                        <div class="solver-text flex-grow-1 mx-2">
+                                            <h6>RK4 (دقیق)</h6>
+                                            <p>حداکثر دقت ریاضی، کمی کندتر.</p>
+                                        </div>
+                                        <div class="check-circle"></div>
+                                    </div>
+                                </label>
+                                <label class="solver-card">
+                                    <input type="radio" name="solver" value="Euler">
+                                    <div class="solver-content">
+                                        <div class="solver-icon"><i class="fas fa-bolt"></i></div>
+                                        <div class="solver-text flex-grow-1 mx-2">
+                                            <h6>Euler (سریع)</h6>
+                                            <p>پردازش سریع برای تست اولیه.</p>
+                                        </div>
+                                        <div class="check-circle"></div>
+                                    </div>
+                                </label>
                             </div>
+
                             <h6 class="fw-bold text-secondary mb-2 small px-2 mt-3">حذف نویز</h6>
-                            <label class="denoise-card"><input type="checkbox" id="denoising"><div class="denoise-inner"><div class="denoise-left"><div class="denoise-ico"><i class="fas fa-magic"></i></div><div><div class="fw-bold text-dark small">حذف نویز قبل از بهبود کیفیت</div><div class="text-muted" style="font-size: 0.7rem;">اگر صدای شما حاوی نویز پس‌زمینه زیادی است، تیک بزنید</div></div></div><div class="denoise-toggle"></div></div></label>
-                            <div class="slider-group"><div class="slider-label"><span>عمق پردازش (NFE)</span><span class="text-primary" id="nfeVal">64</span></div><input type="range" min="1" max="128" step="1" value="64" id="nfe" oninput="document.getElementById('nfeVal').innerText=this.value"><div class="slider-desc">عدد بالاتر (80+): کیفیت عالی.<br>عدد پایین (30-): سرعت بالا.</div></div>
-                            <div class="slider-group"><div class="slider-label"><span>شفافیت (Tau)</span><span class="text-primary" id="tauVal">0.5</span></div><input type="range" min="0" max="1" step="0.01" value="0.5" id="tau" oninput="document.getElementById('tauVal').innerText=this.value"><div class="slider-desc">عدد کمتر: صدای طبیعی.<br>عدد بیشتر: صدای شفاف کریستالی.</div></div>
+                            <label class="denoise-card">
+                                <input type="checkbox" id="denoising">
+                                <div class="denoise-inner">
+                                    <div class="denoise-left">
+                                        <div class="denoise-ico"><i class="fas fa-magic"></i></div>
+                                        <div>
+                                            <div class="fw-bold text-dark small">حذف نویز قبل از بهبود کیفیت</div>
+                                            <div class="text-muted" style="font-size: 0.7rem;">اگر صدای شما دارای نویز پس‌زمینه زیادی است، تیک بزنید</div>
+                                        </div>
+                                    </div>
+                                    <div class="denoise-toggle"></div>
+                                </div>
+                            </label>
+
+                            <div class="slider-group">
+                                <div class="slider-label">
+                                    <span>عمق پردازش (NFE)</span>
+                                    <span class="text-primary" id="nfeVal">64</span>
+                                </div>
+                                <input type="range" min="1" max="128" step="1" value="64" id="nfe" oninput="document.getElementById('nfeVal').innerText=this.value">
+                                <div class="slider-desc">عدد بالاتر: کیفیت نهایی بهتر.<br>عدد پایین: سرعت پردازش بالاتر.</div>
+                            </div>
+
+                            <div class="slider-group">
+                                <div class="slider-label">
+                                    <span>شفافیت و دما (Tau)</span>
+                                    <span class="text-primary" id="tauVal">0.5</span>
+                                </div>
+                                <input type="range" min="0" max="1" step="0.01" value="0.5" id="tau" oninput="document.getElementById('tauVal').innerText=this.value">
+                                <div class="slider-desc">عدد کمتر: صدای طبیعی‌تر.<br>عدد بیشتر: صدای شفاف‌تر و کریستالی.</div>
+                            </div>
                         </div>
                     </div>
-                    <button type="submit" class="btn-magic" id="submitBtn">شروع پردازش</button>
+                    
+                    <button type="submit" class="btn-magic" id="submitBtn">شروع فرآیند بهبود صدا</button>
                 </form>
             </div>
         </div>
-        <!-- ستون راست: تاریخچه و وضعیت -->
+
+        <!-- ستون راست: تاریخچه و وضعیت کارهای ارسال‌شده -->
         <div class="col-12 col-lg-5">
             <div class="glass-card">
                 <div class="d-flex justify-content-between align-items-center mb-3">
@@ -203,8 +261,8 @@
 
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 <script>
-    const STORAGE_KEY = 'sada_resemble_embedded_v1';
-    const DB_NAME = 'SadaAudioDB';
+    const STORAGE_KEY = 'sada_resemble_embedded_v2';
+    const DB_NAME = 'SadaAudioDB_v2';
     const DB_VERSION = 1;
     const STORE_NAME = 'original_audio';
     const PREMIUM_PAGE_ID = '1149636';
@@ -212,13 +270,13 @@
 
     let db;
     let userSubscriptionStatus = 'free';
-    const activePolls = new Set();
 
     const uploadArea = document.getElementById('dropZone');
     const iconBox = uploadArea.querySelector('.icon-box');
     const previewAudio = document.getElementById('previewAudio');
     let previewAudioBlobUrl = null;
 
+    // --- مدیریت بانک اطلاعاتی محلی مرورگر (IndexedDB) برای حفظ موقت فایل صوتی اصلی ---
     function initDB() { 
         const request = indexedDB.open(DB_NAME, DB_VERSION); 
         request.onerror = (event) => console.error("Database error:", event.target.errorCode); 
@@ -226,13 +284,7 @@
             db = event.target.result; 
             cleanupOldFiles(); 
             renderHistory(); 
-            // بازگرداندن پردازش‌های در جریان پس از بارگذاری مجدد صفحه
-            const jobs = getJobs();
-            for (const id in jobs) {
-                if (jobs[id].status === 'processing') {
-                    pollResultsForJob(id, jobs[id].hf_token || '');
-                }
-            }
+            resumeActivePolls();
         }; 
         request.onupgradeneeded = (event) => { 
             let db = event.target.result; 
@@ -250,6 +302,7 @@
     const saveJob = (data) => { const jobs = getJobs(); jobs[data.job_id] = data; localStorage.setItem(STORAGE_KEY, JSON.stringify(jobs)); };
     const getAudioDuration = (file) => new Promise((resolve) => { const audio = document.createElement('audio'); audio.onloadedmetadata = () => { resolve(audio.duration); URL.revokeObjectURL(audio.src); }; audio.src = URL.createObjectURL(file); });
     
+    // --- بارگیری و اعتبارسنجی فایل انتخاب شده ---
     async function handleFile(input) {
         const file = input.files[0];
         if (file) {
@@ -275,17 +328,13 @@
     previewAudio.onpause = () => uploadArea.classList.remove('is-playing');
     previewAudio.onended = () => uploadArea.classList.remove('is-playing');
     
-    // ۱. آپلود مستقیم فایل صوتی به سرور Hugging Face
-    async function uploadAudioFile(file, token) {
+    // --- توابع ارتباط مستقیم با API مدل صوتی (Gradio-HuggingFace Space) ---
+    async function uploadAudioFile(file) {
         const formData = new FormData();
         formData.append('files', file);
 
-        const headers = {};
-        if (token) headers['Authorization'] = `Bearer ${token}`;
-
         const response = await fetch('https://opera8-resemble-enhance.hf.space/gradio_api/upload', {
             method: 'POST',
-            headers: headers,
             body: formData
         });
 
@@ -304,14 +353,10 @@
         };
     }
 
-    // ۲. ارسال درخواست پردازش به متد '_fn' با ساختار پارامترهای نام‌گذاری شده
-    async function startProcessing(payload, token) {
-        const headers = { 'Content-Type': 'application/json' };
-        if (token) headers['Authorization'] = `Bearer ${token}`;
-
+    async function startProcessing(payload) {
         const response = await fetch(`https://opera8-resemble-enhance.hf.space/gradio_api/call/v2/_fn`, {
             method: 'POST',
-            headers: headers,
+            headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(payload)
         });
 
@@ -324,7 +369,7 @@
         return result.event_id;
     }
 
-    // ثبت فرم جدید و آغاز فرآیند پردازش
+    // ارسال فرم صوتی و آغاز فرآیند در بستر شبکه
     document.getElementById('uploadForm').addEventListener('submit', async (e) => {
         e.preventDefault();
         const srcFile = document.getElementById('srcFile').files[0];
@@ -332,14 +377,13 @@
         
         const btn = document.getElementById('submitBtn'); 
         btn.disabled = true; 
-        btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i> در حال آپلود...';
-        
-        const token = document.getElementById('hfToken').value.trim();
+        btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i> در حال آپلود و ارسال فایل...';
         
         try {
-            const fileData = await uploadAudioFile(srcFile, token);
-            btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i> شروع پردازش...';
-            
+            // ۱. بارگذاری محلی مستقیم فایل
+            const fileData = await uploadAudioFile(srcFile);
+
+            // ۲. ساخت اطلاعات ورودی مدل صوتی طبق پارامترهای نام‌گذاری شده
             const payload = {
                 path: fileData,
                 solver: document.querySelector('input[name="solver"]:checked').value,
@@ -347,61 +391,45 @@
                 tau: parseFloat(document.getElementById('tau').value),
                 denoising: document.getElementById('denoising').checked
             };
-            
-            const eventId = await startProcessing(payload, token);
-            
-            const res = {
+
+            // ۳. ایجاد کار جدید در صف پردازش مدل صوتی
+            const eventId = await startProcessing(payload);
+
+            const jobData = {
                 job_id: eventId,
                 timestamp: new Date().toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit' }),
                 fileName: srcFile.name,
                 status: 'processing',
                 progress: 0,
-                stage_msg: 'در صف انجام...',
-                hf_token: token
+                denoised_url: '',
+                enhanced_url: ''
             };
-            
+
+            // ۴. ثبت جزئیات کار صوتی جدید در تاریخچه
             saveFileToDB(eventId, srcFile);
-            saveJob(res);
+            saveJob(jobData);
             renderHistory();
+
             btn.disabled = false; 
-            btn.innerHTML = 'شروع پردازش';
+            btn.innerHTML = 'شروع فرآیند بهبود صدا';
             resetUploadArea();
-            
-            // شروع پیگیری زنده وضعیت پردازش
-            pollResultsForJob(eventId, token);
+
+            // ۵. پیگیری زنده فرآیند از سرور
+            pollJobStatus(eventId);
+
         } catch (err) { 
-            alert("خطا: " + err.message); 
+            alert("خطایی رخ داد: " + err.message); 
             btn.disabled = false; 
-            btn.innerHTML = 'شروع پردازش'; 
+            btn.innerHTML = 'شروع فرآیند بهبود صدا'; 
         }
     });
     
-    // --- پیگیری زنده نتایج صوتی به شیوه زنده (SSE) ---
-    function pollResultsForJob(eventId, token) {
-        if (activePolls.has(eventId)) return;
-        activePolls.add(eventId);
-
-        const headers = {};
-        if (token) headers['Authorization'] = `Bearer ${token}`;
-
-        const updateState = (updater) => {
-            const jobs = getJobs();
-            if (jobs[eventId]) {
-                updater(jobs[eventId]);
-                saveJob(jobs[eventId]);
-                if (jobs[eventId].status !== 'processing') {
-                    renderHistory();
-                } else {
-                    updateProgressBarDOM(eventId, jobs[eventId].progress, jobs[eventId].stage_msg);
-                }
-            }
-        };
-
-        fetch(`https://opera8-resemble-enhance.hf.space/gradio_api/call/_fn/${eventId}`, { headers })
+    // --- مدیریت و پیگیری وضعیت کارهای صوتی از طریق کانال ارتباطی SSE ---
+    function pollJobStatus(jobId) {
+        fetch(`https://opera8-resemble-enhance.hf.space/gradio_api/call/_fn/${jobId}`)
             .then(async response => {
                 if (!response.ok) {
-                    const errText = await response.text();
-                    throw new Error(`خطا در پیگیری وضعیت: ${response.status} - ${errText}`);
+                    throw new Error(`خطا در ارتباط با سرور: ${response.status}`);
                 }
 
                 const reader = response.body.getReader();
@@ -415,7 +443,7 @@
 
                     buffer += decoder.decode(value, { stream: true });
                     const lines = buffer.split("\n");
-                    buffer = lines.pop(); 
+                    buffer = lines.pop();
 
                     for (const line of lines) {
                         const trimmed = line.trim();
@@ -426,93 +454,92 @@
                             let data;
                             try { data = JSON.parse(dataStr); } catch (e) { data = dataStr; }
 
+                            const jobs = getJobs();
+                            if (!jobs[jobId]) return; // در صورت حذف کار توسط کاربر از تاریخچه
+
                             if (currentEvent === "complete") {
-                                updateState(job => {
-                                    job.status = 'completed';
-                                    job.progress = 100;
-                                    job.stage_msg = 'تکمیل شد';
-                                    
-                                    const resolveUrl = (audioObj) => {
-                                        if (!audioObj) return '';
-                                        if (audioObj.url) return audioObj.url;
-                                        return `https://opera8-resemble-enhance.hf.space/file=${audioObj.path}`;
-                                    };
-                                    job.denoised_url = resolveUrl(data[0]);
-                                    job.enhanced_url = resolveUrl(data[1]);
-                                });
-                                activePolls.delete(eventId);
+                                jobs[jobId].status = 'completed';
+                                jobs[jobId].progress = 100;
+
+                                const resolveUrl = (audioObj) => {
+                                    if (!audioObj) return '';
+                                    if (audioObj.url) return audioObj.url;
+                                    return `https://opera8-resemble-enhance.hf.space/file=${audioObj.path}`;
+                                };
+
+                                jobs[jobId].denoised_url = resolveUrl(data[0]);
+                                jobs[jobId].enhanced_url = resolveUrl(data[1]);
+
+                                localStorage.setItem(STORAGE_KEY, JSON.stringify(jobs));
+                                renderHistory();
                                 return;
+
                             } else if (currentEvent === "error") {
-                                updateState(job => {
-                                    job.status = 'failed';
-                                    job.progress = 0;
-                                    job.stage_msg = 'خطا در حین پردازش مدل صوتی';
-                                });
-                                activePolls.delete(eventId);
+                                jobs[jobId].status = 'failed';
+                                localStorage.setItem(STORAGE_KEY, JSON.stringify(jobs));
+                                renderHistory();
                                 return;
+
                             } else {
+                                // به‌روزرسانی پیشرفت فرضی در حین پردازش سرور
                                 if (typeof data === 'object' && data.stage) {
-                                    let message = '';
-                                    if (data.stage === 'pending') {
-                                        message = `در صف انتظار (${data.queue_size || 0} نفر پیش از شما)`;
-                                    } else {
-                                        message = `وضعیت: ${data.stage}`;
+                                    let progress = jobs[jobId].progress || 10;
+                                    if (data.stage === 'process') {
+                                        progress = Math.min(progress + 20, 90);
+                                    } else if (data.stage === 'pending') {
+                                        progress = Math.min(progress + 5, 40);
+                                    }
+                                    jobs[jobId].progress = progress;
+
+                                    const queueMsgEl = document.getElementById(`queue-message-${jobId}`);
+                                    if (queueMsgEl) {
+                                        if (data.queue_size && data.queue_size > 0) {
+                                            queueMsgEl.innerHTML = `<i class="fas fa-hourglass-half fa-spin-pulse"></i> تعداد ${data.queue_size} درخواست قبل از شما در صف است...`;
+                                            queueMsgEl.classList.add('visible');
+                                        } else {
+                                            queueMsgEl.classList.remove('visible');
+                                        }
                                     }
-                                    updateState(job => {
-                                        job.stage_msg = message;
-                                        if (!job.progress) job.progress = 5;
-                                        if (job.progress < 90) job.progress += 5;
-                                    });
+                                } else {
+                                    let progress = jobs[jobId].progress || 10;
+                                    progress = Math.min(progress + 3, 95);
+                                    jobs[jobId].progress = progress;
                                 }
+                                localStorage.setItem(STORAGE_KEY, JSON.stringify(jobs));
+                                updateProgressBarDOM(jobId, jobs[jobId].progress);
                             }
                         }
                     }
                 }
             })
             .catch(err => {
-                console.error(err);
-                updateState(job => {
-                    job.status = 'failed';
-                    job.progress = 0;
-                    job.stage_msg = 'خطای اتصال به سرور';
-                });
-                activePolls.delete(eventId);
+                console.error("پیگیری با خطا مواجه شد:", err);
+                const jobs = getJobs();
+                if (jobs[jobId]) {
+                    jobs[jobId].status = 'failed';
+                    localStorage.setItem(STORAGE_KEY, JSON.stringify(jobs));
+                    renderHistory();
+                }
             });
     }
 
-    // شبیه‌ساز حرکت نرم درصد نوار پیشرفت
-    setInterval(() => {
-        const jobs = getJobs(); let changed = false;
+    function resumeActivePolls() {
+        const jobs = getJobs();
         for (const id in jobs) {
             if (jobs[id].status === 'processing') {
-                if (!jobs[id].progress) jobs[id].progress = 0;
-                if (jobs[id].progress < 95) {
-                    jobs[id].progress += 1; changed = true;
-                    updateProgressBarDOM(id, jobs[id].progress, jobs[id].stage_msg);
-                }
+                pollJobStatus(id);
             }
         }
-        if (changed) localStorage.setItem(STORAGE_KEY, JSON.stringify(jobs));
-    }, 3000);
+    }
 
-    function updateProgressBarDOM(id, percent, stageMsg) { 
+    function updateProgressBarDOM(id, percent) { 
         const bar = document.getElementById(`progress-fill-${id}`); 
         const text = document.getElementById(`progress-text-${id}`); 
         if (bar) bar.style.width = `${percent}%`; 
-        if (text) text.innerHTML = `${percent}%`; 
-        
-        const messageEl = document.getElementById(`queue-message-${id}`);
-        if (messageEl) {
-            if (stageMsg) {
-                messageEl.innerHTML = `<i class="fas fa-hourglass-half fa-spin-pulse" style="--fa-animation-duration: 2s;"></i> ${stageMsg}`;
-                messageEl.classList.add('visible');
-            } else {
-                messageEl.classList.remove('visible');
-            }
-        }
+        if (text && text.innerHTML.includes('%')) text.innerHTML = `${percent}%`; 
     }
 
-    // --- رندر لیست سوابق ---
+    // --- رندر ساختار لیست تاریخچه با ظاهر کاملا هماهنگ ---
     function renderHistory() { 
         const list = document.getElementById('historyList'); 
         const jobs = Object.values(getJobs()).reverse(); 
@@ -528,24 +555,24 @@
             let title, description, percentageText, buttonText, buttonAction, buttonIcon; 
             
             if (job.status === 'processing') { 
-                title = 'در حال بهبود صدا'; 
-                description = 'پردازش در حال انجام است. با ترک صفحه درخواست از بین نمی‌رود.'; 
+                title = 'در حال بهبود کیفیت صدا'; 
+                description = 'سرور صوتی در حال اعمال پردازش‌ها است. می‌توانید از صفحه خارج شوید.'; 
                 percentageText = `${job.progress || 0}%`; 
                 buttonText = 'در حال پیگیری...'; 
                 buttonIcon = '<i class="fas fa-clock me-2"></i>'; 
                 buttonAction = ''; 
             } else if (job.status === 'completed') { 
-                title = 'بهبود صدا تکمیل شد'; 
+                title = 'بهبود صدا با موفقیت تکمیل شد'; 
                 description = `نام فایل اصلی: <strong>${job.fileName}</strong>`; 
                 percentageText = 'تکمیل شد'; 
-                buttonText = 'نمایش فایل‌ها'; 
+                buttonText = 'نمایش فایل‌های نهایی'; 
                 buttonIcon = '<i class="fas fa-play-circle me-2"></i>'; 
                 buttonAction = `onclick="toggleHistoryItem('${job.job_id}')"`; 
             } else { 
-                title = 'خطا در پردازش'; 
-                description = 'متاسفانه در پردازش این فایل مشکلی پیش آمد.'; 
+                title = 'خطا در حین فرآیند بهبود صدا'; 
+                description = 'پردازش فایل صوتی شما روی سرور به دلیل خطا ناموفق بود.'; 
                 percentageText = 'خطا'; 
-                buttonText = 'خطا'; 
+                buttonText = 'خطا در پردازش'; 
                 buttonIcon = '<i class="fas fa-exclamation-triangle me-2"></i>'; 
                 buttonAction = ''; 
             } 
@@ -560,8 +587,8 @@
                         <div class="status-description">${description}</div>
                         <div class="progress-display">
                             <div class="progress-percentage" id="progress-text-${job.job_id}">${percentageText}</div>
-                            <div class="queue-status-message ${job.status === 'processing' ? 'visible' : ''}" id="queue-message-${job.job_id}">
-                                <i class="fas fa-hourglass-half fa-spin-pulse" style="--fa-animation-duration: 2s;"></i> ${job.stage_msg || 'در حال آماده‌سازی...'}
+                            <div class="queue-status-message" id="queue-message-${job.job_id}">
+                                <i class="fas fa-hourglass-half fa-spin-pulse" style="--fa-animation-duration: 2s;"></i> درخواست در صف انجام است، لطفاً صبور باشید...
                             </div>
                             <div class="progress-bar-custom">
                                 <div class="progress-bar-custom-fill" id="progress-fill-${job.job_id}" style="width: ${job.progress || 0}%"></div>
@@ -572,7 +599,7 @@
                             <button class="btn-status" ${buttonAction}>${buttonIcon} ${buttonText}</button>
                         </div>
                     </div>
-                    ${job.status === 'completed' ? `<div class="history-card-body" id="body-${job.job_id}">${getExpandedContent(job)}</div>` : ''}
+                    ${job.status === 'completed' ? `<div class="history-card-body">${getExpandedContent(job)}</div>` : ''}
                 </div>
                 ${index < jobs.length - 1 ? '<hr class="history-separator">' : ''}
             `; 
@@ -589,29 +616,36 @@
         }); 
         return `
             <div class="audio-player-wrapper">
-                <small class="d-block fw-bold text-muted mb-1" style="font-size:0.8rem">فایل اصلی:</small>
+                <small class="d-block fw-bold text-muted mb-1" style="font-size:0.8rem">فایل صوتی اصلی شما:</small>
                 <audio controls id="original-audio-${job.job_id}" class="mini-player"></audio>
             </div>
             <div class="audio-player-wrapper mt-3">
-                <small class="d-block fw-bold text-info mb-1" style="font-size:0.8rem">۱. فایل کاهش نویز شده (Denoised):</small>
-                <audio controls src="${job.denoised_url || ''}" class="mini-player"></audio>
-                <button type="button" class="btn btn-sm btn-outline-info w-100 mt-2 rounded-pill fw-bold btn-download-via-postmessage" data-audiourl="${job.denoised_url || ''}">
-                    <i class="fas fa-download me-1"></i> دانلود فایل کاهش نویز شده
-                </button>
+                <small class="d-block fw-bold text-info mb-1" style="font-size:0.8rem">فایل خروجی کاهش نویز (Denoised Audio):</small>
+                <audio controls src="${job.denoised_url}" class="mini-player"></audio>
             </div>
             <div class="audio-player-wrapper mt-3">
-                <small class="d-block fw-bold text-success mb-1" style="font-size:0.8rem">۲. فایل بهبودیافته استودیویی (Enhanced):</small>
-                <audio controls src="${job.enhanced_url || ''}" class="mini-player"></audio>
-                <button type="button" class="btn btn-sm btn-success w-100 mt-2 rounded-pill fw-bold btn-download-via-postmessage" data-audiourl="${job.enhanced_url || ''}">
-                    <i class="fas fa-download me-1"></i> دانلود فایل بهبودیافته
-                </button>
+                <small class="d-block fw-bold text-success mb-1" style="font-size:0.8rem">فایل خروجی بهبودیافته نهایی (Enhanced Audio):</small>
+                <audio controls src="${job.enhanced_url}" class="mini-player"></audio>
+            </div>
+            
+            <div class="row g-2 mt-3">
+                <div class="col-6">
+                    <button type="button" class="btn btn-sm btn-outline-info w-100 rounded-pill fw-bold btn-download-via-postmessage" data-url="${job.denoised_url}">
+                        <i class="fas fa-download me-1"></i> دانلود نسخه بدون نویز
+                    </button>
+                </div>
+                <div class="col-6">
+                    <button type="button" class="btn btn-sm btn-success w-100 rounded-pill fw-bold btn-download-via-postmessage" data-url="${job.enhanced_url}">
+                        <i class="fas fa-download me-1"></i> دانلود نسخه استودیویی
+                    </button>
+                </div>
             </div>
         `; 
     }
     
     function toggleHistoryItem(id) { document.getElementById(`history-${id}`).classList.toggle('expanded'); }
     
-    // --- مدیریت مودال‌ها ---
+    // --- مدیریت فرآیند لغو و مودال‌های هشدار ---
     let deleteId = null;
     function openDeleteModal(id) { deleteId = id; document.getElementById('deleteModal').style.display = 'flex'; }
     function closeModal() { document.getElementById('deleteModal').style.display = 'none'; deleteId = null; }
@@ -630,9 +664,10 @@
         renderHistory(); 
         closeModal(); 
     };
+    
     document.getElementById('upgradeFromModalBtn').onclick = () => { parent.postMessage({ type: 'NAVIGATE_TO_PREMIUM', payload: { url: PREMIUM_URL } }, '*'); };
 
-    // --- ارتباط با برنامه اندروید ---
+    // --- مدیریت دریافت اشتراک و وضعیت کاربر از هسته اندروید ---
     function isUserPaid(userObject) { return userObject && userObject.isLogin && userObject.accessible_pages && (userObject.accessible_pages.includes(PREMIUM_PAGE_ID) || userObject.accessible_pages.includes(parseInt(PREMIUM_PAGE_ID))); }
     
     function updateSubscriptionBadge(status) {
@@ -660,22 +695,21 @@
         }
     });
 
-    // مدیریت دانلود و ارسال پیام به برنامه اندروید
     document.getElementById('historyList').addEventListener('click', (e) => {
         const downloadButton = e.target.closest('.btn-download-via-postmessage');
         if(downloadButton) {
             e.preventDefault();
-            const audioUrl = downloadButton.dataset.audiourl;
+            const audioUrl = downloadButton.dataset.url;
             if(audioUrl) {
                 parent.postMessage({ type: 'INITIATE_DOWNLOAD_FROM_URL', payload: { audioUrl: audioUrl } }, '*');
-                const previousHTML = downloadButton.innerHTML;
-                downloadButton.innerHTML = '<i class="fas fa-check me-1"></i> ارسال به دانلودر';
-                setTimeout(() => { downloadButton.innerHTML = previousHTML; }, 2000);
+                const originalText = downloadButton.innerHTML;
+                downloadButton.innerHTML = '<i class="fas fa-check me-1"></i> ارسال شد';
+                setTimeout(() => { downloadButton.innerHTML = originalText; }, 2000);
             }
         }
     });
 
-    // --- اجرا در شروع ---
+    // --- فرآیند راه‌اندازی در ابتدای بارگذاری صفحه ---
     initDB();
     parent.postMessage({ type: 'REQUEST_USER_STATUS' }, '*');
 </script>