【生活娱乐赛道】万籁灵犀——人与宠物沟通的桥梁，让你听懂宠物的语言

TRAE AI 创造力大赛 【大赛初赛专区】
1

【生活娱乐赛道】万籁·灵犀 - AI宠物语言翻译系统

0. 先和大家打个招呼吧 :waving_hand:

  • 我是一名独立开发者，热爱技术与宠物，致力于用AI技术改善人与宠物之间的沟通方式；

  • 作为独立开发者，我习惯先把需求梳理清楚，用标准格式写好产品需求文档，然后交给 TRAE 来实现。TRAE 让我印象最深的是它强大的代码生成能力和对需求的理解能力。

    开发过程中，我先和 TRAE 讨论了整体架构设计，确定用 HTML + CSS + JavaScript 的轻量级方案。然后把每个功能模块拆分开来，逐一让 TRAE 实现：

    • 界面设计：我描述了想要的设计风格（琥珀色主色调、圆润卡片、粒子背景），TRAE 很快就生成了完整的 HTML 和 CSS 代码
    • 核心功能：声音录制、波形可视化、情绪分析等功能，TRAE 都能准确实现，甚至帮我处理了 Web Audio API 的兼容性问题
    • 多语言切换：我提出需要中英文切换，TRAE 设计了完整的 i18n 系统，包括翻译数据、切换逻辑和本地存储
    • 人声过滤：当我提到要基于频率差异过滤人声时，TRAE 自动实现了高通/低通滤波器，效果超出预期

    最让我惊喜的是 TRAE 对细节的把控，比如深色模式的样式适配、粒子背景随主题变色等，都是 TRAE 主动考虑到并实现的。原本以为需要花几天的开发工作，在 TRAE 的帮助下几个小时就完成了。

1. Demo 简介

  • 是什么： 一款基于AI声学分析的宠物语言翻译跨平台 Web 应用；

  • 面向谁： 养宠物的家庭用户、宠物爱好者、宠物医院、规模化养殖场所；

  • 主要功能：

    ① 声音录制与翻译

    • 支持实时麦克风录制和模拟宠物声音（猫叫、狗吠、鸟鸣）
    • 自动分析宠物情绪并翻译成人类语言
    • 支持语音合成回应宠物

    ② 人声智能过滤

    • 基于频率差异（人声85-255Hz vs 宠物声300Hz-8kHz）自动分离人声与宠物声音
    • 使用 Web Audio API 实现高通/低通滤波器链

    ③ 多语言与多主题

    • 支持中英文一键切换
    • 明亮/深色主题自适应
    • 用户偏好本地存储

2. Demo 创作思路

  • 灵感来源： 作为一个养宠人士，我经常好奇宠物发出的各种声音到底在表达什么。有一次看到国外研究表明动物确实有复杂的情感表达方式，于是萌生了用AI技术来解读宠物语言的想法；

  • 想解决的问题：

    • 宠物主人无法理解宠物叫声的含义，导致沟通障碍
    • 宠物的健康问题往往通过异常叫声表现，但主人难以察觉
    • 缺乏便捷的工具来帮助人们更好地了解和照顾宠物

  • 为什么做这个方向：

    • 宠物市场规模庞大，养宠人群持续增长，沟通需求真实存在
    • AI语音识别技术已经成熟，具备实现基础
    • 声学分析在医疗诊断领域已有应用，可以迁移到宠物健康监测
    • 这是一个兼具趣味性和实用性的创新方向，既有娱乐属性又有社会价值

3. Demo 体验地址

  • 体验链接： http://localhost:8080/ （本地运行）
  • 项目文件： 已打包为 ZIP 格式，包含完整的 HTML/CSS/JS 源码

4. TRAE 实践过程

开发流程

  1. 需求梳理阶段：我先用自然语言描述了项目的整体构想，包括产品定位、核心功能、设计风格等；

  2. 架构设计阶段：TRAE 帮我规划了技术架构，建议使用 HTML + TailwindCSS + JavaScript 的轻量级方案，避免复杂的框架配置；

  3. 功能实现阶段：

    • 首页布局和粒子背景动画
    • 音频录制和波形可视化
    • 情绪分析模拟和语音合成
    • 多语言切换系统（i18n）
    • 多主题切换系统（明亮/深色）
    • 人声频率过滤算法

  4. 优化迭代阶段：根据交互体验反馈，TRAE 帮助优化了动画效果、响应式布局和深色模式适配；

