Spaces:

Opera10
/

vidltx2.3

Running

File size: 26,800 Bytes

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>کلاینت API اسپیس LTX-2.3</title>
<style>
  :root{
    --bg:#0f1115; --panel:#171a21; --border:#2a2f3a; --text:#eef1f6;
    --muted:#9aa3b2; --accent:#ffc107; --accent2:#ffd54f; --danger:#ef4444; --ok:#22c55e;
  }
  *{box-sizing:border-box}
  body{
    margin:0; padding:24px; min-height:100vh;
    background:var(--bg); color:var(--text);
    font-family:'Vazirmatn','Tahoma',sans-serif;
    display:flex; justify-content:center;
  }
  .wrap{width:100%; max-width:640px}
  h1{font-size:1.3rem; margin:0 0 4px}
  .sub{color:var(--muted); font-size:.85rem; margin-bottom:20px}
  .card{
    background:var(--panel); border:1px solid var(--border); border-radius:16px;
    padding:20px; margin-bottom:16px;
  }
  label{display:block; font-size:.85rem; color:var(--muted); margin-bottom:6px}
  input[type=text], input[type=url], input[type=number], textarea{
    width:100%; background:#0d0f14; color:var(--text); border:1px solid var(--border);
    border-radius:10px; padding:10px 12px; font-family:inherit; font-size:.95rem;
  }
  textarea{resize:vertical; min-height:80px}
  .row{display:flex; gap:12px; margin-bottom:14px}
  .row > div{flex:1}
  .field{margin-bottom:14px}
  .toggle-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
  input[type=file]{
    width:100%; background:#0d0f14; border:1px dashed var(--border); border-radius:10px; padding:10px; color:var(--muted);
  }
  button{
    cursor:pointer; border:none; border-radius:12px; font-weight:800; font-size:1rem; padding:14px;
    width:100%;
  }
  #genBtn{
    background:linear-gradient(95deg,var(--accent2),var(--accent) 100%); color:#111827;
    box-shadow:0 8px 20px -6px rgba(255,193,7,.4);
  }
  #genBtn:disabled{opacity:.5; cursor:not-allowed}
  #status{font-size:.85rem; color:var(--muted); margin-top:10px; min-height:20px; white-space:pre-wrap}
  #status.err{color:var(--danger)}
  #status.ok{color:var(--ok)}
  video{width:100%; border-radius:12px; margin-top:14px; display:none; background:#000}
  .hint{font-size:.75rem; color:var(--muted); margin-top:4px}
  .barwrap{height:8px; background:#0d0f14; border-radius:6px; overflow:hidden; margin-top:10px; display:none}
  .bar{height:100%; width:0%; background:var(--accent); transition:width .3s}
</style>
</head>
<body>
<div class="wrap">
  <h1>کلاینت مستقیم API اسپیس LTX-2.3</h1>
  <div class="sub">اتصال مستقیم به Gradio API اسپیس (بدون رابط گرافیکی اصلی)</div>

  <div class="card">
    <div class="field">
      <label>آدرس اسپیس (Base URL)</label>
      <input type="url" id="spaceUrl" value="https://opera8-ltx-2-3.hf.space">
    </div>
    <div class="field">
      <label>توکن Hugging Face (اختیاری — فقط برای اسپیس‌های خصوصی/گیت‌دار)</label>
      <input type="text" id="hfToken" placeholder="hf_xxxxxxxxxxxxxxxx">
    </div>
  </div>

  <div class="card">
    <div class="field">
      <label>پرامپت (توضیحات متنی)</label>
      <textarea id="prompt" placeholder="مثلاً: یک فضانورد از یک تخم شکننده روی سطح ماه بیرون می‌آید..."></textarea>
    </div>

    <div class="field">
      <label>تصویر ورودی (اختیاری)</label>
      <input type="file" id="imageFile" accept="image/*">
    </div>

    <div class="row">
      <div>
        <label>مدت زمان (ثانیه)</label>
        <input type="number" id="duration" value="4" min="1" max="15" step="0.5">
      </div>
      <div>
        <label>Seed</label>
        <input type="number" id="seed" value="42">
      </div>
    </div>

    <div class="toggle-row">
      <label style="margin:0">تصادفی‌سازی Seed</label>
      <input type="checkbox" id="randomizeSeed" checked>
    </div>
    <div class="toggle-row">
      <label style="margin:0">بهبود خودکار پرامپت</label>
      <input type="checkbox" id="enhancePrompt" checked>
    </div>
    <div class="toggle-row">
      <label style="margin:0">کیفیت بالا (High-Res)</label>
      <input type="checkbox" id="highRes" checked>
    </div>

    <div class="row">
      <div>
        <label>عرض (Width)</label>
        <input type="number" id="width" value="1536">
      </div>
      <div>
        <label>ارتفاع (Height)</label>
        <input type="number" id="height" value="1024">
      </div>
    </div>
    <div class="hint" id="aspectHint">اگر تصویری آپلود کنید، عرض/ارتفاع به‌صورت خودکار بر اساس نسبت ابعاد همان تصویر تنظیم می‌شود.</div>
  </div>

  <div class="card">
    <div class="field">
      <label>fn_index دستی ساخت ویدیو (اختیاری — فقط اگر تشخیص خودکار مبهم بود)</label>
      <input type="number" id="fnIndexOverride" placeholder="مثلاً 3">
    </div>
    <div class="field">
      <label>fn_index دستی به‌روزرسانی وضوح/مدت (اختیاری)</label>
      <input type="number" id="fnIndexToggleOverride" placeholder="مثلاً 1">
    </div>
  </div>

  <button id="genBtn" onclick="generate()">🎬 تولید ویدیو</button>
  <div class="barwrap" id="barwrap"><div class="bar" id="bar"></div></div>
  <div id="status"></div>
  <video id="outVideo" controls></video>
</div>


<script>
// Mirrors the RESOLUTIONS dict in app.py
const RESOLUTIONS = {
  high: { "16:9": [1536, 1024], "9:16": [1024, 1536], "1:1": [1024, 1024] },
  low:  { "16:9": [768, 512],  "9:16": [512, 768],  "1:1": [768, 768] }
};

function sessionHash() {
  return Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2);
}

function setStatus(msg, cls) {
  const el = document.getElementById('status');
  el.textContent = msg;
  el.className = cls || '';
}

function authHeaders() {
  const token = document.getElementById('hfToken').value.trim();
  return token ? { "Authorization": "Bearer " + token } : {};
}

// Reads a response body as text for detailed error messages, without
// throwing if the body can't be read.
async function safeText(res) {
  try { return await res.text(); } catch (e) { return "(بدون بدنه پاسخ)"; }
}

// Some Gradio versions return component updates as plain values, others as
// {"value": ..., "__type__": "update"} objects. Normalize both shapes.
function unwrapValue(v) {
  if (v && typeof v === 'object' && '__type__' in v && 'value' in v) return v.value;
  return v;
}

// Mirrors detect_aspect_ratio() in app.py: picks the closest of 16:9, 9:16, 1:1
function detectAspectRatio(w, h) {
  const ratio = w / h;
  const candidates = { "16:9": 16 / 9, "9:16": 9 / 16, "1:1": 1.0 };
  let best = "16:9", bestDiff = Infinity;
  for (const key in candidates) {
    const diff = Math.abs(ratio - candidates[key]);
    if (diff < bestDiff) { best = key; bestDiff = diff; }
  }
  return best;
}

// Loads an image file and returns its natural width/height
function getImageDimensions(file) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    const url = URL.createObjectURL(file);
    img.onload = () => {
      resolve({ w: img.naturalWidth, h: img.naturalHeight });
      URL.revokeObjectURL(url);
    };
    img.onerror = () => {
      URL.revokeObjectURL(url);
      reject(new Error("فایل انتخاب‌شده یک تصویر معتبر نیست."));
    };
    img.src = url;
  });
}

