release: v0.3.77 — Gallery SVG support, Chat SVG generation without a workflow

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

DEVLOG.md

@@ -15,6 +15,36 @@ Comic Creator（`comfyui-comic-creator`、本アプリをiframe埋め込みで
 
 **How to apply**: 「画像をComfyUIのワークフローに自動セットしてキュー実行し、結果を返す」という外部連携パターンを新設する際は、`comfyEditor.applyImageToSlot`/`setPromptText`/`setInpaintParams`/`window._wfmGenerateTab.generate`が既にマスクなし用途にも流用できる設計になっている（オプション引数は未指定なら書き込みをスキップする）。Inpaint版と重複する新規プリミティブをWorkflow Studio側に増やす必要は薄く、`_runInpaintWithImages`と同型の薄いラッパーを追加するだけで足りる。
 
+## v0.3.77
+
+### 追加機能: GalleryタブでSVGファイルの表示・管理に対応
+
+「ギャラリータブでSVGファイル表示対応させたい」という依頼を受けて調査したところ、`gallery_service.py`の`IMAGE_EXTENSIONS = {".png", ".jpg", ".jpeg", ".webp", ".gif"}`にSVGが含まれておらず、フォルダスキャン・一覧取得・削除・移動・配信のすべてで一律に除外されていたことが原因だった。フロントエンド（`gallery-tab.js`）側は拡張子フィルタを一切持たず、サムネイル・詳細プレビュー・ライトボックスすべて`<img>`タグで描画する設計だったため、バックエンドの許可リストにSVGを追加するだけで表示系は無改造で対応できた。
+
+- `gallery_service.py`: `IMAGE_EXTENSIONS`に`.svg`を追加。`serve_thumbnail()`にSVG分岐を新設し、GIF（アニメーション保持のため元ファイルを返す既存分岐）と同じ扱いで元ファイルをそのまま返すようにした。SVGはベクター画像でPillowが`Image.open()`できないため、そもそもラスタライズ縮小の意味がなく、`<img>`タグ側でブラウザが任意サイズにスケーリングして表示する前提。
+- `gallery_routes.py`: `serve_image`/`serve_thumb`のContent-Type判定は変更不要だった。Pythonの`mimetypes.guess_type()`が標準で`.svg`→`image/svg+xml`を解決するため、既存の`mimetypes.guess_type()`フォールバック分岐がそのまま機能する。
+
+**セキュリティ**: `<img src="...">`によるSVG表示は、ブラウザが`<script>`要素の実行や外部リソース読み込みを無効化する仕様のため、悪意あるSVG（埋め込みJS等）が混入していてもXSSリスクはない。`<object>`/`<iframe>`/`iframe.srcdoc`のような埋め込み方式（スクリプトが実行され得る）は使っていない。
+
+**検証**: 変更した`gallery_service.py`を`ast.parse()`で構文チェック。開発リポジトリと実行時`custom_nodes`フォルダへ同期し`__pycache__`をクリアした上でComfyUIを再起動し、実際にoutputフォルダへ配置したSVGファイルがGalleryタブでサムネイル・詳細プレビューとも正しく表示されることをユーザーが確認。
+
+**How to apply**: [[project_next_release_docs]]のような「フォーマット追加」系の変更は、フロントエンドがフォーマット非依存の`<img>`/`<video>`等で描画する設計になっている場合、バックエンドの許可拡張子リスト（`IMAGE_EXTENSIONS`）に追加するだけで大半のUIパスに波及する。逆に言えば、新形式を追加する際はこのリストが唯一のゲートになっている前提を崩さないよう注意する。
+
+### 追加機能: AI TOOL Chatでワークフロー不要のSVG生成・表示・Gallery保存
+
+Gallery SVG対応の直後、「AI TOOLのチャット機能でワークフローを使用せずにSVGを作成することは可能か」と質問された。既存のChat画像生成（`generate_image`ツールコール→ComfyUIのT2I/I2Iワークフロー実行）とは別に、SVGはXMLテキストに過ぎずLLMのテキスト生成だけで完結するため、ComfyUIワークフローもTool Calling機能も不要である旨を回答した上で、「実装する（表示+Gallery保存）」の合意を得て実装した。
+
+- `ai-tab.js`: `_extractSvgCode(text)`を新設。アシスタント応答からマークダウンのコードフェンスで囲まれたSVGコードブロック、または生の`<svg>...</svg>`タグを正規表現で抽出する。`appendChatBubble()`の`role === "assistant"`分岐に組み込み、検出時は`_appendSvgPreview()`を呼ぶ。抽出ロジックは`reply.content`（プレーンテキスト）のみを見ており、`reply.toolCalls`は一切参照しないため、モデルがtool calling（function calling）に対応していなくても動作する——「画像生成を許可する」トグルがONの場合のみ送信される`tools`パラメータとは完全に独立した経路。
+- `_appendSvgPreview()`: 抽出したSVGコードを`btoa(unescape(encodeURIComponent(svgCode)))`でBase64化し、`<img src="data:image/svg+xml;base64,...">`としてプレビュー表示（`<img>`経由のためスクリプト実行はブラウザ側で無効化され安全）。「Galleryに保存」ボタンを併設し、クリックで`/wfm/gallery/image/save`へ`{filename: "chat_svg_<timestamp>.svg", imageData: dataUrl}`をPOSTする。
+- `gallery_routes.py`の`save_image_to_gallery`: 従来は`imageData`を無条件にPNGとして扱い拡張子`.png`を強制していたが、data URLのヘッダ(`data:<mime>;base64,`)からMIMEタイプを判定し`_SAVE_EXT_BY_MIME`（png/jpeg/webp/gif/svg+xml）で拡張子を決定する汎用処理に変更。Image Edit Tabの既存呼び出し（`canvas.toDataURL("image/png")`）は引き続き`.png`として保存され後方互換。
+- CSS（`main.css`）に`.wfm-ai-chat-svg-wrapper`/`.wfm-ai-chat-svg-img`を追加（白背景パディング付きプレビュー枠、透過SVGでも視認できるように）。
+- i18n（`i18n.js`）に`aiChatSaveSvgToGallery`/`aiChatSvgSaved`/`aiChatSvgSaveFailed`を英日中3言語で追加。
+- ヘルプ文言3点セット（`templates/index.html`の`wfm-help-ai-7`、`i18n.js`の`helpAi7`英日中3言語、`app.js`の`helpIdMap`）でこの機能を追記。
+
+**検証**: 変更した`ai-tab.js`/`i18n.js`/`app.js`を`node --check`で構文チェック、`gallery_routes.py`を`ast.parse()`で構文チェック。開発リポジトリと実行時`custom_nodes`フォルダへ全ファイル同期し`__pycache__`をクリア。ユーザーがComfyUI再起動後、Chatで実際にSVGを生成させてプレビュー表示とGallery保存を確認済み。
+
+**How to apply**: LLMチャット機能に新しい出力形式（SVG、Mermaid図など、テキストとして表現できるフォーマット）を追加検討する際は、まず「ラスター画像生成のようにComfyUIワークフロー実行が本当に必要か、それともLLMのテキスト生成だけで完結するか」を切り分ける。後者であれば`reply.content`に対する検出・抽出ロジックのみで実装でき、Tool Calling対応可否に依存しない機能として提供できる。
+
 ## v0.3.75
 
 ### Lemonadeバックエンド追加(3つ目のAIバックエンド)
