Update index.html

index.html

@@ -28,7 +28,7 @@ body {
   overflow-x: hidden;
 }
 
-/* ─── Grid Background ─── */
+/* ─── Grid Background ─── */
 body::before {
   content: '';
   position: fixed;
@@ -49,7 +49,7 @@ body::before {
   z-index: 1;
 }
 
-/* ─── Header ─── */
+/* ─── Header ─── */
 .header {
   text-align: center;
   margin-bottom: 48px;
@@ -83,7 +83,7 @@ body::before {
   font-weight: 300;
 }
 
-/* ─── API Status ─── */
+/* ─── API Status ─── */
 .api-status {
   display: flex;
   align-items: center;
@@ -109,7 +109,7 @@ body::before {
   50% { opacity: 0.7; box-shadow: 0 0 0 4px transparent; }
 }
 
-/* ─── Upload Zone ─── */
+/* ─── Upload Zone ─── */
 .upload-zone {
   border: 1px dashed var(--border);
   border-radius: 8px;
@@ -158,7 +158,7 @@ body::before {
 
 #fileInput { display: none; }
 
-/* ─── Video Preview ─── */
+/* ─── Video Preview ─── */
 .video-preview {
   display: none;
   background: var(--surface);
@@ -189,7 +189,7 @@ body::before {
 .video-meta span { display: flex; align-items: center; gap: 6px; }
 .video-meta strong { color: var(--text); }
 
-/* ─── Upload Progress ─── */
+/* ─── Upload Progress ─── */
 .upload-progress {
   display: none;
   margin-bottom: 24px;
@@ -220,7 +220,7 @@ body::before {
   box-shadow: 0 0 8px var(--accent);
 }
 
-/* ─── Action Buttons ─── */
+/* ─── Action Buttons ─── */
 .actions {
   display: flex;
   gap: 12px;
@@ -280,7 +280,7 @@ body::before {
   transform: translateY(-2px);
 }
 
-/* ─── Timeline ─── */
+/* ─── Timeline ─── */
 .timeline-section {
   display: none;
   margin-bottom: 32px;
@@ -416,7 +416,7 @@ body::before {
 .timeline-details .warn { color: var(--warn); }
 .timeline-details .danger { color: var(--accent2); }
 
-/* ─── Frame Log ─── */
+/* ─── Frame Log ─── */
 .frame-log {
   display: flex;
   flex-wrap: wrap;
@@ -444,7 +444,7 @@ body::before {
   background: rgba(255,51,102,0.05);
 }
 
-/* ─── Results ─── */
+/* ─── Results ─── */
 .results-section {
   display: none;
   margin-bottom: 32px;
@@ -523,7 +523,7 @@ body::before {
   display: block;
 }
 
-/* ─── Video Timeline Bar ─── */
+/* ─── Video Timeline Bar ─── */
 .video-timeline {
   background: rgba(0,0,0,0.3);
   border-radius: 4px;
@@ -559,7 +559,7 @@ body::before {
   margin-top: 4px;
 }
 
-/* ─── Download ─── */
+/* ─── Download ─── */
 .download-section {
   display: none;
   text-align: center;
@@ -583,7 +583,7 @@ body::before {
   margin-bottom: 24px;
 }
 
-/* ─── Spinner ─── */
+/* ─── Spinner ─── */
 .spinner {
   width: 16px; height: 16px;
   border: 2px solid rgba(0,0,0,0.3);
@@ -595,7 +595,7 @@ body::before {
 
 @keyframes spin { to { transform: rotate(360deg); } }
 
-/* ─── Alert ─── */
+/* ─── Alert ─── */
 .alert {
   padding: 12px 16px;
   border-radius: 6px;
@@ -616,14 +616,14 @@ body::before {
   <!-- Header -->
   <div class="header">
     <div class="header-badge">AI VIDEO FILTER</div>
-    <h1>تنقية <span>الفيديو</span> الإعلاني</h1>
-    <p>إزالة مقاطع النساء تلقائياً باستخدام BLIP + Florence-2</p>
+    <h1>تنقية <span>الفيديو</span> الإعلاني</h1>
+    <p>إزالة مقاطع النساء تلقائياً باستخدام BLIP + Florence-2</p>
   </div>
 
   <!-- API Status -->
   <div class="api-status">
     <div class="status-dot" id="statusDot"></div>
-    <span id="statusText" style="font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted)">جاري الاتصال بالـ API...</span>
+    <span id="statusText" style="font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted)">جاري الاتصال بالـ API...</span>
   </div>
 
   <!-- Alert -->
@@ -631,9 +631,9 @@ body::before {
 
   <!-- Upload Zone -->
   <div class="upload-zone" id="uploadZone">
-    <span class="upload-icon">🎬</span>
-    <h3>اسحب الفيديو هنا أو اضغط للاختيار</h3>
-    <p>MP4 / MOV / AVI · حد أقصى 200MB</p>
+    <span class="upload-icon">🎬</span>
+    <h3>اسحب الفيديو هنا أو اضغط للاختيار</h3>
+    <p>MP4 / MOV / AVI · حد أقصى 200MB</p>
     <input type="file" id="fileInput" accept="video/*">
   </div>
 
@@ -646,7 +646,7 @@ body::before {
   <!-- Upload Progress -->
   <div class="upload-progress" id="uploadProgress">
     <div class="progress-label">
-      <span id="progressLabel">جاري الرفع...</span>
+      <span id="progressLabel">جاري الرفع...</span>
       <span id="progressPct">0%</span>
     </div>
     <div class="progress-bar">
@@ -657,20 +657,20 @@ body::before {
   <!-- Action Buttons -->
   <div class="actions" id="actionsBar" style="display:none">
     <button class="btn btn-danger" id="btnQuickCheck" disabled>
-      <span>🔍</span> فحص سريع
+      <span>🔍</span> فحص سريع
     </button>
     <button class="btn btn-primary" id="btnAnalyze" disabled>
-      <span>⚙️</span> تحليل وتقطيع
+      <span>⚙️</span> تحليل وتقطيع
     </button>
     <button class="btn btn-secondary" id="btnReset" onclick="resetAll()">
-      <span>↺</span> إعادة
+      <span>↺</span> إعادة
     </button>
   </div>
 
   <!-- Timeline -->
   <div class="timeline-section" id="timelineSection">
     <div class="timeline-header">
-      <h2>⬡ سجل العمليات</h2>
+      <h2>⬡ سجل العمليات</h2>
     </div>
     <div class="timeline" id="timeline"></div>
   </div>
@@ -680,10 +680,10 @@ body::before {
 
   <!-- Download -->
   <div class="download-section" id="downloadSection">
-    <h3>✅ الفيديو النظيف جاهز</h3>
+    <h3>✅ الفيديو النظيف جاهز</h3>
     <p id="downloadDesc"></p>
     <button class="btn btn-primary" id="btnDownload" style="max-width:240px;margin:0 auto">
-      <span>⬇️</span> تحميل الفيديو النظيف
+      <span>⬇️</span> تحميل الفيديو النظيف
     </button>
   </div>
 
@@ -695,7 +695,7 @@ let currentFile = null;
 let currentJobId = null;
 let apiReady = false;
 
-// ─── API Status Check ──────────────────────────────────────────
+// ─── API Status Check ──────────────────────────────────────────
 async function checkApiStatus() {
   try {
     const res = await fetch(`${API_BASE}/health`);
@@ -705,28 +705,28 @@ async function checkApiStatus() {
 
     if (data.status === 'ready') {
       dot.className = 'status-dot ready';
-      txt.textContent = '✅ النماذج جاهزة — BLIP + Florence-2';
+      txt.textContent = '✅ النماذج جاهزة — BLIP + Florence-2';
       txt.style.color = 'var(--accent)';
       apiReady = true;
     } else if (data.status === 'loading') {
       dot.className = 'status-dot loading';
-      txt.textContent = `⏳ ${data.message}`;
+      txt.textContent = `⏳ ${data.message}`;
       txt.style.color = 'var(--warn)';
       setTimeout(checkApiStatus, 3000);
     } else {
       dot.className = 'status-dot error';
-      txt.textContent = `❌ ${data.message}`;
+      txt.textContent = `❌ ${data.message}`;
       txt.style.color = 'var(--accent2)';
     }
   } catch (e) {
     const dot = document.getElementById('statusDot');
     dot.className = 'status-dot error';
-    document.getElementById('statusText').textContent = '❌ لا يمكن الاتصال بالـ API';
+    document.getElementById('statusText').textContent = '❌ لا يمكن الاتصال بالـ API';
     setTimeout(checkApiStatus, 5000);
   }
 }
 
-// ─── Upload Zone ───────────────────────────────────────────────
+// ─── Upload Zone ───────────────────────────────────────────────
 const uploadZone = document.getElementById('uploadZone');
 const fileInput  = document.getElementById('fileInput');
 
@@ -742,17 +742,22 @@ fileInput.addEventListener('change', e => { if (e.target.files[0]) handleFile(e.
 
 function handleFile(file) {
   if (!file.type.startsWith('video/')) {
-    showAlert('الملف ليس فيديو! يُقبل فقط MP4, MOV, AVI', 'error');
+    showAlert('الملف ليس فيديو! يُقبل فقط MP4, MOV, AVI', 'error');
     return;
   }
   if (file.size > 200 * 1024 * 1024) {
-    showAlert('حجم الفيديو يتجاوز 200MB', 'warn');
+    showAlert('حجم الفيديو يتجاوز 200MB', 'warn');
     return;
   }
 
   currentFile = file;
   showVideoPreview(file);
-  uploadFile(file);
+  showTimeline();
+  document.getElementById('actionsBar').style.display = 'flex';
+  document.getElementById('btnQuickCheck').disabled = !apiReady;
+  document.getElementById('btnAnalyze').disabled    = !apiReady;
+  addTimelineItem('ready', 'done', '⏸ بانتظار الإجراء', 'READY',
+    'الفيديو جاهز. اختر "فحص سريع" أو "تحليل وتقطيع".');
 }
 
 function showVideoPreview(file) {
@@ -768,16 +773,16 @@ function showVideoPreview(file) {
     const dur = formatDuration(player.duration);
     const size = (file.size / 1024 / 1024).toFixed(1);
     meta.innerHTML = `
-      <span>🎬 <strong>${file.name}</strong></span>
-      <span>⏱ مدة: <strong>${dur}</strong></span>
-      <span>💾 الحجم: <strong>${size} MB</strong></span>
-      <span>📐 ${player.videoWidth}×${player.videoHeight}</span>
+      <span>🎬 <strong>${file.name}</strong></span>
+      <span>⏱ مدة: <strong>${dur}</strong></span>
+      <span>💾 الحجم: <strong>${size} MB</strong></span>
+      <span>📐 ${player.videoWidth}×${player.videoHeight}</span>
     `;
   };
 }
 
-// ─── Upload with Progress ──────────────────────────────────
-function uploadFile(file) {
+// ─── Upload with Progress ──────────────────────────────────────
+function analyzeVideo(file) {
   const uploadProgress = document.getElementById('uploadProgress');
   const progressFill   = document.getElementById('progressFill');
   const progressPct    = document.getElementById('progressPct');
@@ -785,44 +790,58 @@ function uploadFile(file) {
 
   uploadProgress.style.display = 'block';
   showTimeline();
-  addTimelineItem('upload', 'active', '📤 تحميل الفيديو', 'UPLOAD', `جاري تحضير ${file.name}...`);
-
-  // ✅ نحضّر الفيديو محلياً فقط - لا نرفعه الآن
-  // الرفع يحدث فقط عند الضغط على أزرار الإجراءات
-  let progress = 0;
-  const interval = setInterval(() => {
-    progress = Math.min(progress + 10, 90);
-    progressFill.style.width = progress + '%';
-    progressPct.textContent  = progress + '%';
-    progressLabel.textContent = `جاري تحضير الفيديو...`;
-    if (progress >= 90) {
-      clearInterval(interval);
-      setTimeout(() => {
-        progressFill.style.width = '100%';
-        progressPct.textContent  = '100%';
-        setTimeout(() => {
-          uploadProgress.style.display = 'none';
-          updateTimelineItem('upload', 'done', `✅ الفيديو جاهز: ${file.name}`);
-          document.getElementById('actionsBar').style.display = 'flex';
-          document.getElementById('btnQuickCheck').disabled = !apiReady;
-          document.getElementById('btnAnalyze').disabled    = !apiReady;
-          addTimelineItem('ready', 'done', '⏸ بانتظار الإجراء', 'READY',
-            'الفيديو جاهز — اختر "فحص سريع" للتحقق السريع أو "تحليل وتقطيع" للمعالجة الكاملة');
-        }, 300);
-      }, 200);
+  addTimelineItem('analyze', 'active', '⚙️ بدء التحليل الكامل', 'ANALYZING',
+    `جاري رفع ${file.name} وتحليله...`);
+
+  const xhr = new XMLHttpRequest();
+  const formData = new FormData();
+  formData.append('file', file);
+
+  xhr.upload.onprogress = e => {
+    if (e.lengthComputable) {
+      const pct = Math.round(e.loaded / e.total * 100);
+      progressFill.style.width = pct + '%';
+      progressPct.textContent  = pct + '%';
+      progressLabel.textContent = `جاري الرفع... ${(e.loaded/1024/1024).toFixed(1)}MB / ${(e.total/1024/1024).toFixed(1)}MB`;
     }
-  }, 80);
-}
+  };
+
+  xhr.onload = () => {
+    uploadProgress.style.display = 'none';
+    try {
+      const data = JSON.parse(xhr.responseText || '{}');
+      if (xhr.status !== 200) {
+        updateTimelineItem('analyze', 'error', `❌ فشل التحليل: ${data.detail || xhr.status}`);
+        setButtonsDisabled(false);
+        return;
+      }
+      const elapsed = data.analysis_time || '—';
+      currentJobId = data.output_job_id || null;
+      updateTimelineItem('analyze', 'done', `✅ اكتمل التحليل في ${elapsed}s`);
+      handleAnalysisResult(data, elapsed);
+    } catch(e) {
+      updateTimelineItem('analyze', 'error', '❌ خطأ في تحليل الاستجابة');
+    }
+    setButtonsDisabled(false);
+  };
 
-// ─── Quick Check ──────────────────────────────────────────────
+  xhr.onerror = () => {
+    uploadProgress.style.display = 'none';
+    updateTimelineItem('analyze', 'error', '❌ خطأ في الاتصال');
+    setButtonsDisabled(false);
+  };
+
+  xhr.open('POST', `${API_BASE}/analyze-video`);
+  xhr.send(formData);
+}
 document.getElementById('btnQuickCheck').addEventListener('click', async () => {
   if (!currentFile || !apiReady) return;
   setButtonsDisabled(true);
-  addTimelineItem('quickcheck', 'active', '🔍 فحص سريع للفيديو', 'QUICK-CHECK',
-    'جاري فحص أول frame من الفيديو للتحقق السريع من وجود نساء...');
+  addTimelineItem('quickcheck', 'active', '🔍 فحص سريع للفيديو', 'QUICK-CHECK',
+    'جاري فحص أول frame من الفيديو للتحقق السريع من وجود نساء...');
 
   try {
-    // نستخرج أول frame من الفيديو
+    // نستخرج أول frame من الفيديو
     const canvas = document.createElement('canvas');
     const video  = document.getElementById('videoPlayer');
     video.currentTime = 1;
@@ -837,150 +856,73 @@ document.getElementById('btnQuickCheck').addEventListener('click', async () => {
       const formData = new FormData();
       formData.append('file', blob, 'frame.jpg');
 
-      const res  = await fetch(`${API_BASE}/analyze-frame`, { method: 'POST', body: formData });
+      const res  = await fetch(`${API_BASE}/analyze-file`, { method: 'POST', body: formData });
       const data = await res.json();
 
       if (data.decision === 'BLOCK' || data.decision === 'block') {
         updateTimelineItem('quickcheck', 'done',
-          `🔴 تم اكتشاف امرأة في الـ frame الأول — يُحتمل وجود نساء في الفيديو`);
-        addTimelineItem('qc-result', 'active', '⚠️ تحذير: يوجد محتوى أنثوي', 'DETECTED',
-          'الفحص السريع اكتشف امرأة. يُنصح بالمتابعة إلى "تحليل وتقطيع" للمعالجة الكاملة.');
+          `🔴 تم اكتشاف امرأة في الـ frame الأول — يُحتمل وجود نساء في الفيديو`);
+        addTimelineItem('qc-result', 'active', '⚠️ تحذير: يوجد محتوى أنثوي', 'DETECTED',
+          'الفحص السريع اكتشف امرأة. يُنصح بالمتابعة إلى "تحليل وتقطيع" للمعالجة الكاملة.');
       } else {
         updateTimelineItem('quickcheck', 'done',
-          `🟢 الـ frame الأول نظيف — لا يوجد نساء في البداية`);
-        addTimelineItem('qc-result', 'done', '✅ الفحص الأولي نظيف', 'CLEAN',
-          'لم يُكتشف محتوى أنثوي في الـ frame الأول. يُنصح بالمتابعة لتحليل كامل الفيديو.');
+          `🟢 الـ frame الأول نظيف — لا يوجد نساء في البداية`);
+        addTimelineItem('qc-result', 'done', '✅ الفحص الأولي نظيف', 'CLEAN',
+          'لم يُكتشف محتوى أنثوي في الـ frame الأول. يُنصح بالمتابعة لتحليل كامل الفيديو.');
       }
 
       setButtonsDisabled(false);
     }, 'image/jpeg', 0.9);
 
   } catch (e) {
-    updateTimelineItem('quickcheck', 'error', `❌ خطأ: ${e.message}`);
+    updateTimelineItem('quickcheck', 'error', `❌ خطأ: ${e.message}`);
     setButtonsDisabled(false);
   }
 });
 
-// ─── Full Analysis ─────────────────────────────────────────────
+// ─── Full Analysis ─────────────────────────────────────────────
 document.getElementById('btnAnalyze').addEventListener('click', () => {
   if (!currentFile || !apiReady) return;
   setButtonsDisabled(true);
-
-  const uploadProgress = document.getElementById('uploadProgress');
-  const progressFill   = document.getElementById('progressFill');
-  const progressPct    = document.getElementById('progressPct');
-  const progressLabel  = document.getElementById('progressLabel');
-
-  // ─── المرحلة 1: رفع الفيديو مع progress ──────────────────────
-  addTimelineItem('upload-video', 'active', '📤 رفع الفيديو للتحليل', 'UPLOADING',
-    `جاري رفع ${currentFile.name} إلى السيرفر...`);
-
-  uploadProgress.style.display = 'block';
-  progressFill.style.width = '0%';
-  progressPct.textContent  = '0%';
-
-  const formData = new FormData();
-  formData.append('file', currentFile);
-
-  const xhr       = new XMLHttpRequest();
-  const startTime = Date.now();
-
-  // ─── progress رفع الملف ───────────────────────────────────────
-  xhr.upload.onprogress = e => {
-    if (e.lengthComputable) {
-      const pct = Math.round(e.loaded / e.total * 100);
-      progressFill.style.width = pct + '%';
-      progressPct.textContent  = pct + '%';
-      progressLabel.textContent = `رفع الفيديو: ${(e.loaded/1024/1024).toFixed(1)}MB / ${(e.total/1024/1024).toFixed(1)}MB`;
-    }
-  };
-
-  xhr.upload.onload = () => {
-    // ─── اكتمل الرفع → بدء التحليل على السيرفر ─────────────────
-    uploadProgress.style.display = 'none';
-    updateTimelineItem('upload-video', 'done', `✅ تم رفع الفيديو — جاري التحليل على السيرفر...`);
-    addTimelineItem('analyze', 'active', '⚙️ تحليل الفيديو frame بـ frame', 'ANALYZING',
-      'السيرفر يحلل كل ثانية من الفيديو باستخدام BLIP + Florence-2...');
-  };
-
-  xhr.onload = () => {
-    uploadProgress.style.display = 'none';
-    const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
-
-    if (xhr.status === 200) {
-      try {
-        const data = JSON.parse(xhr.responseText);
-        currentJobId = data.output_job_id || null;
-        updateTimelineItem('analyze', 'done', `✅ اكتمل التحليل في ${elapsed}s`);
-        handleAnalysisResult(data, elapsed);
-      } catch(e) {
-        updateTimelineItem('analyze', 'error', `❌ خطأ في تحليل الاستجابة`);
-      }
-    } else {
-      try {
-        const err = JSON.parse(xhr.responseText);
-        updateTimelineItem('analyze', 'error', `❌ ${err.detail || 'خطأ في السيرفر'}`);
-      } catch {
-        updateTimelineItem('analyze', 'error', `❌ خطأ ${xhr.status}`);
-      }
-    }
-    setButtonsDisabled(false);
-  };
-
-  xhr.onerror = () => {
-    uploadProgress.style.display = 'none';
-    updateTimelineItem('upload-video', 'error', '❌ خطأ في الاتصال بالسيرفر');
-    setButtonsDisabled(false);
-  };
-
-  xhr.ontimeout = () => {
-    uploadProgress.style.display = 'none';
-    updateTimelineItem('analyze', 'error', '❌ انتهت مهلة الانتظار');
-    setButtonsDisabled(false);
-  };
-
-  // timeout طويل لأن التحليل يستغرق وقتاً على CPU
-  xhr.timeout = 60 * 60 * 1000; // ساعة كاملة
-  xhr.open('POST', `${API_BASE}/analyze-video`);
-  xhr.send(formData);
+  analyzeVideo(currentFile);
 });
 
-// ─── Handle Analysis Result ───────────────────────────────────
+// ─── Handle Analysis Result ───────────────────────────────────
 function handleAnalysisResult(data, elapsed) {
   const resultsSection = document.getElementById('resultsSection');
   resultsSection.style.display = 'block';
 
   if (!data.has_female) {
-    // ── نظيف ──
-    addTimelineItem('result', 'done', '🟢 الفيديو نظيف تماماً', 'CLEAN',
-      'لم يُكتشف أي محتوى أنثوي في الفيديو كاملاً. الفيديو جاهز للنشر.');
+    // ── نظيف ──
+    addTimelineItem('result', 'done', '🟢 الفيديو نظيف تماماً', 'CLEAN',
+      'لم يُكتشف أي محتوى أنثوي في الفيديو كاملاً. الفيديو جاهز للنشر.');
 
     resultsSection.innerHTML = `
       <div class="result-card">
         <div class="result-card-header">
-          <span>📊</span>
-          <h3>نتيجة التحليل</h3>
+          <span>📊</span>
+          <h3>نتيجة التحليل</h3>
         </div>
         <div class="result-card-body">
           <div class="verdict clean">
-            <div class="verdict-icon">✅</div>
+            <div class="verdict-icon">✅</div>
             <div class="verdict-text">
-              <h4 style="color:var(--accent)">الفيديو نظيف</h4>
-              <p>لا يحتوي على أي محتوى أنثوي</p>
+              <h4 style="color:var(--accent)">الفيديو نظيف</h4>
+              <p>لا يحتوي على أي محتوى أنثوي</p>
             </div>
           </div>
           <div class="stats-grid">
             <div class="stat-box">
-              <span class="val">${data.analysis_log ? data.analysis_log.length : '—'}</span>
-              <span class="lbl">frames تم تحليلها</span>
+              <span class="val">${data.analysis_log ? data.analysis_log.length : '—'}</span>
+              <span class="lbl">frames تم تحليلها</span>
             </div>
             <div class="stat-box">
-              <span class="val">${data.analysis_time || elapsed || '—'}s</span>
-              <span class="lbl">وقت التحليل</span>
+              <span class="val">${data.analysis_time || elapsed || '—'}s</span>
+              <span class="lbl">وقت التحليل</span>
             </div>
             <div class="stat-box">
               <span class="val" style="color:var(--accent)">0</span>
-              <span class="lbl">مقاطع محذوفة</span>
+              <span class="lbl">مقاطع محذوفة</span>
             </div>
           </div>
           ${renderFrameLog(data.analysis_log)}
@@ -990,54 +932,56 @@ function handleAnalysisResult(data, elapsed) {
     return;
   }
 
-  // ── يحتوي على نساء ──
+  // ── يحتوي على نساء ──
   const femaleSegs  = data.female_segments  || [];
   const keptSegs    = data.kept_segments    || [];
   const totalRemoved = data.total_removed_sec || 0;
 
   if (femaleSegs.length > 0) {
-    addTimelineItem('cutting', 'done', `✂️ تم تقطيع ${femaleSegs.length} مقطع`, 'CUTTING',
-      `تم حذف ${totalRemoved.toFixed(1)} ثانية تحتوي على نساء وبناء الفيديو النظيف.`);
+    addTimelineItem('cutting', 'done', `✂️ تم تقطيع ${femaleSegs.length} مقطع`, 'CUTTING',
+      `تم حذف ${totalRemoved.toFixed(1)} ثانية تحتوي على نساء وبناء الفيديو النظيف.`);
   }
 
   addTimelineItem('result', data.output_available ? 'done' : 'active',
-    data.output_available ? '📦 الفيديو النظيف جاهز' : '⚠️ الفيديو كله يحتوي نساء',
+    data.output_available ? '📦 الفيديو النظيف جاهز' : '⚠️ الفيديو كله يحتوي نساء',
     'RESULT', data.message);
 
-  // حساب المدة التقريبية
-  const totalDur = data.duration_sec || 0;
+  // حساب المدة التقريبية
+  const totalDur = femaleSegs.length > 0 && keptSegs.length > 0
+    ? (keptSegs[keptSegs.length-1][1] || 0)
+    : 0;
 
   resultsSection.innerHTML = `
     <div class="result-card">
       <div class="result-card-header">
-        <span>📊</span>
-        <h3>نتيجة التحليل</h3>
+        <span>📊</span>
+        <h3>نتيجة التحليل</h3>
       </div>
       <div class="result-card-body">
         <div class="verdict female">
-          <div class="verdict-icon">⚠️</div>
+          <div class="verdict-icon">⚠️</div>
           <div class="verdict-text">
-            <h4 style="color:var(--accent2)">تم اكتشاف محتوى أنثوي</h4>
-            <p>${femaleSegs.length} مقطع يحتوي على نساء — تم حذفها</p>
+            <h4 style="color:var(--accent2)">تم اكتشاف محتوى أنثوي</h4>
+            <p>${femaleSegs.length} مقطع يحتوي على نساء — تم حذفها</p>
           </div>
         </div>
 
         <div class="stats-grid">
           <div class="stat-box">
             <span class="val" style="color:var(--accent2)">${femaleSegs.length}</span>
-            <span class="lbl">مقاطع محذوفة</span>
+            <span class="lbl">مقاطع محذوفة</span>
           </div>
           <div class="stat-box">
             <span class="val" style="color:var(--accent2)">${totalRemoved.toFixed(1)}s</span>
-            <span class="lbl">مدة محذوفة</span>
+            <span class="lbl">مدة محذوفة</span>
           </div>
           <div class="stat-box">
-            <span class="val">${data.analysis_log ? data.analysis_log.length : '—'}</span>
-            <span class="lbl">frames تم تحليلها</span>
+            <span class="val">${data.analysis_log ? data.analysis_log.length : '—'}</span>
+            <span class="lbl">frames تم تحليلها</span>
           </div>
           <div class="stat-box">
-            <span class="val">${data.analysis_time || elapsed || '—'}s</span>
-            <span class="lbl">وقت التحليل</span>
+            <span class="val">${data.analysis_time || elapsed || '—'}s</span>
+            <span class="lbl">وقت التحليل</span>
           </div>
         </div>
 
@@ -1052,7 +996,7 @@ function handleAnalysisResult(data, elapsed) {
     const dl = document.getElementById('downloadSection');
     dl.style.display = 'block';
     document.getElementById('downloadDesc').textContent =
-      `تم حذف ${totalRemoved.toFixed(1)} ثانية — الفيديو النظيف جاهز للتحميل`;
+      `تم حذف ${totalRemoved.toFixed(1)} ثانية — الفيديو النظيف جاهز للتحميل`;
 
     document.getElementById('btnDownload').onclick = () => {
       window.location.href = `${API_BASE}/download/${currentJobId}`;
@@ -1060,7 +1004,7 @@ function handleAnalysisResult(data, elapsed) {
   }
 }
 
-// ─── Render Helpers ────────────────────────────────────────────
+// ─── Render Helpers ────────────────────────────────────────────
 function renderVideoTimeline(femaleSegs, keptSegs, totalDur) {
   if (!totalDur || totalDur === 0) return '';
   const allSegs = [
@@ -1077,7 +1021,7 @@ function renderVideoTimeline(femaleSegs, keptSegs, totalDur) {
   return `
     <div style="margin:16px 0">
       <div style="font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);margin-bottom:6px">
-        خريطة الفيديو — <span style="color:var(--accent)">■ نظيف</span>  <span style="color:var(--accent2)">■ محذوف</span>
+        خريطة الفيديو — <span style="color:var(--accent)">■ نظيف</span>  <span style="color:var(--accent2)">■ محذوف</span>
       </div>
       <div class="video-timeline">${bars}</div>
       <div class="timeline-label"><span>0s</span><span>${totalDur.toFixed(0)}s</span></div>
@@ -1099,13 +1043,13 @@ function renderSegmentsTable(segs, type) {
 
   return `
     <div style="margin-top:12px">
-      <div style="font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);margin-bottom:6px">المقاطع المحذوفة</div>
+      <div style="font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);margin-bottom:6px">المقاطع المحذوفة</div>
       <table style="width:100%;border-collapse:collapse;background:rgba(0,0,0,0.3);border-radius:4px;overflow:hidden">
         <tr style="background:rgba(255,255,255,0.03)">
           <th style="font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted);padding:6px 8px;text-align:right;font-weight:400">#</th>
-          <th style="font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted);padding:6px 8px;text-align:right;font-weight:400">البداية</th>
-          <th style="font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted);padding:6px 8px;text-align:right;font-weight:400">النهاية</th>
-          <th style="font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted);padding:6px 8px;text-align:right;font-weight:400">المدة</th>
+          <th style="font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted);padding:6px 8px;text-align:right;font-weight:400">البداية</th>
+          <th style="font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted);padding:6px 8px;text-align:right;font-weight:400">النهاية</th>
+          <th style="font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted);padding:6px 8px;text-align:right;font-weight:400">المدة</th>
         </tr>
         ${rows}
       </table>
@@ -1121,14 +1065,14 @@ function renderFrameLog(log) {
   return `
     <div style="margin-top:12px">
       <div style="font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);margin-bottom:6px">
-        سجل الـ frames — <span style="color:var(--accent)">■ نظيف</span> <span style="color:var(--accent2)">■ يحتوي نساء</span>
+        سجل الـ frames — <span style="color:var(--accent)">■ نظيف</span> <span style="color:var(--accent2)">■ يحتوي نساء</span>
       </div>
       <div class="frame-log">${badges}</div>
     </div>
   `;
 }
 
-// ─── Timeline Helpers ──────────────────────────────────────────
+// ─── Timeline Helpers ──────────────────────────────────────────
 function showTimeline() {
   document.getElementById('timelineSection').style.display = 'block';
 }
@@ -1162,12 +1106,12 @@ function updateTimelineItem(id, status, desc) {
   item.className = `timeline-item status-${status} visible`;
   const descEl = document.getElementById(`tl-desc-${id}`);
   if (descEl && desc) descEl.textContent = desc;
-  // إزالة spinner
+  // إزالة spinner
   const spinner = item.querySelector('.spinner');
   if (spinner) spinner.remove();
 }
 
-// ─── Utils ─────────────────────────────────────────────────────
+// ─── Utils ─────────────────────────────────────────────────────
 function formatDuration(sec) {
   const m = Math.floor(sec / 60);
   const s = Math.floor(sec % 60);
@@ -1201,7 +1145,7 @@ function resetAll() {
   fileInput.value = '';
 }
 
-// ─── Init ──────────────────────────────────────────────────────
+// ─── Init ──────────────────────────────────────────────────────
 checkApiStatus();
 </script>
 </body>