npm - openzoo - Versions diffs - 0.35.2 → 0.35.3 - Mend

openzoo 0.35.2 → 0.35.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/lib/gui.html ADDED Viewed

@@ -0,0 +1,258 @@
+<!doctype html>
+<html lang="en" data-page="openzoo-gui">
+<head>
+<meta charset="utf-8" data-meta="charset">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>openzoo</title>
+<style data-component="styles">
+  :root {
+    --paper: #faf6ee; --card: #ffffff; --ink: #22271f; --muted: #7a806f;
+    --leaf: #3e7c4f; --leaf-soft: #e3efe0; --line: #e6e0d2; --accent-warm: #f3e8d2;
+  }
+  * { box-sizing: border-box; }
+  body { margin: 0; background: var(--paper); color: var(--ink);
+    font: 15px/1.55 ui-rounded, "SF Pro Rounded", -apple-system, "Segoe UI", sans-serif;
+    display: flex; flex-direction: column; height: 100vh; }
+  header { display: flex; align-items: center; gap: 10px; padding: 12px 18px;
+    border-bottom: 1px solid var(--line); background: var(--card); }
+  header h1 { font-size: 17px; margin: 0; font-weight: 700; letter-spacing: -.2px; }
+  select, button, textarea { font: inherit; color: inherit; }
+  select { border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; background: var(--paper); max-width: 320px; }
+  .chip { font-size: 12px; color: var(--muted); background: var(--paper);
+    border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
+  .chip.on { color: var(--leaf); border-color: var(--leaf); background: var(--leaf-soft); }
+  #chat { flex: 1; overflow-y: auto; padding: 22px 0; }
+  .row { max-width: 780px; margin: 0 auto 14px; padding: 0 18px; display: flex; }
+  .bubble { padding: 10px 14px; border-radius: 16px; width: fit-content;
+    max-width: 100%; white-space: pre-wrap; overflow-wrap: break-word; }
+  [data-role="bubble-wrap"] { min-width: 0; max-width: min(85%, 640px);
+    display: flex; flex-direction: column; }
+  .row[data-row="user"] [data-role="bubble-wrap"] { margin-left: auto; align-items: flex-end; }
+  .me { background: var(--ink); color: var(--paper); border-bottom-right-radius: 4px; }
+  .zoo { background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
+  .meta { font-size: 11px; color: var(--muted); margin-top: 4px; }
+  footer { border-top: 1px solid var(--line); background: var(--card); padding: 12px 18px; }
+  .composer { max-width: 780px; margin: 0 auto; display: flex; gap: 10px; align-items: flex-end; }
+  textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 14px;
+    padding: 10px 14px; background: var(--paper); min-height: 44px; max-height: 160px; outline: none; }
+  textarea:focus { border-color: var(--leaf); }
+  .send { background: var(--leaf); color: #fff; border: 0; border-radius: 14px;
+    padding: 10px 18px; font-weight: 700; cursor: pointer; }
+  .send:active { transform: scale(.97); }
+  .ticker { max-width: 780px; margin: 8px auto 0; font-size: 12px; color: var(--muted);
+    display: flex; gap: 14px; justify-content: center; }
+  #drawer { display: none; border-bottom: 1px solid var(--line); background: var(--accent-warm); padding: 14px 18px; }
+  #drawer.open { display: block; }
+  .drawer-inner { max-width: 780px; margin: 0 auto; }
+  .drawer-inner textarea { width: 100%; background: #fffdf7; min-height: 90px; }
+  .tiny { font-size: 12px; color: var(--muted); }
+  .ghost { background: none; border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px; cursor: pointer; }
+  .ghost:hover { border-color: var(--leaf); color: var(--leaf); }
+</style>
+</head>
+<body data-component="app">
+<header data-component="topbar">
+  <span data-role="logo" style="font-size:22px">🦓</span>
+  <h1 data-role="title">openzoo</h1>
+  <input id="model" list="modelList" data-component="model-picker" placeholder="🔎 pick an animal…"
+    style="border:1px solid var(--line);border-radius:12px;padding:6px 10px;background:var(--paper);width:280px">
+  <datalist id="modelList" data-component="model-datalist"></datalist>
+  <button class="ghost" id="brainBtn" data-component="brain-toggle">🧠 teach the zoo</button>
+  <button class="ghost" id="newBtn" data-component="new-chat" title="fresh session">✨ new</button>
+  <span class="chip" id="ctxChip" data-component="ctx-chip" style="display:none"></span>
+  <span style="flex:1" data-role="spacer"></span>
+  <span class="chip" id="netChip" data-component="net-chip">connecting…</span>
+</header>
+<div id="drawer" data-component="brain-drawer">
+  <div class="drawer-inner" data-role="drawer-inner">
+    <p class="tiny" data-role="drawer-hint" style="margin:0 0 8px">Paste anything big — docs, a codebase, a book. The zoo binds it once
+      (free) and every later question retrieves just the relevant slices. That's the whole trick.</p>
+    <textarea id="corpus" data-component="corpus-input" placeholder="paste your corpus here… (or drop a .txt/.md file on this box)"></textarea>
+    <div style="margin-top:8px; display:flex; gap:10px; align-items:center" data-role="drawer-actions">
+      <button class="send" id="bindBtn" data-component="bind-button">bind it</button>
+      <span class="tiny" id="bindStatus" data-role="bind-status"></span>
+    </div>
+  </div>
+</div>
+<div id="chat" data-component="chat-scroll">
+  <div class="row" data-row="welcome"><div class="bubble zoo" data-role="welcome-bubble">welcome to the zoo 🦁 — pick a model up top, say anything.
+paste a huge corpus with 🧠 and ask questions against it for pennies: it never gets re-sent, only retrieved.</div></div>
+</div>
+<footer data-component="composer-bar">
+  <div class="composer" data-role="composer">
+    <textarea id="box" data-component="message-input" placeholder="say something to the animals…" rows="1"></textarea>
+    <button class="send" id="sendBtn" data-component="send-button">send</button>
+  </div>
+  <div class="ticker" data-component="ticker">
+    <span id="spent" data-role="spent-ticker">this session: $0.0000</span>
+    <span id="saved" data-role="saved-ticker"></span>
+    <span id="calls" data-role="calls-ticker"></span>
+  </div>
+</footer>
+<script data-component="app-script">
+const $ = (id) => document.getElementById(id);
+const SKEY = "openzoo.session.v1";
+const state = Object.assign(
+  { messages: [], ctx: null, spent: 0, saved: 0, calls: 0, model: "" },
+  JSON.parse(localStorage.getItem(SKEY) || "{}"),
+  { busy: false },
+);
+function persist() {
+  const { messages, ctx, spent, saved, calls } = state;
+  localStorage.setItem(SKEY, JSON.stringify({ messages, ctx, spent, saved, calls, model: $("model")?.value || "" }));
+}
+const ANIMAL = (id) => id.startsWith("anthropic") ? "🦒" : id.startsWith("openai") ? "🦉"
+  : id.startsWith("deepseek") ? "🐋" : id.startsWith("x-ai") ? "🦊" : id.startsWith("google") ? "🐦"
+  : id.startsWith("meta") ? "🦙" : id.startsWith("mistral") ? "🐈" : id.startsWith("qwen") ? "🐼" : "🐾";
+async function loadModels() {
+  try {
+    const r = await fetch("/v1/models");
+    const d = await r.json();
+    const models = (d.data || []).filter((m) => !m.id.startsWith("~") && !m.id.includes(":batch"));
+    models.sort((a, b) => a.id.localeCompare(b.id));
+    const dl = $("modelList");
+    dl.innerHTML = "";
+    for (const m of models) {
+      const o = document.createElement("option");
+      o.value = m.id;
+      o.setAttribute("data-option", m.id);
+      const inM = m.pricing?.prompt ? (1e6 * m.pricing.prompt).toFixed(2) : "?";
+      o.label = `${ANIMAL(m.id)} $${inM}/M`;
+      dl.appendChild(o);
+    }
+    if (!$("model").value) {
+      const pick = models.find((m) => m.id.includes("deepseek-v4-pro")) || models[0];
+      if (pick) $("model").value = pick.id;
+    }
+    $("netChip").textContent = `${models.length} animals`;
+    $("netChip").classList.add("on");
+  } catch { $("netChip").textContent = "proxy unreachable"; }
+}
+function bubble(text, mine, meta) {
+  const row = document.createElement("div");
+  row.className = "row";
+  row.setAttribute("data-row", mine ? "user" : "assistant");
+  const wrap = document.createElement("div");
+  wrap.setAttribute("data-role", "bubble-wrap");
+  const b = document.createElement("div");
+  b.className = `bubble ${mine ? "me" : "zoo"}`;
+  b.setAttribute("data-role", "bubble");
+  b.textContent = text;
+  wrap.appendChild(b);
+  if (meta) {
+    const m = document.createElement("div");
+    m.className = "meta";
+    m.setAttribute("data-role", "bubble-meta");
+    m.textContent = meta;
+    wrap.appendChild(m);
+  }
+  row.appendChild(wrap);
+  $("chat").appendChild(row);
+  $("chat").scrollTop = $("chat").scrollHeight;
+  return b;
+}
+async function send() {
+  const text = $("box").value.trim();
+  if (!text || state.busy) return;
+  state.busy = true;
+  $("box").value = "";
+  bubble(text, true);
+  state.messages.push({ role: "user", content: text });
+  const thinking = bubble("…", false);
+  try {
+    const headers = { "content-type": "application/json" };
+    if (state.ctx) headers["x-hrr-context"] = state.ctx;
+    const r = await fetch("/v1/chat/completions", {
+      method: "POST", headers,
+      body: JSON.stringify({ model: $("model").value, messages: state.messages, max_tokens: 2048 }),
+    });
+    const d = await r.json();
+    const content = d.choices?.[0]?.message?.content || d.error?.message || JSON.stringify(d).slice(0, 300);
+    thinking.textContent = content;
+    state.messages.push({ role: "assistant", content });
+    const x = d.x402 || {};
+    state.calls += 1;
+    if (typeof x.billedUsd === "number") state.spent += x.billedUsd;
+    if (typeof x.savesVsDirect === "number" && x.savesVsDirect > 0) state.saved += x.savesVsDirect;
+    const bits = [];
+    if (typeof x.billedUsd === "number") bits.push(`$${x.billedUsd.toFixed(4)}`);
+    if (x.lecore?.engaged) bits.push(`🧠 ${x.lecore.recalled ?? "?"} slices`);
+    if (bits.length) thinking.parentElement.querySelector("[data-role=bubble-meta]")?.remove(),
+      thinking.insertAdjacentHTML("afterend", `<div class="meta" data-role="bubble-meta">${bits.join(" · ")}</div>`);
+    $("spent").textContent = `this session: $${state.spent.toFixed(4)}`;
+    if (state.saved > 0) $("saved").textContent = `saved ~$${state.saved.toFixed(4)} vs direct 🎉`;
+    $("calls").textContent = `${state.calls} call${state.calls === 1 ? "" : "s"}`;
+    persist();
+  } catch (e) {
+    thinking.textContent = `the zoo hiccuped: ${e.message}`;
+  }
+  state.busy = false;
+}
+async function bind() {
+  const corpus = $("corpus").value;
+  if (!corpus.trim()) return;
+  $("bindStatus").textContent = "binding…";
+  try {
+    const r = await fetch("/v1/hrr/bind", {
+      method: "POST", headers: { "content-type": "application/json" },
+      body: JSON.stringify({ corpus }),
+    });
+    const d = await r.json();
+    if (d.context_id) {
+      state.ctx = d.context_id;
+      $("bindStatus").textContent = `bound ${(corpus.length / 1000).toFixed(0)}k chars ✓`;
+      const chip = $("ctxChip");
+      chip.style.display = "";
+      chip.classList.add("on");
+      chip.textContent = `🧠 ${d.context_id.slice(0, 14)}… attached`;
+      $("drawer").classList.remove("open");
+      persist();
+    } else {
+      $("bindStatus").textContent = d.error?.message || d.error || "bind failed";
+    }
+  } catch (e) { $("bindStatus").textContent = e.message; }
+}
+function restore() {
+  for (const m of state.messages) bubble(m.content, m.role === "user");
+  $("spent").textContent = `this session: $${state.spent.toFixed(4)}`;
+  if (state.saved > 0) $("saved").textContent = `saved ~$${state.saved.toFixed(4)} vs direct 🎉`;
+  if (state.calls) $("calls").textContent = `${state.calls} call${state.calls === 1 ? "" : "s"}`;
+  if (state.model) $("model").value = state.model;
+  if (state.ctx) {
+    const chip = $("ctxChip");
+    chip.style.display = "";
+    chip.classList.add("on");
+    chip.textContent = `🧠 ${state.ctx.slice(0, 14)}… attached`;
+  }
+}
+restore();
+$("newBtn").onclick = () => {
+  localStorage.removeItem(SKEY);
+  location.reload();
+};
+$("sendBtn").onclick = send;
+$("box").addEventListener("keydown", (e) => {
+  if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); }
+});
+$("brainBtn").onclick = () => $("drawer").classList.toggle("open");
+$("bindBtn").onclick = bind;
+$("corpus").addEventListener("drop", async (e) => {
+  e.preventDefault();
+  const f = e.dataTransfer?.files?.[0];
+  if (f) $("corpus").value = await f.text();
+});
+$("corpus").addEventListener("dragover", (e) => e.preventDefault());
+loadModels();
+</script>
+</body>
+</html>

