thebird 1.2.5 → 1.2.7

package/.github/workflows/pages.yml

@@ -0,0 +1,31 @@
+name: Deploy GitHub Pages
+
+on:
+  push:
+    branches: [main]
+    paths: [docs/**]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deploy.outputs.page_url }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/configure-pages@v4
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs
+      - id: deploy
+        uses: actions/deploy-pages@v4

package/CLAUDE.md

@@ -42,24 +42,28 @@ Some providers need field adjustments:
 
 Applied automatically during request building.
 
-## gembird — Image Generation via Browser
+## gembird — Image Generation via Hybrid Approach
 
-**gembird** generates 4-view product images (front, back, left-side, right-side) using Gemini's web UI.
+**gembird** generates 4-view product images (front, back, left-side, right-side) using Gemini's web UI + HTTP API hybrid approach.
 
-### Why Browser Automation?
+### Workflow
 
-Gemini API free tier has 0 quota for image generation. Web UI works without limits. Tradeoff: slower than API, depends on UI stability, but no quota needed.
+1. **Auth via Browser**: Playwright CDP connects to Chrome on `localhost:9222` and navigates to gemini.google.com. User is already logged in.
+2. **Session Capture**: Intercept network requests to extract session: `{ cookies, xsrf, fsid, template }`. One-time capture, cached in `.gemini-session.json`.
+3. **HTTP Generation**: For each view, POST prompt to Cloud Code Assist API with captured session. Stream response.
+4. **Parse Response**: Extract image URLs from streaming response via regex.
+5. **Download**: Download PNG from `lh3.googleusercontent.com` with cookies. Save to disk.
 
-### Workflow
+### Why Hybrid?
+
+Gemini API free tier has 0 quota for image generation. Browser provides free auth. HTTP API (Cloud Code Assist) provides faster generation than DOM polling + canvas extraction. Hybrid = free auth + fast generation + no quota limits.
+
+### Performance
 
-1. Playwright CDP connection to Chrome on `localhost:9222`
-2. Navigate to gemini.google.com
-3. For each view:
-   - Type prompt asking for that view
-   - Poll for new `<img alt="AI generated">` (120s timeout)
-   - Extract via canvas: `canvas.drawImage(img) → canvas.toDataURL('image/png')`
-   - POST base64 to local HTTP save server
-4. Save 4 PNGs to output dir
+- Browser connection: one-time, 30s
+- HTTP generation per image: ~30-60s (Gemini's generation time, not polling overhead)
+- Download per image: ~5s
+- Total: ~4 images in 2-3 minutes (vs ~8 minutes with browser polling + canvas extraction)
 
 ### CLI
 
@@ -69,13 +73,14 @@ node index.js --image ref.png "prompt"
 node index.js --output ./dir "prompt"
 ```
 
-Arguments parsed in index.js lines 144-172.
+Arguments parsed in index.js lines 88-115.
 
 ### Observability
 
-- Chrome console logs Gemini errors
-- 120s timeout is conservative; real generation ~30-60s
-- If extraction fails, check `img[alt*="AI generated"]` selector
+- Session cached in `.gemini-session.json` (expires after 1 hour)
+- HTTP response streamed and parsed for image URLs
+- Download errors logged with context
+- Progress logged per view: `[1/4] front view...`
 
 ## Development Constraints
 

package/docs/app.js

@@ -0,0 +1,127 @@
+import { GoogleGenAI } from 'https://esm.sh/@google/genai@1';
+
+function convertMessages(messages) {
+  const contents = [];
+  for (const m of messages) {
+    const role = m.role === 'assistant' ? 'model' : 'user';
+    if (typeof m.content === 'string') {
+      if (m.content) contents.push({ role, parts: [{ text: m.content }] });
+      continue;
+    }
+    if (Array.isArray(m.content)) {
+      const parts = m.content.map(b => {
+        if (b.type === 'text' && b.text) return { text: b.text };
+        if (b.type === 'tool_use') return { functionCall: { name: b.name, args: b.input || {} } };
+        if (b.type === 'tool_result') {
+          let resp;
+          try { resp = typeof b.content === 'string' ? JSON.parse(b.content) : (b.content || {}); }
+          catch { resp = { result: b.content }; }
+          return { functionResponse: { name: b.name || 'unknown', response: resp } };
+        }
+        return null;
+      }).filter(Boolean);
+      if (parts.length) contents.push({ role, parts });
+    }
+  }
+  return contents;
+}
+
+function buildConfig({ system, temperature, maxOutputTokens } = {}) {
+  const config = { maxOutputTokens: maxOutputTokens ?? 8192, temperature: temperature ?? 0.7 };
+  if (system) config.systemInstruction = system;
+  return config;
+}
+
+const state = { messages: [], streaming: false, model: 'gemini-2.0-flash' };
+
+window.__debug = {
+  get state() { return state; },
+  get messages() { return state.messages; },
+};
+
+const $messages = document.getElementById('messages');
+const $input = document.getElementById('input');
+const $form = document.getElementById('chat-form');
+const $send = document.getElementById('send-btn');
+const $apiKey = document.getElementById('api-key');
+const $model = document.getElementById('model-select');
+const $status = document.getElementById('status');
+const $clear = document.getElementById('clear-btn');
+
+const savedKey = localStorage.getItem('gemini_api_key') || '';
+if (savedKey) $apiKey.value = savedKey;
+$apiKey.addEventListener('change', () => localStorage.setItem('gemini_api_key', $apiKey.value.trim()));
+$model.addEventListener('change', () => { state.model = $model.value; });
+
+function addMsg(role, text) {
+  const el = document.createElement('div');
+  el.className = 'msg ' + role;
+  el.textContent = text;
+  $messages.appendChild(el);
+  $messages.scrollTop = $messages.scrollHeight;
+  return el;
+}
+
+function setStatus(t) { $status.textContent = t; }
+
+async function sendMessage(userText) {
+  const apiKey = $apiKey.value.trim();
+  if (!apiKey) { addMsg('error', 'Enter a Gemini API key above.'); return; }
+  state.messages.push({ role: 'user', content: userText });
+  addMsg('user', userText);
+  state.streaming = true;
+  $send.disabled = true;
+  setStatus('Streaming…');
+  const modelEl = addMsg('model', '');
+  let full = '';
+  try {
+    const ai = new GoogleGenAI({ apiKey });
+    const stream = await ai.models.generateContentStream({
+      model: state.model,
+      contents: convertMessages(state.messages),
+      config: buildConfig({ temperature: 0.7 }),
+    });
+    for await (const chunk of stream) {
+      for (const candidate of (chunk.candidates || [])) {
+        for (const part of (candidate.content?.parts || [])) {
+          if (part.text && !part.thought) { full += part.text; modelEl.textContent = full; $messages.scrollTop = $messages.scrollHeight; }
+        }
+      }
+    }
+    if (!full) full = '(empty response)';
+    modelEl.textContent = full;
+    state.messages.push({ role: 'assistant', content: full });
+    setStatus('');
+  } catch (err) {
+    modelEl.remove();
+    addMsg('error', 'Error: ' + (err?.message || String(err)));
+    state.messages.pop();
+    setStatus('');
+  } finally {
+    state.streaming = false;
+    $send.disabled = false;
+    $input.focus();
+  }
+}
+
+$input.addEventListener('input', () => { $input.style.height = 'auto'; $input.style.height = Math.min($input.scrollHeight, 160) + 'px'; });
+
+$form.addEventListener('submit', e => {
+  e.preventDefault();
+  const text = $input.value.trim();
+  if (!text || state.streaming) return;
+  $input.value = '';
+  $input.style.height = 'auto';
+  sendMessage(text);
+});
+
+$input.addEventListener('keydown', e => {
+  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); $form.requestSubmit(); }
+});
+
+$clear.addEventListener('click', () => {
+  state.messages = [];
+  $messages.innerHTML = '';
+  setStatus('Cleared.');
+  setTimeout(() => setStatus(''), 1500);
+});

package/docs/index.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>thebird — Anthropic SDK → Gemini demo</title>
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  :root {
+    --bg: #0f1117; --surface: #1a1d27; --border: #2a2d3e;
+    --text: #e2e8f0; --muted: #64748b; --accent: #6366f1;
+    --user: #1e293b; --model: #0f2027;
+  }
+  body { background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; height: 100dvh; display: flex; flex-direction: column; }
+  header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
+  header h1 { font-size: 1.1rem; font-weight: 700; color: var(--accent); }
+  header span { font-size: 0.8rem; color: var(--muted); }
+  #key-row { display: flex; gap: 0.5rem; flex: 1; min-width: 240px; }
+  #api-key { flex: 1; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 0.4rem 0.75rem; border-radius: 6px; font-size: 0.85rem; outline: none; }
+  #api-key:focus { border-color: var(--accent); }
+  #model-select { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 0.4rem 0.5rem; border-radius: 6px; font-size: 0.85rem; outline: none; }
+  #messages { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
+  .msg { padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.9rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; max-width: 800px; }
+  .msg.user { background: var(--user); align-self: flex-end; border: 1px solid var(--border); }
+  .msg.model { background: var(--model); align-self: flex-start; border: 1px solid #1e3a4a; }
+  .msg.error { background: #2d1515; border: 1px solid #5a2020; color: #fca5a5; align-self: center; font-size: 0.8rem; }
+  form { padding: 1rem 1.5rem; border-top: 1px solid var(--border); display: flex; gap: 0.5rem; }
+  textarea { flex: 1; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 0.6rem 0.75rem; border-radius: 8px; font-size: 0.9rem; resize: none; outline: none; font-family: inherit; min-height: 42px; max-height: 160px; line-height: 1.5; }
+  textarea:focus { border-color: var(--accent); }
+  button { background: var(--accent); color: #fff; border: none; padding: 0.6rem 1.25rem; border-radius: 8px; font-size: 0.9rem; cursor: pointer; white-space: nowrap; }
+  button:disabled { opacity: 0.4; cursor: not-allowed; }
+  button#clear-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 0.4rem 0.75rem; font-size: 0.8rem; }
+  #status { font-size: 0.75rem; color: var(--muted); padding: 0 1.5rem 0.5rem; }
+</style>
+</head>
+<body>
+<header>
+  <h1>thebird</h1>
+  <span>Anthropic SDK format → Gemini API</span>
+  <div id="key-row">
+    <input id="api-key" type="password" placeholder="GEMINI_API_KEY" autocomplete="off" />
+    <select id="model-select">
+      <option value="gemini-2.0-flash">gemini-2.0-flash</option>
+      <option value="gemini-2.0-flash-thinking-exp">gemini-2.0-flash-thinking</option>
+      <option value="gemini-1.5-pro">gemini-1.5-pro</option>
+      <option value="gemini-1.5-flash">gemini-1.5-flash</option>
+    </select>
+    <button id="clear-btn" type="button">Clear</button>
+  </div>
+</header>
+<div id="messages"></div>
+<div id="status"></div>
+<form id="chat-form">
+  <textarea id="input" placeholder="Message… (Shift+Enter for newline)" rows="1"></textarea>
+  <button type="submit" id="send-btn">Send</button>
+</form>
+<script type="module" src="app.js"></script>
+</body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thebird",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "description": "Anthropic SDK to Gemini streaming bridge — drop-in proxy that translates Anthropic message format and tool calls to Google Gemini",
   "main": "index.js",
   "types": "index.d.ts",

package/wasi/component.js

@@ -0,0 +1,70 @@
+import { GoogleGenAI } from '@google/genai';
+
+function cleanSchema(s) {
+  if (!s || typeof s !== 'object') return s;
+  if (Array.isArray(s)) return s.map(cleanSchema);
+  const out = {};
+  for (const [k, v] of Object.entries(s)) {
+    if (k === 'additionalProperties' || k === '$schema') continue;
+    out[k] = cleanSchema(v);
+  }
+  return out;
+}
+
+function partToGemini(b) {
+  if (b.kind === 'text' && b.text) return { text: b.text };
+  if (b.kind === 'tool_use') return { functionCall: { name: b.toolName || '', args: b.toolInput ? JSON.parse(b.toolInput) : {} } };
+  if (b.kind === 'tool_result') {
+    let resp;
+    try { resp = JSON.parse(b.text || '{}'); } catch { resp = { result: b.text }; }
+    return { functionResponse: { name: b.toolName || 'unknown', response: resp } };
+  }
+  return null;
+}
+
+function convertMessages(messages) {
+  const contents = [];
+  for (const m of messages) {
+    const role = m.role === 'assistant' ? 'model' : 'user';
+    const parts = m.content.map(partToGemini).filter(Boolean);
+    if (parts.length) contents.push({ role, parts });
+  }
+  return contents;
+}
+
+function buildConfig({ system, temperature, maxOutputTokens } = {}) {
+  const config = {
+    maxOutputTokens: maxOutputTokens ?? 8192,
+    temperature: temperature ?? 0.7,
+  };
+  if (system) config.systemInstruction = system;
+  return config;
+}
+
+export async function generate(messages, config) {
+  const { apiKey, model, system, temperature, maxOutputTokens } = config;
+  if (!apiKey) return { text: '', error: 'apiKey required' };
+  try {
+    const ai = new GoogleGenAI({ apiKey });
+    const contents = convertMessages(messages);
+    const geminiConfig = buildConfig({ system, temperature, maxOutputTokens });
+    const response = await ai.models.generateContent({
+      model: model || 'gemini-2.0-flash',
+      contents,
+      config: geminiConfig,
+    });
+    const candidate = response.candidates?.[0];
+    if (!candidate) return { text: '', error: 'no candidates returned' };
+    const text = (candidate.content?.parts || [])
+      .filter(p => p.text && !p.thought)
+      .map(p => p.text)
+      .join('');
+    return { text, error: null };
+  } catch (err) {
+    return { text: '', error: err?.message || String(err) };
+  }
+}
+
+export function convertMessagesExport(messages) {
+  return JSON.stringify(convertMessages(messages));
+}

package/wasi/demo.js

@@ -0,0 +1,23 @@
+import { generate } from './dist/js/component.js';
+
+const apiKey = process.env.GEMINI_API_KEY;
+if (!apiKey) throw new Error('GEMINI_API_KEY env var required');
+
+const messages = [
+  {
+    role: 'user',
+    content: [{ kind: 'text', text: 'Say hello in exactly 5 words.' }],
+  },
+];
+
+const config = {
+  model: 'gemini-2.0-flash',
+  apiKey,
+  system: null,
+  temperature: 0.7,
+  maxOutputTokens: 256,
+};
+
+const result = await generate(messages, config);
+if (result.error) throw new Error('generate failed: ' + result.error);
+console.log(result.text);

package/wasi/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "thebird-wasi",
+  "version": "0.1.0",
+  "description": "WASI component wrapper for thebird — runs thebird in any WASI runtime or Node.js via jco transpile",
+  "type": "module",
+  "scripts": {
+    "build": "jco componentize component.js --wit wit/world.wit --world-name thebird --out dist/component.wasm",
+    "transpile": "jco transpile dist/component.wasm --out-dir dist/js",
+    "run": "jco run dist/component.wasm",
+    "demo": "node demo.js"
+  },
+  "devDependencies": {
+    "@bytecodealliance/jco": "^1.0.0"
+  },
+  "dependencies": {
+    "@google/genai": "^1.0.0"
+  }
+}

package/wasi/wit/world.wit

@@ -0,0 +1,45 @@
+package thebird:core@0.1.0;
+
+interface types {
+  record content-part {
+    kind: string,
+    text: option<string>,
+    tool-name: option<string>,
+    tool-input: option<string>,
+    tool-id: option<string>,
+  }
+
+  record message {
+    role: string,
+    content: list<content-part>,
+  }
+
+  record generate-config {
+    model: string,
+    api-key: string,
+    system: option<string>,
+    temperature: option<f32>,
+    max-output-tokens: option<u32>,
+  }
+
+  record generate-result {
+    text: string,
+    error: option<string>,
+  }
+
+  record stream-chunk {
+    chunk-type: string,
+    text-delta: option<string>,
+    tool-call-id: option<string>,
+    tool-name: option<string>,
+    finish-reason: option<string>,
+    error: option<string>,
+  }
+}
+
+world thebird {
+  use types.{message, generate-config, generate-result, stream-chunk};
+
+  export generate: func(messages: list<message>, config: generate-config) -> generate-result;
+  export convert-messages: func(messages: list<message>) -> string;
+}