1. 项目概述一个AI驱动的面试刷题伴侣最近在准备技术面试尤其是前端和全栈岗位刷LeetCode、牛客网成了日常。但刷题有个痛点题目做完了只能看个“通过/不通过”代码质量怎么样、有没有更好的解法、面试官会怎么追问心里完全没底。市面上一些工具能跑测试用例但缺少那种“真人面试官”的反馈感。正好我一直在用Claude、GPT这些大模型辅助编程和思考就琢磨着能不能让AI来当这个面试官于是我花了几周时间用Vue 3搭建了一个前端后端用Node.js Express核心是接入了多个主流大模型的API做了一个AI面试刷题系统。这个系统的核心功能很简单你写代码解题提交后系统不仅会运行测试用例判断对错还会调用你选择的AI模型我接入了Claude 3系列、DeepSeek最新模型、阿里的通义千问以及OpenAI的GPT-4让它从“面试官”的角度给你的代码打分并生成详细的评价报告。它适合所有正在准备技术面试的程序员尤其是前端、后端和算法方向的求职者。你不需要再对着冰冷的“AC”答案正确发呆而是能获得一份涵盖代码正确性、时间复杂度分析、空间复杂度优化、代码风格、可读性甚至潜在边界情况的立体化评估报告。我自己用它来复盘刷题记录感觉比单纯刷题效率高了不止一倍因为每一次提交都是一次微型的模拟面试。2. 系统核心设计与架构选型2.1 为什么选择多模型架构而非单一模型最初的想法很简单接一个最强的模型比如GPT-4不就完了但在实际设计时我否定了这个方案。原因有几个模型特性差异不同的模型擅长点不同。比如Claude在代码逻辑和安全性分析上非常严谨生成的评价往往一针见血DeepSeek作为国产翘楚对中文语境下的代码注释、命名规范理解更深入且API成本极具优势GPT-4则在创造性和多种解法的联想上表现突出。让用户有的选可以根据自己侧重的反馈类型如更看重性能优化还是代码规范来切换模型。成本与稳定性依赖单一API服务有风险。如果某个服务商临时调整策略、出现高延迟或故障整个系统就瘫痪了。多模型接入相当于有了“备胎”DeepSeek和通义千问的API成本更低可以作为高频使用的首选Claude和GPT-4则在需要深度分析时启用。避免模型偏见同一个问题不同模型的评价角度可能略有不同。对比阅读Claude和DeepSeek给出的评价有时能发现一些自己忽略的盲点这种多视角的反馈更有价值。基于这些考虑我设计了可插拔的模型适配层。后端定义一个统一的AIEvaluator接口不同模型的实现类去适配这个接口。这样增加一个新的模型支持只需要实现这个接口即可系统核心逻辑完全不用动。2.2 前端技术栈Vue 3 TypeScript Monaco Editor前端是用户直接交互的地方体验必须流畅。我选择了Vue 3的组合式API和script setup语法代码组织更清晰。状态管理直接使用Vue 3的reactive和ref管理组件状态对于简单的跨组件状态如用户选择的模型、主题设置使用provide/inject。没有引入Pinia因为当前应用复杂度还没到那个程度保持轻量。代码编辑器这是核心组件。我选择了微软的Monaco Editor也就是VS Code的内核。它支持语法高亮、智能提示、代码折叠、多光标等高级功能和本地IDE的写代码体验几乎一致。通过monaco-editor/vue这个封装好的Vue组件集成起来非常方便。UI组件库我使用了Element Plus它的组件丰富、文档清晰能快速搭建出美观且一致的后台管理界面。比如题目列表的表格、提交历史的翻页、模型选择的单选组用Element Plus能省下大量时间。TypeScript整个项目用TypeScript重写。这对于一个涉及复杂状态题目数据、评测结果、用户信息和多个API接口调用的应用来说能极大提升开发效率和代码可靠性避免很多低级错误。注意Monaco Editor的包体积较大直接全量引入会影响首屏加载。我通过import()动态异步加载编辑器组件并只启用必要的语言特性如JavaScript/TypeScript/Python有效控制了打包后的体积。2.3 后端与服务设计Node.js Express 任务队列后端职责明确用户认证、题目管理、代码运行、调用AI API、存储结果。Web框架Express足够轻量灵活路由中间件模式也符合我的开发习惯。配合express-async-errors处理异步错误让代码更整洁。代码执行安全沙箱这是技术难点和安全重点。绝对不能让用户提交的代码在服务器上直接eval或child_process.exec执行那等同于开放了服务器权限。我采用了isolated-vm这个库它提供了一个真正的V8隔离沙箱环境。用户代码在一个全新的、资源受限的V8 Isolate中运行无法访问Node.js的fs、net等模块也无法无限循环阻塞进程。我设置了严格的CPU时间和内存限制超限立即终止。AI API调用与任务队列AI生成评价可能需要几秒到十几秒不能阻塞HTTP请求。我引入了Bull这个基于Redis的队列库。当用户提交代码后后端立即响应“评测已开始”同时将一个评测任务包含代码、题目信息、所选模型推入Redis队列。一个独立的Worker进程从队列中取出任务依次执行1. 在沙箱中运行代码验证基础用例2. 调用对应AI API3. 将原始结果和AI评价一起存入数据库。前端通过WebSocket或轮询获取最终结果。数据库使用PostgreSQL。题目表、提交记录表、用户表、AI评测报告表关系清晰。利用JSONB字段存储AI返回的复杂结构化评价数据查询和更新都很方便。3. 核心功能模块深度解析3.1 智能评测流水线从代码提交到生成报告用户点击“提交”按钮后背后是一套完整的自动化流水线预处理与安全检查后端首先对用户代码进行简单的静态扫描使用正则表达式匹配绝对禁止的模式例如尝试导入child_process、fs或使用while(true)等可能造成死循环的代码片段。这一步是粗筛快速拦截明显恶意代码。测试用例执行在isolated-vm沙箱中注入题目预定义的输入用例执行用户函数捕获输出。将输出与预期结果进行对比。这里对比不是简单的对于数组、对象等复杂结构需要进行深度比较。此步骤产生基础分数例如20%的权重。构建AI提示词Prompt这是决定AI评价质量的关键。不能简单地把代码扔给AI说“评价一下”。我构建了一个结构化的Prompt模板你是一位资深技术面试官。请对以下编程题解进行评价 题目描述[这里插入题目描述包括输入输出示例] 用户提交的代码语言[JavaScript/Python][代码块]请从以下维度给出详细评价并给出总体得分百分制 1. 正确性是否通过了所有测试用例逻辑是否有误 2. 效率时间复杂度和空间复杂度分析是否最优有无优化空间 3. 代码风格命名、注释、格式是否符合规范 4. 健壮性是否考虑了边界条件如空输入、极大值 5. 可读性代码结构是否清晰易于他人理解 请以JSON格式回复包含score(总分), correctness, efficiency, style, robustness, readability(各项子分数), 以及detailed_feedback(详细文本评价)。这个Prompt明确了角色、任务、评价维度和输出格式让AI的反馈高度结构化便于前端解析和展示。调用AI API根据用户选择将构建好的Prompt发送至对应的AI服务商。这里需要处理各家的API差异比如OpenAI是messages数组Claude也是类似而DeepSeek的请求体格式可能略有不同。统一封装在各自的适配器中。结果解析与存储收到AI的JSON响应后解析并提取分数和评价。与第2步的基础分数按权重如AI评价占80%基础用例占20%合并计算出最终得分。将所有数据用户代码、测试结果、AI原始响应、解析后的结构化评价、最终分数存入数据库。实时反馈前端通过WebSocket将评测进度“运行测试中” - “调用AI分析中” - “完成”和最终结果推送给前端页面。前端收到后以清晰的面板展示分数雷达图和详细的评价文本。3.2 多模型API适配层实现细节为了让新增一个模型支持变得简单我抽象了一个基础类interface AIEvaluationRequest { code: string; problemDescription: string; language: string; } interface AIEvaluationResponse { score: number; // 总分 breakdown: { // 分项得分 correctness: number; efficiency: number; style: number; robustness: number; readability: number; }; detailedFeedback: string; // 详细评价 rawResponse?: any; // 原始API响应用于调试 } abstract class BaseAIModelAdapter { constructor(protected apiKey: string, protected config: any) {} abstract evaluate(request: AIEvaluationRequest): PromiseAIEvaluationResponse; // 公共方法如构建Prompt、处理错误 protected constructPrompt(req: AIEvaluationRequest): string { // 返回构建好的Prompt字符串 } }然后为每个模型创建子类class ClaudeAdapter extends BaseAIModelAdapter { async evaluate(request: AIEvaluationRequest): PromiseAIEvaluationResponse { const prompt this.constructPrompt(request); const response await fetch(https://api.anthropic.com/v1/messages, { method: POST, headers: { x-api-key: this.apiKey, anthropic-version: 2023-06-01, Content-Type: application/json, }, body: JSON.stringify({ model: claude-3-sonnet-20240229, // 可根据配置选择不同版本 max_tokens: 2000, messages: [{ role: user, content: prompt }] }) }); const data await response.json(); // 解析Claude返回的JSON转换为统一的AIEvaluationResponse格式 return this.parseResponse(data); } private parseResponse(claudeResponse: any): AIEvaluationResponse { // 具体解析逻辑确保格式统一 } } class DeepSeekAdapter extends BaseAIModelAdapter { async evaluate(request: AIEvaluationRequest): PromiseAIEvaluationResponse { const prompt this.constructPrompt(request); const response await fetch(https://api.deepseek.com/v1/chat/completions, { method: POST, headers: { Authorization: Bearer ${this.apiKey}, Content-Type: application/json, }, body: JSON.stringify({ model: deepseek-chat, // 或 deepseek-coder messages: [{ role: user, content: prompt }], response_format: { type: json_object } // 要求返回JSON }) }); const data await response.json(); return this.parseResponse(data); } // ... parseResponse }在服务启动时根据配置初始化这些适配器实例并注册到一个ModelFactory中。当Worker处理任务时只需从工厂获取对应的适配器实例调用evaluate方法即可。3.3 前端交互与状态管理设计前端页面主要分为几个核心区域题目选择区、代码编辑区、控制台运行结果/测试用例和AI评测报告区。响应式代码编辑器使用Monaco Editor并监听窗口resize事件动态调整编辑器尺寸。为用户提供了主题切换vs-dark, vs-light、字体大小调整、自动换行等常用功能。实时运行反馈当用户点击“运行”而非“提交”时前端只将代码和当前输入的用例发送到后端一个快速执行端点不经过AI和队列秒级返回执行结果在控制台显示。这给了用户一个即时验证的途径。评测报告可视化AI返回的结构化数据非常适合可视化。我使用ECharts绘制了一个雷达图直观展示在“正确性”、“效率”等五个维度的得分。下方以手风琴Accordion形式展开详细的文本评价关键建议用高亮标出。提交历史与对比所有提交记录都被保存。用户可以查看历史提交并选择两次提交进行“对比视图”系统会高亮显示代码差异并并排展示两次的AI评价清晰看到自己的改进轨迹。状态管理上核心的useCodingStore组合式函数大致如下// stores/useCodingStore.ts export const useCodingStore () { const currentCode refstring(); const selectedProblem refProblem | null(null); const selectedAIModel refclaude | deepseek | tongyi | gpt(deepseek); // 默认DeepSeek性价比高 const evaluationResult refEvaluationResult | null(null); const isEvaluating refboolean(false); const submitForEvaluation async () { if (!selectedProblem.value) return; isEvaluating.value true; evaluationResult.value null; try { // 1. 调用提交API触发后端任务队列 const { submissionId } await api.submitCode({ problemId: selectedProblem.value.id, code: currentCode.value, language: javascript, model: selectedAIModel.value }); // 2. 建立WebSocket连接或开始轮询获取评测进度和结果 const result await waitForEvaluationResult(submissionId); evaluationResult.value result; } catch (error) { // 错误处理 } finally { isEvaluating.value false; } }; return { currentCode, selectedProblem, selectedAIModel, evaluationResult, isEvaluating, submitForEvaluation }; };4. 开发中的关键挑战与解决方案4.1 安全隔离用户代码执行的“铁笼”让服务器执行未知用户代码是最大的风险点。我调研了多种方案Docker容器为每次执行启动一个全新的Docker容器用完即毁。安全性高但启动开销大秒级不适合高并发场景且需要管理Docker守护进程增加了运维复杂度。vm2或safe-eval等库它们提供了一定隔离但被证明存在逃逸漏洞安全性不足以应对恶意代码。isolated-vm它直接利用V8引擎的隔离能力每个“隔离岛”拥有独立的堆栈和内存空间与主Node.js环境完全隔离。性能开销极小毫秒级初始化资源限制精确。这是我最终选择的方案。具体实现const ivm require(isolated-vm); const isolate new ivm.Isolate({ memoryLimit: 128 }); // 限制128MB内存 const context await isolate.createContext(); const jail context.global; // 向沙箱暴露有限的、安全的函数比如一个console.log的代理 await jail.set(log, function(...args) { console.log(...args.map(arg ivm.ExternalCopy(arg).copy())); }); // 编译并运行用户代码 const script await isolate.compileScript(userCode); const result await script.run(context, { timeout: 5000 }); // 设置5秒超时遇到的坑isolated-vm的API比较底层需要手动处理错误和超时。特别是内存限制如果用户代码分配内存过多会抛出MemoryLimitExceeded错误需要在try-catch中妥善处理给前端返回友好的错误信息而不是让整个Worker崩溃。4.2 处理AI API的速率限制与稳定性所有AI服务商都有速率限制Rate Limit。如果用户集中提交短时间内大量调用API会导致限流任务失败。解决方案队列化与限流Bull队列本身就有并发控制功能。我为每个AI模型设置了一个独立的队列如claude-eval、deepseek-eval并设置每个队列的limiter例如{ max: 5, duration: 10000 }表示10秒内最多处理5个任务。这保证了发送到API的请求不会超速。指数退避重试在Worker任务处理逻辑中调用AI API时如果收到429 Too Many Requests或网络错误不会立即失败。我使用async-retry库包装API调用配置指数退避重试策略如最多重试3次延迟时间依次为1秒、2秒、4秒。很多临时性网络波动或轻微的速率限制通过重试就能成功。故障转移在系统配置中我可以为每个模型设置一个“备选模型”。当主模型连续失败多次后系统可以自动将任务路由到备选模型确保评测服务不中断。例如将DeepSeek设置为GPT-4的备选因为成本更低。4.3 评测标准统一与提示词工程不同AI模型对同一个Prompt的理解和输出格式会有差异。让Claude、DeepSeek、GPT-4都输出完全一致的JSON结构是个挑战。我的做法在Prompt中强制要求JSON格式如上文所示在Prompt末尾明确要求“请以JSON格式回复”并给出具体的字段名示例。对于支持response_format参数的API如OpenAI和DeepSeek的新版本直接设置response_format: { type: json_object }能极大提高返回JSON的稳定性。在后端进行健壮性解析编写一个宽容的解析函数。首先尝试JSON.parse。如果失败则尝试用正则表达式从返回的文本中提取可能的JSON块。如果还不行则尝试使用另一个AI比如GPT-3.5-turbo来对混乱的回复进行“结构化提取”。这是一个降级方案确保无论如何都能得到一些可用的数据。分数标准化不同模型打分尺度可能不同有的喜欢打80-90分有的偏严格打60-70分。我在系统设置中提供了一个“分数校准”功能。管理员可以手动评审一批提交给出“标准分”系统会学习并生成一个线性转换系数用于调整该模型的输出分数使其更接近统一标准。这是一个持续优化的过程。5. 部署、优化与未来展望5.1 系统部署与性能考量项目采用前后端分离部署。前端使用Vite构建产物部署到Netlify或Vercel享受全球CDN和自动HTTPS。后端使用Docker容器化。一个容器运行Express主服务处理HTTP请求和WebSocket另一个容器运行Node.js Worker进程专门处理Bull队列任务。两者都连接到同一个Redis实例作为队列和缓存和PostgreSQL数据库。数据库与缓存使用云服务商的托管PostgreSQL和Redis服务省去运维麻烦并配置了读写分离和连接池。性能优化点数据库查询优化对提交历史表按user_id和created_at建立复合索引加快个人历史查询速度。对题目列表进行分页查询。前端资源懒加载Monaco Editor、ECharts等较大库都使用动态导入。WebSocket连接管理使用ws库并设置心跳包防止连接超时。当用户离开评测页面时前端主动关闭WebSocket以释放服务器资源。5.2 实际使用体验与效果对比我自己和几位一起找工作的朋友深度使用了几周对比了不同模型的表现DeepSeek性价比之王。响应速度很快代码分析准确尤其是对中文注释的反馈很接地气。对于常见的算法题它的评价已经非常够用。成本只有GPT-4的几十分之一适合高频刷题。Claude 3 Sonnet分析最严谨、最像技术专家。它会非常仔细地推敲代码逻辑经常能指出一些极其隐蔽的边界条件错误并且给出的优化建议非常具体比如“这里可以用双指针将复杂度从O(n²)降到O(n)”。但响应稍慢成本中等。GPT-4创造力最强。当一道题有多种解法如递归、迭代、动态规划时GPT-4最擅长列举并对比这些解法甚至能联想到相关的实际应用场景。但在代码风格等细节上有时不如Claude严谨。通义千问对国内互联网公司的常见编码规范和工程实践理解很好给出的建议非常“本土化”适合瞄准国内大厂面试的同学。一个典型例子一道“二叉树层序遍历”的题。我用递归实现了。DeepSeek的评价是“正确但空间复杂度可能因递归栈而较高建议考虑迭代写法”。Claude的评价是“递归解法简洁但在最坏情况下链状树空间复杂度为O(n)。此外函数未处理输入为null的根节点情况可能导致错误。建议增加判空和迭代解法示例”。显然Claude的反馈更细致、更严格。5.3 可能的扩展方向这个系统目前已经比较实用但还有很多可以深化的地方支持更多编程语言目前主要支持JavaScript/TypeScript和Python。可以通过沙箱预装更多语言运行时如Java的OpenJDK、Go并定制对应的AI Prompt来扩展。模拟面试对话不止于代码评价可以开发一个“AI面试官对话模式”。AI根据题目逐步提问引导用户思考用户可以用自然语言回答思路AI再追问或提示模拟真实的面试互动。知识点关联与弱点分析系统可以记录用户所有提交分析其常错的题目类型如动态规划、链表自动生成个人知识薄弱点报告并推荐针对性练习题目。企业定制版为企业招聘团队提供定制服务导入公司内部的真实面试题库和评分标准用于候选人初筛或员工内部技能测评。做这个项目的初衷是为了解决自己刷题时的痛点但把它做出来、用起来之后发现它带来的价值远超预期。它不仅仅是一个“评分工具”更是一个24小时在线的、拥有不同风格和专长的“编程教练”。每次看到AI指出的那个自己没意识到的边界条件错误或者那个更优雅的解法都感觉收获满满。对于正在准备面试的朋友我的建议是工具能帮你提高效率但核心还是理解与练习。这个系统最好的用法是把它当作一个严格的“第一读者”帮你发现盲区而最终的总结和吸收还得靠你自己。