prompt-api-polyfill 1.0.0 → 1.1.0

package/dot_env.json

@@ -3,6 +3,9 @@
   "projectId": "",
   "appId": "",
   "modelName": "",
+  "useAppCheck": false,
+  "reCaptchaSiteKey": "",
+  "useLimitedUseAppCheckTokens": true,
   "device": "webgpu",
   "dtype": "q4f16"
 }

package/package.json

@@ -1,21 +1,17 @@
 {
   "name": "prompt-api-polyfill",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Polyfill for the Prompt API (`LanguageModel`) backed by Firebase AI Logic, Gemini API, OpenAI API, or Transformers.js.",
   "type": "module",
-  "main": "./prompt-api-polyfill.js",
-  "module": "./prompt-api-polyfill.js",
-  "browser": "./prompt-api-polyfill.js",
+  "main": "./dist/prompt-api-polyfill.js",
+  "module": "./dist/prompt-api-polyfill.js",
+  "browser": "./dist/prompt-api-polyfill.js",
   "exports": {
-    ".": "./prompt-api-polyfill.js"
+    ".": "./dist/prompt-api-polyfill.js"
   },
   "files": [
-    "async-iterator-polyfill.js",
-    "json-schema-converter.js",
-    "multimodal-converter.js",
-    "prompt-api-polyfill.js",
-    "dot_env.json",
-    "backends/"
+    "dist/",
+    "dot_env.json"
   ],
   "sideEffects": true,
   "keywords": [
@@ -36,17 +32,26 @@
   "bugs": {
     "url": "https://github.com/GoogleChromeLabs/web-ai-demos/issues"
   },
-  "homepage": "https://github.com/GoogleChromeLabs/web-ai-demos/tree/main/prompt-api-polyfill/README.md",
+  "homepage": "https://github.com/GoogleChromeLabs/web-ai-demos/tree/main/prompt-api-polyfill",
   "license": "Apache-2.0",
   "scripts": {
-    "start": "npx http-server",
+    "start": "vite",
+    "build": "vite build",
+    "prepublishOnly": "npm run build",
     "sync:wpt": "node scripts/sync-wpt.js",
     "generate:wpt": "node scripts/list-backends.js && node scripts/generate-wpt-wrappers.js",
-    "test:wpt": "npm run sync:wpt && npm run generate:wpt && npx http-server -o /tests/wpt/index.html",
+    "test:wpt": "npm run sync:wpt && npm run generate:wpt && npx vite --open /tests/wpt/index.html",
     "fix": "npx prettier --write ."
   },
   "devDependencies": {
-    "http-server": "^14.1.1",
-    "prettier-plugin-curly": "^0.4.1"
+    "prettier": "^3.8.1",
+    "prettier-plugin-curly": "^0.4.1",
+    "vite": "^7.3.1"
+  },
+  "dependencies": {
+    "@google/genai": "^1.41.0",
+    "@huggingface/transformers": "^3.8.1",
+    "firebase": "^12.9.0",
+    "openai": "^6.22.0"
   }
 }

package/async-iterator-polyfill.js

@@ -1,16 +0,0 @@
-if (!ReadableStream.prototype[Symbol.asyncIterator]) {
-  ReadableStream.prototype[Symbol.asyncIterator] = async function* () {
-    const reader = this.getReader();
-    try {
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) {
-          return;
-        }
-        yield value;
-      }
-    } finally {
-      reader.releaseLock();
-    }
-  };
-}

package/backends/defaults.js

@@ -1,13 +0,0 @@
-/**
- * Default model versions for each backend.
- */
-export const DEFAULT_MODELS = {
-  firebase: { modelName: 'gemini-2.5-flash-lite' },
-  gemini: { modelName: 'gemini-2.0-flash-lite-preview-02-05' },
-  openai: { modelName: 'gpt-4o' },
-  transformers: {
-    modelName: 'onnx-community/gemma-3-1b-it-ONNX-GQA',
-    device: 'webgpu',
-    dtype: 'q4f16',
-  },
-};

package/backends/firebase.js