@@ -981,7 +1011,7 @@ v0.3.60 で実装した G'MIC-Qt 連携の動作修正・セキュリティ強
 Windows でバックグラウンドプロセス（ComfyUI）からGUIウィンドウを表示するために必須のフラグ。一度削除したが eagle_comic_creater_web の参考実装を確認して再追加した。
 
 #### 設定パスのプレースホルダー修正
-`settings-tab.js` の G'MIC-Qt パス入力フィールドのデフォルト値とプレースホルダーからユーザー固有のパス（`statsu-11`）を削除し、汎用的な `C:\path\to\gmic_qt.exe` に変更。`gmic_routes.py` のフォールバック値も同様に空文字に変更。
+`settings-tab.js` の G'MIC-Qt パス入力フィールドのデフォルト値とプレースホルダーからユーザー固有のパスを削除し、汎用的な `C:\path\to\gmic_qt.exe` に変更。`gmic_routes.py` のフォールバック値も同様に空文字に変更。
 
 ---
 
@@ -1049,7 +1079,7 @@ G'MIC-Qt 連携用の API ルートを新規作成。
 | `GET /api/wfm/gmic/status/{job_id}` | ジョブの進行状況（`pending` / `processing` / `completed` / `failed`）を返す |
 | `POST /api/wfm/gmic/result` | `result_path` を受け取り、処理済み画像を base64 エンコードして返す |
 
