AIRI DevLog @ 2025.03.20:自定义主题 UI、Histoire 组件工作台与多 TTS 语音提供商接入实录 AIRI DevLog 2025.03.20自定义主题 UI、Histoire 组件工作台与多 TTS 语音提供商接入实录【免费下载链接】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本文基于 AIRI整理聚焦日志中披露的三条技术主线可定制主题配色下的 UI 组件调试困境、引入 Histoire 构建 Vue 组件工作台、以及借助 unspeech 与xsai/generate-speech打通 MicrosoftAzure语音服务的 OpenAI 兼容 TTS 链路。文中所有实现细节均可回溯源仓库源码验证。写在前面这篇 DevLog 在讲什么AIRI 是一个自托管的 AI 陪伴项目Self-hosted你拥有的 Grok Companion目标是实时语音对话、进入 Minecraft / Factorio 等世界支持 Web / macOS / Windows。2025.03.20 的这篇 DevLog 记录了 2025.03.10 之后十天内的工作成果核心集中在三件事UI 全面重构与主题可定制化初始化设置界面、动画改进、可定制主题配色上线随之而来的是彩色卡片 自定义主题给业务调试带来的复杂度引入 Histoire 作为 UI 组件工作台一个比 Storybook 更贴合 Vite Vue 组合的方案用于在业务工作流之外独立预览、调试组件并定制了色板滑杆、专属 Logo多 TTS 语音提供商接入此前仅支持 ElevenLabs 配置借助 unspeechv0.1.2与xsai/generate-speech首次实现对 MicrosoftAzure AI / Cognitive语音服务的 OpenAI API 兼容 TTS 请求并借此复刻 Neuro-sama 初版MicrosoftAshley音色 20%pitch的声音。同时日志还给出了两条待办清单已完成 / 规划中并预告了 MemoryPostgres/Vector 与 DuckDB WASM、Embedding / Transcription 设置 UI 等后续方向。本文将逐一展开并结合仓库源码补足参数与实现细节。主题可定制 UI 的调试困境为什么需要 Histoire日志中提到初始设置 UI 设计与动画改进已完成可定制主题配色也在十天前实现。当模型单选组卡片model radio group与导航项都带有彩色卡片、且主题可自由定制时开发者明显会在业务工作流中调试 UI 组件时吃苦头调试成本会拖慢开发节奏。这正是引入 Histoire 的直接动机。Histoirehistoire.dev本质上是一个类似 Storybook 的组件开发环境但对 Vite Vue 组合更加原生。在仓库中AIRI 的组件库 packages/stage-ui 通过 histoire.config.ts 配置了这个工作台使用histoire/plugin-vue的HstVue()插件加载 Vue 组件routerMode: hash配合vite.base: /ui/部署到/ui/路径内置backgroundPresetsTransparent / White / Light gray / Dark gray / Black方便在多种底板上观察组件通过tree.groups将组件按Design System、Common、Form、Dialogs、Menu、Misc、Data Pane、Widgets、Chat、Gadgets、Physics、Graphics、Providers等分组组织正好对应日志中罗列的 Roadmap 组件类别。一个值得注意的工程细节是配置中的build.excludeFromVendorsChunk。注释说明了原因Histoire 会强制把node_modules全部打进单个vendor-*.js在该项目上会产出 28 MiB 的 chunk超过 Cloudflare Workers 单资产 25 MiB 的限制因此通过正则/\/node_modules\//把依赖排除出 vendor chunk让 Rollup 按导入图自然分包避免每次新增依赖都要手工维护分包名单。这是把 Histoire 部署到边缘平台时非常实用的一个坑位提示。为 Histoire 定制主题色板滑杆与专属 Logo默认的 Histoire 会把整块 OKLCH 色板一次性铺满画布供参考但对想感受 Project AIRI 主题氛围的调试来说不够贴切。日志作者因此重新实现了色板滑杆color slider让取色体验更贴合 AIRI 的主题随后又为 UI 页面设计了专属 Logo并把默认的绿色系配色替换为 AIRI 风格使工作台从观感到品牌都完全对齐。在 histoire.config.ts 中可以看到配套的主题定制theme: { title: AIRI UI, logo: { dark: ./public/logo.svg, light: ./public/logo.svg, }, colors: { primary: { 50: #fafafa, 100: #f4f4f5, 200: #e4e4e7, 300: #d4d4d8, 400: #a1a1aa, 500: #71717a, 600: #52525b, 700: #121212, 800: #0a0a0a, 900: #020202, }, gray: { 50: #fafafa, 100: #f4f4f5, 200: #e4e4e7, 300: #d4d4d8, 400: #a1a1aa, 500: #71717a, 600: #52525b, 700: #121212, 750: #0e0e0e, 800: #0a0a0a, 850: #060606, 900: #020202, }, }, },整个 UI 组件库已照例部署到 Netlify 的/ui/路径可以直接在浏览器里查看各组件的真实样式。仓库内也保留了组件工作台的故事文件story例如 Colors.story.vue、TypographySans.story.vue、TypographyMono.story.vue 以及 ColorPickerControl.vue、CharacterCardColorControls.vue 等可作为搭建自家 Histoire 工作台的参考。UI 组件 Roadmap 进度从 Form 到 Physics 的清单日志以清单形式总结了这十天 UI 组件层面的产出覆盖了 Roadmap 上几乎全部待办组件Form 类Form、Radio、Radio Group、Model Catalog、Range、Input、Key Value InputData Gui 类RangeMenu 类Menu、Menu Item、Menu Status ItemGraphics 类3DPhysics 类Cursor Momentum以及更多未逐一列出的内容。同一时期还进行了 momentum光标动量与 3D 的实验并展示了全新的 Speech 设计new-ui-v4-speech系列截图见本文「语音配置 UI 与 Speech 模块」小节。结合源码看这些组件与阶段化 UI 库 packages/stage-ui/src 的组织方式一一对应。比如RadioCardManySelect、RadioCardSimple、VoiceCardManySelect这类带搜索、自定义输入与展开/收起能力的卡片选择器已经在语音设置页中被实际使用详见下文。这种先建组件工作台 → 再在业务页面复用的流程正是日志引入 Histoire 想要达到的效果。Speech 能力突破从仅 ElevenLabs 到多提供商 TTS日志最重要的一项技术进展是语音能力的扩展我们终于支持了语音模型配置 此前只能配置 ElevenLabs。得益于我们另一个项目 unspeech 的新版本v0.1.2现在可以通过xsai/generate-speech请求 Microsoft Speech service即 Azure AI Speech service / Cognitive Speech service这意味着我们终于有了一个针对 Microsoft 的 OpenAI API 兼容 TTS。在仓库中这一实现是可验证的packages/stage-ui/package.json 同时依赖xsai/generate-speechcatalog 版本与unspeechpackages/stage-pages/src/pages/settings/modules/speech.vue 直接import { generateSpeech } from xsai/generate-speech并在试听流程中调用const response await generateSpeech({ ...provider.speech( model, withManualPreviewAnalytics(speechRequest.providerConfig, previewProvider, previewAnalytics.voice_type), ), input: speechRequest.input, voice: voice.id, }) audioUrl.value URL.createObjectURL(new Blob([response]))提供商注册表 packages/stage-ui/src/libs/providers/providers/unspeech/index.ts 中注册了microsoft-speech提供商createProviderConfig使用扩展了region字段的配置 schemamicrosoftSpeechConfigSchema unspeechConfigSchema.extend({ region: z.string().optional() })createProvider通过createUnMicrosoft(config.apiKey.trim(), config.baseUrl?.trim() ?? )构建实例listModels返回模型v1listVoices则基于createUnMicrosoft实例与config.region拉取可用音色列表。同样的注册表里还并列了deepgram-ttsAura 系列模型、alibaba-cloud-model-studioCosyVoice v1/v2、volcengine等提供商印证了多 TTS 提供商已经是 AIRI 语音模块的既定架构。为什么这对 AIRI 如此重要日志给出了一个很感性的理由Neuro-sama 初版的 TTS 正是由 Microsoft 提供使用名为Ashley的音色并叠加20%的 pitch。借助新的 Microsoft Speech 支持只要选择Ashley音色并把 pitch 调到20%就能得到与 Neuro-sama 初版几乎一致的声音——日志附带的试听音频ashley-pitch-test.mp3正是这一效果的直接演示。这意味着 AIRI 在向Neuro-sama 能做的事逼近Speech 能力从此补上了关键一环。语音配置 UI 与 Speech 模块源码里的实际操作面日志展示了全新的 Speech 设计截图new-ui-v4-speech系列。在源码层面语音设置被拆成两个层次1. Speech 模块页packages/stage-pages/src/pages/settings/modules/speech.vue提供「提供商 音色选择」区以RadioCardSimple列出所有可选语音源含speech-noop占位未配置任何提供商时会显示带跳转链接的引导提示模型选择区supportsModelListing时用RadioCardManySelect展示提供商模型列表支持搜索、自定义输入、展开/收起对 OpenAI Compatible 提供商则退化为手动输入模型名如tts-1模型加载失败或无模型时也会降级为手动输入音色选择区VoiceCardManySelect支持音色搜索、试听play_sample、自定义音色名输入并对不支持当前模型的音色给出警告语音参数Pitch范围 -100% ~ 100%步长 1%与SSML 开关Enable Speech Synthesis Markup Language用于对语音输出做更精细控制试听区Playground可切换普通文本 / 原始 SSML输入点击生成后播放并自动清理URL.createObjectURL防止内存泄漏。2. 各提供商设置页以 microsoft-speech.vue 为例默认模型v1默认区域eastasia可手动修改例如换成eastus等 Azure 区域默认音色参数pitch: 0、speed: 1.0、volume: 0基础设置区提供region输入框音色设置区提供 Pitch-100% ~ 100%、Speed0.5 ~ 2.0步长 0.01、Volume-100% ~ 100%三个滑杆API Key 配置完成后自动加载可用音色列表loadVoicesForProviderAPI Key 或 region 变化时重新拉取生成语音时若未使用 SSML会调用speechStore.generateSSML把文本、音色与 pitch 组装成 SSML 再请求核心 SSML 生成逻辑位于 packages/stage-ui/src/stores/modules/speech.tsgenerateSSML会基于voice.languages[0]?.code || en-US生成speak根节点并把 pitch 按toSignedPercent写入prosody最后toXml输出。仓库中还能看到完整的语音提供商家族alibaba-cloud-model-studio、comet-api-speech、deepgram-tts、elevenlabs、google-gemini-audio-speech、index-tts-vllm、kokoro-local、microsoft-speech、mimo-audio-speech、openai-audio-speech、openai-compatible-audio-speech、openrouter-audio-speech、player2-speech、volcengine等见 packages/stage-pages/src/pages/settings/providers/speech 目录涵盖云端、本地如 Kokoro、开源兼容层vLLM等不同形态。实测效果复刻 Neuro-sama 初版音色把 Microsoft Speech 接入的成果串起来就得到日志中的演示视频airi-demo.mp4在完成设置后AIRI 能以接近 Neuro-sama 初版的音色进行语音交互。具体复现路径是在语音设置页选择microsoft-speech提供商填入 API Key 与 region模型选择v1在音色列表中选择Ashley把 Pitch 调整为20%输入文本试听或接入实时语音对话链路。日志同时坦诚列出当前未完成的部分记忆能力尚未实现、动作控制仍需优化、转录设置 UI 缺失目标是在月底前完成。下一步路线图日志末尾给出了明确的规划清单Memory Postgres VectorEmbedding settings UITranscription settings UIMemory DuckDB WASM VectorMotion embeddingSpeech 设置 UI从仓库现状可以印证这些方向的落地情况Memory Postgres Vector对应 packages/memory-pgvectorMemory DuckDB WASM Vector对应仓库中的 packages/duckdb-wasm 与 packages/drizzle-duckdb-wasm语音/转录相关模块集中在 packages/pipelines-audio、packages/audio 与 packages/audio-pipelines-transcribe。作为读者可以顺着这些包继续追踪 AIRI 的后续进展。小结这篇 DevLog 展示了一个典型的三段式迭代节奏用主题定制 UI 暴露调试痛点 → 用 Histoire 组件工作台系统性解决 → 用多提供商 TTS 补齐能力短板。对开发者而言可借鉴的点包括当业务页面因主题/品牌定制变得难以肉眼调试时尽早引入与框架栈原生匹配的组件工作台Vite Vue 就选 Histoire并为其定制主题、Logo 与组件分组部署组件工作台到边缘平台时注意打包 vendor chunk 的体积限制必要时用excludeFromVendorsChunk规避单文件过大问题语音能力可以通过OpenAI 兼容抽象层 各厂商适配器的方式快速扩展unspeech提供厂商实现xsai/generate-speech提供统一调用入口AIRI 的提供商注册表unspeech/index.ts则负责把两者挂进设置 UI新增一家语音厂商的成本被压缩到很低。El Psy Congroo. —— 下一篇 DevLog 见。【免费下载链接】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),仅供参考