这次我们来看一个专门为 LeetCode 刷题者设计的 AI 侧边栏工具。它不是一个直接给你答案的“作弊器”而是一个采用苏格拉底式提问法引导你一步步自己找到解题思路的智能助手。对于正在准备技术面试、希望真正提升算法能力的开发者来说这是一个能让你摆脱“一看就会一写就废”困境的实用工具。这个工具的核心价值在于“引导”而非“给予”。它不会直接输出完整的代码而是通过提问、提示关键概念、分析边界条件等方式帮助你激活已有的知识构建解题逻辑。这比直接看题解更能锻炼思维也更符合面试中面试官期望的思考过程。本文将带你全面了解这个 AI LeetCode 侧边栏从它的核心能力、安装部署方式到如何与浏览器集成、进行实际解题互动再到其背后的技术实现思路和常见问题排查。无论你是想将其作为个人学习工具还是研究如何将类似 AI 助手集成到自己的产品中这篇文章都能提供清晰的路径。1. 核心能力速览能力项说明项目类型浏览器扩展 / AI 编程助手核心功能在 LeetCode 题目页面侧边栏提供苏格拉底式提示引导用户思考解题步骤。AI 交互模式对话式提示逐步引导不直接提供完整代码解决方案。集成平台主流浏览器如 Chrome、Edge 等基于 Chromium 的浏览器。启动/使用方式安装浏览器扩展后访问 LeetCode 题目页面自动激活侧边栏。硬件门槛无特殊要求。扩展本身不进行本地模型推理依赖后端 AI API 服务。是否支持 API是。扩展前端与后端 AI 服务通过 API 通信后端服务可自部署或使用第三方。是否支持批量任务不直接支持。主要用于单题交互式学习但可记录对话历史用于复习。适合场景个人算法学习、面试准备、理解解题思路、锻炼问题分解能力。2. 适用场景与使用边界这个 AI 侧边栏工具主要服务于以下几类用户算法学习者正在系统学习数据结构和算法需要有人引导思考而不是直接看答案。求职面试者针对技术面试中的算法题进行练习模拟面试官追问的场景训练解题表述能力。教育工作者可以将其作为辅助教学工具演示如何引导学生思考复杂的编程问题。工具开发者对构建交互式 AI 编程助手感兴趣可参考其前端集成与提示词设计思路。它能解决的核心问题思维惰性打破遇到难题就立即查看完整题解的依赖培养独立分析问题的习惯。思路卡壳在某个具体步骤如选择数据结构、确定循环边界上卡住时获得针对性提示。知识串联帮助你将题目与已知的算法模式如双指针、动态规划、回溯联系起来。面试模拟提供类似技术面试的互动体验面试官通常会通过提问来考察你的思考过程。不适合的场景与使用边界寻求即时答案如果你希望快速获取某道题的 AC 代码这个工具不是最佳选择它旨在延长你的思考过程。完全零基础工具假设使用者具备基础的编程语法和数据结构知识。它引导的是解题策略而非教授基础语法。离线环境该工具通常需要连接后端 AI 服务如 OpenAI GPT、Claude 或开源模型 API无法在完全离线的环境下工作。直接用于提交工具生成的对话和提示不能作为最终的解题代码提交你需要理解后自己编写实现。合规与版权提醒该工具是对 LeetCode 平台的辅助学习请勿用于任何自动化提交、刷分或干扰平台正常运行的行为。使用 AI 服务时请注意用户协议避免向 API 发送敏感或个人代码如果自建服务需注意数据安全。尊重 LeetCode 平台的题目版权所有题目内容归属 LeetCode。3. 环境准备与前置条件在安装和使用这个 AI 侧边栏之前你需要确保满足以下条件浏览器环境一款基于 Chromium 内核的浏览器如Google Chrome、Microsoft Edge或Brave。这是安装浏览器扩展的前提。确保浏览器已更新到较新版本。AI 服务后端关键该扩展本身只是一个前端界面它需要与一个能够处理自然语言、理解算法题目的 AI 后端进行通信。选项A使用第三方 API你需要拥有一个可用的 AI API 密钥例如OpenAI GPT 系列模型的 API Key。Anthropic Claude 的 API Key。其他兼容 OpenAI API 格式的开源模型部署服务如本地部署的 Llama、Qwen 等通过text-generation-webui或vLLM提供的 API。选项B自行部署后端如果你希望完全掌控可以部署项目的后端服务如果项目开源了后端代码。这通常需要Python 3.8 环境。必要的 Python 包如fastapi,openai等。可访问的服务器或本地主机用于运行后端并暴露 API 端点。LeetCode 账户虽然查看题目不一定需要登录但为了获得完整的交互体验如查看题目描述、测试用例建议拥有一个 LeetCode 账户。网络连接需要能够稳定访问 LeetCode 网站以及你配置的 AI 后端 API 地址。4. 安装部署与启动方式由于这是一个浏览器扩展其“部署”主要分为两步安装扩展和配置后端。4.1 安装浏览器扩展通常开源项目会提供扩展的打包文件.crx或.zip或发布在 Chrome 网上应用店。我们以开发者模式加载未打包的扩展为例获取扩展源代码从项目的 GitHub 仓库例如https://github.com/xxx/ai-leetcode-sidebar克隆或下载 ZIP 包。打开浏览器扩展管理页面在 Chrome 地址栏输入chrome://extensions/并回车。开启开发者模式在页面右上角打开“开发者模式”开关。加载已解压的扩展程序点击“加载已解压的扩展程序”按钮。选择扩展目录在弹出的文件选择器中导航到你下载的项目文件夹选择包含manifest.json文件的根目录然后点击“选择文件夹”。确认安装如果一切正常扩展列表中会出现新安装的扩展并显示其图标和名称。4.2 配置 AI 后端连接安装扩展后通常需要点击扩展图标或进入扩展选项页面进行配置。打开扩展选项在chrome://extensions/页面找到该扩展点击“详细信息”然后找到并点击“扩展程序选项”链接如果项目提供了选项页。或者直接点击浏览器工具栏上的扩展图标可能会弹出配置界面。设置 API 端点与密钥在配置页面你需要填写以下关键信息API Base URL你的 AI 后端地址。例如使用 OpenAI 官方 APIhttps://api.openai.com/v1使用本地部署的兼容 OpenAI 的 APIhttp://localhost:8000/v1或http://your-server-ip:port/v1API Key对应服务的 API 密钥。如果使用本地部署且未设置密钥可能留空或填写dummy-key。Model Name指定要使用的模型如gpt-4-turbo-preview、claude-3-haiku-20240307或本地模型名。保存配置填写完毕后点击保存或应用按钮。4.3 验证扩展是否工作打开一个新的浏览器标签页访问任意一道 LeetCode 题目例如https://leetcode.com/problems/two-sum/。观察页面。如果扩展正常工作你应该能在页面右侧或左侧看到一个新增的侧边栏面板。侧边栏内可能会有初始提示如“准备好开始思考了吗”或一个输入框等待你发起对话。5. 功能测试与效果验证安装配置完成后我们通过解决一个具体的 LeetCode 题目来测试其核心功能。测试题目LeetCode 第 1 题 “两数之和 (Two Sum)”测试目标验证 AI 助手能否通过提问引导用户得出“使用哈希表”的解题思路而不是直接给出代码。5.1 测试步骤访问题目页面在浏览器中打开https://leetcode.com/problems/two-sum/。激活侧边栏确保扩展已启用侧边栏应自动出现。如果没有尝试刷新页面或检查扩展是否被禁用。发起对话在侧边栏的聊天输入框中输入一个开场白例如“我正在尝试解决‘两数之和’这道题。题目要求是在数组中找到两个数使它们的和等于目标值。你能给我一些提示吗”观察 AI 回应一个设计良好的苏格拉底式助手可能会这样回应引导性提问1“首先你能想到最直接的方法是什么它的时间复杂度是多少”你回答暴力双重循环O(n²)。引导性提问2“很好。那么为了优化时间我们是否可以用空间换时间有没有一种数据结构可以让我们快速O(1)查找一个补数target - current_number是否存在”你可能会想到“集合”或“字典”。引导性提问3“对哈希表字典是个好选择。那么在遍历数组时具体如何操作这个哈希表呢是先全部存入再查找还是边遍历边处理”引导性提问4“考虑一下如果数组中有重复的数字或者目标值恰好是某个数的两倍你的算法还能正确工作吗需要处理哪些边界情况”逐步构建思路跟随 AI 的提问一步步在脑海中或草稿上构建算法逻辑。最终你应该能自己推导出使用一次遍历和哈希表记录的经典解法。尝试编写代码根据引导得出的思路在 LeetCode 的代码编辑器中尝试自己实现。5.2 预期结果与成功标准成功标准1AI 的回复是一系列问题或简短的提示而不是完整的算法描述或代码块。成功标准2提示具有递进性从暴力解法引导到优化思路再到具体数据结构和实现细节。成功标准3提示能触及关键点如“时间复杂度”、“空间换时间”、“哈希表”、“一次遍历”、“边界条件重复、零”。成功标准4通过交互你能够独立地形成清晰的解题步骤并成功通过代码实现。5.3 测试其他功能维度多轮对话深度针对一个复杂问题如动态规划题测试 AI 是否能进行多轮深入对话引导你定义状态、找到转移方程。不同题型适配尝试数组、链表、树、图、回溯、动态规划等不同类型的题目观察提示策略是否有所变化。代码理解提示如果你已经写了一版有错误的代码可以将错误信息或思路困惑点输入侧边栏看 AI 是否能针对你的具体代码逻辑进行提问和引导。6. 接口 API 与后端集成示例这个扩展的前端需要与后端 AI 服务通信。理解其 API 调用方式有助于你自行部署或定制后端。6.1 前端请求格式推测扩展前端 likely 会向后端发送一个结构化的请求包含题目信息和用户当前的问题。一个简化的请求示例可能如下{ question_title: Two Sum, question_content: Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target..., user_message: 我正在尝试解决‘两数之和’这道题。题目要求是在数组中找到两个数使它们的和等于目标值。你能给我一些提示吗, conversation_history: [ {role: user, content: Hello}, {role: assistant, content: Im here to help you think through LeetCode problems. What problem are you working on?} ], hint_level: socratic // 可能指定提示风格 }6.2 后端服务实现示例Python FastAPI如果你想自己部署一个简单的兼容后端可以使用以下代码作为起点。这个后端使用 OpenAI 格式的 API但实际调用的是你配置的模型。# main.py from fastapi import FastAPI, HTTPException from pydantic import BaseModel from typing import List, Optional import openai # 或使用其他兼容库如 litellm app FastAPI() # 配置你的 AI 服务 # 方式1: 使用 OpenAI 官方 # openai.api_key your-openai-key # openai.base_url https://api.openai.com/v1 # 方式2: 使用本地部署的兼容 OpenAI 的 API (如 text-gen-webui 或 vLLM) openai.api_key dummy-key # 如果本地不需要密钥 openai.base_url http://localhost:5000/v1 # 你的本地 API 地址 class ChatMessage(BaseModel): role: str content: str class HintRequest(BaseModel): question_title: str question_content: str user_message: str conversation_history: Optional[List[ChatMessage]] [] hint_level: str socratic app.post(/api/generate_hint) async def generate_hint(request: HintRequest): 接收前端请求构造给 AI 模型的系统提示和用户消息返回 AI 的提示。 # 1. 构造系统提示定义 AI 的“苏格拉底导师”角色 system_prompt f 你是一位经验丰富的算法教练擅长通过提问引导学生自己找到答案。 当前题目{request.question_title} 题目描述{request.question_content[:500]}... 已截断 你的任务不是直接给出解决方案或代码。而是通过提出引导性问题、提示关键概念、指出可能的优化方向来帮助学生构建解题思路。 请确保你的回复是简洁的、问题形式的并且基于当前的对话历史。 # 2. 构造消息历史 messages [ {role: system, content: system_prompt}, ] # 加入历史对话 for msg in request.conversation_history[-6:]: # 保留最近几轮历史 messages.append({role: msg.role, content: msg.content}) # 加入用户当前消息 messages.append({role: user, content: request.user_message}) try: # 3. 调用 AI 模型 response openai.ChatCompletion.create( modelgpt-3.5-turbo, # 或你配置的其他模型名 messagesmessages, temperature0.7, max_tokens300, # 限制回复长度保持提示的简洁性 ) ai_hint response.choices[0].message.content.strip() # 4. 返回结果 return {hint: ai_hint} except Exception as e: raise HTTPException(status_code500, detailfAI service error: {str(e)}) if __name__ __main__: import uvicorn uvicorn.run(app, host0.0.0.0, port8000)6.3 运行与测试后端安装依赖pip install fastapi uvicorn openai或litellm。将上述代码保存为main.py。确保你的本地 AI 模型服务如text-generation-webui的--api模式正在运行并记下其 API 地址如http://localhost:5000。修改main.py中的openai.base_url指向你的本地服务地址。运行后端python main.py。在浏览器扩展的配置中将API Base URL设置为http://localhost:8000即你的 FastAPI 后端地址。现在扩展的前端请求将发送到你的自部署后端由后端代理请求到你本地的 AI 模型。7. 资源占用与性能观察由于该工具的核心是一个轻量级浏览器扩展和一个远程或本地API 调用其资源占用主要集中在两个方面浏览器扩展本身内存占用极小通常只有几 MB 到十几 MB。它主要是一个内容脚本Content Script和侧边栏 UI不执行复杂计算。AI 后端服务使用云端 API如 OpenAI无本地资源占用性能取决于网络延迟和 API 响应速度。每次提示生成通常需要 2-10 秒。使用本地部署模型这是资源消耗的主要部分。显存/内存取决于你运行的 AI 模型大小。一个 7B 参数量的模型以 4-bit 量化加载可能需要 4-6 GB 显存。如果使用 CPU 推理则需要足够的系统内存。CPU/GPU 利用率在生成提示时对应的计算硬件会有短暂的高利用率。响应时间本地模型的首次加载冷启动较慢但后续单次推理速度较快通常在 1-5 秒内取决于模型大小和硬件。性能优化建议选择合适的模型用于提示和引导不需要极强的代码生成能力。一个 7B-13B 参数量的模型如 CodeLlama、Qwen-Coder、DeepSeek-Coder 的 instruct 版本在正确提示词引导下完全足以胜任苏格拉底式提问的任务且资源需求相对较低。使用量化模型优先使用 GPTQ、AWQ、GGUF 等量化格式的模型可以大幅降低显存和内存占用。设置合理的上下文长度题目描述可能较长但对话历史可以适当截断只保留最近几轮以减少 token 消耗和推理时间。后端服务缓存对于热门题目可以考虑在后端对 AI 生成的提示进行缓存避免对相同问题重复计算。8. 常见问题与排查方法问题现象可能原因排查方式解决方案侧边栏不显示1. 扩展未启用。2. 未在 LeetCode 域名下激活。3. 扩展脚本注入失败。1. 检查chrome://extensions/确保扩展已启用。2. 确认当前网址是leetcode.com/problems/*。3. 打开浏览器开发者工具F12查看 Console 是否有错误。1. 启用扩展。2. 刷新 LeetCode 页面。3. 尝试重新加载扩展或检查扩展的content_scripts匹配规则。侧边栏显示但无法交互/无响应1. 后端 API 配置错误。2. 网络问题导致 API 请求失败。3. 后端服务未启动或崩溃。1. 检查扩展配置中的 API URL 和 Key 是否正确。2. 打开开发者工具F12的 Network 面板查看发送到后端 API 的请求是否返回错误如 404, 403, 500。3. 检查后端服务进程是否运行查看后端日志。1. 修正扩展配置。2. 确保网络可通检查 CORS 设置如果后端自部署。3. 重启后端服务检查依赖和环境。AI 回复不是提示而是直接给答案1. 系统提示词System Prompt未正确设置或未生效。2. 使用的 AI 模型不适合指导性任务。1. 检查后端服务中构造system_prompt的代码确保其明确要求“提问而非解答”。2. 尝试在用户消息中明确强调“请只提问引导我不要给代码”。1. 强化系统提示词例如“你是一位严格的教练只允许通过提问来引导。如果用户直接索要答案请拒绝并反问一个关键问题。”2. 更换或微调模型选择更擅长遵循指令的模型。API 请求超时1. 网络延迟高。2. 本地模型推理速度慢。3. 后端服务处理瓶颈。1. 测试网络到 API 地址的延迟。2. 查看后端服务日志确认单次推理耗时。3. 监控服务器资源CPU/GPU/内存使用率。1. 优化网络或使用更近的服务器。2. 为本地模型启用量化或使用更小的模型。3. 在后端增加请求超时设置在前端添加加载状态和重试机制。提示质量不高问题不相关1. 模型能力有限。2. 传入的题目上下文信息不全或格式乱。3. 对话历史处理不当。1. 尝试不同的模型。2. 检查前端发送给后端的question_content是否完整、清晰。3. 检查对话历史的格式和截断逻辑。1. 升级模型或使用专门针对代码/数学推理微调的模型。2. 优化前端提取题目信息的逻辑确保关键部分描述、示例被包含。3. 优化历史管理确保核心上下文不丢失。CORS 错误自部署后端未正确配置跨域资源共享。浏览器开发者工具 Console 中会显示类似Access-Control-Allow-Origin的错误。在后端服务中添加 CORS 中间件。例如在 FastAPI 中from fastapi.middleware.cors import CORSMiddleware然后配置允许的前端来源。9. 最佳实践与使用建议为了最大化这个工具的学习效果并确保稳定使用可以参考以下建议明确使用目标在打开工具前先自己思考题目 5-10 分钟。明确自己卡在哪个具体环节是思路方向、数据结构选择还是边界条件再向 AI 提问。这样获得的提示会更有针对性。主动引导对话不要只说“帮帮我”。尝试描述你的初步思路和遇到的障碍例如“我想到用滑动窗口但不确定窗口收缩的条件是什么” AI 的回应会基于你提供的上下文。结合官方题解在使用 AI 引导得出思路后再去对比 LeetCode 的官方题解或高质量社区题解。这可以验证你的思路并学习更优雅的代码实现。记录对话历史有价值的引导对话可以保存下来作为你个人的“解题思路笔记”方便日后复习。后端部署优化提示词工程精心设计系统提示词是效果的关键。明确角色、规则和输出格式。模型选择对于算法引导推理能力强的模型比纯代码生成模型可能更合适。可以测试claude-3-haiku,gpt-4,deepseek-coder-instruct等。服务监控如果自建服务供多人使用需要监控 API 调用频率、响应时间和错误率。隐私与安全如果使用第三方 API请注意其隐私政策避免发送敏感代码或个人信息。自建服务时确保 API 端点有适当的访问控制如简单的 Token 验证避免被滥用。作为教学工具教师或导师可以利用此工具通过观察学生与 AI 的互动过程来了解学生的思考模式和常见误区从而进行更有针对性的辅导。这个 AI LeetCode 侧边栏项目代表了一种更健康的编程辅助方向——它强化的是思维过程而非结果复制。它的价值不在于帮你快速通过一道题而在于训练你解决未来无数道题的能力。工具本身安装简单核心挑战在于后端 AI 服务的选型与提示词调优。建议先从配置一个云端 API 开始体验理解其工作流程和效果。如果你对提示词工程或本地模型部署感兴趣再尝试自建后端进行深度定制。把它当作一位严格的陪练你的算法肌肉才会越练越强。 AI LeetCode侧边栏：苏格拉底式算法引导工具部署与使用指南
这次我们来看一个专门为 LeetCode 刷题者设计的 AI 侧边栏工具。它不是一个直接给你答案的“作弊器”而是一个采用苏格拉底式提问法引导你一步步自己找到解题思路的智能助手。对于正在准备技术面试、希望真正提升算法能力的开发者来说这是一个能让你摆脱“一看就会一写就废”困境的实用工具。这个工具的核心价值在于“引导”而非“给予”。它不会直接输出完整的代码而是通过提问、提示关键概念、分析边界条件等方式帮助你激活已有的知识构建解题逻辑。这比直接看题解更能锻炼思维也更符合面试中面试官期望的思考过程。本文将带你全面了解这个 AI LeetCode 侧边栏从它的核心能力、安装部署方式到如何与浏览器集成、进行实际解题互动再到其背后的技术实现思路和常见问题排查。无论你是想将其作为个人学习工具还是研究如何将类似 AI 助手集成到自己的产品中这篇文章都能提供清晰的路径。1. 核心能力速览能力项说明项目类型浏览器扩展 / AI 编程助手核心功能在 LeetCode 题目页面侧边栏提供苏格拉底式提示引导用户思考解题步骤。AI 交互模式对话式提示逐步引导不直接提供完整代码解决方案。集成平台主流浏览器如 Chrome、Edge 等基于 Chromium 的浏览器。启动/使用方式安装浏览器扩展后访问 LeetCode 题目页面自动激活侧边栏。硬件门槛无特殊要求。扩展本身不进行本地模型推理依赖后端 AI API 服务。是否支持 API是。扩展前端与后端 AI 服务通过 API 通信后端服务可自部署或使用第三方。是否支持批量任务不直接支持。主要用于单题交互式学习但可记录对话历史用于复习。适合场景个人算法学习、面试准备、理解解题思路、锻炼问题分解能力。2. 适用场景与使用边界这个 AI 侧边栏工具主要服务于以下几类用户算法学习者正在系统学习数据结构和算法需要有人引导思考而不是直接看答案。求职面试者针对技术面试中的算法题进行练习模拟面试官追问的场景训练解题表述能力。教育工作者可以将其作为辅助教学工具演示如何引导学生思考复杂的编程问题。工具开发者对构建交互式 AI 编程助手感兴趣可参考其前端集成与提示词设计思路。它能解决的核心问题思维惰性打破遇到难题就立即查看完整题解的依赖培养独立分析问题的习惯。思路卡壳在某个具体步骤如选择数据结构、确定循环边界上卡住时获得针对性提示。知识串联帮助你将题目与已知的算法模式如双指针、动态规划、回溯联系起来。面试模拟提供类似技术面试的互动体验面试官通常会通过提问来考察你的思考过程。不适合的场景与使用边界寻求即时答案如果你希望快速获取某道题的 AC 代码这个工具不是最佳选择它旨在延长你的思考过程。完全零基础工具假设使用者具备基础的编程语法和数据结构知识。它引导的是解题策略而非教授基础语法。离线环境该工具通常需要连接后端 AI 服务如 OpenAI GPT、Claude 或开源模型 API无法在完全离线的环境下工作。直接用于提交工具生成的对话和提示不能作为最终的解题代码提交你需要理解后自己编写实现。合规与版权提醒该工具是对 LeetCode 平台的辅助学习请勿用于任何自动化提交、刷分或干扰平台正常运行的行为。使用 AI 服务时请注意用户协议避免向 API 发送敏感或个人代码如果自建服务需注意数据安全。尊重 LeetCode 平台的题目版权所有题目内容归属 LeetCode。3. 环境准备与前置条件在安装和使用这个 AI 侧边栏之前你需要确保满足以下条件浏览器环境一款基于 Chromium 内核的浏览器如Google Chrome、Microsoft Edge或Brave。这是安装浏览器扩展的前提。确保浏览器已更新到较新版本。AI 服务后端关键该扩展本身只是一个前端界面它需要与一个能够处理自然语言、理解算法题目的 AI 后端进行通信。选项A使用第三方 API你需要拥有一个可用的 AI API 密钥例如OpenAI GPT 系列模型的 API Key。Anthropic Claude 的 API Key。其他兼容 OpenAI API 格式的开源模型部署服务如本地部署的 Llama、Qwen 等通过text-generation-webui或vLLM提供的 API。选项B自行部署后端如果你希望完全掌控可以部署项目的后端服务如果项目开源了后端代码。这通常需要Python 3.8 环境。必要的 Python 包如fastapi,openai等。可访问的服务器或本地主机用于运行后端并暴露 API 端点。LeetCode 账户虽然查看题目不一定需要登录但为了获得完整的交互体验如查看题目描述、测试用例建议拥有一个 LeetCode 账户。网络连接需要能够稳定访问 LeetCode 网站以及你配置的 AI 后端 API 地址。4. 安装部署与启动方式由于这是一个浏览器扩展其“部署”主要分为两步安装扩展和配置后端。4.1 安装浏览器扩展通常开源项目会提供扩展的打包文件.crx或.zip或发布在 Chrome 网上应用店。我们以开发者模式加载未打包的扩展为例获取扩展源代码从项目的 GitHub 仓库例如https://github.com/xxx/ai-leetcode-sidebar克隆或下载 ZIP 包。打开浏览器扩展管理页面在 Chrome 地址栏输入chrome://extensions/并回车。开启开发者模式在页面右上角打开“开发者模式”开关。加载已解压的扩展程序点击“加载已解压的扩展程序”按钮。选择扩展目录在弹出的文件选择器中导航到你下载的项目文件夹选择包含manifest.json文件的根目录然后点击“选择文件夹”。确认安装如果一切正常扩展列表中会出现新安装的扩展并显示其图标和名称。4.2 配置 AI 后端连接安装扩展后通常需要点击扩展图标或进入扩展选项页面进行配置。打开扩展选项在chrome://extensions/页面找到该扩展点击“详细信息”然后找到并点击“扩展程序选项”链接如果项目提供了选项页。或者直接点击浏览器工具栏上的扩展图标可能会弹出配置界面。设置 API 端点与密钥在配置页面你需要填写以下关键信息API Base URL你的 AI 后端地址。例如使用 OpenAI 官方 APIhttps://api.openai.com/v1使用本地部署的兼容 OpenAI 的 APIhttp://localhost:8000/v1或http://your-server-ip:port/v1API Key对应服务的 API 密钥。如果使用本地部署且未设置密钥可能留空或填写dummy-key。Model Name指定要使用的模型如gpt-4-turbo-preview、claude-3-haiku-20240307或本地模型名。保存配置填写完毕后点击保存或应用按钮。4.3 验证扩展是否工作打开一个新的浏览器标签页访问任意一道 LeetCode 题目例如https://leetcode.com/problems/two-sum/。观察页面。如果扩展正常工作你应该能在页面右侧或左侧看到一个新增的侧边栏面板。侧边栏内可能会有初始提示如“准备好开始思考了吗”或一个输入框等待你发起对话。5. 功能测试与效果验证安装配置完成后我们通过解决一个具体的 LeetCode 题目来测试其核心功能。测试题目LeetCode 第 1 题 “两数之和 (Two Sum)”测试目标验证 AI 助手能否通过提问引导用户得出“使用哈希表”的解题思路而不是直接给出代码。5.1 测试步骤访问题目页面在浏览器中打开https://leetcode.com/problems/two-sum/。激活侧边栏确保扩展已启用侧边栏应自动出现。如果没有尝试刷新页面或检查扩展是否被禁用。发起对话在侧边栏的聊天输入框中输入一个开场白例如“我正在尝试解决‘两数之和’这道题。题目要求是在数组中找到两个数使它们的和等于目标值。你能给我一些提示吗”观察 AI 回应一个设计良好的苏格拉底式助手可能会这样回应引导性提问1“首先你能想到最直接的方法是什么它的时间复杂度是多少”你回答暴力双重循环O(n²)。引导性提问2“很好。那么为了优化时间我们是否可以用空间换时间有没有一种数据结构可以让我们快速O(1)查找一个补数target - current_number是否存在”你可能会想到“集合”或“字典”。引导性提问3“对哈希表字典是个好选择。那么在遍历数组时具体如何操作这个哈希表呢是先全部存入再查找还是边遍历边处理”引导性提问4“考虑一下如果数组中有重复的数字或者目标值恰好是某个数的两倍你的算法还能正确工作吗需要处理哪些边界情况”逐步构建思路跟随 AI 的提问一步步在脑海中或草稿上构建算法逻辑。最终你应该能自己推导出使用一次遍历和哈希表记录的经典解法。尝试编写代码根据引导得出的思路在 LeetCode 的代码编辑器中尝试自己实现。5.2 预期结果与成功标准成功标准1AI 的回复是一系列问题或简短的提示而不是完整的算法描述或代码块。成功标准2提示具有递进性从暴力解法引导到优化思路再到具体数据结构和实现细节。成功标准3提示能触及关键点如“时间复杂度”、“空间换时间”、“哈希表”、“一次遍历”、“边界条件重复、零”。成功标准4通过交互你能够独立地形成清晰的解题步骤并成功通过代码实现。5.3 测试其他功能维度多轮对话深度针对一个复杂问题如动态规划题测试 AI 是否能进行多轮深入对话引导你定义状态、找到转移方程。不同题型适配尝试数组、链表、树、图、回溯、动态规划等不同类型的题目观察提示策略是否有所变化。代码理解提示如果你已经写了一版有错误的代码可以将错误信息或思路困惑点输入侧边栏看 AI 是否能针对你的具体代码逻辑进行提问和引导。6. 接口 API 与后端集成示例这个扩展的前端需要与后端 AI 服务通信。理解其 API 调用方式有助于你自行部署或定制后端。6.1 前端请求格式推测扩展前端 likely 会向后端发送一个结构化的请求包含题目信息和用户当前的问题。一个简化的请求示例可能如下{ question_title: Two Sum, question_content: Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target..., user_message: 我正在尝试解决‘两数之和’这道题。题目要求是在数组中找到两个数使它们的和等于目标值。你能给我一些提示吗, conversation_history: [ {role: user, content: Hello}, {role: assistant, content: Im here to help you think through LeetCode problems. What problem are you working on?} ], hint_level: socratic // 可能指定提示风格 }6.2 后端服务实现示例Python FastAPI如果你想自己部署一个简单的兼容后端可以使用以下代码作为起点。这个后端使用 OpenAI 格式的 API但实际调用的是你配置的模型。# main.py from fastapi import FastAPI, HTTPException from pydantic import BaseModel from typing import List, Optional import openai # 或使用其他兼容库如 litellm app FastAPI() # 配置你的 AI 服务 # 方式1: 使用 OpenAI 官方 # openai.api_key your-openai-key # openai.base_url https://api.openai.com/v1 # 方式2: 使用本地部署的兼容 OpenAI 的 API (如 text-gen-webui 或 vLLM) openai.api_key dummy-key # 如果本地不需要密钥 openai.base_url http://localhost:5000/v1 # 你的本地 API 地址 class ChatMessage(BaseModel): role: str content: str class HintRequest(BaseModel): question_title: str question_content: str user_message: str conversation_history: Optional[List[ChatMessage]] [] hint_level: str socratic app.post(/api/generate_hint) async def generate_hint(request: HintRequest): 接收前端请求构造给 AI 模型的系统提示和用户消息返回 AI 的提示。 # 1. 构造系统提示定义 AI 的“苏格拉底导师”角色 system_prompt f 你是一位经验丰富的算法教练擅长通过提问引导学生自己找到答案。 当前题目{request.question_title} 题目描述{request.question_content[:500]}... 已截断 你的任务不是直接给出解决方案或代码。而是通过提出引导性问题、提示关键概念、指出可能的优化方向来帮助学生构建解题思路。 请确保你的回复是简洁的、问题形式的并且基于当前的对话历史。 # 2. 构造消息历史 messages [ {role: system, content: system_prompt}, ] # 加入历史对话 for msg in request.conversation_history[-6:]: # 保留最近几轮历史 messages.append({role: msg.role, content: msg.content}) # 加入用户当前消息 messages.append({role: user, content: request.user_message}) try: # 3. 调用 AI 模型 response openai.ChatCompletion.create( modelgpt-3.5-turbo, # 或你配置的其他模型名 messagesmessages, temperature0.7, max_tokens300, # 限制回复长度保持提示的简洁性 ) ai_hint response.choices[0].message.content.strip() # 4. 返回结果 return {hint: ai_hint} except Exception as e: raise HTTPException(status_code500, detailfAI service error: {str(e)}) if __name__ __main__: import uvicorn uvicorn.run(app, host0.0.0.0, port8000)6.3 运行与测试后端安装依赖pip install fastapi uvicorn openai或litellm。将上述代码保存为main.py。确保你的本地 AI 模型服务如text-generation-webui的--api模式正在运行并记下其 API 地址如http://localhost:5000。修改main.py中的openai.base_url指向你的本地服务地址。运行后端python main.py。在浏览器扩展的配置中将API Base URL设置为http://localhost:8000即你的 FastAPI 后端地址。现在扩展的前端请求将发送到你的自部署后端由后端代理请求到你本地的 AI 模型。7. 资源占用与性能观察由于该工具的核心是一个轻量级浏览器扩展和一个远程或本地API 调用其资源占用主要集中在两个方面浏览器扩展本身内存占用极小通常只有几 MB 到十几 MB。它主要是一个内容脚本Content Script和侧边栏 UI不执行复杂计算。AI 后端服务使用云端 API如 OpenAI无本地资源占用性能取决于网络延迟和 API 响应速度。每次提示生成通常需要 2-10 秒。使用本地部署模型这是资源消耗的主要部分。显存/内存取决于你运行的 AI 模型大小。一个 7B 参数量的模型以 4-bit 量化加载可能需要 4-6 GB 显存。如果使用 CPU 推理则需要足够的系统内存。CPU/GPU 利用率在生成提示时对应的计算硬件会有短暂的高利用率。响应时间本地模型的首次加载冷启动较慢但后续单次推理速度较快通常在 1-5 秒内取决于模型大小和硬件。性能优化建议选择合适的模型用于提示和引导不需要极强的代码生成能力。一个 7B-13B 参数量的模型如 CodeLlama、Qwen-Coder、DeepSeek-Coder 的 instruct 版本在正确提示词引导下完全足以胜任苏格拉底式提问的任务且资源需求相对较低。使用量化模型优先使用 GPTQ、AWQ、GGUF 等量化格式的模型可以大幅降低显存和内存占用。设置合理的上下文长度题目描述可能较长但对话历史可以适当截断只保留最近几轮以减少 token 消耗和推理时间。后端服务缓存对于热门题目可以考虑在后端对 AI 生成的提示进行缓存避免对相同问题重复计算。8. 常见问题与排查方法问题现象可能原因排查方式解决方案侧边栏不显示1. 扩展未启用。2. 未在 LeetCode 域名下激活。3. 扩展脚本注入失败。1. 检查chrome://extensions/确保扩展已启用。2. 确认当前网址是leetcode.com/problems/*。3. 打开浏览器开发者工具F12查看 Console 是否有错误。1. 启用扩展。2. 刷新 LeetCode 页面。3. 尝试重新加载扩展或检查扩展的content_scripts匹配规则。侧边栏显示但无法交互/无响应1. 后端 API 配置错误。2. 网络问题导致 API 请求失败。3. 后端服务未启动或崩溃。1. 检查扩展配置中的 API URL 和 Key 是否正确。2. 打开开发者工具F12的 Network 面板查看发送到后端 API 的请求是否返回错误如 404, 403, 500。3. 检查后端服务进程是否运行查看后端日志。1. 修正扩展配置。2. 确保网络可通检查 CORS 设置如果后端自部署。3. 重启后端服务检查依赖和环境。AI 回复不是提示而是直接给答案1. 系统提示词System Prompt未正确设置或未生效。2. 使用的 AI 模型不适合指导性任务。1. 检查后端服务中构造system_prompt的代码确保其明确要求“提问而非解答”。2. 尝试在用户消息中明确强调“请只提问引导我不要给代码”。1. 强化系统提示词例如“你是一位严格的教练只允许通过提问来引导。如果用户直接索要答案请拒绝并反问一个关键问题。”2. 更换或微调模型选择更擅长遵循指令的模型。API 请求超时1. 网络延迟高。2. 本地模型推理速度慢。3. 后端服务处理瓶颈。1. 测试网络到 API 地址的延迟。2. 查看后端服务日志确认单次推理耗时。3. 监控服务器资源CPU/GPU/内存使用率。1. 优化网络或使用更近的服务器。2. 为本地模型启用量化或使用更小的模型。3. 在后端增加请求超时设置在前端添加加载状态和重试机制。提示质量不高问题不相关1. 模型能力有限。2. 传入的题目上下文信息不全或格式乱。3. 对话历史处理不当。1. 尝试不同的模型。2. 检查前端发送给后端的question_content是否完整、清晰。3. 检查对话历史的格式和截断逻辑。1. 升级模型或使用专门针对代码/数学推理微调的模型。2. 优化前端提取题目信息的逻辑确保关键部分描述、示例被包含。3. 优化历史管理确保核心上下文不丢失。CORS 错误自部署后端未正确配置跨域资源共享。浏览器开发者工具 Console 中会显示类似Access-Control-Allow-Origin的错误。在后端服务中添加 CORS 中间件。例如在 FastAPI 中from fastapi.middleware.cors import CORSMiddleware然后配置允许的前端来源。9. 最佳实践与使用建议为了最大化这个工具的学习效果并确保稳定使用可以参考以下建议明确使用目标在打开工具前先自己思考题目 5-10 分钟。明确自己卡在哪个具体环节是思路方向、数据结构选择还是边界条件再向 AI 提问。这样获得的提示会更有针对性。主动引导对话不要只说“帮帮我”。尝试描述你的初步思路和遇到的障碍例如“我想到用滑动窗口但不确定窗口收缩的条件是什么” AI 的回应会基于你提供的上下文。结合官方题解在使用 AI 引导得出思路后再去对比 LeetCode 的官方题解或高质量社区题解。这可以验证你的思路并学习更优雅的代码实现。记录对话历史有价值的引导对话可以保存下来作为你个人的“解题思路笔记”方便日后复习。后端部署优化提示词工程精心设计系统提示词是效果的关键。明确角色、规则和输出格式。模型选择对于算法引导推理能力强的模型比纯代码生成模型可能更合适。可以测试claude-3-haiku,gpt-4,deepseek-coder-instruct等。服务监控如果自建服务供多人使用需要监控 API 调用频率、响应时间和错误率。隐私与安全如果使用第三方 API请注意其隐私政策避免发送敏感代码或个人信息。自建服务时确保 API 端点有适当的访问控制如简单的 Token 验证避免被滥用。作为教学工具教师或导师可以利用此工具通过观察学生与 AI 的互动过程来了解学生的思考模式和常见误区从而进行更有针对性的辅导。这个 AI LeetCode 侧边栏项目代表了一种更健康的编程辅助方向——它强化的是思维过程而非结果复制。它的价值不在于帮你快速通过一道题而在于训练你解决未来无数道题的能力。工具本身安装简单核心挑战在于后端 AI 服务的选型与提示词调优。建议先从配置一个云端 API 开始体验理解其工作流程和效果。如果你对提示词工程或本地模型部署感兴趣再尝试自建后端进行深度定制。把它当作一位严格的陪练你的算法肌肉才会越练越强。