@@ -1,49 +0,0 @@
-import { initializeApp } from 'https://esm.run/firebase/app';
-import {
-  getAI,
-  getGenerativeModel,
-  GoogleAIBackend,
-  InferenceMode,
-} from 'https://esm.run/firebase/ai';
-import PolyfillBackend from './base.js';
-import { DEFAULT_MODELS } from './defaults.js';
-
-/**
- * Firebase AI Logic Backend
- */
-export default class FirebaseBackend extends PolyfillBackend {
-  #model;
-  #sessionParams;
-
-  constructor(config) {
-    super(config.modelName || DEFAULT_MODELS.firebase.modelName);
-    this.ai = getAI(initializeApp(config), { backend: new GoogleAIBackend() });
-  }
-
-  createSession(_options, sessionParams) {
-    this.#sessionParams = sessionParams;
-    this.#model = getGenerativeModel(this.ai, {
-      mode: InferenceMode.ONLY_IN_CLOUD,
-      inCloudParams: sessionParams,
-    });
-    return this.#model;
-  }
-
-  async generateContent(contents) {
-    const result = await this.#model.generateContent({ contents });
-    const usage = result.response.usageMetadata?.promptTokenCount || 0;
-    return { text: result.response.text(), usage };
-  }
-
-  async generateContentStream(contents) {
-    const result = await this.#model.generateContentStream({ contents });
-    return result.stream;
-  }
-
-  async countTokens(contents) {
-    const { totalTokens } = await this.#model.countTokens({
-      contents,
-    });
-    return totalTokens;
-  }
-}

package/backends/gemini.js

@@ -1,52 +0,0 @@
-import { GoogleGenerativeAI } from 'https://esm.run/@google/generative-ai';
-import PolyfillBackend from './base.js';
-import { DEFAULT_MODELS } from './defaults.js';
-
-/**
- * Google Gemini API Backend
- */
-export default class GeminiBackend extends PolyfillBackend {
-  #model;
-  #sessionParams;
-
-  constructor(config) {
-    super(config.modelName || DEFAULT_MODELS.gemini.modelName);
-    this.genAI = new GoogleGenerativeAI(config.apiKey);
-  }
-
-  createSession(options, sessionParams) {
-    this.#sessionParams = sessionParams;
-    const modelParams = {
-      model: options.modelName || this.modelName,
-      generationConfig: sessionParams.generationConfig,
-      systemInstruction: sessionParams.systemInstruction,
-    };
-    // Clean undefined systemInstruction
-    if (!modelParams.systemInstruction) {
-      delete modelParams.systemInstruction;
-    }
-
-    this.#model = this.genAI.getGenerativeModel(modelParams);
-    return this.#model;
-  }
-
-  async generateContent(contents) {
-    // Gemini SDK expects { role, parts: [...] } which matches our internal structure
-    const result = await this.#model.generateContent({ contents });
-    const response = await result.response;
-    const usage = response.usageMetadata?.promptTokenCount || 0;
-    return { text: response.text(), usage };
-  }
-
-  async generateContentStream(contents) {
-    const result = await this.#model.generateContentStream({ contents });
-    return result.stream;
-  }
-
-  async countTokens(contents) {
-    const { totalTokens } = await this.#model.countTokens({
-      contents,
-    });
-    return totalTokens;
-  }
-}

package/backends/openai.js