package/lib/proxy.js CHANGED Viewed

@@ -352,6 +352,23 @@ export async function startProxy({ silent = false, requireToken = null, sessionM
       return;
     }
+    // THE CUTESY GUI. Local browsers hitting GET / get a little chat app —
+    // model zoo, bind-a-corpus drawer, live spent/saved ticker off the x402
+    // receipts. Tunnel traffic (cf headers) keeps the JSON discovery below:
+    // the GUI is the operator's, not the public's.
+    {
+      const p0 = (req.url || '').split('?')[0];
+      const local = !(req.headers['cf-connecting-ip'] || req.headers['cf-ray']);
+      if (local && req.method === 'GET' && (p0 === '/' || p0 === '/gui')) {
+        try {
+          const html = readFileSync(new URL('./gui.html', import.meta.url), 'utf8');
+          res.writeHead(200, { 'content-type': 'text/html; charset=utf-8' });
+          res.end(html);
+          return;
+        } catch { /* fall through to proxy behavior if the file is missing */ }
+      }
+    }
     const normalized = normalizePath(req.url);
     if (normalized !== req.url) {
       log(`path ${req.url} -> ${normalized} (base_url already ends in /v1)`);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "openzoo",
-  "version": "0.35.2",
+  "version": "0.35.3",
   "description": "Local x402-paying proxy + MCP server for openzoo.fun — point any OpenAI-compatible harness (Cursor, Claude Code, aider, SDKs) at localhost and it pays per call from a local burner wallet. Solana and Base rails live; Robinhood experimental.",
   "license": "MIT",
   "type": "module",