夜雨聆风传统平面户型图纸枯燥难懂，购房者很难凭空脑补居家实景，房产博主做房源短视频也缺少直观吸睛素材；结合自身 AI 编程与摄影功底，我便着手研发这款 3D 户型生成工具，一键把生硬平面户型图转化为带软装、光影的实景渲染户型，用 AI 技术赋能房产行业与新媒体内容创作，既帮房产从业者高效产出房源可视化素材、降低短视频制作成本，也让买房人直观预判房屋入住后的空间样貌。
上传户型平面图 + 选择风格参考 → AI 生成 3D 效果图 → 支持全视图生成、局部修图 → 历史记录回溯与复用。
原平面户型图
生成后的3D户型图
✨核心功能
1. 安全锁屏页面加载后需输入密码解锁支持自定义密码修改，以及 1~30 分钟无操作自动锁定2. 方案管理每个"方案"可独立配置：方案名称、API Key、接口网址、模型名称、Temperature、Max Tokens、平台网址支持有无 API 两种模式（无 API 时仅走平台生成通道）新增、修改、删除方案3. 风格图管理上传风格参考图片并命名，以画廊网格展示支持编辑、删除已有风格4. 户型图上传上传平面户型图作为生成输入实时预览上传的图片5. 提示词自定义生成提示词，可一键保存为默认值（方案级持久化）6. AI 生成效果图调用配置的 AI 接口，将户型图 + 风格图 + 提示词组合发送，生成 3D 效果图生成过程中显示计时和加载状态7. 平台生成（备用通道）当 API 不可用时，可"在新窗口打开平台"跳转到外部平台生成平台弹窗中可预览户型图/风格图、一键复制提示词，并将生成结果回传保存8. 生成结果处理结果展示在"图案绘制区"，点击可查看大图全视图生成：基于当前结果生成顶视/左视/右视/前视/后视/斜视/透视图局部修图：在 Canvas 上框选区域，输入修改描述后 AI 局部重绘生成结果详情：查看/复制原始 API 响应数据9. 生成历史右侧历史列表记录每次生成详情弹窗展示：耗时、时间、提示词、风格图、户型图、生成结果支持从历史中再次使用户型图，或基于历史结果再次绘制
🛠️ 技术栈
前端：HTML5 + CSS3 + Vanilla JS，零框架，单文件main.js承载全部业务逻辑后端：PHP，零框架，单一入口api.php，通过 ?action=xxx 路由分发各个接口存储：JSON 文件 + 文件系统，零数据库依赖，图片直存磁盘，JSON 建索引运行环境：phpstudy_pro（Apache + PHP），Windows 本地集成环境图片处理：PHP GD 库服务端动态生成等比缩略图，以 MD5 路径做缓存 key密码安全：bcrypt（password_hash）哈希存储，永不明文一句话：纯原生单页应用，无框架、无数据库、无构建工具，极致轻量。
💡 开发故事
这是我使用VibeCoding AI编程开发的第二个完整项目。传统平面户型图纸枯燥难懂，购房者很难凭空脑补居家实景，房产博主做房源短视频也缺少直观吸睛素材；结合自身 AI 编程与摄影功底，我便着手研发这款 3D 户型生成工具，一键把生硬平面户型图转化为带软装、光影的实景渲染户型。
🤝 欢迎交流
- 如果你也想用AI进行编程- 如果你有好的功能想法，继续完善这个项目- 如果你认为这个项目有应用前景
