欢迎来到CoderWithAI,这是一个革命性的编程学习平台,结合了丰富的编程教程和智能AI助手,为学习者提供个性化的学习体验。

1. 多语言编程教程: 提供多种主流编程语言的教程,包括但不限于JavaScript、Python、Java、C++等。
2. 智能AI助手: 集成了基于DeepSeek API的AI聊天功能,为学习者提供实时帮助和指导。
3. 动态内容加载: 教程内容从Markdown文件动态加载,便于更新和维护。
4. 响应式设计: 完美适配各种设备,从手机到桌面电脑。
5. 交互式学习体验: 通过AI助手,学习者可以获得即时反馈和个性化指导。
6. 用户友好界面: 直观的导航和布局,让学习过程更加流畅。

• /app: Next.js应用的主要结构,包含页面路由和布局组件。
• /components: 可复用的React组件,如AI聊天窗口。
• /lib: 工具函数和数据处理逻辑。
• /public: 静态资源文件。
• /tutorials: 按编程语言分类的教程Markdown文件。

1. 访问网站首页,选择你想学习的编程语言。
2. 浏览该语言的教程列表,点击感兴趣的主题开始学习。
3. 在学习过程中,如有疑问,可以随时打开右下角的AI助手进行提问。
4. AI助手会根据你的问题和当前学习内容提供个性化的解答和指导。

本项目基于Next.js框架开发。要在本地运行项目:

1. 克隆仓库
2. 安装依赖:npm install
3. 创建.env.local文件,添加必要的环境变量(如DEEPSEEK_API_KEY)
4. 运行开发服务器:npm run dev
5. 在浏览器中访问 http://localhost:3000

项目集成了一个基于DeepSeek API的AI聊天组件(AIChatWidget):

• 位于右下角的浮动聊天按钮
• 可展开的聊天窗口(600px x 400px)
• 实时对话功能
• 上下文感知,能根据用户当前浏览的页面提供相关帮助
• 全屏模式:用户可以通过点击聊天窗口右上角的全屏图标,将聊天窗口切换到全屏模式,以获得更好的阅读体验,特别适合长篇回复
• 简洁的界面控制:全屏切换和关闭按钮位于聊天窗口的右上角,便于操作

• 实现用户账户系统,支持学习进度追踪
• 添加交互式代码编辑器
• 集成更多AI功能,如代码审查和自动补全
• 扩展支持的编程语言和框架
• 开发移动应用版本

我们欢迎社区贡献!如果你想为项目做出贡献:

1. Fork 本仓库
2. 创建你的特性分支 (git checkout -b feature/AmazingFeature)
3. 提交你的改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启一个 Pull Request

本项目采用 MIT 许可证 - 详情请见 LICENSE.md 文件

如有任何问题或建议,请通过以下方式联系我们:

• 电子邮件: alchaincyf@gmail.com

感谢你选择CoderWithAI,让我们一起开启智能编程学习之旅!

为了提供最佳的用户体验,我们的AI助手回复现在具有以下特性:

• 所有AI回复都会全文显示,无论长度如何。
• 用户可以通过点击全屏按钮切换到全屏模式,以获得更舒适的阅读体验。
• 这确保用户可以立即看到完整的回答,并且可以根据需要调整显示方式。

这些更新旨在提供更直接、更流畅的对话体验,让用户能够以最舒适的方式获取所有必要的信息。

本项目使用DeepSeek AI来提供智能对话功能。以下是集成的关键点:

1. 环境变量:

   • 使用DEEPSEEK_API_KEY环境变量存储API密钥。

2. API 端点:

   • 使用https://api.deepseek.com/v1/chat/completions作为API端点。

3. 请求方法:

   • 使用POST方法发送请求。

4. 请求头:

   • Authorization: Bearer ${API_KEY}
   • Content-Type: application/json

5. 请求体:

   {
    model: "deepseek-chat",
    messages: [
    {"role": "system", "content": systemPrompt},
    ...userMessages
    ],
    stream: true
   }

6. 响应处理:

   • 使用流式响应(stream: true)来实现实时对话。
   • 响应类型设置为'stream'。

1. CORS 处理:

   • 实现了CORS头部处理,允许特定域名访问API。

2. 错误处理:

   • 实现了详细的错误日志记录和错误响应。

3. 上下文感知:

   • 根据用户当前浏览的页面路径调整系统提示。

4. 消息格式化:

   • 用户消息内容被额外用引号包裹,以区分系统消息和用户输入。

5. 流式响应:

   • 使用text/event-stream内容类型来支持流式传输。

6. HTTP 客户端:

   • 使用 axios 库发送 HTTP 请求到 DeepSeek API。

在前端组件中,通过发送POST请求到/api/chat端点来与AI进行交互。请确保包含当前页面路径和对话历史。

注意:确保在服务器端代码中安装并导入 axios: