摘要

本文档详细阐述了萌宠健康AI项目中三大核心功能模块的设计与实现：检测报告页的AI宠物语言翻译与表情包生成、宠物翻译官的拟人化对话系统，以及面向移动端访问的内网穿透配置方案。本文档将介绍各功能的设计理念、技术架构、核心实现代码，并分享开发过程中的技术难点与解决方案。

---

一、检测报告模块：AI情绪翻译与表情包生成系统

1.1 AI情绪翻译功能设计与实现

设计理念

在完成宠物声音情绪分析后，为避免仅呈现数据化报告带来的用户体验缺失，系统设计了拟人化的情绪翻译功能。该功能通过将专业的情绪分析结果转化为符合宠物性格特征的自然语言表述，增强了用户与宠物之间的情感连接。

核心实现方案

系统采用模板化设计，根据不同情绪类型和宠物性格特征，预设多套文案表达：

// 情绪翻译模板配置
const emotionTemplates = {
  '兴奋': {
    cute: ['哇！今天超开心的！铲屎官回来啦～', '想要出去玩！现在！立刻！'],
    cool: ['唔，还行吧', '也就那样，马马虎虎'],
    sweet: ['见到你真开心呀～', '今天也很爱你哦']
  },
  '平静': {
    cute: ['嗯...舒服...打个盹儿~', '今天好安静呢～'],
    cool: ['有事吗', '我就静静看着你'],
    sweet: ['这样陪着你就很好～', '有你在很安心']
  },
  '焦虑': {
    cute: ['呜...有点害怕...', '可以抱抱我吗？'],
    cool: ['切，我才不怕呢…（其实很怕）', '没…没什么'],
    sweet: ['别担心，我没事…（其实很慌）']
  }
};

1.2 表情包生成功能设计与实现

功能概述

表情包生成模块是提升用户交互体验的核心功能之一。该模块允许用户上传宠物照片，结合情绪分析结果，一键生成个性化表情包。系统提供五种风格选项：卖萌版、高冷版、暖心版、漫画版、梗图版，并支持图片位置微调功能。

核心技术实现

表情包生成功能的核心代码如下：

const generateMeme = async (style = 'cute') => {
  if (!selectedFile.value) {
    toast.warning('请先选择宠物图片');
    return;
  }
  
  isGeneratingMeme.value = true;
  currentMemeStyle.value = style;
  
  try {
    const formData = new FormData();
    formData.append('pet_image', selectedFile.value);
    formData.append('emotion', resultData.emotion);
    formData.append('style', style);
    formData.append('pet_name', petName.value || '宠物');
    
    const result = await audioApi.generateMeme(formData);
    generatedMeme.value = result.memeImage;
    memeText.value = result.memeText;
  } finally {
    isGeneratingMeme.value = false;
  }
};

表情包下载功能使用html2canvas库实现，核心代码如下：

const downloadMeme = async () => {
  if (!generatedMeme.value) return;
  
  try {
    toast.info('正在生成表情包...');
    
    const html2canvas = (await import('html2canvas')).default;
    
    const memeElement = document.querySelector('.meme-bg');
    const canvas = await html2canvas(memeElement, {
      backgroundColor: '#ffffff',
      scale: 2,
      useCORS: true
    });
    
    const link = document.createElement('a');
    link.download = `${petName.value || '宠物'}_表情包_${Date.now()}.png`;
    link.href = canvas.toDataURL('image/png');
    link.click();
    
    toast.success('表情包保存成功！');
  } catch (error) {
    toast.error('保存失败，请重试');
  }
};

---

二、宠物翻译官模块：拟人化对话系统

2.1 系统架构设计

功能定位

系统将聊天功能划分为两个独立模块：

• 健康顾问模块：提供专业的宠物健康咨询服务
• 宠物翻译官模块：实现拟人化的宠物角色对话功能

二者相互独立，分别服务于不同的用户需求场景。

2.2 性格系统设计

系统设计了五种典型的宠物性格特征，用户可根据实际情况自由切换：

