### 我是一名口腔医生，没有任何编程和设计背景。坦白说，这个想法在我脑子里已经转了很久——每次在 PPT 里反复对齐图片、调整裁剪、改标题的时候，我都在想：明明上次做过一样的版式，为什么不能直接保存下来下次用？看到同行发了一张漂亮的病例展示图，想照着做自己的版本，为什么只能肉眼模仿？这些想法一直停留在"想想而已"的阶段，因为我不会写代码，不知道怎么把它变成现实。
直到遇到 TRAE。它让我可以用自然语言描述需求，AI 帮我写代码、调接口、做部署——一个完全不懂技术的牙医，从零开始，把这个想了很久的东西真正做了出来。这个 Demo 的每一行代码都是我和 TRAE 对话产生的。我想这就是 AI 时代最打
动我的地方：它不是替你思考，而是让没有技术背景的人，也能把脑子里想了很久的东西变成现实。
### 一、Demo 简介
**是什么：** DentalCase 是一款面向口腔医生的病例展示图创作工具——上传一张你满意的病例展示图，AI 自动识别版式结构并生成可复用模板，之后只需填入新病例照片和文字，即可一键导出同款版式的展示图。
**面向谁：** 所有需要制作病例展示图的口腔医生，包括正畸、美学修复、种植、儿牙、全科等亚专科医生，以及口腔研究生和诊所团队。
**核心功能：**
1. **AI 版式识别**：上传任意病例展示图（自己做的或同行分享的），AI 自动分析图片区域、文字区域的位置和比例，生成结构化模板。识别结果包含画布尺寸、背景色、各槽位（图片/文字）的坐标与标签。
2. **画布编辑器**：基于模板进行病例创作，支持图片拖拽定位、缩放适配，文字实时编辑同步到画布，所见即所得。
3. **模板库管理**：内置 4 套预设模板（治疗前后对比、三视图、四宫格、全景+细节），AI 识别的模板自动入库，支持模板 JSON 导入导出，逐步构建个人专属版式库。
4. **高清导出**：支持 PNG/JPG 格式导出，2 倍分辨率输出，满足学术汇报和社交分享的画质需求。
### 二、Demo 创作思路
**灵感来源：** 作为口腔行业从业者，我观察到身边医生每周都在重复做病例展示图——学术会议汇报需要前后对比图，诊所宣传需要统一风格的展示内容，患者沟通需要直观的治疗过程图。但每一次都在 PPT 或 PS 里从头排版，即使版式和上次一模一样，也要重新拖拽、对齐、裁剪、改字。更有医生看到同行发了一张很漂亮的病例图，想照着做自己的版本，只能凭肉眼模仿，费时费力还做不到一样好看。
**想解决的问题：** 传统设计工具（PPT/PS/Keynote）没有版式记忆功能，做过的版式无法保存复用；普通模板库（Canva）只提供别人设计好的固定模板，既不能沉淀自己的风格，也不能"学会"别人好看的版式。这中间存在一个巨大的空白——医生真正需要的不是"教我设计"或"给我模板"，而是"记住我做过的版式，下次直接用"。
**为什么做这个方向：** AI 视觉理解能力已经可以识别图片中的版式结构（哪块是照片、哪块是标题、比例多少），结合画布编辑器，就能把"看一张图 → 拆出版式 → 新病例填进去 → 导出"这个流程自动化。核心理念：把时间留给临床，让病例更好呈现。
### 三、Demo 体验地址
体验地址：https://helpful-banoffee-5b85b5.netlify.app/
打开即可体验完整功能：浏览预设模板库、选择模板进入编辑器、上传图片到槽位、编辑文字、画布拖拽缩放、高清导出。
### 四、TRAE 实践过程
本项目全程使用 TRAE IDE 完成，以下是从产品定位到部署上线的完整开发历程：
**Step 1 · 产品定位与差异化分析**
与 TRAE 深度对话分析产品定位。核心洞察是：医生的痛点不是"不会设计"，而是"做过的版式没法复用"。传统工具（PPT/PS）没有版式记忆功能，模板库（Canva）只提供固定模板——两者都无法沉淀医生自己的审美资产。最终确定差异化定位：**“版式记忆引擎”**，把医生欣赏的病例展示图（自己的或同行的）通过 AI 识别版式结构，转化为可长期复用的智能模板。
Session ID：2913064871265952:5b1aab4a331b79947e160e947517a7f1_6a53da623ab817e3596d3fbb.6a53da623ab817e3596d3fbe.6a53da623ab817e3596d3fbc:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/13 02:18:10)
**Step 2 · PRD 文档与 V1 范围定义**
通过 TRAE 对话完成了产品需求文档的迭代。确定了 V1 核心闭环：**上传参考图 → AI 识别版式 → 医生微调 → 保存模板 → 上传新病例图 → 编辑文字 → 导出**。明确了不做 AI 图片分类、多页 PPT、登录及历史记录等功能，先跑通最小可用闭环。同时完成了创意产品文档的生成（dentalcase-product-doc.html）。
Session ID：2913064871265952:4c43d17c803ddde074e73b2af1133acd_6a53da623ab817e3596d3fbb.6a5506423ab817e3596d4068.6a5506423ab817e3596d4066:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/13 23:37:38)
**Step 3 · 技术选型与项目骨架搭建**
与 TRAE 协作确定了技术栈：**React 18 + TypeScript + Vite 6 + Tailwind CSS + Fabric.js 6.4 + Dexie 4（IndexedDB）**。TRAE 协助完成了项目骨架搭建、核心数据模型设计（Slot/Template/Case 三层结构）、首页三入口卡片（创建病例 / 官方模板库 / 我的模板）、4 套预设模板（治疗前后对比、三视图、四宫格、全景+细节）以及画布基础展示功能。TypeScript 类型检查零错误，Vite 运行正常。
Session ID：2913064871265952:935601ad8d376d3673cab768f563dd66_6a551b1c3ab817e3596d4190.6a551d233ab817e3596d41af.6a551d233ab817e3596d41ad:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/14 01:15:15)
2913064871265952:b4da1a71f09e8480bbf76cb18ae70a77_6a551b1c3ab817e3596d4190.6a577e443ab817e3596d4af5.6a577e443ab817e3596d4af3:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/15 20:34:12)
**Step 4 · AI 版式识别引擎开发**
这是项目最核心的技术模块。与 TRAE 协作完成了以下工作：
- 设计 AI prompt 工程方案，要求 AI 返回标准化的版式 JSON（canvas 尺寸 + slots 槽位坐标）
- 实现 Cloudflare Worker 代理层，支持 **MiniMax API** 进行版式识别
- 增强识别能力：不仅识别图片和文字区域的位置，还要**还原布局结构**（上下/左右排列、网格结构、间距比例）和**图文绑定关系**（文字标签与相邻图片的归属关系）
- 部署 V2 Worker 到 Cloudflare（https://dentalcase-ai-v2.1968310453.workers.dev），经历了 API Key 配置、Wrangler 版本更新、模型名兼容性修复等调试过程
- 前端 AIImport 页面完整交互流程：上传 → 预览 → 分析中 → 结果展示（图片区/文字区数量）→ 保存到"我的模板"
通过 TRAE 对话实现了基于 Fabric.js 的可视化编辑器：
- 根据模板 slots 自动渲染占位区域，自适应缩放
- 图片上传：点击槽位触发文件选择，支持拖拽上传，FileReader 转 base64 渲染到画布
- 图片编辑：Fabric.js 原生支持拖拽定位、缩放控制点适配
- 文字编辑：右侧工具面板实时输入，同步更新画布 FabricText
- 导出功能：Fabric canvas.toDataURL，支持 PNG/JPG 双格式，2 倍分辨率 multiplier
- 病例保存：IndexedDB 持久化存储 slotData（图片 base64 + 文字内容）
Session ID：2913064871265952:cb660d6188473bbb9df03407bbe9c284_6a577b5f3ab817e3596d4a47.6a577b5f3ab817e3596d4a4a.6a577b5f3ab817e3596d4a48:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/15 20:21:51)
2913064871265952:85fc12af97f73c2f81bceca05d342cae_6a577b5f3ab817e3596d4a47.6a5780323ab817e3596d4b59.6a5780323ab817e3596d4b57:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/15 20:42:26)
**Step 6 · 部署上线**
使用 TRAE 协助完成部署：
- 前端通过 Netlify 拖拽部署（dentalcase-v2/dist 文件夹）
- 最终线上地址：https://helpful-banoffee-5b85b5.netlify.app/
- Git 提交保存完整版本（ecac3fa，24 个文件 7840 行代码）
Session ID：2913064871265952:5653892868feeb1d15c23415ce4949af_6a577b5f3ab817e3596d4a47.6a57a2153ab817e3596d4e7c.6a57a2153ab817e3596d4e7a:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/15 23:07:01)
另外，报名也是在teae的协助下完成的。感谢
2913064871265952:c42074a3300001e9753d8c18370a2d96_6a55d4f13ab817e3596d4243.6a55d4f13ab817e3596d4246.6a55d4f13ab817e3596d4244:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/14 14:19:29)
-–
## 附件说明
- 可选上传产品介绍文档：dentalcase-product-doc-v2.html
-–
## 附：已通过的报名帖链接