- 博客(140)
- 收藏
- 关注
RSS订阅原创 基于 Python + LangChain + React 实现智能发票识别与验真系统实战
本文介绍了一个基于AI技术的全流程自动化发票处理系统。该系统采用React前端+Python Flask后端的技术架构，融合了Qwen-VL视觉大模型和PaddleOCR双重识别引擎，实现从发票图片上传、AI智能识别到第三方验真的完整闭环。系统创新性地设计了置信度可视化机制（绿/橙/红三色标识）、财务自动验算功能和官方渠道验真接口，有效解决了传统人工录入效率低下、易出错的问题。通过双引擎OCR自动降级策略，在保证90%以上高准确率的同时，处理速度较人工提升5-8倍，为财务管理工作提供了智能化解决方案。
2026-06-10 17:43:20
261
原创 基于 Python + OpenAI SDK + RapidOCR + PyAutoGUI 实现 PC 端微信智能自动回复机器人
本文介绍了一种基于视觉方案的微信自动回复机器人实现方法，无需Hook微信进程或注入DLL。该系统通过PyWin32截取微信窗口，使用OCR识别聊天内容，调用大语言模型生成回复，并模拟键鼠操作发送消息。技术亮点包括：双次OCR采样提高稳定性、连续消息收集机制、19类情绪表情包匹配、可插拔角色系统（如"童锦程话术模式"），以及文件传输助手测试模式。项目采用纯Python实现，包含完整的配置文件和模块化设计，支持OpenAI兼容接口，既保证了安全性又具备良好的扩展性。
2026-06-05 10:10:50
280
原创 基于 Python + LangChain + LangSmith 实现数据监控
本文介绍了一个完整的AI使用数据监控系统实现方案。系统通过拦截LLM响应提取Token用量、延迟等关键指标，并记录到MySQL数据库。后端提供三个聚合API接口：汇总统计、每日趋势和最近请求记录。前端采用React+Ant Design构建可视化面板，包含统计卡片、双轴趋势图、模型/端点分布图和可筛选的请求表格。系统支持精确计量AI资源消耗，包括Token使用量、费用计算和性能监控，帮助开发者全面掌握AI应用运行情况。整个方案采用自建方式实现，无需依赖第三方平台。
2026-05-28 16:57:04
372
1
原创 基于 Python + LangChain + React 实现前端项目生成器
本文介绍了一个基于Python+LangChain+React的前端项目生成器，能够根据用户自然语言描述自动生成完整的React+Vite+AntDesign项目代码。系统通过精心设计的提示词约束LLM输出格式和依赖版本，采用流式调用实现实时响应，并包含自动修复导入缺失、JSON解析容错等关键功能。后端核心模块负责项目生成、代码修复和打包，前端通过SSE实现流式交互，最终生成可下载的ZIP项目包。文章详细阐述了技术实现方案，包括系统提示词设计、流式处理、自动修复机制等核心难点及解决方案，为AI辅助开发提供了
2026-05-26 14:29:58
581
原创 基于 Python + LangChain + MCP（天气预报）
本文介绍了如何在Flask+LangChain聊天应用中集成MCP协议实现天气查询功能。主要内容包括：1）创建独立的天气MCP服务器进程，通过wttr.in API获取实时天气数据；2）开发MCP客户端管理器，解决异步MCP SDK与同步Flask框架的兼容问题；3）将MCP工具集成到LangChain Agent中，实现自动识别天气问题并调用工具。该系统采用标准化协议设计，只需简单配置即可扩展新的MCP服务，最终实现了用户输入"北京天气"即可获得实时天气数据和穿衣建议的功能。
2026-05-25 17:01:52
421
原创 基于 Python + LangChain + React 的 AI 流式对话与历史存储实战（拓展图片上传）
本文详细介绍了AI对话系统中新增的图片上传与识别功能实现方案。前端通过FileReader将图片转为base64格式，在输入框内实现预览和删除功能，并通过HTTP POST将图片数据与文本一起发送至后端。后端根据是否包含图片自动切换视觉模型(qwen-vl-plus)，构建多模态消息进行处理。系统支持图片与文字的混合输入，并能完整保存和还原历史对话中的图片消息。技术实现涉及base64编码、SSE流式传输、多模态消息构建等关键环节，同时优化了数据库存储结构以适应大容量图片数据。该功能扩展了传统文本对话的交互
2026-05-22 17:11:40
431
原创 基于 Python + LangChain + React 的 AI 流式对话与历史存储实战
本文介绍了一个基于Python Flask和React的AI聊天系统实现方案。该系统采用SSE流式输出技术，对接通义千问大模型，支持多会话管理和对话历史持久化。后端使用Flask框架实现API接口，包括对话管理、消息存储和流式聊天功能；前端采用React构建交互界面，使用Zustand进行状态管理。系统通过MySQL存储对话历史，实现了会话创建、重命名、置顶、删除等功能。文章详细讲解了数据库设计、后端核心实现（特别是SSE流式接口）、前端组件开发等关键技术点，并提供了完整的数据流说明和系统测试方法。该方案可
2026-05-22 15:00:55
559
原创 基于 Python + LangChain + SQL 生成自动查询数据实战
本文介绍了一个基于Python、LangChain和MySQL的智能查询系统，能够将自然语言转换为SQL查询。系统通过LangChain的SQLAgent框架，结合通义千问大模型，实现用户输入自然语言问题后自动生成SQL、查询数据库并返回结果。文章详细展示了技术架构、电商场景的数据库设计（包含商品、客户、订单等4张核心表），以及核心代码实现，包括数据库连接、SQLAgent创建和API接口。系统支持多种查询场景，如销量统计、客户分布等，并能处理非查询类闲聊。最终效果表明，用户无需SQL知识即可获取数据洞察，
2026-05-15 11:58:38
484
原创 基于 Python + LangChain + RAG 的知识检索系统实战
本文介绍了一个基于RAG（检索增强生成）技术的知识检索系统实现方案。系统通过将用户问题向量化后检索知识库，再结合大模型生成精准回答，有效减少AI幻觉。技术架构采用Flask后端+FAISS向量数据库+MySQL关系数据库+通义千问大模型，前端实现简洁的聊天界面和知识管理功能。核心流程包括：知识Embedding、向量索引构建、相似度检索、上下文拼接和LLM生成。该系统特别适用于需要准确回答特定领域问题的场景，如汽车参数查询等。文章详细讲解了数据库设计、RAG核心实现、前后端交互等关键技术点，并提供了完整代码
2026-05-09 16:15:56
442
原创 基于Python + LangChain + 通义千问的聊天机器人实战
本文详细介绍如何从零搭建一个带可视化界面的AI聊天机器人。采用Python+Flask+LangChain作为后端，接入阿里云通义千问大模型；前端使用纯HTML/CSS/JS实现无框架依赖的交互界面。文章包含完整开发流程：从环境配置、API密钥管理，到核心聊天逻辑实现（支持多轮对话），再到前后端分离架构设计（REST API+Axios通信）。项目亮点包括会话管理、Markdown渲染、加载动画等交互细节，并提供了后续扩展方向（如流式输出、RAG知识库等）。通过.env文件管理密钥，确保开发安全性，最终实现
2026-05-08 17:22:10
471
原创 html2canvas + jsPDF 生成 PDF 的踩坑与解决方案总结
本文介绍了解决html2canvas和jsPDF在导出表格为PDF时的常见问题及优化方案。针对表格内容被遮挡问题，通过强制白色背景、提升单元格层级和统一表格布局修复；对于分页截断问题，采用智能分页算法标记不可拆分元素并调整断点位置；尾部段落通过添加data-no-break属性保护。此外还解决了oklch颜色渲染和容器裁剪问题。最终实现完整、可读性强的PDF导出功能，包含页码生成和文件自动上传功能。
2026-04-30 14:43:58
469
原创 Trae 和 VSCode 中 Claude Code 插件使用
智能编码：自动探索代码库、阅读和编写代码、运行终端命令内联差异对比：直接在编辑器中查看 Claude 建议的代码修改@ 文件引用：使用提及文件和文件夹，给 Claude 提供上下文Plan 模式：先审阅计划，再决定是否执行Git 集成：自动提交代码、创建 PRMCP 扩展：通过 Model Context Protocol 连接外部工具和 API多会话支持：在多个标签页中并行处理不同任务1、插件市场下载Claude（Trae 和 VsCode一致）2、进入拓展设置。
2026-04-20 14:52:12
2014
原创 实现可交互的泳道图组件（React）
本文介绍了如何使用React构建一个交互式泳道图编辑器。系统采用清晰的数据结构设计，包含泳道、节点和连接线三个核心元素。技术实现上使用Zustand进行状态管理，支持节点拖拽、贝塞尔曲线连接、撤销重做等功能。文章重点讲解了SVG绘制连接线的算法、拖拽交互的实现细节以及历史记录管理方案，并提供了样式优化和导出功能的实用技巧。整个方案兼顾了功能性和用户体验，可作为业务流程可视化工具的开发参考。
2026-03-06 14:32:09
455
原创 前端项目怎么同时打包Windows和Linux版本
摘要：Vue项目在Node.js17+环境打包时出现OpenSSL3.0兼容性问题，表现为digital envelope routines::unsupported错误。解决方案是在打包命令中添加--openssl-legacy-provider参数，并使用cross-env实现跨平台兼容。同时针对多环境打包需求，通过VUE_APP_前缀的环境变量区分不同版本。其他优化包括关闭sourcemap、Gzip压缩和代码分割。关键点：Node17+需注意OpenSSL兼容性，使用cross-env统一跨平台命令
2026-02-10 09:10:37
538
原创 大文件上传的那些坑：分片上传+断点续传
摘要： 为解决大文件上传问题，采用阿里云OSS分片上传方案，通过multipartUpload方法实现断点续传。核心代码简洁，但需注意超时设置（默认时间不足）、进度回调优化（UI需提示"正在上传"）及断点续传实现（依赖uploadId存储）。此外，通过UUID解决文件名冲突，前端校验文件类型/大小，并优化拖拽上传体验。关键点：参数需按业务调整，重视用户体验细节，全面测试网络异常及文件场景。
2026-02-09 13:34:31
520
原创 二维码生成器：从前端到打印的全流程
本文介绍了前端使用qrcode库生成二维码的实践经验和常见问题解决方案。主要内容包括：1）基础用法和支付场景应用；2）二维码优化技巧（容错率设置、尺寸调整、打印适配）；3）常见问题如二维码复杂度、清晰度、打印效果的处理；4）二维码下载和支付状态轮询的实现；5）批量生成和打印预览等实用技巧。文章强调了根据使用场景调整参数的重要性，并提醒注意定时器清理等开发细节。
2026-02-09 09:37:52
951
原创 Base64 上传到阿里云 OSS
本文介绍了将Base64格式的Canvas截图上传至阿里云OSS的方法。首先需要将Base64转换为Blob对象：通过atob解码并转换为Uint8Array，再构造Blob。然后准备OSS表单数据FormData，包含签名、策略等必要参数。最后使用fetch API进行上传，相比XMLHttpRequest代码更简洁。关键点包括：去除Base64前缀、从Base64提取MIME类型、获取文件扩展名、正确构造Blob对象等。该方法解决了OSS不支持直接上传Base64数据的问题，提供了完整的解决方案。
2026-02-02 15:15:12
871
原创 聊聊 OpenClaw：是真好用，还是真“坑爹”？
OpenClaw（原Clawdbot）近期在GitHub爆火，它让电脑具备远程语音控制、记忆用户习惯和兼容多AI系统的能力，使用体验流畅。但该工具存在严重安全隐患：需开放过高权限可能导致隐私泄露；AI误操作可能删除重要文件；还可能产生高额API费用。建议仅在闲置设备上试用，避免在主力机使用以防数据风险。
2026-02-02 11:16:24
1069
原创 dnd-kit 实现表格拖拽排序
摘要：本文介绍了在React项目中实现表格行拖拽排序的技术方案。通过对比react-dnd、react-beautiful-dnd等主流库后，选择了@dnd-kit作为解决方案，因其轻量、高性能且完美支持React19。详细说明了如何集成@dnd-kit与Ant Design Table，包括处理表格行自定义、transform转换、拖拽手柄实现等关键点。特别强调了几个技术难点：使用CSS.Translate.toString()转换transform对象、通过Context传递listeners实现精准拖
2026-02-01 14:46:12
380
原创 React Router 7 全局路由保护
本文介绍了一种优化的React路由保护方案，通过全局路由保护替代原先分散的页面级验证。关键改进包括：1）在main.jsx中使用全局ProtectedRoute组件统一管理路由保护；2）实现token验证、路由白名单检查和401错误处理；3）通过isRelogin标志位防止多次401提示；4）处理懒加载与路由保护的兼容问题。该方案解决了重复代码、安全漏洞和逻辑混乱问题，使路由管理更集中可靠，同时保留了登录跳转和懒加载功能。文中还总结了全局保护、401处理、路由白名单维护等关键实践要点。
2026-02-01 13:56:00
466
原创 Tesseract.js OCR 中文识别
本文介绍了使用Tesseract.js实现纯前端OCR文字识别的实践经验。该方案支持中文识别并返回文本位置信息，主要优势包括无需后端、开源免费。文章详细说明了基础使用方法、词语位置提取算法（通过合并bbox实现）、性能优化建议（图片预处理）以及日志过滤技巧。同时指出了几个关键问题：中文识别准确率约70-80%、首次需下载20MB语言包、图片质量直接影响识别效果。最后提供了封装好的工具函数，便于项目复用。该方案特别适合需要在前端实现文字定位功能的场景。
2026-02-01 11:24:48
687
原创 React 用 Canvas 实现图片标注，我踩过这些坑
本文总结了在图片标注功能开发中的五大常见问题及解决方案：1.高DPI屏幕模糊问题，需通过devicePixelRatio调整canvas尺寸；2.缩放平移时的坐标转换问题，需记录fitScale、scale和offset三个状态；3.拖拽性能问题，采用ref保存offset和节流优化；4.标注框点击检测问题，通过增加气泡辅助点击；5.虚线框绘制问题，注意使用setLineDash并恢复实线。最终采用双层Canvas架构（图片层+标注层）提升性能。这些经验对开发图片标注功能具有重要参考价值。
2026-02-01 11:24:10
401
原创 React 19 + Vite 6 + SWC 构建优化实践
文章摘要：针对项目首屏加载慢的问题（8秒），通过分析发现2.8MB主bundle过大。采用Vite6的代码分割技术，手动配置分包策略将各依赖库拆分为300KB以内的chunk；优化开发环境配置，区分dev/test/prod环境；使用SWC替代Babel使编译时间从12秒降至4秒；清理生产环境console.log并添加React19补丁。最终主bundle降至800KB，首屏加载时间优化到1.5秒，Lighthouse评分提升至92分。关键经验：大型项目需手动分包、提前规划环境变量、优先使用SWC编译器。
2026-02-01 11:22:18
425
原创 别再写三行 Flex 了！一行 CSS 实现完美居中
在前端圈，如何实现“垂直水平居中”几乎成了面试和日常开发的“固定节目”。从最原始的，到后来统治战场的，技术一直在寻找最简洁的写法。
2026-01-30 17:52:00
262
原创 《在 React/Vue 项目中引入 Supademo 实现交互式新手指引》
Supademo是一款基于Web的互动式新手引导工具，帮助用户快速熟悉应用功能。它提供动态指引、自定义内容和简单集成，支持创建符合品牌形象的引导流程。使用方法：注册账号后编辑内容，通过API集成到项目，实现点击触发指引。适用于需要用户教育的产品，能显著提升用户体验。官网：https://app.supademo.com/
2026-01-30 16:54:50
570
原创 阿里云OSS文件上传组件开发文档
本文分享了基于阿里云OSS的前端直传文件上传组件实现方案。该方案采用前端直传方式，通过后端生成临时签名保障安全性，减轻服务器压力。组件封装了文件验证（类型、大小、数量）、签名获取、进度监控等核心功能，使用时间戳重命名避免冲突。实现采用FormData和XMLHttpRequest，支持大文件上传和进度显示。组件提供丰富的配置选项，包括存储目录、文件类型限制等，并解决了签名过期等常见问题。该方案具有安全性高、性能好、易扩展等特点，可直接复用为通用上传组件。
2026-01-30 09:30:00
1484
原创 Vditor 实现混合模式评论，使用 Zustand 本地存储
本文介绍了如何为Markdown文档实现评论功能，主要包括：1. 使用Zustand状态管理创建评论Store，支持添加评论、回复、删除等操作，并实现localStorage持久化；2. 开发浮动评论面板组件，支持章节和段落两种评论粒度，包含评论列表、回复功能和用户交互；3. 在Markdown渲染器中集成评论功能，为标题和段落添加评论按钮，并显示评论数量。该方案支持多级回复、实时统计和持久化存储，通过enableComment参数即可启用。如需对接后端，可修改Store中的API调用逻辑。
2026-01-27 18:33:08
465
原创 基于 React 实现 Vditor 的可复用 Markdown 渲染组件
本文介绍了基于Vditor的Markdown渲染组件实现方案。Vditor是一款支持所见即所得、即时渲染的浏览器端Markdown编辑器。通过封装Vditor.preview API，实现了支持主题切换、图片预览、大纲导航等功能的可复用组件。核心实现包括：使用Vditor渲染Markdown内容，动态替换img标签为Antd Image组件以支持图片预览，自动提取标题生成大纲导航，并优化了渲染性能。该方案适用于需要渲染复杂Markdown内容（含图片、视频、公式等）的场景，相比marked、markdown
2026-01-27 15:16:41
1128
原创 React 合同审查组件：按合同标题定位
摘要：该功能实现了通过条款标题在文档中快速定位并高亮显示整个章节内容。主要特点包括：1）通过标题匹配定位，支持4种匹配策略；2）智能确定章节边界（根据标题层级）；3）自动高亮从当前标题到下一个同级/更高级标题之间的所有内容；4）100ms延迟确保DOM渲染完成；5）优先选择最短标题匹配以提高精确度。与基于内容片段的定位相比，该方案更适合条款级别的快速浏览，具有较低的算法复杂度和中等容错能力。
2026-01-26 10:58:57
621
原创 React 合同审查组件：按合同原文定位
本文介绍了一个合同审核系统中的原文定位功能实现。该功能允许用户通过点击右侧风险点列表中的"定位原文"按钮，快速定位并高亮显示中间文档对应的原文内容。主要实现包括：1)构建精确匹配和模糊匹配两种正则表达式策略；2)使用TreeWalker遍历DOM查找匹配节点；3)基于编辑距离计算相似度实现模糊匹配；4)自动向上查找合适父元素添加高亮样式；5)平滑滚动至目标位置。系统优先尝试精确匹配，失败时使用模糊匹配算法(相似度阈值>0.8)，并支持处理空格变体、标点符号等格式差异，提高了定位的准
2026-01-26 09:15:52
266
原创 React 合同审查组件：文档结构树渲染及定位详解
本文介绍了合同审查系统中Markdown文档结构树的实现方案。系统通过栈数据结构解析后端返回的Markdown文本，构建层级目录树，并利用AntDesignTree组件进行渲染。核心功能包括：1）使用正则匹配和栈结构处理多级标题；2）实现节点点击定位与平滑滚动；3）标题高亮显示。方案优化了用户体验（平滑滚动、视觉反馈）和性能（延迟执行、唯一key），支持各类标题组合情况，并预留了搜索、同步滚动等扩展接口。该实现将数据解析、UI渲染和交互逻辑分离，构建出灵活高效的文档导航组件。
2026-01-21 10:09:19
754
原创 Claude + Skills 快速生成PPT
这次分享一个"黑科技":利用 AI + PPT Skill,从大纲到成品演示文稿,全程自动化。在 Claude Code 中: 直接把对应的PPT的SKill.md文档链接丢给claude以及大纲丢给它，按照自己想要的需求及进行微调。大纲的内容是根据我的需求描述让Gemini帮我生成的大纲，他主要是针对每一个模块、第几张PPT的内容分区进行大纲的编写。这是 Claude Code 提供的一个 PPT 生成 Skill,本质上是把你的大纲转换成专业的演示文稿。- 我的技术主题:深蓝色 + 青色(科技感)
2026-01-18 23:21:28
8307
2
原创 网页包装为桌面应用（electron版）
使用 Electron 将在线网页封装成独立的 Windows 桌面应用程序。npm start显示了自定义图标 ✅打包时因为网络问题无法下载签名工具，导致图标无法嵌入到 exe 文件中 ❌解决方案有几个：方案1：手动下载签名工具缓存# 手动下载 winCodeSign-2.6.0.7z 并放到缓存目录方案2：使用 ResHacker 或其他工具手动修改图标方案3：暂时接受现状（虽然打包失败，但 exe 文件已经生成在，只是图标是默认的）
2025-12-31 15:17:51
1518
原创 网页包装为桌面应用（Nativefier版）
Nativefier 是一个开源的命令行工具，用于将任何网站快速打包成独立的桌面应用程序，支持 Windows、macOS 和 Linux 系统。它基于 Electron 框架，使用 Chromium 内核渲染网页，生成的本地应用可执行文件（如 .exe、.app 或 .deb）可直接运行。
2025-12-31 14:28:02
642
原创 发送到飞书机器人的完整流程（拓展）
技术点实现位置说明消息格式使用卡片消息 +lark_mdMarkdownURL 验证多重验证确保 URL 合法性错误处理双层HTTP 状态码 + 飞书 API 错误码降级方案剪贴板复制手动发送格式转换HTML → 飞书 Markdown状态管理publishing→completed。
2025-12-30 16:54:46
1076
原创 录音与阿里云ASR实时识别实现流程
获取到的相关Key自己手动配置在.env文件即可。录音结束后（录音开始时就获取到了token）库实现浏览器录音功能。
2025-12-29 17:46:58
875
原创 AI Skills认知
Skills 就像是将特定的业务场景和 AI 能力封装成一个标准化的"技能包"或者"记忆包"，包含配置说明、服务实现和集成规范，能将它从一个通用 AI 变为精准执行特定任务的专家。其采用渐进式披露机制，它并不会一次性加载所有的内容，而是分层、按需调用。Skills 主要是去教 Claude “如何做” 一件事（内部知识和流程），而工具是让 Claude “去做” 一件事（调用外部数据或执行动作）。其采用渐进式披露机制，它并不会一次性加载所有的内容，而是分层、按需调用。脚本、模板、参考文档（存在情况下）
2025-12-29 16:08:52
742
原创 request 拒绝外部 API 请求
直接使用封装的request去请求外部API接口，接口能够访问上，也能够成功的处理数据，但是控制台并没有打印data获取到的接口响应数据。字段，只有返回相关字段内容的一个对象内容。时会拒绝Promise。但外部API返回的数据结构中没有。按照这样定义函数之后就能够成功的调用以及获取响应的内容了。来调用外部API，绕过。
2025-12-23 14:38:33
172
原创 React 富文本图片上传 OSS 并防止 Base64 图片粘贴
这是一个在富文本编辑器中实现自定义图片上传到阿里云OSS、并防止Base64图片粘贴的完整方案。实现富文本请参考https://blog.csdn.net/qq_70172010/article/details/156090593?spm=1001.2014.3001.5501关键点： 安全性：通过后端获取签名，避免在前端暴露AccessKey文件唯一性：使用时间戳作为文件名，防止覆盖非阻塞上传：使用XMLHttpRequest支持进度监控直接插入：上传成功后直接将图片插入编辑器，无需二次
2025-12-23 10:50:30
532
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人