@nevescloud/pip 2.11.0

package/providers/anthropic.esm.js

@@ -0,0 +1,120 @@
+// Anthropic provider for pip-runtime. Streams /v1/messages over fetch, no SDK.
+//
+// Pip is a no-build, no-dependency ESM module loaded directly via jsdelivr;
+// importing @anthropic-ai/sdk would inflate the bundle and force consumers to
+// load it too. Raw fetch keeps the module tiny and follows the public wire
+// format from the API reference.
+//
+// Production hosts should route through their own server-side proxy (pass
+// `baseUrl`) to keep the API key out of the browser. Direct browser access
+// requires the documented escape-hatch header.
+
+const DEFAULT_BASE = 'https://api.anthropic.com';
+const DEFAULT_MODEL = 'claude-opus-4-7';
+const DEFAULT_MAX_TOKENS = 4096;
+const ANTHROPIC_VERSION = '2023-06-01';
+
+export function anthropic({
+  apiKey,
+  model = DEFAULT_MODEL,
+  baseUrl = DEFAULT_BASE,
+  maxTokens = DEFAULT_MAX_TOKENS,
+  thinking = { type: 'adaptive' },
+  effort,
+  cacheControl,
+  extraHeaders = {},
+} = {}) {
+  if (!apiKey) throw new Error('anthropic provider: apiKey is required');
+
+  return async function* anthropicProvider({ messages, tools, system, signal }) {
+    const body = {
+      model,
+      max_tokens: maxTokens,
+      stream: true,
+      messages,
+    };
+    if (system) body.system = system;
+    if (tools && tools.length) {
+      body.tools = tools.map((t) => ({
+        name: t.name,
+        description: t.description,
+        input_schema: t.schema || t.input_schema,
+      }));
+    }
+    if (thinking) body.thinking = thinking;
+    if (effort) body.output_config = { effort };
+    if (cacheControl) body.cache_control = { type: cacheControl };
+
+    const res = await fetch(`${baseUrl}/v1/messages`, {
+      method: 'POST',
+      headers: {
+        'content-type': 'application/json',
+        'x-api-key': apiKey,
+        'anthropic-version': ANTHROPIC_VERSION,
+        'anthropic-dangerous-direct-browser-access': 'true',
+        ...extraHeaders,
+      },
+      body: JSON.stringify(body),
+      signal,
+    });
+
+    if (!res.ok) {
+      const errText = await res.text().catch(() => res.statusText);
+      throw new Error(`Anthropic API ${res.status}: ${errText}`);
+    }
+
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let pending = '';
+    let pendingBlock = null;
+    let usage = null;
+
+    try {
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        pending += decoder.decode(value, { stream: true });
+        const lines = pending.split('\n');
+        pending = lines.pop();
+        for (const line of lines) {
+          const trimmed = line.trim();
+          if (!trimmed.startsWith('data:')) continue;
+          const data = trimmed.slice(5).trim();
+          if (!data || data === '[DONE]') continue;
+          let event;
+          try { event = JSON.parse(data); } catch { continue; }
+
+          if (event.type === 'message_start') {
+            if (event.message?.usage) usage = { ...event.message.usage };
+          } else if (event.type === 'content_block_start') {
+            const cb = event.content_block;
+            if (cb && cb.type === 'tool_use') {
+              pendingBlock = { id: cb.id, name: cb.name, inputJson: '' };
+            }
+          } else if (event.type === 'content_block_delta') {
+            const d = event.delta;
+            if (d.type === 'text_delta') {
+              yield { type: 'text_delta', text: d.text };
+            } else if (d.type === 'input_json_delta' && pendingBlock) {
+              pendingBlock.inputJson += d.partial_json || '';
+            }
+          } else if (event.type === 'content_block_stop') {
+            if (pendingBlock) {
+              let input = {};
+              try { input = JSON.parse(pendingBlock.inputJson || '{}'); } catch {}
+              yield { type: 'tool_use', id: pendingBlock.id, name: pendingBlock.name, input };
+              pendingBlock = null;
+            }
+          } else if (event.type === 'message_delta') {
+            if (event.usage) usage = { ...usage, ...event.usage };
+            if (event.delta && event.delta.stop_reason) {
+              yield { type: 'turn_end', stopReason: event.delta.stop_reason, usage };
+            }
+          }
+        }
+      }
+    } finally {
+      try { reader.releaseLock(); } catch {}
+    }
+  };
+}