-- G'MIC-Qt の実行パスは Settings に保存された `gmic_qt_path` を参照。未設定の場合はデフォルトパス `C:\Users\statsu-11\gmic-3.6.5-qt-win64\gmic_qt.exe` にフォールバック。
+- G'MIC-Qt の実行パスは Settings に保存された `gmic_qt_path` を参照。未設定の場合はデフォルトパス `C:\path\to\gmic_qt.exe` にフォールバック。
 - プロセスは `subprocess.Popen` + `CREATE_NEW_CONSOLE` でノンブロッキングに起動し、スレッド内でポーリングして完了を検出。
 
 #### `py/wfm.py`

README.md

@@ -21,7 +21,7 @@ A comprehensive workflow, asset management, and generation UI plugin for [ComfyU
 - Built-in AI tools (translation and more)
 
 ![Workflow Studio](https://img.shields.io/badge/ComfyUI-Custom_Node-blue)
-![Version](https://img.shields.io/badge/version-0.3.76-green)
+![Version](https://img.shields.io/badge/version-0.3.77-green)
 
 ## Screenshots
 
@@ -197,6 +197,7 @@ Two independent modes selectable via **[Image Loop] / [Gallery]** toggle buttons
 - **Clear all filters (✕ Clear)** — rightmost toolbar button; resets search text, tag filter, group filter, and favorites filter in one click (sort order is preserved)
 - **Workflow auto-save** — images generated from the Generate UI tab have their workflow automatically saved to gallery metadata
 - **Output folder configurable** — set the scanned output folder from Settings tab
+- **SVG file support** (v0.3.77) — `.svg` files are browsable, previewable (detail panel and lightbox), and included in favorites/tags/groups/move/delete/export alongside raster formats; served as-is with no rasterized thumbnail, since `<img>` scales vector graphics natively at any size
 - **Performance** — server-side 256px JPEG thumbnail generation with disk cache (`data/thumb_cache/`); infinite-scroll paging (50 images per page, IntersectionObserver); folder-level mtime cache (60s TTL); bulk operations use single-request API endpoints
 
 ### Nodes Tab (v0.1.7)
@@ -280,6 +281,7 @@ Two independent modes selectable via **[Image Loop] / [Gallery]** toggle buttons
 - **TOOLS pane — shared Chat attachment** (v0.3.74) — an image dropped in the TOOLS drop zone is also usable as the Chat pane's attachment: it's sent to the LLM as vision input, and used as the base image when `generate_image` runs image-to-image; a ✕ button clears it (from either the TOOLS preview or the Chat attachment indicator); it stays attached across turns until explicitly cleared
 - **TOOLS pane (Wildcards)** (v0.3.40) — select "Create wildcards" from the task dropdown; enter a category name and count; click Run to generate plain-text wildcard entries one per line (no markdown, no numbering); result can be copied directly into wildcard `.txt` files
 - **Chat pane — image-to-image (I2I)** (v0.3.74) — when an image is attached and `generate_image` is invoked, the attachment is uploaded and swapped into the target workflow's LoadImage node instead of running text-to-image; the target workflow is the one currently loaded in GenerateUI, or a dedicated I2I workflow configured in the Settings pane
+- **Chat pane — SVG generation, no ComfyUI workflow involved** (v0.3.77) — the LLM can also produce SVG graphics directly as text; if a reply contains SVG code (wrapped in a markdown code fence or written directly as a bare `<svg>...</svg>`), it's rendered inline as a preview and a "Save to Gallery" button writes it as a `.svg` file to the Gallery tab's output folder; unlike the Tool Calling image generation flow above, this is plain text pattern matching, so it works with any model regardless of tool-calling support
 - **Settings pane** — choose backend (Ollama / LM Studio / Lemonade), set the API URL, test connection, select a model (with refresh button), and configure Free language names for translation source and destination
 - **Settings pane — Chat Image Generation** (v0.3.73) — "Use dedicated workflow" checkbox lets Chat-triggered image generation use a saved workflow of your choice instead of the one currently loaded in GenerateUI, without disturbing what's shown there (same pattern as Image Edit's Inpaint dedicated workflow)
 - **Settings pane — Chat I2I Generation** (v0.3.74) — same "Use dedicated workflow" pattern as above, but for image-to-image generation when an image is attached; independent of the text-to-image dedicated workflow setting
@@ -407,6 +409,11 @@ Click the **camera icon** (next to the W button) in ComfyUI's top bar to capture
 
 ## Changelog
 
+### v0.3.77
+
+- **Gallery Tab — SVG file support** — `.svg` added to `IMAGE_EXTENSIONS` (`gallery_service.py`), covering folder scanning, listing, move/delete, and serving; `serve_thumbnail()` returns the original file for SVG (same as the existing GIF case) since Pillow can't open vector images and the browser scales them natively; no frontend changes needed since `gallery-tab.js` renders every image through plain `<img>` tags
+- **AI TOOL Chat — SVG generation without a ComfyUI workflow** — assistant replies are now scanned for SVG code (wrapped in a markdown code fence or written directly as a bare `<svg>...</svg>`); when found, it's rendered inline via `<img src="data:image/svg+xml;base64,...">` (script execution is disabled by the browser for SVG loaded through `<img>`) with a "Save to Gallery" button; `/wfm/gallery/image/save` (`gallery_routes.py`) was generalized to detect the target format from the data URL's MIME type instead of assuming PNG, so both Image Edit Tab's PNG saves and Chat's SVG saves go through the same endpoint
+
 ### v0.3.76
 
 - **Comic Creator — I2I execution bridge** — added `window._wfmReceiveI2IRunRequest` (`gallery-tab.js`) and `runI2IExternal()`/`_runI2IWithImage()` (`image-edit-tab.js`), a mask-free counterpart to the existing Inpaint bridge (`_wfmReceiveInpaintRequest`/`runInpaintExternal`); lets Comic Creator's Image tab send an image with Positive/Negative prompts and Denoise, run generation in place, and get the result image URL back without opening the Workflow Studio UI

py/routes/gallery_routes.py

@@ -260,8 +260,18 @@ async def toggle_favorite(request: web.Request) -> web.Response:
         return web.json_response({"error": str(e)}, status=500)
 
 
+_SAVE_EXT_BY_MIME = {
+    "image/png": ".png",
+    "image/jpeg": ".jpg",
+    "image/webp": ".webp",
+    "image/gif": ".gif",
+    "image/svg+xml": ".svg",
+}
+
+
 async def save_image_to_gallery(request: web.Request) -> web.Response:
-    """Image Edit Tab からの PNG をギャラリーのルートフォルダに保存する。"""
+    """Image Edit Tab / AI Chat からの画像(PNG等)やSVGをギャラリーのルートフォルダに保存する。
+    imageData は data URL (data:<mime>;base64,<data>) を想定。ヘッダがなければPNG扱い（旧互換）。"""
     try:
         body = await request.json()
         filename   = body.get("filename", "").strip()
@@ -273,15 +283,21 @@ async def save_image_to_gallery(request: web.Request) -> web.Response:
         if _service._allowed_root is None:
             return web.json_response({"error": "Gallery root not configured. Open Gallery tab and set output folder first."}, status=500)
 
+        # data URL から MIME タイプを判定し、拡張子を決定する
+        raw = image_data
+        mime = "image/png"
+        if raw.startswith("data:"):
+            header, _, raw = raw.partition(",")
+            m = re.match(r"data:([^;]+)", header)
+            if m:
+                mime = m.group(1)
+        ext = _SAVE_EXT_BY_MIME.get(mime, ".png")
+
         # ファイル名サニタイズ（OSで使えない文字を除去）
         safe = re.sub(r'[<>:"/\\|?*\x00-\x1f]', "_", filename)
-        if not safe.lower().endswith(".png"):
-            safe += ".png"
+        if not safe.lower().endswith(ext):
+            safe += ext
 
-        # base64 data URL をデコード
-        raw = image_data
-        if "," in raw:
-            raw = raw.split(",", 1)[1]
         image_bytes = base64.b64decode(raw)
 
         save_path = _service._allowed_root / safe

py/services/gallery_service.py

@@ -16,7 +16,7 @@ from typing import Any
 logger = logging.getLogger(__name__)
 
 # サポートする画像拡張子
-IMAGE_EXTENSIONS = {".png", ".jpg", ".jpeg", ".webp", ".gif"}
+IMAGE_EXTENSIONS = {".png", ".jpg", ".jpeg", ".webp", ".gif", ".svg"}
 
 # メタデータ保存ファイル (gallery専用)
 from .gallery_metadata import GalleryMetadataStore
@@ -684,6 +684,11 @@ class GalleryService:
         if p.suffix.lower() == ".gif":
             return p
 
+        # SVG はベクター画像でPillowが開けないため、元ファイルをそのまま返す
+        # (<img>タグはブラウザ側で任意サイズにスケーリングして表示する)
+        if p.suffix.lower() == ".svg":
+            return p
+
         try:
             mtime = int(p.stat().st_mtime * 1000)
         except OSError:

pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "comfyui-workflow-studio"
 description = "A comprehensive workflow, asset management, and generation UI plugin for ComfyUI. Manage workflows, models, images, and prompts; batch generation and Image Feeder in the GenerateUI tab; library side panel with canvas drag & drop and AI tools."
-version = "0.3.76"
+version = "0.3.77"
 license = "MIT"
 requires-python = ">= 3.10"
 dependencies = ["jinja2"]

static/css/main.css

@@ -5624,6 +5624,23 @@ body {
     object-fit: cover;
 }
 
+.wfm-ai-chat-svg-wrapper {
+    margin-top: 6px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+}
+
+.wfm-ai-chat-svg-img {
+    max-width: 240px;
+    max-height: 240px;
+    border-radius: 6px;
+    border: 1px solid var(--wfm-border);
+    background: #fff;
+    padding: 6px;
+}
+
 .wfm-ai-chat-attachment {
     display: flex;
     align-items: center;

static/js/ai-tab.js

@@ -534,6 +534,55 @@ async function generateImageFromChat(prompt, negativePrompt) {
     return `/view?filename=${encodeURIComponent(img.filename)}&subfolder=${encodeURIComponent(img.subfolder || "")}&type=${encodeURIComponent(img.type || "output")}`;
 }
 
+// アシスタント応答からSVGコードを抽出する（```svg フェンス or 生の <svg>...</svg>）
+function _extractSvgCode(text) {
+    if (!text) return null;
+    const fenced = text.match(/```(?:svg|xml)?\s*([\s\S]*?<svg[\s\S]*?<\/svg>)[\s\S]*?```/i);
+    if (fenced) return fenced[1].trim();
+    const bare = text.match(/<svg[\s\S]*?<\/svg>/i);
+    if (bare) return bare[0].trim();
+    return null;
+}
+
+// SVGコードをプレビュー表示し、Galleryへ保存するボタンを追加する。
+// <img src="data:..."> でのレンダリングはブラウザがスクリプト実行を無効化するため安全。
+function _appendSvgPreview(container, svgCode) {
+    const wrapper = document.createElement("div");
+    wrapper.className = "wfm-ai-chat-svg-wrapper";
+
+    const dataUrl = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svgCode)))}`;
+
+    const img = document.createElement("img");
+    img.src = dataUrl;
+    img.className = "wfm-ai-chat-svg-img";
+    img.alt = "Generated SVG";
+    wrapper.appendChild(img);
+
+    const saveBtn = document.createElement("button");
+    saveBtn.className = "wfm-btn wfm-btn-sm";
+    saveBtn.textContent = t("aiChatSaveSvgToGallery");
+    saveBtn.addEventListener("click", async () => {
+        saveBtn.disabled = true;
+        try {
+            const res = await fetch("/wfm/gallery/image/save", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ filename: `chat_svg_${Date.now()}.svg`, imageData: dataUrl }),
+            });
+            const data = await res.json();
+            if (!res.ok || data.error) throw new Error(data.error || `HTTP ${res.status}`);
+            showToast(t("aiChatSvgSaved"), "success");
+        } catch (e) {
+            showToast(t("aiChatSvgSaveFailed") + e.message, "error");
+        } finally {
+            saveBtn.disabled = false;
+        }
+    });
+    wrapper.appendChild(saveBtn);
+
+    container.appendChild(wrapper);
+}
+
 function appendChatBubble(messagesEl, role, content, opts = {}) {
     const div = document.createElement("div");
     div.className = `wfm-ai-chat-msg wfm-ai-chat-msg-${role}`;
@@ -550,6 +599,10 @@ function appendChatBubble(messagesEl, role, content, opts = {}) {
         img.className = "wfm-ai-chat-attach-thumb";
         div.appendChild(img);
     }
+    if (role === "assistant" && content) {
+        const svgCode = _extractSvgCode(content);
+        if (svgCode) _appendSvgPreview(div, svgCode);
+    }
     messagesEl.appendChild(div);
     messagesEl.scrollTop = messagesEl.scrollHeight;
     return div;

static/js/app.js

@@ -433,6 +433,7 @@ function applyI18nToHtml() {
         "wfm-help-ai-title": "helpAiTitle",
         "wfm-help-ai-1": "helpAi1", "wfm-help-ai-2": "helpAi2", "wfm-help-ai-3": "helpAi3",
         "wfm-help-ai-4": "helpAi4", "wfm-help-ai-5": "helpAi5", "wfm-help-ai-6": "helpAi6",
+        "wfm-help-ai-7": "helpAi7",
         "wfm-help-imageedit-title": "helpImageEditTitle",
         "wfm-help-imageedit-tools-title": "helpImageEditToolsTitle",
         "wfm-help-imageedit-layer-title": "helpImageEditLayerTitle",

static/js/i18n.js

@@ -611,6 +611,9 @@ const LANGUAGES = {
         aiChatGenerateNotReady: "GenerateUI is not ready yet",
         aiChatNoImageProduced: "Generation completed but no image was produced",
         aiToastImageGenFailed: "Image generation failed: ",
+        aiChatSaveSvgToGallery: "Save to Gallery",
+        aiChatSvgSaved: "SVG saved to gallery",
+        aiChatSvgSaveFailed: "Failed to save SVG: ",
         aiChatImgGenToggle: "Allow image generation",
         aiSettingsChatGenTitle: "Chat Image Generation",
         aiSettingsChatGenDedicated: "Use dedicated workflow",
@@ -770,6 +773,7 @@ const LANGUAGES = {
         helpAi4: "TOOLS pane — VLM: drop an image (PNG/JPG/WebP) and select a task (Describe Image, Create Prompt, Create Tags), click Run; or select \"Create wildcards\", enter a category name and count to generate plain-text entries one per line; the dropped image is also shared with the Chat pane as its attachment (shown there and used for image-to-image generation) until cleared with the ✕ button",
         helpAi5: "Settings pane: choose backend (Ollama / LM Studio / Lemonade), set API URL, test connection, select model, configure Free language names for translation",
         helpAi6: "Settings pane: choose backend (Ollama / LM Studio / Lemonade), set API URL, test connection, select model, configure Free language names; Chat Image Generation section lets you enable a dedicated workflow for Chat-triggered text-to-image generation instead of the one currently loaded in GenerateUI; Chat I2I Generation section is the same but for image-to-image generation when an image is attached; settings are shared with the Library panel's A tab via localStorage",
+        helpAi7: "Chat pane — SVG: the LLM can also produce SVG graphics directly as text, with no ComfyUI workflow involved; ask it to draw something in SVG and, if the reply contains SVG code, it is rendered inline as a preview with a \"Save to Gallery\" button that writes it as a .svg file to the Gallery tab's output folder; this does not use tool calling, so it works with any model regardless of tool-calling support",
         helpImageEditTitle: "Image Edit Tab",
         helpImageEdit1: "Layer-based image editor — compose images with multiple layers (Image, Text, Draw, Mask types) and export the composite",
         helpImageEdit2: "Loading images: drag & drop onto the canvas, Upload button, or send from the Gallery tab via the Image Edit button in the Gallery toolbar; the first image becomes Layer 1 (auto-locked); subsequent images are added as new layers scaled to fit the canvas",
@@ -1617,6 +1621,9 @@ const LANGUAGES = {
         aiChatGenerateNotReady: "GenerateUIの準備ができていません",
         aiChatNoImageProduced: "生成は完了しましたが画像が出力されませんでした",
         aiToastImageGenFailed: "画像生成に失敗しました: ",
+        aiChatSaveSvgToGallery: "Galleryに保存",
+        aiChatSvgSaved: "SVGをGalleryに保存しました",
+        aiChatSvgSaveFailed: "SVGの保存に失敗しました: ",
         aiChatImgGenToggle: "画像生成を許可する",
         aiSettingsChatGenTitle: "Chat画像生成",
         aiSettingsChatGenDedicated: "専用ワークフローを使用",
@@ -1776,6 +1783,7 @@ const LANGUAGES = {
         helpAi4: "TOOLS ペイン — VLM：画像（PNG/JPG/WebP）をドロップしてタスク（画像解説 / プロンプト作成 / タグ作成）を選んで Run；または「Create wildcards」を選んでカテゴリ名と件数を入力すると1行1エントリのワイルドカードを生成；ドロップした画像はChatペインの添付としても共有され（Chat側にも表示、I2I生成に使用）、✕ボタンでクリアするまで保持される",
         helpAi5: "設定ペイン：バックエンド（Ollama / LM Studio / Lemonade）・API URL・接続テスト・モデル選択・Free 言語名を設定",
         helpAi6: "Settings ペイン：バックエンド（Ollama / LM Studio / Lemonade）の選択、APIのURL設定、接続テスト、モデル選択、Free言語名の設定；Chat Image Generationセクションでは、ChatからのT2I画像生成にGenerateUIの現在の読み込みワークフローの代わりに専用ワークフローを使うよう設定できる；Chat I2I Generationセクションは同様の設定を画像添付時のI2I生成向けに提供する；設定は localStorage に保存され、Library パネルの A タブと共有される",
+        helpAi7: "Chat ペイン — SVG：LLMはComfyUIワークフローを一切使わず、SVGグラフィックをテキストとして直接生成することもできる；「SVGで〜を描いて」のように頼み、応答にSVGコードが含まれていれば自動でインラインプレビュー表示され、「Galleryに保存」ボタンでGalleryタブの出力フォルダに.svgファイルとして保存できる；tool calling（function calling）を使用しないため、tool calling非対応のモデルでも動作する",
         helpImageEditTitle: "Image Edit タブ",
         helpImageEdit1: "レイヤーベースの画像エディタ — 複数のレイヤー（画像・テキスト・描画・マスク）を重ね合わせて画像を合成・エクスポート",
         helpImageEdit2: "画像の読み込み：キャンバスへのドラッグ＆ドロップ、Uploadボタン、またはGalleryタブのImage Editボタンから送信；最初の画像はLayer 1として自動ロック；以降の画像はキャンバスサイズに合わせてスケールされ新規レイヤーとして追加",
@@ -2622,6 +2630,9 @@ const LANGUAGES = {
         aiChatGenerateNotReady: "GenerateUI 尚未就绪",
         aiChatNoImageProduced: "生成完成但未产生图像",
         aiToastImageGenFailed: "图像生成失败：",
+        aiChatSaveSvgToGallery: "保存到图库",
+        aiChatSvgSaved: "SVG已保存到图库",
+        aiChatSvgSaveFailed: "SVG保存失败：",
         aiChatImgGenToggle: "允许生成图像",
         aiSettingsChatGenTitle: "Chat 图像生成",
         aiSettingsChatGenDedicated: "使用专用工作流",
@@ -2781,6 +2792,7 @@ const LANGUAGES = {
         helpAi4: "TOOLS 面板 — VLM：拖放图像（PNG/JPG/WebP）并选择任务（图像描述 / 提示词生成 / 标签生成），点击 Run；或选择「Create wildcards」，输入类别名称和数量生成纯文本通配符条目（每行一条）；拖放的图像也会作为 Chat 面板的附件共享（在该处显示并用于图生图生成），直到点击 ✕ 按钮清除",
         helpAi5: "设置面板：选择后端（Ollama / LM Studio / Lemonade）、设置 API URL、测试连接、选择模型、配置 Free 语言名称",
         helpAi6: "Settings 面板：选择后端（Ollama / LM Studio / Lemonade）、设置 API URL、测试连接、选择模型、配置 Free 语言名称；Chat 图像生成部分可让 Chat 触发的文生图使用专用工作流，而不是 GenerateUI 中当前加载的工作流；Chat I2I 生成部分提供相同设置，用于附加图像时的图生图生成；设置保存至 localStorage，并与 Library 面板的 A 标签共享",
+        helpAi7: "Chat 面板 — SVG：LLM 还可以直接以文本形式生成 SVG 图形，完全不涉及 ComfyUI 工作流；只需要求它用 SVG 绘制内容，如果回复中包含 SVG 代码，会自动渲染为内嵌预览，并提供\"保存到图库\"按钮，将其保存为 .svg 文件到 Gallery 标签页的输出文件夹；该功能不使用 tool calling（函数调用），因此不支持 tool calling 的模型也可以使用",
         helpImageEditTitle: "图像编辑选项卡",
         helpImageEdit1: "基于图层的图像编辑器 — 通过多个图层（图像、文字、绘制、遮罩类型）合成图像并导出",
         helpImageEdit2: "加载图像：拖放到画布、点击Upload按钮、或通过Gallery标签工具栏的Image Edit按钮发送；第一张图像成为图层1（自动锁定）；后续图像缩放至画布大小作为新图层添加",

templates/index.html

@@ -1288,6 +1288,7 @@
                                 <li id="wfm-help-ai-4">TOOLS pane — VLM: drop an image (PNG/JPG/WebP) and select a task (Describe Image, Create Prompt, Create Tags), then click Run to analyze with a vision model; result shown with Copy button; the dropped image is also shared with the Chat pane as its attachment (shown there and used for image-to-image generation) until cleared with the ✕ button</li>
                                 <li id="wfm-help-ai-5">TOOLS pane — Wildcards: select "Create wildcards" from the dropdown, enter a category name and count, click Run to generate plain-text wildcard entries one per line</li>
                                 <li id="wfm-help-ai-6">Settings pane: choose backend (Ollama / LM Studio / Lemonade), set API URL, test connection, select model, configure Free language names; Chat Image Generation section lets you enable a dedicated workflow for Chat-triggered text-to-image generation instead of the one currently loaded in GenerateUI; Chat I2I Generation section is the same but for image-to-image generation when an image is attached; settings are shared with the Library panel's A tab via localStorage</li>
+                                <li id="wfm-help-ai-7">Chat pane — SVG: the LLM can also produce SVG graphics directly as text, with no ComfyUI workflow involved; ask it to draw something in SVG and, if the reply contains SVG code, it is rendered inline as a preview with a "Save to Gallery" button that writes it as a .svg file to the Gallery tab's output folder; this does not use tool calling, so it works with any model regardless of tool-calling support</li>
                             </ul>
                         </div>
                     </div>