Update injection.js

injection.js

@@ -1,388 +1,290 @@
 
-
 (() => {
-  // H3 Render Monitor v4 — Kaggle
-  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: "",
-    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"
+  // Clean up an earlier copy
+  window.oneHitBridge?.close?.();
+  document.getElementById("onehit-mp4-popup")?.remove();
+
+  // Remember processed URLs during this browser page session
+  const sent = window.__oneHitSent || (window.__oneHitSent = {
+    add: new Set(),
+    sub: new Set()
   });
 
-  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>
+  let currentUrl = "";
+  let autoSend = false;
+  let busy = false;
+  let maximized = false;
+
+  const popup = document.createElement("div");
+  popup.id = "onehit-mp4-popup";
+  popup.style.cssText = `
+    position:fixed;right:20px;bottom:20px;width:390px;
+    z-index:2147483647;background:#17191f;color:white;
+    border:1px solid #555;border-radius:10px;
+    box-shadow:0 5px 25px #0009;font:13px Arial,sans-serif;
+    overflow:hidden;
+  `;
+
+  popup.innerHTML = `
+    <div id="oh-head" style="
+      display:flex;align-items:center;justify-content:space-between;
+      padding:12px;background:#292d38;cursor:move;user-select:none">
+      <strong>🎬 1hit MP4 Bridge</strong>
+      <div style="display:flex;gap:5px">
+        <button id="oh-min">—</button>
+        <button id="oh-max">□</button>
+        <button id="oh-close">✕</button>
       </div>
     </div>
 
-    <div id="hit-content" style="padding:14px;max-height:calc(85vh - 45px);overflow-y:auto">
-
-      <strong>RENDER PROGRESS</strong>
-      <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">
-
-      <strong>KAGGLE SESSION</strong>
-      <div style="display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px">
-        <div class="hit-stat"><small>ACCELERATOR</small><strong id="hit-accelerator">--</strong></div>
-        <div class="hit-stat"><small>QUOTA</small><strong id="hit-quota">--</strong></div>
-        <div class="hit-stat"><small>PERSISTENCE</small><strong id="hit-persistence">--</strong></div>
-        <div class="hit-stat"><small>INTERNET</small><strong id="hit-internet">--</strong></div>
-        <div class="hit-stat" style="grid-column:span 2"><small>ENVIRONMENT</small><strong id="hit-environment">--</strong></div>
+    <div id="oh-content" style="padding:14px">
+      <div id="oh-status" style="color:#aaa;margin-bottom:8px">
+        Looking for MP4 videos...
       </div>
 
-      <hr style="border-color:#444;margin:12px 0">
+      <textarea id="oh-url" readonly placeholder="Waiting for MP4..."
+        style="box-sizing:border-box;width:100%;height:65px;
+        background:#252832;color:white;border:1px solid #555;
+        border-radius:5px;padding:8px;resize:vertical"></textarea>
+
+      <div style="display:flex;align-items:center;gap:10px;margin-top:12px">
+        <label style="flex:1">
+          Endpoint
+          <select id="oh-endpoint" style="
+            display:block;width:100%;margin-top:4px;padding:8px;
+            background:#252832;color:white;border:1px solid #555;border-radius:5px">
+            <option value="add">add.php</option>
+            <option value="sub">sub.php</option>
+          </select>
+        </label>
 
-      <strong>RESOURCE USAGE</strong>
-      <div style="color:#aaa;font-size:11px;margin-top:6px">
-        Live hardware readings not yet connected.
+        <label style="display:flex;align-items:center;gap:6px;padding-top:17px;cursor:pointer">
+          <input id="oh-auto" type="checkbox">
+          AUTO SEND
+        </label>
       </div>
-      <div style="display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px">
-        <div class="hit-stat"><small>CPU</small><strong>--</strong></div>
-        <div class="hit-stat"><small>RAM</small><strong>--</strong></div>
-        <div class="hit-stat"><small>DISK</small><strong>--</strong></div>
-        <div class="hit-stat"><small>GPU / VRAM</small><strong>--</strong></div>
+
+      <button id="oh-send" style="
+        width:100%;margin-top:12px;padding:10px;
+        background:#2863a0;color:white;border:0;border-radius:5px;cursor:pointer">
+        Send current MP4
+      </button>
+
+      <div id="oh-count" style="color:#999;margin-top:8px;font-size:11px"></div>
+
+      <div id="oh-footer" style="
+        display:flex;justify-content:space-between;align-items:center;
+        flex-wrap:wrap;gap:8px;border-top:1px solid #444;
+        margin-top:12px;padding-top:10px;font-size:12px">
+        <a href="https://1hit.no/kaggle" target="_blank" rel="noopener"
+          style="color:#70b8ff;text-decoration:none">↗ 1hit.no/kaggle</a>
+        <a href="https://chatgpt.com" target="_blank" rel="noopener"
+          style="color:#aaa;text-decoration:none">Built with ChatGPT ↗</a>
       </div>
+    </div>
+  `;
 
-      <hr style="border-color:#444;margin:12px 0">
+  document.body.appendChild(popup);
 
-      <strong>PROMPT INSPECTOR</strong>
-      <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>
+  const $ = id => popup.querySelector("#oh-" + id);
+  const status = $("status");
+  const urlBox = $("url");
 
-      <hr style="border-color:#444;margin:12px 0">
+  function updateUI() {
+    const endpoint = $("endpoint").value;
+    const done = currentUrl && sent[endpoint].has(currentUrl);
 
-      <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>
+    $("send").disabled = !currentUrl || done || busy;
+    $("send").textContent = done
+      ? "Already sent ✓"
+      : endpoint === "add" ? "Send to add.php" : "Send to sub.php";
 
-      <hr style="border-color:#444;margin:12px 0">
+    $("send").style.opacity = $("send").disabled ? ".5" : "1";
 
-      <strong>OUTPUT URL</strong>
-      <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>
-  `;
+    $("count").textContent =
+      `Remembered: ${sent.add.size} add.php · ${sent.sub.size} sub.php`;
+  }
 
-  document.body.appendChild(panel);
-
-  // Style the statistic cards.
-  panel.querySelectorAll(".hit-stat").forEach(card => {
-    Object.assign(card.style, {
-      background: "#242730",
-      padding: "8px",
-      borderRadius: "6px",
-      minWidth: "0",
-      overflowWrap: "anywhere"
-    });
-    const small = card.querySelector("small");
-    const strong = card.querySelector("strong");
-    if (small) Object.assign(small.style, {
-      display: "block", color: "#aaa", fontSize: "10px", marginBottom: "3px"
-    });
-    if (strong) Object.assign(strong.style, {fontSize: "12px"});
-  });
+  async function sendCurrent(automatic = false) {
+    const url = currentUrl;
+    const endpoint = $("endpoint").value;
 
-  const el = id => panel.querySelector("#" + id);
+    if (!url || busy || sent[endpoint].has(url)) return;
 
-  // Restore previous popup position.
-  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) {}
+    busy = true;
+    updateUI();
+
+    status.textContent = `Sending to ${endpoint}.php...`;
+    status.style.color = "#f0c674";
 
-  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) {}
-  }
+      let request;
+
+      if (endpoint === "add") {
+        request = fetch(
+          "https://1hit.no/kaggle/add.php/?url=" + encodeURIComponent(url),
+          { method: "GET", mode: "no-cors" }
+        );
+      } else {
+        request = fetch("https://1hit.no/kaggle/sub.php", {
+          method: "POST",
+          mode: "no-cors",
+          headers: {
+            "Content-Type": "text/plain;charset=UTF-8"
+          },
+          body: JSON.stringify({
+            url,
+            client_id: "Wan2GP-Kaggle"
+          })
+        });
+      }
 
-  // Drag popup.
-  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();
-  });
+      await request;
 
-  header.addEventListener("pointermove", event => {
-    if (!dragging) return;
-    const left = Math.max(0, Math.min(
-      window.innerWidth - panel.offsetWidth,
-      event.clientX - dragOffsetX
-    ));
-    const top = Math.max(0, Math.min(
-      window.innerHeight - panel.offsetHeight,
-      event.clientY - dragOffsetY
-    ));
-    panel.style.left = left + "px";
-    panel.style.top = top + "px";
-  });
+      // The no-cors response cannot confirm server-side completion.
+      sent[endpoint].add(url);
+
+      status.textContent = automatic
+        ? `AUTO: request sent to ${endpoint}.php ✓`
+        : `Request sent to ${endpoint}.php ✓`;
 
-  function stopDragging() {
-    if (!dragging) return;
-    dragging = false;
-    header.style.cursor = "grab";
-    savePosition();
+      status.style.color = "#70d99a";
+    } catch (error) {
+      status.textContent = `Request failed: ${error.message}`;
+      status.style.color = "#ff7777";
+    } finally {
+      busy = false;
+      updateUI();
+    }
   }
 
-  header.addEventListener("pointerup", stopDragging);
-  header.addEventListener("pointercancel", stopDragging);
-  header.addEventListener("lostpointercapture", stopDragging);
-
-  // Minimize and restore.
-  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 findVideos() {
+    const urls = [...document.querySelectorAll("video")]
+      .map(v => v.currentSrc || v.src || v.querySelector("source")?.src || "")
+      .filter(url =>
+        /^https:\/\//i.test(url) &&
+        /\.mp4(?:[?#]|$)/i.test(url)
+      );
 
-  // Read Kaggle session options from the actual page DOM.
-  function updateKaggleOptions() {
-    const getValue = label => {
-      const field = [...document.querySelectorAll('[role="combobox"]')]
-        .find(node => {
-          const text = (
-            node.getAttribute("aria-label") ||
-            node.getAttribute("aria-labelledby") ||
-            ""
-          ).toLowerCase();
-          return text.includes(label.toLowerCase());
-        });
-      return field?.innerText?.trim() || "";
-    };
+    const best =
+      urls.find(url => url.includes("/gradio_api/file=")) ||
+      urls.at(-1);
 
-    const accelerator = getValue("Accelerator");
-    const persistence = getValue("Persistence");
-    const environment = getValue("Environment");
-
-    const internetInput = document.querySelector(
-      '#internet-toggle-switch-label input[type="checkbox"]'
-    );
-
-    const quota = [...document.querySelectorAll("p")]
-      .find(node => node.innerText.includes("Quota:"))
-      ?.innerText.match(/Quota:\s*(.*?)(?:\s*-\s*Link|$)/)?.[1] || "";
-
-    el("hit-accelerator").textContent = accelerator || "Not detected";
-    el("hit-quota").textContent = quota || "Not detected";
-    el("hit-persistence").textContent = persistence || "Not detected";
-    el("hit-environment").textContent = environment || "Not detected";
-    el("hit-internet").textContent = internetInput
-      ? (internetInput.checked ? "On" : "Off")
-      : "Not detected";
-  }
+    if (best && best !== currentUrl) {
+      currentUrl = best;
+      urlBox.value = best;
 
-  function addEvent(data) {
-    if (!el("hit-report").checked) return;
-    const log = el("hit-json");
-    log.textContent =
-      (log.textContent === "Waiting for events..." ? "" : log.textContent + "\n\n") +
-      JSON.stringify(data, null, 2);
-    log.scrollTop = log.scrollHeight;
-  }
+      status.textContent = "New MP4 detected ✓";
+      status.style.color = "#70d99a";
 
-  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 || "";
-  }
+      updateUI();
 
-  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;
-      }
+      if (autoSend) sendCurrent(true);
     }
-    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()
-    };
-  }
+  // AUTO SEND toggle
+  $("auto").onchange = () => {
+    autoSend = $("auto").checked;
 
-  function poll() {
-    updateKaggleOptions();
+    status.textContent = autoSend
+      ? "AUTO SEND enabled — scanning every 10 seconds."
+      : "AUTO SEND disabled — manual mode.";
 
-    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"});
-    }
+    status.style.color = autoSend ? "#70d99a" : "#aaa";
+  };
 
-    const messages = [...document.querySelectorAll('div[type="message"]')];
-    const matching = messages
-      .map(node => node.innerText || "")
-      .filter(text => text.includes("H3 denoising:"));
+  $("endpoint").onchange = updateUI;
+  $("send").onclick = () => sendCurrent(false);
 
-    if (matching.length) {
-      const match = matching[matching.length - 1].match(
-        /H3 denoising:\s*(\d+)%.*?\|\s*(\d+)\/(\d+)/
-      );
+  // Minimize / restore
+  $("min").onclick = () => {
+    const content = $("content");
+    const hidden = content.style.display === "none";
 
-      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});
-          }
-        }
-      }
-    }
+    content.style.display = hidden ? "block" : "none";
+    $("min").textContent = hidden ? "—" : "+";
+  };
 
-    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]
-          }
-        });
-      }
+  // Maximize / restore
+  $("max").onclick = () => {
+    maximized = !maximized;
+
+    if (maximized) {
+      popup.dataset.oldStyle = JSON.stringify({
+        width: popup.style.width,
+        height: popup.style.height,
+        top: popup.style.top,
+        left: popup.style.left,
+        right: popup.style.right,
+        bottom: popup.style.bottom,
+        borderRadius: popup.style.borderRadius
+      });
+
+      popup.style.width = "min(700px, calc(100vw - 30px))";
+      popup.style.height = "min(85vh, 750px)";
+      popup.style.top = "50%";
+      popup.style.left = "50%";
+      popup.style.right = "auto";
+      popup.style.bottom = "auto";
+      popup.style.transform = "translate(-50%, -50%)";
+
+      $("content").style.overflow = "auto";
+      $("content").style.maxHeight = "calc(85vh - 50px)";
+      $("max").textContent = "❐";
+    } else {
+      const old = JSON.parse(popup.dataset.oldStyle || "{}");
+      Object.assign(popup.style, old);
+      popup.style.transform = "";
+
+      $("content").style.maxHeight = "";
+      $("max").textContent = "□";
     }
+  };
 
-    el("hit-status").textContent =
-      "Last scan: " + new Date().toLocaleTimeString() +
-      " · Polling every 15 seconds";
-  }
+  // Drag using the header
+  let drag = null;
+
+  $("head").addEventListener("pointerdown", e => {
+    if (e.target.closest("button") || maximized) return;
 
-  el("hit-close").onclick = () => {
-    clearInterval(window.hitRenderMonitorTimer);
-    window.hitRenderMonitorTimer = null;
-    panel.remove();
+    const rect = popup.getBoundingClientRect();
+
+    drag = {
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    };
+
+    $("head").setPointerCapture(e.pointerId);
+  });
+
+  $("head").addEventListener("pointermove", e => {
+    if (!drag) return;
+
+    popup.style.left = `${e.clientX - drag.x}px`;
+    popup.style.top = `${e.clientY - drag.y}px`;
+    popup.style.right = "auto";
+    popup.style.bottom = "auto";
+  });
+
+  $("head").addEventListener("pointerup", () => drag = null);
+  $("head").addEventListener("pointercancel", () => drag = null);
+
+  // Scan immediately, then every 10 seconds
+  findVideos();
+  const timer = setInterval(findVideos, 10000);
+
+  $("close").onclick = () => {
+    clearInterval(timer);
+    popup.remove();
+    delete window.oneHitBridge;
   };
 
-  poll();
-  window.hitRenderMonitorTimer = setInterval(poll, 15000);
+  window.oneHitBridge = {
+    scan: findVideos,
+    close: () => $("close").click(),
+    sent
+  };
 
-  console.log("H3 Render Monitor v4 started.");
+  updateUI();
 })();