package/providers/openai.esm.js

@@ -0,0 +1,164 @@
+// OpenAI-compatible provider for pip-runtime. Streams /chat/completions over
+// fetch, no SDK. Covers any host that speaks the OpenAI chat-completions
+// wire format — direct OpenAI, GitHub Models, Together, Groq, OpenRouter,
+// LM Studio, llama.cpp's openai shim, etc. Same provider, different baseUrl
+// + model + auth.
+//
+// Usage:
+//   openai({ apiKey: '...', model: 'gpt-4o-mini' })                    // direct OpenAI
+//   openai({ apiKey: oauthToken,
+//            model: 'openai/gpt-4o-mini',
+//            baseUrl: 'https://models.github.ai/inference' })          // GitHub Models
+//
+// Yields the same { text_delta | tool_use | turn_end } event shape as the
+// anthropic provider, so the runtime doesn't need to know the difference.
+
+const DEFAULT_BASE = 'https://api.openai.com/v1';
+const DEFAULT_MAX_TOKENS = 4096;
+
+export function openai({
+  apiKey,
+  model,
+  baseUrl = DEFAULT_BASE,
+  maxTokens = DEFAULT_MAX_TOKENS,
+  extraHeaders = {},
+} = {}) {
+  if (!apiKey) throw new Error('openai provider: apiKey is required');
+  if (!model) throw new Error('openai provider: model is required');
+
+  return async function* openaiProvider({ messages, tools, system, signal }) {
+    // OpenAI inlines system prompt as the first message; anthropic puts it on
+    // the request envelope. Translate by prepending if provided.
+    const allMessages = system
+      ? [{ role: 'system', content: system }, ...messages]
+      : messages;
+
+    const body = {
+      model,
+      max_tokens: maxTokens,
+      stream: true,
+      messages: allMessages,
+    };
+
+    if (tools && tools.length) {
+      // Anthropic shape → OpenAI function shape. The JSON Schema body for
+      // parameters transfers verbatim; only the wrapper differs.
+      body.tools = tools.map((t) => ({
+        type: 'function',
+        function: {
+          name: t.name,
+          description: t.description,
+          parameters: t.schema || t.input_schema,
+        },
+      }));
+    }
+
+    const res = await fetch(`${baseUrl}/chat/completions`, {
+      method: 'POST',
+      headers: {
+        'content-type': 'application/json',
+        authorization: `Bearer ${apiKey}`,
+        ...extraHeaders,
+      },
+      body: JSON.stringify(body),
+      signal,
+    });
+
+    if (!res.ok) {
+      const errText = await res.text().catch(() => res.statusText);
+      throw new Error(`OpenAI API ${res.status}: ${errText}`);
+    }
+
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let pending = '';
+    // Tool-call deltas arrive across multiple chunks indexed by `index`;
+    // each chunk supplies a fragment of the JSON-stringified arguments
+    // that we concat and parse on completion.
+    const pendingToolCalls = new Map();
+    let stopReason = null;
+    let usage = null;
+
+    function flushToolCalls() {
+      for (const tc of pendingToolCalls.values()) {
+        let input = {};
+        try { input = JSON.parse(tc.argsJson || '{}'); } catch { /* malformed → empty */ }
+        // Each yield is its own event; runtime treats them like Anthropic
+        // tool_use blocks.
+      }
+      // (yields happen below — split for readability since we can't yield from
+      // a non-generator helper without extra plumbing)
+    }
+
+    try {
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        pending += decoder.decode(value, { stream: true });
+        const lines = pending.split('\n');
+        pending = lines.pop();
+        for (const line of lines) {
+          const trimmed = line.trim();
+          if (!trimmed.startsWith('data:')) continue;
+          const data = trimmed.slice(5).trim();
+          if (!data) continue;
+          if (data === '[DONE]') {
+            for (const tc of pendingToolCalls.values()) {
+              let input = {};
+              try { input = JSON.parse(tc.argsJson || '{}'); } catch {}
+              yield { type: 'tool_use', id: tc.id, name: tc.name, input };
+            }
+            pendingToolCalls.clear();
+            yield { type: 'turn_end', stopReason: stopReason || 'stop', usage };
+            continue;
+          }
+          let event;
+          try { event = JSON.parse(data); } catch { continue; }
+
+          if (event.usage) usage = event.usage;
+
+          const choice = event.choices?.[0];
+          if (!choice) continue;
+          const delta = choice.delta || {};
+
+          if (typeof delta.content === 'string' && delta.content) {
+            yield { type: 'text_delta', text: delta.content };
+          }
+
+          if (Array.isArray(delta.tool_calls)) {
+            for (const tcDelta of delta.tool_calls) {
+              const idx = tcDelta.index ?? 0;
+              if (!pendingToolCalls.has(idx)) {
+                pendingToolCalls.set(idx, {
+                  id: tcDelta.id,
+                  name: tcDelta.function?.name,
+                  argsJson: '',
+                });
+              }
+              const tc = pendingToolCalls.get(idx);
+              if (tcDelta.id) tc.id = tcDelta.id;
+              if (tcDelta.function?.name) tc.name = tcDelta.function.name;
+              if (tcDelta.function?.arguments) tc.argsJson += tcDelta.function.arguments;
+            }
+          }
+
+          if (choice.finish_reason) stopReason = choice.finish_reason;
+        }
+      }
+      // Some servers (LM Studio in particular) close the stream without
+      // sending [DONE]. Flush any tool calls and emit turn_end so the
+      // runtime sees a clean termination.
+      if (pendingToolCalls.size) {
+        for (const tc of pendingToolCalls.values()) {
+          let input = {};
+          try { input = JSON.parse(tc.argsJson || '{}'); } catch {}
+          yield { type: 'tool_use', id: tc.id, name: tc.name, input };
+        }
+        pendingToolCalls.clear();
+      }
+      if (stopReason) yield { type: 'turn_end', stopReason, usage };
+    } finally {
+      try { reader.releaseLock(); } catch {}
+    }
+  };
+}

