顶会热词统计系统——与AI结对编程实践

目录

一、项目介绍与交付入口

1.1 项目交付入口

以下链接将在项目完成后补充。

• CodeArts 仓库： https://codehub.devcloud.cn-north-4.huaweicloud.com/d4952406083c4b4ebc7bddffe1fbe13b/102400335.git
• Release 1.0.0： https://devcloud.cn-north-4.huaweicloud.com/codehub/project/d4952406083c4b4ebc7bddffe1fbe13b/codehub/3086808/tag
• 原型链接： https://modao.cc/ai/share/6ab582dc75d0275ef6fdc7da
• 在线系统： http://113.45.221.170:3000/
• AI 编程助手：ChatGPT、墨刀 AI、豆包
• AI 的主要用途：

• ChatGPT：需求拆分、技术方案讨论、代码实现、测试设计、Bug 定位、代码审查与迭代（本次开发的主要代码协作伙伴）；
• 墨刀 AI：原型信息架构、页面布局与交互逻辑设计辅助；
• 豆包（Doubao）：需求分析与方案补充、代码审查、云端部署（ECS、Node.js、端口放通等）指导、Git/CodeArts 与 Release 操作、作业文档与 PSP 表格整理（贯穿全程）。

1.2 项目背景

随着计算机视觉领域的发展，CVPR、ICCV、ECCV 等会议每年都会产生大量论文。对于刚开始学习计算机视觉的学生而言，仅仅浏览论文标题很难快速判断当前领域的研究热点。
因此，本项目设计并实现了一个项目名为CV Insight的顶会论文热词统计系统，希望通过论文信息管理、热门关键词统计、关键词关系图以及多年热度趋势等方式，将大量论文信息转换为更加直观的研究方向信息。
本项目主要围绕以下三个计算机视觉会议展开：

• CVPR
• ICCV
• ECCV
  系统的核心目标是帮助用户完成：
• 论文查找 → 关键词分析 → 热门方向发现 → 研究趋势观察 → 定位具体论文*

1.3 项目主要功能

目前系统已经实现：

1. 论文信息展示
2. 论文新增
3. 论文修改
4. 论文删除
5. 论文详情查看
6. 按论文 ID 搜索
7. 按论文标题精确搜索
8. 按标题、会议、关键词进行模糊搜索
9. CSV 批量导入论文
10. LocalStorage 数据持久化
11. Top 10 热门关键词统计
12. 关键词关系图谱
13. 点击关键词查看相关论文
14. 多年份关键词热度趋势
15. CVPR / ICCV / ECCV 会议筛选
16. 年度热词变化动画
    在线论文查询功能目前正在进行后端代理方案的完善。

二、NABCD需求分析

2.1 N——Need：需求

本系统主要面向以下用户：
① 计算机视觉初学者
刚接触计算机视觉时，很难快速了解当前领域有哪些热门研究方向。
② 软件工程课程学生
需要通过论文数据完成研究方向分析，同时希望通过一个简单的网页进行论文数据管理。
③ 论文阅读者
面对大量论文时，希望能够根据关键词快速筛选相关论文，并观察某一研究方向近年来的发展情况。
因此，系统需要解决的核心问题是：
如何从大量计算机视觉顶会论文中快速找到热门方向，并进一步定位到具体论文？

2.2 A——Approach：解决方案

针对上述需求，我将系统设计为几个相互关联的功能模块。

论文管理
通过论文列表统一管理论文数据，实现：

• 新增

• 删除

• 修改

• 查看

• 搜索

• 数据导入*
  支持 CSV 批量导入，CSV 文件可以包含：

  title
  conference
  year
  keywords
  abstract
  url

热门方向分析
系统对论文关键词进行统计，并根据关键词出现次数生成 Top 10 热门关键词。
关键词图谱
系统根据论文之间共享关键词的情况建立关键词关系，并以图谱形式展示。
点击关键词后，可以进一步查看与该关键词相关的论文。
热度走势
用户可以选择关键词以及会议范围，观察不同年份的关键词热度变化。

2.3 B——Benefit：项目收益

本系统主要具有以下作用：
降低论文信息整理成本
将论文信息集中到统一平台，减少重复整理工作。
提高研究方向发现效率
通过 Top 10 热门关键词，可以快速了解当前数据范围内出现频率较高的研究关键词。
增强论文之间的联系
关键词图谱将原本分散的论文关键词联系起来，可以从一个关键词继续寻找相关论文。
直观看到趋势变化
通过趋势图可以更加直观地观察关键词在不同年份中的变化。

