nai-aclab 1.0.12 → 1.1.1

package/README.md

@@ -66,7 +66,7 @@ nai-aclab
 
 API 토큰을 아직 넣고 싶지 않다면 `목업 모드 사용`을 켜둔 채로 UI만 먼저 테스트할 수 있습니다. 목업 모드에서는 실제 NovelAI API를 쓰지 않고 테스트용 이미지를 만듭니다.
 
-대부분의 사용자는 `Endpoint`, `Model`, `Sampler`, `Noise Schedule` 같은 값은 기본값 그대로 두면 됩니다.
+대부분의 사용자는 `Endpoint`, `Model`, `Sampler`, `Noise Schedule` 같은 값은 기본값 그대로 두면 됩니다. 처음 설치하면 이미지 모델은 `NAI Diffusion V5 Full`로 설정됩니다.
 
 ![API 설정 메뉴](docs/screenshots/07-api-settings.png)
 
@@ -103,7 +103,8 @@ artist:sample_a
 - 퀄리티 프롬프트: 품질 관련 태그
 - 캐릭터 프롬프트: 캐릭터별 외형과 행동
 - 네거티브 프롬프트: 피하고 싶은 요소
-- UC 프롬프트: NovelAI의 legacy UC 입력값
+
+공통 네거티브 프롬프트는 NovelAI의 UC에도 같은 내용으로 자동 전송됩니다.
 
 최종 프롬프트는 아래 순서로 조립됩니다.
 
@@ -232,7 +233,7 @@ NovelAI V4+의 멀티 캐릭터 프롬프트는 캐릭터를 쉼표로 합치지
 
 API 토큰은 일반 설정 파일에 저장하지 않고 별도 secret store에 저장합니다. 앱 화면으로 다시 내려보내지도 않습니다.
 
-생성 히스토리에는 이미지 표시와 작가 가중치 비교에 필요한 최소 정보만 저장합니다. 최종 프롬프트, 네거티브 프롬프트, UC 프롬프트, 생성 요청 JSON, 로컬 절대 경로는 별도로 저장하지 않습니다.
+생성 히스토리에는 이미지 표시와 작가 가중치 비교에 필요한 최소 정보만 저장합니다. 최종 프롬프트, 네거티브 프롬프트, 생성 요청 JSON, 로컬 절대 경로는 별도로 저장하지 않습니다.
 
 NovelAI가 이미지 파일 안에 저장하는 생성 정보는 그대로 남을 수 있습니다. 이 정보는 이미지 자체의 메타데이터입니다.
 

package/app.py

@@ -131,6 +131,7 @@ def cleanup_saved_request_jsons() -> None:
 
 def state_dict_without_secrets(state: AppState | dict) -> dict:
     data = asdict(state) if not isinstance(state, dict) else dict(state)
+    data.pop("uc_prompt", None)
     api = dict(data.get("api", {}) or {})
     api["token"] = ""
     data["api"] = api
@@ -286,7 +287,7 @@ class ApiSettings:
     token: str = ""
     endpoint: str = "https://image.novelai.net/ai/generate-image"
     user_agent: str = DEFAULT_USER_AGENT
-    model: str = "nai-diffusion-4-5-curated"
+    model: str = "nai-diffusion-5-full"
     width: int = 832
     height: int = 1216
     steps: int = 28
@@ -327,7 +328,6 @@ class AppState:
     character_presets: list[CharacterPreset] = field(default_factory=list)
     quality_override_prompt: str = ""
     negative_prompt: str = "lowres, bad anatomy, bad hands, text, error, missing fingers"
-    uc_prompt: str = ""
     api: ApiSettings = field(default_factory=ApiSettings)
     generation: GenerationSettings = field(default_factory=GenerationSettings)
     batting_scenes: list[BattingScene] = field(default_factory=list)
