File size: 9,161 Bytes
0ed8b8a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 | """
Build output-timeline mapping and generate the first ~50s slice composition.
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
# ---- slice window ----
SLICE_END_OUT = 50.0
out_acc = 0.0
src_end = segs[-1][1]
for (a, b) in segs:
seg_dur = b - a
if out_acc + seg_dur >= SLICE_END_OUT:
src_end = a + (SLICE_END_OUT - out_acc)
break
out_acc += seg_dur
print(f"Slice: output 0..{SLICE_END_OUT}s | source 0..{src_end:.1f}s")
# ---- 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
TOTAL_DUR = SLICE_END_OUT
# ---- captions (suppress during title card window) ----
raw_divs, raw_tweens = build_captions(words, start=0.0, end=src_end, per=2, map_time=src_to_out)
def filter_tweens(tweens_str):
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)
cap_divs = raw_divs
filtered = filter_tweens(raw_tweens)
# Hard-zero ALL caps at every fromTo entry point so previous cap is never
# still visible when the next one pops in. Inject tl.set(".cap",{opacity:0},T)
# just before every fromTo. GSAP processes set() before fromTo at same time,
# so the specific cap's fromTo then overrides just that element.
def inject_set_resets(tweens_str):
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))
# inject instant reset for ALL caps just before this entry
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(filtered)
# ---- 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;}}
#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>
<div id="title-card" class="glass">
<div class="eyebrow">Mem0 — 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 • Free Tier Available</div>
</div>
<div id="chip1" class="glass">
<div class="dot"></div>
<div class="label">WHY AGENTS FORGET </div>
<div class="val">The Problem</div>
</div>
<div id="cap-group" style="position:absolute;inset:0;z-index:30;pointer-events:none;">
{cap_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.10, duration: 30, ease: "sine.inOut" }}, 0);
// Hide all captions during title card via group — overrides individual cap tweens
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});
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});
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});
{cap_tweens}
window.__timelines["root"] = tl;
</script>
</div>
</body></html>
"""
out = HF_DIR / "index.html"
out.write_text(html, encoding="utf-8")
print(f"Written: {out}")
print(f"Caption chunks: {cap_divs.count('<div class=')}")
|