Prompt48
/

PropmtEditor

Model card Files Files and versions

xet

Community

Prompt48 commited on May 26

Commit

db7f71a

verified ·

1 Parent(s): ec68494

Upload edit\gen_slice.py with huggingface_hub

Browse files

Files changed (1) hide show

edit//gen_slice.py +187 -0

edit//gen_slice.py ADDED Viewed

	@@ -0,0 +1,187 @@

+"""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"]
+# ---- captions: 2-word UPPERCASE chunks, 0.16 .. 24.0 ----
+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
+# end time = next chunk start (or CAP_END)
+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 (each on its own track) ----
+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)")