@@ -337,8 +337,8 @@ class AppState:
 def default_state() -> AppState:
     return AppState(
         categories=[
-            Category("메인 그림체 작가", ["artist:example_main", "artist:sample_a"], 1.0, 1.4, 0.05, 0),
-            Category("그림체 안정화 작가", ["artist:example_stable", "artist:sample_b"], 0.4, 0.9, 0.1, 0),
+            Category("메인 그림체 작가", [], 1.0, 1.4, 0.05, 0),
+            Category("그림체 안정화 작가", [], 0.4, 0.9, 0.1, 0),
         ],
         base_presets=[
             PromptPreset("기본", "", "masterpiece, best quality, very aesthetic, detailed illustration"),
@@ -392,7 +392,6 @@ def load_state() -> AppState:
         character_presets=[CharacterPreset(**item) for item in data.get("character_presets", [])],
         quality_override_prompt=quality_override,
         negative_prompt=data.get("negative_prompt", ""),
-        uc_prompt=data.get("uc_prompt", data.get("negative_prompt", "")),
         api=ApiSettings(**api_data),
         generation=GenerationSettings(**data.get("generation", {})),
         batting_scenes=[BattingScene(**item) for item in data.get("batting_scenes", [])],
@@ -412,7 +411,7 @@ class NovelAIClient:
     def __init__(self, settings: ApiSettings):
         self.settings = settings
 
-    def build_payload(self, prompt: str, negative_prompt: str, uc_prompt: str, seed: int | None = None) -> dict:
+    def build_payload(self, prompt: str, negative_prompt: str, seed: int | None = None) -> dict:
         actual_seed = seed if seed is not None else (
             self.settings.seed if self.settings.seed >= 0 else random.randint(0, 2**32 - 1)
         )
@@ -468,18 +467,18 @@ class NovelAIClient:
                 "wonky_vibe_correlation": True,
                 "stream": "none",
                 "version": 1,
-                "uc": uc_prompt,
-                "negative_prompt": uc_prompt,
+                "uc": negative_prompt,
+                "negative_prompt": negative_prompt,
                 "request_type": "PromptGenerateRequest",
             },
         }
 
-    def generate(self, prompt: str, negative_prompt: str, uc_prompt: str, output_path: Path) -> None:
+    def generate(self, prompt: str, negative_prompt: str, output_path: Path) -> None:
         if self.settings.mock_mode or not self.settings.token.strip():
             write_placeholder_png(output_path, prompt, self.settings.width, self.settings.height)
             return
 
