nai-aclab 1.0.0

package/bin/nai-artist-lab.js

@@ -0,0 +1,115 @@
+#!/usr/bin/env node
+
+const { spawn } = require("child_process");
+const fs = require("fs");
+const os = require("os");
+const path = require("path");
+
+const rootDir = path.resolve(__dirname, "..");
+const launcherPath = path.join(rootDir, "launcher.py");
+const packageJson = require(path.join(rootDir, "package.json"));
+
+function userDataDir() {
+  if (process.env.NAI_ARTIST_LAB_USER_DIR) {
+    return process.env.NAI_ARTIST_LAB_USER_DIR;
+  }
+
+  if (process.platform === "win32") {
+    return path.join(process.env.APPDATA || os.homedir(), "NAI Artist Combination Lab");
+  }
+
+  if (process.platform === "darwin") {
+    return path.join(os.homedir(), "Library", "Application Support", "NAI Artist Combination Lab");
+  }
+
+  return path.join(
+    process.env.XDG_DATA_HOME || path.join(os.homedir(), ".local", "share"),
+    "nai-artist-combination-lab"
+  );
+}
+
+function printHelp() {
+  console.log(`NAI Artist Combination Lab ${packageJson.version}
+
+Usage:
+  nai-aclab
+  nai-artist-lab
+  npm start
+
+Requirements:
+  Node.js 18+
+  Python 3.10+
+
+Data folder:
+  ${userDataDir()}
+`);
+}
+
+function pythonCandidates() {
+  const candidates = [];
+  if (process.env.PYTHON) {
+    candidates.push({ command: process.env.PYTHON, args: [] });
+  }
+  if (process.platform === "win32") {
+    candidates.push({ command: "py", args: ["-3"] });
+  }
+  candidates.push({ command: "python3", args: [] });
+  candidates.push({ command: "python", args: [] });
+  return candidates;
+}
+
+function runWithCandidate(candidates, index) {
+  if (index >= candidates.length) {
+    console.error("Python 3.10+을 찾을 수 없습니다. Python을 설치한 뒤 다시 실행해주세요.");
+    process.exit(1);
+  }
+
+  const candidate = candidates[index];
+  const env = {
+    ...process.env,
+    NAI_ARTIST_LAB_USER_DIR: userDataDir(),
+  };
+
+  fs.mkdirSync(env.NAI_ARTIST_LAB_USER_DIR, { recursive: true });
+
+  const child = spawn(candidate.command, [...candidate.args, launcherPath], {
+    cwd: rootDir,
+    env,
+    stdio: "inherit",
+    windowsHide: false,
+  });
+
+  let failedToStart = false;
+  child.on("error", (error) => {
+    failedToStart = true;
+    if (error.code === "ENOENT") {
+      runWithCandidate(candidates, index + 1);
+      return;
+    }
+    console.error(error.message);
+    process.exit(1);
+  });
+
+  child.on("exit", (code, signal) => {
+    if (failedToStart) {
+      return;
+    }
+    if (signal) {
+      process.kill(process.pid, signal);
+      return;
+    }
+    process.exit(code || 0);
+  });
+}
+
+if (process.argv.includes("--help") || process.argv.includes("-h")) {
+  printHelp();
+  process.exit(0);
+}
+
+if (process.argv.includes("--version") || process.argv.includes("-v")) {
+  console.log(packageJson.version);
+  process.exit(0);
+}
+
+runWithCandidate(pythonCandidates(), 0);

package/launcher.py

