【生活娱乐赛道】PetWatch 智能宠物管家
先和大家打个招呼吧
大家好！我是一名热爱宠物的产品爱好者，家里养了两只猫（卷卷、蓝蓝）和一只金毛（金金）。平时工作比较忙，经常担心毛孩子们的健康状况，却苦于没有系统化的管理工具。这次参加 TRAE 创意挑战赛，就是想用技术的力量，让每一个宠物主人都能更科学、更轻松地照顾自己的毛孩子。
我是怎么用 TRAE 把 Demo 做出来的：
说实话，在接触 TRAE 之前，我对前端开发几乎一窍不通。但这个想法在我脑子里盘旋了很久——做一个能帮我记录宠物日常、提醒驱虫疫苗、还能在桌面上陪伴我的宠物管理工具。
用 TRAE 开发的过程，就像有一个耐心的技术搭档在旁边。我把想法一句句讲给它听：“我想要一个侧边栏导航，上面显示我的三只宠物头像”、“首页要有活动时间线，按时间顺序排列”、“告警中心要分优先级，高优先级的用红色标记”……TRAE 不仅能听懂我的描述，还能主动补充我没想到的细节，比如"要不要加一个健康评分卡片？"“活动时间线可以加上行为图标吗？”
最让我觉得"原来这么简单"的时刻，是当我想要实现路由切换功能时。我以为这需要很复杂的前端框架配置，结果 TRAE 直接用原生 JavaScript 的 hash 路由就搞定了，代码简洁又高效。还有 emoji 图标在 Linux 环境下显示为"X"的问题，TRAE 帮我批量替换成了 SVG 图标，整个过程行云流水。
它帮我跨过的最大的坎，是桌面宠物功能。我最初的想法只是"把宠物照片抠出来放到页面上"，TRAE 不仅用 rembg 实现了 AI 自动抠图，还生成了不同状态（睡觉、进食、玩耍）的 AI 渲染图，配合呼吸/咀嚼/跳跃/浮动四套 CSS 动画，让桌宠真正"活"了起来。这个功能从想法到落地，完全超出了我的预期。
Demo 简介
是什么：PetWatch 是一款面向宠物主人的智能宠物管理 Web 应用，采用单页应用（SPA）架构，支持多宠物档案管理、活动时间线追踪、健康告警提醒、桌面宠物陪伴、积分成就系统等核心功能。
面向谁：多宠物家庭的主人（同时养猫养狗）、工作忙碌需要系统化提醒的上班族、关注宠物健康希望数据化管理的科学养宠人群。
主要功能：
功能一：多宠物档案与活动时间线 首页展示所有宠物的健康评分、今日活动时间线、待处理提醒和每日报告。支持按宠物筛选查看详细活动记录，包括睡眠、进食、玩耍等行为的时间、地点和时长。首页统计卡片（进食/饮水/活动/睡眠/如厕）均使用 AI 渲染的宠物状态预览图，实时监控区域使用真实宠物摄像头画面。
功能二：智能告警中心（支持宠物筛选） 自动追踪驱虫、疫苗、洗澡等周期性事务，按高/中/低优先级分类提醒。支持按宠物筛选告警，只查看当前关注宠物的待处理事项。每条告警关联具体宠物，附带确认、标记误报等处理按钮。
功能三：桌宠伴侣（AI 抠图 + 动态渲染 + 创建向导 + 桌面应用） 用户可上传宠物照片，系统通过 AI 自动抠图去除背景，再经 AI 渲染生成待机/睡眠/进食/玩耍四种状态形象。支持 5 种免费风格（Q版、漫画、像素、写实、真实照片）和 3 种高级风格切换。桌面应用基于 Tauri v2 构建透明浮动窗口，支持 Windows 和 macOS，宠物形象始终置顶在桌面上，配合呼吸/咀嚼/跳跃/浮动四套动画自动切换状态。
功能四：桌宠创建向导（上传 → 抠图 → AI渲染 → 预览） 四步向导引导用户创建专属桌宠：第一步上传宠物照片（支持拖拽），第二步 AI 智能抠图（带进度动画），第三步 AI 渲染四种动作状态（逐张完成动画），第四步预览并下载桌面应用（Windows .exe / macOS .dmg）。
Demo 创作思路
灵感来源：灵感来自我自己的养宠日常。家里有两只猫和一只金毛，每次驱虫、疫苗、洗澡的时间都靠脑子记，经常忘记。三只宠物的饮食习惯、运动量也各不相同，却从来没有系统记录过。有一次卷卷食欲不振，我翻遍了聊天记录才找到上次驱虫的时间——那一刻我意识到，宠物主人真的需要一个专属的管理工具。
想解决的问题：
信息碎片化：驱虫、疫苗、就医记录散落在各处，关键时刻找不到
健康异常难察觉：细微的行为变化（食欲下降、精神萎靡）容易被忙碌的主人忽略
缺乏数据追踪：不知道宠物每天睡了多久、吃了多少，全凭感觉判断
养宠乐趣不足：科学管理和趣味互动之间缺少连接
为什么做这个方向：宠物经济正在快速增长，但市面上大多数宠物 App 要么侧重电商（卖粮、卖用品），要么功能单一（仅记录体重）。我想做一个真正从宠物主人日常痛点出发的工具，把健康管理、行为追踪和趣味互动融为一体。生活娱乐赛道强调"让生活更有趣"，而 PetWatch 正是通过数据化管理和桌宠陪伴，让养宠这件事变得更科学、更有趣。
Demo 体验地址
交互式可体验的 HTML 文件，Zip 格式打包上传社区（见附件 petwatch-demo.zip）。
本地运行方式：解压后进入目录，执行 python3 -m http.server 8000，浏览器打开 http://localhost:8000 即可体验全部功能。
本项目为纯前端静态页面，无需后端服务，所有数据为演示数据。
TRAE 实践过程
开发流程：
阶段一 - 需求梳理：向 TRAE 描述产品愿景和功能需求，TRAE 输出完整页面结构和功能清单 阶段二 - 架构搭建：TRAE 搭建 SPA 框架，实现 hash 路由、侧边栏导航、页面切换动画 阶段三 - 页面开发：逐个实现首页、猫咪档案、活动时间线、健康趋势、告警中心、设备管理、系统设置共 8 个页面 阶段四 - 桌宠进阶：TRAE 使用 rembg Python 脚本批量处理宠物照片（AI 抠图），使用 GenerateImage 生成不同状态的 AI 渲染图，编写四套 CSS 动画（呼吸/咀嚼/跳跃/浮动）配合状态光晕效果 阶段五 - 创建向导：TRAE 实现四步向导模态框（上传 → 抠图 → AI渲染 → 预览），支持拖拽上传、进度动画、状态渲染逐张完成、预览并下载桌面应用 阶段六 - Tauri 桌面应用：TRAE 创建完整的 Tauri v2 项目（Rust + WebView），配置透明窗口、始终置顶、右键菜单、拖拽移动、系统托盘等功能 阶段七 - UI 专业化：TRAE 将全站所有 emoji 替换为 SVG 矢量图标，首页统计卡片和活动预览全部使用 AI 渲染的宠物状态预览图，摄像头区域使用真实宠物照片
关键步骤截图与 Session ID：
截图1 - 项目初始搭建与路由实现：展示 TRAE 从零搭建 SPA 框架的过程，包括 hash 路由和侧边栏导航代码生成 Session ID：
156598852914932:d423d9d53d339e1edbf197ecb79a092c_6a3107fd7349d72fc0ed7ec3.6a3c9713725f5e1a62dac239.6a3c97122404adcc85a84ecb:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/6/25 11:10:53)
截图2 - 桌宠功能开发：展示 TRAE 实现 rembg 抠图、GenerateImage AI 渲染、CSS 动画系统的对话过程 Session ID：
截图3 - 桌宠创建向导与 Tauri 桌面应用：展示 TRAE 实现四步创建向导和 Tauri v2 透明窗口桌面应用 Session ID：156598852914932:4a02cebd996d6d25f700a02d4dc2adfc_6a3107fd7349d72fc0ed7ec3.6a3c9019725f5e1a62dac15b.6a3c9018be1d6cf45a32c994:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/6/25 10:37:56)
截图4 - 全站 emoji 替换与 UI 专业化：展示 TRAE 将所有 emoji 替换为 SVG 图标、首页卡片替换为宠物状态预览图的过程 Session ID：156598852914932:d844b3b262c4407ce1b6a9d73d9509f0_6a3107fd7349d72fc0ed7ec3.6a3a2873449c601107ffad25.6a3a287332da7869c6bdb04a:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/6/23 16:10:12)
对应的报名审核通过的帖子链接
附录 - 技术栈： 前端：原生 HTML5 + CSS3 + JavaScript（ES6+） 架构：单页应用（SPA），hash 路由 样式：CSS Variables 主题系统，响应式布局 图标：内联 SVG（替代 emoji，确保跨平台兼容） AI 图像：rembg（背景移除）+ GenerateImage（AI 状态渲染） 动画：CSS @keyframes（呼吸/咀嚼/跳跃/浮动） 桌面应用：Tauri v2（Rust + WebView，透明窗口，支持 Windows/macOS） 数据：静态演示数据（mock 数据）
附录 - 项目文件结构： petwatch-demo/ 完整 SPA 应用 ├── index.html 主入口文件（含桌宠全部功能） ├── assets/cats/ 宠物图片资源（含原图/抠图/AI渲染共 60+ 张） └── screenshots/ 产品截图
petwatch/frontend/public/demo.html 精简版 Demo petwatch-desktop/ Tauri 桌面应用源码 ├── src/ 前端（HTML + CSS + JS） ├── src-tauri/ Rust 后端 └── package.json
petwatch-demo.zip (1.5 MB)
