Airi 项目实战VueUse useWebWorker 实现 Web Worker 注册与消息通信的完整指南【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airiWeb Worker 是浏览器将耗时任务移出主线程、避免 UI 卡顿的核心机制而 VueUse 的useWebWorker将其封装成了声明式、可响应式的 Vue 组合式函数。本指南以开源仓库 airi 中 VueUse 技能文档 .agents/skills/vueuse-functions/references/useWebWorker.md 为骨架讲解该函数的 API、状态与方法、类型声明并结合仓库中 packages/stage-ui/src/libs/inference/adapters/whisper.ts 等真实 Worker 使用场景帮你掌握在 Vue 3 / Nuxt 3 项目中安全、高效地托管多线程任务。一、useWebWorker 是什么useWebWorker是 VueUse 在 Browser 分类下提供的组合式函数其官方定位是 “Simple Web Workers registration and communication”简单的 Web Worker 注册与通信。它做的事情非常聚焦注册根据传入的 worker 脚本 URL或现成的Worker实例创建 Worker通信通过post方法向 Worker 线程发送消息通过响应式data接收 Worker 回传的最新数据销毁通过terminate方法随时终止 Worker 线程。与直接手写new Worker(url)addEventListener(message, ...)的样板代码相比useWebWorker的差异化价值在于数据是响应式的——data是一个 ref你可以直接放进watch或模板中Worker 每发来一条消息UI 就会自动更新而无需手动维护事件监听器的生命周期。在 airi 项目中该函数对应的 skill.agents/skills/vueuse-functions/SKILL.md将其调用规则标记为AUTO即在编写 Vue.js / Nuxt 功能时只要场景匹配就应优先使用这类组合式函数替代手写代码以保证可读性、可维护性与性能。二、基础用法与核心 API2.1 一行代码完成注册与通信import { useWebWorker } from vueuse/core const { data, post, terminate, worker } useWebWorker(/path/to/worker.js)调用后useWebWorker会根据给定的 URL 自动注册一个 Worker 实例并对外暴露四个返回值State类型描述dataRefany最近一次从 Worker 收到的数据引用可被watch监听以响应 Worker 的消息workerShallowRefWorker \| undefined指向 WebWorker 实例本身的引用Method签名描述post(message: any, transfer: Transferable[]): void(message: any, options?: StructuredSerializeOptions \| undefined): void向 Worker 线程发送数据terminate() void停止并终止 Workerdata作为响应式引用是与原生 Worker API 最大的区别原生场景下你需要手动worker.onmessage ...并自己把结果塞进某个变量而在 VueUse 场景下只需要import { watch } from vue watch(data, (msg) { // Worker 每次回传消息这里都会触发 console.log(worker replied:, msg) })post的两种重载对应浏览器原生Worker.postMessage的两种形态可以只传消息本身也可以附带Transferable[]传输数组如ArrayBuffer以零拷贝转移二进制数据或者传入StructuredSerializeOptions{ transfer }选项。这与 Web Worker 标准的结构化克隆语义完全一致。worker是ShallowRef意味着它是浅层响应式你可以读取.value拿到原生 Worker 实例做更底层的操作例如添加error事件监听但 Vue 不会对它内部的属性做深层的依赖追踪从而避免对原生对象做无谓的代理开销。2.2 类型声明全解useWebWorker完整公开的类型声明如下type PostMessage (typeof Worker.prototype)[postMessage] export interface UseWebWorkerReturnData any { data: ShallowRefData post: PostMessage terminate: () void worker: ShallowRefWorker | undefined } type WorkerFn (...args: unknown[]) Worker export declare function useWebWorkerT any( url: string, workerOptions?: WorkerOptions, options?: ConfigurableWindow, ): UseWebWorkerReturnT export declare function useWebWorkerT any( worker: Worker | WorkerFn, ): UseWebWorkerReturnT从类型声明可以提炼出两个关键设计点双重入参形态形态一useWebWorker(url, workerOptions?, options?)传入 Worker 脚本的 URL 字符串可选地携带原生WorkerOptions如{ type: module }、{ name: xxx }以及 VueUse 通用的ConfigurableWindow用于指定自定义window对象SSR 场景下可用于规避window未定义问题形态二useWebWorker(worker: Worker | WorkerFn)直接传入一个已创建的 Worker 实例或一个返回 Worker 的工厂函数。这意味着你可以先用new Worker(url, { type: module })精细化地构造 Worker再交给useWebWorker托管通信也可以传一个惰性工厂函数由它在合适的时机创建实例。泛型DataUseWebWorkerReturnData any支持为data声明具体类型。例如useWebWorker{ text: string }(/worker.js)后data.value会被推断为ShallowRef{ text: string }让通信消息具备类型安全。2.3 与 useWebWorkerFn 的定位区分在 VueUse 的 Browser 分类中紧邻useWebWorker的是 useWebWorkerFn“Run expensive functions without blocking the UI”。两者很容易混淆区别在于心智模型useWebWorker面向Worker 脚本文件的注册与双向通信适合你已经写好独立 worker 文件或第三方 Worker 库的场景本质是 “把 Worker 包装成响应式 API”useWebWorkerFn面向函数的封装你把一个普通函数传进去它自动把这个函数序列化进 Worker 执行并以 Promise 形式返回结果适合快速把一段计算密集逻辑丢到后台而不必单独维护 worker 文件。选型建议已有worker.js/ 复杂协议通信选useWebWorker只是想把某个纯函数挪到后台执行选useWebWorkerFn。三、在 Vue 3 中的完整实战示例下面给出一个可直接运行的组合式函数示例演示“监听响应式数据 发送任务 优雅终止”的完整链路。假设存在一个sum.worker.js负责接收{ type: calc, numbers: number[] }并回传累加结果。worker 侧sum.worker.jsself.onmessage (event) { const { type, numbers } event.data if (type calc) { const sum numbers.reduce((a, b) a b, 0) self.postMessage({ type: result, sum }) } }组件侧任意 .vue 组件script setup langts import { useWebWorker } from vueuse/core import { watch } from vue const { data, post, terminate } useWebWorker{ type: string; sum?: number }(/sum.worker.js) // 监听 Worker 回传结果 watch(data, (msg) { if (msg?.type result) console.log(sum , msg.sum) }) function start() { post({ type: calc, numbers: [1, 2, 3, 4, 5] }) } function stop() { terminate() } /script template button clickstart开始计算/button button clickstop终止 Worker/button /template关键点拆解post直接复用原生postMessage类型PostMessage因此发送ArrayBuffer转移场景可写作post(buffer, [buffer])或post(buffer, { transfer: [buffer] })terminate()调用后 Worker 被立即销毁data不再更新若再次需要 Worker应重新调用useWebWorker或重入工厂函数形态新建实例多个组件共享同一个 Worker 时要注意每个useWebWorker(/x.js)调用都会注册独立的 Worker 实例若希望全局共享一个实例可结合 VueUse 的createSharedComposable或createGlobalState进行封装。四、结合 airi 仓库Worker 在真实推理管线中的落地方式useWebWorker文档本身专注于“注册与通信”这一层抽象而 airi 仓库恰好提供了大量真实的 Worker 落地案例可以作为理解其背后机制的参照。需要说明的是仓库中的推理适配器为了精细控制消息协议、错误恢复与取消直接使用了原生WorkerAPI这些正是useWebWorker抽象掉的部分可作为对照阅读。4.1 Whisper 语音识别懒加载 消息协议 错误重启packages/stage-ui/src/libs/inference/adapters/whisper.ts 中Worker 在ensureWorker()内被惰性创建function ensureWorker(): Worker { if (!worker) { worker new Worker(workerUrl, { type: module }) messageListener (event: MessageEvent) { const data event.data // Forward unified protocol messages to subscribers if (data.type progress) { /* ... */ } else if (data.type model-ready) { /* ... */ } else if (data.type inference-result) { /* ... */ } else if (data.type error) { /* ... */ } } errorListener (event: ErrorEvent) { handleWorkerError(event) } worker.addEventListener(message, messageListener) worker.addEventListener(error, errorListener) } return worker }这段源码印证了几个与useWebWorker直接相关的实践见 whisper.ts{ type: module }WorkerOptions现代推理代码依赖 ESM 导入因此创建 Worker 时必须传入{ type: module }——对应useWebWorker(url, { type: module })的workerOptions参数基于data.type的统一消息协议Worker 与主线程之间通过{ type: progress | model-ready | inference-result | error, payload? }这类带判别字段的消息对象通信而useWebWorker的data恰好就是这个消息对象本身配合watch(data)即可按type分发消息监听与错误监听分离Worker 的error事件需要单独监听以触发重启逻辑handleWorkerError会做指数退避重启。在useWebWorker场景下可通过其暴露的workerShallowRefWorker | undefined手动addEventListener(error, ...)获得同样的能力懒创建Lazy CreationWorker 直到首次使用时才创建与useWebWorker的WorkerFn工厂函数形态() new Worker(url, { type: module })语义一致。4.2 背景移除与 Kokoro TTS同类模式仓库中还有两处同构实现可作延伸阅读packages/stage-ui/src/libs/inference/adapters/background-removal.tsworker new Worker(...)背景抠图推理放到 Worker 线程执行packages/stage-ui/src/libs/inference/adapters/kokoro.tsworker new Worker(...)TTS 合成同样在 Worker 中进行。而页面侧的使用证据见 apps/stage-web/src/pages/devtools/background-removal.vue注释明确写着 “Process in worker (off main thread!)”印证了这类推理任务的共同诉求——把 WebGPU / WASM 等重型计算放到 Worker 线程保证主线程 UI 流畅。此外airi 在 apps/stage-web/src/pages/index.vue 中通过 Vite 的?workerurl导入方式引用 VAD语音活动检测Worklet URLimport workletUrl from proj-airi/stage-ui/workers/vad/process.worklet?workerurl结合 apps/stage-web/src/workers/vad/index.ts 导出的createVAD/createVADStates可以看到现代前端工程中 Worker/Worklet 资源的引入模式——这类由构建工具生成的 URL正是useWebWorker(url)第一个参数最常见的实际来源。五、实践注意事项与选型建议5.1 何时使用 useWebWorker你的 Worker 是独立脚本文件且通信模型是“主线程发消息 → Worker 回消息”的双向消息流需要把 Worker 回传的数据以响应式方式驱动 UIwatch(data)/ 模板直接渲染希望省去手写addEventListener/removeEventListener的生命周期样板。5.2 何时应保留原生 Worker API从 whisper.ts 可以看到当项目需要精细的多消息类型协议、基于 requestId 的请求-响应关联、超时取消、错误重启与退避等复杂控制逻辑时直接在模块内封装一个原生 Worker 管理器往往更直接。此时仍可结合useWebWorker(worker: Worker | WorkerFn)的实例形态把通信层交给 VueUse、把协议层留给自己。5.3 SSR 与兼容性前提useWebWorker属于浏览器 API 的封装不适用于服务端渲染SSR环境——若在 Nuxt 中直接调用会因window/Worker不存在而报错。可在onMounted中调用或利用ConfigurableWindow选项注入自定义 window目标浏览器需支持 Web Workers现代浏览器均支持{ type: module }模式需要支持模块化 Worker 的浏览器版本跨域限制与原生 Worker 一致脚本 URL 需同源或目标服务器正确返回 CORS 头。六、总结useWebWorker以极小的 API 面data/post/terminate/worker覆盖了 Web Worker 从注册、通信到销毁的完整生命周期并将消息数据无缝接入 Vue 的响应式体系。本文从 useWebWorker.md 的文档骨架出发完整继承了其 API 表格与类型声明并结合 airi 仓库中 Whisper、背景移除、Kokoro 等推理适配器的真实 Worker 实现说明了模块化 Worker 创建、统一消息协议、错误监听与懒加载等核心机制。在实际项目中建议遵循 airi 的技能规范.agents/skills/vueuse-functions/SKILL.md优先用 VueUse 组合式函数替代手写样板在需要精细协议控制时再退回到原生 API——两者并不互斥而是同一套 Web Worker 机制在不同抽象层级上的互补选择。【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Airi 项目实战：VueUse useWebWorker 实现 Web Worker 注册与消息通信的完整指南
Airi 项目实战VueUse useWebWorker 实现 Web Worker 注册与消息通信的完整指南【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airiWeb Worker 是浏览器将耗时任务移出主线程、避免 UI 卡顿的核心机制而 VueUse 的useWebWorker将其封装成了声明式、可响应式的 Vue 组合式函数。本指南以开源仓库 airi 中 VueUse 技能文档 .agents/skills/vueuse-functions/references/useWebWorker.md 为骨架讲解该函数的 API、状态与方法、类型声明并结合仓库中 packages/stage-ui/src/libs/inference/adapters/whisper.ts 等真实 Worker 使用场景帮你掌握在 Vue 3 / Nuxt 3 项目中安全、高效地托管多线程任务。一、useWebWorker 是什么useWebWorker是 VueUse 在 Browser 分类下提供的组合式函数其官方定位是 “Simple Web Workers registration and communication”简单的 Web Worker 注册与通信。它做的事情非常聚焦注册根据传入的 worker 脚本 URL或现成的Worker实例创建 Worker通信通过post方法向 Worker 线程发送消息通过响应式data接收 Worker 回传的最新数据销毁通过terminate方法随时终止 Worker 线程。与直接手写new Worker(url)addEventListener(message, ...)的样板代码相比useWebWorker的差异化价值在于数据是响应式的——data是一个 ref你可以直接放进watch或模板中Worker 每发来一条消息UI 就会自动更新而无需手动维护事件监听器的生命周期。在 airi 项目中该函数对应的 skill.agents/skills/vueuse-functions/SKILL.md将其调用规则标记为AUTO即在编写 Vue.js / Nuxt 功能时只要场景匹配就应优先使用这类组合式函数替代手写代码以保证可读性、可维护性与性能。二、基础用法与核心 API2.1 一行代码完成注册与通信import { useWebWorker } from vueuse/core const { data, post, terminate, worker } useWebWorker(/path/to/worker.js)调用后useWebWorker会根据给定的 URL 自动注册一个 Worker 实例并对外暴露四个返回值State类型描述dataRefany最近一次从 Worker 收到的数据引用可被watch监听以响应 Worker 的消息workerShallowRefWorker \| undefined指向 WebWorker 实例本身的引用Method签名描述post(message: any, transfer: Transferable[]): void(message: any, options?: StructuredSerializeOptions \| undefined): void向 Worker 线程发送数据terminate() void停止并终止 Workerdata作为响应式引用是与原生 Worker API 最大的区别原生场景下你需要手动worker.onmessage ...并自己把结果塞进某个变量而在 VueUse 场景下只需要import { watch } from vue watch(data, (msg) { // Worker 每次回传消息这里都会触发 console.log(worker replied:, msg) })post的两种重载对应浏览器原生Worker.postMessage的两种形态可以只传消息本身也可以附带Transferable[]传输数组如ArrayBuffer以零拷贝转移二进制数据或者传入StructuredSerializeOptions{ transfer }选项。这与 Web Worker 标准的结构化克隆语义完全一致。worker是ShallowRef意味着它是浅层响应式你可以读取.value拿到原生 Worker 实例做更底层的操作例如添加error事件监听但 Vue 不会对它内部的属性做深层的依赖追踪从而避免对原生对象做无谓的代理开销。2.2 类型声明全解useWebWorker完整公开的类型声明如下type PostMessage (typeof Worker.prototype)[postMessage] export interface UseWebWorkerReturnData any { data: ShallowRefData post: PostMessage terminate: () void worker: ShallowRefWorker | undefined } type WorkerFn (...args: unknown[]) Worker export declare function useWebWorkerT any( url: string, workerOptions?: WorkerOptions, options?: ConfigurableWindow, ): UseWebWorkerReturnT export declare function useWebWorkerT any( worker: Worker | WorkerFn, ): UseWebWorkerReturnT从类型声明可以提炼出两个关键设计点双重入参形态形态一useWebWorker(url, workerOptions?, options?)传入 Worker 脚本的 URL 字符串可选地携带原生WorkerOptions如{ type: module }、{ name: xxx }以及 VueUse 通用的ConfigurableWindow用于指定自定义window对象SSR 场景下可用于规避window未定义问题形态二useWebWorker(worker: Worker | WorkerFn)直接传入一个已创建的 Worker 实例或一个返回 Worker 的工厂函数。这意味着你可以先用new Worker(url, { type: module })精细化地构造 Worker再交给useWebWorker托管通信也可以传一个惰性工厂函数由它在合适的时机创建实例。泛型DataUseWebWorkerReturnData any支持为data声明具体类型。例如useWebWorker{ text: string }(/worker.js)后data.value会被推断为ShallowRef{ text: string }让通信消息具备类型安全。2.3 与 useWebWorkerFn 的定位区分在 VueUse 的 Browser 分类中紧邻useWebWorker的是 useWebWorkerFn“Run expensive functions without blocking the UI”。两者很容易混淆区别在于心智模型useWebWorker面向Worker 脚本文件的注册与双向通信适合你已经写好独立 worker 文件或第三方 Worker 库的场景本质是 “把 Worker 包装成响应式 API”useWebWorkerFn面向函数的封装你把一个普通函数传进去它自动把这个函数序列化进 Worker 执行并以 Promise 形式返回结果适合快速把一段计算密集逻辑丢到后台而不必单独维护 worker 文件。选型建议已有worker.js/ 复杂协议通信选useWebWorker只是想把某个纯函数挪到后台执行选useWebWorkerFn。三、在 Vue 3 中的完整实战示例下面给出一个可直接运行的组合式函数示例演示“监听响应式数据 发送任务 优雅终止”的完整链路。假设存在一个sum.worker.js负责接收{ type: calc, numbers: number[] }并回传累加结果。worker 侧sum.worker.jsself.onmessage (event) { const { type, numbers } event.data if (type calc) { const sum numbers.reduce((a, b) a b, 0) self.postMessage({ type: result, sum }) } }组件侧任意 .vue 组件script setup langts import { useWebWorker } from vueuse/core import { watch } from vue const { data, post, terminate } useWebWorker{ type: string; sum?: number }(/sum.worker.js) // 监听 Worker 回传结果 watch(data, (msg) { if (msg?.type result) console.log(sum , msg.sum) }) function start() { post({ type: calc, numbers: [1, 2, 3, 4, 5] }) } function stop() { terminate() } /script template button clickstart开始计算/button button clickstop终止 Worker/button /template关键点拆解post直接复用原生postMessage类型PostMessage因此发送ArrayBuffer转移场景可写作post(buffer, [buffer])或post(buffer, { transfer: [buffer] })terminate()调用后 Worker 被立即销毁data不再更新若再次需要 Worker应重新调用useWebWorker或重入工厂函数形态新建实例多个组件共享同一个 Worker 时要注意每个useWebWorker(/x.js)调用都会注册独立的 Worker 实例若希望全局共享一个实例可结合 VueUse 的createSharedComposable或createGlobalState进行封装。四、结合 airi 仓库Worker 在真实推理管线中的落地方式useWebWorker文档本身专注于“注册与通信”这一层抽象而 airi 仓库恰好提供了大量真实的 Worker 落地案例可以作为理解其背后机制的参照。需要说明的是仓库中的推理适配器为了精细控制消息协议、错误恢复与取消直接使用了原生WorkerAPI这些正是useWebWorker抽象掉的部分可作为对照阅读。4.1 Whisper 语音识别懒加载 消息协议 错误重启packages/stage-ui/src/libs/inference/adapters/whisper.ts 中Worker 在ensureWorker()内被惰性创建function ensureWorker(): Worker { if (!worker) { worker new Worker(workerUrl, { type: module }) messageListener (event: MessageEvent) { const data event.data // Forward unified protocol messages to subscribers if (data.type progress) { /* ... */ } else if (data.type model-ready) { /* ... */ } else if (data.type inference-result) { /* ... */ } else if (data.type error) { /* ... */ } } errorListener (event: ErrorEvent) { handleWorkerError(event) } worker.addEventListener(message, messageListener) worker.addEventListener(error, errorListener) } return worker }这段源码印证了几个与useWebWorker直接相关的实践见 whisper.ts{ type: module }WorkerOptions现代推理代码依赖 ESM 导入因此创建 Worker 时必须传入{ type: module }——对应useWebWorker(url, { type: module })的workerOptions参数基于data.type的统一消息协议Worker 与主线程之间通过{ type: progress | model-ready | inference-result | error, payload? }这类带判别字段的消息对象通信而useWebWorker的data恰好就是这个消息对象本身配合watch(data)即可按type分发消息监听与错误监听分离Worker 的error事件需要单独监听以触发重启逻辑handleWorkerError会做指数退避重启。在useWebWorker场景下可通过其暴露的workerShallowRefWorker | undefined手动addEventListener(error, ...)获得同样的能力懒创建Lazy CreationWorker 直到首次使用时才创建与useWebWorker的WorkerFn工厂函数形态() new Worker(url, { type: module })语义一致。4.2 背景移除与 Kokoro TTS同类模式仓库中还有两处同构实现可作延伸阅读packages/stage-ui/src/libs/inference/adapters/background-removal.tsworker new Worker(...)背景抠图推理放到 Worker 线程执行packages/stage-ui/src/libs/inference/adapters/kokoro.tsworker new Worker(...)TTS 合成同样在 Worker 中进行。而页面侧的使用证据见 apps/stage-web/src/pages/devtools/background-removal.vue注释明确写着 “Process in worker (off main thread!)”印证了这类推理任务的共同诉求——把 WebGPU / WASM 等重型计算放到 Worker 线程保证主线程 UI 流畅。此外airi 在 apps/stage-web/src/pages/index.vue 中通过 Vite 的?workerurl导入方式引用 VAD语音活动检测Worklet URLimport workletUrl from proj-airi/stage-ui/workers/vad/process.worklet?workerurl结合 apps/stage-web/src/workers/vad/index.ts 导出的createVAD/createVADStates可以看到现代前端工程中 Worker/Worklet 资源的引入模式——这类由构建工具生成的 URL正是useWebWorker(url)第一个参数最常见的实际来源。五、实践注意事项与选型建议5.1 何时使用 useWebWorker你的 Worker 是独立脚本文件且通信模型是“主线程发消息 → Worker 回消息”的双向消息流需要把 Worker 回传的数据以响应式方式驱动 UIwatch(data)/ 模板直接渲染希望省去手写addEventListener/removeEventListener的生命周期样板。5.2 何时应保留原生 Worker API从 whisper.ts 可以看到当项目需要精细的多消息类型协议、基于 requestId 的请求-响应关联、超时取消、错误重启与退避等复杂控制逻辑时直接在模块内封装一个原生 Worker 管理器往往更直接。此时仍可结合useWebWorker(worker: Worker | WorkerFn)的实例形态把通信层交给 VueUse、把协议层留给自己。5.3 SSR 与兼容性前提useWebWorker属于浏览器 API 的封装不适用于服务端渲染SSR环境——若在 Nuxt 中直接调用会因window/Worker不存在而报错。可在onMounted中调用或利用ConfigurableWindow选项注入自定义 window目标浏览器需支持 Web Workers现代浏览器均支持{ type: module }模式需要支持模块化 Worker 的浏览器版本跨域限制与原生 Worker 一致脚本 URL 需同源或目标服务器正确返回 CORS 头。六、总结useWebWorker以极小的 API 面data/post/terminate/worker覆盖了 Web Worker 从注册、通信到销毁的完整生命周期并将消息数据无缝接入 Vue 的响应式体系。本文从 useWebWorker.md 的文档骨架出发完整继承了其 API 表格与类型声明并结合 airi 仓库中 Whisper、背景移除、Kokoro 等推理适配器的真实 Worker 实现说明了模块化 Worker 创建、统一消息协议、错误监听与懒加载等核心机制。在实际项目中建议遵循 airi 的技能规范.agents/skills/vueuse-functions/SKILL.md优先用 VueUse 组合式函数替代手写样板在需要精细协议控制时再退回到原生 API——两者并不互斥而是同一套 Web Worker 机制在不同抽象层级上的互补选择。【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考