Upload app.py with huggingface_hub

app.py

@@ -0,0 +1,542 @@
+"""
+LTX 2.3 LoRA Space — UI Template
+=================================
+Dark-themed Gradio UI template for LTX 2.3 LoRA video generation.
+CPU-only preview — no model loaded, just the UI.
+
+Adapt this template:
+1. Edit LORA_* constants below
+2. Replace generate_video() with your actual pipeline
+3. Deploy on HF Space with or without ZeroGPU
+"""
+import os
+import sys
+import time
+import uuid
+import random
+from pathlib import Path
+
+import gradio as gr
+
+# ─────────────────────────────────────────────────────────────
+# CONFIG — EDIT THESE FOR YOUR LORA
+# ─────────────────────────────────────────────────────────────
+LORA_NAME = "Transition LoRA"
+LORA_DESCRIPTION = "Suaviza transições entre cenas com cortes cinematográficos fluidos."
+LORA_REPO = "joyfox/LTX-2.3-Transition-LORA"
+LORA_FILENAME = "ltx2.3-transition.safetensors"
+LORA_STRENGTH_DEFAULT = 0.8
+LORA_STRENGTH_MIN = 0.0
+LORA_STRENGTH_MAX = 2.0
+
+SPACE_AUTHOR = "artificialguybr"
+SPACE_NAME = "test-gui-ltx"
+HF_LINK = f"https://huggingface.co/{LORA_REPO}"
+GITHUB_LINK = "https://github.com/artificialguybr/ltx23-lora-transition"
+MODEL_LINK = "https://huggingface.co/Lightricks/LTX-2.3"
+
+MAX_SEED = 2147483647
+DEFAULT_PROMPT = "make this image come alive, cinematic motion, smooth camera movement"
+DEFAULT_DURATION = 6.0
+DEFAULT_SEED = 42
+
+RESOLUTION_MAP = {
+    "16:9": (768, 512),
+    "1:1": (512, 512),
+    "9:16": (512, 768),
+}
+
+# ─────────────────────────────────────────────────────────────
+# Custom UI Components
+# ─────────────────────────────────────────────────────────────
+
+class RadioAnimated(gr.HTML):
+    """Animated segmented radio (iOS pill selector)."""
+    def __init__(self, choices, value=None, **kwargs):
+        if not choices or len(choices) < 2:
+            raise ValueError("RadioAnimated needs at least 2 choices.")
+        if value is None:
+            value = choices[0]
+        uid = uuid.uuid4().hex[:8]
+        group_name = f"ra-{uid}"
+        inputs_html = "\n".join(
+            f'<input class="ra-input" type="radio" name="{group_name}" '
+            f'id="{group_name}-{i}" value="{c}">'
+            f'<label class="ra-label" for="{group_name}-{i}">{c}</label>'
+            for i, c in enumerate(choices)
+        )
+        html_template = f"""
+<div class="ra-wrap" data-ra="{uid}">
+  <div class="ra-inner">
+    <div class="ra-highlight"></div>
+    {inputs_html}
+  </div>
+</div>"""
+        js_on_load = r"""
+(function() {
+  var wrap, inner, highlight, inputs, labels, choices;
+  function init() {
+    wrap = element.querySelector('.ra-wrap');
+    if (!wrap) return;
+    inner = wrap.querySelector('.ra-inner');
+    highlight = wrap.querySelector('.ra-highlight');
+    inputs = Array.from(wrap.querySelectorAll('.ra-input'));
+    labels = Array.from(wrap.querySelectorAll('.ra-label'));
+    choices = inputs.map(function(i) { return i.value; });
+    if (choices.length === 0) return;
+    var PAD = 6;
+    var currentIdx = choices.indexOf(props.value) >= 0 ? choices.indexOf(props.value) : 0;
+    function setHighlightByIndex(idx) {
+      currentIdx = idx;
+      var lbl = labels[idx];
+      if (!lbl) return;
+      var innerRect = inner.getBoundingClientRect();
+      var lblRect = lbl.getBoundingClientRect();
+      highlight.style.width = lblRect.width + 'px';
+      highlight.style.transform = 'translateX(' + (lblRect.left - innerRect.left - PAD) + 'px)';
+    }
+    function setCheckedByValue(val, trigger) {
+      var idx = Math.max(0, choices.indexOf(val));
+      inputs.forEach(function(inp, i) { inp.checked = (i === idx); });
+      requestAnimationFrame(function() { setHighlightByIndex(idx); });
+      props.value = choices[idx];
+      if (trigger) trigger('change', props.value);
+    }
+    setCheckedByValue(props.value || choices[0], false);
+    inputs.forEach(function(inp) {
+      inp.addEventListener('change', function() { setCheckedByValue(inp.value, true); });
+    });
+    window.addEventListener('resize', function() { setHighlightByIndex(currentIdx); });
+  }
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else { init(); }
+  var last = props.value;
+  (function sync() {
+    if (props.value !== last) { last = props.value; setCheckedByValue(last, false); }
+    requestAnimationFrame(sync);
+  })();
+})();
+"""
+        super().__init__(value=value, html_template=html_template, js_on_load=js_on_load, **kwargs)
+
+
+class CameraDropdown(gr.HTML):
+    """Custom dropdown with icons per option."""
+    def __init__(self, choices, value=None, title="", **kwargs):
+        if value is None:
+            value = choices[0] if choices else ""
+        uid = uuid.uuid4().hex[:8]
+        items_html = "\n".join(
+            f'<div class="cd-item" data-value="{c}"><span class="cd-label">{c}</span></div>'
+            for c in choices
+        )
+        html_template = f"""
+<div class="cd-wrap" data-cd="{uid}">
+  <button type="button" class="cd-trigger" aria-haspopup="listbox">
+    <span class="cd-trigger-text">{value}</span>
+    <span class="cd-caret">&#x25BE;</span>
+  </button>
+  <div class="cd-menu" role="listbox" aria-hidden="true">
+    <div class="cd-title">{title}</div>
+    <div class="cd-items">{items_html}</div>
+  </div>
+</div>"""
+        js_on_load = r"""
+(function() {
+  function init() {
+    var wrap = element.querySelector('.cd-wrap');
+    if (!wrap) return;
+    var trigger = wrap.querySelector('.cd-trigger');
+    var menu = wrap.querySelector('.cd-menu');
+    var items = Array.from(wrap.querySelectorAll('.cd-item'));
+    var triggerText = wrap.querySelector('.cd-trigger-text');
+    trigger.addEventListener('click', function(e) {
+      e.stopPropagation();
+      var isOpen = menu.getAttribute('aria-hidden') === 'false';
+      document.querySelectorAll('.cd-menu[aria-hidden="false"]').forEach(function(m) {
+        m.setAttribute('aria-hidden', 'true');
+      });
+      if (!isOpen) menu.setAttribute('aria-hidden', 'false');
+    });
+    items.forEach(function(item) {
+      item.addEventListener('click', function() {
+        var val = item.getAttribute('data-value');
+        triggerText.textContent = val;
+        props.value = val;
+        trigger('change', val);
+        menu.setAttribute('aria-hidden', 'true');
+      });
+    });
+  }
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else { init(); }
+  document.addEventListener('click', function(e) {
+    document.querySelectorAll('.cd-menu[aria-hidden="false"]').forEach(function(menu) {
+      if (!menu.closest('.cd-wrap').contains(e.target)) {
+        menu.setAttribute('aria-hidden', 'true');
+      }
+    });
+  });
+  var last = props.value;
+  (function sync() {
+    var triggerText = element.querySelector('.cd-trigger-text');
+    if (triggerText && props.value !== last) {
+      last = props.value;
+      triggerText.textContent = last;
+    }
+    requestAnimationFrame(sync);
+  })();
+})();
+"""
+        super().__init__(value=value, html_template=html_template, js_on_load=js_on_load, **kwargs)
+
+
+# ─────────────────────────────────────────────────────────────
+# CSS — Dark theme
+# ─────────────────────────────────────────────────────────────
+CSS = """
+#col-container { margin: 0 auto; max-width: 1400px; padding: 0 16px; }
+#controls-col, #output-col {
+  background: rgba(255,255,255,0.03);
+  border-radius: 12px;
+  padding: 20px;
+  border: 1px solid rgba(255,255,255,0.06);
+}
+.space-header { text-align: center; padding: 16px 0 8px; }
+.space-header h1 {
+  font-size: 26px; font-weight: 800;
+  background: linear-gradient(135deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff);
+  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+  background-clip: text; margin: 0 0 6px;
+}
+.space-header .subtitle { color: rgba(255,255,255,0.5); font-size: 14px; margin: 0; }
+.header-links { display: flex; gap: 10px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
+.header-links a { text-decoration: none; }
+.ra-wrap {
+  display: inline-flex; background: rgba(255,255,255,0.05);
+  border-radius: 10px; padding: 4px; margin: 8px 0;
+  border: 1px solid rgba(255,255,255,0.08);
+}
+.ra-inner { position: relative; display: flex; gap: 2px; }
+.ra-highlight {
+  position: absolute; top: 0; height: 100%;
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  border-radius: 7px; transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), width 0.25s ease;
+  box-shadow: 0 2px 8px rgba(102,126,234,0.4);
+}
+.ra-input { display: none; }
+.ra-label {
+  position: relative; z-index: 1; padding: 8px 20px; cursor: pointer;
+  font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.5);
+  transition: color 0.2s; user-select: none; white-space: nowrap;
+}
+.ra-input:checked + .ra-label { color: #fff; }
+.cd-wrap { position: relative; display: inline-block; font-family: inherit; }
+.cd-trigger {
+  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
+  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
+  border-radius: 8px; cursor: pointer; color: rgba(255,255,255,0.8);
+  font-size: 13px; font-family: inherit; transition: all 0.2s; min-width: 100px;
+}
+.cd-trigger:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.2); }
+.cd-caret { margin-left: auto; font-size: 11px; opacity: 0.6; }
+.cd-menu {
+  position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%;
+  background: #1a1a2e; border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 8px; padding: 4px; z-index: 100;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.4); display: none;
+}
+.cd-menu:not([aria-hidden="true"]) { display: block; }
+.cd-title {
+  padding: 6px 10px; font-size: 11px; font-weight: 600;
+  color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.5px;
+}
+.cd-item {
+  padding: 8px 12px; cursor: pointer; border-radius: 6px;
+  font-size: 13px; color: rgba(255,255,255,0.7);
+  transition: background 0.15s, color 0.15s;
+}
+.cd-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
+.lora-badge {
+  display: inline-flex; align-items: center; gap: 6px;
+  background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.15));
+  border: 1px solid rgba(102,126,234,0.3); border-radius: 20px;
+  padding: 4px 12px; font-size: 12px; color: rgba(255,255,255,0.7); margin: 6px 0;
+}
+.lora-badge .dot {
+  width: 6px; height: 6px; border-radius: 50%; background: #667eea;
+  animation: pulse 2s infinite;
+}
+@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
+.btn-generate {
+  background: linear-gradient(135deg, #ff416c, #ff4b2b, #ff9f43) !important;
+  background-size: 200% 200% !important;
+  animation: gradientShift 3s ease infinite !important;
+  border: none !important; color: white !important;
+  font-weight: 700 !important; font-size: 16px !important;
+  padding: 14px 28px !important; border-radius: 12px !important;
+  cursor: pointer !important; width: 100%;
+  box-shadow: 0 4px 15px rgba(255,65,108,0.4) !important;
+  transition: transform 0.2s, box-shadow 0.2s !important;
+}
+.btn-generate:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(255,65,108,0.5) !important;
+}
+@keyframes gradientShift {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+.gen-meta-card {
+  margin-top: 12px; padding: 12px 16px;
+  background: rgba(255,255,255,0.03);
+  border: 1px solid rgba(255,255,255,0.06); border-radius: 10px;
+}
+.meta-chips { display: flex; flex-wrap: wrap; gap: 8px; }
+.meta-chip {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 4px 10px; background: rgba(255,255,255,0.05);
+  border-radius: 6px; font-size: 12px; color: rgba(255,255,255,0.7);
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+.meta-chip b {
+  color: rgba(255,255,255,0.35); font-weight: 500;
+  font-family: system-ui, sans-serif; font-size: 10px;
+  text-transform: uppercase; letter-spacing: 0.4px;
+}
+.advanced-section { margin-top: 16px; }
+.space-footer {
+  text-align: center; padding: 20px 0;
+  color: rgba(255,255,255,0.3); font-size: 12px;
+}
+.space-footer a { color: rgba(255,255,255,0.4); text-decoration: none; }
+.space-footer a:hover { color: rgba(255,255,255,0.7); }
+body, .gradio-container { background: #0d0d14 !important; }
+"""
+
+
+# ─────────────────────────────────────────────────────────────
+# Helpers
+# ─────────────────────────────────────────────────────────────
+def calc_frames(duration, fps=24.0):
+    raw = int(duration * fps) + 1
+    raw = max(raw, 9)
+    k = (raw - 1 + 7) // 8
+    return k * 8 + 1
+
+
+def apply_resolution(resolution):
+    w, h = RESOLUTION_MAP.get(resolution, (768, 512))
+    return int(w), int(h)
+
+
+def format_time(seconds):
+    secs = int(max(0, seconds))
+    if secs < 60:
+        return f"{secs}s"
+    return f"{secs // 60}m {secs % 60}s"
+
+
+def build_metadata_html(seed, width, height, duration, elapsed):
+    meta_parts = [
+        f'<span class="meta-chip"><b>Seed</b> {seed}</span>',
+        f'<span class="meta-chip"><b>Size</b> {width}×{height}</span>',
+        f'<span class="meta-chip"><b>Dur</b> {duration}s</span>',
+        f'<span class="meta-chip"><b>Time</b> {format_time(elapsed)}</span>',
+    ]
+    return f'<div class="gen-meta-card"><div class="meta-chips">{"".join(meta_parts)}</div></div>'
+
+
+# ─────────────────────────────────────────────────────────────
+# Generation function (mock — replace with real pipeline)
+# ─────────────────────────────────────────────────────────────
+def generate_video(
+    first_frame,
+    prompt: str,
+    duration: float,
+    lora_strength: float,
+    seed: int,
+    randomize_seed: bool,
+    width: int,
+    height: int,
+    resolution: str,
+    enhance_prompt: bool,
+    progress=gr.Progress(track_tqdm=True),
+):
+    """Mock generation — replace with real LTX 2.3 + LoRA pipeline."""
+    t0 = time.time()
+
+    if not prompt or not prompt.strip():
+        raise gr.Error("Please enter a prompt.")
+
+    current_seed = random.randint(0, MAX_SEED) if randomize_seed else int(seed)
+    num_frames = calc_frames(float(duration))
+
+    progress(0.1, desc="Preparing generation...")
+    time.sleep(0.3)
+    progress(0.3, desc=f"Generating {num_frames} frames...")
+    time.sleep(0.5)
+    progress(0.6, desc="Applying LoRA effect...")
+    time.sleep(0.4)
+    progress(0.9, desc="Finalizing video...")
+    time.sleep(0.3)
+
+    elapsed = time.time() - t0
+    meta_html = build_metadata_html(current_seed, width, height, duration, elapsed)
+
+    gr.Info("⚠️ This is a UI preview — no model loaded. Connect your LTX 2.3 pipeline here.")
+    return None, meta_html
+
+
+# ─────────────────────────────────────────────────────────────
+# Build UI
+# ─────────────────────────────────────────────────────────────
+def build_ui():
+    with gr.Blocks(title=f"LTX 2.3 — {LORA_NAME}") as demo:
+
+        # Header
+        gr.HTML(f"""
+        <div class="space-header">
+          <h1>✨ LTX 2.3 — {LORA_NAME}</h1>
+          <p class="subtitle">{LORA_DESCRIPTION}</p>
+          <div class="header-links">
+            <a href="{HF_LINK}" target="_blank">
+              <img src="https://img.shields.io/badge/HF-Model-FFD700?style=flat&logo=huggingface" alt="HF">
+            </a>
+            <a href="{MODEL_LINK}" target="_blank">
+              <img src="https://img.shields.io/badge/LTX-2.3%20Base-4D96FF?style=flat" alt="LTX 2.3">
+            </a>
+            <a href="{GITHUB_LINK}" target="_blank">
+              <img src="https://img.shields.io/badge/GitHub-Source-181717?style=flat&logo=github" alt="GitHub">
+            </a>
+          </div>
+        </div>
+        """)
+
+        with gr.Row():
+            with gr.Column(scale=1, elem_id="controls-col"):
+                mode_selector = RadioAnimated(
+                    choices=["Image-to-Video", "Interpolate"],
+                    value="Image-to-Video",
+                    elem_id="mode-selector",
+                )
+
+                first_frame = gr.Image(label="First Frame", type="filepath", height=280)
+                end_frame = gr.Image(label="Last Frame (for Interpolate)", type="filepath", height=140, visible=False)
+
+                prompt = gr.Textbox(
+                    label="Prompt", value=DEFAULT_PROMPT, lines=3,
+                    placeholder="Describe the motion and animation you want...",
+                )
+
+                gr.HTML(f"""
+                <div class="lora-badge">
+                  <span class="dot"></span>
+                  <span>🎬 {LORA_NAME}</span>
+                </div>
+                """)
+
+                lora_strength = gr.Slider(
+                    label="LoRA Strength",
+                    minimum=LORA_STRENGTH_MIN, maximum=LORA_STRENGTH_MAX,
+                    value=LORA_STRENGTH_DEFAULT, step=0.05,
+                    info="Blend weight for the LoRA effect (0 = base, higher = more LoRA)",
+                )
+
+                gr.HTML('<div style="display:flex;gap:10px;flex-wrap:wrap;margin:10px 0;">')
+
+                duration_ui = CameraDropdown(
+                    choices=["4s", "6s", "8s", "10s"], value="6s", title="Duration", elem_id="duration-ui",
+                )
+                duration = gr.Number(label="Duration (s)", value=DEFAULT_DURATION, visible=False)
+
+                resolution_ui = CameraDropdown(
+                    choices=["16:9", "1:1", "9:16"], value="16:9", title="Resolution", elem_id="resolution-ui",
+                )
+                width = gr.Number(label="Width", value=768, visible=False)
+                height = gr.Number(label="Height", value=512, visible=False)
+
+                gr.HTML('</div>')
+
+                generate_btn = gr.Button("✨ Generate Video", elem_classes="btn-generate")
+
+                gr.HTML('<div class="advanced-section">')
+                with gr.Accordion("⚙️ Advanced Settings", open=False):
+                    enhance_prompt = gr.Checkbox(label="Enhance Prompt with AI", value=True)
+                    seed = gr.Slider(label="Seed", minimum=0, maximum=MAX_SEED, value=DEFAULT_SEED, step=1)
+                    randomize_seed = gr.Checkbox(label="Randomize Seed", value=True)
+                gr.HTML('</div>')
+
+            with gr.Column(scale=1, elem_id="output-col"):
+                gr.Markdown("### 🎬 Output")
+                output_video = gr.Video(label="Generated Video", autoplay=True, loop=True, height=480)
+                metadata_display = gr.HTML(value="")
+
+                gr.HTML("""
+                <div style="margin-top:16px;padding:14px;background:rgba(255,255,255,0.03);border-radius:10px;border:1px solid rgba(255,255,255,0.06);">
+                  <div style="font-size:12px;color:rgba(255,255,255,0.4);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.5px;">📖 How to use</div>
+                  <ul style="font-size:13px;color:rgba(255,255,255,0.6);margin:0;padding-left:18px;line-height:1.8;">
+                    <li>Upload an image as first frame</li>
+                    <li>Write a detailed prompt describing the motion</li>
+                    <li>Adjust LoRA strength (higher = stronger effect)</li>
+                    <li>Choose duration and resolution</li>
+                    <li>Click <strong>Generate Video</strong></li>
+                  </ul>
+                </div>
+                """)
+
+        gr.HTML(f"""
+        <div class="space-footer">
+          Powered by <a href="{MODEL_LINK}" target="_blank">LTX 2.3</a> +
+          <a href="{HF_LINK}" target="_blank">{LORA_NAME}</a>
+          · Template by <a href="https://huggingface.co/{SPACE_AUTHOR}" target="_blank">{SPACE_AUTHOR}</a>
+        </div>
+        """)
+
+        # Event wiring
+        def on_mode_change(selected):
+            return gr.update(visible=(selected == "Interpolate"))
+
+        mode_selector.change(fn=on_mode_change, inputs=mode_selector, outputs=end_frame)
+
+        def on_duration_change(val):
+            return float(val.replace("s", ""))
+
+        duration_ui.change(fn=on_duration_change, inputs=duration_ui, outputs=duration)
+
+        def on_resolution_change(val):
+            w, h = apply_resolution(val)
+            return w, h
+
+        resolution_ui.change(fn=on_resolution_change, inputs=resolution_ui, outputs=[width, height])
+
+        generate_btn.click(
+            fn=generate_video,
+            inputs=[first_frame, prompt, duration, lora_strength, seed, randomize_seed,
+                    width, height, resolution_ui, enhance_prompt],
+            outputs=[output_video, metadata_display],
+        )
+
+    return demo
+
+
+# ─────────────────────────────────────────────────────────────
+# Entry point
+# ─────────────────────────────────────────────────────────────
+if __name__ == "__main__":
+    print(f"\n{'='*60}")
+    print(f"LTX 2.3 — {LORA_NAME}")
+    print(f"Space: {SPACE_AUTHOR}/{SPACE_NAME}")
+    print(f"{'='*60}\n")
+
+    demo = build_ui()
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False,
+        css=CSS,
+        theme=gr.themes.Default(),
+    )