2.4 C——Competition：竞争与替代方案

本系统并不是为了取代专业论文数据库，而是针对本次课程作业，将：
论文管理 + 关键词统计 + 可视化分析
集中到一个简单的网页系统中。

2.5 D——Delivery：交付

最终项目计划通过以下方式交付：

• CodeArts Git 仓库
• README.md
• codestyle.md
• 原型
• Web 成品
• 华为云服务器部署
• Release 1.0.0
• 项目博客

三、原型设计与原型链接

3.1 原型设计思路

在正式编码之前，根据作业要求对系统的信息架构进行了拆分。
最终页面主要分为：

首页（热门方向 Top10・系统功能介绍）
论文管理（论文搜索・论文列表・新增・编辑・删除・详情）
论文导入（在线查询・CSV 批量导入）
热门方向（Top10 热门关键词）
关键词图谱（关键词 → 相关论文）
热度走势（关键词选择・会议选择・年度趋势动画）

3.2 页面设计

目前系统已经完成以下主要页面：
首页
展示系统整体功能和热门研究方向。
论文管理
用于查看、搜索和管理论文。
论文导入
提供在线论文查询入口和 CSV 批量导入功能。
热门方向
展示当前论文数据中的 Top 10 热门关键词。
关键词图谱
将关键词之间的关系进行可视化。
热度走势
通过折线图和动画展示关键词在不同年份中的变化。

以下为原型展示图：

四、系统功能与成品展示

4.1 首页

首页负责展示系统整体结构，并提供主要功能入口。

4.2 论文管理

论文管理页面是整个系统的数据基础。
页面展示：

• 编号
• 标题
• 会议
• 年份
• 关键词
• 操作
  操作包括：
• 查看
• 编辑
• 删除

4.3 论文搜索

系统支持多种搜索方式。
首先可以根据论文 ID 进行精确查询。
其次可以根据完整论文标题进行精确查询。
如果没有找到精确结果，还可以根据：

• 标题
• 会议
• 关键词
• ID
  进行模糊搜索。
  如果本地论文库没有找到结果，系统会提示用户前往论文导入页面进行在线查询。

4.4 论文详情

点击论文的“查看”按钮，可以打开论文详情窗口。
详情包括：

• 论文标题
• 会议
• 年份
• 关键词
• 摘要
• 原文链接

4.5 CSV 批量导入

为了避免逐条添加论文，本系统增加了 CSV 批量导入功能。
CSV 文件支持：

title,conference,year,keywords,abstract,url

系统会自动：

1. 读取 CSV 文件；
2. 解析表头；
3. 读取论文信息；
4. 检查论文标题是否重复；
5. 自动生成论文 ID；
6. 保存论文数据；
7. 刷新论文列表；
8. 更新关键词图谱和趋势数据。

4.6 热门方向 Top 10

系统会统计论文关键词出现次数，并生成 Top 10 热门关键词。
该功能可以帮助用户快速了解当前论文数据中的高频研究方向。

4.7 关键词图谱

关键词图谱用于展示不同关键词之间的联系。
当多个论文共同包含某些关键词时，这些关键词之间会产生关联。
用户可以点击关键词，系统进一步展示相关论文。
这一功能将：
关键词 → 论文
建立起来，使用户能够从一个研究方向继续寻找具体论文。

4.8 热度走势

热度走势页面支持选择：

• 关键词
• 会议范围
  会议可以选择：
• 全部
• CVPR
• ICCV
• ECCV
  系统根据不同年份的数据计算关键词出现情况，并以折线图展示。

4.10 功能展示汇总

最终博客计划至少展示以下截图：

五、数据来源与数据处理

5.1 数据来源

本项目的数据主要通过以下方式进入系统。
CSV 数据
系统支持用户通过 CSV 文件批量导入论文数据。
CSV 可以包含：

title
conference
year
keywords
abstract
url

DBLP
项目在线查询功能设计中使用 DBLP 的论文检索接口获取论文基础信息。
在实际开发过程中，直接从浏览器调用 DBLP 接口时遇到了 CORS 跨域限制，因此后续设计了 Node.js 后端代理方案。
测试数据
开发阶段使用部分测试论文数据，用于验证：

• 论文管理
• 搜索
• 关键词统计
• 图谱
• 趋势图
  等功能。
  需要说明的是，开发阶段的测试数据主要用于验证程序功能，不能简单等同于完整的真实会议论文数据集。

5.2 数据结构

系统中的一条论文数据主要包含：

