edit/build_full.py

"""
Build the FULL composition for the complete Mem0_1 tutorial (~752s output).
Source times -> output times using the segment list from build_cut.py.
"""
import json, re, sys
from pathlib import Path

TRANSCRIPT = Path(r"D:\PromptEngineer48\In-Progress\P11-Editor\edit\transcripts\Mem0_1.json")
HF_DIR     = Path(r"D:\PromptEngineer48\In-Progress\P11-Editor\edit\hf")
SKILL      = Path(r"C:\Users\palas\.claude\skills\screencast-hype")

sys.path.insert(0, str(SKILL / "scripts"))
from captions_html import build_captions

# ---- same segment list as build_cut.py ----
THRESHOLD = 0.30
PAD       = 0.08
FILLERS   = {"uh", "um"}
VIDEO_DUR = 805.5

data  = json.load(open(TRANSCRIPT, encoding="utf-8"))
words = [w for w in data["words"] if w.get("type") == "word"]
clean = [w for w in words if w["text"].strip().lower().rstrip(",.") not in FILLERS]

segs = []
s = e = None
for w in clean:
    if s is None:
        s, e = w["start"], w["end"]
    elif w["start"] - e <= THRESHOLD:
        e = w["end"]
    else:
        segs.append((max(0, s - PAD), e + PAD))
        s, e = w["start"], w["end"]
if s is not None:
    segs.append((max(0, s - PAD), e + PAD))

clamped = []
for a, b in segs:
    a = round(max(0.0, a), 4)
    b = round(min(VIDEO_DUR, b), 4)
    if clamped and a < clamped[-1][1]:
        a = clamped[-1][1]
    if b > a:
        clamped.append((a, b))
segs = clamped

def src_to_out(src_t):
    out_offset = 0.0
    for (a, b) in segs:
        if src_t <= a:
            return out_offset
        if src_t <= b:
            return out_offset + (src_t - a)
        out_offset += (b - a)
    return out_offset

# ---- full video duration ----
# Segment sum (~730s) is speech-only; actual base_cut.mp4 is 752.5s due to trailing content.
# Use actual file duration for data-duration so the video plays to completion.
TOTAL_DUR = 752.5
print(f"Total output duration: {TOTAL_DUR:.1f}s = {TOTAL_DUR/60:.1f}min")

# ---- timing constants ----
T_TITLE_IN  = 1.0
T_TITLE_OUT = 9.0
T_CHIP_IN   = src_to_out(15.0)
T_CHIP_OUT  = T_CHIP_IN + 8.0

# ---- chapter section cards ----
# Output times calibrated from base_cut.mp4 spot-checks:
#   95s: Mem0 slides ("THE FIX")   234s: file explorer / chapters ready
#  305s: MCP JSON setup           362s: /mcp 11 tools visible
#  410s: "ready to add memories"  478s: Jon Snow memory graph
#  632s: Jon Snow answering        711s: dashboard / wrap-up
CARD_DUR = 4.0
# (output_time, card_id, eyebrow_text, headline_html)
sec_out = [
    (95.0,  "sec1", "UNIVERSAL MEMORY LAYER",  "How It <span>Works</span>"),
    (234.0, "sec2", "MEM0.AI · FREE TIER",      "Account<br><span>Setup</span>"),
    (305.0, "sec3", "CLAUDE CODE MCP",           "Wiring<br><span>Mem0 In</span>"),
    (362.0, "sec4", "11 TOOLS AVAILABLE",        "MCP<br><span>Connected</span>"),
    (410.0, "sec5", "29 JON SNOW CHAPTERS",      "Ingesting<br><span>Memories</span>"),
    (478.0, "sec6", "GRAPH + VECTOR STORE",      "Memories<br><span>Stored</span>"),
    (632.0, "sec7", "THE MOMENT OF TRUTH",        "Ask<br><span>Jon Snow</span>"),
    (711.0, "sec8", "MEM0 + CLAUDE CODE",         "Ship It<br><span>Anywhere</span>"),
]

print("\nChapter card output times:")
for t_out, cid, eyebrow, _ in sec_out:
    print(f"  {cid}: {t_out:.1f}s  — {eyebrow}")

