【学习工作】
【学习工作赛道】+ Clipe
【正文】
0. 先和大家打个招呼吧 
-
你是谁： 大家好，我是一名化工专业的大二学生，也是一名喜欢利用 AI 提高学习效率的开发者。
-
你是怎么用 TRAE 把 Demo 做出来的： 以前每次整理试卷，都需要手动截图，裁剪，分类，一张试卷往往要花十几分钟，非常浪费时间。我把自己的想法一点一点告诉 TRAE，从"帮我做一个自动拆题的软件"开始，到页面设计，功能规划，图像识别流程，再到代码实现和调试，基本都是通过不断对话完成。让我印象最深的是，当遇到图像裁剪或者坐标识别等自己完全没有接触过的问题时，我只需要描述需求，TRAE 就能够给出完整的实现思路和代码框架，再根据运行结果不断调整，整个开发过程更像是在和一位经验丰富的开发伙伴一起完成作品，而不是独自查资料、踩坑。作为一名非计算机专业学生，这也是我第一次真正完成一款可以实际使用的学习工具。
1. Demo 简介
-
是什么：Clipe 是一款利用图像识别（OCR）与版面分析技术，将整页试卷自动拆分为单道题目，并支持分类、导出、整理的智能学习辅助 App。
-
面向谁：主要服务于：
-
中学生、高中生
-
大学生
-
考研、考公、考证人群
-
教师及教辅机构
-
-
主要功能：
2. Demo 创作思路
-
灵感来源：作为学生，我每天都会刷大量试卷。但每次整理错题，都需要：截图裁剪保存重命名分类一张试卷可能要重复几十次操作。尤其是考研复习时，经常需要把一道题保存下来，方便以后反复练习，而不是保存整张试卷。于是我就在想：为什么不能拍一张整页照片，让 AI 自动完成拆题？这便是 Clipe 的最初想法。想解决的问题：目前市面上的很多扫描工具只能做到：扫描整页OCR识别文字却不能真正理解："哪里是一道完整的题目。“用户依然需要大量人工裁剪。Clipe 希望解决：手动截图效率低错题整理繁琐大量重复劳动试卷管理混乱让整理试卷真正实现"一键完成”。
-
**为什么做这个方向：**AI 在图像理解方面已经越来越成熟。相比简单 OCR，我更希望让 AI 理解：题号题目区域图片公式小问结构真正做到"按题目"而不是"按图片"进行拆分。我相信，这样的工具不仅适用于学生，也可以帮助老师制作讲义、整理题库，提高学习效率。
3. Demo 体验地址（三选一）
- clipe-standalone.html (18.7 KB)
4. TRAE 实践过程
-
第一步：产品需求与UI设计
-
首先向 TRAE 描述了产品目标：希望开发一款能够自动拆分整页试卷的学习工具。然后TRAE 协助完成产品定位功能规划页面结构设计用户流程设计
-
第二步：核心功能开发
-
在 TRAE 协助下完成：图片上传，OCR 调用，图像区域检测，自动裁剪单题编号，导出图片，并不断调试识别效果。
-
第三步：功能优化
后续继续利用 TRAE：修复 Bug优化界面调整识别逻辑改善用户体验最终形成完整 Demo。
-
开发关键步骤截图（不少于 3 张）
-
新增了批量导出功能！！！
-
当前drop-zone的 error 事件已挂载 handler，后续开发可：
-
在 error 回调内增加用户 Toast 提示；
-
给拖拽增加悬浮高亮样式（dragover 时修改 drop-zone 背景边框）；
-
限制多文件拖拽数量，避免一次性传入过多图片导致页面卡顿。
-
-
preview-gallery预览画廊列表，按顺序罗列每一道识别拆分后的题目缩略条目（Q1、Q17、Q2、Q27……），就是你之前要优化的侧边缩略预览栏，目前已经具备列表承载结构。
-
关键任务对话的 Session ID
- .1395709864075820:b790bcd52a3b054779c064ac4ba858c8_6a40711c2d3124632c2a9ec7.6a4dc0b5df00924879af895b.6a4dc0b37146d46897eb2ba7:Trae CN.T(2026/7/8 11:15:01)
- .1395709864075820:88b490ce9d930587611b7e3fc3b06481_6a40711c2d3124632c2a9ec7.6a4deb8ddf00924879af8bad.6a4deb8d1d1db237ae7f4d8f:Trae CN.T(2026/7/8 14:18:07)
- .1395709864075820:996ada55162b531396aa425edb6d03f2_6a40711c2d3124632c2a9ec7.6a4e0831df00924879af8f2b.6a4e08305864d74267176335:Trae CN.T(2026/7/8 16:20:01)