-        payload = self.build_payload(prompt, negative_prompt, uc_prompt)
+        payload = self.build_payload(prompt, negative_prompt)
         req = urllib.request.Request(
             self.settings.endpoint,
             data=json.dumps(payload).encode("utf-8"),
@@ -794,11 +793,7 @@ class App(tk.Tk if tk else object):
         neg_box.pack(fill=BOTH, expand=True, pady=12)
         self.negative_text = tk.Text(neg_box, height=8, wrap="word")
         self.negative_text.pack(fill=BOTH, expand=True)
-        uc_box = ttk.LabelFrame(self.settings_tab, text="UC 프롬프트 (parameters.uc)", padding=8)
-        uc_box.pack(fill=BOTH, expand=True, pady=(0, 12))
-        self.uc_text = tk.Text(uc_box, height=5, wrap="word")
-        self.uc_text.pack(fill=BOTH, expand=True)
-        ttk.Button(uc_box, text="네거티브 / UC 저장", command=self.save_negative).pack(anchor="e", pady=6)
+        ttk.Button(neg_box, text="네거티브 프롬프트 저장", command=self.save_negative).pack(anchor="e", pady=6)
 
     def refresh_all(self) -> None:
         self.refresh_categories()
@@ -1171,8 +1166,6 @@ class App(tk.Tk if tk else object):
             var.set(getattr(api, key))
         self.negative_text.delete("1.0", END)
         self.negative_text.insert("1.0", self.state_data.negative_prompt)
-        self.uc_text.delete("1.0", END)
-        self.uc_text.insert("1.0", self.state_data.uc_prompt)
 
     def save_api_settings(self, show_message: bool = True) -> None:
         api = self.state_data.api
@@ -1184,7 +1177,6 @@ class App(tk.Tk if tk else object):
 
     def save_negative(self) -> None:
         self.state_data.negative_prompt = self.negative_text.get("1.0", END).strip()
-        self.state_data.uc_prompt = self.uc_text.get("1.0", END).strip()
         save_state(self.state_data)
 
     def random_artist_tags(self) -> list[dict]:
@@ -1200,7 +1192,7 @@ class App(tk.Tk if tk else object):
                 result.append({"category": cat.name, "tag": tag, "weight": weight, "prompt": weight_tag(tag, weight)})
         return result
 
-    def build_prompt(self) -> tuple[str, str, str, list[dict]]:
+    def build_prompt(self) -> tuple[str, str, list[dict]]:
         base = self.find_base()
         char = self.find_char()
         artists = self.random_artist_tags()
@@ -1226,11 +1218,10 @@ class App(tk.Tk if tk else object):
         if char:
             negative.extend(n.strip() for n in char.negatives if n.strip())
         negative_prompt = ", ".join(n for n in negative if n)
-        uc_prompt = self.state_data.uc_prompt.strip() or negative_prompt
-        return " | ".join(prompt_parts), negative_prompt, uc_prompt, artists
+        return " | ".join(prompt_parts), negative_prompt, artists
 
     def preview_prompt(self) -> None:
-        prompt, negative, uc_prompt, artists = self.build_prompt()
+        prompt, negative, artists = self.build_prompt()
         base = self.find_base()
         char = self.find_char()
         self.prompt_preview.delete("1.0", END)
@@ -1249,7 +1240,7 @@ class App(tk.Tk if tk else object):
             for idx, char_prompt in enumerate(char.prompts, start=1):
                 if char_prompt.strip():
                     self.prompt_preview.insert(END, f"{idx}. {char_prompt.strip()}\n")
-        self.prompt_preview.insert(END, f"\n[Negative]\n{negative}\n\n[UC]\n{uc_prompt}\n")
+        self.prompt_preview.insert(END, f"\n[Negative / UC]\n{negative}\n")
 
     def start_generation(self) -> None:
         count = max(1, int(self.count_var.get()))
@@ -1274,7 +1265,7 @@ class App(tk.Tk if tk else object):
         client = NovelAIClient(self.state_data.api)
         items = []
         for idx in range(count):
-            prompt, negative, uc_prompt, artists = self.build_prompt()
+            prompt, negative, artists = self.build_prompt()
             path = out_dir / f"image_{idx + 1:03}.png"
             metadata = {
                 "path": output_ref(str(path)),
@@ -1282,7 +1273,7 @@ class App(tk.Tk if tk else object):
                 "created_at": time.strftime("%Y-%m-%d %H:%M:%S"),
             }
             try:
-                client.generate(prompt, negative, uc_prompt, path)
+                client.generate(prompt, negative, path)
                 items.append(metadata)
                 self.after(0, self.log_line, f"{idx + 1}/{count} 완료: {path.name}")
             except Exception as exc:

package/package.json

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

package/web/index.html

@@ -11,18 +11,18 @@
       <aside class="sidebar">
         <div class="brand">
           <div class="brand-mark">NAI</div>
-          <div>
-            <strong>Artist Lab</strong>
-            <span>Prompt mixing workspace</span>
+          <div>
+            <strong>Artist Lab</strong>
+            <span>NovelAI 작가 조합 실험실</span>
           </div>
         </div>
         <nav class="nav" aria-label="Main">
-          <button class="nav-item active" data-tab="generate">⌘ 생성</button>
+          <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="presets">▣ 프롬프트 프리셋</button>
           <button class="nav-item" data-tab="compare">≋ 가중치 비교</button>
-          <button class="nav-item" data-tab="history">◈ 히스토리</button>
+          <button class="nav-item" data-tab="history">◈ 생성 기록</button>
         </nav>
         <div class="sidebar-tools">
           <button class="nav-item settings-nav-item" data-tab="settings">⚙ API 설정</button>
@@ -33,18 +33,18 @@
       </aside>
 
       <main class="workspace">
-        <header class="topbar">
+        <header class="topbar">
           <div>
             <h1 id="pageTitle">생성</h1>
             <p id="pageSubtitle">프리셋, 작가 조합, 생성 상태를 한 화면에서 조정합니다.</p>
-          </div>
+          </div>
           <div class="top-actions">
-            <button class="ghost-button" id="refreshButton">새로고침</button>
+            <button class="icon-button" id="refreshButton" type="button" title="저장된 내용을 다시 불러오기" aria-label="저장된 내용을 다시 불러오기">↻</button>
           </div>
-        </header>
+        </header>
 
         <section id="generate" class="tab-page active">
-          <section class="panel live-preview-panel">
+          <section class="panel live-preview-panel">
             <div class="panel-header">
               <div>
                 <h2>실시간 이미지 미리보기</h2>
@@ -53,16 +53,19 @@
             </div>
             <div id="liveGallery" class="live-gallery">
               <p>아직 생성된 이미지가 없습니다.</p>
-            </div>
-          </section>
-
-          <div class="grid two-one">
+            </div>
+          </section>
+
+          <section id="setupGuide" class="setup-guide" aria-label="생성 준비 상태"></section>
+
+          <div class="grid two-one">
             <section class="panel">
-              <div class="panel-header">
-                <div>
-                  <h2>생성 옵션</h2>
-                  <p>마지막 선택값은 자동 저장됩니다.</p>
-                </div>
+              <div class="panel-header">
+                <div>
+                  <h2>생성 옵션</h2>
+                  <p>프리셋과 이미지 수를 고른 뒤 바로 생성할 수 있습니다.</p>
+                </div>
+                <span class="mode-status" id="generationModeBadge"></span>
               </div>
               <div class="form-grid">
                 <label>
@@ -90,9 +93,9 @@
                 <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 class="button-row">
+                <button class="ghost-button" id="previewButton" type="button" title="이미지는 만들지 않고 랜덤 작가 조합과 최종 프롬프트만 다시 계산합니다.">작가 조합 다시 뽑기</button>
+                <button class="primary-button" id="generateButtonInline">이미지 생성</button>
                 <button class="danger-button" id="stopGenerateButton" type="button" disabled>생성 중지</button>
               </div>
               <div class="progress-wrap">
@@ -127,14 +130,10 @@
                 <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>
+                <strong>Negative / UC</strong>
+                <pre id="negativePreview"></pre>
+              </div>
             </div>
           </section>
 
@@ -153,14 +152,16 @@
                 <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>
+            <div class="fixed-artist-panel">
+              <div class="fixed-artist-head">
+                <div class="mode-status" id="battingFixedArtistModeLabel">랜덤 가중치 모드</div>
+                <button class="ghost-button" id="battingLoadWeightsButton" type="button">히스토리에서 가중치 고르기</button>
+              </div>
+              <p id="battingFixedArtistSummary">히스토리나 가중치 비교에서 마음에 드는 이미지의 가중치를 먼저 불러오세요.</p>
+              <div id="battingFixedArtistList" class="artist-weight-list fixed-artist-list"></div>
+            </div>
+            <div id="battingReadiness" class="inline-notice"></div>
+            <div id="battingSceneList" class="batting-scene-list"></div>
           </section>
 
           <section class="panel live-preview-panel">
@@ -219,24 +220,34 @@
                   <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="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>가중치 간격</span>
+                  <input id="catGranule" type="number" step="0.01" />
+                  <small class="field-help">예: 0.05이면 1.00, 1.05, 1.10처럼 선택됩니다.</small>
+                </label>
+                <label>
+                  <span>한 번에 사용할 태그 수</span>
+                  <input id="catPicks" type="number" min="1" placeholder="비워두면 전체" />
+                  <small class="field-help">비워두면 이 카테고리에 입력한 작가를 모두 사용합니다.</small>
+                </label>
+              </div>
+              <label class="text-label">
+                <span>태그 목록</span>
+                <textarea id="catTags" spellcheck="false" placeholder="artist:example_name&#10;또는 1.2::artist:example_name ::, artist:another_name"></textarea>
+                <small class="field-help">쉼표로 붙여넣거나 한 줄에 하나씩 입력해도 artist:이름 부분만 자동 인식합니다.</small>
+              </label>
               <div class="recognized-box">
                 <div>
-                  <strong>인식된 artist 태그</strong>
-                  <span id="recognizedCount">0개</span>
-                </div>
-                <div id="recognizedTags" class="tag-chips"></div>
-              </div>
+                  <strong>인식된 artist 태그</strong>
+                  <span id="recognizedCount">0개</span>
+                </div>
+                <div id="recognizedTags" class="tag-chips"></div>
+              </div>
+              <div id="categoryWeightPreview" class="inline-notice compact-notice"></div>
               <div class="button-row">
                 <button class="danger-button" id="deleteCategoryButton">카테고리 삭제</button>
               </div>
@@ -256,9 +267,13 @@
               </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>
+              <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>공용 퀄리티 덮어쓰기 (선택)</span>
+                <textarea id="qualityOverridePrompt" spellcheck="false" placeholder="비워두면 각 베이스 프리셋의 퀄리티 프롬프트를 사용합니다."></textarea>
+                <small class="field-help">값이 있으면 모든 베이스 프리셋의 퀄리티 프롬프트 대신 이 내용을 사용합니다.</small>
+              </label>
               <button class="danger-button" id="deleteBaseButton">베이스 프리셋 삭제</button>
             </section>
             <section class="panel">
@@ -272,35 +287,54 @@
                   <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>
+              <div id="charList" class="item-list horizontal"></div>
+              <label class="text-label short"><span>프리셋 이름</span><input id="charName" /></label>
+              <div id="charSlotTabs" class="segment-control" role="tablist" aria-label="캐릭터 선택"></div>
+              <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 id="settings" class="tab-page">
+          <div class="grid two-one">
+            <section class="panel">
+              <div class="panel-header">
+                <div>
+                  <h2>NovelAI 연결</h2>
+                  <p>실제 이미지를 만들려면 API 토큰이 필요합니다.</p>
+                </div>
+                <span id="apiConnectionStatus" class="mode-status"></span>
+              </div>
+              <div id="apiPrimaryForm" class="form-grid"></div>
+              <label class="switch-row feature-switch">
+                <input id="mockMode" type="checkbox" />
+                <span>
+                  <strong>API 없이 체험하기</strong>
+                  <small>NovelAI에 요청하지 않고 색상 목업 이미지를 생성합니다.</small>
+                </span>
+              </label>
+              <div class="button-row">
+                <button class="primary-button" id="saveSettingsButton">토큰 및 설정 저장</button>
+              </div>
+              <details class="advanced-settings">
+                <summary>고급 API 설정</summary>
+                <p>NovelAI 기본값을 바꿔야 할 때만 열어보세요.</p>
+                <div id="apiAdvancedForm" class="form-grid compact"></div>
+              </details>
+            </section>
+            <section class="panel">
+              <div class="panel-header">
+                <div>
+                  <h2>제외할 내용</h2>
+                  <p>이미지에 나오지 않았으면 하는 요소를 입력합니다.</p>
+                </div>
+              </div>
+              <label class="text-label">
+                <span>공통 네거티브 프롬프트</span>
+                <textarea id="negativePrompt" spellcheck="false"></textarea>
+                <small class="field-help">모든 캐릭터에 공통으로 적용되며 NovelAI의 UC에도 같은 내용이 전송됩니다.</small>
+              </label>
             </section>
           </div>
         </section>
@@ -393,7 +427,7 @@
         </aside>
       </section>
     </div>
-    <div id="presetPickerModal" class="image-modal" hidden>
+    <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">
@@ -404,8 +438,9 @@
           <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>
+      </section>
+    </div>
+    <div id="toastRegion" class="toast-region" aria-live="polite" aria-atomic="true"></div>
+    <script src="/web/main.js"></script>
   </body>
 </html>