AIRI 开发日志2025.03.05深度解读WebGPU 工具包、品牌 Logo 迭代与 CSS 舞台过渡动画移植【免费下载链接】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 仓库中的 DevLog-2025.03.05 开发日志展开还原当日四项关键工作新增面向 WebGPU 的gpuu工具包、AIRI 品牌 Logo 的多轮设计迭代、官方文档站上线以及把社区优质 CSS 动画移植进ui-transitions过渡动画包。读完本文你将掌握gpuu/webgpu的调用方式、Logo 从初稿到定稿的完整打磨思路以及ui-transitions包的组件结构、生命周期状态机和路由级联动机制可直接在仓库中对照源码继续深入。gpuu面向 WebGPU 的 GPU 工具包开发日志提到开发者在 2025 年 3 月 4 日新增了一个名为gpuuGPU Utilities的包用于辅助处理 WebGPU 相关功能未来甚至可能用它直接与真实 GPU 设备交互。从日志的描述看这个包当前能做的事情还比较有限更多能力会在后续版本中逐步补充。日志给出了最基础、也最具代表性的用法——在 Vue 组件挂载时执行 WebGPU 能力检查import { check } from gpuu/webgpu import { onMounted } from vue onMounted(async () { const result await check() console.info(result) // 结果に対して何らかの操作を行う对结果做进一步处理 })这段代码有三个值得注意的实践点按子路径导入gpuu/webgpu表明该包采用子路径导出subpath exports组织模块将 WebGPU 相关能力与包的其他部分隔离便于 Tree-shaking 和按需加载异步 APIcheck()返回 Promise说明 GPU 能力探测如navigator.gpu是否存在、设备是否可用属于异步操作需要等待浏览器返回结果挂在生命周期中执行在onMounted中调用确保 DOM 与浏览器环境就绪后再探测避免在 SSR 或初始化阶段误判。日志中未来可能与真实 GPU 设备交互的表述结合check()这类探测函数的存在可以推断该包的设计目标是先解决浏览器环境能否用 WebGPU这个前置问题再逐步扩展到设备枚举、适配器/设备选择等更深层能力。如果要在自己的项目里引入直接在依赖中声明gpuu然后按上述方式导入即可。品牌视觉迭代AIRI Logo 从初稿到定稿日志的第二条主线是品牌视觉重塑。上一周企业设计师/艺术家提交了 Project AIRI Logo 的第一版设计方案但日志作者在白天的作业中敏锐地发现了一个常见的设计问题这些 Logo 缩放到主屏幕 App 图标尺寸时细节过于复杂、缺乏亲和力。初稿的局限与简化初稿见 airi-logos-v1.avif风格感很强但复杂度过高。于是作者推出简化版并在此基础上衍生出多种变体最终形成了 airi-logo-v2.avif 与 airi-logos-v2.avif 两套简化方案。简化方向的核心是缩得下去、认得出来——这在移动端 PWA、桌面端托盘图标等小尺寸场景下是硬性要求从仓库各应用public/目录下大量 192x192 / 512x512 的web-app-manifest与maskable_icon资源也能印证这一点。主题配色暗色、亮色与交换试错简化后的版本最初只适配了暗色主题作者随即制作了亮色版本airi-logo-v2-dark.avif。此时贡献者 kwaa 提出了一个非常有效的设计技巧把两套主题的配色互换试试。结果airi-logos-v3.avif确实效果更好——亮色与暗色环境下的可读性和对比度都得到了优化。字体、背景与定稿配色确定后作者又依次打磨了字体排版airi-logos-v4.avif和背景色airi-logos-v5.avif最终收敛为定稿这轮迭代沉淀下来的方法值得沉淀为设计规范从小尺寸可读性出发做减法 → 按主题维护配色变体 → 大胆交换配色验证对比度 → 最后精修字体与背景。这套流程最终也推动项目建立了正式的 设计指南Design Guidelines并在其中提供了面向艺术家与开发者的 资源清单 与工具说明方便社区成员按同样的标准贡献设计。文档站点上线开发者与艺术家的参考中心日志当日稍晚的核心工作是把 Project AIRI 官方文档站正式发布上线。建站的目的是为作者本人、其他开发者和艺术家提供一个统一参考与指南的入口让如何上手、如何贡献、如何设计都有据可查。日志明确提到站点上线时已包含三类内容基本指南对应仓库中 docs/content/ja/docs 下的 manual手册与 overview概览等目录涵盖使用方式与项目认知贡献指南对应 docs/content/ja/docs/contributing/index.md 及其子页如 WebUI、Tamagotchi、服务接入等贡献说明设计指南对应 docs/content/ja/docs/contributing/design-guidelines/index.md并提供 资源 与 工具 两个子页。新设计的 Logo 与配色方案也同步集成到了站点中见 airi-build-light.avif 与 airi-build-dark.avif亮/暗双主题与 Logo 的多主题适配形成闭环——站点本身就成了品牌规范的活样板。从仓库结构看文档内容按en / ja / ko / zh-Hans四种语言组织见 docs/content 目录这意味着站点从立项起就具备国际化体系除了英文与日文原文韩文、简体中文版本也在同一框架内同步维护方便不同语言的开发者与艺术家使用。DevStream 实战把 CSS 动画移植进 ui-transitions 包日志的最后一部分是当天 DevStream开发直播的成果作者花了一整个午休时间研究 YouTube 上的文字 PV 动画效果被其转场表现深深吸引希望在浏览器中实现类似效果。他注意到开发者兼艺术家 yui540 刚开源了一个专门演示精美过渡效果的仓库yui540/css-animations于是以此为素材把大量动画过渡效果移植到了项目自己的过渡动画包ui-transitions中。这些相关资源与网站链接随后也被收录进了文档站的 设计资源页作为社区参考与灵感来源。移植后的实际效果由 animation-transitions.gif 记录可以看到页面切换时铺满全屏的图形动画箭头、斜坡、方块等依次进出极具舞台感包结构与 7 种过渡组件ui-transitions包位于 packages/ui-transitions其 README 将其定位为一组用于场景淡入/淡出的 UI 过渡动画。组件层在 src/components由 index.ts 统一导出SlideTransition— 滑入滑出SlopeSlideTransition— 斜坡滑动ArrowTransition— 箭头形裁剪遮罩开合MultipleBlocksRevealTransition— 多块状逐格揭示FantasyFallTransition— 幻想坠落支持方向参数RectanglesRotateTransition— 矩形旋转BubbleWaveOutTransition— 气泡波浪式退出StageTransitionGroup— 编排以上全部过渡的核心容器组件。这些组件大多是纯 CSS 实现。以 ArrowTransition.vue 为例它用两个::before/::after伪元素叠加两层遮罩通过clip-path: polygon(...)的arrowIn/arrowOut关键帧实现箭头形状的开合动画曲线采用cubic-bezier(0.87, 0.05, 0.02, 0.97)先快后慢的强调曲线并用 CSS 变量--sharpness: 40%控制箭头的锐度。组件头部注释明确标注了原作者与源码出处遵守了移植时的署名规范。生命周期状态机StageTransitionGroup 的核心StageTransitionGroup是整个过渡系统的调度中枢StageTransitionGroup.vue。它把一次完整的页面切换切分为 7 个可观测、可挂接的阶段见 TransitionStage 类型定义阶段含义before-enter入场动画开始前enter-active入场动画进行中navigation导航时机由组件决定何时触发路由跳转after-enter入场动画完成before-leave退场动画开始前leave-active退场动画进行中after-leave完整动画周期结束组件内部维护了一个过渡注册表transitions 定义内置 7 种过渡各自的组件与时长例如slide/slope-slide/arrow/fantasy-fall/rectangles-rotate均为 2700msmultiple-blocks-reveal为 2800msbubble-wave-out最短为 1000ms。围绕这 7 个阶段组件实现了钩子系统addTransitionHook(hook)注册监听函数并返回移除函数triggerHooks(stage, data)会按注册顺序依次执行并await完成。调度流程的核心逻辑是触发before-enter置入新过渡触发enter-active在navigation阶段默认取duration / 3的时刻可通过nextDelay覆盖调用next()执行真正的路由跳转并设置hasNavigated防重入按duration/duration 10/duration 20的节奏依次触发after-enter、before-leave、leave-active动画周期结束后清理状态并触发after-leave。此外还有几道安全兜底finally中无论成败都移除导航钩子并以duration * 2作为保守超时强制next()避免钩子异常导致路由卡死如果上一轮过渡尚未结束会先快速走完退场流程before-leave → after-leave再开始新过渡保证连续切换不重叠。路由级联动把过渡挂到页面切换上StageTransitionGroup通过router.beforeEach与 vue-router 深度集成见 路由守卫实现当目标路由的meta.stageTransition为对象时守卫会读取其配置name、primaryColor等用组件 props 覆盖默认值后交给triggerTransition异步执行完成进场动画 → 跳转 → 退场动画的完整编排。配合 vue-router/experimental 的definePage可以在每个页面声明自己的过渡。仓库自带的 playground 就是最佳示范首页 index.vue 声明stageTransition: { name: slide }其余页面分别对应slope-slidetransition-2.vue、arrowtransition-3.vue、multiple-blocks-revealtransition-4.vue、fantasy-falltransition-5.vue带direction: down、rectangles-rotatetransition-6.vue与bubble-wave-outtransition-7.vue。颜色与主题适配过渡动画的配色完全可配置。playground 的 App.vue 中用useDark()感知主题再向StageTransitionGroup传入主色/次色StageTransitionGroup :primary-color!isDark ? #FFA1B3 : #FF5778 :secondary-color!isDark ? #A1FFD7 : #57FFB7 router-view v-slot{ Component, route: r } component :isComponent :keyr.path / /router-view /StageTransitionGroupStageTransitionGroup支持的 props 还包括tertiaryColor、colors多色数组、zIndex遮罩层级默认 100、disableTransitions一键禁用过渡与usePageSpecificTransitions允许页面级过渡覆盖全局配置这与当天日志里亮/暗双主题配色的打磨思路一脉相承。运行与部署包的运行与部署链路也很清晰本地开发/预览pnpm -F proj-airi/ui-transitions play:devVite 启动 playground、play:build、play:preview类型检查vue-tsc --noEmit见 package.json 的 scripts静态托管仓库内置的 netlify.toml 配置了构建命令先 build 再 play:build、发布目录packages/ui-transitions/playground/dist以及/* → /index.html的 SPA 重定向规则保证刷新页面时路由不 404。小结这则开发日志浓缩了 Project AIRI 在品牌与技术两条线上的推进节奏gpuu是面向 WebGPU 的前置布局为后续 GPU 能力探索铺路Logo 的六轮迭代展现了从小尺寸可读性出发、按主题维护变体、敢于交换配色的务实设计方法论文档站上线把指南、贡献规范与设计规范沉淀为可持续维护的知识库而 ui-transitions 包则以舞台过渡为概念用 7 阶段生命周期状态机 钩子系统 vue-router 守卫把社区优秀的 CSS 动画完整移植进 Vue 生态并在仓库中留下了可复跑、可部署的完整示例。无论是想复刻这套转场效果还是想为 AIRI 贡献设计或代码都可以从上述源码与文档路径继续深入。【免费下载链接】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），仅供参考