feat: support reference images via /images/edits

index.html

@@ -113,6 +113,59 @@
 			.status.error {
 				color: var(--danger);
 			}
+			.ref-preview {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 8px;
+				margin-top: 8px;
+			}
+			.ref-preview:empty {
+				display: none;
+			}
+			.ref-preview .thumb {
+				position: relative;
+				width: 64px;
+				height: 64px;
+				border-radius: 8px;
+				overflow: hidden;
+				border: 1px solid var(--border);
+			}
+			.ref-preview .thumb img {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+				display: block;
+			}
+			.ref-preview .thumb .remove {
+				position: absolute;
+				top: 2px;
+				right: 2px;
+				width: 18px;
+				height: 18px;
+				padding: 0;
+				border: 0;
+				border-radius: 50%;
+				background: rgba(0, 0, 0, 0.7);
+				color: white;
+				font-size: 12px;
+				line-height: 18px;
+				cursor: pointer;
+				font-weight: bold;
+			}
+			.hint {
+				display: block;
+				margin-top: 6px;
+				color: var(--muted);
+				font-size: 12px;
+			}
+			.hint code {
+				background: rgba(255, 255, 255, 0.06);
+				padding: 1px 4px;
+				border-radius: 4px;
+			}
+			input[type="file"] {
+				padding: 8px;
+			}
 			.result {
 				margin-top: 24px;
 				display: grid;
@@ -158,16 +211,14 @@
 					</div>
 					<div class="row">
 						<label for="model">Model</label>
-						<input id="model" type="text" placeholder="dall-e-3 / gpt-image-1 / flux-..." />
+						<input id="model" type="text" placeholder="gpt-image-2" />
 					</div>
 					<div class="row">
 						<label for="size">Size</label>
 						<select id="size">
-							<option value="1024x1024">1024x1024</option>
-							<option value="512x512">512x512</option>
-							<option value="768x768">768x768</option>
-							<option value="1024x1792">1024x1792 (portrait)</option>
-							<option value="1792x1024">1792x1024 (landscape)</option>
+							<option value="1024x1024">1024x1024 (square)</option>
+							<option value="1536x1024">1536x1024 (landscape)</option>
+							<option value="1024x1536">1024x1536 (portrait)</option>
 						</select>
 					</div>
 				</div>
@@ -178,6 +229,15 @@
 						placeholder="A futuristic cityscape at sunset, cinematic lighting"
 					></textarea>
 				</div>
+				<div class="row">
+					<label for="refImages">Reference images (optional)</label>
+					<input id="refImages" type="file" accept="image/*" multiple />
+					<div id="refPreview" class="ref-preview"></div>
+					<small class="hint">
+						Provide one or more references to keep style consistent. When set,
+						the request is sent to <code>/v1/images/edits</code> (gpt-image series only).
+					</small>
+				</div>
 				<div class="actions">
 					<button id="generate">Generate</button>
 					<span id="status" class="status"></span>
@@ -207,6 +267,49 @@
 				});
 			}
 
+			const refImages = [];
+
+			function renderRefPreview() {
+				const c = $("refPreview");
+				c.innerHTML = "";
+				refImages.forEach((src, i) => {
+					const thumb = document.createElement("div");
+					thumb.className = "thumb";
+					const img = document.createElement("img");
+					img.src = src;
+					img.alt = "reference " + (i + 1);
+					const btn = document.createElement("button");
+					btn.type = "button";
+					btn.className = "remove";
+					btn.textContent = "\u00d7";
+					btn.title = "Remove";
+					btn.onclick = () => {
+						refImages.splice(i, 1);
+						renderRefPreview();
+					};
+					thumb.appendChild(img);
+					thumb.appendChild(btn);
+					c.appendChild(thumb);
+				});
+			}
+
+			$("refImages").addEventListener("change", async (e) => {
+				const input = e.target;
+				const files = Array.from(input.files || []);
+				for (const file of files) {
+					if (!file.type.startsWith("image/")) continue;
+					const dataUrl = await new Promise((resolve, reject) => {
+						const r = new FileReader();
+						r.onload = () => resolve(r.result);
+						r.onerror = () => reject(r.error);
+						r.readAsDataURL(file);
+					});
+					refImages.push(dataUrl);
+				}
+				renderRefPreview();
+				input.value = "";
+			});
+
 			$("generate").addEventListener("click", async () => {
 				const btn = $("generate");
 				const status = $("status");
@@ -218,6 +321,7 @@
 					model: $("model").value.trim(),
 					size: $("size").value,
 					prompt: $("prompt").value.trim(),
+					referenceImages: refImages,
 				};
 
 				if (!body.baseURL || !body.apiKey || !body.model || !body.prompt) {