1.Demo 简介
AI课代表是一款面向学生的轻量化 Web 复习助手。你只需把课堂笔记或讲义内容粘贴进去，它就能在几秒钟内自动完成一整套复习资料的生成：记忆卡片、思维导图和模拟测试题。产品形态为纯前端单页应用，无需安装、无需注册，打开浏览器即可使用。
核心用户是大学生和自学者。这类人群有一个共同的痛点：课后整理笔记、制作复习卡片、构建知识框架、出题自测，这一套流程通常要花上 2-3 个小时，而 AI课代表的目标是把这段时间压缩到几秒钟以内。
一句话总结：粘贴课堂笔记，几秒内自动生成记忆卡片+思维导图+模拟试题，一站式完成课后复习。（1）主要功能
智能记忆卡片：自动从笔记原文提取知识点，同时由 AI 联想扩展 3-5 个相关知识点，每张卡片正面是问题，背面是详解。卡片支持翻转查看，点击即可翻面。
知识思维导图：以输入内容为核心主题，自动生成层级分明的知识框架图，中心主题在左、分支层级向右展开，结构一目了然。
模拟自测题：基于卡片知识点自动生成选择题，做完即时判分并给出评语，答错的题目可在卡片中回顾。
知识加强理解：AI 用通俗语言解释难懂知识点
笔记本与导出：用户可以勾选感兴趣的卡片一键存入笔记本，支持合并导出为 TXT 或 Markdown 格式，方便导入到 Obsidian、Notion 等笔记软件中继续整理。
输出模式控制：提供"完整笔记"和"自定义"两种输出模式，前者由 AI 控制内容详略，后者允许用户输入自定义需求（如"只提取公式，每条50字以内"）。
（2）界面预览：有两个版本选择
-前端试用版：需要内置知识库（Spring、历史、英语语法等），输入关键词自动匹配关联知识点。
-deepseek版：真正接入大模型，调用 DeepSeek API（deepseek-chat模型），AI根据输入文本自动联想扩展知识点。
输入页面：前端试用版（图1）和接入deepseek版（图2），粘贴笔记后选择输出模式。
记忆卡片页面：卡片网格
知识强化理解页面：AI 用通俗语言解释难懂知识点
笔记本弹窗：已保存笔记列表 + 批量导出
思维导图页面：知识框架可视化 + 导出按钮
模拟测试页面：
2.Demo 创作思路
（1）灵感来源
作为曾经的大学生，我深知课后复习的繁琐。一堂课下来，笔记往往是大段大段的文字，复习时需要手动拆分知识点、上网查补充资料、把内容做成卡片、画思维导图、再找题自测。这些步骤分散在不同的工具里，效率极低。我一直在想：能不能有一个工具，把"整理笔记 → 制作卡片 → 构建框架 → 自测检验"这整个流程串起来，而且只需要一步输入就能完成？
（2）想解决的问题
学生课后复习的真实痛点可以总结为四点：
整理耗时：手动从大段笔记中拆分知识点，每条都要自己想"这个点适合怎么考"。
联想困难：看到"Spring MVC"，初学者很难立刻联想到 DispatcherServlet、RESTful、@Controller 等关联知识点。
工具分散：卡片用 Anki、导图用 XMind、题库自己编，数据不互通，整理成本被工具割裂放大了。
AI课代表的定位就是"一站式解决"：输入笔记文本，其余全部由 AI 自动完成。
（3）为什么做这个方向
选择"学习工作"赛道，判断依据有两点：
第一，目标用户（大学生）对效率工具的接受度高，且存在明确的使用场景（期末考试前的高效复习）。
第二，AI 在这类结构化内容生成上表现稳定。相比开放域对话，"从笔记提取知识点并生成卡片"是一个输入输出边界都很清晰的任务，LLM 的幻觉风险低、可控性强，适合作为 MVP 落地。
在功能取舍上，我刻意保持了极简：没有用户系统、没有后端服务、没有数据库，所有数据存在浏览器 localStorage 中。这样做的目的是让 Demo 的"核心链路"（输入 → 处理 → 输出）足够清晰，评审可以零成本体验完整流程。
3.Demo体验地址
本次提交为交互式可体验的 HTML 格式文件，已打包为 Zip 上传至社区附件。
下载后解压，包含两个版本：
v1-前端模拟增强版/ —— 内置预设知识库，无需联网，开箱即用，适合快速体验核心交互流程。
v2-DeepSeek接入版/ —— 接入 DeepSeek 大模型 API（API Key 已预填），输入任意笔记内容即可获得真实的 AI 联想扩展结果。
两个版本均使用同一套 UI，功能完全一致。直接打开对应文件夹下的 index.html 即可在浏览器中体验。
v1-前端模拟增强版.zip (24.3 KB)
v2-DeepSeek公开版.zip (18.9 KB)
4.TRAE 实践过程
整个 AI课代表 Demo 完全由 TRAE 协助开发完成，从创意验证到可交互成品，经历了以下关键阶段：
阶段一：产品概念验证
在动手写代码之前，TRAE 先以"产品策划助手"的角色对我进行了 5 轮结构化追问，逐一排查创意中的逻辑漏洞。例如：输入内容是否需要长度限制？AI 联想的内容如何与原文区分？免费和付费功能的边界在哪里？这轮对话帮我厘清了核心约束，也直接沉淀为后续开发的设计原则。
阶段二：MVP 原型快速落地
确定方案后，TRAE 一次性生成了两份可运行的 HTML Demo：前端模拟版和 DeepSeek API 版。前端模拟版内置了 Java Spring、中国近代史、英语语法三套知识库，通过关键词匹配实现知识点联想，不依赖网络即可演示完整流程；DeepSeek 版则通过调用大模型 API，实现了真正的 AI 扩展。两套代码结构清晰，共用一个 CSS 样式文件，便于后续同步迭代。
阶段三：功能迭代与细节打磨
在初版 Demo 跑通后，TRAE 协助完成了多轮功能迭代：
笔记本系统：为每张卡片添加复选框，支持勾选后一键存入笔记本，数据通过 localStorage 持久化，并支持按 TXT / Markdown 格式批量导出；添加了知识加强理解，用户对知识点还是不清晰时，可以让AI用通俗易懂的语言来告诉用户。
思维导图导出：在思维导图面板增加导出工具栏，支持导出为 Markdown 文本（可导入 Obsidian）和 PNG 图片（基于 Canvas 绘制）。
交互体验优化：将原生 alert() 弹窗全部替换为自定义 Toast 轻提示，解决了嵌入浏览器环境下弹窗标题显示 file:// 的问题；优化了卡片复选框的视觉样式；合并了"速记"和"详记"模式为"完整笔记"，降低用户选择成本。
开发关键步骤截图：
TRAE 中产品概念验证的对话界面：
TRAE 生成 Demo 初版代码的编辑界面：
TRAE 调试笔记本功能时的代码对比界面：
知识加强理解的界面调优：
最终成品在浏览器中的运行效果：
当前展示的是deepseek版本，展示如何使用AI课代表。
进入页面：
点击立即体验→输入课堂笔记页面
在文本框里输入想要了解的知识，可选择输入出设置里的自定义来调整输出的格式，字数等。
—–需输入deepseek的api key才能调用大模型。
—–若无deepseek api key，可下载前端试用版本。
点击AI生成复习资料→自动调用大模型进行“备课”。
生成与知识点相关联的问题，点击想了解学习的卡片进行翻转。
点击卡片左上角选中卡片，可存入卡片到笔记本中；若知识点还是不理解，选中对应卡片，点击知识加强理解，可以让AI生成通俗易懂的解释。
知识加强理解：AI 用通俗语言解释难懂知识点。
在笔记本中可将存入的知识导出为txt和md格式，支持单条导出、多条合并导出。
知识点相关的思维导图，可导出为markdown和png格式。
可根据相关联知识进行模拟测试。
关键任务对话 Session ID：
1.产品概念验证与方案设计 3212106112701683:51d2c2bffe6c0b2698b8e2b7bd3f3d7f_6a3e8fab6a682769516288e2.6a3e953f6a68276951628907.6a3e953f6a68276951628905:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/26 23:05:35)
2.MVP Demo 开发与双版本实现 3212106112701683:a30787fe3b8a91e4d90f5a0fe4c10e50_6a3e8fab6a682769516288e2.6a3f5cc987f62e88dd4abffa.6a3f5cc987f62e88dd4abff8:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/27 13:16:57)
3.笔记本功能、导出功能与 UI 迭代 3212106112701683:fe9ade1002add6844ea91169089d0228_6a3e8fab6a682769516288e2.6a3f643187f62e88dd4ac074.6a3f643187f62e88dd4ac072:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/27 13:48:33)
4.费曼讲解（知识加强理解）图形优化
3212106112701683:0d959131fb684c25fdbc81cf92a869b4_6a3e8fab6a682769516288e2.6a48d608240ef36b0b5e9d88.6a48d608240ef36b0b5e9d86:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/7/4 17:44:40)
报名帖链接：https://forum.trae.cn/t/topic/47223?u=u3212106112701683