Spaces:

webolavo
/

aibuild

Sleeping

File size: 39,882 Bytes

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Filter AI</title>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Tajawal:wght@300;400;700;900&display=swap" rel="stylesheet">
<style>
:root {
  --bg: #0a0a0f;
  --surface: #111118;
  --border: #1e1e2e;
  --accent: #00ff88;
  --accent2: #ff3366;
  --accent3: #4488ff;
  --text: #e8e8f0;
  --muted: #555570;
  --warn: #ffaa00;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Tajawal', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* â”€â”€â”€ Grid Background â”€â”€â”€ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,255,136,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,136,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
  position: relative;
  z-index: 1;
}

/* â”€â”€â”€ Header â”€â”€â”€ */
.header {
  text-align: center;
  margin-bottom: 48px;
}

.header-badge {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 4px 12px;
  border-radius: 2px;
  letter-spacing: 3px;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.header h1 {
  font-size: 42px;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 8px;
}

.header h1 span { color: var(--accent); }

.header p {
  color: var(--muted);
  font-size: 15px;
  font-weight: 300;
}

/* â”€â”€â”€ API Status â”€â”€â”€ */
.api-status {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-bottom: 32px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
}

.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--muted);
  animation: none;
}
.status-dot.ready { background: var(--accent); animation: pulse 2s infinite; }
.status-dot.loading { background: var(--warn); animation: pulse 1s infinite; }
.status-dot.error { background: var(--accent2); }

@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
  50% { opacity: 0.7; box-shadow: 0 0 0 4px transparent; }
}

/* â”€â”€â”€ Upload Zone â”€â”€â”€ */
.upload-zone {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 60px 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--surface);
  position: relative;
  overflow: hidden;
}

.upload-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,255,136,0.03), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--accent);
  background: rgba(0,255,136,0.03);
}

.upload-zone:hover::before, .upload-zone.drag-over::before { opacity: 1; }

.upload-icon {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

.upload-zone h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.upload-zone p {
  color: var(--muted);
  font-size: 13px;
  font-family: 'IBM Plex Mono', monospace;
}

#fileInput { display: none; }

/* â”€â”€â”€ Video Preview â”€â”€â”€ */
.video-preview {
  display: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
}

.video-preview video {
  width: 100%;
  max-height: 300px;
  display: block;
  background: #000;
}

.video-meta {
  padding: 16px 20px;
  display: flex;
  gap: 24px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.video-meta span { display: flex; align-items: center; gap: 6px; }
.video-meta strong { color: var(--text); }

/* â”€â”€â”€ Upload Progress â”€â”€â”€ */
.upload-progress {
  display: none;
  margin-bottom: 24px;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.progress-bar {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s ease;
  width: 0%;
  box-shadow: 0 0 8px var(--accent);
}

/* â”€â”€â”€ Action Buttons â”€â”€â”€ */
.actions {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.btn {
  flex: 1;
  padding: 14px 24px;
  border: none;
  border-radius: 6px;
  font-family: 'Tajawal', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 160px;
}

.btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none !important;
}

.btn-primary {
  background: var(--accent);
  color: #000;
}
.btn-primary:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,255,136,0.3);
}

.btn-danger {
  background: transparent;
  color: var(--accent2);
  border: 1px solid var(--accent2);
}
.btn-danger:not(:disabled):hover {
  background: rgba(255,51,102,0.1);
  transform: translateY(-2px);
}

.btn-secondary {
  background: transparent;
  color: var(--accent3);
  border: 1px solid var(--accent3);
}
.btn-secondary:not(:disabled):hover {
  background: rgba(68,136,255,0.1);
  transform: translateY(-2px);
}

/* â”€â”€â”€ Timeline â”€â”€â”€ */
.timeline-section {
  display: none;
  margin-bottom: 32px;
}

.timeline-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.timeline-header h2 {
  font-size: 16px;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--accent);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.timeline {
  position: relative;
  padding-right: 32px;
}

.timeline::before {
  content: '';
  position: absolute;
  right: 11px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

.timeline-item {
  position: relative;
  padding: 0 24px 24px 0;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.4s ease;
}

.timeline-item.visible {
  opacity: 1;
  transform: translateX(0);
}

.timeline-dot {
  position: absolute;
  right: -21px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg);
  transition: all 0.3s ease;
}

.timeline-item.status-done .timeline-dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.timeline-item.status-active .timeline-dot {
  background: var(--warn);
  border-color: var(--warn);
  animation: pulse 1s infinite;
}
.timeline-item.status-error .timeline-dot {
  background: var(--accent2);
  border-color: var(--accent2);
}

.timeline-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  transition: border-color 0.3s;
}

