DeepAspect - 外卖平台智能评价摘要系统

基于深度学习的外卖评价观点三元组提取与摘要系统（毕业设计展示）

✨ 项目特色

这是一个专为毕业论文展示设计的前端系统,具有以下特点:

• 🎨 现代科技感UI: 暗色主题 + 玻璃形态效果 + 渐变配色
• 🔍 文本高亮展示: 智能标注评价对象(Aspect)和观点词(Opinion)
• 🏷️ 三元组可视化: 胶囊标签直观展示(Aspect, Opinion, Sentiment)
• 🤝 悬浮联动效果: 鼠标悬浮在标签上,文本中对应内容会高亮缩放
• 📊 数据统计图表: ECharts展示评价维度分布、情感趋势等
• ⚡ 丝滑动画: 所有交互都有流畅的过渡动画

🚀 快速开始

安装依赖

npm install

启动开发服务器

npm run dev

服务器将在 http://localhost:3000 启动并自动打开浏览器。

构建生产版本

npm run build

预览生产构建

npm run preview

🛠️ 技术栈

• Vue 3 - 渐进式 JavaScript 框架
• Vite - 下一代前端构建工具
• Tailwind CSS - 实用优先的 CSS 框架
• ECharts - 强大的数据可视化库
• Axios - HTTP 客户端(用于API调用)

📁 项目结构

DeepAspect/
├── src/
│   ├── components/
│   │   ├── ReviewItem.vue      # 评论卡片组件(核心)
│   │   ├── ChartCard.vue       # 图表卡片组件
│   │   └── StatCard.vue        # 统计卡片组件
│   ├── data/
│   │   └── mockData.js         # 模拟数据
│   ├── App.vue                 # 主应用组件
│   ├── main.js                 # 应用入口
│   └── style.css               # 全局样式
├── index.html
├── package.json
├── vite.config.js
├── tailwind.config.js
└── postcss.config.js

🎯 核心功能说明

1. 文本高亮展示

系统会根据后端返回的三元组数据中的索引范围(a_range, o_range),自动在原始评论文本中高亮标注:

• Aspect(评价对象): 蓝紫色渐变背景 + 蓝色下划线
• Opinion(观点词):
  • 正向(pos): 绿色渐变背景 + 绿色下划线
  • 负向(neg): 红色渐变背景 + 红色下划线

2. 悬浮联动效果

当鼠标悬浮在下方的三元组标签上时:

• 上方文本中对应的 Aspect 和 Opinion 会放大并产生发光效果
• 标签本身也会放大并显示阴影
• 所有动画都是平滑过渡,增强视觉效果

3. 数据统计

系统提供多维度的数据统计:

• 总评论数、平均评分、好评率、三元组数
• 评价维度分布(饼图)
• 情感趋势分析(折线图)
• 评价维度热度排行(柱状图)

🔌 后端数据对接

数据格式约定

后端API应返回以下格式的JSON数据:

{
  "text": "这份黄焖鸡分量很足,但是土豆有点硬,配送速度倒是挺快。",
  "triplets": [
    {
      "aspect": "黄焖鸡",
      "opinion": "分量很足",
      "sentiment": "pos",
      "a_range": [2, 5],
      "o_range": [5, 9]
    },
    {
      "aspect": "土豆",
      "opinion": "有点硬",
      "sentiment": "neg",
      "a_range": [12, 14],
      "o_range": [14, 17]
    }
  ]
}

字段说明

• text: 原始评论文本
• triplets: 三元组列表
  • aspect: 评价对象
  • opinion: 观点词
  • sentiment: 情感极性(pos正向/neg负向)
  • a_range: Aspect在文本中的索引范围 [start, end)
  • o_range: Opinion在文本中的索引范围 [start, end)

API集成

修改 src/data/mockData.js 或在组件中使用 axios 调用真实API:

import axios from 'axios'

// 获取评论数据
const fetchReviews = async () => {
  const response = await axios.get('http://your-api.com/reviews')
  return response.data
}

🎨 界面定制

修改主题色

编辑 tailwind.config.js 中的 colors 配置:

colors: {
  primary: {
    500: '#0ea5e9',  // 主色调
    // ...
  }
}

调整动画效果

编辑 src/style.css 中的动画关键帧和 CSS 类。

📝 毕设答辩建议

在答辩时可以重点演示:

1. 算法可视化: 展示三元组提取结果如何与原文对应
2. 交互设计: 演示悬浮联动效果,体现用户体验思考
3. 数据洞察: 通过图表说明评价维度分布和情感趋势
4. 技术选型: 说明为什么选择 Vue 3 + Tailwind 等现代技术栈
5. 扩展性: 说明如何对接真实后端API

📄 License

MIT

---

开发者: [您的名字]
学校: [您的学校]
专业: [您的专业]
年份: 2024