DrawAFish

想体验“画鱼即活”的乐趣吗？DrawAFish.com 这款互动鱼类绘画应用，将AI识别与社区互动深度结合——用户不仅能通过直观工具创作鱼类涂鸦，还能实时获得AI反馈，更能让自己的作品进入共享水族箱，与全球创作者的“鱼儿”一同游动。无论是绘画爱好者还是休闲玩家，都能在这里找到创作与交流的双重乐趣。

从“画鱼”到“养鱼”，三步解锁全流程

DrawAFish.com 的操作逻辑简单清晰，无需专业绘画基础也能快速上手：

1. 创作涂鸦：打开应用后，在智能画布上勾勒鱼类（注意：鱼需要面向右侧才能被AI更好识别），画布支持压力敏感输入，笔触轻重可自由控制；
2. AI实时验证：绘画过程中，AI会通过背景颜色变化反馈识别结果，同时提供视觉提示帮助优化线条，确保作品符合“入缸标准”；
3. 加入社区鱼缸：提交满意的作品后，它会自动进入共享水族箱，你可以实时观看它游动，也能探索其他用户的创作、参与投票。

五大核心特性：兼具创作自由与社区温度

1. 互动绘画：AI当“老师”，新手也能轻松画

应用的核心竞争力之一在于“实时AI辅助”，让绘画门槛大幅降低：

• 即时反馈机制：每一笔绘制后，神经网络都会快速分类识别，背景颜色变化直观提示“鱼是否被成功识别”；
• 智能辅助工具：内置绘画提示功能，通过线条、轮廓引导，帮助用户画出更符合鱼类特征的涂鸦；
• 适配多元输入：支持鼠标、触控板、平板手写笔等多种设备输入，满足不同场景的创作习惯。

2. 社区鱼缸：全球创作者的“线上水族馆”

共享水族箱是应用的社交核心，让孤立的创作变成联动的乐趣：

• 多维度视图：可切换“最近提交”“最受欢迎”“随机推荐”三种视图，快速发现优质作品；
• 自然游动效果：AI会为每只“鱼”赋予流畅的动画效果，模拟真实水中游动姿态；
• 作品溯源：点击任意鱼类，即可查看其创作者信息，实现“从作品到人的连接”。

3. 投票与排名：让好作品被更多人看见

为鼓励优质创作，应用设计了公平的评价与展示机制：

• 社区民主投票：用户可对他人作品进行评分，投票数据将直接影响作品排名；
• 智能排名算法：不仅考量受欢迎程度，还会平衡作品的时效性，避免“老作品霸榜”；
• 个人数据追踪：创作者可在个人资料中查看作品的投票分数、浏览量，以及自己的“鱼类收藏库”；
• 实时排行榜：动态更新最受欢迎的鱼类作品和创作者，为优质内容提供曝光入口。

4. 个人收藏：打造专属“私人鱼缸”

除了社区互动，应用也支持个性化整理：

• 主题自定义：可创建多个私人鱼缸，按“颜色”“风格”“创作时间”等标准分类收藏喜欢的作品；
• 灵活分享：支持将个人收藏的鱼缸生成链接分享给朋友，邀请他人浏览；
• 隐私可控：可自由设置鱼缸为“公开可见”或“仅自己可见”，保护创作隐私。

5. 跨平台兼容：随时随地“画鱼互动”

应用适配全场景设备，确保体验一致性：

• 桌面端：浏览器打开即可获得完整功能，鼠标、手写笔操作流畅；
• 平板端：针对iPad、Android平板优化触摸体验，手写笔压感适配精准；
• 移动端：手机端自动适配简化界面，手指涂鸦操作便捷；
• PWA特性：支持作为渐进式Web应用安装到设备桌面，无需下载APP即可获得接近原生应用的体验。

AI技术揭秘：浏览器内完成识别，高效且隐私

DrawAFish.com 的AI功能全部在前端实现，兼顾效率与数据安全：

• 技术架构：采用 PyTorch 开发并训练鱼类涂鸦分类模型，再导出为 ONNX 格式，通过 ONNX Runtime Web 在浏览器内直接运行推理；
• 低延迟优势：无需数据上传到服务器，本地即可完成识别，实现“笔触落、反馈至”的实时性；
• 质量控制：只有通过AI验证的“合格鱼类”才能被提交到社区鱼缸，保证共享内容的一致性。

社区生态：面向创作者与观众的双向设计

应用针对“创作者”和“观众”两种身份，提供了差异化的功能支持：

技术开源：开发者可二次拓展的完整框架

为方便开发者参与优化，DrawAFish.com 开放了核心代码仓库，包含两大模块：

• fish-trainer：鱼类涂鸦分类器的训练代码库，基于 PyTorch 开发，包含数据增强、预处理、模型评估脚本，支持将训练后的模型导出为 ONNX 格式；
• fish-be：应用后端代码，以无服务器函数形式部署（推荐 Cloud Run），负责处理图像上传、存储、审核及画廊功能接口。

部署指南（面向开发者）：

1. 克隆代码仓库；
2. 将 ONNX 模型（fish_doodle_classifier.onnx）放入 assets/models/ 目录；
3. 若需实时功能，通过 src/js/firebase-init.js 配置 Firestore；
4. 部署静态站点（推荐 Vercel、Netlify、Firebase Hosting）；
5. 在 src/js/fish-utils.js 中配置后端端点，指向已部署的 fish-be 实例。