.timeline-item.status-done .timeline-content { border-color: rgba(0,255,136,0.3); }
.timeline-item.status-active .timeline-content { border-color: rgba(255,170,0,0.3); }
.timeline-item.status-error .timeline-content { border-color: rgba(255,51,102,0.3); }

.timeline-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.timeline-title strong {
  font-size: 14px;
  font-weight: 700;
}

.timeline-title .tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 2px;
  background: rgba(255,255,255,0.05);
  color: var(--muted);
  letter-spacing: 1px;
}

.timeline-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.timeline-details {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.3);
  border-radius: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  line-height: 1.8;
}

.timeline-details.expanded { max-height: 400px; }
.timeline-details .highlight { color: var(--accent); }
.timeline-details .warn { color: var(--warn); }
.timeline-details .danger { color: var(--accent2); }

/* â”€â”€â”€ Frame Log â”€â”€â”€ */
.frame-log {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.frame-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 2px;
  border: 1px solid;
}

.frame-badge.clean {
  color: var(--accent);
  border-color: rgba(0,255,136,0.3);
  background: rgba(0,255,136,0.05);
}

.frame-badge.female {
  color: var(--accent2);
  border-color: rgba(255,51,102,0.3);
  background: rgba(255,51,102,0.05);
}

/* â”€â”€â”€ Results â”€â”€â”€ */
.results-section {
  display: none;
  margin-bottom: 32px;
}

.result-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}

.result-card-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}

.result-card-header h3 { font-size: 15px; font-weight: 700; }

.result-card-body { padding: 16px 20px; }

.verdict {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: 6px;
  margin-bottom: 16px;
}

.verdict.clean {
  background: rgba(0,255,136,0.05);
  border: 1px solid rgba(0,255,136,0.2);
}

.verdict.female {
  background: rgba(255,51,102,0.05);
  border: 1px solid rgba(255,51,102,0.2);
}

.verdict-icon { font-size: 32px; }
.verdict-text h4 { font-size: 18px; font-weight: 900; }
.verdict-text p { font-size: 13px; color: var(--muted); margin-top: 4px; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.stat-box {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px;
  text-align: center;
}

.stat-box .val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 22px;
  font-weight: 600;
  color: var(--accent);
  display: block;
}

.stat-box .lbl {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  display: block;
}

/* â”€â”€â”€ Video Timeline Bar â”€â”€â”€ */
.video-timeline {
  background: rgba(0,0,0,0.3);
  border-radius: 4px;
  height: 40px;
  position: relative;
  overflow: hidden;
  margin: 16px 0;
}

.video-timeline .segment {
  position: absolute;
  height: 100%;
  top: 0;
  border-radius: 2px;
}

.video-timeline .seg-clean {
  background: rgba(0,255,136,0.3);
  border: 1px solid rgba(0,255,136,0.5);
}

.video-timeline .seg-female {
  background: rgba(255,51,102,0.3);
  border: 1px solid rgba(255,51,102,0.5);
}

