Create injection.js

injection.js

@@ -0,0 +1,375 @@
+
+(() => {
+  // Stop the previous monitor before replacing its window.
+  if (window.hitRenderMonitorTimer) {
+    clearInterval(window.hitRenderMonitorTimer);
+  }
+  document.getElementById("hit-render-monitor")?.remove();
+
+  const POSITION_KEY = "hitRenderMonitorPosition";
+
+  const state = {
+    prompt: "",
+    progress: 0,
+    step: 0,
+    totalSteps: 0,
+    checkpoints: new Set(),
+    completedUrl: "",
+    lastReport: null,
+    minimized: false
+  };
+
+  const panel = document.createElement("div");
+  panel.id = "hit-render-monitor";
+
+  Object.assign(panel.style, {
+    position: "fixed",
+    right: "20px",
+    bottom: "20px",
+    width: "440px",
+    maxHeight: "85vh",
+    overflow: "hidden",
+    zIndex: "999999",
+    background: "#17191f",
+    color: "#eeeeee",
+    border: "1px solid #555",
+    borderRadius: "10px",
+    padding: "0",
+    font: "13px/1.45 monospace",
+    boxShadow: "0 5px 30px #0009"
+  });
+
+  panel.innerHTML = `
+    <div id="hit-header" style="
+      display:flex;
+      justify-content:space-between;
+      align-items:center;
+      padding:12px 14px;
+      background:#22252d;
+      border-radius:10px 10px 0 0;
+      cursor:grab;
+      user-select:none;
+      touch-action:none;
+    ">
+      <strong style="font-size:15px">
+        H3 Monitor <span id="hit-title-progress" style="color:#20b875">· Waiting</span>
+      </strong>
+      <div style="display:flex;gap:6px">
+        <button id="hit-minimize" title="Minimize" style="
+          background:#444;color:white;border:0;
+          padding:3px 10px;cursor:pointer;font-size:16px
+        ">−</button>
+        <button id="hit-close" title="Close" style="
+          background:#744;color:white;border:0;
+          padding:3px 9px;cursor:pointer;font-size:15px
+        ">×</button>
+      </div>
+    </div>
+    <div id="hit-content" style="
+      padding:14px;
+      max-height:calc(85vh - 45px);
+      overflow-y:auto;
+    ">
+      <div style="margin-top:2px">RENDER PROGRESS</div>
+      <div style="height:12px;background:#333;border-radius:8px;margin:6px 0;overflow:hidden">
+        <div id="hit-bar" style="height:100%;width:0%;background:#20b875;transition:width .3s"></div>
+      </div>
+      <div id="hit-progress" style="font-size:18px">Waiting for H3...</div>
+      <div id="hit-step" style="color:#aaa"></div>
+      <hr style="border-color:#444;margin:12px 0">
+      <div><strong>PROMPT INSPECTOR</strong></div>
+      <div id="hit-prompt" style="background:#242730;padding:8px;margin-top:6px;max-height:125px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;color:#ddd">Waiting for prompt...</div>
+      <hr style="border-color:#444;margin:12px 0">
+      <div style="display:flex;justify-content:space-between;align-items:center">
+        <strong>CALLBACK SIMULATOR</strong>
+        <label style="font-size:11px">
+          <input id="hit-report" type="checkbox" checked>
+          Report to 1hit.no
+        </label>
+      </div>
+      <div style="color:#e6b85c;font-size:11px;margin:4px 0 8px">
+        Simulation only — no network requests
+      </div>
+      <div id="hit-json" style="background:#090b0e;padding:9px;max-height:230px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;color:#9fe5b2">Waiting for events...</div>
+      <hr style="border-color:#444;margin:12px 0">
+      <div><strong>OUTPUT URL</strong></div>
+      <div id="hit-url" style="color:#8fcaff;overflow-wrap:anywhere;margin-top:5px">Waiting for video...</div>
+      <div id="hit-status" style="color:#aaa;font-size:11px;margin-top:10px">Polling every 15 seconds</div>
+    </div>
+  `;
+
+  document.body.appendChild(panel);
+
+  const el = id => panel.querySelector("#" + id);
+
+  // Restore the previous position, if available.
+  try {
+    const saved = JSON.parse(sessionStorage.getItem(POSITION_KEY) || "null");
+
+    if (saved && Number.isFinite(saved.left) && Number.isFinite(saved.top)) {
+      panel.style.left = saved.left + "px";
+      panel.style.top = saved.top + "px";
+      panel.style.right = "auto";
+      panel.style.bottom = "auto";
+    }
+  } catch (e) {
+    console.warn("Could not restore monitor position:", e);
+  }
+
+  function savePosition() {
+    const rect = panel.getBoundingClientRect();
+
+    try {
+      sessionStorage.setItem(POSITION_KEY, JSON.stringify({
+        left: Math.round(rect.left),
+        top: Math.round(rect.top)
+      }));
+    } catch (e) {}
+  }
+
+  // Drag the monitor using its title bar.
+  const header = el("hit-header");
+  let dragging = false;
+  let dragOffsetX = 0;
+  let dragOffsetY = 0;
+
+  header.addEventListener("pointerdown", event => {
+    if (event.target.closest("button")) return;
+
+    dragging = true;
+
+    const rect = panel.getBoundingClientRect();
+    dragOffsetX = event.clientX - rect.left;
+    dragOffsetY = event.clientY - rect.top;
+
+    panel.style.right = "auto";
+    panel.style.bottom = "auto";
+    header.style.cursor = "grabbing";
+
+    header.setPointerCapture(event.pointerId);
+    event.preventDefault();
+  });
+
+  header.addEventListener("pointermove", event => {
+    if (!dragging) return;
+
+    const width = panel.offsetWidth;
+    const height = panel.offsetHeight;
+
+    const left = Math.max(
+      0,
+      Math.min(window.innerWidth - width, event.clientX - dragOffsetX)
+    );
+
+    const top = Math.max(
+      0,
+      Math.min(window.innerHeight - height, event.clientY - dragOffsetY)
+    );
+
+    panel.style.left = left + "px";
+    panel.style.top = top + "px";
+  });
+
+  function stopDragging() {
+    if (!dragging) return;
+
+    dragging = false;
+    header.style.cursor = "grab";
+    savePosition();
+  }
+
+  header.addEventListener("pointerup", stopDragging);
+  header.addEventListener("pointercancel", stopDragging);
+  header.addEventListener("lostpointercapture", stopDragging);
+
+  // Minimize and restore without stopping the monitor.
+  el("hit-minimize").onclick = () => {
+    state.minimized = !state.minimized;
+
+    el("hit-content").style.display =
+      state.minimized ? "none" : "block";
+
+    el("hit-minimize").textContent =
+      state.minimized ? "+" : "−";
+
+    el("hit-minimize").title =
+      state.minimized ? "Restore" : "Minimize";
+
+    panel.style.width = state.minimized ? "260px" : "440px";
+
+    savePosition();
+  };
+
+  function addEvent(data) {
+    if (!el("hit-report").checked) return;
+
+    const json = JSON.stringify(data, null, 2);
+    const log = el("hit-json");
+
+    log.textContent =
+      (log.textContent === "Waiting for events..." ? "" : log.textContent + "\n\n")
+      + json;
+
+    log.scrollTop = log.scrollHeight;
+  }
+
+  function getPrompt() {
+    const fields = [
+      ...document.querySelectorAll("textarea, [contenteditable='true']")
+    ];
+
+    const candidates = fields.map(node => ({
+      text: (node.value || node.innerText || node.textContent || "").trim(),
+      hint: [
+        node.getAttribute("aria-label"),
+        node.getAttribute("placeholder"),
+        node.parentElement?.innerText
+      ].filter(Boolean).join(" ").toLowerCase()
+    })).filter(x => x.text.length > 10);
+
+    const labelled = candidates
+      .filter(x => /prompt|description/.test(x.hint))
+      .sort((a, b) => b.text.length - a.text.length);
+
+    if (labelled.length) return labelled[0].text;
+
+    candidates.sort((a, b) => b.text.length - a.text.length);
+    return candidates[0]?.text || "";
+  }
+
+  function getVideoUrl() {
+    const candidates = [
+      ...document.querySelectorAll("video"),
+      ...document.querySelectorAll("video source"),
+      ...document.querySelectorAll("a[href]")
+    ];
+
+    for (const node of candidates) {
+      const url =
+        node.currentSrc ||
+        node.src ||
+        node.href ||
+        "";
+
+      if (url && (
+        /\.mp4(?:[?#]|$)/i.test(url) ||
+        url.startsWith("blob:")
+      )) {
+        return url;
+      }
+    }
+
+    return "";
+  }
+
+  function baseEvent(event) {
+    return {
+      session_id: "kaggle-" + location.host,
+      event,
+      render_url: location.href,
+      prompt: state.prompt,
+      progress: state.progress,
+      step: state.step,
+      total_steps: state.totalSteps,
+      timestamp: new Date().toISOString()
+    };
+  }
+
+  function poll() {
+    const prompt = getPrompt();
+
+    if (prompt && prompt !== state.prompt) {
+      state.prompt = prompt;
+      state.checkpoints.clear();
+      state.completedUrl = "";
+
+      el("hit-prompt").textContent = prompt;
+
+      addEvent({
+        ...baseEvent("prompt"),
+        message: "New prompt detected"
+      });
+    }
+
+    const messages = [
+      ...document.querySelectorAll('div[type="message"]')
+    ];
+
+    const matching = messages
+      .map(node => node.innerText || "")
+      .filter(text => text.includes("H3 denoising:"));
+
+    if (matching.length) {
+      const latest = matching[matching.length - 1];
+
+      const match = latest.match(
+        /H3 denoising:\s*(\d+)%.*?\|\s*(\d+)\/(\d+)/
+      );
+
+      if (match) {
+        const pct = Number(match[1]);
+        const step = Number(match[2]);
+        const total = Number(match[3]);
+
+        if (pct < state.progress && pct <= 25) {
+          state.checkpoints.clear();
+          state.completedUrl = "";
+        }
+
+        state.progress = pct;
+        state.step = step;
+        state.totalSteps = total;
+
+        el("hit-bar").style.width = pct + "%";
+        el("hit-progress").textContent = pct + "%";
+        el("hit-step").textContent = `Step ${step} / ${total}`;
+
+        el("hit-title-progress").textContent = "· " + pct + "%";
+
+        for (const threshold of [25, 50, 75, 100]) {
+          if (pct >= threshold && !state.checkpoints.has(threshold)) {
+            state.checkpoints.add(threshold);
+
+            addEvent({
+              ...baseEvent("progress"),
+              checkpoint: threshold
+            });
+          }
+        }
+      }
+    }
+
+    const videoUrl = getVideoUrl();
+
+    if (videoUrl) {
+      el("hit-url").textContent = videoUrl;
+
+      if (state.progress >= 100 && videoUrl !== state.completedUrl) {
+        state.completedUrl = videoUrl;
+
+        addEvent({
+          ...baseEvent("completed"),
+          video: {
+            url: videoUrl,
+            filename: videoUrl.split("/").pop().split("?")[0]
+          }
+        });
+      }
+    }
+
+    el("hit-status").textContent =
+      "Last scan: " + new Date().toLocaleTimeString() +
+      " · Polling every 15 seconds";
+  }
+
+  el("hit-close").onclick = () => {
+    clearInterval(window.hitRenderMonitorTimer);
+    window.hitRenderMonitorTimer = null;
+    panel.remove();
+  };
+
+  poll();
+  window.hitRenderMonitorTimer = setInterval(poll, 15000);
+
+  console.log("H3 Render Monitor v3 started.");
+})();