一个纯前端的 Grok 图片生成画廊页面，基于 HTML + CSS + JavaScript 实现。
它支持并发发起图片生成请求、流式接收同一次请求返回的多张图片、自动持续生成、单张下载、全部下载，以及在浏览器本地保存服务端配置，适合直接发布到 GitHub 作为静态项目使用。
- 纯静态页面，无需前端构建工具
- 支持 Grok 图片模型切换
- 支持并发请求生成
- 支持流式响应解析
- 单次请求可展示服务端返回的多张图片
- 自动模式持续生成
- 单张下载
- 右上角全部下载
- API Base URL 和 API Key 本地保存到浏览器
- 不再在代码中硬编码服务端地址和密钥
.
├─ index.html
├─ style.css
├─ app.js
├─ start-gallery.cmd
└─ README.md
项目根目录提供了启动脚本：
start-gallery.cmd这个脚本会：
- 切换 Windows 控制台到 UTF-8 编码
- 检查本地
4173端口是否已经有 HTTP 服务 - 如果没有，则自动启动 Python HTTP Server
- 自动打开浏览器访问：
http://127.0.0.1:4173/index.html
不要直接双击 index.html 打开页面，应该通过 HTTP 服务访问。
如果本机安装了 Python，可以在项目目录执行：
py -m http.server 4173或者：
python -m http.server 4173然后在浏览器打开：
http://127.0.0.1:4173/index.html
页面左侧顶部有“服务配置”区域，需要填写：
API Base URLAPI Key
点击“保存配置”后，配置会保存到当前浏览器本地存储。
说明：
- 配置不会写入仓库文件
- 配置不会自动同步到其他浏览器或其他设备
- 刷新页面后会自动恢复已保存配置
填写提示词后，点击“开始生成”即可发起请求。
参数说明：
模型：选择使用的图片模型尺寸：传给服务端的生成尺寸并发请求：一次同时发起多少个生成请求
注意：
- 一个请求可能返回 1 张、2 张或更多图片
- 页面最终展示数量，以服务端实际返回结果为准
打开“持续生成”后，页面会反复执行与“开始生成”相同的逻辑。
区别只有一点：
- “开始生成”执行一次
- “持续生成”会在当前批次结束后自动继续下一批
- 每张图片卡片支持单独下载
- 右上角“全部下载”会对当前页面已显示的所有图片逐张触发下载
这个项目是纯静态站点，可以直接发布到：
- GitHub Pages
- Vercel
- Netlify
- Nginx 静态目录
- 任意对象存储静态托管
前端页面和图片接口通常不在同一个域名下，服务端需要正确配置 CORS。
如果你把页面发布到 GitHub Pages，页面通常是 HTTPS。
这时如果 API Base URL 填的是 HTTP，浏览器可能会因为混合内容策略阻止请求。
建议：
- GitHub Pages 前端用 HTTPS
- 图片 API 也提供 HTTPS 地址
当前实现已经改为：
- 不在
app.js中硬编码API Base URL - 不在
app.js中硬编码API Key - 用户自行在页面填写并保存到本地
这更适合公开仓库发布。
前端已兼容以下情况：
- 普通 JSON 返回单张图片地址
- 流式 SSE 返回多张图片
- Markdown 图片格式，例如：
前端不再假设“一个请求只对应一张图”。
现在的逻辑是：
- 按并发数发请求
- 每个请求解析出服务端实际返回的所有图片
- 按实际图片数插入卡片
- 无打包依赖
- 无 Node.js 构建步骤
- 无硬编码服务端密钥
- 可直接静态托管
- 使用门槛低
- 支持 ZIP 打包全部下载
- 支持历史记录持久化
- 支持导出/导入本地配置
- 支持多套服务端配置切换
- 支持更完整的错误提示和重试机制
如需开源发布，建议补充一个 LICENSE 文件。