// Local (client-side only) mirror of on_image_upload()/on_highres_toggle().
// Used for instant UI feedback and as a fallback if the server-side sync
// call (syncDurationWithServer) can't be resolved for some reason.
async function syncResolutionToImage() {
  const fileInput = document.getElementById('imageFile');
  const highRes = document.getElementById('highRes').checked;
  const tier = highRes ? "high" : "low";
  const hint = document.getElementById('aspectHint');
  const durationInput = document.getElementById('duration');

  let aspect = "16:9";
  if (fileInput.files.length > 0) {
    try {
      const { w, h } = await getImageDimensions(fileInput.files[0]);
      aspect = detectAspectRatio(w, h);
      hint.textContent = `تصویر شما ${w}×${h} است → نزدیک‌ترین نسبت تشخیص داده‌شده: ${aspect}`;
    } catch (err) {
      hint.textContent = err.message;
      return;
    }
  } else {
    hint.textContent = "اگر تصویری آپلود کنید، عرض/ارتفاع به‌صورت خودکار بر اساس نسبت ابعاد همان تصویر تنظیم می‌شود.";
  }

  const [w, h] = RESOLUTIONS[tier][aspect];
  document.getElementById('width').value = w;
  document.getElementById('height').value = h;

  const maxDur = highRes ? 15 : 35;
  durationInput.max = maxDur;
  if (parseFloat(durationInput.value) > maxDur) durationInput.value = maxDur;
}

