AniMix：走出户外拍摄真实动物并融合生成AI怪兽卡牌

这是 Hacktoberfest 开源 AI 挑战赛第 1 周“Touch Grass”活动的参赛作品。

我构建了什么

AniMix 是一款优先离线、纯客户端的 Web 应用程序，旨在让游戏玩家和技术爱好者离开屏幕和房间，走进大自然。

概念很简单：去接触自然（Touch Grass）。拍摄动物照片。融合怪物。

🌿 工作原理：

1. 探索户外：走出家门，进入你的院子、社区或当地徒步小径，寻找真实的活体动物——狗、猫、鸟、松鼠、蝴蝶或昆虫。
2. 设备端视觉 AI：使用智能手机或笔记本电脑摄像头拍摄照片。AniMix 直接在浏览器内运行一个开放权重的视觉分类模型，即时识别动物物种。
3. 怪物融合：从你的牌组中选择任意两张已捕获的动物卡片（例如金毛寻回犬 + 蓝松鸦）并将它们融合！AniMix 会程序化地计算战斗属性、元素亲和力（生物、空气、火焰等），并生成一张自定义的混合怪物收藏卡。
4. 收集与分享：导出高分辨率全息交易卡以构建你的生物牌组，或通过 Web Share API 与朋友分享。

演示

• 🌐 在线 Web 应用：https://animix-touchgrass.vercel.app
• 🎬 GitHub 仓库：https://github.com/Mohammad1sami/animix

代码

https://github.com/Mohammad1sami/animix

我是如何构建它的

AniMix 围绕客户端开源 AI 和现代 Web 技术构建：

• 开源 AI 与本地推理：基于 Transformers.js，使用开放权重的 MobileViT-small 模型（Xenova/mobilevit-small）。该模型通过 WebAssembly 和 ONNX Runtime 完全在浏览器中运行，无需任何后端 API 调用即可执行视觉分类。
• 前端框架：使用 Next.js 16 (React 19) 构建，以实现快速的服务器渲染外壳和优化后的客户端水合。
• 样式与美学：使用 Tailwind CSS v4 进行样式设计，具备深色模式、玻璃拟态效果和动态动画。
• 卡片渲染与导出：利用 HTML5 Canvas API 和 html-to-image 生成高 DPI 的怪物交易卡，其程序化分配的统计属性基于分类置信度分数。

为什么开放创新很重要？

开放创新使 AniMix 成为可能。以下是开放权重模型和客户端推理为何重要的原因：

1. 100% 离线野外可用性：当在没有手机信号的偏远公园或自然小径徒步时，传统的云端视觉 API 会完全失效。通过 WebAssembly 在本地运行的开放权重允许 AniMix 在任何离网环境中发挥作用。
2. 绝对的用户隐私：周围环境的户外照片保留在用户设备上。没有任何图像会被上传到第三方服务器。
3. 零 API 成本与无限可扩展性：专有 AI API 按请求收费。开放创新使得无需支付服务器成本即可实现无限的实时图像扫描。

🌐 社区智慧

在使用 Transformers.js 构建基于浏览器的 AI 应用程序时，DEV 上的开发者社区分享了关于 WebAssembly 性能和模型缓存的关键见解：

• @xenova 撰写的《使用 Transformers.js 在浏览器中运行 Hugging Face Transformers》

奖项类别