Fishes 是由 Alden Hallak 在 GitHub 上发布的一个开源项目，主地址为 “aldenhallak/fishes”。用户可以在浏览器中“绘制鱼”，项目使用浏览器端机器学习模型对鱼的绘画作品进行实时识别，并将用户创作以群体鱼缸的形式展示。

Fishes GitHub地址：https://github.com/aldenhallak/fishes

该项目融合了交互式绘画、AI 识别、社区展示等多种元素，是一个既适合创意绘制也适合 Web AI 实践的有趣项目。

核心功能亮点

  1. 实时 AI 识别反馈：用户在画布绘制鱼的过程中，后台的神经网络模型（以 ONNX 格式运行于浏览器）会实时评估你的绘画是否形成“鱼”的特征，并通过背景色变化给予提示。

  2. 智能画布工具：项目提供压力敏感输入（若设备支持）、直观的画笔工具、绘画提示器（drawing hints）以帮助用户更好地绘出“鱼”的形态。

  3. 社区鱼缸展示：当你的绘画被识别为“鱼”后，其可进入一个共享的鱼缸界面，你可以观看自己和其他用户的鱼一同在水中游动，还可切换最近、热门或随机视图模式。

  4. 评分与排行系统：社区用户可对他人鱼作品投票，系统根据新旧与受欢迎程度进行智能排序；作品可归属于艺术家个人资料、可查看统计数据；同时提供收集鱼、创建主题鱼缸、分享收藏等社交功能。

  5. 跨设备兼容：项目支持桌面浏览器、平板、手机响应式界面，并作为 Progressive Web App 可安装使用。

技术细节简介

  1. 模型部分：该项目使用 ONNX Runtime Web 在浏览器内执行神经网络推断，原模型由 PyTorch 训练。

  2. 项目结构：源代码包含 HTML 页面（包括 index.html、tank.html、rank.html、login.html、moderation.html 等），JavaScript 脚本、画布工具代码、鱼缸动画、用户认证与社区功能。

  3. 关于部署：虽然你可以访问项目演示（如果作者提供），但也能够将该项目 Fork 到本地部署、定制画布工具、修改社区逻辑。

快速上手指南

  1. 从 GitHub 克隆代码：git clone https://github.com/aldenhallak/fishes.git。

  2. 安装（若有依赖）：根据 README，可使用 npm install（或项目里指明）然后 npm run build／npm start。

  3. 启动本地服务：例如 npm start 或使用静态服务器访问 index.html。

  4. 在浏览器中打开绘画页面 (index.html)。在画布上尝试绘制鱼（建议鱼向右游动，符合模型识别习惯）。

  5. 观察背景色变化：当 AI 判断为鱼时，画布背景可能变色提示。若满意，则提交作品进入鱼缸（取决于你是否配置社区功能）。

  6. 探索鱼缸页面 (tank.html)：看看所有用户作品、进行投票。也可查看排行页面 (rank.html)。

  7. 如需定制：你可以替换画布样式、修改鱼缸动画、替换模型或修改社区逻辑（如不需要用户认证、删除投票功能等）。

使用场景与建议

  • 创意绘画与艺术练习：用户可以利用这个工具进行“鱼”主题的绘画演练，借助即时反馈提升绘画感知。

  • Web AI 实验平台：如果你正在学习浏览器端机器学习（如 ONNX Runtime Web），Fishes 提供一个有趣的样例场景。

  • 社区互动或教育用途：教师或工作坊可将其用于教学活动，学生可以绘鱼、提交、展示，从而增强参与感。

  • 定制主题扩展：你还可以将鱼替换为其他主题（如星星、动物、字符等），修改模型识别目标，实现新的创意项目。

注意事项与最佳实践

  • 虽然项目可以本地部署，但若开启社区提交功能，应注意安全性：用户上传机制、模型误判、动画展示、用户认证等可能需要审查。

  • 响应式与触摸优化虽有，但在低性能手机或非最新浏览器上画布性能可能受限。建议测试各设备使用体验。

  • 若你将项目用于公开服务，应当考虑模型版权、用户隐私、社区规范（比如不要出现不当绘图内容）等事项。

  • 在自定义模型或识别目标（非鱼的主题）时，你可能需要重新训练模型或调整模型阈值、画布提示逻辑。

总结

Fishes 是一个非常有趣、视觉友好且技术上值得探索的开源项目，结合了绘画、浏览器端 AI 和社区互动。无论你是前端开发者、机器学习爱好者，还是希望做创意互动项目，这个项目都能提供灵感与实践机会。通过快速部署、绘画体验、社区展示，你可以轻松看到“你的鱼在虚拟水缸中游动”的效果。建议你先克隆代码、运行演示、熟悉画布工具和模型识别逻辑，再根据自己的需求进行定制或扩展。