document.getElementById('imageFile').addEventListener('change', syncResolutionToImage);
document.getElementById('highRes').addEventListener('change', syncResolutionToImage);
// Run once on load so the "کیفیت بالا" default (checked) and the duration
// max attribute agree with each other from the very first render.
window.addEventListener('DOMContentLoaded', syncResolutionToImage);

// Reads a component's type from /config given its id
function getComponentType(config, id) {
  const comp = (config.components || []).find(c => c.id === id);
  return comp ? (comp.type || "").toLowerCase() : null;
}

// Discover the fn_index for the generate_video endpoint.
// Strategy 1: /gradio_api/info — match by parameter/return component types.
// Strategy 2: /config dependencies — match by exact input count + component types.
// If more than one candidate remains, throw a detailed error listing all
// candidates so the user can fill in the manual override field.
async function resolveFnIndex(base) {
  const manual = document.getElementById('fnIndexOverride').value.trim();
  if (manual !== "") return parseInt(manual, 10);

  // --- Strategy 1: /gradio_api/info ---
  try {
    const infoRes = await fetch(base + "/gradio_api/info", { headers: authHeaders() });
    if (infoRes.ok) {
      const info = await infoRes.json();
      const unnamed = info.unnamed_endpoints || {};
      const infoCandidates = [];
      for (const key in unnamed) {
        const ep = unnamed[key];
        const params = ep.parameters || [];
        if (params.length !== 10) continue;
        const firstComp = (params[0].component || params[0].type?.type || "").toLowerCase();
        const returns = ep.returns || [];
        const returnComps = returns.map(r => (r.component || r.type?.type || "").toLowerCase());
        if (firstComp.includes("image") && returnComps.some(t => t.includes("video"))) {
          infoCandidates.push(parseInt(key, 10));
        }
      }
      if (infoCandidates.length === 1) return infoCandidates[0];
    }
  } catch (e) {
    // /gradio_api/info not available on this Gradio version — fall through to /config
  }

  // --- Strategy 2: /config dependencies ---
  const cfgRes = await fetch(base + "/config", { headers: authHeaders() });
  if (!cfgRes.ok) {
    throw new Error(`خطا در خواندن /config: HTTP ${cfgRes.status} ${cfgRes.statusText} — ${await safeText(cfgRes)}`);
  }
  const config = await cfgRes.json();

  const byApiName = config.dependencies.find(d => d.api_name === "generate_video" || d.api_name === "/generate_video");
  if (byApiName) return byApiName.id;

  const exactLen = config.dependencies.filter(d => Array.isArray(d.inputs) && d.inputs.length === 10);
  const refined = exactLen.filter(d => {
    const firstType = getComponentType(config, d.inputs[0]);
    const outputTypes = (d.outputs || []).map(id => getComponentType(config, id));
    return firstType === "image" && outputTypes.includes("video");
  });

  const finalCandidates = refined.length > 0 ? refined : exactLen;

  if (finalCandidates.length === 1) return finalCandidates[0].id;

  if (finalCandidates.length === 0) {
    throw new Error(
      "هیچ اندپوینتی با ۱۰ ورودی و خروجی ویدیو در /config یا /gradio_api/info پیدا نشد. " +
      "لطفاً fn_index را دستی وارد کنید (با باز کردن " + base + "/config در مرورگر و جست‌وجوی generate_video در دپندنسی‌ها).");
  }

  const ids = finalCandidates.map(d => d.id).join(", ");
  throw new Error(
    `چند اندپوینت مشابه پیدا شد (id ها: ${ids}) و تشخیص خودکار نتوانست یکی را قطعی انتخاب کند. ` +
    `لطفاً یکی از این مقادیر را در فیلد «fn_index دستی» وارد کنید و دوباره تلاش کنید.`
  );
}