关键步骤截图

（以下为关键开发步骤的描述，实际截图需用户补充）

截图1：项目初始化与架构设计

  • 使用 TRAE 创建项目结构（index.html、css/style.css、js/目录）
  • 引入 TailwindCSS 和 Font Awesome CDN
  • 设计粒子背景动画效果

截图2：核心功能开发

  • 实现声音录制功能（Web Audio API）
  • 创建圆形波形可视化
  • 添加模拟猫/狗/鸟声音的演示按钮

截图3：多语言与多主题

  • 创建 i18n.js 翻译系统
  • 添加语言切换按钮（地球图标）
  • 添加主题切换按钮（月亮/太阳图标）
  • 实现 CSS 变量驱动的主题系统

关键任务对话 Session ID

  • Session ID 1： 1044987351672540:b4ef62f587fa43bc2fa3c555b97319ca_6a4e0e71dff2ab979896b305.6a4e0e72dff2ab979896b308.6a4e0e71dff2ab979896b306:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/8 16:46:42) - 项目初始化与首页布局开发
  • Session ID 2： 1044987351672540:13100acd838b98ffc9b362ea7a521a4b_6a4e0e71dff2ab979896b305.6a4e117ddff2ab979896b3a4.6a4e117ddff2ab979896b3a2:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/8 16:59:41) - 音频录制与波形可视化功能
  • Session ID 3： 1044987351672540:d9b30e2d56079aab81f41f1a3fa33832_6a4e0e71dff2ab979896b305.6a4e47f5dff2ab979896b416.6a4e47f5dff2ab979896b414:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/8 20:52:05) - 多语言切换与多主题切换功能
  • Session ID 4： 1044987351672540:97d6bac35774b534cc171bbf1f2c482e_6a4e0e71dff2ab979896b305.6a4e4d34dff2ab979896b445.6a4e4d34dff2ab979896b443:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/8 21:14:28) - 人声过滤算法实现

—截图如下：

dda10afb6c3934ad45d20653442ac16a
dda10afb6c3934ad45d20653442ac16a1173×837 102 KB

d48ce12d4e626cb907bf0eab338afd2d
d48ce12d4e626cb907bf0eab338afd2d1589×939 142 KB

6880451da2cc43471253cfd124c5fc81
6880451da2cc43471253cfd124c5fc811554×870 117 KB

wanlai.zip (22.6 KB)

5. 对应的报名审核通过的帖子链接

（https://forum.trae.cn/t/topic/41504）

6. 经验总结与踩坑复盘

成功经验

  1. 需求前置：先把需求梳理清楚再交给AI，能大幅提高开发效率和代码质量
  2. 模块化开发：把复杂功能拆分成小模块，逐一实现，更容易控制质量
  3. 及时验证：每个功能完成后立即测试验证，避免问题累积

踩坑复盘

  1. 环境问题：最初尝试用 React + npm 初始化项目，遇到环境限制无法执行 npm 命令，后来改用纯 HTML + CDN 的方案解决
  2. 命令兼容性：Windows PowerShell 与 Linux Shell 命令语法不同（如 mkdir -p vs New-Item），需要注意命令适配
  3. 多语言属性遗漏：第一次实现多语言时，部分HTML元素忘记添加 data-i18n 属性，导致翻译不完整，后来逐一检查补齐

TRAE 使用心得

TRAE 作为AI编程工具，最大的价值在于：

  • 快速原型验证：能快速把想法变成可运行的代码
  • 技术知识补全：对于不熟悉的API（如 Web Audio API），TRAE 能给出完整的实现方案
  • 细节处理：会主动考虑边界情况和用户体验细节
  • 持续迭代：支持交互式修改，随时可以调整代码

建议开发者在使用 TRAE 时：

  1. 明确需求，给出清晰的描述
  2. 拆分任务，逐步实现
  3. 及时验证，发现问题立即反馈
  4. 充分利用 TRAE 的代码审查和优化能力
1 个赞