.timeline-label {
  display: flex;
  justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

/* â”€â”€â”€ Download â”€â”€â”€ */
.download-section {
  display: none;
  text-align: center;
  padding: 32px;
  background: var(--surface);
  border: 1px solid rgba(0,255,136,0.2);
  border-radius: 8px;
  margin-bottom: 32px;
}

.download-section h3 {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 8px;
  color: var(--accent);
}

.download-section p {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 24px;
}

/* â”€â”€â”€ Spinner â”€â”€â”€ */
.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(0,0,0,0.3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* â”€â”€â”€ Alert â”€â”€â”€ */
.alert {
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}
.alert.show { display: block; }
.alert-warn { background: rgba(255,170,0,0.1); border: 1px solid rgba(255,170,0,0.3); color: var(--warn); }
.alert-error { background: rgba(255,51,102,0.1); border: 1px solid rgba(255,51,102,0.3); color: var(--accent2); }

</style>
</head>
<body>

<div class="container">

  <!-- Header -->
  <div class="header">
    <div class="header-badge">AI VIDEO FILTER</div>
    <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>
  </div>

  <!-- Alert -->
  <div class="alert alert-warn" id="alertBox"></div>

  <!-- Upload Zone -->
  <div class="upload-zone" id="uploadZone">
    <span class="upload-icon">ðŸŽ¬</span>
    <h3>Ø§Ø³ØØ¨ Ø§Ù„ÙÙŠØ¯ÙŠÙˆ Ù‡Ù†Ø§ Ø£Ùˆ Ø§Ø¶ØºØ· Ù„Ù„Ø§Ø®ØªÙŠØ§Ø±</h3>
    <p>MP4 / MOV / AVI Â· ØØ¯ Ø£Ù‚ØµÙ‰ 200MB</p>
    <input type="file" id="fileInput" accept="video/*">
  </div>

  <!-- Video Preview -->
  <div class="video-preview" id="videoPreview">
    <video id="videoPlayer" controls></video>
    <div class="video-meta" id="videoMeta"></div>
  </div>

  <!-- Upload Progress -->
  <div class="upload-progress" id="uploadProgress">
    <div class="progress-label">
      <span id="progressLabel">Ø¬Ø§Ø±ÙŠ Ø§Ù„Ø±ÙØ¹...</span>
      <span id="progressPct">0%</span>
    </div>
    <div class="progress-bar">
      <div class="progress-fill" id="progressFill"></div>
    </div>
  </div>

  <!-- Action Buttons -->
  <div class="actions" id="actionsBar" style="display:none">
    <button class="btn btn-danger" id="btnQuickCheck" disabled>
      <span>ðŸ”</span> ÙØØµ Ø³Ø±ÙŠØ¹
    </button>
    <button class="btn btn-primary" id="btnAnalyze" disabled>
      <span>âš™ï¸</span> ØªØÙ„ÙŠÙ„ ÙˆØªÙ‚Ø·ÙŠØ¹
    </button>
    <button class="btn btn-secondary" id="btnReset" onclick="resetAll()">
      <span>â†º</span> Ø¥Ø¹Ø§Ø¯Ø©
    </button>
  </div>

  <!-- Timeline -->
  <div class="timeline-section" id="timelineSection">
    <div class="timeline-header">
      <h2>â¬¡ Ø³Ø¬Ù„ Ø§Ù„Ø¹Ù…Ù„ÙŠØ§Øª</h2>
    </div>
    <div class="timeline" id="timeline"></div>
  </div>

  <!-- Results -->
  <div class="results-section" id="resultsSection"></div>

  <!-- Download -->
  <div class="download-section" id="downloadSection">
    <h3>âœ… Ø§Ù„ÙÙŠØ¯ÙŠÙˆ Ø§Ù„Ù†Ø¸ÙŠÙ Ø¬Ø§Ù‡Ø²</h3>
    <p id="downloadDesc"></p>
    <button class="btn btn-primary" id="btnDownload" style="max-width:240px;margin:0 auto">
      <span>â¬‡ï¸</span> ØªØÙ…ÙŠÙ„ Ø§Ù„ÙÙŠØ¯ÙŠÙˆ Ø§Ù„Ù†Ø¸ÙŠÙ
    </button>
  </div>

</div>

<script>
const API_BASE = window.location.origin;
let currentFile = null;
let currentJobId = null;
let apiReady = false;

// â”€â”€â”€ API Status Check â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
async function checkApiStatus() {
  try {
    const res = await fetch(`${API_BASE}/health`);
    const data = await res.json();
    const dot = document.getElementById('statusDot');
    const txt = document.getElementById('statusText');

    if (data.status === 'ready') {
      dot.className = 'status-dot ready';
      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.style.color = 'var(--warn)';
      setTimeout(checkApiStatus, 3000);
    } else {
      dot.className = 'status-dot error';
      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';
    setTimeout(checkApiStatus, 5000);
  }
}

// â”€â”€â”€ Upload Zone â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
const uploadZone = document.getElementById('uploadZone');
const fileInput  = document.getElementById('fileInput');

uploadZone.addEventListener('click', () => fileInput.click());
uploadZone.addEventListener('dragover', e => { e.preventDefault(); uploadZone.classList.add('drag-over'); });
uploadZone.addEventListener('dragleave', () => uploadZone.classList.remove('drag-over'));
uploadZone.addEventListener('drop', e => {
  e.preventDefault();
  uploadZone.classList.remove('drag-over');
  if (e.dataTransfer.files[0]) handleFile(e.dataTransfer.files[0]);
});
fileInput.addEventListener('change', e => { if (e.target.files[0]) handleFile(e.target.files[0]); });

function handleFile(file) {
  if (!file.type.startsWith('video/')) {
    showAlert('Ø§Ù„Ù…Ù„Ù Ù„ÙŠØ³ ÙÙŠØ¯ÙŠÙˆ! ÙŠÙÙ‚Ø¨Ù„ ÙÙ‚Ø· MP4, MOV, AVI', 'error');
    return;
  }
  if (file.size > 200 * 1024 * 1024) {
    showAlert('ØØ¬Ù… Ø§Ù„ÙÙŠØ¯ÙŠÙˆ ÙŠØªØ¬Ø§ÙˆØ² 200MB', 'warn');
    return;
  }

  currentFile = file;
  showVideoPreview(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) {
  const preview = document.getElementById('videoPreview');
  const player  = document.getElementById('videoPlayer');
  const meta    = document.getElementById('videoMeta');

  player.src = URL.createObjectURL(file);
  preview.style.display = 'block';
  uploadZone.style.display = 'none';

  player.onloadedmetadata = () => {
    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>
    `;
  };
}

// â”€â”€â”€ Upload with Progress â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
function analyzeVideo(file) {
  const uploadProgress = document.getElementById('uploadProgress');
  const progressFill   = document.getElementById('progressFill');
  const progressPct    = document.getElementById('progressPct');
  const progressLabel  = document.getElementById('progressLabel');

  uploadProgress.style.display = 'block';
  showTimeline();
  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`;
    }
  };

  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);
  };

  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 Ù…Ù† Ø§Ù„ÙÙŠØ¯ÙŠÙˆ Ù„Ù„ØªØÙ‚Ù‚ Ø§Ù„Ø³Ø±ÙŠØ¹ Ù…Ù† ÙˆØ¬ÙˆØ¯ Ù†Ø³Ø§Ø¡...');

  try {
    // Ù†Ø³ØªØ®Ø±Ø¬ Ø£ÙˆÙ„ frame Ù…Ù† Ø§Ù„ÙÙŠØ¯ÙŠÙˆ
    const canvas = document.createElement('canvas');
    const video  = document.getElementById('videoPlayer');
    video.currentTime = 1;

    await new Promise(r => { video.onseeked = r; });

    canvas.width  = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0);

    canvas.toBlob(async (blob) => {
      const formData = new FormData();
      formData.append('file', blob, 'frame.jpg');

      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',
          'Ø§Ù„ÙØØµ Ø§Ù„Ø³Ø±ÙŠØ¹ Ø§ÙƒØªØ´Ù Ø§Ù…Ø±Ø£Ø©. ÙŠÙÙ†ØµØ Ø¨Ø§Ù„Ù…ØªØ§Ø¨Ø¹Ø© Ø¥Ù„Ù‰ "ØªØÙ„ÙŠÙ„ ÙˆØªÙ‚Ø·ÙŠØ¹" Ù„Ù„Ù…Ø¹Ø§Ù„Ø¬Ø© Ø§Ù„ÙƒØ§Ù…Ù„Ø©.');
      } else {
        updateTimelineItem('quickcheck', 'done',
          `ðŸŸ¢ Ø§Ù„Ù€ frame Ø§Ù„Ø£ÙˆÙ„ Ù†Ø¸ÙŠÙ â€” Ù„Ø§ ÙŠÙˆØ¬Ø¯ Ù†Ø³Ø§Ø¡ ÙÙŠ Ø§Ù„Ø¨Ø¯Ø§ÙŠØ©`);
        addTimelineItem('qc-result', 'done', 'âœ… Ø§Ù„ÙØØµ Ø§Ù„Ø£ÙˆÙ„ÙŠ Ù†Ø¸ÙŠÙ', 'CLEAN',
          'Ù„Ù… ÙŠÙÙƒØªØ´Ù Ù…ØØªÙˆÙ‰ Ø£Ù†Ø«ÙˆÙŠ ÙÙŠ Ø§Ù„Ù€ frame Ø§Ù„Ø£ÙˆÙ„. ÙŠÙÙ†ØµØ Ø¨Ø§Ù„Ù…ØªØ§Ø¨Ø¹Ø© Ù„ØªØÙ„ÙŠÙ„ ÙƒØ§Ù…Ù„ Ø§Ù„ÙÙŠØ¯ÙŠÙˆ.');
      }

      setButtonsDisabled(false);
    }, 'image/jpeg', 0.9);

  } catch (e) {
    updateTimelineItem('quickcheck', 'error', `âŒ Ø®Ø·Ø£: ${e.message}`);
    setButtonsDisabled(false);
  }
});