// Discover CANDIDATE fn_index values for on_image_upload / on_highres_toggle
// (both share the exact same signature — inputs=[input_image, high_res,
// duration], outputs=[width, height, duration]). We deliberately return a
// LIST, ranked by confidence, instead of blindly trusting the first shape
// match: shape-based matching (3 in / 3 out, image+checkbox) can collide
// with unrelated dependencies, which is what silently broke the previous
// version of this file. syncDurationWithServer() below tries each candidate
// in turn until one actually works.
async function resolveToggleFnIndexCandidates(base) {
  const manual = document.getElementById('fnIndexToggleOverride').value.trim();
  if (manual !== "") return [parseInt(manual, 10)];

  const cfgRes = await fetch(base + "/config", { headers: authHeaders() });
  if (!cfgRes.ok) {
    throw new Error(`خطا در خواندن /config: HTTP ${cfgRes.status} ${cfgRes.statusText} — ${await safeText(cfgRes)}`);
  }
  const config = await cfgRes.json();
  const ordered = [];
  const seen = new Set();
  const push = (id) => { if (id != null && !seen.has(id)) { seen.add(id); ordered.push(id); } };

  // Strategy A: exact api_name match (Gradio auto-derives api_name from the
  // Python function name — on_image_upload / on_highres_toggle — unless it
  // was explicitly disabled).
  for (const d of config.dependencies) {
    const name = (d.api_name || "").replace(/^\//, "");
    if (name === "on_highres_toggle" || name === "on_image_upload") push(d.id);
  }

  // Strategy B: find the actual "کیفیت بالا" checkbox component by its label,
  // then find whichever dependency is triggered by THAT component's
  // "change" event. This is the most reliable signal since it doesn't rely
  // on guessing input/output shapes at all.
  const checkboxIds = (config.components || [])
    .filter(c => (c.props?.label || "").includes("کیفیت بالا") || (c.type || "").toLowerCase() === "checkbox")
    .map(c => c.id);
  for (const d of config.dependencies) {
    const targets = d.targets || [];
    const targetIds = targets.map(t => Array.isArray(t) ? t[0] : t);
    const trigger = d.trigger || (Array.isArray(targets[0]) ? targets[0][1] : null);
    const triggersOnChange = trigger ? trigger === "change" : true; // some configs omit trigger name
    if (triggersOnChange && targetIds.some(id => checkboxIds.includes(id))) push(d.id);
  }

  // Strategy C: shape-based fallback (3 inputs / 3 outputs, first=image,
  // second=checkbox) — collect ALL matches, not just the first.
  const exactLen = config.dependencies.filter(d => Array.isArray(d.inputs) && d.inputs.length === 3 && Array.isArray(d.outputs) && d.outputs.length === 3);
  const refined = exactLen.filter(d => {
    const firstType = getComponentType(config, d.inputs[0]);
    const secondType = getComponentType(config, d.inputs[1]);
    return firstType === "image" && secondType === "checkbox";
  });
  for (const d of (refined.length > 0 ? refined : exactLen)) push(d.id);

  if (ordered.length === 0) {
    throw new Error(
      "اندپوینت به‌روزرسانی وضوح/مدت (on_image_upload / on_highres_toggle) در /config پیدا نشد. " +
      "لطفاً " + base + "/config را در مرورگر باز کنید، دنبال api_name های on_highres_toggle یا on_image_upload بگردید و id آن را در فیلد «fn_index دستی به‌روزرسانی وضوح/مدت» وارد کنید."
    );
  }
  return ordered;
}

// 2. Upload the image file (if any) and return a Gradio FileData object
async function uploadImage(base, file) {
  const form = new FormData();
  form.append("files", file);
  const res = await fetch(base + "/gradio_api/upload", {
    method: "POST",
    headers: authHeaders(),
    body: form
  });
  if (!res.ok) {
    throw new Error(`خطا در آپلود تصویر: HTTP ${res.status} ${res.statusText} — ${await safeText(res)}`);
  }
  const paths = await res.json(); // e.g. ["tmp/xxxx/file.jpg"]
  return {
    path: paths[0],
    orig_name: file.name,
    meta: { _type: "gradio.FileData" }
  };
}

// 3. Join the queue
async function joinQueue(base, fnIndex, data, session_hash) {
  const res = await fetch(base + "/gradio_api/queue/join", {
    method: "POST",
    headers: { "Content-Type": "application/json", ...authHeaders() },
    body: JSON.stringify({ data, fn_index: fnIndex, session_hash })
  });
  if (!res.ok) {
    throw new Error(`خطا در پیوستن به صف: HTTP ${res.status} ${res.statusText} — ${await safeText(res)}`);
  }
  return res.json();
}

// 4. Stream results until completion, surfacing the exact server-side error
// message when generation fails instead of a generic "خطا در ساخت".
function streamResult(base, session_hash, onEvent) {
  return new Promise((resolve, reject) => {
    const es = new EventSource(base + "/gradio_api/queue/data?session_hash=" + session_hash);
    es.onmessage = (e) => {
      let msg;
      try {
        msg = JSON.parse(e.data);
      } catch (err) {
        return; // non-JSON keepalive line
      }
      onEvent(msg);

      if (msg.msg === "process_completed") {
        es.close();
        resolve(msg);
      } else if (msg.msg === "unexpected_error") {
        es.close();
        reject(new Error("خطای غیرمنتظره سمت سرور: " + (msg.message || JSON.stringify(msg))));
      }
    };
    es.onerror = () => {
      const state = es.readyState; // 0=connecting, 1=open, 2=closed
      es.close();
      reject(new Error(
        "اتصال جریان داده (SSE) قطع شد یا برقرار نشد (readyState=" + state + "). " +
        "ممکن است session_hash نامعتبر باشد، اسپیس در حال sleep باشد، یا CORS مسدود کرده باشد."
      ));
    };
  });
}

// Replays the exact same event the real Space UI fires when you check/uncheck
// "کیفیت بالا" (high_res.change → on_highres_toggle) or upload an image
// (input_image.change → on_image_upload), using the SAME session_hash that
// generate_video will use right after. This is what actually raises the
// duration Slider's allowed maximum from 15 to 35 for a low-res generation —
// simply sending duration=20 in the generate_video payload without this step
// is not enough, because the Slider component's max is still the default 15
// declared in app.py for a session that never triggered that event.
async function syncDurationWithServer(base, imageData, highRes, duration, session_hash) {
  const candidates = await resolveToggleFnIndexCandidates(base);
  const errors = [];

  for (const fnIndex of candidates) {
    try {
      // Deliberately reuse the SAME session_hash that generate_video will be
      // called with right after — the whole point of this call is to update
      // server-side state *for that specific session*, so a different
      // session_hash here would accomplish nothing.
      await joinQueue(base, fnIndex, [imageData, highRes, duration], session_hash);
      const msg = await streamResult(base, session_hash, () => {});
      if (msg.success === false) {
        const detail = msg.output?.error || msg.error || JSON.stringify(msg.output ?? msg);
        errors.push(`fn_index=${fnIndex}: ${detail}`);
        continue;
      }
      const outputs = (msg.output?.data || []).map(unwrapValue);
      if (outputs.length === 3 && typeof outputs[2] === "number") {
        return { width: outputs[0], height: outputs[1], duration: outputs[2], fnIndex };
      }
      errors.push(`fn_index=${fnIndex}: خروجی غیرمنتظره — ${JSON.stringify(outputs)}`);
    } catch (e) {
      errors.push(`fn_index=${fnIndex}: ${e.message}`);
    }
  }

  throw new Error("هیچ‌کدام از اندپوینت‌های نامزد کار نکردند:\n" + errors.join("\n"));
}

async function generate() {
  const btn = document.getElementById('genBtn');
  const barwrap = document.getElementById('barwrap');
  const bar = document.getElementById('bar');
  const video = document.getElementById('outVideo');
  video.style.display = 'none';
  barwrap.style.display = 'block';
  bar.style.width = '5%';
  btn.disabled = true;

  try {
    const base = document.getElementById('spaceUrl').value.replace(/\/$/, '');
    const prompt = document.getElementById('prompt').value.trim();
    if (!prompt) throw new Error("لطفاً پرامپت را وارد کنید.");

    let duration = parseFloat(document.getElementById('duration').value);
    const seed = parseInt(document.getElementById('seed').value, 10);
    const randomizeSeed = document.getElementById('randomizeSeed').checked;
    const enhancePrompt = document.getElementById('enhancePrompt').checked;
    const highRes = document.getElementById('highRes').checked;
    let width = parseInt(document.getElementById('width').value, 10);
    let height = parseInt(document.getElementById('height').value, 10);
    const imageInput = document.getElementById('imageFile');

    setStatus("در حال یافتن اندپوینت API...");
    const fnIndex = await resolveFnIndex(base);

    let imageData = null;
    if (imageInput.files.length > 0) {
      setStatus("در حال آپلود تصویر...");
      imageData = await uploadImage(base, imageInput.files[0]);
    }

    // Use ONE session_hash for both the sync call and the generate call so
    // any server-side component state the sync call updates (in particular
    // the duration Slider's maximum, which is exactly why >15s failed
    // regardless of the high-res toggle before) is in effect when
    // generate_video runs.
    const session_hash = sessionHash();

    // Only bother with the sync round-trip when duration actually needs a
    // bound above the server's static default (>15s) — for anything <=15s
    // this step is unnecessary and skipping it is one less thing to fail.
    if (duration > 15) {
      setStatus("در حال همگام‌سازی وضوح/مدت با سرور (لازم چون بیشتر از ۱۵ ثانیه است)...");
      // IMPORTANT: this call must send a duration that is ALREADY within the
      // server's *current* bound (still 15 at this point), exactly like the
      // real UI does — the toggle fires with whatever the slider currently
      // shows (e.g. 10), THEN the bound becomes 35, and only THEN does the
      // user drag it up to 30 as a separate step. Sending the desired final
      // value (30) here gets rejected by the sync call's OWN input
      // validation before it ever has a chance to raise the bound — which
      // is exactly the error seen: it failed on the sync call itself, not
      // on generate_video.
      const safeDurationForSync = Math.min(duration, 15);
      const synced = await syncDurationWithServer(base, imageData, highRes, safeDurationForSync, session_hash);
      // width/height from the sync response are accurate (aspect+tier based,
      // unaffected by the duration placeholder above) — use them.
      width = synced.width; document.getElementById('width').value = width;
      height = synced.height; document.getElementById('height').value = height;
      // Do NOT take `duration` from synced here — it only reflects the safe
      // placeholder we just sent (e.g. 10), not the value the user actually
      // wants. Keep the user's original `duration` (e.g. 30); the server's
      // bound should now be raised to 35 so it will be accepted.
    }

    // Order matches the Python click handler's `inputs=[...]` list:
    // input_image, prompt, duration, enhance_prompt, seed, randomize_seed,
    // height, width, user_tier, last_gen_time
    const data = [
      imageData, prompt, duration, enhancePrompt,
      seed, randomizeSeed, height, width,
      "free", "0"
    ];

    setStatus("در حال پیوستن به صف پردازش...");
    await joinQueue(base, fnIndex, data, session_hash);

    bar.style.width = '20%';
    const finalMsg = await streamResult(base, session_hash, (msg) => {
      if (msg.msg === "estimation") {
        setStatus("در صف انتظار... موقعیت: " + (msg.rank ?? "?"));
      } else if (msg.msg === "process_starts") {
        setStatus("در حال رندر ویدیو (ممکن است کمی طول بکشد)...");
        bar.style.width = '50%';
      } else if (msg.msg === "progress") {
        bar.style.width = '75%';
      }
    });

    if (finalMsg.success === false) {
      const detail = finalMsg.output?.error
        || finalMsg.error
        || (finalMsg.output ? JSON.stringify(finalMsg.output) : JSON.stringify(finalMsg));
      throw new Error("پردازش با خطا مواجه شد — جزئیات سرور: " + detail);
    }

    const outputs = finalMsg.output?.data;
    if (!outputs || !outputs[0]) {
      throw new Error(
        "خروجی ویدیو در پاسخ سرور یافت نشد (احتمالاً پرامپت رد شده یا محدودیت IP اعمال شده). " +
        "پاسخ کامل سرور: " + JSON.stringify(finalMsg.output ?? finalMsg)
      );
    }

    const videoFile = outputs[0];
    let videoUrl = videoFile.url || (videoFile.path ? base + "/gradio_api/file=" + videoFile.path : null);
    if (!videoUrl) throw new Error("آدرس ویدیوی خروجی قابل استخراج نبود.");

    bar.style.width = '100%';
    video.src = videoUrl;
    video.style.display = 'block';
    setStatus("ویدیو با موفقیت تولید شد ✅  (Seed: " + (outputs[1] ?? seed) + ")", "ok");

  } catch (err) {
    console.error(err);
    setStatus("❌ خطا: " + (err && err.message ? err.message : String(err)), "err");
  } finally {
    btn.disabled = false;
    setTimeout(() => { barwrap.style.display = 'none'; bar.style.width = '0%'; }, 1500);
  }
}
</script>
</body>
</html>