{
id: 1,
title: "论文标题",
conference: "CVPR",
year: 2023,
keywords: [
"Transformer",
"Vision"
],
abstract: "论文摘要",
url: "论文链接"
}

5.3 数据持久化

当前系统使用浏览器 LocalStorage 保存论文数据。

保存数据时： papers 数组 → JSON.stringify () → LocalStorage

页面重新打开后： LocalStorage → JSON.parse () → papers 数组
因此，在当前浏览器环境下，论文数据不会因为刷新页面而立即丢失。

5.4 数据去重

批量导入论文时，系统会根据论文标题进行重复检查。
如果发现论文标题已经存在，则跳过该论文。
这样可以避免重复导入同一篇论文。

5.5 关键词统计

当前版本主要采用论文数据中的关键词进行统计。
如果导入数据没有提供关键词，则系统会根据论文标题进行简单关键词提取。
后续如果扩大真实论文数据规模，可以进一步引入更系统的关键词提取方法。

六、AI结对协作过程

本次作业最大的特点不是单纯“让 AI 写代码”，而是尝试把 AI 当作一个可以不断沟通、修改和审查的结对伙伴。
实际开发过程中采用：

提出需求 → AI 给出方案 → 人工检查 → 实际运行 → 发现问题 → 把错误信息反馈给 AI → 修改方案 → 再次运行

这种方式比直接要求 AI 一次性生成整个项目更加可靠。

6.1 案例 A：AI 辅助需求分析与系统设计

在项目开始阶段，我首先将老师的作业要求交给 AI，让 AI 帮助拆分系统功能。
AI 根据作业要求将系统拆分为：

• 论文管理
• 论文导入
• 热门方向
• 关键词图谱
• 热度走势
  等模块。
• 我的 Prompt*
  根据软件工程实践第二次作业的要求，帮我设计一个顶会论文热词统计系统，需要包含论文管理、论文导入、Top10 热门方向、关键词图谱以及多年热度走势，请从页面结构和功能模块两个方面进行设计。
• AI 输出*
  AI 给出了系统功能划分、页面结构和数据流建议。
• 人工修改*
  我根据实际项目情况重新确定了页面导航：
  首页
  论文管理
  论文导入
  热门方向
  关键词图谱
  热度走势

并将功能逐步实现，而不是一次性开发所有模块。

6.2 案例 B：AI 辅助实现 CSV 批量导入

在编码阶段，我将已有的 HTML 和 JavaScript 代码逐步提供给 AI，让 AI 在现有项目基础上修改。
例如：
目前页面已经有 CSV 文件选择框和批量导入按钮，请在不修改其他功能的情况下，实现 CSV 解析，并将 title、conference、year、keywords、abstract、url 导入现有 papers 数组。
AI 给出了 CSV 解析代码。
在实际测试过程中，又发现 CSV 文件可能存在：

• UTF-8 BOM
• 引号
• 逗号
• 空行
• 中文关键词
  等情况。
  因此继续要求 AI 修改解析逻辑。
  最终形成：

CSV 文件 → FileReader → 去除 BOM → 逐行解析 → 解析 CSV 字段 → 检查 title → 检查重复 → 生成 ID → 加入 papers → 保存 LocalStorage → 刷新页面

最终经过实际测试后可以正常工作。

6.3 案例 C：AI 辅助调试论文搜索

在论文搜索功能开发过程中，希望搜索同时支持：

• ID 精确查询
• 标题精确查询
• 标题模糊查询
• 会议模糊查询
• 关键词模糊查询
  因此将已有搜索函数交给 AI 分析。
  最终搜索逻辑为：

输入关键词 → 是否为空？（非空则继续）→ ID 精确查询 → 标题精确查询 → 标题 / 会议 / 关键词模糊查询 → 找到？

• 是 → 显示
• 否 → 前往论文导入

这样同时满足了精确查询和模糊查询的要求。

6.4 案例 D：AI 辅助解决 CORS 问题

这是本次开发过程中比较典型的一次调试。
最初直接在浏览器中调用：
https://dblp.org/search/publ/api

但是浏览器控制台出现：

Access to fetch ... has been blocked by CORS policy

我将完整的控制台错误信息提供给 AI。
AI 判断这是浏览器同源策略导致的跨域问题。
之后尝试讨论不同的解决方式，最终采用：

浏览器 → localhost:3000 → Node.js 服务器 → DBLP API

由 Node.js 后端向 DBLP 发起请求，再将结果返回给前端。
这一过程让我认识到：
AI 可以很快提出解决方案，但真正决定方案是否可用的仍然是实际运行和人工验证。

