sns-auto-builder 1.0.8 → 1.1.0

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.8",
+  "version": "1.1.0",
   "description": "인스타 카드뉴스 자동 제작 빌더. Claude Code + ChatGPT 웹을 그대로 써서 API 키 없이 돌아갑니다.",
   "type": "module",
   "bin": {

package/scripts/chatgpt-image-gen.js

@@ -234,11 +234,48 @@ async function attachRef(page, refPaths) {
     + `        그때 화면에 있던 file input 목록이 남습니다 — 빌더 첫 화면의 로그 버튼으로 받으세요.`);
 }
 
+// 보내기 전에 앞 턴이 끝났는지 보고, 보낸 뒤에 정말 나갔는지 확인한다.
+// 예전에는 클릭·타이핑·Enter 만 하고 끝이라, Enter 가 씹혀도 그대로 다음 단계로 갔다.
+// 앞 턴이 "응답 중" 으로 굳어 있으면 Enter 가 아예 안 먹는다(실측). "답변 중지" 를
+// 누르면 풀리고, 그때 입력칸이 다시 그려지므로 셀렉터를 다시 기다려야 한다.
+async function clearBusy(page) {
+  console.warn('  앞 턴이 응답 중 상태로 굳어 있습니다 — "답변 중지" 로 정리합니다.');
+  await page.click(STOP_BTN).catch(() => { /* 그새 사라졌으면 그만 */ });
+  await waitForIdle(page, 15_000);
+  await page.waitForSelector('#prompt-textarea', { timeout: 30_000 }).catch(() => {});
+}
+
 async function sendPrompt(page, text) {
-  await page.click('#prompt-textarea');
   // 프롬프트는 항상 한 줄로 만든다 — 개행이 들어가면 Enter 가 도중에 전송해버린다.
-  await page.type('#prompt-textarea', text.replace(/\s*\n\s*/g, ' '));
-  await page.keyboard.press('Enter');
+  const one = text.replace(/\s*\n\s*/g, ' ');
+  if (!(await waitForIdle(page, IDLE_WAIT_MS))) await clearBusy(page);
+
+  for (let attempt = 1; attempt <= 2; attempt++) {
+    await page.waitForSelector('#prompt-textarea', { timeout: 30_000 });
+    // 중지 뒤에는 앞서 친 글자가 남아 있을 수도, 비어 있을 수도 있다. 다르면 지우고 다시 친다.
+    const cur = await page.evaluate(() => document.getElementById('prompt-textarea').innerText.trim());
+    if (cur !== one) {
+      await page.click('#prompt-textarea');
+      if (cur) {
+        await page.keyboard.down('Control'); await page.keyboard.press('KeyA'); await page.keyboard.up('Control');
+        await page.keyboard.press('Backspace');
+      }
+      await page.type('#prompt-textarea', one);
+    }
+    await page.keyboard.press('Enter');
+
+    // **입력칸이 비는 것만 본다.** 우리가 넣은 글자가 실제로 나갔다는 뜻이라 확실하다.
+    // stop 버튼은 앞 턴 것이 남아 있을 수 있어 전송 확인에 쓰면 안 된다.
+    const sent = await page.waitForFunction(() => {
+      const c = document.getElementById('prompt-textarea');
+      return !!c && !c.innerText.trim();
+    }, { timeout: 15_000, polling: 500 }).then(() => true).catch(() => false);
+    if (sent) return;
+
+    console.warn(`  (재시도 ${attempt}/2) Enter 가 먹지 않았습니다 — 입력칸에 글자가 그대로입니다`);
+    await clearBusy(page);
+  }
+  throw new Error('프롬프트를 전송하지 못했습니다 — ChatGPT 가 계속 응답 중 상태입니다');
 }
 
 // 새 이미지를 기다렸다가 **이 프롬프트에 해당하는 1장**을 골라 돌려준다.
