Spaces:

prithic07
/

context-prune

Sleeping

File size: 23,805 Bytes

0b89610

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Enterprise Context Optimizer</title>
    <style>
      :root {
        --bg: #050505;
        --panel: #0d0d0d;
        --panel-strong: #111111;
        --ink: #f5f5f5;
        --muted: #9a9a9a;
        --line: #222222;
        --line-strong: #303030;
        --accent: #ffffff;
        --accent-deep: #d9d9d9;
        --good: #8cf0b0;
        --warn: #f2d27a;
        --error: #ff8e8e;
        --shadow: none;
      }
      * { box-sizing: border-box; }
      html, body {
        min-height: 100%;
      }
      body {
        margin: 0;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        color: var(--ink);
        background: var(--bg);
        letter-spacing: -0.01em;
      }
      .shell {
        max-width: 1600px;
        margin: 0 auto;
        padding: 20px;
        min-height: 100vh;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 16px;
      }
      .card {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 18px;
        box-shadow: var(--shadow);
        padding: 20px;
      }
      h1, h2, h3, p { margin-top: 0; }
      h1 {
        font-size: clamp(1.8rem, 4vw, 2.6rem);
        line-height: 1.05;
        font-weight: 700;
        letter-spacing: -0.03em;
        margin-bottom: 8px;
      }
      h3 {
        font-size: 1.1rem;
        letter-spacing: -0.02em;
      }
      .muted {
        color: var(--muted);
        line-height: 1.6;
        font-size: 0.96rem;
      }
      .stats {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        margin-top: 14px;
      }
      .stat {
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 14px;
        background: var(--panel-strong);
      }
      .stat-label {
        font-size: 0.78rem;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }
      .stat-value {
        margin-top: 8px;
        font-size: 1.55rem;
        font-weight: 700;
        letter-spacing: -0.03em;
      }
      textarea, button {
        font: inherit;
        border-radius: 18px;
      }
      select {
        font: inherit;
        border-radius: 12px;
        border: 1px solid var(--line);
        padding: 10px 14px;
        background: var(--panel-strong);
        color: var(--ink);
      }
      textarea {
        width: 100%;
        min-height: 100%;
        border: 1px solid var(--line);
        padding: 18px 20px;
        resize: none;
        background: var(--panel-strong);
        color: var(--ink);
        line-height: 1.6;
        transition: border-color .18s ease, box-shadow .18s ease;
      }
      textarea:focus {
        outline: none;
        border-color: #666666;
        box-shadow: 0 0 0 1px #666666;
      }
      button {
        cursor: pointer;
        border: 1px solid transparent;
        padding: 11px 16px;
        font-weight: 600;
        letter-spacing: -0.01em;
        transition: background .18s ease, border-color .18s ease, opacity .18s ease, color .18s ease;
      }
      .primary {
        color: #050505;
        background: var(--accent);
        border-color: var(--accent);
      }
      button:disabled {
        opacity: 0.6;
        cursor: wait;
      }
      .status {
        margin-top: 14px;
        min-height: 46px;
        border-radius: 14px;
        padding: 14px 16px;
        border: 1px solid #4a4124;
        background: #15120a;
        color: var(--warn);
        font-weight: 600;
      }
      .status.good {
        border-color: #1f5131;
        background: #0d1510;
        color: var(--good);
      }
      .status.error {
        border-color: #5a2020;
        background: #180d0d;
        color: var(--error);
      }
      .panel-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        min-height: 0;
      }
      pre {
        margin: 0;
        white-space: pre-wrap;
        word-break: break-word;
        border-radius: 14px;
        background: var(--panel-strong);
        color: var(--ink);
        padding: 20px;
        min-height: 100%;
        overflow: auto;
        line-height: 1.72;
        font-size: 0.98rem;
        border: 1px solid var(--line);
      }
      .toolbar {
        display: flex;
        gap: 12px;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 16px;
      }
      .mini {
        color: var(--muted);
        font-size: 0.92rem;
        line-height: 1.5;
      }
      .chips {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 12px;
      }
      .grounding-list {
        display: grid;
        gap: 10px;
        margin-top: 14px;
      }
      .grounding-item {
        padding: 12px 14px;
        border-radius: 12px;
        background: var(--panel-strong);
        border: 1px solid var(--line);
      }
      .grounding-title {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--ink);
        margin-bottom: 4px;
      }
      .chip {
        padding: 7px 12px;
        border-radius: 999px;
        background: #121212;
        color: var(--ink);
        font-size: 0.8rem;
        font-weight: 600;
        border: 1px solid var(--line);
      }
      .summary-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
        gap: 16px;
        align-items: start;
      }
      .workspace {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 16px;
        min-height: 0;
      }
      .pane {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        min-height: 0;
      }
      .pane-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
      }
      .pane-actions {
        display: flex;
        gap: 10px;
        align-items: center;
      }
      .secondary {
        color: var(--ink);
        background: var(--panel-strong);
        border: 1px solid var(--line);
      }
      .pane-subtitle {
        margin: 4px 0 0;
      }
      .output-frame {
        min-height: 0;
      }
      .diff-panel {
        margin-top: 14px;
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 14px 16px;
        background: var(--panel-strong);
        min-height: 96px;
        line-height: 1.7;
        color: var(--ink);
        overflow: auto;
      }
      .diff-label {
        display: block;
        margin-bottom: 8px;
        font-size: 0.82rem;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      .diff-added {
        background: #102015;
        color: #8cf0b0;
        border-radius: 6px;
        padding: 2px 4px;
      }
      .diff-removed {
        background: #221111;
        color: #ff8e8e;
        border-radius: 6px;
        padding: 2px 4px;
      }
      @media (max-width: 900px) {
        .stats, .summary-grid, .workspace {
          grid-template-columns: 1fr;
        }
        .shell {
          padding: 14px;
        }
      }
    </style>
</head>
<body>
  <div class="shell">
      <section class="card">
        <div class="toolbar" style="justify-content:space-between; margin-top:0;">
          <div>
            <h1 style="margin:0 0 6px;">Enterprise Context Optimizer</h1>
            <p class="mini" id="summaryNote">Minimal dark mode. Paste a prompt, optimize it, compare the diff, and copy the result.</p>
          </div>
          <div class="toolbar" style="margin-top:0;">
            <label class="mini" for="corpusFamilySelect">Corpus Pack</label>
            <select id="corpusFamilySelect">
              <option value="enterprise_v1">enterprise_v1</option>
              <option value="enterprise_v2">enterprise_v2</option>
            </select>
            <label class="mini" for="compressionModeSelect">Mode</label>
            <select id="compressionModeSelect">
              <option value="balanced">balanced</option>
              <option value="grounded">grounded</option>
              <option value="aggressive">aggressive</option>
            </select>
            <button id="optimizeBtn" class="primary" type="button">Optimize Prompt</button>
            <span id="busyLabel" class="mini">Idle</span>
          </div>
        </div>
        <div class="stats">
          <div class="stat"><div class="stat-label">Current Input</div><div class="stat-value" id="currentInputTokensStat">-</div></div>
          <div class="stat"><div class="stat-label">Optimized Output</div><div class="stat-value" id="finalTokensStat">-</div></div>
          <div class="stat"><div class="stat-label">Chunks Used</div><div class="stat-value" id="selectedChunksStat">-</div></div>
          <div class="stat"><div class="stat-label">Context Tokens</div><div class="stat-value" id="compressedTokensStat">-</div></div>
          <div class="stat"><div class="stat-label">Citation Ready</div><div class="stat-value" id="citationReadyStat">-</div></div>
          <div class="stat"><div class="stat-label">Grounded Overlap</div><div class="stat-value" id="groundedOverlapStat">-</div></div>
          <div class="stat"><div class="stat-label">Tuning Mode</div><div class="stat-value" id="tuningModeStat">-</div></div>
          <div class="stat"><div class="stat-label">Demo Seeds</div><div class="stat-value" id="demoSeedStat">-</div></div>
        </div>
        <div id="statusBox" class="status">Ready. Paste a prompt and click Optimize Prompt.</div>
        <p class="mini" id="citationGuidance">Citation guidance will appear here. Use grounded mode when you want the optimizer to prefer inline evidence anchors.</p>
        <div class="chips" id="keywordChips"></div>
        <div class="chips" id="citationChips"></div>
        <div class="chips" id="demoChips"></div>
        <div class="grounding-list" id="groundingList"></div>
      </section>

      <section class="panel-grid">
        <div class="workspace">
          <section class="card pane">
            <div class="pane-header">
              <div>
                <h3 style="margin:0;">Original Prompt</h3>
                <p class="mini pane-subtitle">Paste or edit your source prompt here.</p>
              </div>
              <div class="pane-actions">
                <button id="pasteBtn" class="secondary" type="button">Paste</button>
              </div>
            </div>
            <textarea id="promptInput" placeholder="Paste your prompt here. Then click Optimize Prompt."></textarea>
            <div class="diff-panel">
              <span class="diff-label">Removed From Original</span>
              <div id="originalDiffPanel">No diff yet.</div>
            </div>
          </section>
          <section class="card pane">
            <div class="pane-header">
              <div>
                <h3 style="margin:0;">Optimized Prompt</h3>
                <p class="mini pane-subtitle">A shorter, cleaner version designed to be ready to copy and paste into your next model call.</p>
              </div>
              <div class="pane-actions">
                <button id="copyBtn" class="secondary" type="button">Copy</button>
              </div>
            </div>
            <pre id="outputPanel" class="output-frame">No optimized prompt yet.</pre>
            <div class="diff-panel">
              <span class="diff-label">Added / Changed In Optimized Prompt</span>
              <div id="optimizedDiffPanel">No diff yet.</div>
            </div>
          </section>
        </div>
      </section>
  </div>

  <script>
    const els = {
      promptInput: document.getElementById("promptInput"),
      optimizeBtn: document.getElementById("optimizeBtn"),
      copyBtn: document.getElementById("copyBtn"),
      pasteBtn: document.getElementById("pasteBtn"),
      corpusFamilySelect: document.getElementById("corpusFamilySelect"),
      compressionModeSelect: document.getElementById("compressionModeSelect"),
      busyLabel: document.getElementById("busyLabel"),
      statusBox: document.getElementById("statusBox"),
      citationGuidance: document.getElementById("citationGuidance"),
      outputPanel: document.getElementById("outputPanel"),
      currentInputTokensStat: document.getElementById("currentInputTokensStat"),
      selectedChunksStat: document.getElementById("selectedChunksStat"),
      compressedTokensStat: document.getElementById("compressedTokensStat"),
      finalTokensStat: document.getElementById("finalTokensStat"),
      citationReadyStat: document.getElementById("citationReadyStat"),
      groundedOverlapStat: document.getElementById("groundedOverlapStat"),
      tuningModeStat: document.getElementById("tuningModeStat"),
      demoSeedStat: document.getElementById("demoSeedStat"),
      keywordChips: document.getElementById("keywordChips"),
      citationChips: document.getElementById("citationChips"),
      demoChips: document.getElementById("demoChips"),
      groundingList: document.getElementById("groundingList"),
      summaryNote: document.getElementById("summaryNote"),
      originalDiffPanel: document.getElementById("originalDiffPanel"),
      optimizedDiffPanel: document.getElementById("optimizedDiffPanel"),
    };

    function approxTokens(text) {
      const value = (text || "").trim();
      if (!value) return 0;
      return Math.max(1, Math.floor(value.length / 4));
    }

    function setBusy(isBusy, label = "Working...") {
      els.optimizeBtn.disabled = isBusy;
      els.copyBtn.disabled = isBusy;
      els.pasteBtn.disabled = isBusy;
      els.busyLabel.textContent = isBusy ? label : "Idle";
    }

    function setStatus(message, tone = "warn") {
      els.statusBox.textContent = message;
      els.statusBox.className = "status";
      if (tone === "good") els.statusBox.classList.add("good");
      if (tone === "error") els.statusBox.classList.add("error");
    }

    async function fetchJson(url, options = {}) {
      const response = await fetch(url, {
        headers: { "Content-Type": "application/json" },
        ...options,
      });
      const body = await response.json();
      if (!response.ok) throw new Error(body.detail || JSON.stringify(body));
      return body;
    }

    function escapeHtml(text) {
      return String(text)
        .replaceAll("&", "&amp;")
        .replaceAll("<", "&lt;")
        .replaceAll(">", "&gt;")
        .replaceAll('"', "&quot;")
        .replaceAll("'", "&#39;");
    }

    function tokenizeForDiff(text) {
      return (text || "").match(/[A-Za-z0-9_]+|[^\sA-Za-z0-9_]+/g) || [];
    }

    function normalizeDiffToken(token) {
      return String(token || "").toLowerCase();
    }

    function diffWords(original, optimized) {
      const a = tokenizeForDiff(original);
      const b = tokenizeForDiff(optimized);
      const dp = Array.from({ length: a.length + 1 }, () => Array(b.length + 1).fill(0));

      for (let i = a.length - 1; i >= 0; i--) {
        for (let j = b.length - 1; j >= 0; j--) {
          if (normalizeDiffToken(a[i]) === normalizeDiffToken(b[j])) {
            dp[i][j] = dp[i + 1][j + 1] + 1;
          } else {
            dp[i][j] = Math.max(dp[i + 1][j], dp[i][j + 1]);
          }
        }
      }

      const left = [];
      const right = [];
      let i = 0;
      let j = 0;
      while (i < a.length && j < b.length) {
        if (normalizeDiffToken(a[i]) === normalizeDiffToken(b[j])) {
          const safe = escapeHtml(a[i]);
          left.push(safe);
          right.push(safe);
          i += 1;
          j += 1;
        } else if (dp[i + 1][j] >= dp[i][j + 1]) {
          left.push(`<span class="diff-removed">${escapeHtml(a[i])}</span>`);
          i += 1;
        } else {
          right.push(`<span class="diff-added">${escapeHtml(b[j])}</span>`);
          j += 1;
        }
      }

      while (i < a.length) {
        left.push(`<span class="diff-removed">${escapeHtml(a[i])}</span>`);
        i += 1;
      }
      while (j < b.length) {
        right.push(`<span class="diff-added">${escapeHtml(b[j])}</span>`);
        j += 1;
      }

      return {
        originalHtml: left.join(" ").replace(/\s+([,.;:!?])/g, "$1"),
        optimizedHtml: right.join(" ").replace(/\s+([,.;:!?])/g, "$1"),
      };
    }

    function renderDiff(original, optimized) {
      if (!(original || "").trim() || !(optimized || "").trim()) {
        els.originalDiffPanel.textContent = "No diff yet.";
        els.optimizedDiffPanel.textContent = "No diff yet.";
        return;
      }
      const diff = diffWords(original, optimized);
      els.originalDiffPanel.innerHTML = diff.originalHtml || escapeHtml(original);
      els.optimizedDiffPanel.innerHTML = diff.optimizedHtml || escapeHtml(optimized);
    }

    function renderResult(result) {
      els.outputPanel.textContent = result.optimized_prompt || "No optimized prompt returned.";
      renderDiff(els.promptInput.value, result.optimized_prompt || "");
      const stats = result.stats || {};
      // Avoid newer JS syntax here; some browsers silently fail and stop updating the UI.
      els.currentInputTokensStat.textContent = (stats.original_prompt_tokens !== undefined && stats.original_prompt_tokens !== null) ? String(stats.original_prompt_tokens) : String(approxTokens(els.promptInput.value));
      els.selectedChunksStat.textContent = (stats.selected_chunks !== undefined && stats.selected_chunks !== null) ? String(stats.selected_chunks) : "-";
      els.compressedTokensStat.textContent = (stats.compressed_context_tokens !== undefined && stats.compressed_context_tokens !== null) ? String(stats.compressed_context_tokens) : "-";
      els.finalTokensStat.textContent = (stats.optimized_prompt_tokens !== undefined && stats.optimized_prompt_tokens !== null) ? String(stats.optimized_prompt_tokens) : "-";
      const grounding = result.grounding || {};
      const tuning = result.context_tuning || {};
      const optimizationMode = result.optimization_mode || els.compressionModeSelect.value || "balanced";
      els.citationReadyStat.textContent = grounding.citation_ready ? "Yes" : "No";
      els.groundedOverlapStat.textContent = (grounding.grounded_overlap !== undefined && grounding.grounded_overlap !== null) ? String(grounding.grounded_overlap) : "-";
      els.tuningModeStat.textContent = tuning.mode || "-";
      els.demoSeedStat.textContent = tuning.top_demo_cases ? String(tuning.top_demo_cases.length) : "-";
      const sourceTokens = (stats.source_tokens !== undefined && stats.source_tokens !== null) ? String(stats.source_tokens) : "-";
      els.summaryNote.textContent = "`Current Input` tracks the text in the prompt box. `Context Tokens` is compressed backend support context. Raw support before compression: " + sourceTokens + ". Active optimization mode: " + optimizationMode + ".";
      if (result.corpus_family) {
        els.summaryNote.textContent += " Active corpus pack: " + result.corpus_family + ".";
      }
      if (tuning.leave_one_out) {
        els.summaryNote.textContent += " Leave-one-out masking is active.";
      }
      if (optimizationMode === "grounded") {
        els.summaryNote.textContent += " Grounded mode prefers inline citations even if the final prompt stays slightly longer.";
      } else if (optimizationMode === "aggressive") {
        els.summaryNote.textContent += " Aggressive mode prioritizes shorter output over richer evidence phrasing.";
      } else {
        els.summaryNote.textContent += " Balanced mode tries to preserve constraints while still shortening the prompt.";
      }
      const chips = result.selected_keywords || [];
      els.keywordChips.innerHTML = chips.map((keyword) => `<span class="chip">${keyword}</span>`).join("");
      const citations = grounding.citations || [];
      els.citationChips.innerHTML = citations.map((citation) => `<span class="chip">[${citation}]</span>`).join("");
      els.citationGuidance.textContent = grounding.citation_guidance || (grounding.citation_ready ? "Inline citations are present in the optimized prompt." : "No citation guidance available.");
      const demos = tuning.top_demo_cases || [];
      els.demoChips.innerHTML = demos.map((demo) => `<span class="chip">${demo}</span>`).join("");
      const notes = grounding.evidence_notes || [];
      els.groundingList.innerHTML = notes.map((item) => `<div class="grounding-item"><div class="grounding-title">[${item.chunk_id}]</div><div>${item.note}</div></div>`).join("");
    }

    els.optimizeBtn.addEventListener("click", async () => {
      const prompt = els.promptInput.value.trim();
      if (!prompt) {
        setStatus("Please paste a prompt first.", "error");
        return;
      }
      setBusy(true, "Optimizing...");
      setStatus("Running retrieval, ranking, compression, and prompt rewriting...", "warn");
      try {
        const result = await fetchJson("/optimize-prompt", {
          method: "POST",
          body: JSON.stringify({
            prompt,
            corpus_family: els.corpusFamilySelect.value,
            compression_mode: els.compressionModeSelect.value,
          }),
        });
        renderResult(result);
        setStatus("Optimization complete. The output below is ready to copy and paste.", "good");
      } catch (error) {
        setStatus(error.message, "error");
      } finally {
        setBusy(false);
      }
    });

    els.copyBtn.addEventListener("click", async () => {
      const text = els.outputPanel.textContent || "";
      if (!text || text === "No optimized prompt yet.") {
        setStatus("There is no optimized output to copy yet.", "error");
        return;
      }
      try {
        await navigator.clipboard.writeText(text);
        setStatus("Optimized prompt copied to clipboard.", "good");
      } catch (_error) {
        setStatus("Copy failed. You can still select the output manually.", "error");
      }
    });

    els.pasteBtn.addEventListener("click", async () => {
      try {
        const text = await navigator.clipboard.readText();
        if (!text || !text.trim()) {
          setStatus("Clipboard is empty.", "error");
          return;
        }
        els.promptInput.value = text;
        els.promptInput.dispatchEvent(new Event("input"));
        setStatus("Prompt pasted from clipboard.", "good");
      } catch (_error) {
        setStatus("Paste failed. Your browser may block clipboard read access.", "error");
      }
    });

    els.promptInput.addEventListener("input", () => {
      els.currentInputTokensStat.textContent = String(approxTokens(els.promptInput.value));
      els.finalTokensStat.textContent = "-";
      els.selectedChunksStat.textContent = "-";
      els.compressedTokensStat.textContent = "-";
      els.citationReadyStat.textContent = "-";
      els.groundedOverlapStat.textContent = "-";
      els.tuningModeStat.textContent = "-";
      els.demoSeedStat.textContent = "-";
      els.citationGuidance.textContent = "Citation guidance will appear here. Use grounded mode when you want the optimizer to prefer inline evidence anchors.";
      els.citationChips.innerHTML = "";
      els.demoChips.innerHTML = "";
      els.groundingList.innerHTML = "";
      els.originalDiffPanel.textContent = "No diff yet.";
      els.optimizedDiffPanel.textContent = "No diff yet.";
      els.summaryNote.textContent = "Prompt changed. Click Optimize Prompt to refresh the optimized output, grounding, and backend context stats.";
    });
  </script>
</body>
</html>