七、设计与实现过程

7.1 系统功能结构

CV Insight

• 论文管理 → 新增・修改・删除 → 搜索（精确查询 / 模糊查询）
• 数据分析 → Top10・图谱・趋势
• 可视化 → 关键词图・趋势图

7.2 前端结构

项目采用原生 HTML、CSS 和 JavaScript 实现。
主要文件：
index.html
style.css
app.js
papers.js

index.html
负责：

• 页面结构
• 导航
• 表格
• 表单
• 模态框
• 图表容器
• style.css*
  负责：
• 页面布局
• 卡片
• 表格
• 按钮
• 弹窗
• 图谱
• 趋势图等视觉样式
• app.js*
  负责：
• 论文 CRUD
• 搜索
• CSV 导入
• LocalStorage
• Top10
• 关键词图谱
• 趋势图
• 在线查询
• papers.js*
  保存开发阶段使用的初始化测试数据。

7.3 数据流

系统核心数据流如下：

CSV / 测试数据 / 在线数据 → papers 数组 → LocalStorage 保存 → 论文管理 / Top10 / 图谱 → 趋势

7.4 功能结构图

功能结构图如下：

八、关键代码与代码说明

8.1 LocalStorage 数据持久化

为了避免刷新网页后论文数据丢失，增加了 LocalStorage。

const STORAGE_KEY = "cv_papers";

function loadPapers() {
const savedData = localStorage.getItem(STORAGE_KEY);
if (savedData) {
try {
const savedPapers = JSON.parse(savedData);
if (Array.isArray(savedPapers)) {
papers = savedPapers;
}
} catch (error) {
console.error("读取本地论文数据失败：", error);
}
}
}
function savePapers() {
localStorage.setItem(
STORAGE_KEY,
JSON.stringify(papers)
);
}

核心思想：
将 JavaScript 数组转换成 JSON 字符串保存，读取时再转换回数组。

8.2 论文搜索

搜索功能按照优先级依次进行：

function searchPapers() {
const input = document.getElementById("searchInput");
const keyword = input.value.trim().toLowerCase();
if (!keyword) {
displayPapers(papers);
return;
}
const idResult = papers.filter(paper =>
String(paper.id).toLowerCase() === keyword
);
if (idResult.length > 0) {
displayPapers(idResult);
return;
}
const exactResult = papers.filter(paper =>
paper.title &&
paper.title.trim().toLowerCase() === keyword
);
if (exactResult.length > 0) {
displayPapers(exactResult);
return;
}
const fuzzyResult = papers.filter(paper => {
const title = paper.title
? paper.title.toLowerCase()
: "";
const conference = paper.conference
? paper.conference.toLowerCase()
: "";
const keywords = Array.isArray(paper.keywords)
? paper.keywords.join(" ").toLowerCase()
: "";
return title.includes(keyword) ||
conference.includes(keyword) ||
keywords.includes(keyword);
});
displayPapers(fuzzyResult);
}

该功能实现了：

• ID 精确查询
• 标题精确查询
• 标题模糊查询
• 会议模糊查询
• 关键词模糊查询

8.3 CSV 导入

CSV 导入的核心过程：

读取文件 → 解析表头 → 寻找 title 字段 → 逐行读取 → 检查重复 → 解析关键词 → 生成 ID → 加入论文数组 → 保存

同时处理了 UTF-8 BOM 和 CSV 引号等情况。

8.4 Top10 热门关键词

系统遍历所有论文关键词，对关键词出现次数进行统计。

const keywordCount = {};

papers.forEach(paper => {
if (!Array.isArray(paper.keywords)) {
return;
}
paper.keywords.forEach(keyword => {
if (!keywordCount[keyword]) {
keywordCount[keyword] = 0;
}
keywordCount[keyword]++;
});
});

最后将结果排序并取前十名。

8.5 关键词图谱

关键词图谱首先统计关键词之间的共现关系。
例如一篇论文同时包含：

Transformer
Vision
Classification

那么这些关键词之间存在关联。
通过这种方式，可以将论文数据转换成：

关键词节点 + 关键词关系

再通过前端进行可视化展示。
点击关键词后，再从论文数组中筛选包含该关键词的论文。

8.6 热度趋势

趋势图根据：

年份+会议+关键词

进行筛选。
例如用户选择：

关键词：Transformer
会议：CVPR

系统统计不同年份 Transformer 在 CVPR 数据中的出现情况，并生成折线图。

进行会议范围筛选。

九、CodeArts 与 Git 协作

9.1 分支策略

本次项目采用：

dev ——merge —— main

开发阶段主要在 dev 分支进行。
基本功能开发完成并经过测试后，再将 dev 合并到 main。

9.2 Commit 记录

根据作业要求，最终仓库需要至少 15 次真实 commit。
计划根据实际开发过程形成：

最终以 CodeArts 中真实产生的 Commit 记录为准。

9.3 Release

基本功能开发完成并经过测试后，创建：

Release 1.0.0

后续如果继续增加功能，可以发布新的版本。

十、代码规范

项目单独编写：

codestyle.md

代码规范主要参考主流官方规范，并在文件顶部注明来源。
项目主要涉及：

• JavaScript
• HTML
• CSS
• Node.js
  具体规范包括：
• 命名规范
• 缩进规范
• 注释规范
• HTML 标签规范
• CSS 命名规范
• Git Commit 规范

十一、云服务器部署

本项目最终计划部署到华为云服务器。
部署结构：

用户浏览器 → 华为云服务器 → Web 服务 → 项目页面 → Node.js 后端

十二、PSP 表格与耗时分析

偏差分析
本项目使用 AI 进行辅助开发，因此编码阶段部分工作的完成速度比完全独立开发更快。
但是，AI 提高编码速度的同时，也增加了人工检查成本。
例如：

• AI 生成代码后需要实际运行；
• 部分代码需要结合现有项目结构修改；
• API 是否能够从浏览器直接访问需要实际测试；
• CORS 问题需要根据实际环境判断；
• 功能是否真正符合老师要求需要人工检查。
  因此：
• AI 可以减少“写代码”的时间，但不会消除“理解需求、验证代码和承担最终责任”的时间。*

十三、个人心路历程与收获

这次作业与之前单独写程序的体验比较不同。
以前遇到问题时，通常需要自己搜索资料、阅读文档，然后尝试修改代码。
这次更多采用：
我提出问题 → AI 提供方案 → 我实际运行 → 把错误反馈给 AI → 再修改
这种循环。
最开始认为 AI 可以直接把整个项目写出来，但实际开发后发现并不是这样。
例如 CSV 导入功能，表面上只是读取文件并按照逗号拆分，但实际测试之后还会涉及：

• UTF-8 BOM
• CSV 引号
• 空行
• 重复论文
• 中文关键词
• ID 生成
  如果直接复制 AI 的第一版代码，很容易留下问题。
  因此，这次作业让我更加明显地认识到：
• AI 编程最重要的不是“让 AI 写多少代码”，而是如何描述问题、验证结果以及根据实际情况继续提出准确的问题。*

十四、对 AI 结对伙伴的评价

14.1 AI 的优势

① 反馈速度快
遇到代码问题时，可以立即询问。
② 能够提供多个解决思路
例如遇到 DBLP CORS 问题时，可以讨论：

• 更换数据源；
• 后端代理；
• 修改请求方式。
• ③ 适合处理重复性代码*
  例如：
• CRUD
• CSV 解析
• 数据统计
• 页面元素生成
  这些任务 AI 可以快速提供初稿。

14.2 AI 的局限

AI 生成的代码并不意味着一定正确。
实际开发中的典型问题就是 DBLP 在线查询。
最开始直接在前端调用接口时出现：

Access to fetch ... has been blocked by CORS policy

这说明：
AI 给出的代码必须通过真实运行环境验证。
此外，如果 AI 没有完整理解当前项目结构，直接进行大范围修改，也可能导致原本正常的功能出现问题。
因此，在本项目中逐渐采用：
小范围修改，立即测试，确认正常后再继续。

十五、项目总结

本次项目从一个简单的“顶会热词统计”需求开始，逐步实现了：

• 论文管理
• 论文搜索
• CSV 批量导入
• 热门关键词统计
• 关键词图谱
• 关键词关联论文
• 多年份热度趋势
• 年度热词动画
  同时实际经历了：
  需求分析 → 原型设计 → 编码 → 测试 → 发现问题 → AI 辅助分析 → 修改 → 再次测试

在这个过程中，我对 AI 结对编程有了更加具体的认识。
AI 更像是一名可以随时讨论问题的编程伙伴，但最终的需求理解、代码审查、测试验证以及项目责任仍然需要由开发者自己承担。
因此，本次作业最大的收获并不是：
“AI 帮我写了多少代码”
而是：
“我学会了如何提出问题、验证答案、发现错误，并让 AI 根据真实结果继续参与开发。”