@@ -249,6 +286,22 @@ async function sendPrompt(page, text) {
 // 여러 장이 나왔으면 경고를 남긴다 — 프롬프트가 다장 생성을 유도했다는 신호다.
 const SETTLE_MS = 12_000; // 개수가 이만큼 안 늘면 그 턴은 끝난 것으로 본다
 
+// 응답하는 동안 뜨는 "답변 중지" 버튼. 생성 중이라는 뜻이지만 **끝났다는 뜻으로는 못 쓴다** —
+// 답변이 다 나온 뒤에도 이 버튼이 5분 넘게 남아 있는 걸 실측했다. 그래서 이 신호로는
+// 절대 막지 않는다(막으면 멀쩡한 실행이 영원히 안 끝난다). 빨리 실패할 때만 참고한다.
+const STOP_BTN = '[data-testid="stop-button"]';
+const IDLE_GRACE_MS = 20_000; // 버튼이 실제로 사라진 뒤 이만큼 더 봤는데도 이미지가 없으면 실패
+const IDLE_WAIT_MS = 90_000;  // 앞 턴을 기다려보는 상한. 넘으면 경고만 하고 그냥 보낸다
+
+const isStreaming = (page) => page.$(STOP_BTN).then((h) => !!h).catch(() => false);
+
+// 앞 턴이 끝나길 기다린다. **던지지 않는다** — 위 이유로 이 신호는 조언일 뿐이다.
+async function waitForIdle(page, timeoutMs) {
+  return page
+    .waitForFunction((sel) => !document.querySelector(sel), { timeout: timeoutMs, polling: 1000 }, STOP_BTN)
+    .then(() => true).catch(() => false);
+}
+
 // ChatGPT 가 생성에 실패하면 본문에 영어 안내가 뜨고 이미지는 안 나온다.
 // 그걸 못 읽으면 우리는 타임아웃까지 5분을 그냥 기다린 뒤 "안 나옴" 이라고만 말하게 된다.
 // 실제 문구를 그대로 사용자에게 전달해야 원인 파악이 된다.
@@ -270,26 +323,49 @@ 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, idleSince = 0;
   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);
       if (err) throw new Error(`ChatGPT 가 생성을 거부했습니다: ${err}`);
     }
     if (now.length !== fresh.length) { fresh = now; lastChange = Date.now(); }
-    else if (fresh.length && Date.now() - lastChange >= SETTLE_MS) {
+
+    // 턴이 끝났는지를 **먼저** 본다. 12초 settle 은 stop 버튼을 못 읽을 때의 보조 장치다.
+    const streaming = await isStreaming(page);
+    if (streaming) idleSince = 0;
+    else if (!idleSince) idleSince = Date.now();
+
+    if (fresh.length && (idleSince || Date.now() - lastChange >= SETTLE_MS)) {
       if (fresh.length > 1) {
         console.warn(`  (경고) 한 프롬프트에 ${fresh.length}장이 생성됨 — 첫 장만 사용합니다.`);
       }
       return fresh[0];
     }
+    // 응답은 끝났는데 새 이미지가 없다 = 이 프롬프트는 이미지를 못 받았다.
+    // 예전에는 여기서 5분 타임아웃까지 기다렸다가, 남아 있던 앞 장 이미지를 집어갔다.
+    if (!fresh.length && idleSince && Date.now() - idleSince >= IDLE_GRACE_MS) {
+      throw new Error(sawOnlyUsed
+        ? '새 이미지가 안 나왔습니다 — 화면에 있는 건 앞 장에 이미 쓴 것입니다. 앞 장을 복사해 넣지 않고 이 장은 실패로 둡니다'
+        : 'ChatGPT 가 응답을 끝냈는데 이미지가 없습니다 (글로만 답했을 수 있습니다)');
+    }
     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)}초 안에 안 나옴`);
 }
 
@@ -444,6 +520,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 });
@@ -479,7 +556,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);
@@ -507,7 +585,13 @@ async function main() {
   console.log('\n=== SUMMARY ===');
   summary.forEach(([f, st, dt, info]) => console.log(`  ${f.padEnd(12)} ${st.padEnd(5)} ${dt.padStart(7)}  ${info}`));
   const missing = summary.filter(([, st]) => st === 'ERR').length;
-  console.log(`\n출력: ${outDir}`);
+  // ChatGPT 가 실제로 만든 **서로 다른** 이미지 수를 장수와 나란히 찍는다.
+  // 같은 이미지를 두 장에 넣으면 파일 수는 맞아도 이 줄에서 어긋난다.
+  const ok = summary.filter(([, st]) => st === 'OK').length;
+  console.log(`\n생성된 이미지 ${usedIds.size}장 / 저장 ${ok}장 / 요청 ${slides.length}장`);
+  if (usedIds.size < ok) console.warn('  (경고) 같은 이미지가 두 장에 들어갔을 수 있습니다.');
+  logDom('생성 결과', { made: usedIds.size, saved: ok, want: slides.length, err: missing });
+  console.log(`출력: ${outDir}`);
   console.log(missing
     ? `Chrome 창은 열어둡니다 (${missing}장 남음). 같은 명령을 다시 부르면 그 창에 붙어 이어서 뽑습니다.`
     : 'Chrome 창은 열어둡니다. 다음 실행이 같은 창에 붙습니다.');

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);