# Sanity: warn if any two cards overlap
for i in range(len(sec_out) - 1):
    t_end_i = sec_out[i][0] + CARD_DUR
    t_start_next = sec_out[i+1][0]
    if t_end_i > t_start_next:
        print(f"  WARNING: {sec_out[i][1]} ends {t_end_i:.1f}s, {sec_out[i+1][1]} starts {t_start_next:.1f}s — overlap!")

# ---- captions (full video) ----
raw_divs, raw_tweens = build_captions(words, start=0.0, end=VIDEO_DUR, per=2, map_time=src_to_out)

def filter_tweens_title(tweens_str):
    """Suppress individual caption tweens that fire during the title card window only."""
    lines = tweens_str.split("\n")
    out, skip = [], False
    for line in lines:
        m = re.search(r',(\d+\.\d+)\);$', line)
        t_val = float(m.group(1)) if m else None
        if t_val is not None and T_TITLE_IN <= t_val <= T_TITLE_OUT:
            skip = True
            continue
        if skip and "opacity:0" in line:
            skip = False
            continue
        skip = False
        out.append(line)
    return "\n".join(out)

def inject_set_resets(tweens_str):
    """Inject tl.set('.cap',{opacity:0}) 1ms before every caption entry to prevent overlap."""
    lines = tweens_str.split("\n      ")
    result = []
    for line in lines:
        if line.strip().startswith("tl.fromTo("):
            m = re.search(r',(\d+\.\d+)\);$', line)
            if m:
                t = float(m.group(1))
                result.append(f'tl.set(".cap",{{opacity:0}},{max(t-0.001,0):.3f});')
        result.append(line)
    return "\n      ".join(result)

cap_tweens = inject_set_resets(filter_tweens_title(raw_tweens))

# ---- build section card HTML divs ----
sec_div_lines = []
for _, cid, eyebrow, headline in sec_out:
    sec_div_lines.append(f"""  <div id="{cid}" class="glass sec-card">
    <div class="eyebrow">{eyebrow}</div>
    <div class="headline">{headline}</div>
  </div>""")
sec_divs = "\n".join(sec_div_lines)

# ---- build section card GSAP tweens ----
sec_tween_lines = []
for t_in, cid, _, _ in sorted(sec_out, key=lambda x: x[0]):
    t_out = t_in + CARD_DUR
    sec_tween_lines += [
        f'    tl.set("#{cid}", {{ xPercent: -50, yPercent: -50 }}, 0);',
        f'    tl.fromTo("#{cid}",',
        f'      {{ opacity: 0, scale: 0.88, filter: "blur(10px)" }},',
        f'      {{ opacity: 1, scale: 1, filter: "blur(0px)", duration: 0.4, ease: "power3.out" }},',
        f'      {t_in:.2f});',
        f'    tl.to("#{cid}", {{ opacity: 0, scale: 0.96, y: -14, duration: 0.3, ease: "power2.in" }}, {t_out:.2f});',
    ]
sec_card_tweens = "\n".join(sec_tween_lines)

# ---- cap-group blackout tweens for section cards ----
# Title card blackout is handled inline in main JS block.
# For each section card: hide cap-group in, clear individual caps on restore, show cap-group out.
cg_lines = []
for t_in, cid, _, _ in sec_out:
    t_out = t_in + CARD_DUR
    cg_lines += [
        f'    tl.to("#cap-group", {{ opacity: 0, duration: 0.05 }}, {t_in:.2f});',
        f'    tl.set(".cap", {{ opacity: 0 }}, {t_out - 0.001:.3f});',
        f'    tl.to("#cap-group", {{ opacity: 1, duration: 0.05 }}, {t_out:.2f});',
    ]
cap_group_sec_tweens = "\n".join(cg_lines)

