ima2-gen 1.0.0 → 1.0.1

package/README.md

@@ -1,14 +1,22 @@
 # ima2-gen
 
+[![npm version](https://img.shields.io/npm/v/ima2-gen)](https://www.npmjs.com/package/ima2-gen)
+
 Minimal CLI + web UI for OpenAI `gpt-image-2` image generation.
 
-## Quick Start
+![ima2-gen screenshot](assets/screenshot.png)
+
+## Install & Run
 
 ```bash
-git clone https://github.com/lidge-jun/ima2-gen.git
-cd ima2-gen
-npm install
-npm start
+npx ima2-gen serve
+```
+
+Or install globally:
+
+```bash
+npm install -g ima2-gen
+ima2 serve
 ```
 
 First run prompts you to choose:
@@ -23,16 +31,9 @@ Then opens `http://localhost:3333`.
 ## CLI
 
 ```bash
-npx ima2 serve    # start server (auto-setup on first run)
-npx ima2 setup    # reconfigure auth
-npx ima2 reset    # clear saved config
-```
-
-Or install globally:
-
-```bash
-npm install -g ima2-gen
-ima2 serve
+ima2 serve    # start server (auto-setup on first run)
+ima2 setup    # reconfigure auth
+ima2 reset    # clear saved config
 ```
 
 ## Features
@@ -44,7 +45,8 @@ ima2 serve
 - **Size** — presets (1024 ~ 4K) + custom (any 16px-aligned ratio)
 - **Format** — PNG / JPEG / WebP
 - **Moderation** — auto (standard) / low (less restrictive)
-- **History** — session thumbnail strip
+- **Prompt display** — shown under image, click to copy
+- **History** — persisted across page refreshes (localStorage)
 - **Download / Copy** — save or clipboard
 
 ## Architecture
@@ -75,3 +77,7 @@ OAUTH_PORT=10531
 | High    | $0.211    | $0.165    | $0.165    |
 
 OAuth mode is free (uses your ChatGPT Plus/Pro subscription).
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ima2-gen",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "GPT Image 2 generator with OAuth & API key support",
   "type": "module",
   "bin": {
@@ -16,7 +16,13 @@
     "release:minor": "npm version minor && npm publish && git push origin main --tags",
     "release:major": "npm version major && npm publish && git push origin main --tags"
   },
-  "keywords": ["openai", "gpt-image-2", "image-generation", "oauth", "cli"],
+  "keywords": [
+    "openai",
+    "gpt-image-2",
+    "image-generation",
+    "oauth",
+    "cli"
+  ],
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -25,6 +31,7 @@
   "files": [
     "bin/",
     "public/",
+    "assets/",
     "server.js",
     ".env.example",
     "README.md"

package/public/index.html

@@ -581,10 +581,7 @@
 
     <main class="canvas">
       <div class="progress-bar" id="progressBar"></div>
-      <div class="canvas-empty" id="emptyState">
-        GPT-IMAGE-2
-        <span>Enter a prompt and hit generate</span>
-      </div>
+      <div class="canvas-empty" id="emptyState" style="display:none"></div>
       <div class="result-container" id="resultContainer">
         <img class="result-img" id="resultImg">
         <div class="result-prompt" id="resultPrompt"></div>
@@ -807,7 +804,6 @@
       btn.classList.add("loading");
       btn.textContent = "Generating...";
       $("#progressBar").classList.add("active");
-      $("#emptyState").style.display = "none";
 
       try {
         const isEdit = state.mode === "i2i" && state.sourceImageB64;
@@ -838,7 +834,6 @@
         toast(`Generated in ${data.elapsed}s`);
       } catch (err) {
         toast(err.message, true);
-        $("#emptyState").style.display = "";
       } finally {
         state.generating = false;
         btn.disabled = false;

package/server.js

@@ -41,8 +41,12 @@ async function generateViaOAuth(prompt, quality, size) {
     headers: { "Content-Type": "application/json", Accept: "text/event-stream" },
     body: JSON.stringify({
       model: "gpt-5.4",
-      input: [{ role: "user", content: prompt }],
+      input: [
+        { role: "developer", content: "You are an image generator. Always use the image_generation tool to create the image. Never respond with text only." },
+        { role: "user", content: `Generate an image: ${prompt}` },
+      ],
       tools: [{ type: "image_generation", quality, size }],
+      tool_choice: "required",
       stream: true,
     }),
   });
@@ -241,32 +245,120 @@ app.post("/api/generate", async (req, res) => {
   }
 });
 
+// ── OAuth edit: send image as input to Responses API ──
+async function editViaOAuth(prompt, imageB64, quality, size) {
+  const res = await fetch(`${OAUTH_URL}/v1/responses`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json", Accept: "text/event-stream" },
+    body: JSON.stringify({
+      model: "gpt-5.4",
+      input: [
+        { role: "developer", content: "You are an image editor. Always use the image_generation tool to edit the provided image. Never respond with text only." },
+        {
+          role: "user",
+          content: [
+            { type: "input_image", image_url: `data:image/png;base64,${imageB64}` },
+            { type: "input_text", text: `Edit this image: ${prompt}` },
+          ],
+        },
+      ],
+      tools: [{ type: "image_generation", quality, size }],
+      tool_choice: "required",
+      stream: true,
+    }),
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    let msg;
+    try { msg = JSON.parse(text).error?.message; } catch {}
+    throw new Error(msg || `OAuth edit returned ${res.status}`);
+  }
+
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+  let resultB64 = null;
+  let usage = null;
+
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    buffer += decoder.decode(value, { stream: true });
+
+    let boundary;
+    while ((boundary = buffer.indexOf("\n\n")) !== -1) {
+      const block = buffer.slice(0, boundary);
+      buffer = buffer.slice(boundary + 2);
+
+      let eventData = "";
+      for (const line of block.split("\n")) {
+        if (line.startsWith("data: ")) eventData += line.slice(6);
+      }
+      if (!eventData || eventData === "[DONE]") continue;
+
+      try {
+        const data = JSON.parse(eventData);
+        if (data.type === "response.output_item.done" && data.item?.type === "image_generation_call" && data.item.result) {
+          resultB64 = data.item.result;
+          console.log("[oauth-edit] got image, b64 length:", resultB64.length);
+        }
+        if (data.type === "response.completed") usage = data.response?.usage || null;
+        if (data.type === "error") throw new Error(data.error?.message || JSON.stringify(data));
+      } catch (e) {
+        if (e.message && !e.message.startsWith("Unexpected")) throw e;
+      }
+    }
+  }
+
+  if (resultB64) return { b64: resultB64, usage };
+  throw new Error("No image data received from OAuth edit");
+}
+
 // ── Edit image (inpainting) ──
 app.post("/api/edit", async (req, res) => {
   try {
-    const { prompt, image: imageB64, mask: maskB64, quality = "low", size = "1024x1024", moderation = "low" } =
+    const { prompt, image: imageB64, mask: maskB64, quality = "low", size = "1024x1024", moderation = "low", provider = "auto" } =
       req.body;
 
     if (!prompt || !imageB64)
       return res.status(400).json({ error: "Prompt and image are required" });
-    if (!openai)
-      return res.status(400).json({ error: "Image editing requires an API key" });
 
+    const useOAuth = provider === "oauth" || (provider === "auto" && !HAS_API_KEY);
+    console.log(`[edit] provider=${useOAuth ? "oauth" : "api"} quality=${quality} size=${size}`);
     const startTime = Date.now();
 
-    const imageFile = new File([Buffer.from(imageB64, "base64")], "image.png", { type: "image/png" });
-    const params = { model: "gpt-image-2", prompt, image: imageFile, quality, size, moderation };
-    if (maskB64) {
-      params.mask = new File([Buffer.from(maskB64, "base64")], "mask.png", { type: "image/png" });
+    let resultB64, usage;
+
+    if (useOAuth) {
+      const result = await editViaOAuth(prompt, imageB64, quality, size);
+      resultB64 = result.b64;
+      usage = result.usage;
+    } else if (openai) {
+      const imageFile = new File([Buffer.from(imageB64, "base64")], "image.png", { type: "image/png" });
+      const params = { model: "gpt-image-2", prompt, image: imageFile, quality, size, moderation };
+      if (maskB64) {
+        params.mask = new File([Buffer.from(maskB64, "base64")], "mask.png", { type: "image/png" });
+      }
+      const response = await openai.images.edit(params);
+      resultB64 = response.data[0].b64_json;
+      usage = response.usage;
+    } else {
+      return res.status(400).json({ error: "No API key configured and OAuth not selected" });
     }
 
-    const response = await openai.images.edit(params);
     const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
 
+    await mkdir(join(__dirname, "generated"), { recursive: true });
+    const filename = `${Date.now()}.png`;
+    await writeFile(join(__dirname, "generated", filename), Buffer.from(resultB64, "base64"));
+
     res.json({
-      image: `data:image/png;base64,${response.data[0].b64_json}`,
+      image: `data:image/png;base64,${resultB64}`,
       elapsed,
-      usage: response.usage,
+      filename,
+      usage,
+      provider: useOAuth ? "oauth" : "api",
     });
   } catch (err) {
     console.error("Edit error:", err.message);