Merge pull request #3 from newtextdoc1111/dev

Merge Dev

docs/README_jp.md

@@ -11,13 +11,16 @@
 
 ## 特徴
 
+- **:zap:セットアップ不要**: Danbooruタグに最適化されたCSVデータを自動でダウンロード
 - **:mag:オートコンプリート**: テキスト入力中に、入力内容に基づいてタグ候補をリアルタイムで表示
 - **:file_cabinet:関連タグ表示機能**: 選択したタグと関連性の高いタグを一覧表示
+- **:earth_asia:多言語対応**: 日本語、中国語、韓国語での入力補完をサポート
 - **:computer_mouse:直感的な操作**:
     - マウスとキーボードどちらの操作にも対応
     - カーソル位置や既存のテキストを考慮した自然なタグ挿入
 - **:art:デザイン**: ComfyUIのライトテーマとダークテーマの両方に対応
-- **依存ライブラリゼロ**: 外部ライブラリを使用せず、すべての入力支援処理がクライアントで動作
+- **:pencil:ユーザーCSV**: ユーザーが用意したCSVをオートコンプリート候補に追加可能
+- **依存ライブラリゼロ**: 外部ライブラリを使用せず、すべての入力支援処理がブラウザで動作
 
 ## インストール
 
@@ -54,9 +57,9 @@
 
 **danbooru_tags.csv**
 
-カテゴリ、投稿数、エイリアス（日本語、中国語、韓国語を含む）を収録したオートコンプリート用の CSV ファイルです。カラム構成は [DominikDoom/a1111-sd-webui-tagcomplete](https://github.com/DominikDoom/a1111-sd-webui-tagcomplete) で使用されているものと同じです。
+タグ名、カテゴリ、投稿数、エイリアス（日本語、中国語、韓国語を含む）の情報を持つオートコンプリート用のタグ情報 CSV ファイルです。このカラム構成は [DominikDoom/a1111-sd-webui-tagcomplete](https://github.com/DominikDoom/a1111-sd-webui-tagcomplete) で使用されているものと同じです。
 
-掲載タグは以下の条件でフィルタリングされています。
+タグ情報は以下の条件でフィルタリングされています。
 - 投稿数100件以上
 - 投稿画像のスコアが5以上
 - カテゴリが `general, character, copyright` のいずれか
@@ -66,7 +69,7 @@
 
 タグペアとその共起回数を記録した、関連タグ計算用のCSVファイルです。
 
-タグペアは以下の条件でフィルタリングされています。
+タグペアはタグ情報 CSV から、さらに以下の条件でフィルタリングされています。
 - 共起回数が100件以上
 
 ### ユーザーCSV

web/js/autocomplete.js

@@ -259,10 +259,9 @@ class AutocompleteUI {
         this.selectedIndex = -1;
         this.candidates = [];
 
-        // Add event listener for clicks on items (listen on tbody)
+        // Add event listener for clicks on items
         this.tagsList.addEventListener('mousedown', (e) => {
-            // Check if the click target is a TD inside a TR with a data-index
-            const row = e.target.closest('tr');
+            const row = e.target.closest('.autocomplete-plus-item');
             if (row && row.dataset.tag) {
                 this.#insertTag(row.dataset.tag);
                 e.preventDefault(); // Prevent focus loss from input
@@ -358,7 +357,7 @@ class AutocompleteUI {
     }
 
     /**
-     * Creates a table row (tr) for a candidate item.
+     * Creates a tag element for the autocomplete list.
      * @param {TagData} tagData
      * @param {boolean} isExisting
      */
@@ -405,7 +404,7 @@ class AutocompleteUI {
         tagRow.appendChild(alias);
         tagRow.appendChild(category);
         tagRow.appendChild(tagCount);
-        this.tagsList.appendChild(tagRow); // Append row to tbody
+        this.tagsList.appendChild(tagRow);
     }
 
     /**
@@ -500,7 +499,7 @@ class AutocompleteUI {
     #highlightItem() {
         if (!this.getSelectedTag()) return; // No valid selection
 
-        const items = this.tagsList.children; // Get rows (tr) from tbody
+        const items = this.tagsList.children; // Get rows from tbody
         for (let i = 0; i < items.length; i++) {
             if (i === this.selectedIndex) {
                 items[i].classList.add('selected'); // Use CSS class for selection