山东大学软件学院项目实训-基于大模型的模拟面试系统（三）

一、本周工作内容

（一）登录注册界面开发（作者：吴尤）

本周的主要任务是开发模拟面试系统的登录注册界面。登录注册界面是用户接触系统的第一印象，因此需要简洁、直观且安全。以下是具体的工作内容：

1. 前端界面设计

• 背景设计：为了直观展示模拟面试的性质，选择了一张面试插画作为背景，既美观又不繁杂。使用
  标签创建背景层，并通过 backgroundImage 属性设置背景图片。
• 页面布局：利用 和 对页面进行划分，确保布局合理。登录表单部分使用 标签，包含账号、密码输入框以及登录、注册按钮。同时，为表单添加了表单验证规则，确保用户输入有效信息。
• 样式调整：虽然省略了具体的 CSS 调整过程，但花费了大量时间进行细节优化，包括按钮样式、输入框样式等，以提升用户体验。

2. 脚本功能实现

• 登录功能：通过 this.$refs.user.validate() 方法验证表单输入是否有效。如果有效，将账号和密码封装成数据对象，使用 this.$auth.loginWith() 方法发送登录请求。登录成功后，保存 token 和 refreshToken 到认证系统，并跳转到指定路由页面。
• 注册功能：注册界面与登录界面类似，但增加了发送验证码的功能。通过 this.$axios.$get() 方法向后端发送请求，获取验证码。同时，实现了 60 秒倒计时功能，避免用户频繁发送验证码。注册时，将用户输入的邮箱、密码和验证码封装成数据对象，通过 this.$axios.$post() 方法发送注册请求。

3. 后端接口对接

• 登录接口：后端提供了 /login 接口，接收用户账号和密码，返回登录结果。如果登录成功，返回包含 token 和 refreshToken 的响应数据。
• 注册接口：后端提供了 /register 接口，接收用户邮箱、密码和验证码，完成用户注册。注册过程中，会校验验证码是否正确，邮箱是否已注册，并对用户密码进行加密处理。

（二）AI提示词工程开发（作者：孙旭）

本周与队友 吴浩明 同学一起开发了题库和在线 IDE 功能。以下是具体的工作内容：

1. 题库功能开发

• 题目管理模块：实现了题目列表功能，支持按题目编号、标题、难度、标签等多维度搜索筛选。同时，提供了题目统计展示，包括总题目数量、已解决题目数、尝试过的题目数以及各难度的通过率。
• 题目详情功能：展示了题目基本信息，如题目编号、标题、难度标签、时间/内存限制、提交/通过统计等。题目描述采用 Markdown 格式，支持输入/输出说明、示例数据展示以及相关提示信息。

2. 在线 IDE 功能开发

• 代码编辑模块：集成了 Monaco Editor 作为代码编辑器，支持多种编程语言（Java、C++、Python 等），具备语法高亮、自动补全、代码格式化、实时错误提示等功能。同时，提供了编辑器主题切换和自动保存功能。
• 代码运行功能：支持用户自定义输入测试和示例数据测试，实时展示运行结果，包括执行状态、运行时间、内存占用以及输出结果。
  ####3.提示词工程
• 代码评测系统：分为预处理、执行验证和评分反馈三个阶段，评分机制参考名企标准：正确性60%、效率30%、代码规范10%，情绪感知和智能互动机制
• 面试流程制定： 模拟面试分三步：自我介绍、技术问答、反问环节，岗位定制化问题生成（前端/算法等不同方向）

（三）OJ 系统开发（作者：吴浩明）

本周主要负责 OJ 系统的开发，已完成前端在线 IDE 的开发，后端评测机正在开发中。以下是具体的工作内容：

1. 技术栈选择

• 前端：采用 Vue.js 2.x 和 Element UI 框架，结合 Monaco Editor 实现代码编辑功能，使用 Marked 进行 Markdown 渲染。
• 后端：基于 Spring Boot 框架，使用 MyBatis 进行数据访问，MySQL 作为数据库，Shiro 实现权限管理。

2. 系统功能设计

• 题目管理模块：实现了题目列表和题目详情功能。支持多维度搜索筛选和题目统计展示，题目详情页面展示题目基本信息、Markdown 格式描述、输入/输出说明、示例数据以及相关提示信息。
• 代码编辑模块：完成了前端代码编辑功能，集成 Monaco Editor，支持多种编程语言，具备语法高亮、自动补全、代码格式化、实时错误提示等功能。同时，实现了编辑器主题切换和自动保存功能。
• 代码运行功能：支持用户自定义输入测试和示例数据测试，实时展示运行结果，包括执行状态、运行时间、内存占用以及输出结果。

3. 后端接口设计

• 题目相关接口：设计了以下接口：

  • GET /api/v1/problems：获取题目列表。
  • GET /api/v1/problems/{id}：获取题目详情。
  • GET /api/v1/problems/tags：获取所有标签。
  • GET /api/v1/problems/statistics：获取统计信息。
  • POST /api/v1/problems/post：添加新题目。
  • PUT /api/v1/problems/post：更新题目。
  • DELETE /api/v1/problems/delete/{id}：删除题目。

