Upload 2 files

ltx_director.js

@@ -528,6 +528,7 @@ if (!document.getElementById("prompt-relay-styles")) {
 // --- Icons ---
 const ICONS = {
   upload: `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>`,
+  link: `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.07 0l3.54-3.54a5 5 0 0 0-7.07-7.07L11.5 4.43"></path><path d="M14 11a5 5 0 0 0-7.07 0L3.39 14.54a5 5 0 0 0 7.07 7.07l2.04-2.04"></path></svg>`,
   audio: `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>`,
   trash: `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>`,
   text: `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"></polyline><line x1="9" y1="20" x2="15" y2="20"></line><line x1="12" y1="4" x2="12" y2="20"></line></svg>`,
@@ -792,10 +793,11 @@ class TimelineEditor {
 
   loadImages() {
     for (const seg of this.timeline.segments) {
-      if (seg.imageB64 && !seg.imgObj) {
+      const imageSrc = seg.imageB64 || seg.imageUrl;
+      if (imageSrc && !seg.imgObj) {
         seg.imgObj = new Image();
         seg.imgObj.onload = () => this.render();
-        seg.imgObj.src = seg.imageB64;
+        seg.imgObj.src = imageSrc;
       }
     }
   }
@@ -868,11 +870,21 @@ class TimelineEditor {
     uploadBtn.innerHTML = `${ICONS.upload} Add Image`;
     uploadBtn.addEventListener("click", () => this.fileInput.click());
 
+    const imageUrlBtn = document.createElement("button");
+    imageUrlBtn.className = "pr-btn";
+    imageUrlBtn.innerHTML = `${ICONS.link} Add Image URL`;
+    imageUrlBtn.addEventListener("click", () => this.promptAddImageUrl());
+
     const uploadAudioBtn = document.createElement("button");
     uploadAudioBtn.className = "pr-btn";
     uploadAudioBtn.innerHTML = `${ICONS.audio} Add Audio`;
     uploadAudioBtn.addEventListener("click", () => this.audioFileInput.click());
 
+    const audioUrlBtn = document.createElement("button");
+    audioUrlBtn.className = "pr-btn";
+    audioUrlBtn.innerHTML = `${ICONS.link} Add Audio URL`;
+    audioUrlBtn.addEventListener("click", () => this.promptAddAudioUrl());
+
     const addTextBtn = document.createElement("button");
     addTextBtn.className = "pr-btn";
     addTextBtn.innerHTML = `${ICONS.text} Add Text`;
@@ -886,8 +898,10 @@ class TimelineEditor {
     actionGroup.appendChild(this.fileInput);
     actionGroup.appendChild(this.audioFileInput);
     actionGroup.appendChild(uploadBtn);
+    actionGroup.appendChild(imageUrlBtn);
     actionGroup.appendChild(addTextBtn);
     actionGroup.appendChild(uploadAudioBtn);
+    actionGroup.appendChild(audioUrlBtn);
     actionGroup.appendChild(deleteBtn);
     toolbar.appendChild(actionGroup);
 
@@ -1408,6 +1422,215 @@ class TimelineEditor {
     return { x, y };
   }
 
+  normalizeRemoteUrl(rawUrl) {
+    const value = (rawUrl || "").trim();
+    if (!value) return null;
+    try {
+      const parsed = new URL(value);
+      if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+        window.alert("Only http:// and https:// URLs are supported.");
+        return null;
+      }
+      return parsed.href;
+    } catch (err) {
+      window.alert("Please enter a valid URL.");
+      return null;
+    }
+  }
+
+  getRemoteFileName(url, fallback) {
+    try {
+      const parsed = new URL(url);
+      const name = decodeURIComponent(parsed.pathname.split("/").filter(Boolean).pop() || "");
+      return name || fallback;
+    } catch (err) {
+      return fallback;
+    }
+  }
+
+  promptAddImageUrl(targetFrameStart = null, explicitLength = null) {
+    const url = this.normalizeRemoteUrl(window.prompt("Paste image URL:", ""));
+    if (!url) return;
+    this.handleImageUrl(url, targetFrameStart, explicitLength);
+  }
+
+  promptAddAudioUrl(targetFrameStart = null) {
+    const url = this.normalizeRemoteUrl(window.prompt("Paste audio URL:", ""));
+    if (!url) return;
+    this.handleAudioUrl(url, targetFrameStart);
+  }
+
+  _resolveNewSegmentStart(targetArray, newLength, targetFrameStart) {
+    let newStart = targetFrameStart;
+
+    if (newStart === null) {
+      newStart = 0;
+      targetArray.sort((a, b) => a.start - b.start);
+      for (let i = 0; i < targetArray.length; i++) {
+        let seg = targetArray[i];
+        if (newStart + newLength <= seg.start) break;
+        newStart = Math.max(newStart, seg.start + seg.length);
+      }
+      return newStart;
+    }
+
+    const currentDuration = this.getVisualDurationFrames();
+    let tempId = "TEMP_" + Date.now();
+    targetArray.push({ id: tempId, start: newStart, length: newLength, type: "temp" });
+    let result = this._applyCenterDragPhysics(targetArray, tempId, newStart, newStart + newLength / 2, currentDuration, currentDuration, 1);
+
+    for (let shiftedSeg of result) {
+      let original = targetArray.find(s => s.id === shiftedSeg.id);
+      if (original) {
+        original.start = shiftedSeg.resolvedStart !== undefined ? shiftedSeg.resolvedStart : shiftedSeg.start;
+      }
+    }
+
+    let tempSeg = targetArray.find(s => s.id === tempId);
+    newStart = tempSeg ? tempSeg.start : newStart;
+    const tempIndex = targetArray.findIndex(s => s.id === tempId);
+    if (tempIndex !== -1) targetArray.splice(tempIndex, 1);
+    return newStart;
+  }
+
+  _buildAudioPeaks(audioBuffer) {
+    const channelData = audioBuffer.getChannelData(0);
+    const peaks = [];
+    const numPeaks = 200;
+    const step = Math.max(1, Math.floor(channelData.length / numPeaks));
+    for (let i = 0; i < numPeaks; i++) {
+      let max = 0;
+      const start = i * step;
+      const end = Math.min(channelData.length, start + step);
+      for (let j = start; j < end; j++) {
+        const val = Math.abs(channelData[j]);
+        if (val > max) max = val;
+      }
+      peaks.push(max);
+    }
+    return peaks;
+  }
+
+  async _loadRemoteAudioInfo(audioUrl) {
+    try {
+      const resp = await fetch(audioUrl);
+      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+      const arrayBuffer = await resp.arrayBuffer();
+      const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+      const audioBuffer = await audioCtx.decodeAudioData(arrayBuffer);
+      return {
+        duration: audioBuffer.duration,
+        peaks: this._buildAudioPeaks(audioBuffer),
+      };
+    } catch (err) {
+      console.warn("[PromptRelay] Audio URL waveform load failed; falling back to metadata/default length.", err);
+    }
+
+    try {
+      const duration = await new Promise((resolve, reject) => {
+        const audio = document.createElement("audio");
+        const timeoutId = setTimeout(() => {
+          audio.removeAttribute("src");
+          reject(new Error("Timed out while reading audio metadata."));
+        }, 10000);
+        audio.preload = "metadata";
+        audio.onloadedmetadata = () => {
+          clearTimeout(timeoutId);
+          resolve(Number.isFinite(audio.duration) && audio.duration > 0 ? audio.duration : 1);
+        };
+        audio.onerror = () => {
+          clearTimeout(timeoutId);
+          reject(new Error("Could not read audio metadata."));
+        };
+        audio.src = audioUrl;
+      });
+      return { duration, peaks: [] };
+    } catch (err) {
+      console.warn("[PromptRelay] Audio URL metadata load failed; using a 1 second placeholder.", err);
+      return { duration: 1, peaks: [] };
+    }
+  }
+
+  async handleImageUrl(imageUrl, targetFrameStart = null, explicitLength = null) {
+    const normalizedUrl = this.normalizeRemoteUrl(imageUrl);
+    if (!normalizedUrl) return;
+
+    const frameRate = this.getFrameRate();
+    const newLength = explicitLength !== null ? explicitLength : frameRate * 1;
+
+    await new Promise((resolve) => {
+      const displayImg = new Image();
+      let didCommit = false;
+
+      const commit = (imgObj = null) => {
+        if (didCommit) return;
+        didCommit = true;
+
+        let newStart = this._resolveNewSegmentStart(this.timeline.segments, newLength, targetFrameStart);
+        const seg = {
+          id: Date.now().toString() + Math.random().toString(36).substr(2, 5),
+          start: newStart,
+          length: newLength,
+          prompt: "",
+          type: "image",
+          imageUrl: normalizedUrl,
+          imageB64: normalizedUrl
+        };
+
+        if (imgObj) seg.imgObj = imgObj;
+
+        this.timeline.segments.push(seg);
+        this.timeline.segments.sort((a, b) => a.start - b.start);
+        this.selectionType = "image";
+        this.selectedIndex = this.timeline.segments.findIndex(s => s.id === seg.id);
+
+        this.updateUIFromSelection();
+        this.commitChanges(true);
+        this.render();
+        resolve();
+      };
+
+      displayImg.onload = () => commit(displayImg);
+      displayImg.onerror = () => {
+        console.warn("[PromptRelay] Image URL preview failed; saving URL for backend execution.", normalizedUrl);
+        commit(null);
+      };
+      displayImg.src = normalizedUrl;
+    });
+  }
+
+  async handleAudioUrl(audioUrl, targetFrameStart = null) {
+    const normalizedUrl = this.normalizeRemoteUrl(audioUrl);
+    if (!normalizedUrl) return;
+
+    const frameRate = this.getFrameRate();
+    const info = await this._loadRemoteAudioInfo(normalizedUrl);
+    const clipFrames = Math.max(1, Math.ceil(info.duration * frameRate));
+    const newLength = clipFrames;
+    let newStart = this._resolveNewSegmentStart(this.timeline.audioSegments, newLength, targetFrameStart);
+
+    const seg = {
+      id: Date.now().toString() + Math.random().toString(36).substr(2, 5),
+      type: "audio",
+      start: newStart,
+      length: newLength,
+      trimStart: 0,
+      audioDurationFrames: clipFrames,
+      audioUrl: normalizedUrl,
+      fileName: this.getRemoteFileName(normalizedUrl, "remote-audio"),
+      waveformPeaks: info.peaks
+    };
+
+    this.timeline.audioSegments.push(seg);
+    this.timeline.audioSegments.sort((a, b) => a.start - b.start);
+    this.selectionType = "audio";
+    this.selectedIndex = this.timeline.audioSegments.findIndex(s => s.id === seg.id);
+
+    this.updateUIFromSelection();
+    this.commitChanges(true);
+    this.render();
+  }
+
   // --- Async Image Upload Logic (Handles multiple images simultaneously) ---
   async handleImageUpload(files, targetFrameStart = null, explicitLength = null) {
     const frameRate = this.getFrameRate();
@@ -2947,7 +3170,8 @@ class TimelineEditor {
     menu.style.left = `${clientX + 6}px`;
     menu.style.top = `${clientY - 10}px`;
 
-    const isImage = trackType !== "audio" && trackType !== "text" && seg.imageB64;
+    const imageSrc = seg.imageB64 || seg.imageUrl;
+    const isImage = trackType !== "audio" && trackType !== "text" && imageSrc;
 
     if (isImage) {
       const copyBtn = document.createElement("button");
@@ -2955,7 +3179,7 @@ class TimelineEditor {
       copyBtn.innerHTML = `Copy Image`;
       copyBtn.onclick = async () => {
         try {
-          const res = await fetch(seg.imageB64);
+          const res = await fetch(imageSrc);
           const blob = await res.blob();
           await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
         } catch (err) {
@@ -2970,7 +3194,7 @@ class TimelineEditor {
       saveBtn.innerHTML = `Save Image`;
       saveBtn.onclick = () => {
         const a = document.createElement("a");
-        a.href = seg.imageB64;
+        a.href = imageSrc;
         a.download = "timeline_image.jpg";
         a.click();
         this.dismissContextMenu();
@@ -2983,7 +3207,7 @@ class TimelineEditor {
       openBtn.onclick = () => {
         const win = window.open();
         if (win) {
-          win.document.write(`<body style="margin:0;display:flex;justify-content:center;align-items:center;background:#0e0e0e;height:100vh;"><img style="max-width:100%;max-height:100%;" src="${seg.imageB64}" /></body>`);
+          win.document.write(`<body style="margin:0;display:flex;justify-content:center;align-items:center;background:#0e0e0e;height:100vh;"><img style="max-width:100%;max-height:100%;" src="${imageSrc}" /></body>`);
           win.document.close();
         }
         this.dismissContextMenu();
@@ -3117,6 +3341,34 @@ class TimelineEditor {
         fi.click();
       };
       menu.appendChild(imgBtn);
+
+      const imgUrlBtn = document.createElement("button");
+      imgUrlBtn.className = "pr-gap-menu-btn";
+      imgUrlBtn.innerHTML = `${ICONS.link} Image URL Segment`;
+      imgUrlBtn.onclick = () => {
+        this.dismissContextMenu();
+        const gapLength = gap.frameEnd - gap.frameStart;
+        this.promptAddImageUrl(gap.frameStart, gapLength);
+      };
+      menu.appendChild(imgUrlBtn);
+    } else {
+      const audioBtn = document.createElement("button");
+      audioBtn.className = "pr-gap-menu-btn";
+      audioBtn.innerHTML = `${ICONS.audio} Audio Segment`;
+      audioBtn.onclick = () => {
+        this.dismissContextMenu();
+        this.promptAddAudioInGap(gap.frameStart, gap.frameEnd);
+      };
+      menu.appendChild(audioBtn);
+
+      const audioUrlBtn = document.createElement("button");
+      audioUrlBtn.className = "pr-gap-menu-btn";
+      audioUrlBtn.innerHTML = `${ICONS.link} Audio URL Segment`;
+      audioUrlBtn.onclick = () => {
+        this.dismissContextMenu();
+        this.promptAddAudioUrl(gap.frameStart);
+      };
+      menu.appendChild(audioUrlBtn);
     }
 
     document.body.appendChild(menu);
@@ -3165,6 +3417,17 @@ class TimelineEditor {
 
     menu.appendChild(textBtn);
     menu.appendChild(imgBtn);
+
+    const imgUrlBtn = document.createElement("button");
+    imgUrlBtn.className = "pr-gap-menu-btn";
+    imgUrlBtn.innerHTML = `${ICONS.link} Image URL Segment`;
+    imgUrlBtn.addEventListener("click", () => {
+      this.dismissGapMenu();
+      const gapLength = gap.frameEnd - gap.frameStart;
+      this.promptAddImageUrl(gap.frameStart, gapLength);
+    });
+    menu.appendChild(imgUrlBtn);
+
     const currentTrack = gap.track === "audio" ? "audio" : "image";
     if (this._copiedSegment && this._copiedSegmentTrack === currentTrack) {
       const pasteBtn = document.createElement("button");
@@ -3678,6 +3941,10 @@ class TimelineEditor {
           const resp = await fetch(audioUrl);
           const arrayBuffer = await resp.arrayBuffer();
           audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer);
+        } else if (seg.audioUrl) {
+          const resp = await fetch(seg.audioUrl);
+          const arrayBuffer = await resp.arrayBuffer();
+          audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer);
         } else if (seg.audioB64) {
           const binaryString = window.atob(seg.audioB64);
           const len = binaryString.length;

ltx_director.py

@@ -3,6 +3,8 @@ import json
 import base64
 import io as _io
 import math
+import urllib.parse
+import urllib.request
 
 import numpy as np
 import torch
@@ -31,8 +33,27 @@ log = logging.getLogger(__name__)
 GuideData = io.Custom("GUIDE_DATA")
 
 
+def _is_http_url(value: str) -> bool:
+    if not isinstance(value, str):
+        return False
+    try:
+        parsed = urllib.parse.urlparse(value.strip())
+        return parsed.scheme in ("http", "https") and bool(parsed.netloc)
+    except Exception:
+        return False
+
+
+def _download_url_bytes(url: str, timeout: int = 30) -> bytes:
+    req = urllib.request.Request(
+        url.strip(),
+        headers={"User-Agent": "ComfyUI-LTXDirector/1.0"},
+    )
+    with urllib.request.urlopen(req, timeout=timeout) as response:
+        return response.read()
+
+
 def _load_image_tensor(seg: dict) -> torch.Tensor:
-    """Decode an image from the ComfyUI input folder (if imageFile provided) or fallback to base64
+    """Decode an image from the ComfyUI input folder (if imageFile provided), URL, or fallback to base64
     to a ComfyUI-style image tensor of shape [1, H, W, 3], float32 in [0, 1]."""
     if seg.get("imageFile"):
         file_path = os.path.join(folder_paths.get_input_directory(), seg["imageFile"])
@@ -41,6 +62,16 @@ def _load_image_tensor(seg: dict) -> torch.Tensor:
             arr = np.array(img, dtype=np.float32) / 255.0
             return torch.from_numpy(arr).unsqueeze(0)
 
+    image_url = seg.get("imageUrl", "")
+    if _is_http_url(image_url):
+        try:
+            img_bytes = _download_url_bytes(image_url)
+            img = Image.open(_io.BytesIO(img_bytes)).convert("RGB")
+            arr = np.array(img, dtype=np.float32) / 255.0
+            return torch.from_numpy(arr).unsqueeze(0)
+        except Exception as e:
+            log.warning("[PromptRelay] Image URL load failed for %s: %s", image_url, e)
+
     b64_str = seg.get("imageB64", "")
     if not b64_str or b64_str.startswith("/view?"):
         return torch.zeros((1, 512, 512, 3), dtype=torch.float32)
@@ -183,6 +214,14 @@ def _build_combined_audio(timeline_data_str: str, duration_frames: int, frame_ra
             if os.path.exists(file_path):
                 with open(file_path, "rb") as f:
                     buffer = _io.BytesIO(f.read())
+
+        if not buffer and seg.get("audioUrl"):
+            audio_url = seg.get("audioUrl")
+            if _is_http_url(audio_url):
+                try:
+                    buffer = _io.BytesIO(_download_url_bytes(audio_url))
+                except Exception as e:
+                    log.warning("[PromptRelay] Audio URL load failed for %s: %s", audio_url, e)
         
         if not buffer and seg.get("audioB64"):
             b64 = seg.get("audioB64")
@@ -484,7 +523,7 @@ class LTXDirector(io.ComfyNode):
             img_segs = [
                 s for s in tdata.get("segments", [])
                 if s.get("type", "image") == "image"
-                and (s.get("imageFile") or s.get("imageB64"))
+                and (s.get("imageFile") or s.get("imageUrl") or s.get("imageB64"))
                 and int(s.get("start", 0)) < duration_frames  # exclude segments fully outside duration
             ]
             img_segs.sort(key=lambda s: s["start"])
@@ -658,4 +697,4 @@ NODE_CLASS_MAPPINGS = {
 
 NODE_DISPLAY_NAME_MAPPINGS = {
     "PromptRelayEncodeTimeline": "Prompt Relay Encode (Timeline)",
-}
+}