nai-aclab 1.0.9 → 1.0.11

package/app.py

@@ -316,6 +316,7 @@ class BattingScene:
     name: str = ""
     base_preset: str = ""
     character_preset: str = ""
+    image_size: str = "portrait"
     count: int = 2
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nai-aclab",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "Local web UI for experimenting with NovelAI artist tag weight combinations.",
   "license": "MIT",
   "type": "commonjs",

package/web/index.html

@@ -38,10 +38,9 @@
             <h1 id="pageTitle">생성</h1>
             <p id="pageSubtitle">프리셋, 작가 조합, 생성 상태를 한 화면에서 조정합니다.</p>
           </div>
-          <div class="top-actions">
-            <button class="ghost-button" id="refreshButton">새로고침</button>
-            <button class="primary-button" id="generateButton">이미지 생성</button>
-          </div>
+          <div class="top-actions">
+            <button class="ghost-button" id="refreshButton">새로고침</button>
+          </div>
         </header>
 
         <section id="generate" class="tab-page active">

package/web/main.js

@@ -40,23 +40,42 @@ const pageCopy = {
   history: ["히스토리", "생성 결과를 훑어보고 이상형 월드컵으로 선호 조합을 고릅니다."],
 };
 
-const apiFields = [
-  ["token", "API 토큰", "password"],
-  ["endpoint", "Endpoint", "text"],
-  ["model", "Model", "text"],
-  ["steps", "Steps", "number"],
-  ["scale", "Scale", "number"],
-  ["guidance_rescale", "Guidance Rescale", "number"],
-  ["sampler", "Sampler", "text"],
-  ["noise_schedule", "Noise Schedule", "text"],
-  ["seed", "Seed (-1=random)", "number"],
-];
-
-const imageSizeOptions = {
-  portrait: { label: "Normal Portrait", width: 832, height: 1216 },
-  landscape: { label: "Landscape", width: 1216, height: 832 },
-  square: { label: "Square", width: 1024, height: 1024 },
-};
+const apiFields = [
+  ["token", "API 토큰", "password"],
+  ["endpoint", "Endpoint", "text"],
+  ["model", "Model", "text"],
+  ["steps", "Steps", "number"],
+  ["scale", "Scale", "number"],
+  ["guidance_rescale", "Guidance Rescale", "number"],
+  ["sampler", "Sampler", "select"],
+  ["noise_schedule", "Noise Schedule", "select"],
+  ["seed", "Seed (-1=random)", "number"],
+];
+
+const apiSelectOptions = {
+  sampler: [
+    ["k_euler_ancestral", "Euler Ancestral"],
+    ["k_euler", "Euler"],
+    ["k_dpmpp_2m", "DPM++ 2M"],
+    ["k_dpmpp_2s_ancestral", "DPM++ 2S Ancestral"],
+    ["k_dpmpp_sde", "DPM++ SDE"],
+    ["k_dpm_2", "DPM2"],
+    ["k_dpm_fast", "DPM Fast"],
+    ["ddim_v3", "DDIM"],
+  ],
+  noise_schedule: [
+    ["karras", "Karras"],
+    ["native", "Native"],
+    ["exponential", "Exponential"],
+    ["polyexponential", "Polyexponential"],
+  ],
+};
+
+const imageSizeOptions = {
+  portrait: { label: "Normal Portrait", width: 832, height: 1216 },
+  landscape: { label: "Landscape", width: 1216, height: 832 },
+  square: { label: "Square", width: 1024, height: 1024 },
+};
 const defaultNovelAiEndpoint = "https://image.novelai.net/ai/generate-image";
 
 function escapeHtml(value) {
@@ -130,20 +149,26 @@ function scheduleSave() {
   saveTimer = setTimeout(saveNow, 450);
 }
 
-async function saveNow() {
-  if (!state) return;
-  syncEditorsToState();
-  try {
-    const data = await request("/api/state", {
-      method: "POST",
-      body: JSON.stringify({ state }),
-    });
-    state = data.state;
-    setSaveState("자동 저장됨");
-  } catch (error) {
-    setSaveState("저장 실패");
-    console.error(error);
-  }
+async function saveNow() {
+  if (!state) return;
+  const tokenInput = $("#api_token");
+  const hadPendingToken = Boolean(tokenInput?.value.trim());
+  syncEditorsToState();
+  try {
+    const data = await request("/api/state", {
+      method: "POST",
+      body: JSON.stringify({ state }),
+    });
+    state = data.state;
+    if (hadPendingToken && tokenInput) {
+      tokenInput.value = "";
+      tokenInput.placeholder = "저장된 토큰을 사용합니다. 새 토큰을 입력하면 교체됩니다.";
+    }
+    setSaveState(hadPendingToken ? "API 토큰 변경 저장됨" : "자동 저장됨");
+  } catch (error) {
+    setSaveState("저장 실패");
+    console.error(error);
+  }
 }
 
 function syncEditorsToState() {
@@ -208,12 +233,13 @@ function syncBattingScenesToState() {
     return;
   }
   state.batting_scenes = rows.map((row, index) => ({
-    name: row.querySelector(".batting-scene-name")?.value.trim() || `Scene ${index + 1}`,
-    base_preset: row.querySelector(".batting-scene-base")?.value || "",
-    character_preset: row.querySelector(".batting-scene-character")?.value || "",
-    count: Math.max(1, Number(row.querySelector(".batting-scene-count")?.value || 2)),
-  }));
-}
+    name: row.querySelector(".batting-scene-name")?.value.trim() || `Scene ${index + 1}`,
+    base_preset: row.querySelector(".batting-scene-base")?.value || "",
+    character_preset: row.querySelector(".batting-scene-character")?.value || "",
+    image_size: normalizeImageSizeKey(row.querySelector(".batting-scene-size")?.value || state.generation?.image_size || "portrait"),
+    count: Math.max(1, Number(row.querySelector(".batting-scene-count")?.value || 2)),
+  }));
+}
 
 function fillSelect(select, items, selectedName) {
   select.innerHTML = "";
@@ -227,24 +253,39 @@ function fillSelect(select, items, selectedName) {
   else if (items[0]) select.value = items[0].name;
 }
 
-function fillImageSizeSelect() {
-  const select = $("#imageSizeSelect");
-  if (!select) return;
-  select.innerHTML = "";
-  for (const [key, option] of Object.entries(imageSizeOptions)) {
+function fillImageSizeSelect() {
+  const select = $("#imageSizeSelect");
+  if (!select) return;
+  select.innerHTML = "";
+  for (const [key, option] of Object.entries(imageSizeOptions)) {
     const item = document.createElement("option");
     item.value = key;
     item.textContent = `${option.label}: ${option.width} x ${option.height}`;
     select.appendChild(item);
   }
   const saved = state.generation.image_size;
-  select.value = imageSizeOptions[saved] ? saved : "portrait";
-}
-
-function applyImageSizeToState(requestState) {
-  const selected = imageSizeOptions[requestState.generation?.image_size] || imageSizeOptions.portrait;
-  requestState.api = requestState.api || {};
-  requestState.api.width = selected.width;
+  select.value = imageSizeOptions[saved] ? saved : "portrait";
+}
+
+function normalizeImageSizeKey(value, fallback = "portrait") {
+  if (imageSizeOptions[value]) return value;
+  return imageSizeOptions[fallback] ? fallback : "portrait";
+}
+
+function imageSizeOptionsHtml(selectedKey) {
+  const selected = normalizeImageSizeKey(selectedKey);
+  return Object.entries(imageSizeOptions)
+    .map(([key, option]) => {
+      const label = `${option.label}: ${option.width} x ${option.height}`;
+      return `<option value="${key}" ${key === selected ? "selected" : ""}>${escapeHtml(label)}</option>`;
+    })
+    .join("");
+}
+
+function applyImageSizeToState(requestState) {
+  const selected = imageSizeOptions[requestState.generation?.image_size] || imageSizeOptions.portrait;
+  requestState.api = requestState.api || {};
+  requestState.api.width = selected.width;
   requestState.api.height = selected.height;
 }
 
@@ -417,17 +458,19 @@ function renderBatting() {
     root.innerHTML = `<div class="empty-box">아직 등록된 씬이 없습니다. 씬을 추가해보세요.</div>`;
     return;
   }
-  state.batting_scenes.forEach((scene, index) => {
-    const row = document.createElement("article");
-    row.className = "batting-scene-row";
-    row.innerHTML = `
-      <div class="batting-scene-number">${index + 1}</div>
-      <label><span>씬 이름</span><input class="batting-scene-name" value="${escapeHtml(scene.name || `Scene ${index + 1}`)}" /></label>
-      <label><span>베이스 + 퀄리티</span><select class="batting-scene-base">${selectOptionsHtml(state.base_presets, scene.base_preset)}</select></label>
-      <label><span>캐릭터</span><select class="batting-scene-character">${selectOptionsHtml(state.character_presets, scene.character_preset)}</select></label>
-      <label><span>생성 개수</span><input class="batting-scene-count" type="number" min="1" max="200" value="${Math.max(1, Number(scene.count || 2))}" /></label>
-      <button class="icon-button batting-scene-delete" type="button" title="씬 삭제">×</button>
-    `;
+  state.batting_scenes.forEach((scene, index) => {
+    const row = document.createElement("article");
+    row.className = "batting-scene-row";
+    const sceneSize = normalizeImageSizeKey(scene.image_size || state.generation?.image_size || "portrait");
+    row.innerHTML = `
+      <div class="batting-scene-number">${index + 1}</div>
+      <label><span>씬 이름</span><input class="batting-scene-name" value="${escapeHtml(scene.name || `Scene ${index + 1}`)}" /></label>
+      <label><span>베이스 + 퀄리티</span><select class="batting-scene-base">${selectOptionsHtml(state.base_presets, scene.base_preset)}</select></label>
+      <label><span>캐릭터</span><select class="batting-scene-character">${selectOptionsHtml(state.character_presets, scene.character_preset)}</select></label>
+      <label><span>이미지 해상도</span><select class="batting-scene-size">${imageSizeOptionsHtml(sceneSize)}</select></label>
+      <label><span>생성 개수</span><input class="batting-scene-count" type="number" min="1" max="200" value="${Math.max(1, Number(scene.count || 2))}" /></label>
+      <button class="icon-button batting-scene-delete" type="button" title="씬 삭제">×</button>
+    `;
     row.querySelector(".batting-scene-delete").onclick = () => deleteBattingScene(index);
     row.querySelectorAll("input, select").forEach((node) => {
       node.oninput = () => {
@@ -534,19 +577,47 @@ function renderPresets() {
   bindAutosaveInputs(editors);
 }
 
-function renderSettings() {
-  const form = $("#apiForm");
-  form.innerHTML = "";
-  for (const [key, label, type] of apiFields) {
-    const wrap = document.createElement("label");
-    wrap.innerHTML = `<span>${label}</span><input id="api_${key}" type="${type}" />`;
-    form.appendChild(wrap);
-    const input = $(`#api_${key}`);
-    input.value = key === "token" ? "" : state.api[key] ?? "";
-    if (key === "token") {
-      input.placeholder = state.api.token_saved ? "저장된 토큰을 사용합니다" : "API 토큰을 입력하세요";
-      input.autocomplete = "off";
-    }
+function renderSettings() {
+  const form = $("#apiForm");
+  form.innerHTML = "";
+  for (const [key, label, type] of apiFields) {
+    const wrap = document.createElement("label");
+    if (type === "select") {
+      wrap.innerHTML = `<span>${label}</span><select id="api_${key}"></select>`;
+    } else {
+      wrap.innerHTML = `<span>${label}</span><input id="api_${key}" type="${type}" />`;
+    }
+    form.appendChild(wrap);
+    const input = $(`#api_${key}`);
+    if (type === "select") {
+      input.innerHTML = (apiSelectOptions[key] || [])
+        .map(([value, optionLabel]) => `<option value="${escapeHtml(value)}">${escapeHtml(optionLabel)}</option>`)
+        .join("");
+      const saved = state.api[key] ?? "";
+      if (Array.from(input.options).some((option) => option.value === saved)) {
+        input.value = saved;
+      } else if (saved) {
+        const custom = document.createElement("option");
+        custom.value = saved;
+        custom.textContent = `${saved} (custom)`;
+        input.appendChild(custom);
+        input.value = saved;
+      }
+    } else {
+      input.value = key === "token" ? "" : state.api[key] ?? "";
+    }
+    if (key === "token") {
+      input.placeholder = state.api.token_saved
+        ? "저장된 토큰을 사용합니다. 새 토큰을 입력하면 교체됩니다."
+        : "API 토큰을 입력하세요";
+      input.autocomplete = "off";
+      const help = document.createElement("small");
+      help.className = "field-help";
+      help.textContent = state.api.token_saved
+        ? "보안을 위해 저장된 토큰은 다시 표시하지 않습니다. 새 토큰을 입력하고 설정 저장을 누르면 기존 토큰을 교체합니다."
+        : "토큰은 브라우저에 다시 노출하지 않고 로컬에만 저장합니다.";
+      wrap.appendChild(help);
+    }
     if (type === "number") input.step = "any";
   }
   $("#mockMode").checked = !!state.api.mock_mode;
@@ -1044,11 +1115,12 @@ function addBattingScene() {
   state.batting_scenes = state.batting_scenes || [];
   const nextIndex = state.batting_scenes.length + 1;
   state.batting_scenes.push({
-    name: uniqueName(state.batting_scenes, `Scene ${nextIndex}`),
-    base_preset: state.generation.base_preset || state.base_presets[0]?.name || "",
-    character_preset: state.generation.character_preset || state.character_presets[0]?.name || "",
-    count: 2,
-  });
+    name: uniqueName(state.batting_scenes, `Scene ${nextIndex}`),
+    base_preset: state.generation.base_preset || state.base_presets[0]?.name || "",
+    character_preset: state.generation.character_preset || state.character_presets[0]?.name || "",
+    image_size: normalizeImageSizeKey(state.generation.image_size || "portrait"),
+    count: 2,
+  });
   renderBatting();
   scheduleSave();
 }
@@ -1561,11 +1633,13 @@ function bindAutosaveInputs(root = document) {
   root.querySelectorAll("input, textarea, select").forEach((node) => {
     if (node.id === "compareHistorySelect") return;
     if (node.id === "deleteFilesToggle" || node.closest("#historyList")) return;
-    if (node.id === "api_token") {
-      node.oninput = null;
-      node.onchange = () => {
-        syncEditorsToState();
-        scheduleSave();
+    if (node.id === "api_token") {
+      node.oninput = () => {
+        setSaveState(node.value.trim() ? "새 API 토큰 입력됨" : "저장된 API 토큰 유지");
+      };
+      node.onchange = () => {
+        syncEditorsToState();
+        scheduleSave();
       };
       return;
     }
@@ -1591,19 +1665,24 @@ function switchTab(tab) {
   }
   currentTab = tab;
   $$(".nav-item").forEach((button) => button.classList.toggle("active", button.dataset.tab === tab));
-  $$(".tab-page").forEach((page) => page.classList.toggle("active", page.id === tab));
+  $$(".tab-page").forEach((page) => page.classList.toggle("active", page.id === tab));
   $("#pageTitle").textContent = pageCopy[tab][0];
   $("#pageSubtitle").textContent = pageCopy[tab][1];
-  $("#generateButton").hidden = tab !== "generate";
   updateJobActionButtons();
 }
 
 async function loadState() {
   const data = await request("/api/state");
-  state = data.state;
-  state.quality_override_prompt = state.quality_override_prompt || "";
-  state.batting_scenes = state.batting_scenes || [];
-  selectedHistoryIds = new Set(Array.from(selectedHistoryIds).filter((id) => state.history.some((item) => item.id === id)));
+  state = data.state;
+  state.quality_override_prompt = state.quality_override_prompt || "";
+  state.batting_scenes = state.batting_scenes || [];
+  state.generation = state.generation || {};
+  state.generation.image_size = normalizeImageSizeKey(state.generation.image_size || "portrait");
+  state.batting_scenes = state.batting_scenes.map((scene) => ({
+    ...scene,
+    image_size: normalizeImageSizeKey(scene.image_size || state.generation.image_size),
+  }));
+  selectedHistoryIds = new Set(Array.from(selectedHistoryIds).filter((id) => state.history.some((item) => item.id === id)));
   categoryIndex = Math.min(categoryIndex, Math.max(0, state.categories.length - 1));
   baseIndex = Math.min(baseIndex, Math.max(0, state.base_presets.length - 1));
   charIndex = Math.min(charIndex, Math.max(0, state.character_presets.length - 1));
@@ -1617,11 +1696,10 @@ async function loadState() {
 
 function bindEvents() {
   bindModalImageInteractions();
-  $$(".nav-item").forEach((button) => button.onclick = () => switchTab(button.dataset.tab));
-  $("#refreshButton").onclick = loadState;
-  $("#previewButton").onclick = previewPrompt;
-  $("#generateButton").onclick = startGeneration;
-  $("#generateButtonInline").onclick = startGeneration;
+  $$(".nav-item").forEach((button) => button.onclick = () => switchTab(button.dataset.tab));
+  $("#refreshButton").onclick = loadState;
+  $("#previewButton").onclick = previewPrompt;
+  $("#generateButtonInline").onclick = startGeneration;
   $("#stopGenerateButton").onclick = stopGeneration;
   $("#clearFixedArtistsButton").onclick = clearFixedArtists;
   $("#addBattingSceneButton").onclick = addBattingScene;

package/web/styles.css

@@ -319,6 +319,12 @@ label span,
   font-size: 12px;
 }
 
+.field-help {
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.45;
+}
+
 input,
 select,
 textarea {
@@ -406,7 +412,7 @@ pre {
 
 .batting-scene-row {
   display: grid;
-  grid-template-columns: 42px minmax(160px, 1.1fr) minmax(180px, 1fr) minmax(180px, 1fr) 110px 38px;
+  grid-template-columns: 42px minmax(140px, 0.9fr) minmax(170px, 1fr) minmax(170px, 1fr) minmax(190px, 1fr) 100px 38px;
   gap: 10px;
   align-items: end;
   padding: 12px;

package/web_app.py

@@ -48,6 +48,11 @@ JOBS: dict[str, dict] = {}
 STATE_LOCK = threading.Lock()
 LOCAL_API_TOKEN = secrets.token_urlsafe(32)
 ACTIVE_JOB_STATUSES = {"queued", "running", "cancelling"}
+IMAGE_SIZE_DIMENSIONS = {
+    "portrait": (832, 1216),
+    "landscape": (1216, 832),
+    "square": (1024, 1024),
+}
 
 
 def dataclass_from_dict(cls, data: dict):
@@ -349,6 +354,12 @@ def scene_state(state: AppState, scene: BattingScene) -> AppState:
     request_state = deepcopy(state)
     request_state.generation.base_preset = scene.base_preset
     request_state.generation.character_preset = scene.character_preset
+    image_size = scene.image_size if scene.image_size in IMAGE_SIZE_DIMENSIONS else request_state.generation.image_size
+    if image_size in IMAGE_SIZE_DIMENSIONS:
+        width, height = IMAGE_SIZE_DIMENSIONS[image_size]
+        request_state.generation.image_size = image_size
+        request_state.api.width = width
+        request_state.api.height = height
     request_state.generation.count = scene_count(scene)
     return request_state