Spaces:

Pavle-17
/

infoshield

Sleeping

App Files Files Community

Pavle-17 commited on Jun 18

Commit

7f2d10b

verified ·

1 Parent(s): 04f00b1

Upload 2 files

Browse files

Files changed (2) hide show

index.html +1 -0
infoshield-demo.js +355 -0

index.html CHANGED Viewed

@@ -21,5 +21,6 @@
   </head>
   <body>
     <div id="root"></div>
   </body>
 </html>

   </head>
   <body>
     <div id="root"></div>
+    <script defer src="/infoshield-demo.js"></script>
   </body>
 </html>

infoshield-demo.js ADDED Viewed

	@@ -0,0 +1,355 @@

+/* InfoShield — baked-in demo overlays for the public (extension-less) site.
+ *
+ * On the hosted static deployment there is no Chrome extension, so this script
+ * reproduces exactly what the extension does: it reads the cached analysis from
+ * feed.json, injects the same `isx-` overlays onto each [data-post-id], and
+ * posts the same `scan` message that makes the InfoShield Insights widget
+ * appear. It only runs on a non-localhost host, so local dev + the real
+ * extension are untouched. Ported from extension/content.js (verbatim styles).
+ */
+(() => {
+  "use strict";
+  const host = location.hostname.toLowerCase();
+  if (["localhost", "127.0.0.1", "0.0.0.0", "::1", ""].includes(host)) return; // extension handles local dev
+  const BADGE = "/badge.png";
+  const TECH_LABELS = {
+    fear_amplification: "Fear Amplification", scapegoating: "Scapegoating",
+    us_vs_them: "Us vs. Them", dehumanizing_language: "Dehumanizing Language",
+    false_urgency: "False Urgency", emotional_manipulation: "Emotional Manipulation",
+    identity_targeting: "Identity Targeting", ad_hominem: "Ad Hominem",
+  };
+  const TECH_CHIP = {
+    false_urgency: "isx-chip--red", fear_amplification: "isx-chip--amber",
+    us_vs_them: "isx-chip--teal", scapegoating: "isx-chip--amber",
+    dehumanizing_language: "isx-chip--rose", emotional_manipulation: "isx-chip--violet",
+    identity_targeting: "isx-chip--rose", ad_hominem: "isx-chip--slate",
+  };
+  const STATE = { analyses: new Map(), flagged: new Set(), ready: false };
+  const el = (tag, cls, text) => {
+    const n = document.createElement(tag);
+    if (cls) n.className = cls;
+    if (text != null) n.textContent = text;
+    return n;
+  };
+  const confidenceLabel = (c) => {
+    const pct = Math.round((c || 0) * 100);
+    return c >= 0.8 ? `Detected with ${pct}% confidence` : `May contain indicators (${pct}% confidence)`;
+  };
+  const sourceLabel = (url) => {
+    try {
+      const h = new URL(url).hostname.replace(/^www\./, "");
+      if (h.includes("ohchr")) return "OHCHR";
+      if (h.includes("unesco")) return "UNESCO";
+      if (h.includes("treaties.un")) return "UN Treaty";
+      if (h.includes("un.org") || h.includes("digitallibrary.un")) return "UN";
+      return h;
+    } catch { return "source"; }
+  };
+  function highlightIn(node, phrases, on) {
+    node.querySelectorAll("mark.isx-highlight").forEach((m) => {
+      m.replaceWith(document.createTextNode(m.textContent));
+    });
+    node.normalize();
+    if (!on) return;
+    for (const phrase of phrases) {
+      const needle = (phrase || "").toLowerCase();
+      if (!needle) continue;
+      const walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, {
+        acceptNode: (tn) =>
+          tn.parentElement && tn.parentElement.closest(".isx-wrap")
+            ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT,
+      });
+      let tn, done = false;
+      while (!done && (tn = walker.nextNode())) {
+        const idx = tn.nodeValue.toLowerCase().indexOf(needle);
+        if (idx === -1) continue;
+        const after = tn.splitText(idx);
+        after.splitText(needle.length);
+        const mark = el("mark", "isx-highlight");
+        mark.textContent = after.nodeValue;
+        after.replaceWith(mark);
+        done = true;
+      }
+    }
+  }
+  function buildShield() {
+    const wrap = el("span", "isx-shield");
+    for (let i = 0; i < 3; i++) wrap.appendChild(el("span", "isx-shield__ring"));
+    const img = el("img", "isx-shield__core");
+    img.src = BADGE; img.alt = "InfoShield";
+    wrap.appendChild(img);
+    return wrap;
+  }
+  function buildAnalysis(node, entry) {
+    const { classification, analysis } = entry;
+    const wrap = el("div", "isx-wrap");
+    let expanded = false;
+    const phrases = (analysis.highlights || []).map((h) => h.phrase);
+    const bar = el("button", "isx-bar");
+    bar.appendChild(buildShield());
+    bar.appendChild(el("span", "isx-bar__conf", confidenceLabel(classification.confidence)));
+    const moreText = el("span", "isx-bar__more", "What's this?");
+    bar.appendChild(moreText);
+    wrap.appendChild(bar);
+    const card = el("div", "isx-card");
+    card.style.display = "none";
+    card.appendChild(el("div", "isx-card__title", "Why was this flagged?"));
+    const chips = el("div", "isx-chips");
+    (analysis.techniques || []).forEach((t) =>
+      chips.appendChild(el("span", `isx-chip ${TECH_CHIP[t] || "isx-chip--violet"}`, TECH_LABELS[t] || t))
+    );
+    card.appendChild(chips);
+    if (analysis.explanation) card.appendChild(el("p", "isx-expl", analysis.explanation));
+    if (analysis.recommendation) card.appendChild(el("div", "isx-rec", analysis.recommendation));
+    if (analysis.bias_check) {
+      const bc = el("div", "isx-biascheck");
+      bc.appendChild(el("b", null, "Rights check: "));
+      bc.appendChild(document.createTextNode(analysis.bias_check));
+      card.appendChild(bc);
+    }
+    if (analysis.citations && analysis.citations.length) {
+      const src = el("div", "isx-sources");
+      src.appendChild(el("b", null, "Sources:"));
+      analysis.citations.forEach((url) => {
+        const a = el("a", "isx-source-link", sourceLabel(url));
+        a.href = url; a.target = "_blank"; a.rel = "noopener noreferrer";
+        src.appendChild(a);
+      });
+      card.appendChild(src);
+    }
+    wrap.appendChild(card);
+    bar.addEventListener("click", () => {
+      expanded = !expanded;
+      card.style.display = expanded ? "block" : "none";
+      moreText.textContent = expanded ? "Hide" : "What's this?";
+      highlightIn(node, phrases, expanded);
+    });
+    return wrap;
+  }
+  function injectNode(node) {
+    if (node.dataset.isxInjected === "1") return;
+    const entry = STATE.analyses.get(node.getAttribute("data-post-id"));
+    node.dataset.isxInjected = "1";
+    if (!entry || !entry.flagged || !entry.analysis) return;
+    node.appendChild(buildAnalysis(node, entry));
+    STATE.flagged.add(node.getAttribute("data-post-id"));
+  }
+  function injectAll() {
+    document.querySelectorAll("[data-post-id]").forEach(injectNode);
+  }
+  function computeScan() {
+    const scanned = document.querySelectorAll("[data-post-id]").length;
+    const counter = {};
+    STATE.flagged.forEach((id) => {
+      (STATE.analyses.get(id)?.analysis?.techniques || []).forEach((t) => (counter[t] = (counter[t] || 0) + 1));
+    });
+    let top = null, max = 0;
+    for (const [t, c] of Object.entries(counter)) if (c > max) { max = c; top = t; }
+    return {
+      scanned, flagged: STATE.flagged.size,
+      patternsDetected: Object.keys(counter).length,
+      mostCommonPattern: top ? (TECH_LABELS[top] || top) : "—",
+    };
+  }
+  function postScan() {
+    if (!STATE.ready) return;
+    window.postMessage({ source: "infoshield", type: "scan", payload: computeScan() }, "*");
+  }
+  function injectStyles() {
+    if (document.getElementById("isx-demo-style")) return;
+    const s = el("style"); s.id = "isx-demo-style"; s.textContent = ISX_CSS;
+    document.head.appendChild(s);
+  }
+  async function start() {
+    injectStyles();
+    try {
+      const base = (document.querySelector("base")?.getAttribute("href") || "/").replace(/\/$/, "");
+      const res = await fetch(`${base}/feed.json`, { cache: "no-store" });
+      const feed = await res.json();
+      (feed.posts || []).forEach((p) =>
+        STATE.analyses.set(p.id, { classification: p.classification, analysis: p.analysis, flagged: p.flagged })
+      );
+    } catch (e) { return; }
+    STATE.ready = true;
+    injectAll();
+    postScan();
+    new MutationObserver((muts) => {
+      let added = false;
+      for (const m of muts) for (const n of m.addedNodes) {
+        if (n.nodeType !== 1) continue;
+        if (n.matches?.("[data-post-id]")) { injectNode(n); added = true; }
+        n.querySelectorAll?.("[data-post-id]").forEach((node) => { injectNode(node); added = true; });
+      }
+      if (added) postScan();
+    }).observe(document.body, { childList: true, subtree: true });
+  }
+  // The React page asks for the latest scan once its listener mounts.
+  window.addEventListener("message", (e) => {
+    const m = e.data;
+    if (m && m.source === "infoshield-page" && m.type === "request-scan") postScan();
+  });
+  const ISX_CSS = `/* InfoShield injected overlay styles. All classes are prefixed \`isx-\` so they
+   cannot collide with the host page's CSS. */
+.isx-wrap {
+  margin: 12px 0 2px 56px;
+  font-family: Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+/* --- animated shield (sits at the left of the status bar) -----------------
+   Exact port of the former top-right post badge: identical core size,
+   box-shadow, rings, ping timing/scale/opacity and reduced-motion handling.
+   Only the positioning differs (inline in the bar, not absolute). */
+.isx-shield {
+  position: relative;
+  flex: none;
+  width: 30px;
+  height: 30px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.isx-shield__core {
+  position: relative;
+  z-index: 2;
+  width: 30px;
+  height: 30px;
+  border-radius: 9999px;
+  box-shadow: 0 2px 8px rgba(76, 29, 149, 0.35);
+}
+.isx-shield__ring {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border-radius: 9999px;
+  background: radial-gradient(
+    circle,
+    rgba(124, 58, 237, 0.35) 0%,
+    rgba(124, 58, 237, 0.18) 60%,
+    rgba(124, 58, 237, 0) 70%
+  );
+  animation: isx-ping 2.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
+}
+.isx-shield__ring:nth-child(2) { animation-delay: 0.9s; }
+.isx-shield__ring:nth-child(3) { animation-delay: 1.8s; }
+@keyframes isx-ping {
+  0% { transform: scale(1); opacity: 0.55; }
+  70% { opacity: 0.12; }
+  100% { transform: scale(2.6); opacity: 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .isx-shield__ring { animation: none; transform: scale(1.6); opacity: 0.18; }
+  .isx-shield__ring:nth-child(3) { display: none; }
+}
+/* --- collapsed status bar ------------------------------------------------- */
+.isx-bar {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  width: 100%;
+  text-align: left;
+  border: 1px solid #e9e3ff;
+  background: #f4f1fe;
+  border-radius: 14px;
+  padding: 9px 14px;
+  cursor: pointer;
+  font-size: 13.5px;
+  color: #0f1419;
+  transition: background 0.15s ease;
+}
+.isx-bar:hover { background: #efeafe; }
+.isx-bar__conf { color: rgba(15, 20, 25, 0.62); font-weight: 500; }
+.isx-bar__more { margin-left: auto; color: #7c3aed; font-size: 13px; font-weight: 600; }
+/* --- expanded card -------------------------------------------------------- */
+.isx-card {
+  margin-top: 8px;
+  border: 1px solid #e9e3ff;
+  background: #f7f5ff;
+  border-radius: 16px;
+  padding: 16px;
+}
+.isx-card__title {
+  font-size: 13px;
+  font-weight: 700;
+  color: #6d28d9;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  margin-bottom: 12px;
+}
+.isx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
+.isx-chip {
+  border-radius: 9999px;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  color: #374151;
+  font-size: 12.5px;
+  font-weight: 600;
+  padding: 4px 12px;
+}
+.isx-chip--red { color: #e11d48; border-color: #fecdd3; background: #fff1f2; }
+.isx-chip--amber { color: #d97706; border-color: #fde68a; background: #fffbeb; }
+.isx-chip--teal { color: #0d9488; border-color: #99f6e4; background: #f0fdfa; }
+.isx-chip--violet { color: #7c3aed; border-color: #ddd6fe; background: #f5f3ff; }
+.isx-chip--rose { color: #be185d; border-color: #fbcfe8; background: #fdf2f8; }
+.isx-chip--slate { color: #475569; border-color: #e2e8f0; background: #f8fafc; }
+.isx-expl { font-size: 14px; line-height: 1.6; color: rgba(15, 20, 25, 0.78); margin: 0; }
+.isx-rec { margin-top: 10px; font-size: 13px; color: rgba(15, 20, 25, 0.7); line-height: 1.5; }
+.isx-biascheck { margin-top: 10px; font-size: 12px; color: #6b7280; line-height: 1.5; }
+.isx-biascheck b { color: rgba(15, 20, 25, 0.7); }
+.isx-sources {
+  margin-top: 12px;
+  font-size: 12px;
+  color: #6b7280;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.isx-sources b { color: rgba(15, 20, 25, 0.7); }
+.isx-source-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: #6d28d9;
+  text-decoration: none;
+  background: #fff;
+  border: 1px solid #e9e3ff;
+  border-radius: 9999px;
+  padding: 2px 10px;
+  font-weight: 600;
+}
+.isx-source-link:hover { background: #f5f3ff; }
+.isx-highlight {
+  background: linear-gradient(180deg, #ede9fe 0%, #ddd6fe 100%);
+  border-bottom: 2px solid #a78bfa;
+  border-radius: 3px;
+  padding: 0 2px;
+}
+`;
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", start);
+  else start();
+})();