{"repo": "alchaincyf/coderwithai", "files": {"README.md": {"227f8f33172c3598532d066d08d13403999b379d": {"t": 1785746367.1259387, "n": 2725, "h": "68cba0d7a3149671", "c": "# CoderWithAI - 智能编程学习平台\n\n欢迎来到CoderWithAI，这是一个革命性的编程学习平台，结合了丰富的编程教程和智能AI助手，为学习者提供个性化的学习体验。\n\n## 主要特性\n\n1. **多语言编程教程**: 提供多种主流编程语言的教程，包括但不限于JavaScript、Python、Java、C++等。\n2. **智能AI助手**: 集成了基于DeepSeek API的AI聊天功能，为学习者提供实时帮助和指导。\n3. **动态内容加载**: 教程内容从Markdown文件动态加载，便于更新和维护。\n4. **响应式设计**: 完美适配各种设备，从手机到桌面电脑。\n5. **交互式学习体验**: 通过AI助手，学习者可以获得即时反馈和个性化指导。\n6. **用户友好界面**: 直观的导航和布局，让学习过程更加流畅。\n\n## 项目结构\n\n- `/app`: Next.js应用的主要结构，包含页面路由和布局组件。\n- `/components`: 可复用的React组件，如AI聊天窗口。\n- `/lib`: 工具函数和数据处理逻辑。\n- `/public`: 静态资源文件。\n- `/tutorials`: 按编程语言分类的教程Markdown文件。\n\n## 使南\n\n1. 访问网站首页，选择你想学习的编程语言。\n2. 浏览该语言的教程列表，点击感兴趣的主题开始学习。\n3. 在学习过程中，如有疑问，可以随时打开右下角的AI助手进行提问。\n4. AI助手会根据你的问题和当前学习内容提供个性化的解答和指导。\n\n## 开发设置\n\n本项目基于Next.js框架开发。要在本地运行项目：\n\n1. 克隆仓库\n2. 安装依赖：`npm install`\n3. 创建`.env.local`文件，添加必要的环境变量（如DEEPSEEK_API_KEY）\n4. 运行开发服务器：`npm run dev`\n5. 在浏览器中访问 `http://localhost:3000`\n\n## AI聊天组件\n\n项目集成了一个基于DeepSeek API的AI聊天组件（AIChatWidget）：\n\n- 位于右下角的浮动聊天按钮\n- 可展开的聊天窗口（600px x 400px）\n- 实时对话功能\n- 上下文感知，能根据用户当前浏览的页面提供相关帮助\n- 全屏模式：用户可以通过点击聊天窗口右上角的全屏图标，将聊天窗口切换到全屏模式，以获得更好的阅读体验，特别适合长篇回复\n- 简洁的界面控制：全屏切换和关闭按钮位于聊天窗口的右上角，便于操作\n\n## 未来计划\n\n- 实现用户账户系统，支持学习进度追踪\n- 添加交互式代码编辑器\n- 集成更多AI功能，如代码审查和自动补全\n- 扩展支持的编程语言和框架\n- 开发移动应用版本\n\n## 贡献指南\n\n我们欢迎社区贡献！如果你想为项目做出贡献：\n\n1. Fork 本仓库\n2. 创建你的特性分支 (`git checkout -b feature/AmazingFeature`)\n3. 提交你的改 (`git commit -m 'Add some AmazingFeature'`)\n4. 推送到分支 (`git push origin feature/AmazingFeature`)\n5. 开启一个 Pull Request\n\n## 许可证\n\n本项目采用 MIT 许可证 - 详情请见 [LICENSE.md](LICENSE.md) 文件\n\n## 联系我们\n\n如有任何问题或建议，请通过以下方式联系我们：\n\n- 电子邮件: alchaincyf@gmail.com\n\n感谢你选择CoderWithAI，让我们一起开启智能编程学习之旅！\n\n## AI回复显示\n\n为了提供最佳的用户体验，我们的AI助手回复现在具有以下特性：\n\n- 所有AI回复都会全文显示，无论长度如何。\n- 用户可以通过点击全屏按钮切换到全屏模式，以获得更舒适的阅读体验。\n- 这确保用户可以立即看到完整的回答，并且可以根据需要调整显示方式。\n\n这些更新旨在提供更直接、更流畅的对话体验，让用户能够以最舒适的方式获取所有必要的信息。\n\n## DeepSeek AI 集成\n\n本项目使用DeepSeek AI来提供智能对话功能。以下是集成的关键点：\n\n### API 调用\n\n1. **环境变量**：\n   - 使用`DEEPSEEK_API_KEY`环境变量存储API密钥。\n\n2. **API 端点**：\n   - 使用`https://api.deepseek.com/v1/chat/completions`作为API端点。\n\n3. **请求方法**：\n   - 使用POST方法发送请求。\n\n4. **请求头**：\n   - `Authorization`: `Bearer ${API_KEY}`\n   - `Content-Type`: `application/json`\n\n5. **请求体**：\n   ```javascript\n   {\n     model: \"deepseek-chat\",\n     messages: [\n       {\"role\": \"system\", \"content\": systemPrompt},\n       ...userMessages\n     ],\n     stream: true\n   }\n   ```\n\n6. **响应处理**：\n   - 使用流式响应（`stream: true`）来实现实时对话。\n   - 响应类型设置为`'stream'`。\n\n### 实现细节\n\n1. **CORS 处理**：\n   - 实现了CORS头部处理，允许特定域名访问API。\n\n2. **错误处理**：\n   - 实现了详细的错误日志记录和错误响应。\n\n3. **上下文感知**：\n   - 根据用户当前浏览的页面路径调整系统提示。\n\n4. **消息格式化**：\n   - 用户消息内容被额外用引号包裹，以区分系统消息和用户输入。\n\n5. **流式响应**：\n   - 使用`text/event-stream`内容类型来支持流式传输。\n\n6. **HTTP 客户端**：\n   - 使用 `axios` 库发送 HTTP 请求到 DeepSeek API。\n\n### 使用方法\n\n在前端组件中，通过发送POST请求到`/api/chat`端点来与AI进行交互。请确保包含当前页面路径和对话历史。\n\n注意：确保在服务器端代码中安装并导入 `axios`：\n"}, "810985e83d2338326054cbab57f2ff1ee0a62c06": {"t": 1785762779.7390952, "n": 2725, "h": "68cba0d7a3149671", "c": "# CoderWithAI - 智能编程学习平台\n\n欢迎来到CoderWithAI，这是一个革命性的编程学习平台，结合了丰富的编程教程和智能AI助手，为学习者提供个性化的学习体验。\n\n## 主要特性\n\n1. **多语言编程教程**: 提供多种主流编程语言的教程，包括但不限于JavaScript、Python、Java、C++等。\n2. **智能AI助手**: 集成了基于DeepSeek API的AI聊天功能，为学习者提供实时帮助和指导。\n3. **动态内容加载**: 教程内容从Markdown文件动态加载，便于更新和维护。\n4. **响应式设计**: 完美适配各种设备，从手机到桌面电脑。\n5. **交互式学习体验**: 通过AI助手，学习者可以获得即时反馈和个性化指导。\n6. **用户友好界面**: 直观的导航和布局，让学习过程更加流畅。\n\n## 项目结构\n\n- `/app`: Next.js应用的主要结构，包含页面路由和布局组件。\n- `/components`: 可复用的React组件，如AI聊天窗口。\n- `/lib`: 工具函数和数据处理逻辑。\n- `/public`: 静态资源文件。\n- `/tutorials`: 按编程语言分类的教程Markdown文件。\n\n## 使南\n\n1. 访问网站首页，选择你想学习的编程语言。\n2. 浏览该语言的教程列表，点击感兴趣的主题开始学习。\n3. 在学习过程中，如有疑问，可以随时打开右下角的AI助手进行提问。\n4. AI助手会根据你的问题和当前学习内容提供个性化的解答和指导。\n\n## 开发设置\n\n本项目基于Next.js框架开发。要在本地运行项目：\n\n1. 克隆仓库\n2. 安装依赖：`npm install`\n3. 创建`.env.local`文件，添加必要的环境变量（如DEEPSEEK_API_KEY）\n4. 运行开发服务器：`npm run dev`\n5. 在浏览器中访问 `http://localhost:3000`\n\n## AI聊天组件\n\n项目集成了一个基于DeepSeek API的AI聊天组件（AIChatWidget）：\n\n- 位于右下角的浮动聊天按钮\n- 可展开的聊天窗口（600px x 400px）\n- 实时对话功能\n- 上下文感知，能根据用户当前浏览的页面提供相关帮助\n- 全屏模式：用户可以通过点击聊天窗口右上角的全屏图标，将聊天窗口切换到全屏模式，以获得更好的阅读体验，特别适合长篇回复\n- 简洁的界面控制：全屏切换和关闭按钮位于聊天窗口的右上角，便于操作\n\n## 未来计划\n\n- 实现用户账户系统，支持学习进度追踪\n- 添加交互式代码编辑器\n- 集成更多AI功能，如代码审查和自动补全\n- 扩展支持的编程语言和框架\n- 开发移动应用版本\n\n## 贡献指南\n\n我们欢迎社区贡献！如果你想为项目做出贡献：\n\n1. Fork 本仓库\n2. 创建你的特性分支 (`git checkout -b feature/AmazingFeature`)\n3. 提交你的改 (`git commit -m 'Add some AmazingFeature'`)\n4. 推送到分支 (`git push origin feature/AmazingFeature`)\n5. 开启一个 Pull Request\n\n## 许可证\n\n本项目采用 MIT 许可证 - 详情请见 [LICENSE.md](LICENSE.md) 文件\n\n## 联系我们\n\n如有任何问题或建议，请通过以下方式联系我们：\n\n- 电子邮件: alchaincyf@gmail.com\n\n感谢你选择CoderWithAI，让我们一起开启智能编程学习之旅！\n\n## AI回复显示\n\n为了提供最佳的用户体验，我们的AI助手回复现在具有以下特性：\n\n- 所有AI回复都会全文显示，无论长度如何。\n- 用户可以通过点击全屏按钮切换到全屏模式，以获得更舒适的阅读体验。\n- 这确保用户可以立即看到完整的回答，并且可以根据需要调整显示方式。\n\n这些更新旨在提供更直接、更流畅的对话体验，让用户能够以最舒适的方式获取所有必要的信息。\n\n## DeepSeek AI 集成\n\n本项目使用DeepSeek AI来提供智能对话功能。以下是集成的关键点：\n\n### API 调用\n\n1. **环境变量**：\n   - 使用`DEEPSEEK_API_KEY`环境变量存储API密钥。\n\n2. **API 端点**：\n   - 使用`https://api.deepseek.com/v1/chat/completions`作为API端点。\n\n3. **请求方法**：\n   - 使用POST方法发送请求。\n\n4. **请求头**：\n   - `Authorization`: `Bearer ${API_KEY}`\n   - `Content-Type`: `application/json`\n\n5. **请求体**：\n   ```javascript\n   {\n     model: \"deepseek-chat\",\n     messages: [\n       {\"role\": \"system\", \"content\": systemPrompt},\n       ...userMessages\n     ],\n     stream: true\n   }\n   ```\n\n6. **响应处理**：\n   - 使用流式响应（`stream: true`）来实现实时对话。\n   - 响应类型设置为`'stream'`。\n\n### 实现细节\n\n1. **CORS 处理**：\n   - 实现了CORS头部处理，允许特定域名访问API。\n\n2. **错误处理**：\n   - 实现了详细的错误日志记录和错误响应。\n\n3. **上下文感知**：\n   - 根据用户当前浏览的页面路径调整系统提示。\n\n4. **消息格式化**：\n   - 用户消息内容被额外用引号包裹，以区分系统消息和用户输入。\n\n5. **流式响应**：\n   - 使用`text/event-stream`内容类型来支持流式传输。\n\n6. **HTTP 客户端**：\n   - 使用 `axios` 库发送 HTTP 请求到 DeepSeek API。\n\n### 使用方法\n\n在前端组件中，通过发送POST请求到`/api/chat`端点来与AI进行交互。请确保包含当前页面路径和对话历史。\n\n注意：确保在服务器端代码中安装并导入 `axios`：\n"}, "51f37242314b39eef84b35f2409d00dcf6c06894": {"t": 1785762783.9445689, "n": 1458, "h": "53dcb3c2a4fe6811", "c": "# CoderWithAI - 智能编程学习平台\n\n欢迎来到CoderWithAI，这是一个革命性的编程学习平台，结合了丰富的编程教程和智能AI助手，为学习者提供个性化的学习体验。\n\n## 主要特性\n\n1. **多语言编程教程**: 提供多种主流编程语言的教程，包括但不限于JavaScript、Python、Java、C++等。\n2. **智能AI助手**: 集成了基于DeepSeek API的AI聊天功能，为学习者提供实时帮助和指导。\n3. **动态内容加载**: 教程内容从Markdown文件动态加载，便于更新和维护。\n4. **响应式设计**: 完美适配各种设备，从手机到桌面电脑。\n5. **交互式学习体验**: 通过AI助手，学习者可以获得即时反馈和个性化指导。\n6. **用户友好界面**: 直观的导航和布局，让学习过程更加流畅。\n\n## 项目结构\n\n- `/app`: Next.js应用的主要结构，包含页面路由和布局组件。\n- `/components`: 可复用的React组件，如AI聊天窗口。\n- `/lib`: 工具函数和数据处理逻辑。\n- `/public`: 静态资源文件。\n- `/tutorials`: 按编程语言分类的教程Markdown文件。\n\n## 使用指南\n\n1. 访问网站首页，选择你想学习的编程语言。\n2. 浏览该语言的教程列表，点击感兴趣的主题开始学习。\n3. 在学习过程中，如有疑问，可以随时打开右下角的AI助手进行提问。\n4. AI助手会根据你的问题和当前学习内容提供个性化的解答和指导。\n\n## 开发设置\n\n本项目基于Next.js框架开发。要在本地运行项目：\n\n1. 克隆仓库\n2. 安装依赖：`npm install`\n3. 创建`.env.local`文件，添加必要的环境变量（如DEEPSEEK_API_KEY）\n4. 运行开发服务器：`npm run dev`\n5. 在浏览器中访问 `http://localhost:3000`\n\n## AI聊天组件\n\n项目集成了一个基于DeepSeek API的AI聊天组件（AIChatWidget）：\n\n- 位于右下角的浮动聊天按钮\n- 可展开的聊天窗口（600px x 400px）\n- 实时对话功能\n- 上下文感知，能根据用户当前浏览的页面提供相关帮助\n\n## 未来计划\n\n- 实现用户账户系统，支持学习进度追踪\n- 添加交互式代码编辑器\n- 集成更多AI功能，如代码审查和自动补全\n- 扩展支持的编程语言和框架\n- 开发移动应用版本\n\n## 贡献指南\n\n我们欢迎社区贡献！如果你想为项目做出贡献：\n\n1. Fork 本仓库\n2. 创建你的特性分支 (`git checkout -b feature/AmazingFeature`)\n3. 提交你的更改 (`git commit -m 'Add some AmazingFeature'`)\n4. 推送到分支 (`git push origin feature/AmazingFeature`)\n5. 开启一个 Pull Request\n\n## 许可证\n\n本项目采用 MIT 许可证 - 详情请见 [LICENSE.md](LICENSE.md) 文件\n\n## 联系我们\n\n如有任何问题或建议，请通过以下方式联系我们：\n\n- 电子邮件: alchaincyf@gmail.com\n\n感谢你选择CoderWithAI，让我们一起开启智能编程学习之旅！\n"}, "2e2e6da5886b3588136d01cddeedc17669c09ba4": {"t": 1785762787.510198, "n": 2978, "h": "c161ce2db2a82ce7", "c": "# 编程教程网站\n\n这是一个提供多种编程语言教程的网络应用项目。\n\n## 功能特点\n\n1. **动态教程内容**: 应用从项目中存储的Markdown文件中加载真实的教程内容。\n2. **多语言支持**: 支持多种编程语言,教程按语言分类组织。\n3. **响应式设计**: 布局能够适应不同的屏幕尺寸。\n4. **动态语言选择**: 语言选择栏会根据可用的屏幕宽度进行调整。\n5. **带外部链接的页脚**: 包含指向BookAI.TOP的链接和其他导航链接的页脚。\n\n## 项目结构\n\n- `/tutorials`: 包含每种编程语言的子目录,每个子目录中包含该语言的教程Markdown文件。\n- `/components`: 应用中使用的React组件。\n- `/lib`: 用于获取和处理教程数据的实用函数。\n\n## 使用方法\n\n查看教程的步骤:\n1. 导航到首页。\n2. 从顶部栏选择一种编程语言。\n3. 从侧边栏选择一个教程。\n4. 在主要区域阅读教程内容。\n\n## 开发\n\n本项目使用Next.js和React开发。本地运行步骤:\n\n1. 克隆仓库\n2. 使用 `npm install` 安装依赖\n3. 使用 `npm run dev` 运行开发服务器\n4. 在浏览器中打开 [http://localhost:3000](http://localhost:3000)\n\n## 添加新教程\n\n添加新教程的步骤:\n1. 在 `/tutorials` 下适当的语言目录中创建新的Markdown文件。\n2. 在Markdown文件的前置元数据中添加 `title` 和 `category` 字段。\n3. 使用Markdown格式编写教程内容。\n\n## 未来改进计划\n\n- 实现教程搜索功能\n- 添加用户认证以跟踪学习进度\n- 为代码块增加语法高亮,增强Markdown渲染效果\n- 添加交互式代码编辑器,让用户能够直接在浏览器中运行代码\n- 实现教程评分和评论系统\n- 添加多语言支持,使教程内容可以翻译成不同语言\n- 集成视频教程和交��式练习\n- 实现个性化学习路径推荐\n\n## 贡献\n\n我们欢迎社区贡献!如果你想为项目做出贡献,请遵循以下步骤:\n\n1. Fork 这个仓库\n2. 创建你的特性分支 (`git checkout -b feature/AmazingFeature`)\n3. 提交你的更改 (`git commit -m 'Add some AmazingFeature'`)\n4. 推送到分支 (`git push origin feature/AmazingFeature`)\n5. 开启一个 Pull Request\n\n## 许可证\n\n本项目采用 MIT 许可证 - 查看 [LICENSE.md](LICENSE.md) 文件了解详情\n\n## 联系我们\n\n如果你有任何问题或建议,请通过以下方式联系我们:\n\n- 电子邮件: support@example.com\n- Twitter: [@ExampleProject](https://twitter.com/ExampleProject)\n- 项目 Issues: [https://github.com/yourusername/project/issues](https://github.com/yourusername/project/issues)\n\n# AI Chat Widget\n\nThis project includes an AI Chat Widget component that can be easily integrated into your Next.js application. The widget features a Google-inspired design with a floating chat button and expandable chat window, and uses the DeepSeek API for intelligent responses.\n\n## Features\n\n- Floating chat button (128px x 128px) in the bottom-right corner\n- Expandable chat window (600px x 400px)\n- Real-time chat interface with DeepSeek AI integration\n- Multi-turn conversation support\n- Message input and display\n- Responsive and modern design\n\n## Setup\n\n1. Create a `.env.local` file in the root of your project and add your DeepSeek API key:\n   ```\n   DEEPSEEK_API_KEY=your_deepseek_api_key_here\n   ```\n\n2. Install the required dependencies:\n   ```\n   npm install axios\n   ```\n\n## Usage\n\nTo use the AIChatWidget in your Next.js application:\n\n1. Import the component:\n   ```javascript\n   import AIChatWidget from '../components/AIChatWidget';\n   ```\n\n2. Use it in your JSX:\n   ```jsx\n   <AIChatWidget />\n   ```\n\n## Customization\n\nYou can customize the appearance of the chat widget by modifying the CSS classes in the `AIChatWidget.module.css` file.\n\n## Future Improvements\n\n- Add user authentication\n- Implement message persistence\n- Add animations for smooth transitions\n- Implement responsive design for mobile devices\n- Enhance error handling and user feedback\n\nFor more information on how to develop and extend this component, please refer to the component file at `components/AIChatWidget.tsx` and its corresponding CSS module file.\n"}, "22b552ab7a004ebfddc471fedfdcd116cb3de8d8": {"t": 1785762798.1131475, "n": 1855, "h": "e29e4d54dbf4533e", "c": "# Programming Tutorials\n\nThis project is a web application that provides programming tutorials for various languages.\n\n## Features\n\n1. **Dynamic Tutorial Content**: The application now loads real tutorial content from Markdown files stored in the project.\n2. **Multiple Languages**: Supports multiple programming languages, with tutorials organized by language.\n3. **Responsive Design**: The layout adapts to different screen sizes.\n4. **Dynamic Language Selection**: The language selection bar adjusts based on the available screen width.\n5. **Footer with External Link**: Includes a footer with a link to BookAI.TOP and additional navigation links.\n\n## Project Structure\n\n- `/tutorials`: Contains subdirectories for each programming language, each containing Markdown files for individual tutorials.\n- `/components`: React components used in the application.\n- `/lib`: Utility functions for fetching and processing tutorial data.\n\n## Usage\n\nTo view the tutorials:\n1. Navigate to the home page.\n2. Select a programming language from the top bar.\n3. Choose a tutorial from the sidebar.\n4. Read the tutorial content in the main area.\n\n## Development\n\nThis project uses Next.js and React. To run it locally:\n\n1. Clone the repository\n2. Install dependencies with `npm install`\n3. Run the development server with `npm run dev`\n4. Open [http://localhost:3000](http://localhost:3000) in your browser\n\n## Adding New Tutorials\n\nTo add a new tutorial:\n1. Create a new Markdown file in the appropriate language directory under `/tutorials`.\n2. Add front matter to the Markdown file with `title` and `category` fields.\n3. Write your tutorial content in Markdown format.\n\n## Future Improvements\n\n- Implement a search functionality for tutorials\n- Add user authentication for progress tracking\n- Enhance the Markdown rendering with syntax highlighting for code blocks\n"}}}}