• 数据库设计：创建了 oj_problem 表，包含以下主要字段：

  • id：主键。
  • problem_code：题目编号（如 P1001）。
  • title：题目标题。
  • description：题目描述（Markdown 格式）。
  • input_description：输入说明。
  • output_description：输出说明。
  • difficulty：难度级别。
  • time_limit：时间限制（ms）。
  • memory_limit：内存限制（MB）。
  • tags：题目标签（JSON 数组）。
  • sample_input：示例输入。
  • sample_output：示例输出。
  • test_cases：测试用例（JSON 格式）。
  • hints：提示信息。
  • source：题目来源。
  • submit_count：提交次数。
  • accept_count：通过次数。
  • acceptance_rate：通过率。

（四）Agent 逻辑与聊天内容设计（作者：王博凡）

本周主要负责整个项目 Agent 逻辑的设计，以及详细聊天内容的设计。以下是具体的工作内容：

1. Agent 逻辑设计

• 逻辑图设计：绘制了 Agent 逻辑图，明确了各个模块之间的关系和交互流程。
• 需求分析：确定了 Agent 的主要功能需求，包括存储对话主题下的所有对话记录、每个对话的详细信息（谁说的、时间、内容等）以及分支对话设计。

2. 详细聊天内容设计

• 分支对话保存：设计了分支对话的保存机制，通过拷贝一份新的 conversation，将保存的分支完整赋值一遍作为单一分支，其他分支砍掉。
• 类树结构设计：定义了分支的类树结构，包括 branch 和 message 的数据结构。branch 包含 branchId、conversationId、userId、messages、parent_branchId 和 children 等字段；message 包含 message_id、role、content、timestamp 和 branchInfo 等字段。
• 节点分支路径构建：明确了节点分支路径的构建方法，包括如何处理第一个 message 的分支操作以及非第一个 message 的分支操作。
• 分支相关显示：设计了分支相关的显示逻辑，通过查找父节点和兄弟节点来查询分支数和分支对应 tag，并显示在分支的第一个 message 上。

3. 聊天文件内容处理

• RAG 策略设计：根据用户的输入在向量数据库中查询，设定相似度阈值，如果超过该阈值，则将相关内容作为输入插入到 message 中作为提示。
• 文件上传处理：采用额外集成 embedding model 的方法，将上传文件处理后以 message 的形式存储在数据库（MongoDB）中。使用文件工具和语音识别工具，将所有信息以特殊标签的形式附加在 message 中，确保信息的持久存储。

二、本周工作成果与问题

（一）工作成果

1. 登录注册界面开发完成：

   • 前端界面简洁美观，用户体验良好。
   • 实现了登录、注册功能，包括表单验证、验证码发送、倒计时等功能。
   • 后端接口对接成功，登录注册流程顺畅。

2. 题库和在线 IDE 功能初具雏形：

   • 题库功能支持多维度搜索筛选和题目统计展示。
   • 在线 IDE 集成 Monaco Editor，支持多种编程语言，具备语法高亮、自动补全等功能。
   • 代码运行功能支持自定义输入测试和示例数据测试，实时展示运行结果。

3. OJ 系统开发取得阶段性进展：

   • 前端在线 IDE 开发完成，用户体验良好。
   • 后端接口设计完成，数据库设计合理，支持题目管理、代码提交等功能。

4. Agent 逻辑与聊天内容设计完成：

   • Agent 逻辑图绘制完成，明确了模块之间的关系和交互流程。
   • 聊天内容设计支持分支对话，能够存储对话记录和分支信息。
   • 聊天文件内容处理采用 RAG 策略，支持文件上传和持久存储。

（二）遇到的问题

1. 前端样式调整耗时：

   • 在登录注册界面的前端样式调整过程中，花费了大量时间进行细节优化，导致开发进度稍有延迟。

2. 后端接口调试困难：

   • 在对接后端接口时，遇到了一些问题，如接口返回数据格式不符合预期、接口调用失败等，经过多次调试才解决。

3. 分支对话设计复杂：

   • 分支对话的保存和显示逻辑较为复杂，需要仔细设计数据结构和交互流程，确保分支对话的正确性和用户体验。

4. 文件上传处理挑战：

   • 文件上传处理需要集成 embedding model，将文件内容转换为向量并存储到数据库中，技术实现难度较大。

三、下周工作计划

1. 完善登录注册功能：

   • 进一步优化登录注册界面的用户体验，增加更多安全措施，如密码加密、验证码校验等。

2. 继续开发题库和在线 IDE 功能：

   • 完善题库功能，增加更多题目类型和难度级别。
   • 优化在线 IDE 的代码运行功能，提高运行效率和稳定性。

3. 推进 OJ 系统开发：

   • 完成后端评测机的开发，实现代码提交后的自动评测功能。
   • 优化系统性能，提高用户体验。

4. 完善 Agent 逻辑与聊天内容设计：

   • 进一步优化分支对话的保存和显示逻辑，确保用户体验良好。
   • 完善文件上传处理功能，确保文件内容能够正确存储和检索。

5. 团队协作与沟通：

   • 加强团队成员之间的沟通与协作，及时解决开发过程中遇到的问题。
   • 定期召开项目进度会议，确保项目按时推进。

通过本周的努力，项目取得了阶段性进展。下周我们将继续推进各项工作，确保项目顺利进行。