sns-auto-builder 1.0.7 → 1.0.9

package/CLAUDE.md

@@ -48,6 +48,11 @@ Phase 3c (ChatGPT 웹 — 배경만 뽑고 한글은 HTML 로 얹기):
   # 그다음 3a 의 HTML 단계를 이어서 수행
 ```
 
+**크롬이 떴는데 프롬프트를 입력하지 않으면** 레퍼런스 첨부에서 막힌 것이다. ChatGPT 가
+DOM 을 바꾸면 생긴다. `logs/app.log` 의 `첨부 실패` 줄에 그때 화면의 file input 목록이
+남으니 그걸 보고 `SELECTORS` 를 고쳐라. **임의로 레퍼런스를 빼고 다시 돌리지 마라** —
+레퍼런스 없이 만들면 디자인이 달라진다.
+
 `chatgpt-image-gen.js` 는 로그인된 Chrome 프로필(`.chrome-profile`)로 chatgpt.com 을 몰아
 프롬프트를 한 장씩 넣고 이미지를 받아 1080×1350 의 2배로 크롭해 저장한다.
 참고 이미지가 있으면 `--ref <경로>` 로 첫 장에 첨부해 그 디자인을 따라가게 한다.

package/README.md

@@ -173,6 +173,30 @@ Chrome 은 인스턴스를 하나만 허용하므로 빌더가 영영 포트를
 로그는 **버튼과 무관하게 항상 자동으로 쌓입니다** — 버튼은 내려받는 손잡이일 뿐입니다.
 버전 · OS · 실행 기록 · 오류와 발생 위치가 담기고, **브랜드 값 내용 · 토큰 · 쿠키는 안 담깁니다.**
 
+#### 크롬 자동화가 멈출 때
+
+ChatGPT 는 화면 구조를 예고 없이 바꿉니다. 그러면 **크롬은 뜨는데 프롬프트를 입력하지 않는**
+모습이 됩니다 (첨부 단계에서 썸네일을 2분 기다리다 실패). 이때 로그에 이런 줄이 남습니다:
+
+```
+[…] 첨부 실패 1/2 {"used":"input[type=\"file\"][accept*=\"image\"]","formImgs":0,"forms":1,
+  "composer":true,"fileInputs":[{"testid":null,"accept":null,"inForm":true},
+  {"testid":"upload-photos-input","accept":"image/*","inForm":false}, …]}
+```
+
+`fileInputs` 가 그 순간 화면에 있던 파일 입력의 목록입니다. 어느 것을 썼는지(`used`)와
+대조하면 셀렉터를 어떻게 고쳐야 하는지 바로 나옵니다. 실제로 이 목록이 있었다면
+`accept` 없는 input 을 고르고 있다는 걸 즉시 알 수 있었습니다.
+→ [scripts/chatgpt-image-gen.js](scripts/chatgpt-image-gen.js) 의 `SELECTORS`
+
+#### 크롬 포트
+
+빌더는 CDP 포트 **19222** 를 씁니다 (`SNS_BUILDER_CDP_PORT` 로 변경 가능).
+관례 포트인 9222 를 쓰면 사용자 본인의 크롬이나 chrome-devtools MCP 와 겹치는데,
+**겹쳐도 에러가 안 납니다** — 한쪽이 `::1:9222`, 다른 쪽이 `127.0.0.1:9222` 를 잡고
+둘 다 정상으로 보입니다. 그 상태에서 빌더는 조용히 **남의 브라우저를 조종합니다.**
+`bin/sns-auto-builder.mjs` 와 `scripts/chatgpt-image-gen.js` 의 `CDP_PORT` 는 항상 같아야 합니다.
+
 ---
 
 ## 구조

package/index.html

@@ -722,7 +722,7 @@ function renderIg({ dir, slides }) {
   sync();
 }
 
-function renderSlides({ dir, slides, canRegen }) {
+function renderSlides({ dir, slides, canRegen, expected }) {
   const host = $('slides');
   renderIg({ dir, slides });
   host.textContent = '';
@@ -744,8 +744,21 @@ function renderSlides({ dir, slides, canRegen }) {
     if (canRegen) cell.append(regenButton({ dir, f, img, cell }));
     host.append(cell);
   });
-  $('outPath').textContent = `${slides.length}장 · ${dir}/ — 슬라이드를 누르면 내려받습니다`
-    + (canRegen ? ' · 오타가 있으면 “다시 만들기”' : '');
+  // 장수가 모자란 채로 "완료"만 뜨면, 몇 번이 빠졌는지 모르고 그대로 쓰게 된다.
+  // 실제로 ChatGPT 가 3장만 만들었는데 4장인 것처럼 끝난 적이 있다.
+  const want = Number(expected) || 0;
+  const short = want && slides.length < want;
+  if (short) {
+    const got = new Set(slides.map((f) => Number(f.match(/\d+/)[0])));
+    const miss = [];
+    for (let i = 1; i <= want; i++) if (!got.has(i)) miss.push(i);
+    $('outPath').innerHTML = `<b style="color:#e0603a">${want}장 중 ${slides.length}장만 나왔습니다`
+      + ` — 빠진 장: ${miss.join(', ')}번</b><br>ChatGPT 가 그 장의 이미지를 안 준 것입니다.`
+      + ` 아래에서 다시 만들거나, 같은 주제로 한 번 더 실행하세요.`;
+  } else {
+    $('outPath').textContent = `${slides.length}장 · ${dir}/ — 슬라이드를 누르면 내려받습니다`
+      + (canRegen ? ' · 오타가 있으면 “다시 만들기”' : '');
+  }
   $('outPath').hidden = false;
   // 한 장씩 누르면 브라우저가 연속 다운로드를 막는다. zip 하나로 묶어 받는다.
   const zip = $('zipAll');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sns-auto-builder",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "인스타 카드뉴스 자동 제작 빌더. Claude Code + ChatGPT 웹을 그대로 써서 API 키 없이 돌아갑니다.",
   "type": "module",
   "bin": {

package/scripts/chatgpt-image-gen.js

@@ -26,7 +26,7 @@
  *          떠 있으면(예: chrome-devtools MCP) 프로필이 잠겨 실패한다. 그때는
  *   --browser-url http://127.0.0.1:19222  로 떠 있는 Chrome 에 붙어라.
  */
-import { readFileSync, writeFileSync, mkdirSync, existsSync, statSync } from 'node:fs';
+import { readFileSync, writeFileSync, mkdirSync, existsSync, statSync, appendFileSync } from 'node:fs';
 import { join, resolve, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { cropTo45 } from './openai-image-gen.js';
@@ -154,6 +154,34 @@ async function waitForComposer(page) {
   // 로그인이 풀렸으면 여기서 프롬프트 창이 안 뜬다 — 위 waitForSelector 가 던진다.
 }
 
+// 첨부가 실패했을 때 "그때 화면에 뭐가 있었는지" 를 남긴다.
+//
+// ChatGPT 는 DOM 을 예고 없이 바꾼다. 실제로 업로드 input 이 <form> 밖으로 옮겨진
+// 적이 있고, 그때 증상은 "크롬은 떴는데 프롬프트를 입력하지 않는다" 뿐이라 원인을
+// 찾는 데 오래 걸렸다. 다음에 또 바뀌면 이 스냅샷만 보면 된다.
+async function domSnapshot(page) {
+  return page.evaluate(() => ({
+    formImgs: document.querySelectorAll('form img').length,
+    forms: document.querySelectorAll('form').length,
+    composer: !!document.getElementById('prompt-textarea'),
+    // 값이 아니라 구조만 남긴다 — 로그에 개인 정보가 들어가면 안 된다.
+    fileInputs: [...document.querySelectorAll('input[type="file"]')].map((el) => ({
+      testid: el.dataset.testid || null,
+      accept: el.accept || null,
+      inForm: !!el.closest('form'),
+    })),
+  })).catch((e) => ({ error: e.message }));
+}
+
+// 워크스페이스의 logs/app.log 에 붙인다 — server.mjs 와 같은 파일, 같은 형식이라
+// 빌더 첫 화면의 로그 버튼으로 그대로 받아진다.
+function logDom(msg, data) {
+  try {
+    mkdirSync('logs', { recursive: true });
+    appendFileSync('logs/app.log', `[${new Date().toISOString()}] ${msg} ${JSON.stringify(data)}\n`);
+  } catch { /* 로그 실패가 생성을 막을 이유는 없다 */ }
+}
+
 // 레퍼런스 첨부. **실패하면 던진다.**
 //
 // 예전에는 썸네일 확인이 실패해도 경고만 찍고 그냥 보냈다. 그러면 레퍼런스 없이 만들어진
@@ -167,36 +195,43 @@ async function attachRef(page, refPaths) {
   // form 밖으로 옮기면서 form 안에는 accept 없는 다른 input 만 남았다. 거기에
   // 파일을 넣으면 아무 일도 안 일어나고, 썸네일을 2분 기다리다 실패한다
   // (증상: "크롬은 떴는데 프롬프트를 입력하지 않는다").
+  const SELECTORS = [
+    'input[type="file"][data-testid="upload-photos-input"]', // 현재 ChatGPT
+    'input[type="file"][accept*="image"]',                   // testid 가 바뀌어도 살아남는 조건
+    'input[type="file"]',
+  ];
   const pickInput = async () => {
-    for (const sel of [
-      'input[type="file"][data-testid="upload-photos-input"]', // 현재 ChatGPT
-      'input[type="file"][accept*="image"]',                   // testid 가 바뀌어도 살아남는 조건
-      'input[type="file"]',
-    ]) {
+    for (const sel of SELECTORS) {
       const h = await page.$(sel);
-      if (h) return h;
+      if (h) return { sel, handle: h };
     }
     return null;
   };
 
   for (let attempt = 1; attempt <= 2; attempt++) {
-    const input = await pickInput();
-    if (!input) throw new Error('첨부용 파일 입력을 찾지 못했습니다 (ChatGPT 화면 구조가 바뀌었을 수 있음)');
-    await input.uploadFile(...refPaths);
+    const picked = await pickInput();
+    if (!picked) {
+      logDom('첨부 input 없음', await domSnapshot(page));
+      throw new Error('첨부용 파일 입력을 찾지 못했습니다 (ChatGPT 화면 구조가 바뀌었을 수 있음)');
+    }
+    await picked.handle.uploadFile(...refPaths);
 
     // 한 장만 붙어도 통과시키면 안 된다. **올린 개수만큼** 붙을 때까지 기다린다.
     const ok = await page
       .waitForFunction((n) => document.querySelectorAll('form img').length >= n, { timeout: 60_000 }, want)
       .then(() => true).catch(() => false);
     if (ok) {
-      console.log(`  레퍼런스 ${want}장 첨부 확인`);
+      console.log(`  레퍼런스 ${want}장 첨부 확인 (${picked.sel})`);
       return;
     }
-    const got = await page.evaluate(() => document.querySelectorAll('form img').length);
-    console.warn(`  (재시도 ${attempt}/2) 첨부가 ${got}/${want}장만 확인됨`);
+    const snap = await domSnapshot(page);
+    console.warn(`  (재시도 ${attempt}/2) 첨부가 ${snap.formImgs}/${want}장만 확인됨 — 쓴 input: ${picked.sel}`);
+    logDom(`첨부 실패 ${attempt}/2`, { used: picked.sel, ...snap });
     await new Promise((r) => setTimeout(r, 3000));
   }
-  throw new Error(`레퍼런스 ${want}장을 첨부하지 못했습니다. 레퍼런스 없이 만들면 디자인이 달라지므로 중단합니다.`);
+  throw new Error(`레퍼런스 ${want}장을 첨부하지 못했습니다. 레퍼런스 없이 만들면 디자인이 달라지므로 중단합니다.\n`
+    + `        ChatGPT 화면 구조가 바뀌었을 수 있습니다. logs/app.log 의 "첨부 실패" 줄에\n`
+    + `        그때 화면에 있던 file input 목록이 남습니다 — 빌더 첫 화면의 로그 버튼으로 받으세요.`);
 }
 
 async function sendPrompt(page, text) {
@@ -235,11 +270,17 @@ const readPageError = (page) => page.evaluate((needles) => {
   return (line || hit).trim().slice(0, 200);
 }, CHATGPT_ERRORS);
 
-async function waitForNewImage(page, before, timeoutMs) {
+// used = 이 실행에서 **이미 저장에 쓴** 이미지들. before(이번 턴 직전 스냅샷)만으로는
+// 부족하다: ChatGPT 가 위쪽 메시지를 DOM 에서 걷어냈다가 다시 붙이면 그 이미지가
+// before 에 없어서 "새 것" 으로 잡힌다. 실제로 그렇게 2번 이미지가 3번 자리에도
+// 저장돼, 3장만 만들어졌는데 4장이 나온 것처럼 끝난 적이 있다.
+async function waitForNewImage(page, before, timeoutMs, used = new Set()) {
   const deadline = Date.now() + timeoutMs;
-  let fresh = [], lastChange = 0;
+  let fresh = [], lastChange = 0, sawOnlyUsed = false;
   while (Date.now() < deadline) {
-    const now = (await fileIds(page)).filter((id) => !before.includes(id));
+    const all = (await fileIds(page)).filter((id) => !before.includes(id));
+    const now = all.filter((id) => !used.has(id));
+    if (all.length && !now.length) sawOnlyUsed = true;
     if (!now.length) {
       // 이미지가 아직 없을 때만 본다. 이미 나왔으면 옛 대화의 문구를 오탐할 수 있다.
       const err = await readPageError(page);
@@ -255,6 +296,10 @@ async function waitForNewImage(page, before, timeoutMs) {
     await new Promise((r) => setTimeout(r, 3000));
   }
   if (fresh.length) return fresh[0]; // 타임아웃이어도 받은 게 있으면 쓴다
+  if (sawOnlyUsed) {
+    throw new Error('이 프롬프트로는 새 이미지가 안 나왔습니다 (화면에 있는 건 앞 장에 이미 쓴 것). '
+      + '앞 장을 복사해 넣으면 안 되므로 이 장은 실패로 둡니다');
+  }
   throw new Error(`이미지가 ${Math.round(timeoutMs / 1000)}초 안에 안 나옴`);
 }
 
@@ -409,6 +454,7 @@ async function main() {
 
   const summary = [];
   let primed = false; // 이 실행에서 스타일/레퍼런스를 실은 첫 장을 이미 보냈는가
+  const usedIds = new Set(); // 이미 저장에 쓴 이미지 — 같은 것을 두 장에 넣지 않기 위해
   const page = await browser.newPage();
   try {
     await page.goto(CHATGPT, { waitUntil: 'domcontentloaded', timeout: 120_000 });
@@ -444,7 +490,8 @@ async function main() {
           ).catch(() => console.warn('\n  (경고) 레퍼런스 썸네일을 확인하지 못했습니다.'));
           before = await fileIds(page);
         }
-        const fileId = await waitForNewImage(page, before, timeoutMs);
+        const fileId = await waitForNewImage(page, before, timeoutMs, usedIds);
+        usedIds.add(fileId);
         let buf = await downloadImage(page, fileId);
         const src = checkRatio(buf);
         if (mode === 'slide') buf = await cropTo45(buf, cropPage, logo);

package/server.mjs

@@ -887,7 +887,10 @@ ${context || '(없음)'}
         // 이미지 트랙만 장 단위 재생성이 된다. HTML 트랙은 글자를 HTML 이 그리므로 오타가 안 난다.
         const meta = { engine, refs: paths, slides: engine === 'image' ? newestPromptFile() : null, count: slideCount, topic };
         writeGenMeta(abs, meta);
-        send({ result: { dir, slides, caption, canRegen: !!meta.slides } });
+        // expected 를 같이 보낸다. 장수가 모자라도 화면은 "완료"만 띄웠고,
+        // 몇 번이 빠졌는지는 아무 데도 안 나왔다.
+        if (slides.length < slideCount) log('장수 부족', { dir, got: slides.length, want: slideCount });
+        send({ result: { dir, slides, caption, canRegen: !!meta.slides, expected: slideCount } });
       });
       // 모델 출력을 기다리지 않고 바로 감시를 켠다. 완성된 슬라이드가 생기는 즉시 화면에 뜬다.
       stopWatch = watchProgress(dir, engine, sendOut, slideCount);