尧图网页设计 
Project AIRI 开发日志深度解读Histoire 组件工作台与多语音提供商支持的落地实践【免费下载链接】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本篇技术指南基于 Project AIRI 开源仓库自托管、可语音实时对话的 AI 伴侣项目2025 年 3 月 20 日的开发日志展开聚焦两个核心技术升级为高度定制的 UI 组件库引入 Histoire 组件工作台Vite/Vue 原生的 Storybook 替代品以及将文本转语音能力从单一 ElevenLabs 扩展为支持 Microsoft SpeechAzure AI Speech等多家语音提供商。读完本文你将掌握 AIRI 如何用 Histoire 管理复杂主题化组件、如何通过unspeech与xsai/generate-speech搭建 OpenAI API 兼容的 TTS 服务以及整套语音设置 UI 的源码级实现脉络。背景十天内的界面工程大改距离上一篇开发日志仅 10 天AIRI 团队完成了密集的 UI 重构初始设置 UI 的动画效果得到改进并实现了可自定义的主题着色。这份开发日志用 世界线变动率 的趣味排版0.571024→1.382733记录了这两周的迭代节奏——UI 改进、更多 LLM 提供商与语音提供商集成以及首次在 Discord、bilibili 等社交平台发布。核心变化是由于有了模型单选组和导航项的彩色卡片以及可自定义主题组件在业务工作流中调试的难度明显上升直接拖慢了开发速度。这正是引入 Histoire 的契机。引入 Histoire为 Vite Vue 项目量身定制的组件工作台开发日志明确说明了选型理由Histoire 本质上是 Storybook但对 Vite 和 Vue.js 组合更加原生。这个选择在当前仓库中有完整的落地证据配置文件位于 packages/stage-ui/histoire.config.ts其中包含一整套针对 AIRI 定制的工作台配置主题与品牌theme.title设置为AIRI UItheme.logo同时指定./public/logo.svg作为深浅色 Logotheme.colors定义了一整套从#fafafa到#020202的灰色阶#121212作为 700 阶主色与 AIRI 的暗色设计语言保持一致。背景预设backgroundPresets内置 Transparent、White、Light gray、Dark gray、Black 五档背景方便在不同环境下校验组件对比度。组件分组tree.groups将组件树划分为 Design System、Common、Form、Dialogs、Menu、Misc、Data Pane、Widgets、Chat、Gadgets、Physics、Graphics、Providers 共 13 个分组覆盖了日志中提到的全部组件类别。部署路径vite.base设置为/ui/与日志中整个 UI 组件已部署到 Netlify 的/ui/路径的说法相互印证。工程化细节配置文件中的注释还记录了一个重要的构建约束——Histoire 会强制把所有node_modules模块打进单个vendor-*.js约 28 MiB超过 Cloudflare Workers 每个资源 25 MiB 的上限因此通过build.excludeFromVendorsChunk: [/\/node_modules\//]让 chunk 按导入图划分。与之配套的story:dev、story:build、story:build-base--base /ui、story:preview脚本定义在 packages/stage-ui/package.json 中日常工作流为# 本地开发组件工作台 pnpm story:dev # 构建并部署到 Netlify 的 /ui/ 路径 pnpm story:build-base工作台定制OKLCH 调色板、颜色滑块与专属 LogoHistoire 开箱即用地把整套 OKLCH 调色板一次性铺到画布上供参考但对 AIRI 团队来说能看 不等于 好用——要试出与 Project AIRI 主题一致的感觉还需要更顺手的工具。开发日志记录了两次关键定制重新实现颜色滑块让滑块交互更贴合 AIRI 的主题调性比 Histoire 默认实现更专业。设计专属 Logo将 Histoire 默认 Logo 和绿色主色替换为与 AIRI 主题一致的版本使工作台从品牌到配色完全融入项目。在仓库中可以看到更多配套的定制产物packages/stage-ui/stories/components 下提供了Colors.story.vue、ColorPickerControl.vue、ThemeColorsHueControl.vue、CharacterCardColorControls.vue等自定义 Story 控件其中ThemeColorsHueControl.vue正是颜色滑块这一定制点的实现载体也是 Histoire 生态中用 Story 自身组件扩展工作台能力的标准做法。组件库进度表单、菜单、图形与物理全套件这份开发日志以任务清单的形式记录了组件路线图的完成情况几乎覆盖了设置页所需的全部交互单元表单家族单选、单选组、模型目录、范围Range、输入、键值输入——模型单选组和导航项彩色卡片正是这次 UI 大改的核心载体。数据 GUI范围控件。菜单菜单项、菜单状态项——对应导航菜单动画和过渡的改进。图形3D 图形组件与项目的 Live2D / MMD / Spine / 立绘 / Three.js 模型驱动生态直接相关。物理光标动量cursor momentum组件配合 VueUse 的vueuse/motion实现交互动效。在源码结构上这些组件按form/、menu/、graphics/、physics/等目录组织在 packages/stage-ui/src/components 下与histoire.config.ts中的tree.groups一一对应可以直接对照查阅。语音能力跃迁从 ElevenLabs 独苗到多提供商支持日志中最具分量的技术节点是终于支持语音模型配置了——此前只能配置 ElevenLabs。这一突破的完整技术链路在仓库源码中有清晰的印证。底层链路unspeech xsai/generate-speech Azure关键推动力来自姊妹项目unspeech的 v0.1.2 版本通过xsai/generate-speech即可请求 Microsoft Speech 服务即 Azure AI Speech / 认知语音服务意味着微软也拥有了 OpenAI API 兼容的 TTS 服务。在 packages/stage-ui/package.json 中可以同时看到xsai/generate-speech、xsai/generate-transcription、xsai/generate-text以及unspeech这些依赖构成完整的语音合成与识别底座。源码级实现speech store 与 SSML 生成语音能力的核心逻辑集中在 packages/stage-ui/src/stores/modules/speech.ts值得注意的实现细节包括speech()动作接收 provider、model、input、voice 与 providerConfig内部通过generateSpeech()xsai/generate-speech真正发起请求并返回ArrayBuffer音频数据。对官方语音提供商还会注入airi_analytics埋点区分auto/manual触发与chat_auto_tts/manual_preview/settings_test来源。SSML 支持矩阵supportsSSML目前仅elevenlabs、microsoft-speech、azure-speech以及阿里云 cosyvoice-v2 特定模型开放 SSMLgenerateSSML()内部使用xastscript构建speakvoiceprosodyXML 树把pitch带符号百分比、rate、volume转译为 SSML prosody 属性toSignedPercent()负责把数值格式化为20%这样的字符串。可调参数pitch、rate、音量通过settings/speech/pitch默认 0、settings/speech/rate默认 1等 localStorage 键持久化多个窗口间通过 Pinia 同步synced: { state: true }。语音设置 UI试听面板与声音目录日志提到的 语音设置 UI 在仓库中落地为两个试听组件packages/stage-ui/src/components/scenarios/providers/speech-playground.vue通用版通过availableVoicesVoiceInfo[]驱动 FieldCombobox 选择声音支持普通文本与 SSML 双模式输入生成结果用URL.createObjectURL转成临时音频地址就地试听并妥善处理了revokeObjectURL的内存回收。packages/stage-ui/src/components/scenarios/providers/speech-playground-openai-compatible.vueOpenAI 兼容端点专用版generateSpeech由父级注入额外暴露 model 参数声音 ID 直接手填placeholder 为alloy。此外packages/stage-ui/src/libs/providers/attributes.ts 维护了一份完整的提供商属性目录可以看到microsoft-speech: paidCloud、azure-openai: paidCloud、azure-ai-foundry: paidCloud的定价与部署分类标记同时 ElevenLabs、OpenAI、Minimax、阿里云百炼、火山引擎、Deepgram TTS 等均在其中印证了支持所有 LLM 提供商与语音提供商大扩容的事实official-provider-speech还被标记为beginnerRecommended新手推荐。致敬 Neuro-samaAshley 声音 20% 音调为什么支持 Microsoft Speech 如此重要日志给出的答案充满项目特色Neuro-sama 第一版的 TTS 正是由微软提供支持使用名为Ashley的声音、加上20% 的音调即可得到与 Neuro-sama 第一版几乎相同的声音日志中附有一段可试听的音频。这标志着 AIRI 终于能通过新的语音能力接近 Neuro-sama 所能做到的事情。结合上文speech.ts中的toSignedPercent()与pitch设置这个 20% 音调 正是通过 pitch 参数20%在 SSML prosody 或 provider 配置中完成的。路线图与展望记忆、转录与嵌入日志末尾列出了明确的后续规划可以看出记忆与多模态接入是下一阶段重点记忆 Postgres Vectormemory-pgvector包对应实现嵌入设置 UI转录设置 UI记忆 DuckDB WASM Vector动作嵌入语音设置 UI从仓库包结构看packages/memory-pgvector 已提供 Postgres Vector 的记忆实现语音流式转录streaming transcription在stage-ui的libs/providers/stream-transcription与libs/speech/streaming-pipeline.ts中已有探索性代码均为路线图的推进留下了实现基础。小结这篇开发日志浓缩了 Project AIRI 两个关键的工程决策用 Histoire 统一高度定制化 UI 组件的开发与调试工作台并通过主题、Logo、颜色滑块、13 组分树实现深度定制以及以 unspeech xsai/generate-speech 打通 OpenAI API 兼容的 TTS 生态让 Azure 语音与 ElevenLabs 等提供商在统一语音设置 UI 下共存。如果你正在做 Vite Vue 的组件库建设或多提供商语音合成集成AIRI 在 packages/stage-ui 中的这套实现——从histoire.config.ts的完整配置、speech.ts的 SSML 生成到两个试听面板组件——都是可以直接参考的实战范例。【免费下载链接】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），仅供参考 Project AIRI 开发日志深度解读：Histoire 组件工作台与多语音提供商支持的落地实践
Project AIRI 开发日志深度解读Histoire 组件工作台与多语音提供商支持的落地实践【免费下载链接】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本篇技术指南基于 Project AIRI 开源仓库自托管、可语音实时对话的 AI 伴侣项目2025 年 3 月 20 日的开发日志展开聚焦两个核心技术升级为高度定制的 UI 组件库引入 Histoire 组件工作台Vite/Vue 原生的 Storybook 替代品以及将文本转语音能力从单一 ElevenLabs 扩展为支持 Microsoft SpeechAzure AI Speech等多家语音提供商。读完本文你将掌握 AIRI 如何用 Histoire 管理复杂主题化组件、如何通过unspeech与xsai/generate-speech搭建 OpenAI API 兼容的 TTS 服务以及整套语音设置 UI 的源码级实现脉络。背景十天内的界面工程大改距离上一篇开发日志仅 10 天AIRI 团队完成了密集的 UI 重构初始设置 UI 的动画效果得到改进并实现了可自定义的主题着色。这份开发日志用 世界线变动率 的趣味排版0.571024→1.382733记录了这两周的迭代节奏——UI 改进、更多 LLM 提供商与语音提供商集成以及首次在 Discord、bilibili 等社交平台发布。核心变化是由于有了模型单选组和导航项的彩色卡片以及可自定义主题组件在业务工作流中调试的难度明显上升直接拖慢了开发速度。这正是引入 Histoire 的契机。引入 Histoire为 Vite Vue 项目量身定制的组件工作台开发日志明确说明了选型理由Histoire 本质上是 Storybook但对 Vite 和 Vue.js 组合更加原生。这个选择在当前仓库中有完整的落地证据配置文件位于 packages/stage-ui/histoire.config.ts其中包含一整套针对 AIRI 定制的工作台配置主题与品牌theme.title设置为AIRI UItheme.logo同时指定./public/logo.svg作为深浅色 Logotheme.colors定义了一整套从#fafafa到#020202的灰色阶#121212作为 700 阶主色与 AIRI 的暗色设计语言保持一致。背景预设backgroundPresets内置 Transparent、White、Light gray、Dark gray、Black 五档背景方便在不同环境下校验组件对比度。组件分组tree.groups将组件树划分为 Design System、Common、Form、Dialogs、Menu、Misc、Data Pane、Widgets、Chat、Gadgets、Physics、Graphics、Providers 共 13 个分组覆盖了日志中提到的全部组件类别。部署路径vite.base设置为/ui/与日志中整个 UI 组件已部署到 Netlify 的/ui/路径的说法相互印证。工程化细节配置文件中的注释还记录了一个重要的构建约束——Histoire 会强制把所有node_modules模块打进单个vendor-*.js约 28 MiB超过 Cloudflare Workers 每个资源 25 MiB 的上限因此通过build.excludeFromVendorsChunk: [/\/node_modules\//]让 chunk 按导入图划分。与之配套的story:dev、story:build、story:build-base--base /ui、story:preview脚本定义在 packages/stage-ui/package.json 中日常工作流为# 本地开发组件工作台 pnpm story:dev # 构建并部署到 Netlify 的 /ui/ 路径 pnpm story:build-base工作台定制OKLCH 调色板、颜色滑块与专属 LogoHistoire 开箱即用地把整套 OKLCH 调色板一次性铺到画布上供参考但对 AIRI 团队来说能看 不等于 好用——要试出与 Project AIRI 主题一致的感觉还需要更顺手的工具。开发日志记录了两次关键定制重新实现颜色滑块让滑块交互更贴合 AIRI 的主题调性比 Histoire 默认实现更专业。设计专属 Logo将 Histoire 默认 Logo 和绿色主色替换为与 AIRI 主题一致的版本使工作台从品牌到配色完全融入项目。在仓库中可以看到更多配套的定制产物packages/stage-ui/stories/components 下提供了Colors.story.vue、ColorPickerControl.vue、ThemeColorsHueControl.vue、CharacterCardColorControls.vue等自定义 Story 控件其中ThemeColorsHueControl.vue正是颜色滑块这一定制点的实现载体也是 Histoire 生态中用 Story 自身组件扩展工作台能力的标准做法。组件库进度表单、菜单、图形与物理全套件这份开发日志以任务清单的形式记录了组件路线图的完成情况几乎覆盖了设置页所需的全部交互单元表单家族单选、单选组、模型目录、范围Range、输入、键值输入——模型单选组和导航项彩色卡片正是这次 UI 大改的核心载体。数据 GUI范围控件。菜单菜单项、菜单状态项——对应导航菜单动画和过渡的改进。图形3D 图形组件与项目的 Live2D / MMD / Spine / 立绘 / Three.js 模型驱动生态直接相关。物理光标动量cursor momentum组件配合 VueUse 的vueuse/motion实现交互动效。在源码结构上这些组件按form/、menu/、graphics/、physics/等目录组织在 packages/stage-ui/src/components 下与histoire.config.ts中的tree.groups一一对应可以直接对照查阅。语音能力跃迁从 ElevenLabs 独苗到多提供商支持日志中最具分量的技术节点是终于支持语音模型配置了——此前只能配置 ElevenLabs。这一突破的完整技术链路在仓库源码中有清晰的印证。底层链路unspeech xsai/generate-speech Azure关键推动力来自姊妹项目unspeech的 v0.1.2 版本通过xsai/generate-speech即可请求 Microsoft Speech 服务即 Azure AI Speech / 认知语音服务意味着微软也拥有了 OpenAI API 兼容的 TTS 服务。在 packages/stage-ui/package.json 中可以同时看到xsai/generate-speech、xsai/generate-transcription、xsai/generate-text以及unspeech这些依赖构成完整的语音合成与识别底座。源码级实现speech store 与 SSML 生成语音能力的核心逻辑集中在 packages/stage-ui/src/stores/modules/speech.ts值得注意的实现细节包括speech()动作接收 provider、model、input、voice 与 providerConfig内部通过generateSpeech()xsai/generate-speech真正发起请求并返回ArrayBuffer音频数据。对官方语音提供商还会注入airi_analytics埋点区分auto/manual触发与chat_auto_tts/manual_preview/settings_test来源。SSML 支持矩阵supportsSSML目前仅elevenlabs、microsoft-speech、azure-speech以及阿里云 cosyvoice-v2 特定模型开放 SSMLgenerateSSML()内部使用xastscript构建speakvoiceprosodyXML 树把pitch带符号百分比、rate、volume转译为 SSML prosody 属性toSignedPercent()负责把数值格式化为20%这样的字符串。可调参数pitch、rate、音量通过settings/speech/pitch默认 0、settings/speech/rate默认 1等 localStorage 键持久化多个窗口间通过 Pinia 同步synced: { state: true }。语音设置 UI试听面板与声音目录日志提到的 语音设置 UI 在仓库中落地为两个试听组件packages/stage-ui/src/components/scenarios/providers/speech-playground.vue通用版通过availableVoicesVoiceInfo[]驱动 FieldCombobox 选择声音支持普通文本与 SSML 双模式输入生成结果用URL.createObjectURL转成临时音频地址就地试听并妥善处理了revokeObjectURL的内存回收。packages/stage-ui/src/components/scenarios/providers/speech-playground-openai-compatible.vueOpenAI 兼容端点专用版generateSpeech由父级注入额外暴露 model 参数声音 ID 直接手填placeholder 为alloy。此外packages/stage-ui/src/libs/providers/attributes.ts 维护了一份完整的提供商属性目录可以看到microsoft-speech: paidCloud、azure-openai: paidCloud、azure-ai-foundry: paidCloud的定价与部署分类标记同时 ElevenLabs、OpenAI、Minimax、阿里云百炼、火山引擎、Deepgram TTS 等均在其中印证了支持所有 LLM 提供商与语音提供商大扩容的事实official-provider-speech还被标记为beginnerRecommended新手推荐。致敬 Neuro-samaAshley 声音 20% 音调为什么支持 Microsoft Speech 如此重要日志给出的答案充满项目特色Neuro-sama 第一版的 TTS 正是由微软提供支持使用名为Ashley的声音、加上20% 的音调即可得到与 Neuro-sama 第一版几乎相同的声音日志中附有一段可试听的音频。这标志着 AIRI 终于能通过新的语音能力接近 Neuro-sama 所能做到的事情。结合上文speech.ts中的toSignedPercent()与pitch设置这个 20% 音调 正是通过 pitch 参数20%在 SSML prosody 或 provider 配置中完成的。路线图与展望记忆、转录与嵌入日志末尾列出了明确的后续规划可以看出记忆与多模态接入是下一阶段重点记忆 Postgres Vectormemory-pgvector包对应实现嵌入设置 UI转录设置 UI记忆 DuckDB WASM Vector动作嵌入语音设置 UI从仓库包结构看packages/memory-pgvector 已提供 Postgres Vector 的记忆实现语音流式转录streaming transcription在stage-ui的libs/providers/stream-transcription与libs/speech/streaming-pipeline.ts中已有探索性代码均为路线图的推进留下了实现基础。小结这篇开发日志浓缩了 Project AIRI 两个关键的工程决策用 Histoire 统一高度定制化 UI 组件的开发与调试工作台并通过主题、Logo、颜色滑块、13 组分树实现深度定制以及以 unspeech xsai/generate-speech 打通 OpenAI API 兼容的 TTS 生态让 Azure 语音与 ElevenLabs 等提供商在统一语音设置 UI 下共存。如果你正在做 Vite Vue 的组件库建设或多提供商语音合成集成AIRI 在 packages/stage-ui 中的这套实现——从histoire.config.ts的完整配置、speech.ts的 SSML 生成到两个试听面板组件——都是可以直接参考的实战范例。【免费下载链接】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），仅供参考