人工智能AI AgentMCP 服务工具调用GUI 自动化语音数字人交互助手【免费下载链接】airi 自托管、归你拥有的 Grok 风格 AI 伴侣与 waifu / 赛博生命灵魂容器目标是接近 Neuro-sama 的高度支持实时语音聊天、Minecraft 和 Factorio 游玩支持 Web / macOS / Windows。项目地址https://gitcode.com/moeru-ai/airi点击查看免费下载本篇基于 Airi 仓库中docs/content/ko/blog/DevLog-2025.03.05/index.md这篇开发日志展开梳理当日三个核心工作引入gpuu包推进 WebGPU 能力检测、Project AIRI 标志视觉的迭代定型与文档站 airi.build 上线、以及将 yui540 的 CSS 动画移植为可复用 Vue 过渡组件。文章结合仓库中的 WebGPU 检测封装 与 ui-transitions 组件包 源码给出可直接复用的实现细节与调用链帮助读者理解 Airi 在渲染能力探测与舞台转场动画上的技术路径。一、引入 gpuuWebGPU 能力检测的起点日志提到开发者为辅助 WebGPU 相关开发新增了gpuuGPU utilities包当时的定位是先用于 WebGPU 功能探索未来再扩展与真实 GPU 设备的交互能力。日志给出了最小调用示例import { check } from gpuu/webgpu import { onMounted } from vue onMounted(async () { const result await check() console.info(result) // 对结果进行一些操作 })1.1 仓库内的实际封装stage-shared 的 WebGPU 能力检测虽然gpuu本身是独立的外部工具包但它在当前仓库中的落地形态是 packages/stage-shared/src/webgpu/detect.ts 这一层集中式封装源码注释明确写道该模块 “Wrapsgpuu/webgpuand caches the result so every consumer gets the same answer without redundant adapter requests”包装gpuu/webgpu并缓存结果使所有消费者得到一致答案避免重复发起 adapter 请求。核心 API 如下detectWebGPU(): PromiseWebGPUCapabilities异步检测入口结果以单例形式缓存重复调用直接命中缓存并发调用会被去重合并见 detect.ts#L149-L197。isWebGPUSupported(): Promiseboolean轻量布尔判断直接透传gpuu的isWebGPUSupported()。getCachedWebGPUCapabilities()同步读取缓存结果的快速通道。setEstimatedVRAMOverride(bytes | null)/getEstimatedVRAMOverride()用户可手动覆盖 VRAM 估算值。resetWebGPUCache()仅供测试重置缓存。检测结果WebGPUCapabilities包含supportedWebGPU 是否可用、fp16Supportedfp16 着色器运算支持、estimatedVRAM估算显存字节数、estimatedVRAMSource估算来源与adapterInfo厂商/架构/设备描述完整的字段定义见 detect.ts#L62-L75。1.2 VRAM 估算的三级来源Web 平台不向页面暴露 GPU 总显存因此该封装按以下优先级估算源码注释与resolveVRAM实现均明确写出见 detect.ts#L136-L143用户覆盖值setEstimatedVRAMOverride优先级最高启发式adapter.limits.maxBufferSize * 4computeHeuristicVRAM见 detect.ts#L128-L134集成显卡常见 256 MB、独显常见 2–4 GB 的maxBufferSize乘以 4 作为保守总显存估计均不可用时返回 0来源标记为none。估算来源通过estimatedVRAMSource: override | max-buffer-heuristic | none暴露供上层做诊断展示。1.3 适配器信息提取的兼容策略extractAdapterInfodetect.ts#L97-L126优先读取新版同步adapter.info属性Chrome 114、Safari 17.4失败时回退到旧版异步requestAdapterInfo()两者都不可用则返回null厂商/架构名称属于浏览器实现不透明的字符串源码注释提示消费者应将其当作不透明字符串处理。1.4 测试用例印证packages/stage-shared/src/webgpu/detect.test.ts 通过 mockgpuu/webgpu验证了全部关键行为maxBufferSize * 4启发式与none回退、adapter.info 字段缺失时的容错、新旧 API 回退、结果缓存与并发去重、异常时的安全降级以及 VRAM override 的生效、就地更新与清除恢复。例如 “should cache the detection result across calls” 断言两次调用返回同一对象且gpuuCheck仅被调用一次。二、品牌视觉AIRI 标志的迭代与文档站上线日志第二块内容是视觉资产工作记录了 Project AIRI 标志从初版到定稿的完整迭代链路这一过程与文档站 airi.build 的上线同步推进设计师/艺术家交付了标志的第一版设计稿由于初版在缩放到主屏幕应用尺寸时过于复杂、不够友好重新设计了精简版并制作多个变体初版变体仅适配深色主题随后补充了浅色主题版本根据反馈尝试为两套主题互换配色方案视觉效果显著改善继续更新字体排版、优化背景色最终形成定稿并将标志与配色方案一并整合进新上线的文档站。日志明确记录了文档站在当天正式上线并已包含基础指南、贡献指南与设计指南三类内容作为开发者和艺术家的参考资料与规范依据。仓库中的相关视觉资产如docs/content/public/assets/下的 logo、banner、favicon 等即承载了这套品牌视觉的产物次日日志docs/content/ko/blog/DevLog-2025.03.06/index.md进一步印证了文档站持续作为设计与开发资源枢纽的角色。三、舞台过渡动画从 CSS 艺术到 Vue 组件移植日志中最具工程含量的是“DevStream”部分把 yui540 仓库中的动画过渡效果移植到浏览器并在直播中验证效果良好。该工作在当前仓库中沉淀为独立的proj-airi/ui-transitions包packages/ui-transitions/README.md其定位是 “A set of UI transition animations for fade-in / fade-out of scenes”用于场景淡入/淡出的一组 UI 过渡动画。3.1 组件清单与内置注册表包内通过 src/components/index.ts 统一导出 7 个过渡组件ArrowTransition、BubbleWaveOutTransition、FantasyFallTransition、MultipleBlocksRevealTransition、RectanglesRotateTransition、SlideTransition、SlopeSlideTransition以及编排组件StageTransitionGroup。在 StageTransitionGroup.vue#L71-L100 中各过渡效果注册为名称 → 组件的映射表并配置默认时长过渡名称组件默认时长msslideSlideTransition2700slope-slideSlopeSlideTransition2700arrowArrowTransition2700multiple-blocks-revealMultipleBlocksRevealTransition2800fantasy-fallFantasyFallTransition2700rectangles-rotateRectanglesRotateTransition2700bubble-wave-outBubbleWaveOutTransition10003.2 底层实现CSS 双层覆盖动画以 SlideTransition.vue 为例其源码注释保留了原作署名 “Author: yui540”实现为全屏position: fixed覆盖层利用::before/::after两个伪元素叠加两层色块分别以slideIn与slideOut两个关键帧translateX(-101%) → 0 → 101%交错延时完成遮盖与退出缓动函数统一采用cubic-bezier(0.87, 0.05, 0.02, 0.97)两层动画的延时差0s 与 0.2s 起步制造了错落的层次感。颜色通过 CSS 变量--stage-transition-1-overlay-color-1/2注入由组件在onMounted时写入document.documentElement默认主色#666、辅色#ccc。MultipleBlocksRevealTransition则进一步用grid-template-rows: repeat(5, 1fr)将覆盖层切分为五行色块并以nth-child递增--d延时制造逐块掀开的效果。3.3 编排机制生命周期 Hook 与导航时机控制StageTransitionGroup是整套机制的核心编排器值得关注的设计点过渡生命周期状态机定义了before-enter→enter-active→navigation→after-enter→before-leave→leave-active→after-leave七个阶段见 StageTransitionGroup.vue#L51-L58可通过addTransitionHook()注册钩子triggerHooks()会依序await每个钩子并捕获异常。导航时机策略页面切换并非在动画结束后才发生而是在navigation阶段触发next()时机由nextDelay配置决定未配置时默认取duration / 3此外还设置了duration * 2的安全兜底超时保证任何异常下导航都不会被卡死StageTransitionGroup.vue#L148-L151。路由接入在router.beforeEach中读取目标路由的to.meta.stageTransition并允许通过 propsprimaryColor、secondaryColor、tertiaryColor、colors、zIndex统一覆盖页面级配置disableTransitions与usePageSpecificTransitions提供全局开关与页面级优先策略。3.4 页面级声明与真实项目集成playground 页面packages/ui-transitions/playground/src/pages/index.vue展示了页面如何用vue-router/experimental的definePage宏声明过渡definePage({ meta: { stageTransition: { name: slide, }, }, })在实际应用中apps/stage-web/src/App.vue已引入StageTransitionGroup见 App.vue#L24且apps/stage-web/package.json声明了对proj-airi/ui-transitions: workspace:^的依赖说明这套过渡机制已从演示场正式落地到 Airi 的 Web 主应用。次日日志也确认了组件已集成到 airi.moeru.ai 官方部署并继续修复了移动端动画问题、利用unplugin-vue-router的definePage钩子扩展页面级转场——可视为本日志工作的直接延续。四、可继续深入的仓库资源WebGPU 检测封装packages/stage-shared/src/webgpu/detect.ts对应测试packages/stage-shared/src/webgpu/detect.test.ts过渡组件包packages/ui-transitions/src/components/index.ts 与 StageTransitionGroup.vue过渡演示场packages/ui-transitions/playground/src/pages/主应用集成示例apps/stage-web/src/App.vue本日志原文docs/content/ko/blog/DevLog-2025.03.05/index.md整体来看这篇开发日志记录的是 Airi 在三个维度上的同日推进以gpuu为基座构建可缓存、可覆盖的 WebGPU 能力探测层通过多轮视觉迭代为品牌定下可跨主题复用的标志体系并同步上线文档站以及把一次性的 CSS 动画灵感沉淀为带生命周期编排的 Vue 过渡组件包并最终接入真实 Web 主应用。后两者在仓库中均有完整源码可供查阅与复用。赞分享人工智能AI AgentMCP 服务工具调用GUI 自动化语音数字人交互助手【免费下载链接】airi 自托管、归你拥有的 Grok 风格 AI 伴侣与 waifu / 赛博生命灵魂容器目标是接近 Neuro-sama 的高度支持实时语音聊天、Minecraft 和 Factorio 游玩支持 Web / macOS / Windows。项目地址https://gitcode.com/moeru-ai/airi点击查看免费下载相关推荐AIRI 开发日志2025.03.05深度解读WebGPU 工具包、品牌 Logo 迭代与 CSS 舞台过渡动画移植AIRI 开发日志2025.03.05深度解读WebGPU 工具包、品牌 Logo 迭代与 CSS 舞台过渡动画移植 这篇技术指南基于 Project A人工智能AI 应用大模型AI Agent交互助手语音数字人后端前端桌面应用移动开发GUI 自动化MCP 服务Project AIRI 开发日志 2025.03.05gpuu/WebGPU 能力检测、品牌标识迭代与 CSS 场景过渡动画移植Project AIRI 开发日志 2025.03.05gpuu/WebGPU 能力检测、品牌标识迭代与 CSS 场景过渡动画移植 这篇开发日志回顾了 Pro人工智能AI AgentMCP 服务工具调用GUI 自动化语音数字人交互助手后端YouTube Plus 免越狱签名安装免费 Apple ID10 分钟装进 iPhoneYouTube Plus 免越狱签名安装免费 Apple ID10 分钟装进 iPhone IPA 到手了可一装就卡住App Store 搜不到、没越狱移动开发上一篇RuView 跨平台 WiFi 感知 macOS 篇基于 CoreWLAN 的 ORCA 适配层设计与 Swift Helper 桥接实现下一篇中文文献元数据自动抓取Jasminum插件彻底解决Zotero中文支持难题创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考