这是一个基于GPT-Image2模型构建的AI图像生成单页应用。它支持自定义提示词、图像比例、数量等参数,提供灵感词库与历史记录管理。具备完整的异步任务处理、进度追踪与响应式交互设计,API密钥与生成历史均支持本地持久化,为用户提供高效便捷的图像创作体验。
该HTML源码是一个基于gpt-image2模型的AI图像生成单页应用,核心功能特点如下:
- 智能生成体系
- 支持多参数配置:可自定义提示词、输出比例(9:16/3:4/1:1/16:9/21:9五种预设)、生成数量(1/2/4张)、参考图像URL及模型版本(默认推荐image2 4K)。
- 灵感标签库:内置15条精选提示词,支持随机刷新与一键填充,降低用户创作门槛。
- 动态交互体验
- 实时进度追踪:提交任务后展示动态进度条与状态标识(提交中/生成中/完成/失败),支持任务取消。
- 生成结果操作:每张图片提供下载、复制链接、独立查看功能,结果卡片支持悬停动画反馈。
- API Key管理:支持本地持久化存储,输入时自动保存,提供明文/密文切换功能。
- 数据管理模块
- 生成历史记录:左侧边栏展示最多20条历史记录,支持点击复用参数与清空操作。
- 本地存储集成:历史记录与API Key均通过localStorage持久化,跨会话保持用户数据。
- 用户友好设计
- 响应式布局:适配移动端与桌面端,关键操作(如生成按钮、历史记录)在移动端优化尺寸与间距。
- 状态反馈系统:通过Toast通知实时反馈操作结果(成功/失败/取消等),配合动态图标增强交互反馈。
- 参数可视化:比例选择采用卡片式交互,当前选中项高亮显示,直观易操作。
- 技术架构特点
- 异步生成机制:采用异步API提交任务,通过轮询查询任务状态,实现非阻塞生成流程。
- 错误处理完善:网络错误、API Key无效、生成失败等场景均有明确提示与恢复路径。
- 模块化渲染:提示词库、比例按钮、历史记录均通过JavaScript动态生成,便于后续扩展维护。
该源码完整实现了从参数配置到结果管理的全流程AI生图功能,适合开发者快速搭建自有生图平台或进行二次开发扩展。