@@ -0,0 +1,53 @@
+from __future__ import annotations
+
+import socket
+import threading
+import sys
+import webbrowser
+import ctypes
+from http.server import ThreadingHTTPServer
+
+from web_app import Handler
+
+
+APP_NAME = "NAI Artist Combination Lab"
+
+
+def find_port(start: int = 8777) -> int:
+    for port in range(start, start + 100):
+        with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as sock:
+            try:
+                sock.bind(("127.0.0.1", port))
+            except OSError:
+                continue
+            return port
+    raise RuntimeError("No available local port found.")
+
+
+def main() -> None:
+    port = find_port()
+    server = ThreadingHTTPServer(("127.0.0.1", port), Handler)
+    url = f"http://127.0.0.1:{port}/"
+    thread = threading.Thread(target=server.serve_forever, daemon=True)
+    thread.start()
+
+    webbrowser.open(url)
+
+    try:
+        if sys.platform.startswith("win"):
+            ctypes.windll.user32.MessageBoxW(
+                None,
+                f"브라우저에서 {APP_NAME}가 실행 중입니다.\n\n{url}\n\n앱 사용을 마친 뒤 확인을 누르면 서버가 종료됩니다.",
+                APP_NAME,
+                0,
+            )
+        else:
+            print(f"{APP_NAME} is running at {url}")
+            input("Press Enter to stop the server...")
+    finally:
+        server.shutdown()
+        server.server_close()
+
+
+if __name__ == "__main__":
+    main()

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "nai-aclab",
+  "version": "1.0.0",
+  "description": "Local web UI for experimenting with NovelAI artist tag weight combinations.",
+  "license": "MIT",
+  "type": "commonjs",
+  "bin": {
+    "nai-aclab": "bin/nai-artist-lab.js",
+    "nai-artist-lab": "bin/nai-artist-lab.js"
+  },
+  "scripts": {
+    "start": "node bin/nai-artist-lab.js"
+  },
+  "files": [
+    "app.py",
+    "web_app.py",
+    "launcher.py",
+    "web/",
+    "bin/",
+    "README.md"
+  ],
+  "engines": {
+    "node": ">=18"
+  }
+}

package/web/index.html