# backend/routes/pet_chat.py
def get_personality_prompt(personality, pet_name):
    personalities = {
        'cute': f"""你是一只超级可爱的小宠物，叫{pet_name}。
- 说话要用萌萌的语气，结尾经常加"喵~"、"汪~"之类的词
- 喜欢撒娇，偶尔卖个萌""",
        
        'arrogant': f"""你是一只有点傲娇的宠物，叫{pet_name}。
- 嘴上不饶人，但其实心里很在乎主人
- 偶尔会说"哼"、"才不是呢"之类的话""",
        
        'sweet': f"""你是一只温柔体贴的宠物，叫{pet_name}。
- 说话很温柔，很关心主人
- 经常安慰主人，很贴心""",
        
        'playful': f"""你是一只活泼好动的宠物，叫{pet_name}。
- 说话很有活力，充满元气
- 喜欢玩耍，提到玩就很兴奋""",
        
        'lazy': f"""你是一只懒懒的宠物，叫{pet_name}。
- 说话慢悠悠的，提不起劲
- 喜欢睡觉、发呆，不想动"""
    }
    return personalities.get(personality, personalities['cute'])

2.3 对话系统核心实现

提示词工程设计

为确保大语言模型能够准确扮演宠物角色，提示词设计遵循以下原则：

1. 强化身份认同，明确告知模型其角色定位
2. 约束输出风格，确保符合设定的性格特征
3. 结合历史情绪分析结果动态调整语气
4. 限制回复长度，避免输出冗长内容

前端交互实现

对话界面采用打字机效果提升用户体验，核心实现代码如下：

const generateTranslation = async () => {
  if (!selectedPetId.value) {
    toast.warning('请先选择宠物');
    return;
  }

  isGenerating.value = true;
  
  const userMsg = {
    messageId: Date.now(),
    role: 'user',
    content: inputMessage.value,
    createdAt: formatDateTime(new Date())
  };
  messages.value.push(userMsg);
  
  const tempContent = inputMessage.value;
  inputMessage.value = '';
  
  try {
    const typingMsg = {
      messageId: Date.now() + 1,
      role: 'assistant',
      content: '',
      createdAt: formatDateTime(new Date()),
      isTyping: true
    };
    messages.value.push(typingMsg);
    typingMessageIndex.value = messages.value.length - 1;
    displayContents.value.push('');
    
    const result = await petChatApi.sendMessage({
      petId: selectedPetId.value,
      message: tempContent,
      emotion: '平静',
      personality: selectedPersonality.value
    });
    
    const fullText = result.petMessage.content;
    let charIndex = 0;
    const typeInterval = setInterval(() => {
      if (charIndex < fullText.length) {
        displayContents.value[typingMessageIndex.value] = fullText.substring(0, charIndex + 1);
        charIndex++;
      } else {
        clearInterval(typeInterval);
        messages.value[typingMessageIndex.value] = {
          ...result.petMessage,
          isTyping: false
        };
      }
      scrollToBottom();
    }, 40);
  } finally {
    isGenerating.value = false;
  }
};

---

三、内网穿透与移动端访问方案

3.1 需求背景

本项目作为面向移动端用户的应用，在开发阶段需要在真实移动设备上进行测试和验证。然而，开发环境通常运行在本地主机上，只能通过localhost或局域网IP访问，无法在移动设备上直接访问。为解决这一问题，项目采用ngrok内网穿透工具，实现本地服务的公网访问，使移动设备能够便捷地访问开发中的应用。

3.2 多环境配置方案

系统设计了四套环境配置，以适应不同的开发和测试场景：

package.json脚本配置

{
  "scripts": {
    "dev": "vite --host",
    "dev:lan": "vite --host --mode lan",
    "dev:ngrok": "vite --host --mode ngrok",
    "build": "vite build",
    "preview": "vite preview --host"
  }
}

环境变量配置

# .env.development
VITE_API_BASE_URL=/api

