voice-page-agent 3.0.4 → 3.0.6

package/README.md

@@ -29,6 +29,56 @@ npm i @vue/composition-api
 
 If you do not specify a tag, `npm i voice-page-agent` installs the `latest` tag.
 
+### Runtime Script Mode (No Vue Plugin Required)
+
+If you want "import one js and use immediately", use runtime entry:
+
+```html
+<script src="https://unpkg.com/voice-page-agent/dist/voice-page-agent.runtime.iife.js"></script>
+<script>
+  window.VoicePageAgentRuntime.mount({
+    pageAgent: {
+      baseURL: "https://your-api.example.com",
+      model: "qwen3.5-plus",
+      apiKey: "NA",
+      language: "zh-CN",
+      enablePanel: true,
+      enableMask: false
+    },
+    wakeWord: "布丁布丁",
+    buttonText: {
+      openText: "网页助手"
+    }
+  });
+</script>
+```
+
+Auto-mount is also supported:
+
+```html
+<script
+  src="https://unpkg.com/voice-page-agent/dist/voice-page-agent.runtime.iife.js"
+  data-vpa='{"pageAgent":{"baseURL":"https://your-api.example.com","model":"qwen3.5-plus","apiKey":"NA","language":"zh-CN","enablePanel":true,"enableMask":false},"wakeWord":"布丁布丁"}'
+></script>
+```
+
+Module usage (without Vue plugin):
+
+```ts
+import { mount } from "voice-page-agent/runtime";
+
+const runtime = mount({
+  pageAgent: {
+    baseURL: "https://your-api.example.com",
+    model: "qwen3.5-plus",
+    apiKey: "NA",
+    language: "zh-CN",
+  },
+});
+
+runtime.toggleAgentPanel();
+```
+
 ## Option Format
 
 Use this shape:
@@ -212,12 +262,26 @@ It renders:
 - `onStateChange(listener): () => void`
 - `snapshot` (current state)
 
+`voice-page-agent/runtime`:
+- `mount(options): VoicePageAgentRuntimeInstance`
+- `unmount(): void`
+- `getInstance(): VoicePageAgentRuntimeInstance | null`
+
+`VoicePageAgentRuntimeInstance`:
+- `startWake(): Promise<void>`
+- `stopWake(): void`
+- `openAgent(): Promise<RuntimePageAgent | null>`
+- `toggleAgentPanel(): Promise<void>`
+- `runCommand(text: string): Promise<void>`
+- `destroy(): void`
+
 ## Local Examples
 
 This repo includes runnable examples:
 
 - `examples/vue3`
 - `examples/vue2`
+- `examples/runtime`
 
 Run Vue3 demo:
 

package/dist/chunk-ORY5H42G.js

