| """Generate hf/index.html for the 0-32s style-validation slice.""" |
| import json |
| from pathlib import Path |
|
|
| ROOT = Path(r"D:\PromptEngineer48\In-Progress\P11-Editor\edit") |
| words = [w for w in json.load(open(ROOT/"transcripts/LMSTUDIO-MTP1.json", encoding="utf-8"))["words"] |
| if w.get("type") == "word"] |
|
|
| |
| CAP_END = 24.0 |
| cw = [w for w in words if w["start"] < CAP_END] |
| chunks = [] |
| i = 0 |
| while i < len(cw): |
| pair = cw[i:i+2] |
| txt = " ".join(p["text"] for p in pair) |
| txt = txt.replace(",", "").replace(".", "").replace('"', "").strip().upper() |
| chunks.append({"t": pair[0]["start"], "txt": txt}) |
| i += 2 |
| |
| for j, c in enumerate(chunks): |
| c["end"] = chunks[j+1]["t"] if j+1 < len(chunks) else CAP_END |
|
|
| cap_divs = "\n".join( |
| f' <div class="cap" id="cap{j}">{c["txt"]}</div>' for j, c in enumerate(chunks) |
| ) |
| cap_tw = [] |
| for j, c in enumerate(chunks): |
| cap_tw.append( |
| f'tl.fromTo("#cap{j}",{{opacity:0,scale:0.92,y:12,xPercent:-50}},' |
| f'{{opacity:1,scale:1,y:0,xPercent:-50,duration:0.13,ease:"back.out(2)",overwrite:"auto"}},{c["t"]:.2f});' |
| ) |
| cap_tw.append(f'tl.to("#cap{j}",{{opacity:0,duration:0.08,overwrite:"auto"}},{c["end"]-0.02:.2f});') |
| cap_tw = "\n ".join(cap_tw) |
|
|
| |
| sfx = [ |
| ("op_whoosh", "whoosh.mp3", 0.10, 0.5, 7), |
| ("riser", "riser.mp3", 6.00, 0.6, 2), |
| ("pop", "pop.mp3", 7.94, 0.8, 3), |
| ("impact", "impact.mp3", 12.98,0.85,4), |
| ("ding", "ding.mp3", 14.45,0.7, 5), |
| ("whoosh", "whoosh.mp3", 24.20,0.8, 6), |
| ] |
| sfx_els = "\n".join( |
| f' <audio id="sfx_{n}" src="../assets/sfx/{f}" data-start="{t}" ' |
| f'data-track-index="{ti}" data-volume="{v}"></audio>' |
| for (n, f, t, v, ti) in sfx |
| ) |
|
|
| HTML = f"""<!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <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% 42%; }} |
| .zoom-wrap video {{ width:1920px; height:1080px; object-fit:cover; display:block; }} |
| |
| /* ---- captions ---- */ |
| .cap {{ |
| position:absolute; left:50%; bottom:96px; |
| z-index:30; opacity:0; |
| font-family:"Inter",sans-serif; font-weight:900; font-size:58px; letter-spacing:1px; |
| color:#fff; white-space:nowrap; |
| text-shadow:0 4px 18px rgba(0,0,0,0.85), 0 2px 4px rgba(0,0,0,0.9); |
| padding:10px 26px; |
| }} |
| |
| /* ---- glass recipe ---- */ |
| .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); |
| }} |
| |
| /* ---- hook counter card ---- */ |
| .hook-card {{ |
| position:absolute; left:50%; top:50%; |
| z-index:20; opacity:0; width:760px; padding:46px 56px; |
| display:flex; flex-direction:column; gap:22px; |
| }} |
| .hook-label {{ font-family:"Inter",sans-serif; font-weight:700; font-size:24px; |
| letter-spacing:5px; color:#9AA7B4; text-transform:uppercase; }} |
| .row {{ display:flex; align-items:baseline; justify-content:space-between; }} |
| .row .tag {{ font-family:"Inter",sans-serif; font-weight:600; font-size:34px; |
| letter-spacing:2px; text-transform:uppercase; }} |
| .row .num {{ font-family:"Inter",sans-serif; font-weight:700; font-size:118px; |
| line-height:0.9; font-variant-numeric:tabular-nums; }} |
| .row .unit {{ font-family:"Inter",sans-serif; font-weight:700; font-size:30px; color:#9AA7B4; |
| margin-left:10px; }} |
| #r_no {{ opacity:0; }} #r_yes {{ opacity:0; }} |
| #r_no .tag, #r_no .num {{ color:#F87171; }} |
| #r_yes .tag, #r_yes .num {{ color:#A3E635; }} |
| .badge {{ |
| position:absolute; right:-34px; top:-34px; opacity:0; |
| font-family:"Inter",sans-serif; font-weight:700; font-size:34px; |
| color:#0B0F14; background:#A3E635; padding:14px 26px; border-radius:18px; |
| box-shadow:0 12px 30px rgba(163,230,53,0.45); transform:rotate(-6deg); |
| }} |
| |
| /* ---- "WHAT IS MTP?" title card ---- */ |
| .mtp-card {{ |
| position:absolute; left:50%; top:50%; |
| z-index:25; opacity:0; padding:64px 90px; text-align:center; |
| display:flex; flex-direction:column; align-items:center; gap:18px; |
| }} |
| .mtp-title {{ font-family:"Inter",sans-serif; font-weight:700; font-size:120px; |
| color:#fff; letter-spacing:1px; }} |
| .mtp-underline {{ height:8px; width:0; background:#22D3EE; border-radius:6px; |
| box-shadow:0 0 22px rgba(34,211,238,0.8); }} |
| .mtp-sub {{ font-family:"Inter",sans-serif; font-weight:700; font-size:42px; color:#22D3EE; |
| letter-spacing:3px; opacity:0; }} |
| </style> |
| </head> |
| <body> |
| <div id="root" data-composition-id="root" data-width="1920" data-height="1080" data-start="0" data-duration="32"> |
| <div class="zoom-wrap"> |
| <video id="bg" src="base_slice.mp4" data-start="0" data-duration="32" data-track-index="0" muted playsinline></video> |
| </div> |
| <audio id="voice" src="base_slice.mp4" data-start="0" data-duration="32" data-track-index="1" data-volume="1"></audio> |
| {sfx_els} |
| |
| <!-- captions --> |
| {cap_divs} |
| |
| <!-- hook counter --> |
| <div class="hook-card glass"> |
| <div class="hook-label">Tokens / second</div> |
| <div class="row" id="r_no"><span class="tag">Without MTP</span><span><span class="num">62</span><span class="unit">tok/s</span></span></div> |
| <div class="row" id="r_yes"><span class="tag">With MTP</span><span><span class="num">78</span><span class="unit">tok/s</span></span></div> |
| <div class="badge" id="badge">+25% FASTER</div> |
| </div> |
| |
| <!-- what is MTP --> |
| <div class="mtp-card glass"> |
| <div class="mtp-title">WHAT IS MTP?</div> |
| <div class="mtp-underline" id="mtpu"></div> |
| <div class="mtp-sub" id="mtps">MULTI-TOKEN PREDICTION</div> |
| </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 }}); |
| |
| // center the cards via GSAP (xPercent/yPercent) so tweens don't wipe centering |
| tl.set(".hook-card", {{ xPercent: -50, yPercent: -50 }}, 0); |
| tl.set(".mtp-card", {{ xPercent: -50, yPercent: -50 }}, 0); |
| |
| // background zoom: punch in on the numbers, release before concept |
| tl.set(".zoom-wrap", {{ scale: 1.0, transformOrigin: "50% 42%" }}, 0); |
| tl.to(".zoom-wrap", {{ scale: 1.30, duration: 2.0, ease: "power2.inOut" }}, 6.2); |
| tl.to(".zoom-wrap", {{ scale: 1.0, duration: 1.6, ease: "power2.inOut" }}, 19.4); |
| tl.to(".zoom-wrap", {{ scale: 1.06, duration: 4.0, ease: "sine.inOut" }}, 24.2); |
| |
| // hook counter |
| tl.fromTo(".hook-card", {{opacity:0,scale:0.9,y:30}}, {{opacity:1,scale:1,y:0,duration:0.5,ease:"back.out(1.6)"}}, 6.5); |
| tl.fromTo("#r_no", {{opacity:0,x:-40}}, {{opacity:1,x:0,duration:0.4,ease:"power3.out"}}, 7.94); |
| tl.fromTo("#r_yes", {{opacity:0,x:-40}}, {{opacity:1,x:0,duration:0.4,ease:"power3.out"}}, 12.98); |
| tl.fromTo("#badge", {{opacity:0,scale:0.4,rotation:-30}}, {{opacity:1,scale:1,rotation:-6,duration:0.5,ease:"back.out(3)"}}, 14.45); |
| tl.to(".hook-card", {{opacity:0,scale:0.96,y:-24,duration:0.4,ease:"power2.in"}}, 19.2); |
| |
| // what is MTP card |
| tl.fromTo(".mtp-card", {{opacity:0,scale:0.88,filter:"blur(14px)"}}, {{opacity:1,scale:1,filter:"blur(0px)",duration:0.6,ease:"power3.out"}}, 24.2); |
| tl.to("#mtpu", {{width:560,duration:0.5,ease:"power2.out"}}, 24.6); |
| tl.fromTo("#mtps", {{opacity:0,y:18}}, {{opacity:1,y:0,duration:0.45,ease:"power2.out"}}, 24.9); |
| |
| // captions |
| {cap_tw} |
| |
| window.__timelines["root"] = tl; |
| </script> |
| </div> |
| </body> |
| </html> |
| """ |
|
|
| (ROOT/"hf"/"index.html").write_text(HTML, encoding="utf-8") |
| print(f"wrote hf/index.html ({len(chunks)} caption chunks)") |
|
|
