本地配置 API Key
前端使用 localStorage 保存用户填写的 Key，并在每次请求时随 FormData 提交；后端只用于转发请求，不把 Key 写入文件。
Overview
项目概览
项目由 FastAPI 后端和原生 HTML/CSS/JavaScript 前端组成。后端负责接收表单请求、调用 New API 图片接口、处理返回的 b64_json 或图片 URL 并落盘保存；前端负责 API Key 本地保存、生成/编辑表单、尺寸与质量参数配置、图片预览、下载、历史记录和 IndexedDB 缓存。该项目借助 AI 编程工具完成原型开发、调试和迭代，重点展示 AI 应用工具平台的端到端实现能力。
System Flow
系统流程
文本生成图片
/api/generate 接收 prompt、尺寸、画质、格式和审核级别，组装 images/generations 请求并要求返回 b64_json。
上传图片编辑
/api/edit 接收多张上传图片，使用 multipart 表单提交到 images/edits，支持同样的尺寸、画质、格式和审核参数。
后端保存结果
_save_image_item 同时兼容 b64_json 与 URL 两种返回形式，使用 UUID 文件名保存到 generated-images/。
前端预览与下载
生成结果显示为图片卡片，并提供保存和发送到编辑功能；下载时从 IndexedDB 取 Blob，再创建临时 Object URL。
历史记录与缓存
元数据保存在 imggen_history，图片 Blob 保存在 imggen_cache；历史记录支持选择、保存、编辑、删除和清空。
Modules
模块拆解
后端接口层
基于 FastAPI 暴露首页、生成和编辑接口，通过 httpx 异步调用中转站图片 API，并把错误信息转换为前端可读响应。
参数配置层
前端支持尺寸自动、按比例和自定义宽高三种模式，并配置画质、审核级别和输出格式，提升工具可用性。
上传与编辑层
编辑模式支持文件上传、拖拽、粘贴图片、多图预览和删除，最后通过 FormData 一并提交给后端。
结果缓存层
前端在收到图片 URL 后只拉取一次 Blob，随后写入 IndexedDB；历史列表渲染时优先读取本地缓存。
历史管理层
桌面端提供右侧历史面板，移动端提供底部历史条，支持批量选择、保存、发送到编辑、删除和清空。
异常处理层
后端提取上游 API 错误信息，前端展示加载态和错误框；缓存丢失时也会给出明确提示。
Code Highlights
代码实现亮点
这一部分从 app.py 与 static/index.html 中提炼，展示接口、缓存、历史记录和参数处理的具体实现。
后端接口转发
生成：@app.post('/api/generate') payload = model / prompt / response_format 可选参数：size / quality / moderation 请求地址：API_BASE + '/images/generations' 编辑：@app.post('/api/edit') 上传字段：image[] 请求地址：API_BASE + '/images/edits'
图片落盘与静态服务
保存入口：_save_image_item(item, fmt) 文件名：uuid.uuid4().hex + fmt 目录：generated-images/ 兼容返回：b64_json 或 url 暴露路径：app.mount('/images') 返回给前端：{ filename, url }
前端状态与缓存
Key：localStorage['imggen_key'] 历史元数据：localStorage['imggen_history'] 图片缓存库：indexedDB.open('imggen_cache', 1) 写入缓存：dbPut(filename, blob) 读取下载：dbGet(filename) + Object URL 上限清理：history.length > 100
交互与容错
尺寸转换：computeApiSize(form) 比例模式映射到 1024x1024 / 1536x1024 / 1024x1536 提交前校验：prompt / apiKey / editFiles 上游错误：_api_error(response) 缓存丢失：显示 本地缓存不存在 结果复用：sendToEdit(filename)
Implementation
关键实现内容
- 从 Demo 到工具 项目不只调用一次接口，而是围绕真实使用流程补齐了参数配置、结果展示、下载、历史记录和图片复用。
- 前后端职责清晰 后端处理接口转发和文件落盘，前端处理交互状态、本地缓存和历史记录，便于单独调试。
- 本地缓存策略 图片 Blob 放入 IndexedDB，历史记录只保存轻量元数据，兼顾本地预览、下载和浏览器存储压力。
- 可解释的错误路径 后端把上游接口错误透传给前端，前端提供加载态、错误态和缓存缺失提示，便于排查 Key、余额、模型或网络问题。
Result
项目结果与价值
项目已经形成可运行的 AIGC 图片生成与编辑工作台，覆盖 API Key 配置、文本生图、图片编辑、参数选择、结果保存、历史记录和本地缓存等完整闭环。
它适合作为 AI 应用开发方向的个人项目展示：既能体现模型接口调用，也能体现简单后端服务、原生前端交互、本地存储和错误处理等工程化能力。
当前上传截图包含部分 API Key 状态信息，暂未直接放入公开项目页；后续可在遮挡敏感信息后补充界面截图或演示视频。