@@ -0,0 +1,539 @@
+// src/controller.ts
+var DEFAULT_WAKE_WORD = "\u5E03\u4E01\u5E03\u4E01";
+var DEFAULT_OPTIONS = {
+  wakeWord: [DEFAULT_WAKE_WORD],
+  enableHomophoneMatch: true,
+  wakeCooldownMs: 1400,
+  commandInitialTimeoutMs: 12e3,
+  commandSilenceTimeoutMs: 2600,
+  commandMaxWindowMs: 22e3,
+  recognitionLang: "zh-CN",
+  showAgentWhenWake: true,
+  autoStart: false
+};
+var HOMOPHONE_VARIANTS = {
+  \u5E03: ["\u8865", "\u4E0D", "\u6B65", "\u90E8"],
+  \u4E01: ["\u53EE", "\u9489", "\u76EF", "\u9876"],
+  \u5C0F: ["\u6653", "\u7B11", "\u6821", "\u7B71"],
+  \u73ED: ["\u822C", "\u6591", "\u534A"]
+};
+function normalizeText(text) {
+  return (text || "").toLowerCase().replace(/[\s,，.。!！?？;；:：、"'`~\-_/\\]/g, "");
+}
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function levenshteinDistance(source, target) {
+  const a = Array.from(source);
+  const b = Array.from(target);
+  if (a.length === 0) return b.length;
+  if (b.length === 0) return a.length;
+  const dp = Array.from(
+    { length: a.length + 1 },
+    () => Array.from({ length: b.length + 1 }, () => 0)
+  );
+  for (let i = 0; i <= a.length; i += 1) dp[i][0] = i;
+  for (let j = 0; j <= b.length; j += 1) dp[0][j] = j;
+  for (let i = 1; i <= a.length; i += 1) {
+    for (let j = 1; j <= b.length; j += 1) {
+      const cost = a[i - 1] === b[j - 1] ? 0 : 1;
+      dp[i][j] = Math.min(
+        dp[i - 1][j] + 1,
+        dp[i][j - 1] + 1,
+        dp[i - 1][j - 1] + cost
+      );
+    }
+  }
+  return dp[a.length][b.length];
+}
+function makeHomophoneRegex(words) {
+  const fuzzyWords = words.map((word) => {
+    const chars = Array.from(word);
+    return chars.map((char) => {
+      const variants = HOMOPHONE_VARIANTS[char] || [];
+      const options = [char, ...variants].map((item) => escapeRegExp(item));
+      return `(?:${options.join("|")})`;
+    }).join("");
+  });
+  return new RegExp(fuzzyWords.join("|"));
+}
+function buildWakeRegex(words) {
+  const items = words.map((word) => normalizeText(word)).filter(Boolean).sort((a, b) => b.length - a.length).map((word) => escapeRegExp(word));
+  const body = items.length ? items.join("|") : escapeRegExp(normalizeText(DEFAULT_WAKE_WORD));
+  return {
+    single: new RegExp(`(${body})`),
+    global: new RegExp(`(${body})`, "g")
+  };
+}
+function resolveOptions(options) {
+  if (!(options == null ? void 0 : options.pageAgent) || typeof options.pageAgent !== "object") {
+    throw new Error("voice-page-agent: options.pageAgent is required");
+  }
+  const wakeWordInput = options.wakeWord;
+  const wakeWord = Array.isArray(wakeWordInput) ? wakeWordInput.filter(Boolean) : [wakeWordInput || DEFAULT_WAKE_WORD];
+  return {
+    ...DEFAULT_OPTIONS,
+    ...options,
+    pageAgent: options.pageAgent,
+    pageAgentCtor: options.pageAgentCtor,
+    wakeWord
+  };
+}
+var VoicePageAgentController = class {
+  constructor(options) {
+    this.listeners = /* @__PURE__ */ new Set();
+    this.state = {
+      status: "off",
+      message: "\u8BED\u97F3\u52A9\u624B\u672A\u5F00\u542F",
+      supported: false,
+      enabled: false,
+      micPermissionGranted: false
+    };
+    this.recognition = null;
+    this.initAgentPromise = null;
+    this.voiceEnabled = false;
+    this.disposed = false;
+    this.awaitingCommand = false;
+    this.commandFinalText = "";
+    this.commandInterimText = "";
+    this.commandTimer = null;
+    this.commandDeadlineTimer = null;
+    this.restartBusy = false;
+    this.lastWakeAt = 0;
+    this.options = resolveOptions(options);
+    this.wakeRegex = buildWakeRegex(this.options.wakeWord);
+    this.wakeHomophoneRegex = this.options.enableHomophoneMatch ? makeHomophoneRegex(this.options.wakeWord) : null;
+    this.patchState({
+      supported: this.hasSpeechSupport(),
+      status: this.hasSpeechSupport() ? "off" : "unsupported",
+      message: this.hasSpeechSupport() ? "\u8BED\u97F3\u52A9\u624B\u672A\u5F00\u542F" : "\u5F53\u524D\u6D4F\u89C8\u5668\u4E0D\u652F\u6301\u8BED\u97F3\u8BC6\u522B\uFF0C\u5EFA\u8BAE\u4F7F\u7528 Chrome/Edge"
+    });
+    if (typeof window !== "undefined") {
+      const saved = window.localStorage.getItem("voice-page-agent-enabled");
+      if (saved === "1" || this.options.autoStart) {
+        void this.startWake();
+      }
+      void this.syncPermissionState();
+    }
+  }
+  get snapshot() {
+    return { ...this.state };
+  }
+  onStateChange(listener) {
+    this.listeners.add(listener);
+    listener(this.snapshot);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  async openAgent() {
+    return this.ensureAgent();
+  }
+  async toggleAgentPanel() {
+    if (typeof window === "undefined") return;
+    if (this.isAgentPanelVisible()) {
+      this.hideAgentPanel();
+      return;
+    }
+    await this.openAgent();
+  }
+  async startWake() {
+    if (this.disposed) return;
+    if (!this.hasSpeechSupport()) {
+      this.patchState({
+        status: "unsupported",
+        supported: false,
+        message: "\u5F53\u524D\u6D4F\u89C8\u5668\u4E0D\u652F\u6301\u8BED\u97F3\u8BC6\u522B\uFF0C\u5EFA\u8BAE\u4F7F\u7528 Chrome/Edge"
+      });
+      return;
+    }
+    if (this.voiceEnabled) {
+      this.patchState({
+        status: "waking",
+        enabled: true,
+        message: `\u8BED\u97F3\u5DF2\u5F00\u542F\uFF0C\u8BF7\u8BF4\u201C${this.options.wakeWord[0]}\u201D\u5524\u9192\u52A9\u624B`
+      });
+      return;
+    }
+    const granted = await this.requestMicrophonePermission();
+    if (!granted) {
+      this.patchState({
+        status: "error",
+        enabled: false,
+        micPermissionGranted: false,
+        message: "\u9EA6\u514B\u98CE\u6388\u6743\u5931\u8D25\uFF0C\u8BF7\u5141\u8BB8\u6D4F\u89C8\u5668\u4F7F\u7528\u9EA6\u514B\u98CE"
+      });
+      return;
+    }
+    const recognition = this.recognition || this.buildRecognition();
+    if (!recognition) {
+      this.patchState({
+        status: "error",
+        enabled: false,
+        message: "\u8BED\u97F3\u8BC6\u522B\u521D\u59CB\u5316\u5931\u8D25"
+      });
+      return;
+    }
+    this.recognition = recognition;
+    this.voiceEnabled = true;
+    this.patchState({
+      status: "waking",
+      enabled: true,
+      micPermissionGranted: true,
+      message: `\u8BED\u97F3\u5DF2\u5F00\u542F\uFF0C\u8BF7\u8BF4\u201C${this.options.wakeWord[0]}\u201D\u5524\u9192\u52A9\u624B`
+    });
+    window.localStorage.setItem("voice-page-agent-enabled", "1");
+    try {
+      recognition.start();
+    } catch {
+    }
+  }
+  stopWake() {
+    this.voiceEnabled = false;
+    this.awaitingCommand = false;
+    this.commandFinalText = "";
+    this.commandInterimText = "";
+    this.clearCommandTimer();
+    this.clearCommandDeadlineTimer();
+    this.patchState({
+      status: "off",
+      enabled: false,
+      message: "\u8BED\u97F3\u52A9\u624B\u5DF2\u5173\u95ED"
+    });
+    if (typeof window !== "undefined") {
+      window.localStorage.setItem("voice-page-agent-enabled", "0");
+    }
+    if (this.recognition) {
+      this.recognition.stop();
+    }
+  }
+  async runCommand(commandText) {
+    await this.executeVoiceCommand(commandText);
+  }
+  dispose() {
+    this.disposed = true;
+    this.stopWake();
+    if (this.recognition) {
+      this.recognition.abort();
+      this.recognition = null;
+    }
+    this.listeners.clear();
+  }
+  hasSpeechSupport() {
+    if (typeof window === "undefined") return false;
+    const runtimeWindow = window;
+    return Boolean(runtimeWindow.SpeechRecognition || runtimeWindow.webkitSpeechRecognition);
+  }
+  patchState(next) {
+    this.state = { ...this.state, ...next };
+    const snapshot = this.snapshot;
+    this.listeners.forEach((listener) => listener(snapshot));
+  }
+  clearCommandTimer() {
+    if (this.commandTimer !== null) {
+      window.clearTimeout(this.commandTimer);
+      this.commandTimer = null;
+    }
+  }
+  clearCommandDeadlineTimer() {
+    if (this.commandDeadlineTimer !== null) {
+      window.clearTimeout(this.commandDeadlineTimer);
+      this.commandDeadlineTimer = null;
+    }
+  }
+  composeCommandText() {
+    return `${this.commandFinalText} ${this.commandInterimText}`.trim();
+  }
+  scheduleFlushCommand(ms) {
+    this.clearCommandTimer();
+    this.commandTimer = window.setTimeout(() => {
+      this.flushVoiceCommand();
+    }, ms);
+  }
+  scheduleCommandDeadline() {
+    this.clearCommandDeadlineTimer();
+    this.commandDeadlineTimer = window.setTimeout(() => {
+      this.flushVoiceCommand();
+    }, this.options.commandMaxWindowMs);
+  }
+  flushVoiceCommand() {
+    this.clearCommandTimer();
+    this.clearCommandDeadlineTimer();
+    const command = this.sanitizeVoiceCommand(this.composeCommandText());
+    this.awaitingCommand = false;
+    this.commandFinalText = "";
+    this.commandInterimText = "";
+    void this.executeVoiceCommand(command);
+  }
+  isWakePhraseHit(text) {
+    var _a;
+    const normalized = normalizeText(text);
+    if (!normalized) return false;
+    if (this.options.wakeWord.some((word) => normalized.includes(normalizeText(word)))) {
+      return true;
+    }
+    if (this.options.enableHomophoneMatch && ((_a = this.wakeHomophoneRegex) == null ? void 0 : _a.test(normalized))) {
+      return true;
+    }
+    const candidates = this.options.wakeWord.map((word) => normalizeText(word));
+    for (const candidate of candidates) {
+      if (Math.abs(candidate.length - normalized.length) > 1) continue;
+      if (levenshteinDistance(normalized, candidate) <= 1) {
+        return true;
+      }
+    }
+    return false;
+  }
+  extractCommandAfterWake(text) {
+    const source = (text || "").trim();
+    if (!source) return "";
+    const match = source.match(this.wakeRegex.single);
+    if (!match || typeof match.index !== "number") return "";
+    const rest = source.slice(match.index + match[0].length);
+    return rest.replace(/^[\s,，.。!！?？;；:：、]+/, "").trim();
+  }
+  sanitizeVoiceCommand(text) {
+    return (text || "").replace(this.wakeRegex.global, "").replace(/^[\s,，.。!！?？;；:：、]+/, "").trim();
+  }
+  async requestMicrophonePermission() {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      stream.getTracks().forEach((track) => track.stop());
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  async syncPermissionState() {
+    var _a;
+    if (!("permissions" in navigator) || !((_a = navigator.permissions) == null ? void 0 : _a.query)) return;
+    try {
+      const result = await navigator.permissions.query({
+        name: "microphone"
+      });
+      this.patchState({ micPermissionGranted: result.state === "granted" });
+      result.onchange = () => {
+        this.patchState({ micPermissionGranted: result.state === "granted" });
+      };
+    } catch {
+    }
+  }
+  async ensureAgent() {
+    var _a;
+    if (typeof window === "undefined") return null;
+    const runtimeWindow = window;
+    const existingAgent = runtimeWindow.pageAgent;
+    if (existingAgent) {
+      const panelNode = document.getElementById("page-agent-runtime_agent-panel");
+      const canReuse = Boolean(existingAgent.panel && (panelNode == null ? void 0 : panelNode.isConnected) && !existingAgent.disposed);
+      if (canReuse && existingAgent.panel) {
+        existingAgent.panel.show();
+        existingAgent.panel.expand();
+        return existingAgent;
+      }
+      try {
+        (_a = existingAgent.dispose) == null ? void 0 : _a.call(existingAgent, "RECREATE_WITH_PANEL");
+      } catch {
+      }
+      runtimeWindow.pageAgent = void 0;
+    }
+    if (this.initAgentPromise) return this.initAgentPromise;
+    this.initAgentPromise = (async () => {
+      const Agent = this.options.pageAgentCtor || (await import('./page-agent-GVCWTXJY.js')).PageAgent;
+      let agent;
+      try {
+        agent = new Agent(this.options.pageAgent);
+      } catch (err) {
+        const message = err instanceof Error ? err.message : String(err || "");
+        const webglUnavailable = /webgl2 is required/i.test(message) || /webgl/i.test(message);
+        if (!webglUnavailable) {
+          throw err;
+        }
+        const fallbackConfig = {
+          ...this.options.pageAgent,
+          enableMask: false
+        };
+        agent = new Agent(fallbackConfig);
+      }
+      runtimeWindow.pageAgent = agent;
+      if (!agent.panel) {
+        throw new Error("Page Agent panel is disabled. Set pageAgent.enablePanel=true.");
+      }
+      agent.panel.show();
+      agent.panel.expand();
+      return agent;
+    })().catch((err) => {
+      console.error("[voice-page-agent] ensureAgent failed:", err);
+      this.patchState({
+        status: "error",
+        message: this.resolveAgentInitErrorMessage(err)
+      });
+      return null;
+    }).finally(() => {
+      this.initAgentPromise = null;
+    });
+    return this.initAgentPromise;
+  }
+  isAgentPanelVisible() {
+    const panelNode = document.getElementById("page-agent-runtime_agent-panel");
+    if (!panelNode) return false;
+    const style = window.getComputedStyle(panelNode);
+    return style.display !== "none" && style.visibility !== "hidden" && style.opacity !== "0";
+  }
+  hideAgentPanel() {
+    var _a, _b, _c, _d;
+    const runtimeWindow = window;
+    const agent = runtimeWindow.pageAgent;
+    if (agent == null ? void 0 : agent.panel) {
+      (_b = (_a = agent.panel).collapse) == null ? void 0 : _b.call(_a);
+      (_d = (_c = agent.panel).hide) == null ? void 0 : _d.call(_c);
+    }
+    const panelNode = document.getElementById("page-agent-runtime_agent-panel");
+    if (panelNode) {
+      panelNode.style.display = "none";
+      panelNode.style.opacity = "0";
+    }
+  }
+  resolveAgentInitErrorMessage(error) {
+    const raw = error instanceof Error ? error.message : String(error || "");
+    if (/Cannot read properties of undefined \(reading 'indexOf'\)/i.test(raw)) {
+      return "Page Agent \u8FD0\u884C\u65F6\u4F9D\u8D56\u52A0\u8F7D\u5931\u8D25\uFF08\u65E7\u7248\u6784\u5EFA\u517C\u5BB9\u95EE\u9898\uFF09\uFF0C\u8BF7\u5347\u7EA7 voice-page-agent \u5E76\u91CD\u88C5\u4F9D\u8D56\u3002";
+    }
+    return raw || "Page Agent \u521D\u59CB\u5316\u5931\u8D25";
+  }
+  async executeVoiceCommand(rawCommand) {
+    const command = this.sanitizeVoiceCommand(rawCommand);
+    if (!command) {
+      this.patchState({
+        status: "waking",
+        message: `\u672A\u8BC6\u522B\u5230\u6307\u4EE4\uFF0C\u8BF7\u518D\u8BF4\u4E00\u6B21\u201C${this.options.wakeWord[0]}\u201D`
+      });
+      return;
+    }
+    this.patchState({
+      status: "processing",
+      message: `\u5DF2\u8BC6\u522B\uFF1A${command}`
+    });
+    const agent = await this.ensureAgent();
+    if (!agent) return;
+    if (agent.status === "running") {
+      this.patchState({
+        status: "waking",
+        message: "\u52A9\u624B\u6B63\u5728\u6267\u884C\u4E2D\uFF0C\u8BF7\u7A0D\u540E\u518D\u8BF4"
+      });
+      return;
+    }
+    try {
+      await agent.execute(command);
+      this.patchState({
+        status: "waking",
+        message: `\u4EFB\u52A1\u5DF2\u63D0\u4EA4\u5B8C\u6210\uFF0C\u7EE7\u7EED\u7B49\u5F85\u201C${this.options.wakeWord[0]}\u201D`
+      });
+    } catch (err) {
+      this.patchState({
+        status: "error",
+        message: err instanceof Error ? err.message : "\u8BED\u97F3\u4EFB\u52A1\u6267\u884C\u5931\u8D25"
+      });
+    }
+  }
+  buildRecognition() {
+    const runtimeWindow = window;
+    const Ctor = runtimeWindow.SpeechRecognition || runtimeWindow.webkitSpeechRecognition;
+    if (!Ctor) return null;
+    const recognition = new Ctor();
+    recognition.lang = this.options.recognitionLang;
+    recognition.continuous = true;
+    recognition.interimResults = true;
+    recognition.maxAlternatives = 3;
+    recognition.onstart = () => {
+      if (!this.voiceEnabled) return;
+      this.patchState({
+        status: "waking",
+        message: `\u8BED\u97F3\u5DF2\u5F00\u542F\uFF0C\u8BF7\u8BF4\u201C${this.options.wakeWord[0]}\u201D\u5524\u9192\u52A9\u624B`
+      });
+    };
+    recognition.onresult = (event) => {
+      var _a;
+      for (let i = event.resultIndex; i < event.results.length; i += 1) {
+        const result = event.results[i];
+        const isFinal = Boolean(result == null ? void 0 : result.isFinal);
+        const transcript = String(((_a = result[0]) == null ? void 0 : _a.transcript) || "").trim();
+        if (!transcript) continue;
+        if (!this.awaitingCommand) {
+          if (!this.isWakePhraseHit(transcript)) continue;
+          const now = Date.now();
+          if (now - this.lastWakeAt < this.options.wakeCooldownMs) continue;
+          this.lastWakeAt = now;
+          this.awaitingCommand = true;
+          this.commandFinalText = "";
+          this.commandInterimText = "";
+          this.patchState({
+            status: "listening_command",
+            message: "\u5DF2\u5524\u9192\uFF0C\u8BF7\u8BF4\u51FA\u4F60\u7684\u6307\u4EE4\uFF08\u53EF\u8FDE\u7EED\u8BF4\u66F4\u957F\u5185\u5BB9\uFF09"
+          });
+          if (this.options.showAgentWhenWake) {
+            void this.ensureAgent();
+          }
+          const inlineCommand = isFinal ? this.extractCommandAfterWake(transcript) : "";
+          if (inlineCommand) {
+            this.commandFinalText = inlineCommand;
+            this.scheduleFlushCommand(this.options.commandSilenceTimeoutMs);
+          } else {
+            this.scheduleFlushCommand(this.options.commandInitialTimeoutMs);
+          }
+          this.scheduleCommandDeadline();
+          continue;
+        }
+        if (isFinal) {
+          this.commandFinalText = `${this.commandFinalText} ${transcript}`.trim();
+          this.commandInterimText = "";
+        } else {
+          this.commandInterimText = transcript;
+        }
+        this.patchState({
+          status: "listening_command",
+          message: `\u6B63\u5728\u8BC6\u522B\uFF1A${this.composeCommandText() || "\u8BF7\u7EE7\u7EED\u8BF4\u8BDD..."}`
+        });
+        this.scheduleFlushCommand(this.options.commandSilenceTimeoutMs);
+      }
+    };
+    recognition.onerror = (event) => {
+      const code = String(event.error || "");
+      if (code === "no-speech" || code === "aborted") return;
+      if (code === "not-allowed" || code === "service-not-allowed") {
+        this.voiceEnabled = false;
+        this.patchState({
+          status: "error",
+          enabled: false,
+          micPermissionGranted: false,
+          message: "\u9EA6\u514B\u98CE\u6743\u9650\u88AB\u62D2\u7EDD\uFF0C\u8BF7\u5728\u6D4F\u89C8\u5668\u8BBE\u7F6E\u4E2D\u5141\u8BB8\u9EA6\u514B\u98CE"
+        });
+        window.localStorage.setItem("voice-page-agent-enabled", "0");
+        return;
+      }
+      this.patchState({
+        status: "error",
+        message: `\u8BED\u97F3\u8BC6\u522B\u5F02\u5E38\uFF1A${code || "\u672A\u77E5\u9519\u8BEF"}`
+      });
+    };
+    recognition.onend = () => {
+      if (!this.voiceEnabled || this.disposed) return;
+      if (this.restartBusy) return;
+      this.restartBusy = true;
+      window.setTimeout(() => {
+        this.restartBusy = false;
+        if (!this.voiceEnabled || this.disposed) return;
+        try {
+          recognition.start();
+        } catch {
+        }
+      }, 320);
+    };
+    return recognition;
+  }
+};
+function createVoicePageAgent(options) {
+  return new VoicePageAgentController(options);
+}
+
+export { VoicePageAgentController, createVoicePageAgent };