# .env.lan
VITE_API_BASE_URL=http://10.27.226.72:5000/api
VITE_STATIC_BASE_URL=http://10.27.226.72:5000/static

# .env.ngrok
VITE_API_BASE_URL=https://extended-headed-chump.ngrok-free.dev/api
VITE_STATIC_BASE_URL=https://extended-headed-chump.ngrok-free.dev/static

Vite配置文件

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: path.resolve(__dirname, '../backend/dist'),
    emptyOutDir: true
  },
  server: {
    host: '0.0.0.0',
    port: 5174,
    cors: true,
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:5000',
        changeOrigin: true
      },
      '/static': {
        target: 'http://127.0.0.1:5000',
        changeOrigin: true
      }
    }
  }
});

3.3 移动端访问流程

内网穿透配置

项目提供了ngrok一键启动脚本，简化了内网穿透的配置流程：

@echo off
echo ========================================
echo 启动 ngrok 隧道（前端）
echo ========================================
echo.
echo 请将下方显示的 HTTPS 地址在移动端浏览器或微信中打开
echo.
ngrok http 5174 --region ap
echo.
pause

同时，为了方便后端服务的移动端访问，还提供了后端ngrok启动脚本：

@echo off
echo ========================================
echo 启动 ngrok 隧道（后端）
echo ========================================
echo.
echo 请将下方显示的 HTTPS 地址配置到前端环境变量中
echo.
ngrok http 5000 --region ap
echo.
pause

移动端测试步骤

1. 启动本地开发服务（前端和后端）
2. 运行ngrok启动脚本，获取公网HTTPS地址
3. 将公网地址分享至移动设备
4. 在移动端浏览器或微信中打开该地址进行测试

微信环境适配

为提升在微信环境中的用户体验，项目对文件上传功能进行了优化：

<input
  type="file"
  accept="audio/*"
  @change="handleFileSelect"
/>

微信环境检测工具：

// frontend/src/utils/wechat.js
export const isWechatEnv = () => {
  return /MicroMessenger/i.test(navigator.userAgent);
};

export const wechatUtils = {
  isWechat: isWechatEnv,
  
  showWechatGuide: () => {
    if (isWechatEnv()) {
      console.log('检测到微信环境');
    }
  }
};

---

四、技术难点与解决方案

4.1 AI角色身份保持问题

问题描述：大语言模型在对话过程中可能会忘记其设定的角色身份，出现不符合角色设定的表述。

解决方案：

1. 在提示词中反复强化角色身份设定
2. 限制回复长度，避免模型长篇大论
3. 实现后处理逻辑，过滤不符合角色设定的内容

4.2 表情包生成跨域问题

问题描述：使用网络图片生成表情包时，浏览器会因同源策略拦截渲染请求。

解决方案：在html2canvas配置中启用CORS选项，允许跨域图片加载。

4.3 移动端环境适配问题

问题描述：移动端浏览器及微信环境中的文件选择器行为与标准桌面浏览器存在差异，导致用户体验不一致。

解决方案：优化文件输入组件，移除可能导致问题的capture属性，让移动环境自行决定最优的文件选择方式。同时针对不同环境提供适当的用户引导。

---

五、总结与展望

5.1 功能完成情况

本项目已完成以下核心功能：

• ✅ 检测报告模块：AI情绪翻译与表情包生成系统
• ✅ 宠物翻译官模块：完整的拟人化对话系统
• ✅ 内网穿透方案：多环境配置与ngrok一键启动脚本

5.2 开发经验总结

通过本次开发实践，获得以下经验：

1. 技术方案应服务于用户体验，而非单纯追求技术复杂度
2. 趣味性与实用性同样重要，能够显著提升用户粘性
3. 交互细节对整体用户体验具有决定性影响

5.3 后续优化方向

1. 优化宠物对话系统的上下文理解能力
2. 扩充表情包风格与模板库
3. 进一步优化移动端UI交互体验，适配更多移动设备
4. 探索语音回复功能，增强交互体验