@@ -1,337 +0,0 @@
-import OpenAI from 'https://esm.run/openai';
-import PolyfillBackend from './base.js';
-import { DEFAULT_MODELS } from './defaults.js';
-
-/**
- * OpenAI API Backend
- */
-export default class OpenAIBackend extends PolyfillBackend {
-  #model;
-
-  constructor(config) {
-    super(config.modelName || DEFAULT_MODELS.openai.modelName);
-    this.config = config;
-    this.openai = new OpenAI({
-      apiKey: config.apiKey,
-      dangerouslyAllowBrowser: true, // Required for client-side usage
-    });
-  }
-
-  static availability(options = {}) {
-    if (options.expectedInputs) {
-      const hasAudio = options.expectedInputs.some(
-        (input) => input.type === 'audio'
-      );
-      const hasImage = options.expectedInputs.some(
-        (input) => input.type === 'image'
-      );
-      if (hasAudio && hasImage) {
-        return 'unavailable';
-      }
-    }
-    return 'available';
-  }
-
-  createSession(options, sessionParams) {
-    // OpenAI doesn't have a "session" object like Gemini, so we return a context object
-    // tailored for our generate methods.
-    this.#model = {
-      model: options.modelName || this.modelName,
-      temperature: sessionParams.generationConfig?.temperature,
-      top_p: 1.0, // Default to 1.0 as topK is not directly supported the same way
-      systemInstruction: sessionParams.systemInstruction,
-    };
-
-    const config = sessionParams.generationConfig || {};
-    if (config.responseSchema) {
-      const { schema, wrapped } = this.#fixSchemaForOpenAI(
-        config.responseSchema
-      );
-      this.#model.response_format = {
-        type: 'json_schema',
-        json_schema: {
-          name: 'response',
-          strict: true,
-          schema: schema,
-        },
-      };
-      this.#model.response_wrapped = wrapped;
-    } else if (config.responseMimeType === 'application/json') {
-      this.#model.response_format = { type: 'json_object' };
-    }
-
-    return this.#model;
-  }
-
-  /**
-   * OpenAI Structured Outputs require:
-   * 1. All fields in objects to be marked as 'required'.
-   * 2. Objects to have 'additionalProperties: false'.
-   * 3. The root must be an 'object'.
-   */
-  #fixSchemaForOpenAI(schema) {
-    if (typeof schema !== 'object' || schema === null) {
-      return { schema, wrapped: false };
-    }
-
-    const processNode = (node) => {
-      if (node.type === 'object') {
-        if (node.properties) {
-          node.additionalProperties = false;
-          node.required = Object.keys(node.properties);
-          for (const key in node.properties) {
-            processNode(node.properties[key]);
-          }
-        } else {
-          node.additionalProperties = false;
-          node.required = [];
-        }
-      } else if (node.type === 'array' && node.items) {
-        processNode(node.items);
-      }
-      return node;
-    };
-
-    // Deep clone to avoid side effects
-    const cloned = JSON.parse(JSON.stringify(schema));
-
-    if (cloned.type !== 'object') {
-      // Wrap in object as OpenAI requires object root
-      return {
-        wrapped: true,
-        schema: {
-          type: 'object',
-          properties: { value: cloned },
-          required: ['value'],
-          additionalProperties: false,
-        },
-      };
-    }
-
-    return {
-      wrapped: false,
-      schema: processNode(cloned),
-    };
-  }
-
-  #validateContent(messages) {
-    let hasImage = false;
-    let hasAudio = false;
-
-    for (const msg of messages) {
-      if (Array.isArray(msg.content)) {
-        for (const part of msg.content) {
-          if (part.type === 'image_url') {
-            hasImage = true;
-          }
-          if (part.type === 'input_audio') {
-            hasAudio = true;
-          }
-        }
-      }
-    }
-
-    if (hasImage && hasAudio) {
-      throw new Error(
-        'OpenAI backend does not support mixing images and audio in the same session. Please start a new session.'
-      );
-    }
-
-    return { hasImage, hasAudio };
-  }
-
-  #routeModel(hasAudio) {
-    // If the user explicitly provided a model in the session options, respect it.
-    // Otherwise, pick based on content.
-    if (this.#model.model !== this.modelName) {
-      return this.#model.model;
-    }
-
-    return hasAudio ? `${this.modelName}-audio-preview` : this.modelName;
-  }
-
-  async generateContent(contents) {
-    const { messages } = this.#convertContentsToInput(
-      contents,
-      this.#model.systemInstruction
-    );
-    const { hasAudio } = this.#validateContent(messages);
-    const model = this.#routeModel(hasAudio);
-
-    if (
-      model === `${this.modelName}-audio-preview` &&
-      this.#model.response_format
-    ) {
-      throw new DOMException(
-        `OpenAI audio model ('${model}') does not support structured outputs (responseConstraint).`,
-        'NotSupportedError'
-      );
-    }
-
-    const options = {
-      model: model,
-      messages: messages,
-    };
-
-    if (this.#model.temperature > 0) {
-      options.temperature = this.#model.temperature;
-    }
-
-    if (this.#model.response_format) {
-      options.response_format = this.#model.response_format;
-    }
-
-    try {
-      const response = await this.openai.chat.completions.create(options);
-
-      const choice = response.choices[0];
-      let text = choice.message.content;
-
-      if (this.#model.response_wrapped && text) {
-        try {
-          const parsed = JSON.parse(text);
-          if (parsed && typeof parsed === 'object' && 'value' in parsed) {
-            text = JSON.stringify(parsed.value);
-          }
-        } catch {
-          // Ignore parsing error, return raw text
-        }
-      }
-
-      const usage = response.usage?.prompt_tokens || 0;
-
-      return { text, usage };
-    } catch (error) {
-      console.error('OpenAI Generate Content Error:', error);
-      throw error;
-    }
-  }
-
-  async generateContentStream(contents) {
-    const { messages } = this.#convertContentsToInput(
-      contents,
-      this.#model.systemInstruction
-    );
-    const { hasAudio } = this.#validateContent(messages);
-    const model = this.#routeModel(hasAudio);
-
-    if (
-      model === `${this.modelName}-audio-preview` &&
-      this.#model.response_format
-    ) {
-      throw new DOMException(
-        `OpenAI audio model ('${model}') does not support structured outputs (responseConstraint).`,
-        'NotSupportedError'
-      );
-    }
-
-    const options = {
-      model: model,
-      messages: messages,
-      stream: true,
-    };
-
-    if (this.#model.temperature > 0) {
-      options.temperature = this.#model.temperature;
-    }
-
-    if (this.#model.response_format) {
-      options.response_format = this.#model.response_format;
-    }
-
-    try {
-      const stream = await this.openai.chat.completions.create(options);
-
-      // Convert OpenAI stream to an AsyncIterable that yields chunks
-      return (async function* () {
-        let firstChunk = true;
-        for await (const chunk of stream) {
-          let text = chunk.choices[0]?.delta?.content;
-          if (text) {
-            // Note: Unwrapping a wrapped object in a stream is complex.
-            // For now, streaming wrapped results will yield the full JSON including the wrapper.
-            yield {
-              text: () => text,
-              usageMetadata: { totalTokenCount: 0 },
-            };
-          }
-        }
-      })();
-    } catch (error) {
-      console.error('OpenAI Generate Content Stream Error:', error);
-      throw error;
-    }
-  }
-
-  async countTokens(contents) {
-    // OpenAI does not provide a public API endpoint for counting tokens before generation.
-    // Implementing countTokens strictly requires a tokenizer like `tiktoken`.
-    // For this initial implementation, we use a character-based approximation (e.g., text.length / 4)
-    // to avoid adding heavy WASM dependencies (`tiktoken`) to the polyfill.
-    let totalText = '';
-
-    if (Array.isArray(contents)) {
-      for (const content of contents) {
-        if (!content.parts) {
-          continue;
-        }
-        for (const part of content.parts) {
-          if (part.text) {
-            totalText += part.text;
-          } else if (part.inlineData) {
-            // Approximate image token cost (e.g., ~1000 chars worth)
-            totalText += ' '.repeat(1000);
-          }
-        }
-      }
-    }
-
-    return Math.ceil(totalText.length / 4);
-  }
-
-  #convertContentsToInput(contents, systemInstruction) {
-    const messages = [];
-
-    // System instructions
-    if (systemInstruction) {
-      messages.push({
-        role: 'system',
-        content: systemInstruction,
-      });
-    }
-
-    for (const content of contents) {
-      const role = content.role === 'model' ? 'assistant' : 'user';
-      const contentParts = [];
-
-      for (const part of content.parts) {
-        if (part.text) {
-          contentParts.push({ type: 'text', text: part.text });
-        } else if (part.inlineData) {
-          const { data, mimeType } = part.inlineData;
-          if (mimeType.startsWith('image/')) {
-            contentParts.push({
-              type: 'image_url',
-              image_url: { url: `data:${mimeType};base64,${data}` },
-            });
-          } else if (mimeType.startsWith('audio/')) {
-            contentParts.push({
-              type: 'input_audio',
-              input_audio: {
-                data: data,
-                format: mimeType.split('/')[1] === 'mpeg' ? 'mp3' : 'wav',
-              },
-            });
-          }
-        }
-      }
-
-      // Simplification: if only one text part, just send string content for better compatibility
-      // but multimodal models usually prefer the array format.
-      // We'll keep the array format for consistency with multimodal inputs.
-      messages.push({ role, content: contentParts });
-    }
-
-    return { messages };
-  }
-}