feat: Add natural language suggestion mode (non-tag based prompts)

Merge Dev

.github/workflows/test.yml

@@ -12,9 +12,9 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Set up Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
-          node-version: '18'
+          node-version: '22'
           cache: 'npm'
 
       - name: Install dependencies

README.md

@@ -118,11 +118,28 @@ When the browser is reloaded, you can check the list of loaded CSV files in the
 >[!NOTE]
 > If there are multiple user CSV files, they are loaded in alphabetical order. If the same tag exists in multiple files, the one loaded first is retained. The basic CSV is loaded last.
 
+### Bulk Tag Insertion (Pseudo "Chants")
+
+By enclosing multiple tags with `""` (double quotation marks), you can insert frequently used tags in bulk.
+This is similar to the **Chants** feature in [DominikDoom/a1111-sd-webui-tagcomplete](https://github.com/DominikDoom/a1111-sd-webui-tagcomplete?tab=readme-ov-file#chants).
+
+For example, by preparing the following CSV, you can quickly insert corresponding tags by typing `<c:Basic-HighQuality>` or `<c:Basic-Negative>`.
+
+**`danbooru_tags_chants.csv`:**
+```
+"masterpiece, best quality, high quality, highres, ultra-detailed",5,9999999,<c:Basic-HighQuality>
+"(worst quality, low quality:1.4), normal quality",5,9999999,<c:Basic-Negative>
+```
+
+>[!TIP]
+> * Text enclosed in `""` does not escape `()` (parentheses). Tags that originally contain parentheses should be written in the CSV with escaped parentheses. Example: `copyright_(series)` -> `copyright_\(series\)`
+> * The alias column also supports `""`, allowing you to assign multiple aliases
+
 ## Settings
 
 ### Tag Source
 
-> [!TIP]
+> [!NOTE]
 > The source of tag data such as Danbooru or e621 is called the "tag source".
 
 - **Autocomplete Tag Source**: The tag source to display in the autocomplete suggestions. Select "all" to display all loaded tag sources.
@@ -133,6 +150,7 @@ When the browser is reloaded, you can check the list of loaded CSV files in the
 
 - **Enable Autocomplete**: Enable/disable the autocomplete feature.
 - **Max suggestions**: Maximum number of autocomplete suggestions to display.
+- **Replace '_' with 'Space'**: Replaces underscores with spaces when inserting tags. This setting also affects related tag display.
 - **Enable Loras and Embeddings**: Display Lora and Embedding in the suggestions.
 - **Use Fast Search**: Switch autocomplete suggestions search to fast processing (see [About Fast Search for Autocomplete](#about-fast-search-for-autocomplete) for details).
 
@@ -143,9 +161,9 @@ When the browser is reloaded, you can check the list of loaded CSV files in the
 - **Default Display Position**: Default display position when ComfyUI starts.
 - **Related Tags Trigger Mode**: Which action will trigger displaying related tags (click only, Ctrl+click)
 
-### Miscellaneous
+### Display
 
-- **Check CSV updates**: Click the "Check Now" button to check if new CSV files are available in HuggingFace and download them if necessary.
+- **Hide Alias**: Hide/show the Alias ​​column in autocomplete and related tags (default is show)
 
 ## Advanced Settings
 

docs/README_jp.md

@@ -116,11 +116,28 @@ worst_quality,5,9999999,
 >[!NOTE]
 > ユーザー CSV が複数ある場合アルファベット順に読み込まれます。同じタグが複数のファイルに存在する場合は先に読み込まれた方が保持されます。基本 CSV は最後にロードされます。
 
+### 複数タグの一括挿入機能（疑似 Chants）
+
+`""` （ダブルクォーテーション）で複数タグを囲むことで、よく使うタグを一括で挿入できます。
+これは [DominikDoom/a1111-sd-webui-tagcomplete](https://github.com/DominikDoom/a1111-sd-webui-tagcomplete?tab=readme-ov-file#chants) で **Chants** と呼ばれる機能に似ています。
+
+例として以下のCSVを用意することで、`<c:Basic-HighQuality>` や `<c:Basic-Negative>` と入力して対応したタグを素早く挿入出来ます。
+
+**`danbooru_tags_chants.csv`:**
+```
+"masterpiece, best quality, high quality, highres, ultra-detailed",5,9999999,<c:Basic-HighQuality>
+"(worst quality, low quality:1.4), normal quality",5,9999999,<c:Basic-Negative>
+```
+
+>[!TIP]
+> * `""` で囲まれたテキストは `()` （括弧）がエスケープされません。元々括弧が含まれるタグはエスケープした状態でCSVに記述してください。 例： `copyright_(series)` -> `copyright_\(series\)`
+> * エイリアス列も `""` に対応しているので、複数のエイリアスを付けられます
+
 ## 設定
 
 ### タグソース
 
-> [!TIP]
+> [!NOTE]
 > Danbooruやe621等のタグデータの提供元を「タグソース」と呼びます
 
 - **Autocomplete Tag Source**: オートコンプリート候補に表示するタグソース。「all」を選択するとロード済みの全てのタグソースを表示します
@@ -131,6 +148,7 @@ worst_quality,5,9999999,
 
 - **Enable Autocomplete**: オートコンプリート機能の有効化/無効化
 - **Max Suggestions**: オートコンプリート候補の最大表示件数
+- **Replace '_' with 'Space'**: タグ挿入時にアンダースコアをスペースに置き換えます。この設定は関連タグ表示にも影響します
 - **Enable Loras and Embeddings**: LoraとEmbeddingを候補に表示する
 - **Use Fast Search**: オートコンプリート候補の検索を高速な処理に切り替える（詳細は [オートコンプリートの高速検索について](#オートコンプリートの高速検索について) を確認してください)
 
@@ -141,9 +159,9 @@ worst_quality,5,9999999,
 - **Default Display Position**: ComfyUI起動時のデフォルト表示位置
 - **Related Tags Trigger Mode** : 関連タグを表示する際、どの操作をトリガーとするか（クリックのみ、Ctrl+クリック）
 
-### その他
+### 表示
 
-- **Check CSV updates**: 「Check Now」ボタンを押すと新しい CSV ファイルがHuggingFaceにあるか確認し、必要に応じてダウンロードを行います
+- **Hide Alias**: オートコンプリートと関連タグで表示されるエイリアス列の非表示/表示を切り替え（デフォルトは表示です）
 
 ## 上級者向け設定
 

modules/downloader.py

@@ -235,16 +235,7 @@ class Downloader:
 
     def _check_new_csv_from_hf_dataset(self, dataset_meta: dict, now_utc: datetime, force_check: bool = False):
         """Checks HuggingFace for file updates and updates metadata."""
-        perform_hf_check = True
-        if not force_check and dataset_meta.get("last_remote_check_timestamp"):
-            try:
-                last_check_dt = datetime.fromisoformat(dataset_meta["last_remote_check_timestamp"])
-                if now_utc - last_check_dt < timedelta(days=7):
-                    perform_hf_check = False
-            except (ValueError, KeyError, TypeError):
-                print(
-                    "[Autocomplete-Plus] Invalid or missing timestamp for last_remote_check_timestamp. Will perform remote check."
-                )
+        perform_hf_check = force_check
 
         if perform_hf_check:
             huggingface_dataset_id = dataset_meta["hf_dataset_id"]
@@ -303,15 +294,16 @@ class Downloader:
             return f"File {file_name} is missing or empty locally."
 
         # Check if the last modified date on HuggingFace is newer than the last download date
-        try:
-            last_download_dt = datetime.fromisoformat(file_meta_entry["last_download"])
-            hf_modified_dt = datetime.fromisoformat(file_meta_entry["last_modified_on_hf"])
-            if hf_modified_dt > last_download_dt:
-                return f"Remote file {file_name} is newer (HF: {last_download_dt}, Local Download: {hf_modified_dt})."
-        except (ValueError, TypeError):
-            file_meta_entry["last_download"] = None
-            file_meta_entry["last_modified_on_hf"] = None
-            return f"Invalid timestamp format for {file_name}. Forcing download to ensure integrity."
+        # Temporarily comment out until changes to remote files can be detected
+        # try:
+        #     last_download_dt = datetime.fromisoformat(file_meta_entry["last_download"])
+        #     hf_modified_dt = datetime.fromisoformat(file_meta_entry["last_modified_on_hf"])
+        #     if hf_modified_dt > last_download_dt:
+        #         return f"Remote file {file_name} is newer (HF: {hf_modified_dt}, Local Download: {last_download_dt})."
+        # except (ValueError, TypeError):
+        #     file_meta_entry["last_download"] = None
+        #     file_meta_entry["last_modified_on_hf"] = None
+        #     return f"Invalid timestamp format for {file_name}. Forcing download to ensure integrity."
 
         # If the file is missing or empty, but the last download timestamp exists, we need to retry.
         if not check_file_valid(local_file_path) and file_meta_entry.get("last_download") is not None:

package.json

@@ -6,9 +6,9 @@
   "devDependencies": {
     "@babel/core": "^7.27.1",
     "@babel/preset-env": "^7.27.2",
-    "babel-jest": "^29.7.0",
+    "babel-jest": "^30.2.0",
     "env-cmd": "^10.1.0",
-    "jest": "^29.7.0",
+    "jest": "^30.2.0",
     "stylelint": "^16.19.1",
     "stylelint-config-idiomatic-order": "^10.0.0",
     "stylelint-config-standard": "^38.0.0"

pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "comfyui-autocomplete-plus"
 description = "Autocomplete and Related Tag display for ComfyUI"
-version = "1.3.1"
+version = "1.6.1"
 license = {file = "LICENSE"}
 dependencies = ["",]
 

tests/js/autocomplete.test.js

@@ -0,0 +1,504 @@
+import {
+    __test__
+} from "../../web/js/autocomplete.js";
+import {
+    TagData,
+    TagSource,
+    ModelTagSource,
+    autoCompleteData
+} from "../../web/js/data.js";
+import {
+    settingValues
+} from "../../web/js/settings.js";
+import {
+    createFlexSearchDocument,
+    createFlexSearchDocumentForModel
+} from "../../web/js/searchengine.js"
+
+const {
+    searchCompletionCandidates,
+    sequentialSearch,
+    searchWithFlexSearch,
+    matchWord,
+    getCurrentPartialTag,
+    insertTagToTextArea
+} = __test__;
+
+
+// Helper function to create mock textarea element
+function createMockTextarea(value, selectionStart, selectionEnd = -1) {
+    let mock = {
+        value: value,
+        selectionStart: selectionStart,
+        selectionEnd: selectionEnd > selectionStart ? selectionEnd : selectionStart,
+        nodeName: 'TEXTAREA',
+        focus() { document.setFocus(this); },
+        setSelectionRange: (start, end) => {
+            mock.selectionStart = start;
+            mock.selectionEnd = end;
+        },
+        getBoundingClientRect: () => ({
+            top: 0,
+            left: 0,
+            width: 300,
+            height: 100
+        }),
+        scrollTop: 0,
+        scrollLeft: 0,
+        ownerDocument: {
+            defaultView: typeof window !== 'undefined' ? window : {},
+            documentElement: typeof document !== 'undefined' ? document.documentElement : {}
+        },
+        dispatchEvent: () => { }
+    };
+    return mock;
+}
+
+// Test data setup function
+function setupTestData() {
+    // Clear existing data
+    Object.keys(autoCompleteData).forEach(key => delete autoCompleteData[key]);
+
+    // Create mock AutocompleteData structure for each source
+    const sources = [...Object.values(TagSource), ...Object.values(ModelTagSource)];
+
+    sources.forEach(source => {
+        autoCompleteData[source] = {
+            flexSearchDocument: null,
+            sortedTags: [],
+            tagMap: new Map(),
+            aliasMap: new Map(),
+            cooccurrenceMap: new Map(),
+            isInitializing: false,
+            initialized: true,
+            baseLoadingProgress: {
+                cooccurrence: 0
+            }
+        };
+    });
+
+    // Add sample tag data for testing
+    const sampleTags = [
+        new TagData('1girl', 0, 1000000, ['one_girl'], TagSource.Danbooru),
+        new TagData('blue_hair', 0, 500000, ['blue hair'], TagSource.Danbooru),
+        new TagData('long_hair', 0, 800000, [], TagSource.Danbooru),
+        new TagData('smile', 0, 700000, [], TagSource.Danbooru),
+        new TagData('__wildcard__', 0, 100, [], TagSource.Danbooru),
+        new TagData(':d', 0, 50000, [], TagSource.Danbooru),
+        new TagData('test_tag', 0, 1000, ['test'], TagSource.E621),
+        new TagData('<lora:test_model>', 0, 0, [], ModelTagSource.Lora),
+        new TagData('embedding:test_embedding', 0, 0, [], ModelTagSource.Embeddings)
+    ];
+
+    // Distribute tags across sources
+    sampleTags.forEach(tagData => {
+        const source = tagData.source;
+        autoCompleteData[source].sortedTags.push(tagData);
+        autoCompleteData[source].tagMap.set(tagData.tag, tagData);
+
+        // Add aliases to alias map
+        if (tagData.alias && Array.isArray(tagData.alias)) {
+            tagData.alias.forEach(alias => {
+                autoCompleteData[source].aliasMap.set(alias, tagData.tag);
+            });
+        }
+    });
+
+    // Sort tags and build flexsearch index
+    sources.forEach(source => {
+        autoCompleteData[source].sortedTags.sort((a, b) => b.count - a.count);
+
+        const isModelSrc = Object.values(ModelTagSource).includes(source);
+        let doc;
+        if (isModelSrc) {
+            doc = createFlexSearchDocumentForModel();
+        } else {
+            doc = createFlexSearchDocument();
+        }
+        autoCompleteData[source].sortedTags.forEach((tagData, i) => {
+            doc.add({
+                id: i,
+                tag: tagData.tag,
+                alias: tagData.alias.join(',')
+            });
+        });
+
+        autoCompleteData[source].flexSearchDocument = doc;
+    });
+
+
+    // Mock global document
+    global.document = {
+        focusedElement: null,
+        setFocus: function (element) {
+            this.focusedElement = element;
+        },
+        execCommand: (commandId, showUI, value) => {
+            switch (commandId) {
+                case "insertText":
+                    if (document.focusedElement) {
+                        const el = document.focusedElement;
+                        const start = el.selectionStart;
+                        const end = el.selectionEnd;
+                        el.value = el.value.substring(0, start) + value + el.value.substring(end);
+                        el.selectionStart = el.selectionEnd = start + value.length;
+                    }
+                    return true;
+                default:
+                    throw new Error('Not implemented!');
+            }
+        },
+        createElement: () => ({
+            id: '',
+            style: {},
+            innerHTML: '',
+            appendChild: () => { },
+            getBoundingClientRect: () => ({
+                top: 0,
+                left: 0,
+                width: 300,
+                height: 100
+            })
+        }),
+        setFocus: (element) => {
+            document.focusedElement = element;
+        },
+        body: {
+            appendChild: () => { },
+            removeChild: () => { }
+        },
+        focusedElement: null
+    };
+
+    // Mock global window
+    global.window = {
+        getComputedStyle: () => ({
+            lineHeight: '20px',
+            fontSize: '14px',
+            fontFamily: 'Arial'
+        })
+    };
+}
+
+describe('Autocomplete Functions', () => {
+    beforeEach(() => {
+        // Set tag mode as default
+        settingValues.useFastSearch = false;
+        settingValues.naturalLanguageMode = false;
+        settingValues.replaceUnderscoreWithSpace = true;
+
+        setupTestData();
+    });
+
+    describe('matchWord', () => {
+
+        test('should match exact queries', () => {
+            const queries = new Set(['1girl', '1girls']);
+            const result = matchWord('1girl', queries);
+
+            expect(result.matched).toBe(true);
+            expect(result.isExactMatch).toBe(true);
+        });
+
+        test('should match partial queries', () => {
+            const queries = new Set(['girl']);
+            const result = matchWord('1girl', queries);
+
+            expect(result.matched).toBe(true);
+            expect(result.isExactMatch).toBe(false);
+        });
+
+        test('should handle wildcard prefixes', () => {
+            const queries = new Set(['__wild']);
+            const result = matchWord('__wildcard__', queries);
+
+            expect(result.matched).toBe(true);
+            expect(result.isExactMatch).toBe(false);
+        });
+
+        test('should handle symbol-only queries', () => {
+            const queries = new Set([':d']);
+            const result = matchWord(':d', queries);
+
+            expect(result.matched).toBe(true);
+            expect(result.isExactMatch).toBe(true);
+        });
+
+        test('should match after removing common symbols', () => {
+            const queries = new Set(['blue hair']);
+            const result = matchWord('blue_hair', queries);
+
+            expect(result.matched).toBe(true);
+            expect(result.isExactMatch).toBe(false);
+        });
+
+        test('should not match unrelated queries', () => {
+            const queries = new Set(['test']);
+            const result = matchWord('1girl', queries);
+
+            expect(result.matched).toBe(false);
+            expect(result.isExactMatch).toBe(false);
+        });
+
+    });
+
+    describe('getCurrentPartialTag', () => {
+
+        test('should extract partial tag before cursor', () => {
+            const textarea = createMockTextarea('1girl, blue_hair', 14);
+            const result = getCurrentPartialTag(textarea);
+
+            expect(typeof result).toBe('string');
+            expect(result).toBe('blue_ha');
+        });
+
+        test('should return full tag when cursor is at the end', () => {
+            const textarea = createMockTextarea('1girl', 5);
+            const result = getCurrentPartialTag(textarea);
+
+            expect(typeof result).toBe('string');
+            expect(result).toBe('1girl');
+        });
+
+        test('should handle empty textarea', () => {
+            const textarea = createMockTextarea('', 0);
+            const result = getCurrentPartialTag(textarea);
+
+            expect(typeof result).toBe('string');
+            expect(result).toBe('');
+        });
+
+        test('should handle newline separators', () => {
+            const textarea = createMockTextarea('1girl\nblue_h', 12);
+            const result = getCurrentPartialTag(textarea);
+
+            expect(typeof result).toBe('string');
+            expect(result).toBe('blue_h');
+        });
+
+    });
+
+    describe('searchCompletionCandidates', () => {
+        test('should return an empty array for empty input', () => {
+            const textarea = createMockTextarea('', 0);
+            const results = searchCompletionCandidates(textarea);
+
+            expect(Array.isArray(results)).toBe(true);
+            expect(results.length).toBe(0);
+        });
+
+        test('should return an empty array for null input', () => {
+            const results = searchCompletionCandidates(null);
+            expect(Array.isArray(results)).toBe(true);
+            expect(results.length).toBe(0);
+        });
+
+        test('should return an empty array for undefined input', () => {
+            const results = searchCompletionCandidates(undefined);
+            expect(Array.isArray(results)).toBe(true);
+            expect(results.length).toBe(0);
+        });
+
+        test('should return multiple candidates for valid input', () => {
+            const textarea = createMockTextarea('test', 4);
+            const results = searchCompletionCandidates(textarea);
+
+            expect(Array.isArray(results)).toBe(true);
+            expect(results.map(tagData => tagData.tag))
+                .toEqual(expect.arrayContaining([
+                    'test_tag', '<lora:test_model>', 'embedding:test_embedding'
+                ]));
+        });
+
+        test('should find wildcard tag', () => {
+            const textarea = createMockTextarea('__wild', 6);
+            const results = searchCompletionCandidates(textarea);
+
+            expect(Array.isArray(results)).toBe(true);
+            expect(results.map(tagData => tagData.tag))
+                .toEqual(expect.arrayContaining(['__wildcard__']));
+        });
+
+        test('should find emoticon tag', () => {
+            const textarea = createMockTextarea(':d', 2);
+            const results = searchCompletionCandidates(textarea);
+
+            expect(Array.isArray(results)).toBe(true);
+            expect(results.map(tagData => tagData.tag))
+                .toEqual(expect.arrayContaining([':d']));
+        });
+    });
+
+    describe('sequentialSearch', () => {
+
+        test('should find and return matching tags', () => {
+            const partialTag = 'test';
+            const queryVariations = new Set([partialTag.toLowerCase()]);
+
+            const results = sequentialSearch(partialTag, queryVariations);
+
+            expect(Array.isArray(results)).toBe(true);
+            expect(results.map(tagData => tagData.tag))
+                .toEqual(expect.arrayContaining([
+                    'test_tag', '<lora:test_model>', 'embedding:test_embedding'
+                ]));
+        });
+
+    });
+
+    describe('searchWithFlexSearch', () => {
+
+        test('should find and return matching tags using FlexSearch', () => {
+            const partialTag = 'test';
+            const queryVariations = new Set([partialTag.toLowerCase()]);
+
+            const results = searchWithFlexSearch(partialTag, queryVariations);
+
+            expect(Array.isArray(results)).toBe(true);
+            expect(results.map(tagData => tagData.tag))
+                .toEqual(expect.arrayContaining([
+                    'test_tag', '<lora:test_model>', 'embedding:test_embedding'
+                ]));
+        });
+
+    });
+
+    describe('insertTagToTextArea', () => {
+
+        test('should insert tag and replace underscore with space', () => {
+            const textarea = createMockTextarea('1girl, ', 7);
+            const tagData = { tag: 'blue_hair', source: 'danbooru' };
+
+            expect(() => {
+                insertTagToTextArea(textarea, tagData);
+            }).not.toThrow();
+
+            expect(textarea.value).toBe('1girl, blue hair, ');
+        });
+
+        test('should complete model tag and add trailing comma', () => {
+            const textarea = createMockTextarea('<lora:', 6);
+            const tagData = { tag: '<lora:my_model>', source: 'lora' };
+
+            expect(() => {
+                insertTagToTextArea(textarea, tagData);
+            }).not.toThrow();
+
+            expect(textarea.value).toBe('<lora:my_model>, ');
+        });
+
+        test('should handle wildcard tag insertion', () => {
+            const textarea = createMockTextarea('__wild', 6);
+            const tagData = { tag: '__wildcard__', source: 'danbooru' };
+
+            insertTagToTextArea(textarea, tagData);
+
+            expect(textarea.value).toBe('__wildcard__, ');
+        });
+
+        test('should handle emoticon tag insertion', () => {
+            const textarea = createMockTextarea(':d', 2);
+            const tagData = { tag: ':d', source: 'danbooru' };
+
+            insertTagToTextArea(textarea, tagData);
+
+            expect(textarea.value).toBe(':d, ');
+        });
+
+    });
+});
+
+describe('Natural Language Mode', () => {
+    beforeEach(() => {
+        // Enable NL mode for these tests
+        settingValues.useFastSearch = true;
+        settingValues.naturalLanguageMode = true;
+        settingValues.replaceUnderscoreWithSpace = false; // Explicitly set for NL tests
+        // Re-setup data with NL mode enabled
+        setupTestData();
+    });
+
+    afterEach(() => {
+        // Disable NL mode after tests
+        settingValues.useFastSearch = true;
+        settingValues.naturalLanguageMode = false;
+        settingValues.replaceUnderscoreWithSpace = true; // Reset to default
+    });
+
+    describe('getCurrentPartialTag (NL Mode)', () => {
+        test('should extract multi-word phrase for tag matching', () => {
+            const textarea = createMockTextarea('a beautiful girl with long ha', 29);
+            const result = getCurrentPartialTag(textarea);
+            expect(result).toBe('a beautiful girl with long ha');
+        });
+
+        test('should extract context from the start of the segment', () => {
+            const textarea = createMockTextarea('1girl, a girl smil', 18);
+            const result = getCurrentPartialTag(textarea);
+            expect(result).toBe('a girl smil');
+        });
+
+        test('should handle single partial word', () => {
+            const textarea = createMockTextarea('smil', 4);
+            const result = getCurrentPartialTag(textarea);
+            expect(result).toBe('smil');
+        });
+
+        test('should handle two-word phrase', () => {
+            const textarea = createMockTextarea('long ha', 7);
+            const result = getCurrentPartialTag(textarea);
+            expect(result).toBe('long ha');
+        });
+    });
+
+    describe('matchWord (NL Mode)', () => {
+        test('should treat space and underscore as equivalent for matching', () => {
+            const queries = new Set(['long hair']);
+            const result = matchWord('long_hair', queries);
+            expect(result.matched).toBe(true);
+        });
+
+        test('should perform partial match with space/underscore normalization', () => {
+            const queries = new Set(['long h']);
+            const result = matchWord('long_hair', queries);
+            expect(result.matched).toBe(true);
+            expect(result.isExactMatch).toBe(false);
+        });
+    });
+
+    describe('searchCompletionCandidates (NL Mode)', () => {
+        test('should find tags when typing with spaces', () => {
+            const textarea = createMockTextarea('a girl with long ha', 19);
+            const results = searchCompletionCandidates(textarea);
+            expect(results.map(t => t.tag)).toContain('long_hair');
+        });
+
+        test('should find tags with underscores when typing with spaces', () => {
+            const textarea = createMockTextarea('blue hai', 8);
+            const results = searchCompletionCandidates(textarea);
+            expect(results.map(t => t.tag)).toContain('blue_hair');
+        });
+    });
+
+    describe('insertTagToTextArea (NL Mode)', () => {
+        test('should insert tag with spaces instead of underscores', () => {
+            const textarea = createMockTextarea('a girl with smil', 16);
+            console.log('[DEBUG] original:', textarea.value);
+            textarea.focus();
+            textarea.setSelectionRange(16, 16);
+            const tagData = { tag: 'smile', source: 'danbooru' };
+            insertTagToTextArea(textarea, tagData);
+            console.log('[DEBUG] result:', textarea.value);
+            expect(textarea.value).toBe('a girl with smile ');
+        });
+
+        test('should insert tag with a single space suffix', () => {
+            const textarea = createMockTextarea('blue hai', 8);
+            textarea.focus();
+            textarea.setSelectionRange(8, 8);
+            const tagData = { tag: 'blue_hair', source: 'danbooru' };
+            insertTagToTextArea(textarea, tagData);
+            expect(textarea.value).toBe('blue hair ');
+        });
+    });
+});

tests/js/utils.test.js

@@ -1,3 +1,4 @@
+import { settingValues } from '../../web/js/settings.js';
 import {
     extractTagsFromTextArea,
     normalizeTagToSearch,
@@ -135,6 +136,11 @@ describe('normalizeTagToSearch', () => {
 });
 
 describe('normalizeTagToInsert', () => {
+    const originalValue = settingValues.replaceUnderscoreWithSpace;
+    afterEach(() => {
+        settingValues.replaceUnderscoreWithSpace = originalValue;
+    });
+
     test('should return null or empty string for invalid inputs', () => {
         expect(normalizeTagToInsert(null)).toBeNull();
         expect(normalizeTagToInsert(undefined)).toBeUndefined();
@@ -167,6 +173,73 @@ describe('normalizeTagToInsert', () => {
         expect(normalizeTagToInsert('year:2000')).toBe('year:2000');
         expect(normalizeTagToInsert('foo:bar')).toBe('foo:bar');
     });
+
+    test('should respect replaceUnderscoreWithSpace setting when true', () => {
+        settingValues.replaceUnderscoreWithSpace = true;
+
+        expect(normalizeTagToInsert('blue_hair')).toBe('blue hair');
+        expect(normalizeTagToInsert('red_eyes')).toBe('red eyes');
+        expect(normalizeTagToInsert('long_curly_hair')).toBe('long curly hair');
+    });
+
+    test('should respect replaceUnderscoreWithSpace setting when false', () => {
+        settingValues.replaceUnderscoreWithSpace = false;
+
+        expect(normalizeTagToInsert('blue_hair')).toBe('blue_hair');
+        expect(normalizeTagToInsert('red_eyes')).toBe('red_eyes');
+        expect(normalizeTagToInsert('long_curly_hair')).toBe('long_curly_hair');
+    });
+
+    test('should respect replaceUnderscoreWithSpace setting with parentheses', () => {
+        settingValues.replaceUnderscoreWithSpace = true;
+        expect(normalizeTagToInsert('blue_hair(style)')).toBe('blue hair\\(style\\)');
+
+        settingValues.replaceUnderscoreWithSpace = false;
+        expect(normalizeTagToInsert('blue_hair(style)')).toBe('blue_hair\\(style\\)');
+    });
+
+    test('should not replace underscores in wildcard syntax regardless of setting', () => {
+        // Wildcard syntax should preserve underscores regardless of setting
+        settingValues.replaceUnderscoreWithSpace = true;
+        expect(normalizeTagToInsert('__wildcard__')).toBe('__wildcard__');
+
+        settingValues.replaceUnderscoreWithSpace = false;
+        expect(normalizeTagToInsert('__wildcard__')).toBe('__wildcard__');
+    });
+
+    test('should not replace underscores in symbol-only tags regardless of setting', () => {
+        // Symbol-only tags should not be affected by the setting
+        settingValues.replaceUnderscoreWithSpace = true;
+        expect(normalizeTagToInsert('^_^')).toBe('^_^');
+
+        settingValues.replaceUnderscoreWithSpace = false;
+        expect(normalizeTagToInsert('^_^')).toBe('^_^');
+    });
+
+    test('should not escape parentheses when tag contains commas (multi-tags)', () => {
+        const multiTag = 'masterpiece, best quality, (high quality), ultra-detailed';
+        expect(normalizeTagToInsert(multiTag)).toBe('masterpiece, best quality, (high quality), ultra-detailed');
+    });
+
+    test('should not escape parentheses in multi-tag strings with parentheses', () => {
+        const multiTag = '(worst quality, low quality, normal quality), bad anatomy';
+        expect(normalizeTagToInsert(multiTag)).toBe('(worst quality, low quality, normal quality), bad anatomy');
+    });
+
+    test('should handle multi-tags with both underscores and parentheses correctly', () => {
+        settingValues.replaceUnderscoreWithSpace = true;
+        const multiTag = 'best_quality, (high_quality:1.2), ultra_detailed';
+        expect(normalizeTagToInsert(multiTag)).toBe('best quality, (high quality:1.2), ultra detailed');
+
+        settingValues.replaceUnderscoreWithSpace = false;
+        expect(normalizeTagToInsert(multiTag)).toBe('best_quality, (high_quality:1.2), ultra_detailed');
+    });
+
+    test('should still escape parentheses for single tags without commas', () => {
+        // Single tags (not multi-tags) should still have parentheses escaped
+        expect(normalizeTagToInsert('blue(hair)')).toBe('blue\\(hair\\)');
+        expect(normalizeTagToInsert('(tag)')).toBe('\\(tag\\)');
+    });
 });
 
 describe('getCurrentTagRange', () => {

web/css/autocomplete-plus.css

@@ -97,10 +97,14 @@ body.dark-theme {
   display: grid;
   box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
   grid-auto-rows: auto;
-  grid-template-columns: max-content 1fr auto auto;
+  grid-template-columns: max-content 1fr auto;
   overflow-y: auto;
 }
 
+#autocomplete-plus-list.no-alias {
+  grid-template-columns: max-content auto;
+}
+
 .autocomplete-plus-item {
   display: grid;
   cursor: pointer;
@@ -292,10 +296,14 @@ body.dark-theme {
   display: grid;
   box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
   grid-auto-rows: auto;
-  grid-template-columns: max-content 1fr auto auto;
+  grid-template-columns: max-content 1fr auto;
   overflow-y: auto;
 }
 
+#related-tags-list.no-alias {
+  grid-template-columns: max-content auto;
+}
+
 .related-tag-item {
   display: grid;
   cursor: pointer;

web/js/autocomplete.js

@@ -17,6 +17,7 @@ import {
     extractTagsFromTextArea,
     getCurrentTagRange,
     getViewportMargin,
+    getScrollbarWidth,
     IconSvgHtmlString
 } from './utils.js';
 import { settingValues } from './settings.js';
@@ -75,6 +76,40 @@ function matchWord(target, queries) {
     return { matched, isExactMatch };
 }
 
+/**
+ * Make query variations for searching.
+ * In natural language mode, adds space/underscore variants.
+ * In tag mode, adds CJK character variants.
+ * @param {string} partialTag - The partial tag/text to generate variations for
+ * @returns {Set<string>} Set of query variations
+ */
+function makeQueryVariations(partialTag) {
+    const variations = new Set([
+        partialTag.toLowerCase(),
+        normalizeTagToSearch(partialTag).toLowerCase()
+    ]);
+
+    if (settingValues.naturalLanguageMode) {
+        // Natural language mode: add underscore/space variants
+        // "long hair" → add "long_hair"
+        variations.add(partialTag.replace(/\s+/g, '_').toLowerCase());
+        // "long_hair" → add "long hair"
+        variations.add(partialTag.replace(/_+/g, ' ').toLowerCase());
+    }
+
+    // CJK support (existing functionality for both modes)
+    const kataQuery = hiraToKata(partialTag);
+    if (kataQuery !== partialTag) {
+        variations.add(kataQuery);
+    }
+    const hiraQuery = kataToHira(partialTag);
+    if (hiraQuery !== partialTag) {
+        variations.add(hiraQuery);
+    }
+
+    return variations;
+}
+
 /**
  * Search tag completion candidates based on the current input and cursor position in the textarea.
  * @param {HTMLTextAreaElement} textareaElement The partial tag input.
@@ -90,16 +125,7 @@ function searchCompletionCandidates(textareaElement) {
         return []; // No valid input for autocomplete
     }
 
-    // Generate Hiragana/Katakana variations if applicable
-    const queryVariations = new Set([partialTag.toLowerCase(), normalizeTagToSearch(partialTag).toLowerCase()]);
-    const kataQuery = hiraToKata(partialTag);
-    if (kataQuery !== partialTag) {
-        queryVariations.add(kataQuery);
-    }
-    const hiraQuery = kataToHira(partialTag);
-    if (hiraQuery !== partialTag) {
-        queryVariations.add(hiraQuery);
-    }
+    const queryVariations = makeQueryVariations(partialTag);
 
     if (settingValues.useFastSearch) {
         return searchWithFlexSearch(partialTag, queryVariations);
@@ -198,49 +224,63 @@ function sequentialSearch(partialTag, queryVariations) {
 function searchWithFlexSearch(partialTag, queryVariations) {
     const startTime = performance.now();
 
+    const createSubstrings = (input) => {
+        const words = input.split(' ');
+        return words.map((_, i) => words.slice(i).join(' '));
+    };
+
     let mergedResult = [];
     let totalSearchCount = 0;
 
     const sources = getEnabledTagSourceInPriorityOrder();
     for (const source of sources) {
         if (!autoCompleteData[source].flexSearchDocument) continue;
-        if (mergedResult.length >= settingValues.maxSuggestions) break;
 
-        // Use the FlexSearch Document to search
-        // NOTE: The limit param is reflected separately for "tag" and "alias".
-        let searchResult = autoCompleteData[source].flexSearchDocument.search(partialTag, {
-            field: ["tag", "alias"],
-            limit: Math.min(settingValues.maxSuggestions * 10, 500),
-            merge: true,
-            suggest: false,
-            cache: true,
-        });
+        const substrings = settingValues.naturalLanguageMode ? createSubstrings(partialTag) : [partialTag];
 
-        if (!searchResult || searchResult.length <= 0) continue;
+        // Search for each substring and merge results
+        for (const element of substrings) {
+            if (mergedResult.length >= settingValues.maxSuggestions) break;
+            if (element.length <= 1) break;
 
-        // Sort results based on exact matches and counts
-        searchResult = searchResult
-            .map(r => autoCompleteData[source].sortedTags[r.id])
-            .sort((aTag, bTag) => {
-                if (matchWord(bTag.tag, queryVariations).isExactMatch) {
-                    return 999999999999;
-                }
-                if (matchWord(aTag.tag, queryVariations).isExactMatch) {
-                    return -999999999999;
-                }
-                if (bTag.alias && bTag.alias.some(alias => matchWord(alias, queryVariations).isExactMatch)) {
-                    return 999999999999;
-                }
-                if (aTag.alias && aTag.alias.some(alias => matchWord(alias, queryVariations).isExactMatch)) {
-                    return -999999999999;
-                }
-                return bTag.count - aTag.count;
+            // Use the FlexSearch Document to search
+            // NOTE: The limit param is reflected separately for "tag" and "alias".
+            let searchResult = autoCompleteData[source].flexSearchDocument.search(element, {
+                field: ["tag", "alias"],
+                limit: Math.min(settingValues.maxSuggestions * 10, 500) / substrings.length,
+                merge: true,
+                suggest: false,
+                cache: true,
             });
 
-        // Merge results into the final array
-        mergedResult = mergedResult.concat(searchResult.slice(0, settingValues.maxSuggestions - mergedResult.length));
+            console.debug(`[Autocomplete-Plus] Fast Search for "${element}" in substrings, Found ${searchResult.length}.`);
 
-        totalSearchCount += searchResult.length;
+            if (!searchResult || searchResult.length <= 0) continue;
+
+            // Sort results based on exact matches and counts
+            searchResult = searchResult
+                .map(r => autoCompleteData[source].sortedTags[r.id])
+                .sort((aTag, bTag) => {
+                    if (matchWord(bTag.tag, queryVariations).isExactMatch) {
+                        return 999999999999;
+                    }
+                    if (matchWord(aTag.tag, queryVariations).isExactMatch) {
+                        return -999999999999;
+                    }
+                    if (bTag.alias && bTag.alias.some(alias => matchWord(alias, queryVariations).isExactMatch)) {
+                        return 999999999999;
+                    }
+                    if (aTag.alias && aTag.alias.some(alias => matchWord(alias, queryVariations).isExactMatch)) {
+                        return -999999999999;
+                    }
+                    return bTag.count - aTag.count;
+                });
+
+            // Merge results into the final array
+            mergedResult = mergedResult.concat(searchResult.slice(0, settingValues.maxSuggestions - mergedResult.length));
+
+            totalSearchCount += searchResult.length;
+        }
     }
 
     if (settingValues._logprocessingTime) {
@@ -254,10 +294,10 @@ function searchWithFlexSearch(partialTag, queryVariations) {
 
 /**
  * Extracts the current tag being typed before the cursor.
- * @param {HTMLTextAreaElement} inputElement
- * @returns {string} The current partial tag.
+ * @param {HTMLTextAreaElement} inputElement 
+ * @returns 
  */
-function getCurrentPartialTag(inputElement) {
+function extractTagSegment(inputElement) {
     const text = inputElement.value;
     const cursorPos = inputElement.selectionStart;
 
@@ -296,6 +336,63 @@ function getCurrentPartialTag(inputElement) {
     return normalizeTagToSearch(partial);
 }
 
+/**
+ * Extracts natural language context from the input for autocomplete.
+ * In natural language mode, returns the last partial phrase for tag matching.
+ * @param {HTMLTextAreaElement} inputElement - The textarea element
+ * @param {number} extact maximum number of words to extract (default 10)
+ * @returns {string} The partial phrase for matching
+ */
+function extractNaturalLanguageContext(inputElement, extract = 10) {
+    if (!inputElement) {
+        return "";
+    }
+
+    const text = inputElement.value;
+    const cursorPos = inputElement.selectionStart;
+
+    // Step 1: Find segment boundary (comma or newline before cursor)
+    const lastNewLine = text.lastIndexOf('\n', cursorPos - 1);
+    const lastComma = text.lastIndexOf(',', cursorPos - 1);
+    const segmentStart = Math.max(lastNewLine, lastComma) + 1;
+
+    // Step 2: Extract segment text from boundary to cursor
+    const segment = text.substring(segmentStart, cursorPos).trimStart();
+
+    // Step 3: Split into words
+    const words = segment.split(/\s+/).filter(Boolean);
+
+    if (words.length === 0) {
+        return "";
+    } else if (words.length === 1) {
+        // Single word
+        return words[0];
+    } else {
+        // Multiple words: check if last 2 words could be a multi-word tag
+        // For "a girl with long h", extract "long h"
+        // For "blue hai", extract "blue hai"
+        const lastTwoWords = words.slice(-extract).join(' ');
+        return lastTwoWords;
+    }
+}
+
+/**
+ * 
+ * @param {HTMLTextAreaElement} inputElement
+ * @returns {string} The current partial tag or natural language context.
+ */
+function getCurrentPartialTag(inputElement, wordLimitForNL) {
+    if (!inputElement) {
+        return "";
+    }
+
+    if (settingValues.naturalLanguageMode) {
+        return extractNaturalLanguageContext(inputElement, wordLimitForNL);
+    } else {
+        return extractTagSegment(inputElement);
+    }
+}
+
 /**
  * Inserts the selected tag into the textarea, replacing the partial tag,
  * making the change undoable.
@@ -303,18 +400,33 @@ function getCurrentPartialTag(inputElement) {
  * @param {TagData} tagDataToInsert The raw tag string to insert.
  */
 function insertTagToTextArea(inputElement, tagDataToInsert) {
+    if (!inputElement || !tagDataToInsert) {
+        return;
+    }
+
     const text = inputElement.value;
     const cursorPos = inputElement.selectionStart;
 
-    const { start: tagStart, end: tagEnd, tag: currentTag } = getCurrentTagRange(text, cursorPos);
+    const tagRange = getCurrentTagRange(text, cursorPos);
+    let tagStart, tagEnd, currentTag;
+
+    if (!tagRange) {
+        // Fallback: insert at cursor position
+        tagStart = cursorPos;
+        tagEnd = cursorPos;
+        currentTag = '';
+    } else {
+        ({ start: tagStart, end: tagEnd, tag: currentTag } = tagRange);
+    }
+
     const replaceStart = Math.min(cursorPos, tagStart);
     let replaceEnd = cursorPos;
 
     let normalizedTag;
-    if(Object.values(ModelTagSource).includes(tagDataToInsert.source)){
+    if (Object.values(ModelTagSource).includes(tagDataToInsert.source)) {
         // If the tag is from a model tag source, don't want to normalize it
         normalizedTag = tagDataToInsert.tag;
-    }else{
+    } else {
         normalizedTag = normalizeTagToInsert(tagDataToInsert.tag);
     }
 
@@ -471,6 +583,8 @@ class AutocompleteUI {
             return;
         }
 
+        this.tagsList.classList.toggle('no-alias', settingValues.hideAlias);
+
         const existingTags = extractTagsFromTextArea(this.target);
         const currentTag = getCurrentPartialTag(this.target);
 
@@ -488,6 +602,7 @@ class AutocompleteUI {
      */
     #createTagElement(tagData, isExisting) {
         const categoryText = TagCategory[tagData.source][tagData.category] || "unknown";
+        const aliasText = tagData.alias.join(', ');
 
         const tagRow = document.createElement('div');
         tagRow.classList.add('autocomplete-plus-item', tagData.source);
@@ -517,26 +632,29 @@ class AutocompleteUI {
         alias.className = 'autocomplete-plus-alias';
 
         // Display alias if available
-        if (tagData.alias && tagData.alias.length > 0) {
-            let aliasText = tagData.alias.join(', ');
+        if (aliasText.length > 0) {
             alias.textContent = `${aliasText}`;
-            alias.title = tagData.alias.join(', '); // Full alias on hover
+            alias.title = aliasText; // Full alias on hover
         }
 
-        // Category
-        const category = document.createElement('span');
-        category.className = `autocomplete-plus-category`;
-        category.textContent = `${categoryText.substring(0, 2)}`;
-        category.title = categoryText; // Full category on hover
-
         // Count
         const tagCount = document.createElement('span');
         tagCount.className = `autocomplete-plus-tag-count`;
         tagCount.textContent = formatCountHumanReadable(tagData.count);
 
+        // Create tooltip with more info
+        let tooltipText = `Count: ${tagData.count}\nCategory: ${categoryText}`;
+        if (aliasText.length > 0) {
+            tooltipText += `\nAlias: ${aliasText}`;
+        }
+        tagRow.title = tooltipText;
+
         tagRow.appendChild(tagName);
-        tagRow.appendChild(alias);
-        tagRow.appendChild(category);
+
+        if (!settingValues.hideAlias) {
+            tagRow.appendChild(alias);
+        }
+
         tagRow.appendChild(tagCount);
         this.tagsList.appendChild(tagRow);
     }
@@ -574,21 +692,14 @@ class AutocompleteUI {
         let topPosition = targetElmOffset.top + ((caretTop - targetElmOffset.top) + caretLineHeight) * scale;
         let leftPosition = targetElmOffset.left + (caretLeft - targetElmOffset.left) * scale;;
 
-        const maxWidth = Math.min(rootRect.width, viewportWidth / 2);
         const naturalHeight = rootRect.height;
 
-        //Horizontal Collision Detection and Adjustment
-        if (leftPosition + maxWidth > viewportWidth - margin.right) {
-            leftPosition = viewportWidth - maxWidth - margin.right;
-        }
-        if (leftPosition < margin.left) {
-            leftPosition = margin.left;
-        }
-
         // Vertical Collision Detection and Adjustment
         const availableSpaceBelow = viewportHeight - topPosition - margin.bottom;
         const availableSpaceAbove = caretTop - margin.top;
 
+        let needsVerticalScroll = false;
+        let maxHeight = rootRect.height;
 
         if (naturalHeight <= availableSpaceBelow) {
             // Fits perfectly below the caret
@@ -600,14 +711,15 @@ class AutocompleteUI {
                 topPosition = caretTop - naturalHeight - margin.top;
             } else {
                 // Doesn't fit perfectly either below or above, needs scrolling.
+                needsVerticalScroll = true;
                 // Choose the position (above or below) that offers more space.
                 if (availableSpaceBelow >= availableSpaceAbove) {
                     // Scroll below: topPosition remains as initially calculated
-                    this.tagsList.style.maxHeight = `${availableSpaceBelow}px`;
+                    maxHeight = availableSpaceBelow;
                 } else {
                     // Scroll above: Position near the top edge and set max-height
                     topPosition = margin.top;
-                    this.tagsList.style.maxHeight = `${availableSpaceAbove}px`;
+                    maxHeight = availableSpaceAbove;
                 }
             }
         }
@@ -616,16 +728,30 @@ class AutocompleteUI {
         if (topPosition < margin.top) {
             topPosition = margin.top;
             // If pushed down, recalculate max-height if it was set based on top alignment
-            if (this.tagsList.style.maxHeight && availableSpaceBelow < availableSpaceAbove) {
+            if (availableSpaceBelow < availableSpaceAbove) {
                 // Recalculate max-height based on space from the top margin
-                this.tagsList.style.maxHeight = `${viewportHeight - margin.top - margin.bottom}px`;
+                maxHeight = viewportHeight - margin.top - margin.bottom;
+                needsVerticalScroll = true;
             }
         }
 
+        // Calculate maxWidth considering scrollbar width if vertical scrolling is needed
+        const scrollbarWidth = needsVerticalScroll ? getScrollbarWidth() : 0;
+        const maxWidth = Math.min(rootRect.width + scrollbarWidth, viewportWidth / 2);
+
+        // Horizontal Collision Detection and Adjustment
+        if (leftPosition + maxWidth > viewportWidth - margin.right) {
+            leftPosition = viewportWidth - maxWidth - margin.right;
+        }
+        if (leftPosition < margin.left) {
+            leftPosition = margin.left;
+        }
+
         // Apply the calculated position and display the element
         this.root.style.left = `${leftPosition}px`;
         this.root.style.top = `${topPosition}px`;
         this.root.style.maxWidth = `${maxWidth}px`;
+        this.tagsList.style.maxHeight = `${maxHeight}px`;
     }
 
     /** Highlights the item (row) at the given index */
@@ -1010,3 +1136,16 @@ export class AutocompleteEventHandler {
     handleClick(event) {
     }
 }
+
+// Export functions for testing
+const isTestEnvironment = typeof process !== 'undefined' && process.env.NODE_ENV === 'test';
+export const __test__ = isTestEnvironment
+    ? {
+        searchCompletionCandidates,
+        sequentialSearch,
+        searchWithFlexSearch,
+        matchWord,
+        getCurrentPartialTag,
+        insertTagToTextArea
+    }
+    : undefined;

web/js/data.js

@@ -184,18 +184,8 @@ async function loadTags(csvUrl, siteName) {
                 updateMaxTagLength(tag.length);
 
                 autoCompleteData[siteName].sortedTags.push(tagData);
-            } else {
-                console.warn(`[Autocomplete-Plus] Invalid CSV format in line ${i + 1} of ${csvUrl}: ${line}. Expected ${TAGS_CSV_HEADER_COLUMNS.length} columns, but got ${columns.length}.`);
-                continue;
-            }
-        }
 
-        // Sort by count in descending order
-        autoCompleteData[siteName].sortedTags.sort((a, b) => b.count - a.count);
-
-        // Build maps as before, but ensure not to overwrite if already processed from extra files
-        autoCompleteData[siteName].sortedTags.forEach(tagData => {
-            if (!autoCompleteData[siteName].tagMap.has(tagData.tag)) {
+                // Set the tag and its alias in the maps
                 autoCompleteData[siteName].tagMap.set(tagData.tag, tagData);
                 if (tagData.alias && Array.isArray(tagData.alias)) {
                     tagData.alias.forEach(alias => {
@@ -204,8 +194,11 @@ async function loadTags(csvUrl, siteName) {
                         }
                     });
                 }
+            } else {
+                console.warn(`[Autocomplete-Plus] Invalid CSV format in line ${i + 1} of ${csvUrl}: ${line}. Expected ${TAGS_CSV_HEADER_COLUMNS.length} columns, but got ${columns.length}.`);
+                continue;
             }
-        });
+        }
 
     } catch (error) {
         console.error(`[Autocomplete-Plus] Failed to fetch or process tags from ${csvUrl}:`, error);
@@ -450,6 +443,9 @@ async function initializeDataFromCSV(csvListData, source) {
         await Promise.all([
             Promise.all(tagsLoadPromiseFactories.map(factory => factory()))
                 .then(() => {
+                    // Sort by count in descending order
+                    autoCompleteData[source].sortedTags.sort((a, b) => b.count - a.count);
+
                     // Build FlexSearch index after tags are loaded
                     return buildFlexSearchIndex(source);
                 })

web/js/main.js

@@ -190,40 +190,41 @@ async function addExtraSettings() {
     }
 
     // Add extra setting for checking new CSV updates
-    app.ui.settings.addSetting({
-        id: id + ".check_new_csv",
-        defaultValue: null,
-        name: "Check CSV updates",
-        category: [name, "Misc", "Check new CSV"],
-        type: () => {
-            const lastCheckSpan = $el("span", {
-                textContent: lastCheckTimeText,
-                className: "text-sm text-gray-500",
-                style: {
-                    marginRight: "16px"
-                }
-            });
+    // Note: Temporarily comment out until changes to remote files can be detected
+    // app.ui.settings.addSetting({
+    //     id: id + ".check_new_csv",
+    //     defaultValue: null,
+    //     name: "Check CSV updates",
+    //     category: [name, "Misc", "Check new CSV"],
+    //     type: () => {
+    //         const lastCheckSpan = $el("span", {
+    //             textContent: lastCheckTimeText,
+    //             className: "text-sm text-gray-500",
+    //             style: {
+    //                 marginRight: "16px"
+    //             }
+    //         });
 
-            const checkButton = $el("button", {
-                textContent: "Check now",
-                className: "p-button p-component p-button-primary",
-                onclick: async () => {
-                    await performUpdateCheck(checkButton, lastCheckSpan);
-                }
-            });
+    //         const checkButton = $el("button", {
+    //             textContent: "Check now",
+    //             className: "p-button p-component p-button-primary",
+    //             onclick: async () => {
+    //                 await performUpdateCheck(checkButton, lastCheckSpan);
+    //             }
+    //         });
 
-            return $el("div", {
-                className: "flex-row items-center gap-2",
-            }, [
-                $el("div", {
-                    className: "p-component",
-                }, [
-                    lastCheckSpan,
-                    checkButton,
-                ]),
-            ]);
-        }
-    });
+    //         return $el("div", {
+    //             className: "flex-row items-center gap-2",
+    //         }, [
+    //             $el("div", {
+    //                 className: "p-component",
+    //             }, [
+    //                 lastCheckSpan,
+    //                 checkButton,
+    //             ]),
+    //         ]);
+    //     }
+    // });
 }
 
 /**
@@ -281,7 +282,19 @@ app.registerExtension({
                 settingValues.tagSource = newVal;
             }
         },
+
         // --- Autocomplete Settings ---
+        {
+            id: id + ".natural_language_mode",
+            name: "Natural Language Mode",
+            type: "boolean",
+            defaultValue: false,
+            tooltip: "Enable autocomplete for natural language prompts. Tags will be suggested as space-separated words. ⚠️ Requires browser reload to apply.",
+            category: [name, "Autocompletion", "Natural Language"],
+            onChange: (value) => {
+                settingValues.naturalLanguageMode = value;
+            }
+        },
         {
             id: id + ".use_fast_search",
             name: "Use Fast Search",
@@ -304,6 +317,17 @@ app.registerExtension({
                 settingValues.enableModels = newVal;
             }
         },
+        {
+            id: id + ".replace_underscore_with_space",
+            name: "Replace '_' with 'Space'",
+            tooltip: "This setting also affects related tags display.",
+            type: "boolean",
+            defaultValue: true,
+            category: [name, "Autocompletion", "Replace Underscore with Space"],
+            onChange: (newVal, oldVal) => {
+                settingValues.replaceUnderscoreWithSpace = newVal;
+            }
+        },
         {
             id: id + ".max_suggestions",
             name: "Max suggestions",
@@ -382,6 +406,19 @@ app.registerExtension({
             onChange: (newVal, oldVal) => {
                 settingValues.enableRelatedTags = newVal;
             }
+        },
+
+        // --- Display settings ---
+        {
+            id: id + ".display_hide_alias",
+            name: "Hide Alias",
+            tooltip: "Hide alias in the autocomplete and related tags display",
+            type: "boolean",
+            defaultValue: false,
+            category: [name, "Display", "Hide Alias"],
+            onChange: (newVal, oldVal) => {
+                settingValues.hideAlias = newVal;
+            }
         }
     ]
 });

web/js/related-tags.js

@@ -4,6 +4,7 @@ import {
     extractTagsFromTextArea,
     findAllTagPositions,
     getCurrentTagRange,
+    getScrollbarWidth,
     getViewportMargin,
     isLongText,
     isValidTag,
@@ -259,7 +260,7 @@ class RelatedTagsUI {
         this.headerControls.appendChild(this.pinBtn);
 
         this.header.appendChild(this.headerControls);
-        
+
         this.root.appendChild(this.header);
 
         // Create a tbody for the tags
@@ -410,17 +411,12 @@ class RelatedTagsUI {
             .find((tagData) => tagData !== undefined);
 
         if (!tagData) {
-            tagData = new TagData({
-                tag: this.currentTag,
-                source: TagSource.Danbooru,
-                category: 'unknown',
-                count: 0,
-                alias: [],
-            });
+            // Create a dummy TagData if not found
+            tagData = new TagData(this.currentTag, null, 0, [], TagSource.Danbooru);
         }
 
-        const tagText = this.currentTag;
-        const categoryText = TagCategory[tagData.source][tagData.category];
+        const categoryText = TagCategory[tagData.source][tagData.category] || "unknown";
+        const aliasText = tagData.alias.join(', ');
 
         // Update header text with current tag
         this.headerText.innerHTML = ''; // Clear previous content
@@ -428,15 +424,15 @@ class RelatedTagsUI {
 
         const tagName = document.createElement('span');
         tagName.classList.add('related-tags-header-tag-name', tagData.source);
-        tagName.title = `Count: ${tagData.count}\nCategory: ${categoryText}`;
+        tagName.title = `Count: ${tagData.count}\nCategory: ${categoryText}\nAlias: ${aliasText}`;
         tagName.dataset.tagCategory = categoryText;
         if (tagData.source && ['left', 'right'].includes(settingValues.tagSourceIconPosition)) {
             const tagSourceIconHtml = `<svg class="autocomplete-plus-tag-icon-svg"><use xlink:href="#autocomplete-plus-icon-${tagData.source}"></use></svg>`;
             tagName.innerHTML = settingValues.tagSourceIconPosition == 'left'
-                ? `${tagSourceIconHtml} ${tagText}`
-                : `${tagText} ${tagSourceIconHtml}`;
+                ? `${tagSourceIconHtml} ${tagData.tag}`
+                : `${tagData.tag} ${tagSourceIconHtml}`;
         } else {
-            tagName.textContent += tagText;
+            tagName.textContent += tagData.tag;
         }
 
 
@@ -447,8 +443,8 @@ class RelatedTagsUI {
         this.headerAlias.innerHTML = '';
 
         // Add alias if available
-        if (tagData.alias?.length > 0) {
-            this.headerAlias.textContent = tagData.alias.join(', ');
+        if (aliasText.length > 0 && !settingValues.hideAlias) {
+            this.headerAlias.textContent = aliasText;
             this.headerAlias.style.display = 'block';
         }
 
@@ -485,6 +481,9 @@ class RelatedTagsUI {
             return;
         }
 
+        // Toggle column class based on settings
+        this.tagsContainer.classList.toggle('no-alias', settingValues.hideAlias);
+
         const existingTags = extractTagsFromTextArea(this.target);
 
         // Create tag rows
@@ -503,6 +502,7 @@ class RelatedTagsUI {
      */
     #createTagElement(tagData, isExisting) {
         const categoryText = TagCategory[tagData.source][tagData.category] || "unknown";
+        const aliasText = tagData.alias.join(', ');
 
         const tagRow = document.createElement('div');
         tagRow.classList.add('related-tag-item', tagData.source);
@@ -524,33 +524,30 @@ class RelatedTagsUI {
         alias.className = 'related-tag-alias';
 
         // Display alias if available
-        if (tagData.alias && tagData.alias.length > 0) {
-            let aliasText = tagData.alias.join(', ');
+        if (aliasText.length > 0) {
             alias.textContent = `${aliasText}`;
-            alias.title = tagData.alias.join(', '); // Full alias on hover
+            alias.title = aliasText; // Full alias on hover
         }
 
-        // Category
-        const category = document.createElement('span');
-        category.className = `related-tag-category`;
-        category.textContent = `${categoryText.substring(0, 2)}`;
-
         // Similarity
         const similarity = document.createElement('span');
         similarity.className = 'related-tag-similarity';
         similarity.textContent = `${(tagData.similarity * 100).toFixed(2)}%`;
 
         // Create tooltip with more info
-        let tooltipText = `Tag: ${tagData.tag}\nSimilarity: ${(tagData.similarity * 100).toFixed(2)}%\nCount: ${tagData.count}`;
-        if (tagData.alias && tagData.alias.length > 0) {
-            tooltipText += `\nAlias: ${tagData.alias.join(', ')}`;
+        let tooltipText = `Similarity: ${(tagData.similarity * 100).toFixed(2)}%\nCount: ${tagData.count}\nCategory: ${categoryText}`;
+        if (aliasText.length > 0) {
+            tooltipText += `\nAlias: ${aliasText}`;
         }
         tagRow.title = tooltipText;
 
         // Add cells to row
         tagRow.appendChild(tagName);
-        tagRow.appendChild(alias);
-        tagRow.appendChild(category);
+
+        if (!settingValues.hideAlias) {
+            tagRow.appendChild(alias);
+        }
+
         tagRow.appendChild(similarity);
 
         return tagRow;
@@ -580,7 +577,7 @@ class RelatedTagsUI {
 
         const newHeaderRect = this.header.getBoundingClientRect();
 
-        if(this.relatedTags.length > 0){
+        if (this.relatedTags.length > 0) {
             this.tagsContainer.style.maxHeight = `${placementArea.height - newHeaderRect.height}px`;
         }
 
@@ -669,6 +666,10 @@ class RelatedTagsUI {
                 area.y = targetRect.bottom;
             }
 
+            // Calculate width considering scrollbar width if vertical scrolling is needed
+            const scrollbarWidth = area.height < elemHeight ? getScrollbarWidth() : 0;
+            area.width = Math.min(elemWidth + scrollbarWidth, maxWidth);
+
             // Adjust x position to avoid overflow
             area.x = Math.min(area.x, viewportWidth - area.width - margin.right);
         } else {
@@ -685,6 +686,10 @@ class RelatedTagsUI {
                 area.x = targetRect.right;
             }
 
+            // Calculate width considering scrollbar width if vertical scrolling is needed
+            const scrollbarWidth = area.height < elemHeight ? getScrollbarWidth() : 0;
+            area.width = Math.min(area.width + scrollbarWidth, viewportWidth - margin.left - margin.right);
+
             // Adjust y position to avoid overflow
             area.y = Math.min(area.y, viewportHeight - area.height - margin.bottom);
         }

web/js/searchengine.js

@@ -14,7 +14,7 @@ function createTagEncoder() {
         cache: true,
         // filter: new Set(['and', 'to', 'be', 'on']),
         replacer: [/(?<=[a-zA-Z\)])_$/, ''],  // Remove trailing underscores after letters/parentheses
-        split: /(?<=[a-zA-Z\)])_(?=[a-zA-Z\(])|\((?=[a-zA-Z])|(?<=[a-zA-Z\)])\)|[ \n]/  // Split on underscores between words, parentheses, spaces, and newlines
+        split: /(?<=[a-zA-Z\)])_(?=[a-zA-Z\(])|\((?=[a-zA-Z])|(?<=[a-zA-Z\)])\)|[ \-\n]/  // Split on underscores between words, parentheses, spaces, hyphens, and newlines
     });
 }
 

web/js/settings.js

@@ -9,6 +9,8 @@ export const settingValues = {
     maxSuggestions: 10,
     enableModels: true, // Enable Lora and Embedding suggestions
     useFastSearch: false,
+    replaceUnderscoreWithSpace: true, // Replace underscores with spaces in tag insertion
+    naturalLanguageMode: false,  // Enable/disable natural language mode
 
     // Related tags feature settings
     enableRelatedTags: true,
@@ -16,6 +18,9 @@ export const settingValues = {
     relatedTagsDisplayPosition: 'horizontal', // 'horizontal' or 'vertical'
     relatedTagsTriggerMode: 'click', // Options: 'click', 'ctrl+Click'
 
+    // Display settings
+    hideAlias: false, // Hide alias in the autocomplete and related tags display
+
 
     // Internal logic settings
     _useFallbackAttachmentForEventListener: false, // Fallback to attach event listener when somthing goes wrong

web/js/utils.js

@@ -223,23 +223,31 @@ export function normalizeTagToSearch(str) {
  * Converts underscores to spaces only if the tag contains at least one letter or number,
  * and is not a wildcard call (e.g., "__wildcard__").
  * Keeps underscores for tags that are only symbols (e.g. "^_^") or wildcard calls.
- * @param {string} str 
+ * For multi-tags (multiple tags with commas), parentheses are not escaped to preserve prompt weight syntax.
+ * @param {string} str
  * @returns {string}
  */
 export function normalizeTagToInsert(str) {
     if (!str) return str;
 
+    // Check if multi-tag string
+    const isMultiTag = str.includes(',');
+
+    // Check if the string contains at least one letter or number
     if (isContainsLetterOrNumber(str)) {
         const isWildcardCall = str.startsWith('__') && str.endsWith('__') && str.length > 4;
 
-        if (!isWildcardCall) {
-            // If doesn't wildcard call, replace underscores with spaces
-            return escapeParentheses(str.replace(/_/g, " "));
+        if (!isWildcardCall && settingValues.replaceUnderscoreWithSpace) {
+            // If doesn't wildcard call and setting is enabled, replace underscores with spaces
+            const result = str.replace(/_/g, " ");
+            // Only escape parentheses for single tags, not multi-tags
+            return isMultiTag ? result : escapeParentheses(result);
         }
     }
 
     // Otherwise, keep it as is (e.g., ""^_^", "__wildcard__")
-    return escapeParentheses(str);
+    // Only escape parentheses for single tags, not multi-tags
+    return isMultiTag ? str : escapeParentheses(str);
 }
 
 /**
@@ -584,3 +592,38 @@ export function getViewportMargin() {
         right: rightBarRect.width,
     };
 }
+
+// Cache for scrollbar width measurement
+let _cachedScrollbarWidth;
+
+/**
+ * Measures and returns the scrollbar width for the current browser.
+ * Creates a temporary element to measure the scrollbar width accurately.
+ * @returns {number} The scrollbar width in pixels
+ */
+export function getScrollbarWidth() {
+    // Return cached value if available
+    if (_cachedScrollbarWidth !== undefined) {
+        return _cachedScrollbarWidth;
+    }
+
+    // Create a temporary div with scrollbar
+    const outer = document.createElement('div');
+    outer.style.visibility = 'hidden';
+    outer.style.position = 'absolute';
+    outer.style.overflow = 'scroll';
+    outer.style.top = '-9999px';
+    outer.style.width = '100px';
+    document.body.appendChild(outer);
+
+    const inner = document.createElement('div');
+    inner.style.width = '100%';
+    outer.appendChild(inner);
+
+    // Cache the result
+    _cachedScrollbarWidth = outer.offsetWidth - inner.offsetWidth;
+
+    document.body.removeChild(outer);
+    
+    return _cachedScrollbarWidth;
+}