feat: add 16:9 and 2K size presets for gpt-image-2

- Add 1536x864, 864x1536, 2048x1152, 1152x2048, 2560x1440 to the size
  dropdown. 2560x1440 is the OpenAI cookbook's recommended upper
  widescreen reliability boundary
- Note that sizes above 2560x1440 are experimental and the max-edge
  rule is strictly <3840 (3840x2160 is out, use 3824x2144 instead)
- 1920x1080 is invalid because 1080 isn't a multiple of 16 — captured
  in AGENTS.md alongside the full constraint set so future agents stop
  proposing it
This commit is contained in:
2026-05-19 00:24:13 +08:00
parent d5bbc14c8d
commit 9e6b4dc7fa
2 changed files with 20 additions and 3 deletions
+8
View File
@@ -91,6 +91,14 @@ Three files do everything:
- Targets the **gpt-image series only** (gpt-image-2 default). Do not - Targets the **gpt-image series only** (gpt-image-2 default). Do not
reintroduce DALL·E-only fields like `response_format` — gpt-image reintroduce DALL·E-only fields like `response_format` — gpt-image
always returns `b64_json`. always returns `b64_json`.
- `gpt-image-2` size constraints (per the OpenAI cookbook): both edges
multiple of 16, max edge **< 3840**, long/short ≤ 3:1, total pixels
in 655,3608,294,400, `auto` not supported. Exact 16:9 requires
`16k × 9k` with `k` a multiple of 16 (so `1280×720`, `1536×864`,
`2048×1152`, `2560×1440`, …). Sizes above 2560×1440 are
experimental — the popular 4K target `3840×2160` violates the
`< 3840` rule, round down to `3824×2144` if you need it. Common
misses: `1920×1080` is **not valid** (1080 % 16 ≠ 0).
- `client.ts` — browser entry, loaded via `<script type="module" - `client.ts` — browser entry, loaded via `<script type="module"
src="./client.ts">` in `index.html`. Bun's bundler resolves the import, src="./client.ts">` in `index.html`. Bun's bundler resolves the import,
inlines `@microsoft/fetch-event-source`, and serves the bundle from inlines `@microsoft/fetch-event-source`, and serves the bundle from
+12 -3
View File
@@ -199,10 +199,19 @@
<div class="row"> <div class="row">
<label for="size">Size</label> <label for="size">Size</label>
<select id="size"> <select id="size">
<option value="1024x1024">1024x1024 (square)</option> <option value="1024x1024">1024x1024 (1:1 square)</option>
<option value="1536x1024">1536x1024 (landscape)</option> <option value="1536x1024">1536x1024 (3:2 landscape)</option>
<option value="1024x1536">1024x1536 (portrait)</option> <option value="1024x1536">1024x1536 (2:3 portrait)</option>
<option value="1536x864">1536x864 (16:9 landscape)</option>
<option value="864x1536">864x1536 (9:16 portrait)</option>
<option value="2048x1152">2048x1152 (16:9 2K landscape)</option>
<option value="1152x2048">1152x2048 (9:16 2K portrait)</option>
<option value="2560x1440">2560x1440 (16:9 QHD — experimental boundary)</option>
</select> </select>
<small class="hint">
Sizes above 2560x1440 are experimental for <code>gpt-image-2</code>.
Both edges must be a multiple of 16; max edge &lt; 3840.
</small>
</div> </div>
<div class="row"> <div class="row">
<label for="prompt">Prompt</label> <label for="prompt">Prompt</label>