package/providers/transformers.esm.js

@@ -0,0 +1,273 @@
+// In-browser model renderer using transformers.js. One-shot generate
+// (not part of pip-runtime's turn loop) — hands the host a tokenizer +
+// model loaded over WebGPU and a streaming generate() that paints into
+// a Pip turnEl. Includes the download-progress UI and a `<think>` pill
+// for reasoning models, so consumers don't reinvent either.
+//
+// Usage:
+//   import { createTransformersRenderer } from
+//     '@nevescloud/pip/providers/transformers.esm.js';
+//
+//   const renderer = createTransformersRenderer();
+//   renderer.setModel({
+//     id: 'LiquidAI/LFM2.5-350M-ONNX',
+//     dtype: 'q4',
+//     maxTokens: 256,
+//     genParams: { temperature: 0.1, top_k: 50, repetition_penalty: 1.05 },
+//   });
+//   const text = await renderer.generate({
+//     messages,                  // chat messages array
+//     turnEl,                    // pip turnEl (download progress + <think> pill render here)
+//     setReplyText,              // pip's setReplyText
+//     signal,                    // optional AbortSignal for mid-stream cancel
+//   });
+//
+// Switching models: call setModel() again with a new config — the cached
+// model+tokenizer drop and reload on the next generate(). Within a single
+// model, repeat generate() calls reuse the loaded artifacts.
+
+import { showLoading, hideLoading } from '../pip-core.esm.js';
+
+const TRANSFORMERS_URL = 'https://cdn.jsdelivr.net/npm/@huggingface/transformers';
+
+let _tf = null;
+async function loadTransformers() {
+  if (!_tf) _tf = await import(/* @vite-ignore */ TRANSFORMERS_URL);
+  return _tf;
+}
+
+// Network hints injected at construction so the first generate() doesn't pay
+// the TLS handshake or the library fetch on the critical path. Bytes are
+// trivial vs. model weights; preconnect is free; modulepreload pulls the
+// library JS (~hundreds of KB gzipped) which the consumer was going to fetch
+// anyway by importing this provider. Idempotent and SSR-safe.
+let _hintsInjected = false;
+function injectNetworkHints() {
+  if (_hintsInjected || typeof document === 'undefined') return;
+  _hintsInjected = true;
+  const head = document.head;
+  if (!head) return;
+  const link = (rel, href, attrs = {}) => {
+    const el = document.createElement('link');
+    el.rel = rel;
+    el.href = href;
+    el.crossOrigin = 'anonymous';
+    for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v);
+    head.appendChild(el);
+  };
+  // Library origin: where transformers.js itself loads from.
+  link('preconnect', 'https://cdn.jsdelivr.net');
+  // Model origin: HF Hub serves model index + redirects to its blob CDN.
+  link('preconnect', 'https://huggingface.co');
+  // Library bytes: fetched in parallel with page load; executed only when
+  // loadTransformers() runs the dynamic import.
+  link('modulepreload', TRANSFORMERS_URL);
+}
+
+let _stylesInjected = false;
+function injectStyles() {
+  if (_stylesInjected || typeof document === 'undefined') return;
+  _stylesInjected = true;
+  const css = document.createElement('style');
+  css.textContent = `
+.pip-tx-think {
+  margin: 4px 0 8px;
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+}
+.pip-tx-think summary {
+  font-size: 11px;
+  color: var(--pip-ink-muted, #8a8a8a);
+  cursor: pointer;
+  list-style: none;
+  display: inline-block;
+  padding: 2px 9px;
+  border: 1px solid var(--pip-border, color-mix(in srgb, currentColor 18%, transparent));
+  border-radius: 100px;
+  user-select: none;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  opacity: 0.7;
+  transition: opacity 0.15s ease, border-color 0.15s ease;
+}
+.pip-tx-think summary::-webkit-details-marker { display: none; }
+.pip-tx-think summary:hover,
+.pip-tx-think[open] summary { opacity: 1; }
+.pip-tx-think.thinking summary {
+  animation: pip-tx-think-pulse 1.4s ease-in-out infinite;
+}
+@keyframes pip-tx-think-pulse {
+  0%, 100% { opacity: 0.5; }
+  50%      { opacity: 1; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .pip-tx-think.thinking summary { animation: none; opacity: 0.85; }
+}
+.pip-tx-think-body {
+  margin-top: 6px;
+  padding: 8px 10px;
+  font-size: 11px;
+  color: var(--pip-ink-muted, #8a8a8a);
+  background: color-mix(in srgb, currentColor 5%, transparent);
+  border-radius: 6px;
+  white-space: pre-wrap;
+  line-height: 1.5;
+  max-height: 240px;
+  overflow-y: auto;
+}
+`.trim();
+  document.head.appendChild(css);
+}
+
+function createThinkPill(turnEl) {
+  const details = document.createElement('details');
+  details.className = 'pip-tx-think thinking';
+  const summary = document.createElement('summary');
+  summary.textContent = 'thinking\u2026';
+  const body = document.createElement('div');
+  body.className = 'pip-tx-think-body';
+  details.append(summary, body);
+  const reply = turnEl.querySelector('.pip-reply');
+  turnEl.insertBefore(details, reply || null);
+  return { details, summary, body };
+}
+
+function splitThinking(text) {
+  const m = text.match(/<think>([\s\S]*?)<\/think>([\s\S]*)/i);
+  if (m) return { think: m[1].trim(), answer: m[2].trim() };
+  if (/<think>/i.test(text)) return { think: text.replace(/<\/?think>/gi, '').trim(), answer: null };
+  return { think: null, answer: text.trim() };
+}
+
+export function createTransformersRenderer() {
+  injectStyles();
+  injectNetworkHints();
+
+  let config = null;
+  let tokenizer = null;
+  let model = null;
+  let loadingPromise = null;
+
+  function setModel(c) {
+    if (!c || !c.id) {
+      config = c || null;
+      tokenizer = null;
+      model = null;
+      loadingPromise = null;
+      return;
+    }
+    if (config?.id === c.id && tokenizer && model) {
+      // Same model — keep loaded artifacts; allow other config tweaks.
+      config = c;
+      return;
+    }
+    config = c;
+    tokenizer = null;
+    model = null;
+    loadingPromise = null;
+  }
+
+  async function ensureLoaded(turnEl) {
+    if (model) return;
+    if (loadingPromise) return loadingPromise;
+    if (!config?.id) throw new Error('setModel({id, ...}) must be called before generate.');
+    if (typeof navigator === 'undefined' || !navigator.gpu) {
+      throw new Error('No WebGPU on this device — local models need it.');
+    }
+
+    loadingPromise = (async () => {
+      showLoading(turnEl, 'loading runtime\u2026', 0);
+      const tf = await loadTransformers();
+      const onProgress = (p) => {
+        if (p?.status === 'progress') {
+          const file = (p.file || '').split('/').pop() || '';
+          const pct = Math.round(p.progress || 0);
+          showLoading(turnEl, `${file} ${pct}%`, pct);
+        }
+      };
+      tokenizer = await tf.AutoTokenizer.from_pretrained(config.id, { progress_callback: onProgress });
+      model = await tf.AutoModelForCausalLM.from_pretrained(config.id, {
+        device: 'webgpu',
+        dtype: config.dtype || 'q4',
+        progress_callback: onProgress,
+      });
+      hideLoading(turnEl);
+    })().catch((err) => {
+      loadingPromise = null;
+      model = null;
+      hideLoading(turnEl);
+      throw err;
+    }).finally(() => { loadingPromise = null; });
+    return loadingPromise;
+  }
+
+  async function generate({ messages, turnEl, setReplyText, signal }) {
+    if (!config?.id) throw new Error('setModel({id, ...}) must be called before generate.');
+    await ensureLoaded(turnEl);
+
+    const tf = await loadTransformers();
+    const inputs = tokenizer.apply_chat_template(messages, {
+      add_generation_prompt: true,
+      return_tensors: 'pt',
+    });
+
+    const start = performance.now();
+    let buffer = '';
+    let pill = null;
+    let thinkClosedAt = null;
+
+    const streamer = new tf.TextStreamer(tokenizer, {
+      skip_prompt: true,
+      decode_kwargs: { skip_special_tokens: true },
+      callback_function: (chunk) => {
+        if (signal?.aborted) throw new DOMException('Aborted', 'AbortError');
+        buffer += chunk;
+        const closed = buffer.match(/<think>([\s\S]*?)<\/think>([\s\S]*)/i);
+        const opening = /<think>/i.test(buffer);
+        if (opening && !pill) pill = createThinkPill(turnEl);
+        if (closed) {
+          pill.body.textContent = closed[1].trim();
+          if (thinkClosedAt == null) {
+            thinkClosedAt = performance.now();
+            pill.summary.textContent = `thought for ${((thinkClosedAt - start) / 1000).toFixed(1)}s`;
+            pill.details.classList.remove('thinking');
+          }
+          setReplyText(turnEl, closed[2].trim(), true);
+        } else if (opening) {
+          pill.body.textContent = buffer.replace(/^[\s\S]*?<think>/i, '');
+          pill.body.scrollTop = pill.body.scrollHeight;
+        } else {
+          setReplyText(turnEl, buffer.trim(), true);
+        }
+      },
+    });
+
+    try {
+      await model.generate({
+        ...(inputs.input_ids ? inputs : { input_ids: inputs }),
+        max_new_tokens: config.maxTokens || 256,
+        do_sample: true,
+        ...(config.genParams || {}),
+        streamer,
+      });
+    } catch (err) {
+      if (err?.name === 'AbortError' || signal?.aborted) {
+        throw err?.name === 'AbortError' ? err : new DOMException('Aborted', 'AbortError');
+      }
+      throw err;
+    }
+
+    if (pill && thinkClosedAt == null) {
+      pill.summary.textContent = 'truncated mid-thought';
+      pill.details.classList.remove('thinking');
+    }
+    return splitThinking(buffer).answer || buffer.trim();
+  }
+
+  return {
+    setModel,
+    generate,
+    get currentModelId() { return config?.id || null; },
+  };
+}
+
+export { splitThinking };