@@ -0,0 +1,413 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>NAI Artist Combination Lab</title>
+    <link rel="stylesheet" href="/web/styles.css" />
+  </head>
+  <body>
+    <div class="app-shell">
+      <aside class="sidebar">
+        <div class="brand">
+          <div class="brand-mark">NAI</div>
+          <div>
+            <strong>Artist Lab</strong>
+            <span>Prompt mixing workspace</span>
+          </div>
+        </div>
+        <nav class="nav" aria-label="Main">
+          <button class="nav-item active" data-tab="generate">⌘ 생성</button>
+          <button class="nav-item" data-tab="batting">▦ 타율 테스트</button>
+          <button class="nav-item" data-tab="artists"># 작가 태그</button>
+          <button class="nav-item" data-tab="presets">▣ 프리셋</button>
+          <button class="nav-item" data-tab="settings">⚙ API 설정</button>
+          <button class="nav-item" data-tab="compare">≋ 가중치 비교</button>
+          <button class="nav-item" data-tab="history">◈ 히스토리</button>
+        </nav>
+        <div class="sidebar-footer">
+          <span id="saveState">준비됨</span>
+        </div>
+      </aside>
+
+      <main class="workspace">
+        <header class="topbar">
+          <div>
+            <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>
+        </header>
+
+        <section id="generate" class="tab-page active">
+          <section class="panel live-preview-panel">
+            <div class="panel-header">
+              <div>
+                <h2>실시간 이미지 미리보기</h2>
+                <p>생성이 끝나는 즉시 이미지가 여기에 추가됩니다.</p>
+              </div>
+            </div>
+            <div id="liveGallery" class="live-gallery">
+              <p>아직 생성된 이미지가 없습니다.</p>
+            </div>
+          </section>
+
+          <div class="grid two-one">
+            <section class="panel">
+              <div class="panel-header">
+                <div>
+                  <h2>생성 옵션</h2>
+                  <p>마지막 선택값은 자동 저장됩니다.</p>
+                </div>
+              </div>
+              <div class="form-grid">
+                <label>
+                  <span>베이스 + 퀄리티 프리셋</span>
+                  <select id="baseSelect"></select>
+                </label>
+                <label>
+                  <span>캐릭터 프리셋</span>
+                  <select id="charSelect"></select>
+                </label>
+                <label>
+                  <span>생성 개수</span>
+                  <input id="countInput" type="number" min="1" max="200" />
+                </label>
+                <label>
+                  <span>이미지 사이즈</span>
+                  <select id="imageSizeSelect"></select>
+                </label>
+              </div>
+              <div class="fixed-artist-panel" id="fixedArtistPanel">
+                <div class="fixed-artist-head">
+                  <div class="mode-status" id="fixedArtistModeLabel">랜덤 가중치 모드</div>
+                  <button class="ghost-button" id="clearFixedArtistsButton" type="button">고정 해제</button>
+                </div>
+                <p id="fixedArtistSummary">작가 태그는 생성할 때마다 랜덤으로 선택됩니다.</p>
+                <div id="fixedArtistList" class="artist-weight-list fixed-artist-list"></div>
+              </div>
+              <div class="button-row">
+                <button class="ghost-button" id="previewButton">프롬프트 새로 뽑기</button>
+                <button class="primary-button" id="generateButtonInline">이미지 생성</button>
+              </div>
+              <div class="progress-wrap">
+                <div class="progress-label">
+                  <span id="progressText">대기 중</span>
+                  <span id="progressCount">0 / 0</span>
+                </div>
+                <div class="progress"><div id="progressBar"></div></div>
+              </div>
+            </section>
+
+            <section class="panel">
+              <div class="panel-header">
+                <div>
+                  <h2>실행 로그</h2>
+                  <p>생성 결과와 API 오류를 바로 확인합니다.</p>
+                </div>
+              </div>
+              <pre class="log" id="jobLog"></pre>
+            </section>
+          </div>
+
+          <section class="panel preview-panel">
+            <div class="panel-header">
+              <div>
+                <h2>최종 프롬프트 미리보기</h2>
+                <p>베이스 → 작가 → 퀄리티 | 캐릭터 순서로 조립됩니다.</p>
+              </div>
+            </div>
+            <div class="prompt-preview">
+              <div>
+                <strong>Prompt</strong>
+                <pre id="promptPreview"></pre>
+              </div>
+              <div>
+                <strong>Negative</strong>
+                <pre id="negativePreview"></pre>
+              </div>
+              <div>
+                <strong>UC</strong>
+                <pre id="ucPreview"></pre>
+              </div>
+            </div>
+          </section>
+
+        </section>
+
+        <section id="batting" class="tab-page">
+          <section class="panel">
+            <div class="panel-header">
+              <div>
+                <h2>타율 테스트</h2>
+                <p>고정 작가가중치를 유지한 채 여러 씬의 프리셋 조합을 한 번에 테스트합니다.</p>
+              </div>
+              <div class="button-row">
+                <button class="ghost-button" id="addBattingSceneButton" type="button">씬 추가</button>
+                <button class="primary-button" id="startBattingButton" type="button">타율 테스트 시작</button>
+                <button class="danger-button" id="stopBattingButton" type="button" disabled>생성 중지</button>
+              </div>
+            </div>
+            <div class="fixed-artist-panel">
+              <div class="fixed-artist-head">
+                <div class="mode-status" id="battingFixedArtistModeLabel">랜덤 가중치 모드</div>
+              </div>
+              <p id="battingFixedArtistSummary">히스토리나 가중치 비교에서 마음에 드는 이미지의 가중치를 먼저 불러오세요.</p>
+              <div id="battingFixedArtistList" class="artist-weight-list fixed-artist-list"></div>
+            </div>
+            <div id="battingSceneList" class="batting-scene-list"></div>
+          </section>
+
+          <section class="panel live-preview-panel">
+            <div class="panel-header">
+              <div>
+                <h2>타율 테스트 실시간 미리보기</h2>
+                <p>각 씬에서 생성된 이미지가 순서대로 추가됩니다.</p>
+              </div>
+            </div>
+            <div id="battingLiveGallery" class="live-gallery">
+              <p>아직 생성된 이미지가 없습니다.</p>
+            </div>
+          </section>
+
+          <div class="grid two-one">
+            <section class="panel">
+              <div class="panel-header">
+                <div>
+                  <h2>진행 상태</h2>
+                  <p>전체 씬 기준 생성 진행률입니다.</p>
+                </div>
+              </div>
+              <div class="progress-wrap">
+                <div class="progress-label">
+                  <span id="battingProgressText">대기 중</span>
+                  <span id="battingProgressCount">0 / 0</span>
+                </div>
+                <div class="progress" id="battingProgress"><div id="battingProgressBar"></div></div>
+              </div>
+            </section>
+            <section class="panel">
+              <div class="panel-header">
+                <div>
+                  <h2>실행 로그</h2>
+                  <p>씬별 생성 결과와 API 오류를 확인합니다.</p>
+                </div>
+              </div>
+              <pre class="log" id="battingJobLog"></pre>
+            </section>
+          </div>
+        </section>
+
+        <section id="artists" class="tab-page">
+          <div class="split">
+            <section class="panel list-panel">
+              <div class="panel-header">
+                <h2>카테고리</h2>
+                <button class="icon-button" id="addCategoryButton" title="새 카테고리">＋</button>
+              </div>
+              <div id="categoryList" class="item-list"></div>
+            </section>
+            <section class="panel editor-panel">
+              <div class="panel-header">
+                <div>
+                  <h2>작가 태그 편집</h2>
+                  <p>선택 태그 수가 비어 있으면 모든 태그를 포함합니다.</p>
+                </div>
+              </div>
+              <div class="form-grid compact">
+                <label><span>카테고리명</span><input id="catName" /></label>
+                <label><span>최소 가중치</span><input id="catMin" type="number" step="0.01" /></label>
+                <label><span>최대 가중치</span><input id="catMax" type="number" step="0.01" /></label>
+                <label><span>Granule</span><input id="catGranule" type="number" step="0.01" /></label>
+                <label><span>선택 태그 수</span><input id="catPicks" type="number" min="1" placeholder="전체" /></label>
+              </div>
+              <label class="text-label">
+                <span>태그 목록</span>
+                <textarea id="catTags" spellcheck="false"></textarea>
+              </label>
+              <div class="recognized-box">
+                <div>
+                  <strong>인식된 artist 태그</strong>
+                  <span id="recognizedCount">0개</span>
+                </div>
+                <div id="recognizedTags" class="tag-chips"></div>
+              </div>
+              <div class="button-row">
+                <button class="danger-button" id="deleteCategoryButton">카테고리 삭제</button>
+              </div>
+            </section>
+          </div>
+        </section>
+
+        <section id="presets" class="tab-page">
+          <div class="grid half">
+            <section class="panel">
+              <div class="panel-header">
+                <h2>베이스 + 퀄리티</h2>
+                <div class="preset-header-actions">
+                  <button class="ghost-button" id="basePresetAllButton" type="button">전체 목록</button>
+                  <button class="icon-button" id="addBaseButton" title="새 베이스">＋</button>
+                </div>
+              </div>
+              <div id="baseList" class="item-list horizontal"></div>
+              <label class="text-label short"><span>프리셋 이름</span><input id="baseName" /></label>
+              <label class="text-label"><span>베이스 프롬프트</span><textarea id="basePrompt" spellcheck="false"></textarea></label>
+              <label class="text-label"><span>퀄리티 프롬프트</span><textarea id="qualityPrompt" spellcheck="false"></textarea></label>
+              <label class="text-label"><span>공용 퀄리티 프롬프트 Override</span><textarea id="qualityOverridePrompt" spellcheck="false" placeholder="비워두면 선택한 베이스 + 퀄리티 프리셋의 퀄리티 프롬프트를 사용합니다."></textarea></label>
+              <button class="danger-button" id="deleteBaseButton">베이스 프리셋 삭제</button>
+            </section>
+            <section class="panel">
+              <div class="panel-header">
+                <div>
+                  <h2>캐릭터</h2>
+                  <p>생성 시 캐릭터는 쉼표가 아니라 | 로 분리됩니다.</p>
+                </div>
+                <div class="preset-header-actions">
+                  <button class="ghost-button" id="charPresetAllButton" type="button">전체 목록</button>
+                  <button class="icon-button" id="addCharButton" title="새 캐릭터">＋</button>
+                </div>
+              </div>
+              <div id="charList" class="item-list horizontal"></div>
+              <label class="text-label short"><span>프리셋 이름</span><input id="charName" /></label>
+              <div id="characterEditors" class="character-editors"></div>
+              <button class="danger-button" id="deleteCharButton">캐릭터 프리셋 삭제</button>
+            </section>
+          </div>
+        </section>
+
+        <section id="settings" class="tab-page">
+          <div class="grid two-one">
+            <section class="panel">
+              <div class="panel-header">
+                <h2>API 설정</h2>
+                <p>생성 시 자동 저장됩니다.</p>
+              </div>
+              <div id="apiForm" class="form-grid compact"></div>
+              <label class="switch-row">
+                <input id="mockMode" type="checkbox" />
+                <span>목업 모드 사용</span>
+              </label>
+              <button class="primary-button" id="saveSettingsButton">설정 저장</button>
+            </section>
+            <section class="panel">
+              <div class="panel-header">
+                <h2>Undesired Content</h2>
+                <p>V4 negative와 legacy UC를 분리해서 보냅니다.</p>
+              </div>
+              <label class="text-label"><span>공통 네거티브 프롬프트</span><textarea id="negativePrompt" spellcheck="false"></textarea></label>
+              <label class="text-label"><span>UC 프롬프트 (parameters.uc / negative_prompt)</span><textarea id="ucPrompt" spellcheck="false"></textarea></label>
+            </section>
+          </div>
+        </section>
+
+        <section id="history" class="tab-page">
+          <div class="split">
+            <section class="panel list-panel">
+              <div class="panel-header">
+                <div>
+                  <h2>생성 히스토리</h2>
+                  <p>항목을 체크해서 정리할 수 있습니다.</p>
+                </div>
+              </div>
+              <div class="history-toolbar">
+                <label class="switch-row compact-switch">
+                  <input id="deleteFilesToggle" type="checkbox" />
+                  <span>출력 파일도 삭제</span>
+                </label>
+                <div class="button-row">
+                  <button class="ghost-button" id="selectAllHistoryButton">전체 선택</button>
+                  <button class="danger-button" id="deleteSelectedHistoryButton">선택 삭제</button>
+                  <button class="danger-button" id="clearHistoryButton">전체 삭제</button>
+                </div>
+              </div>
+              <div id="historyList" class="item-list"></div>
+            </section>
+            <section class="panel">
+              <div class="panel-header">
+                <div>
+                  <h2>결과 / 월드컵</h2>
+                  <p>이미지를 비교해서 선호 조합을 찾습니다.</p>
+                </div>
+                <button class="ghost-button" id="startWorldcupButton">월드컵 시작</button>
+              </div>
+              <div id="historyDetail" class="history-detail"></div>
+              <div id="worldcupStatus" class="worldcup-status"></div>
+              <div id="worldcup" class="worldcup"></div>
+            </section>
+          </div>
+        </section>
+
+        <section id="compare" class="tab-page">
+          <section class="panel">
+            <div class="panel-header">
+              <div>
+                <h2>작가태그 가중치 비교</h2>
+                <p>생성 이미지별로 어떤 artist 태그와 가중치가 들어갔는지 가로로 훑어봅니다.</p>
+              </div>
+              <label class="compare-select">
+                <span>비교 대상</span>
+                <select id="compareHistorySelect"></select>
+              </label>
+            </div>
+            <div id="compareStrip" class="compare-strip"></div>
+          </section>
+
+          <section class="panel preview-panel">
+            <div class="panel-header">
+              <div>
+                <h2>가중치 매트릭스</h2>
+                <p>행은 artist 태그, 열은 이미지입니다. 빈칸은 해당 이미지에 사용되지 않은 태그입니다.</p>
+              </div>
+            </div>
+            <div id="compareMatrix" class="compare-matrix"></div>
+          </section>
+        </section>
+      </main>
+    </div>
+    <div id="imageModal" class="image-modal" hidden>
+      <div class="image-modal-backdrop" id="imageModalBackdrop"></div>
+      <section class="image-modal-panel" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
+        <div class="image-modal-view">
+          <img id="modalImage" alt="selected image" />
+        </div>
+        <aside class="image-modal-info">
+          <div class="panel-header">
+            <div>
+              <h2 id="modalTitle">이미지</h2>
+              <p id="modalSubtitle"></p>
+            </div>
+            <button class="icon-button" id="modalCloseButton" title="닫기">×</button>
+          </div>
+          <div class="modal-actions">
+            <button class="primary-button" id="modalGenerateButton">가중치 불러오기</button>
+          </div>
+          <div class="modal-section">
+            <strong>작가 가중치</strong>
+            <div id="modalArtists" class="artist-weight-list"></div>
+          </div>
+          <div class="modal-section">
+            <strong>Prompt</strong>
+            <pre id="modalPrompt"></pre>
+          </div>
+        </aside>
+      </section>
+    </div>
+    <div id="presetPickerModal" class="image-modal" hidden>
+      <div class="image-modal-backdrop" id="presetPickerBackdrop"></div>
+      <section class="preset-picker-panel" role="dialog" aria-modal="true" aria-labelledby="presetPickerTitle">
+        <div class="panel-header">
+          <div>
+            <h2 id="presetPickerTitle">프리셋 전체 목록</h2>
+            <p id="presetPickerSubtitle">사용할 프리셋을 선택하세요.</p>
+          </div>
+          <button class="icon-button" id="presetPickerCloseButton" title="닫기">×</button>
+        </div>
+        <div id="presetPickerList" class="preset-picker-list"></div>
+      </section>
+    </div>
+    <script src="/web/main.js"></script>
+  </body>
+</html>