// â”€â”€â”€ Full Analysis â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
document.getElementById('btnAnalyze').addEventListener('click', () => {
  if (!currentFile || !apiReady) return;
  setButtonsDisabled(true);
  analyzeVideo(currentFile);
});

// â”€â”€â”€ Handle Analysis Result â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
function handleAnalysisResult(data, elapsed) {
  const resultsSection = document.getElementById('resultsSection');
  resultsSection.style.display = 'block';

  if (!data.has_female) {
    // â”€â”€ Ù†Ø¸ÙŠÙ â”€â”€
    addTimelineItem('result', 'done', 'ðŸŸ¢ Ø§Ù„ÙÙŠØ¯ÙŠÙˆ Ù†Ø¸ÙŠÙ ØªÙ…Ø§Ù…Ø§Ù‹', 'CLEAN',
      'Ù„Ù… ÙŠÙÙƒØªØ´Ù Ø£ÙŠ Ù…ØØªÙˆÙ‰ Ø£Ù†Ø«ÙˆÙŠ ÙÙŠ Ø§Ù„ÙÙŠØ¯ÙŠÙˆ ÙƒØ§Ù…Ù„Ø§Ù‹. Ø§Ù„ÙÙŠØ¯ÙŠÙˆ Ø¬Ø§Ù‡Ø² Ù„Ù„Ù†Ø´Ø±.');

    resultsSection.innerHTML = `
      <div class="result-card">
        <div class="result-card-header">
          <span>ðŸ“Š</span>
          <h3>Ù†ØªÙŠØ¬Ø© Ø§Ù„ØªØÙ„ÙŠÙ„</h3>
        </div>
        <div class="result-card-body">
          <div class="verdict clean">
            <div class="verdict-icon">âœ…</div>
            <div class="verdict-text">
              <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>
            </div>
            <div class="stat-box">
              <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>
            </div>
          </div>
          ${renderFrameLog(data.analysis_log)}
        </div>
      </div>
    `;
    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('result', data.output_available ? 'done' : 'active',
    data.output_available ? 'ðŸ“¦ Ø§Ù„ÙÙŠØ¯ÙŠÙˆ Ø§Ù„Ù†Ø¸ÙŠÙ Ø¬Ø§Ù‡Ø²' : 'âš ï¸ Ø§Ù„ÙÙŠØ¯ÙŠÙˆ ÙƒÙ„Ù‡ ÙŠØØªÙˆÙŠ Ù†Ø³Ø§Ø¡',
    'RESULT', data.message);

  // ØØ³Ø§Ø¨ Ø§Ù„Ù…Ø¯Ø© Ø§Ù„ØªÙ‚Ø±ÙŠØ¨ÙŠØ©
  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>
      </div>
      <div class="result-card-body">
        <div class="verdict female">
          <div class="verdict-icon">âš ï¸</div>
          <div class="verdict-text">
            <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>
          </div>
          <div class="stat-box">
            <span class="val" style="color:var(--accent2)">${totalRemoved.toFixed(1)}s</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>
          </div>
          <div class="stat-box">
            <span class="val">${data.analysis_time || elapsed || 'â€”'}s</span>
            <span class="lbl">ÙˆÙ‚Øª Ø§Ù„ØªØÙ„ÙŠÙ„</span>
          </div>
        </div>

        ${renderVideoTimeline(femaleSegs, keptSegs, totalDur)}
        ${renderSegmentsTable(femaleSegs, 'female')}
        ${renderFrameLog(data.analysis_log)}
      </div>
    </div>
  `;

  if (data.output_available && currentJobId) {
    const dl = document.getElementById('downloadSection');
    dl.style.display = 'block';
    document.getElementById('downloadDesc').textContent =
      `ØªÙ… ØØ°Ù ${totalRemoved.toFixed(1)} Ø«Ø§Ù†ÙŠØ© â€” Ø§Ù„ÙÙŠØ¯ÙŠÙˆ Ø§Ù„Ù†Ø¸ÙŠÙ Ø¬Ø§Ù‡Ø² Ù„Ù„ØªØÙ…ÙŠÙ„`;

    document.getElementById('btnDownload').onclick = () => {
      window.location.href = `${API_BASE}/download/${currentJobId}`;
    };
  }
}

// â”€â”€â”€ Render Helpers â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
function renderVideoTimeline(femaleSegs, keptSegs, totalDur) {
  if (!totalDur || totalDur === 0) return '';
  const allSegs = [
    ...femaleSegs.map(s => ({start: s[0], end: s[1], type: 'female'})),
    ...keptSegs.map(s => ({start: s[0], end: s[1], type: 'clean'}))
  ].sort((a,b) => a.start - b.start);

  const bars = allSegs.map(s => {
    const left  = (s.start / totalDur * 100).toFixed(1);
    const width = ((s.end - s.start) / totalDur * 100).toFixed(1);
    return `<div class="segment seg-${s.type}" style="left:${left}%;width:${width}%" title="${s.type}: ${s.start.toFixed(1)}s - ${s.end.toFixed(1)}s"></div>`;
  }).join('');

  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>
      </div>
      <div class="video-timeline">${bars}</div>
      <div class="timeline-label"><span>0s</span><span>${totalDur.toFixed(0)}s</span></div>
    </div>
  `;
}

function renderSegmentsTable(segs, type) {
  if (!segs || segs.length === 0) return '';
  const color = type === 'female' ? 'var(--accent2)' : 'var(--accent)';
  const rows = segs.map((s, i) => `
    <tr>
      <td style="font-family:'IBM Plex Mono',monospace;font-size:11px;color:${color};padding:6px 8px">#${i+1}</td>
      <td style="font-family:'IBM Plex Mono',monospace;font-size:11px;padding:6px 8px">${s[0].toFixed(1)}s</td>
      <td style="font-family:'IBM Plex Mono',monospace;font-size:11px;padding:6px 8px">${s[1].toFixed(1)}s</td>
      <td style="font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);padding:6px 8px">${(s[1]-s[0]).toFixed(1)}s</td>
    </tr>
  `).join('');

  return `
    <div style="margin-top:12px">
      <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>
        </tr>
        ${rows}
      </table>
    </div>
  `;
}

function renderFrameLog(log) {
  if (!log || log.length === 0) return '';
  const badges = log.map(f =>
    `<span class="frame-badge ${f.has_female ? 'female' : 'clean'}" title="${f.reason || ''}">${f.second}s</span>`
  ).join('');
  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>
      </div>
      <div class="frame-log">${badges}</div>
    </div>
  `;
}

// â”€â”€â”€ Timeline Helpers â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
function showTimeline() {
  document.getElementById('timelineSection').style.display = 'block';
}

function addTimelineItem(id, status, title, tag, desc) {
  const timeline = document.getElementById('timeline');
  const existing = document.getElementById(`tl-${id}`);
  if (existing) { updateTimelineItem(id, status, desc); return; }

  const item = document.createElement('div');
  item.className = `timeline-item status-${status}`;
  item.id = `tl-${id}`;
  item.innerHTML = `
    <div class="timeline-dot"></div>
    <div class="timeline-content">
      <div class="timeline-title">
        <strong>${title}</strong>
        <span class="tag">${tag}</span>
        ${status === 'active' ? '<div class="spinner"></div>' : ''}
      </div>
      <div class="timeline-desc" id="tl-desc-${id}">${desc}</div>
    </div>
  `;
  timeline.appendChild(item);
  setTimeout(() => item.classList.add('visible'), 50);
}

function updateTimelineItem(id, status, desc) {
  const item = document.getElementById(`tl-${id}`);
  if (!item) return;
  item.className = `timeline-item status-${status} visible`;
  const descEl = document.getElementById(`tl-desc-${id}`);
  if (descEl && desc) descEl.textContent = desc;
  // Ø¥Ø²Ø§Ù„Ø© spinner
  const spinner = item.querySelector('.spinner');
  if (spinner) spinner.remove();
}

// â”€â”€â”€ Utils â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
function formatDuration(sec) {
  const m = Math.floor(sec / 60);
  const s = Math.floor(sec % 60);
  return `${m}:${s.toString().padStart(2,'0')}`;
}

function showAlert(msg, type) {
  const box = document.getElementById('alertBox');
  box.textContent = msg;
  box.className = `alert alert-${type} show`;
  setTimeout(() => box.classList.remove('show'), 5000);
}

function setButtonsDisabled(disabled) {
  document.getElementById('btnQuickCheck').disabled = disabled || !apiReady;
  document.getElementById('btnAnalyze').disabled    = disabled || !apiReady;
}

function resetAll() {
  currentFile  = null;
  currentJobId = null;
  document.getElementById('uploadZone').style.display   = 'block';
  document.getElementById('videoPreview').style.display = 'none';
  document.getElementById('actionsBar').style.display   = 'none';
  document.getElementById('timelineSection').style.display = 'none';
  document.getElementById('resultsSection').style.display  = 'none';
  document.getElementById('downloadSection').style.display = 'none';
  document.getElementById('timeline').innerHTML = '';
  document.getElementById('resultsSection').innerHTML = '';
  document.getElementById('videoPlayer').src = '';
  fileInput.value = '';
}

// â”€â”€â”€ Init â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
checkApiStatus();
</script>
</body>
</html>