# ---- SFX tracks for section card swooshes ----
# Tracks 0-5: bg video, voice, riser, impact, whoosh_intro, pop_chip
# Tracks 6+: one per section card whoosh
sfx_sec_lines = []
for i, (t_in, cid, _, _) in enumerate(sec_out):
    sfx_t = max(0.0, t_in - 0.15)
    sfx_sec_lines.append(
        f'  <audio id="sfx_sec{i}" src="../assets/sfx/whoosh.mp3" '
        f'data-start="{sfx_t:.2f}" data-track-index="{6+i}" data-volume="0.45"></audio>'
    )
sfx_sec_html = "\n".join(sfx_sec_lines)

# ---- generate HTML ----
html = f"""<!doctype html><html lang="en"><head><meta charset="utf-8"/>
<style>@font-face{{font-family:"Inter";font-weight:100 900;font-style:normal;src:url("capture/assets/fonts/Inter.woff2") format("woff2");}}</style>
<style>
  *{{margin:0;padding:0;box-sizing:border-box;}}
  #root{{position:relative;width:1920px;height:1080px;overflow:hidden;background:#0B0F14;font-family:"Inter",sans-serif;}}
  .zoom-wrap{{position:absolute;inset:0;z-index:0;transform-origin:50% 45%;}}
  .zoom-wrap video{{width:1920px;height:1080px;object-fit:cover;display:block;}}
  .glass{{
    background:rgba(255,255,255,0.07);
    backdrop-filter:blur(22px) saturate(130%);
    -webkit-backdrop-filter:blur(22px) saturate(130%);
    border:1px solid rgba(255,255,255,0.18);
    border-radius:26px;
    box-shadow:0 24px 60px rgba(0,0,0,0.45);
  }}
  #title-card{{position:absolute;left:50%;top:42%;z-index:20;opacity:0;padding:52px 72px 56px;text-align:center;min-width:860px;}}
  #title-card .eyebrow{{font-size:22px;font-weight:700;letter-spacing:5px;color:#22D3EE;text-transform:uppercase;margin-bottom:18px;}}
  #title-card .headline{{font-size:76px;font-weight:900;color:#fff;line-height:1.05;}}
  #title-card .headline span{{color:#22D3EE;}}
  #underline{{display:block;height:4px;background:#22D3EE;border-radius:2px;width:0;margin:20px auto 0;box-shadow:0 0 16px #22D3EE99;}}
  #subtitle{{font-size:28px;font-weight:600;color:#9AA7B4;margin-top:14px;opacity:0;}}
  .sec-card{{position:absolute;left:50%;top:38%;z-index:20;opacity:0;padding:28px 52px 32px;text-align:center;min-width:540px;}}
  .sec-card .eyebrow{{font-size:16px;font-weight:700;letter-spacing:4px;color:#22D3EE;text-transform:uppercase;margin-bottom:10px;}}
  .sec-card .headline{{font-size:58px;font-weight:900;color:#fff;line-height:1.05;}}
  .sec-card .headline span{{color:#22D3EE;}}
  #chip1{{position:absolute;left:50%;top:72%;z-index:25;opacity:0;padding:14px 32px;display:flex;align-items:center;gap:12px;}}
  #chip1 .dot{{width:10px;height:10px;border-radius:50%;background:#22D3EE;box-shadow:0 0 10px #22D3EE;}}
  #chip1 .label{{font-size:26px;font-weight:800;color:#fff;letter-spacing:1px;}}
  #chip1 .val{{font-size:26px;font-weight:700;color:#22D3EE;}}
  .cap{{position:absolute;left:50%;bottom:52px;z-index:1;opacity:0;
    font-weight:900;font-size:54px;letter-spacing:1px;color:#fff;white-space:nowrap;
    background:rgba(0,0,0,0.55);padding:8px 28px;border-radius:10px;
    text-shadow:0 2px 8px rgba(0,0,0,.9);}}
</style></head><body>
<div id="root" data-composition-id="root" data-width="1920" data-height="1080" data-start="0" data-duration="{TOTAL_DUR}">
  <div class="zoom-wrap" id="zoom">
    <video id="bg" src="base_cut.mp4" data-start="0" data-duration="{TOTAL_DUR}" data-track-index="0" muted playsinline></video>
  </div>
  <audio id="voice"      src="base_cut.mp4"              data-start="0"             data-duration="{TOTAL_DUR}" data-track-index="1" data-volume="1"></audio>
  <audio id="sfx_riser"  src="../assets/sfx/riser.mp3"   data-start="0.3"           data-track-index="2" data-volume="0.7"></audio>
  <audio id="sfx_impact" src="../assets/sfx/impact.mp3"  data-start="{T_TITLE_IN:.1f}" data-track-index="3" data-volume="0.65"></audio>
  <audio id="sfx_whoosh" src="../assets/sfx/whoosh.mp3"  data-start="{T_TITLE_OUT - 0.1:.1f}" data-track-index="4" data-volume="0.55"></audio>
  <audio id="sfx_pop"    src="../assets/sfx/pop.mp3"     data-start="{T_CHIP_IN:.1f}" data-track-index="5" data-volume="0.6"></audio>
{sfx_sec_html}

  <div id="title-card" class="glass">
    <div class="eyebrow">Mem0 &mdash; Universal Memory Layer</div>
    <div class="headline">Give Your <span>AI Agent</span><br>Persistent Memory</div>
    <span id="underline"></span>
    <div id="subtitle">56K+ GitHub Stars &bull; Free Tier Available</div>
  </div>

{sec_divs}

  <div id="chip1" class="glass">
    <div class="dot"></div>
    <div class="label">WHY AGENTS FORGET&nbsp;&nbsp;</div>
    <div class="val">The Problem</div>
  </div>

  <div id="cap-group" style="position:absolute;inset:0;z-index:30;pointer-events:none;">
{raw_divs}
  </div>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
  <script>
    window.__timelines = window.__timelines || {{}};
    const tl = gsap.timeline({{ paused: true }});

    tl.set("#zoom", {{ scale: 1.06, transformOrigin: "50% 45%" }}, 0);
    tl.to("#zoom", {{ scale: 1.12, duration: {TOTAL_DUR}, ease: "sine.inOut" }}, 0);

    // Title card cap-group blackout
    tl.to("#cap-group", {{ opacity: 0, duration: 0.05 }}, {T_TITLE_IN:.2f});
    tl.to("#cap-group", {{ opacity: 1, duration: 0.05 }}, {T_TITLE_OUT:.2f});

    // Section card cap-group blackouts
{cap_group_sec_tweens}

    // Title card
    tl.set("#title-card", {{ xPercent: -50, yPercent: -50 }}, 0);
    tl.fromTo("#title-card",
      {{ opacity: 0, scale: 0.88, filter: "blur(14px)" }},
      {{ opacity: 1, scale: 1, filter: "blur(0px)", duration: 0.6, ease: "power3.out" }},
      {T_TITLE_IN:.1f});
    tl.to("#underline", {{ width: 560, duration: 0.5, ease: "power2.out" }}, {T_TITLE_IN + 0.4:.1f});
    tl.fromTo("#subtitle",
      {{ opacity: 0, y: 18 }},
      {{ opacity: 1, y: 0, duration: 0.45, ease: "power2.out" }},
      {T_TITLE_IN + 0.7:.1f});
    tl.to("#title-card", {{ opacity: 0, scale: 0.96, y: -24, duration: 0.4, ease: "power2.in" }}, {T_TITLE_OUT:.1f});

    // Chip
    tl.set("#chip1", {{ xPercent: -50 }}, 0);
    tl.fromTo("#chip1",
      {{ opacity: 0, scale: 0.85, y: 20 }},
      {{ opacity: 1, scale: 1, y: 0, duration: 0.45, ease: "back.out(1.7)" }},
      {T_CHIP_IN:.1f});
    tl.to("#chip1", {{ opacity: 0, duration: 0.3, ease: "power2.in" }}, {T_CHIP_OUT:.1f});

    // Section cards
{sec_card_tweens}

    // Captions
    {cap_tweens}

    window.__timelines["root"] = tl;
  </script>
</div>
</body></html>
"""

out = HF_DIR / "index.html"
out.write_text(html, encoding="utf-8")
print(f"\nWritten: {out}")
print(f"Caption chunks: {raw_divs.count('<div class=')}")
print(f"Section cards: {len(sec_out)}")