0. 先和大家打个招呼吧 
-
我是Marky，一名开发工程师，有多个开源项目，涵盖系统编程和AI Agent领域
-
你是怎么用 TRAE 把 Demo 做出来的： 这个很简单，我把自己去年一年学习AI的笔记库，交给了TRAE Work，目的只有一个把笔记复现，做成可交互，可视化的网站，大家都能去学习。此外还设计了一些小游戏，让那个学些ML Math 没那么枯燥。
-
至于为什么选择做这个，降低学习AI 基础知识的门槛。打破信息差的收费壁垒，你应该注意到随便一个论文，蹩脚翻译之后敢在网上卖你50+ 。 技术本开源，奈何信息闭塞，或者大部分人不知道如何寻找对的学习资料，我希望这个项目能解决这个问题，同时也分享自己的所得，这才是技术的本质。
1. Demo 简介
-
是什么：网站，在线的可交互的AI 知识学习网站。
-
面向谁： 核心用户是那些想学习AI 底层知识的人；
-
主要功能：
拆解大模型中的注意力机制
还有学习大模型必备的数学基础，配备习题和小测验
丰富的可视化界面，以及学习路径建议。
Rag 教程，从数据切片到embedding 入库，再到检索的完整生命周期
还有算法对比
设计了多款交互的小游戏，让学习没那么枯燥。
新增transformer 模拟训练过程
新增神经网络搭建器，可以看到每一步的详细数据（模拟数据）
RAG中构建了知识图谱，并且对项目的内存资源管理进行了优化。
还有待建的Agent 系列，这个随后在做。是基于我自研的GoAgentX 框架，从另一个工程角度解读不同的Agent 。
最后说一下这个只展示了我笔记的1/4的内容吧，满血版的交互平台需要自己本地部署，需要链接的记得评论区找我。
2. Demo 创作思路
-
灵感来源：打破信息壁垒，让人人都能掌握大模型的原理，不再被那些天花乱坠的名词困扰
-
想解决的问题：低门槛学习AI的底层原理。
-
为什么做这个方向：把我自己走通的路分享给大家，让大家少走弯路。
3. Demo 体验地址（三选一）
- 体验地址： https://timwood0x10.github.io/AIScope 首次加载会很慢，毕竟纯前端需要计算很多东西
- github 链接: https://github.com/Timwood0x10/AIScope
4. TRAE 实践过程
-
整个 AIScope 的开发完全基于 TRAE Work（Auto 模式） 完成。我没有从零手写代码，而是把过去一年整理的 AI 学习笔记（Markdown + 手绘草图）作为"知识原料"，让 TRAE 帮我完成从内容结构化到交互可视化的完整转化。整体开发分三个阶段推进：
第一阶段：知识架构梳理与网站骨架搭建
一开始我把笔记目录和核心知识点打包发给 TRAE Work，给出的关键 Prompt 大致是：
“我有一组 AI 学习笔记，涵盖注意力机制、大模型数学基础、RAG 流程、算法对比等内容。请帮我设计一个纯前端、可部署到 GitHub Pages 的交互式学习网站。要求：1) 左侧导航按学习路径组织；2) 每个知识点支持可视化交互（Canvas 或 SVG）；3) 数学公式用 MathJax 或 KaTeX 渲染；4) 配色专业但不沉闷。”
TRAE 直接生成了项目的整体架构：Vite + React + Tailwind CSS，并给出了模块划分建议。我采纳后，TRAE 在几轮对话里把基础路由、布局框架、主题配置全部搭好。这一步让我省去了大量 boilerplate 代码的时间。
第二阶段：核心可视化模块攻坚
这是最耗精力也最有价值的部分。我以"注意力机制"为突破口，要求 TRAE 把枯燥的公式变成可交互的演示：
“请在页面里实现一个 Self-Attention 的可视化：用户可以输入自己的句子，实时看到 Q/K/V 矩阵的计算过程，用热力图展示注意力权重分布，并且支持滑动条调整温度参数。”
TRAE 生成了完整的 Canvas 动画逻辑，但第一轮效果在移动端有性能问题。我反馈后，TRAE 改用 requestAnimationFrame + 分层渲染做优化，并建议我把重型计算放到 Web Worker 里。最终实现了现在看到的流畅交互效果。
数学基础模块也类似——我要求把梯度下降、反向传播等概念做成"可拖拽参数、实时看曲线变化"的形式，TRAE 逐一实现了滑动条联动图表的逻辑。
第三阶段：RAG 流程演示与小游戏
RAG 模块需要展示"数据切片 → Embedding → 向量入库 → 检索"的完整生命周期。我的 Prompt 是：
“做一个 RAG 全流程的交互演示：用户可以上传一段文本，看到文本被切片的动画，然后选择不同的 Embedding 模型对比向量距离，最后在向量库里做检索并展示 Top-K 结果。”
TRAE 把这个流程拆解成了 4 个步骤组件，并生成了模拟数据（因为纯前端无法调真实 Embedding API）。为了让学习不枯燥，我又追加要求：“每个章节末尾加一个 30 秒的小游戏，把刚才学的概念变成玩法”。TRAE 据此设计了注意力拼图、矩阵消消乐等几款小游戏，用的都是同一套 React 组件库，风格统一。
踩过的坑与解决
-
纯前端性能瓶颈：大量 Canvas 动画 + 数学公式同时渲染时，低端设备会卡顿。TRAE 建议用
React.lazy做路由级懒加载，并把非首屏模块拆成 chunk，首屏加载时间从 8 秒降到 3 秒以内。 -
数学公式渲染闪烁：KaTeX 在快速切换页面时出现样式抖动。TRAE 排查后建议预加载字体并加
content-visibility: auto，问题解决。 -
GitHub Pages 部署路径问题：React Router 的 BrowserRouter 在 GH Pages 刷新 404。TRAE 建议改用 HashRouter，并配置了正确的
base路径，一次部署成功。
整个过程大概持续了 2 周左右（利用碎片时间迭代），核心代码 90% 以上由 TRAE Work 生成，我主要负责：把控知识准确性、调整交互细节、验证学习路径是否合理。
-
-
附开发关键步骤截图；
-
session ID:
- 1176896725332571:52e05747e41827539d3b76feba8a791f_6a34995a757bf308cc64b5ac.6a34995a757bf308cc64b5af.6a34995a757bf308cc64b5ad:TRAE Work CN.0.1.19.no_sid.no_ppe.T(2026/6/19 09:20:26)
- 1176896725332571:becc3cf9e35b02bfc899f9251d49d798_6a33b6083f538b175da40382.6a33d42b3f538b175da4053a.6a33d42b3f538b175da40538:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/6/18 19:19:07)
- 1176896725332571:54ed22c9b5caa93f47655b80eeb0eadc_6a34995a757bf308cc64b5ac.6a4a0854012c72657cfcaa6c.6a4a0854012c72657cfcaa6a:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/5 15:31:32)
Transformer Playground && RAG 交互升级 ，以及做内存优化 session ID:
- 1176896725332571:bc45dc270725c21c44b86b8e1481e363_6a34995a757bf308cc64b5ac.6a4a0347012c72657cfca9bf.6a4a0347012c72657cfca9bd:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/5 15:09:59)
- 1176896725332571:f3fa306bfd112ac555415b871f6e2d7a_6a34995a757bf308cc64b5ac.6a4a166a3307a03ab7f087b0.6a4a166a3307a03ab7f087ae:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/5 16:31:38)
- 1176896725332571:dcb9e401ed4e3ebe7cbfbe6ba45f7682_6a34995a757bf308cc64b5ac.6a4a1fc63307a03ab7f088ce.6a4a1fc63307a03ab7f088cc:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/5 17:11:34)
- 1176896725332571:494e65f1c0d5a3bd2e1b1ff1c8db4890_6a34995a757bf308cc64b5ac.6a4a21143307a03ab7f08918.6a4a21143307a03ab7f08916:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/5 17:17:08)
- 1176896725332571:b59c911c6da3922c21d42e680b91e49e_6a34995a757bf308cc64b5ac.6a4cb074e84944468f5dc7ac.6a4cb074e84944468f5dc7aa:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/7 15:53:24)
5 . 对应的报名审核通过的帖子链接：
