diff --git a/docs/README_jp.md b/docs/README_jp.md index e1df2b9..f27bebe 100644 --- a/docs/README_jp.md +++ b/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 diff --git a/web/js/autocomplete.js b/web/js/autocomplete.js index 606b737..7c6e3e1 100644 --- a/web/js/autocomplete.js +++ b/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