0. 先和大家打个招呼吧 
-
你是谁： 大家好！我是一名在校大学生，平时参加各种竞赛和项目，每天都在和各种比赛通知文件打交道
-
**你是怎么用 TRAE 把 Demo 做出来的：**说实话，在用 TRAE 之前，我只能够写非常简单的前端。但是有了TRAE就不一样了，想法到实现，TRAE直接赋能，时间大幅缩短！
比如我说"我要一个能上传比赛通知 PDF，然后自动提取比赛名称、截止日期、参赛要求的网页工具"，它就一步步帮我从 HTML 骨架、CSS 样式到 JavaScript 逻辑全部写出来。中间我想要苹果那种"液态玻璃"效果，直接描述了一下视觉风格，它就给我加上了 backdrop-filter 毛玻璃、边缘高光、镜面反射这些效果。那一刻我真的觉得：原来做产品可以像跟朋友聊天一样简单。
TRAE 帮我跨过的最大的坎，是"从零到一"的恐惧。以前总觉得做网页应用是程序员的专属领地，现在我发现，只要有想法，TRAE 就是那个帮你把想法落地的人。vaScript 就头大，更别说做什么 AI 解析、文件上传这些复杂功能了。这次用 TRAE 做这个 Demo，整个过程让我最震撼的一点是：我只需要用大白话描述我想要什么，它就能帮我把想法变成真正能
1. Demo 简介
-
是什么： 一个纯前端网页应用（单文件 HTML，双击即用），支持上传比赛通知文件（PDF/Word/TXT），由 AI 自动提取关键信息并整理为结构化数据，附带时间线可视化、信息校验、Word 导出等功能；
-
面向谁： 经常参加各类竞赛的大学生、科研人员、项目管理者——任何需要从一堆比赛通知文件里快速提取关键信息的人；
-
主要功能：AI 智能解析——上传比赛通知文件（支持 PDF/Word/TXT），多个 AI 智能体并行工作，自动提取比赛名称、报名截止日期、比赛时间、参赛要求等核心字段。解析过程有实时计时器显示耗时，智能体工作状态可视化。
全局时间线——所有比赛按截止日期排序，在横向时间线上一目了然。不同状态用颜色区分：报名中（蓝色）、即将截止（橙色）、已截止（灰色），帮你快速判断优先级。
信息辨别与校验——自动检测信息完整性（是否有缺失字段）和信息冲突（同一比赛不同来源的日期是否矛盾），给出可信度评分，避免因为信息不全或错误而错过比赛。
一键导出 Word——将整理好的比赛信息导出为格式化的 Word 文档，方便分享和存档。
2. Demo 创作思路
-
灵感来源：每学期开学，各种竞赛通知像雪花一样飞来——辅导员群发的、学院公众号推的、同学转发过来的。有的是 PDF，有的是 Word，有的是纯文字截图。我经常因为没及时整理而错过报名截止日期，或者记混了比赛时间。有一次我把三个比赛的截止日期搞混了，结果错过了一个很重要的省级竞赛。从那以后我就想：要是有个工具能帮我把这些文件自动整理一下就好了；
-
想解决的问题：比赛通知文件格式杂、信息散、容易遗漏。具体痛点包括：
文件格式不统一（PDF/DOCX/TXT 混杂），手动逐个打开查看费时
关键信息（截止日期、参赛要求）埋在大段文字里，容易看漏
多个比赛的时间线无法直观对比，不知道哪个该先做
信息来源可能有出入，缺少校验机制； -
为什么做这个方向：我选择这个方向有两个原因。
-
第一，这是我自己真实的痛点，我知道用户需要什么。
-
第二，AI 大模型在信息提取方面非常强，但大多数人还停留在"问答"层面，没有把它用在"文档处理"这种实际工作流中。这个 Demo 想展示的是：AI 不只是聊天机器人，它可以成为你的信息整理助手。
3. Demo 体验地址（三选一）
- 交互式可体验的HTML格式文件，请使用Zip格式打包上传到社区；
4. TRAE 实践过程
-
整体开发流程
整个 Demo 的开发完全在 TRAE 中完成，从最初的功能规划到最终的打包发布，全程通过与 TRAE 对话来实现。以下是关键开发步骤：第一步：项目初始化与核心功能搭建
向 TRAE 描述了产品需求：一个能上传比赛通知文件、用 AI 提取关键信息、展示时间线的网页工具。TRAE 帮我搭建了完整的项目结构：
index.html——页面结构
css/style.css——样式表
js/config.js——AI 接口配置（支持多种大模型，密钥安全存储在浏览器本地）
js/app.js——核心逻辑（文件上传、文本提取、AI 调用、时间线渲染、信息校验、Word 导出）
这一步实现了文件上传（支持拖拽）、PDF/Word/TXT 文本提取、AI 智能体并行解析、全局时间线展示、信息完整性校验等核心功能。第二步：液态玻璃 UI 设计
向 TRAE 描述了想要的视觉风格——苹果 WWDC25 发布的 Liquid Glass 液态玻璃效果。TRAE 实现了：
半透明玻璃卡片（backdrop-filter: blur(24px) saturate(180%)）
边缘折射高光（顶部 2px 亮线 + 镜面光泽渐变）
多层阴影模拟玻璃浮动感
彩色渐变背景让玻璃透出色彩
全组件覆盖（卡片/导航/按钮/弹窗/徽章均应用玻璃效果）第三步：浅色主题重构与布局优化
初始版本是深色背景，视觉上不够舒适。向 TRAE 反馈后，它完成了：
背景从深色改为浅色渐变（柔和蓝紫底色 + 6 个彩色光斑）
玻璃透明度和文字颜色重新调配，确保对比度
导航栏三个标签居中显示
全局滚动条美化（半透明极简风格）
弹窗改为纯白不透明背景，文字加深确保可读性第四步：动画柔化与解析计时器
向 TRAE 反馈动画感觉生硬，它完成了：
53 处过渡动画从 ease 改为 cubic-bezier(0.22, 1, 0.36, 1)（苹果风格缓动曲线）
弹窗动画加入微缩放效果
Spinner 和脉冲动画减速
新增解析计时器功能：点击解析后实时显示耗时（0.1s 精度），完成后变绿显示总时间第五步：单文件打包
为了让用户拿到一个文件就能用，TRAE 将所有 CSS、JavaScript 和第三方库（PDF 解析、Word 解析、Word 导出，共约 2.7MB）全部内嵌到一个 HTML 文件中，包括将 PDF Worker 通过 Blob URL 内嵌，实现真正的单文件独立运行。
关键任务对话 Session ID
Session ID 1：3383622780585736:ab0d97f423fc0aa9b055e1e48f119979_6a38f783a9cd3d031b6a70cd.6a38f783a9cd3d031b6a70d0.6a38f783a9cd3d031b6a70ce:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/6/22 16:51:15)**
Session ID 2：3383622780585736:425a4f56455b0bffc340e38b50833bee_6a38f783a9cd3d031b6a70cd.6a4c6c1a892bad575dc30ebd.6a4c6c1a892bad575dc30ebb:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/7 11:01:46)
Session ID 3：3383622780585736:fe9408d91fd9b9ce71f2bb2e91b4d323_6a38f783a9cd3d031b6a70cd.6a4c7005892bad575dc30ef8.6a4c7005892bad575dc30ef6:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/7 11:18:29)
Session ID 4：**3383622780585736:279aa03423740c210536c34f5c6856ae_6a38f783a9cd3d031b6a70cd.6a4c7221892bad575dc30f0f.6a4c7221892bad575dc30f0d:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/7 11:27:29) -
**Session ID 5：**3383622780585736:be7f12d3f2df24464e77bd7a78442705_6a38f783a9cd3d031b6a70cd.6a4c9309892bad575dc31219.6a4c9309892bad575dc31217:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/7 13:47:53)
5. 对应的报名审核通过的帖子链接：
demo.zip (38.9 KB)
