Fixed text insertion & curser position

This time for real (hopefully)
All my homies hate RegEx

README.md

@@ -1,5 +1,7 @@
 # Booru tag autocompletion for A1111
 
+[![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/DominikDoom/a1111-sd-webui-tagcomplete)](https://github.com/DominikDoom/a1111-sd-webui-tagcomplete/releases)
+
 This custom script serves as a drop-in extension for the popular [AUTOMATIC1111 web UI](https://github.com/AUTOMATIC1111/stable-diffusion-webui) for Stable Diffusion.
 
 It displays autocompletion hints for recognized tags from "image booru" boards such as Danbooru, which are primarily used for browsing Anime-style illustrations.
@@ -9,18 +11,27 @@ I created this script as a convenience tool since it reduces the need of switchi
 
 You can either download the files manually as described below, or use a pre-packaged version from [Releases](https://github.com/DominikDoom/a1111-sd-webui-tagcomplete/releases).
 
-### Disclaimer:
-This script is definitely not optimized, and it's not very intelligent. The tags are simply recommended based on their natural order in the CSV, which is their respective image count for the default Danbooru tag list. Also, at least for now there's no way to turn the script off from the ui, but I plan to get around to that eventually.
+### NEW - Wildcard support
+Autocompletion also works with wildcard files used by [this script](https://github.com/jtkelm2/stable-diffusion-webui-1/blob/master/scripts/wildcards.py) of the same name (demo video further down). This enables you to either insert categories to be replaced by the script, or event replace them with the actual wildcard file content in the same step.
+#### Important:
+Since not everyone has the script, it is **disabled by default**. Edit the config to enable it and uncomment / add the filenames you use in `wildcardNames.txt`.
+As per the instructions of the wildcard script, the files are expected in `/scripts/wildcards/`, it will likely fail if you have another folder structure.
 
 ### Known Issues:
 If `replaceUnderscores` is active, the script will currently only partly replace edited tags containing multiple words in brackets.
 For example, editing `atago (azur lane)`, it would be replaced with e.g. `taihou (azur lane), lane)`, since the script currently doesn't see the second part of the bracket as the same tag. So in those cases you should delete the old tag beforehand.
 
+Also, at least for now there's no way to turn the script off from the ui, but I plan to get around to that eventually.
+
 ## Screenshots
 Demo video (with keyboard navigation):
 
 https://user-images.githubusercontent.com/34448969/195344430-2b5f9945-b98b-4943-9fbc-82cf633321b1.mp4
 
+Wildcard script support:
+
+https://user-images.githubusercontent.com/34448969/195632461-49d226ae-d393-453d-8f04-1e44b073234c.mp4
+
 Dark and Light mode supported, including tag colors:
 
 ![tagtypes](https://user-images.githubusercontent.com/34448969/195177127-f63949f8-271d-4767-bccd-f1b5e818a7f8.png)
@@ -46,6 +57,7 @@ The config contains the following settings and defaults:
 	"maxResults": 5,
 	"replaceUnderscores": true,
 	"escapeParentheses": true,
+	"useWildcards": false,
 	"colors": {
 		"danbooru": {
 			"0": ["lightblue", "dodgerblue"],
@@ -75,6 +87,7 @@ The config contains the following settings and defaults:
 | maxResults | How many results to show max. For the default tag set, the results are ordered by occurence count. |
 | replaceUnderscores | If true, undescores are replaced with spaces on clicking a tag. Might work better for some models. |
 | escapeParentheses | If true, escapes tags containing () so they don't contribute to the web UI's prompt weighting functionality. |
+| useWildcards | Used to toggle the recently added wildcard completion functionality. Also needs `wildcardNames.txt` to contain proper file names for your wildcard files. |
 | colors | Contains customizable colors for the tag types, you can add new ones here for custom tag files (same name as filename, without the .csv). The first value is for dark, the second for light mode. Color names and hex codes should both work.|
 
 ### CSV tag data

tagAutocomplete.js

@@ -1,5 +1,7 @@
+var acConfig = null;
+
 // Style for new elements. Gets appended to the Gradio root.
-const autocompleteCSS_dark = `
+let autocompleteCSS_dark = `
     .autocompleteResults {
         position: absolute;
         z-index: 999;
@@ -7,7 +9,7 @@ const autocompleteCSS_dark = `
         background-color: #0b0f19 !important;
         border: 1px solid #4b5563 !important;
         border-radius: 12px !important;
-        overflow: hidden;
+        overflow-y: auto;
     }
     .autocompleteResultsList > li:nth-child(odd) {
         background-color: #111827;
@@ -24,7 +26,7 @@ const autocompleteCSS_dark = `
         background-color: #374151;
     }
 `;
-const autocompleteCSS_light = `
+let autocompleteCSS_light = `
     .autocompleteResults {
         position: absolute;
         z-index: 999;
@@ -32,7 +34,7 @@ const autocompleteCSS_light = `
         background-color: #ffffff !important;
         border: 1.5px solid #e5e7eb !important;
         border-radius: 12px !important;
-        overflow: hidden;
+        overflow-y: auto;
     }
     .autocompleteResultsList > li:nth-child(odd) {
         background-color: #f9fafb;
@@ -50,8 +52,6 @@ const autocompleteCSS_light = `
     }
 `;
 
-var acConfig = null;
-
 // Parse the CSV file into a 2D array. Doesn't use regex, so it is very lightweight.
 function parseCSV(str) {
     var arr = [];
@@ -59,7 +59,7 @@ function parseCSV(str) {
 
     // Iterate over each character, keep track of current row and column (of the returned array)
     for (var row = 0, col = 0, c = 0; c < str.length; c++) {
-        var cc = str[c], nc = str[c+1];        // Current character, next character
+        var cc = str[c], nc = str[c + 1];        // Current character, next character
         arr[row] = arr[row] || [];             // Create a new row if necessary
         arr[row][col] = arr[row][col] || '';   // Create a new column (start with empty string) if necessary
 
@@ -105,7 +105,7 @@ function loadCSV() {
 // Debounce function to prevent spamming the autocomplete function
 var dbTimeOut;
 const debounce = (func, wait = 300) => {
-    return function(...args) {
+    return function (...args) {
         if (dbTimeOut) {
             clearTimeout(dbTimeOut);
         }
@@ -125,9 +125,9 @@ function difference(a, b) {
         return a;
     }
 
-    return [...b.reduce( (acc, v) => acc.set(v, (acc.get(v) || 0) - 1),
-            a.reduce( (acc, v) => acc.set(v, (acc.get(v) || 0) + 1), new Map() ) 
-    )].reduce( (acc, [v, count]) => acc.concat(Array(Math.abs(count)).fill(v)), [] );
+    return [...b.reduce((acc, v) => acc.set(v, (acc.get(v) || 0) - 1),
+        a.reduce((acc, v) => acc.set(v, (acc.get(v) || 0) + 1), new Map())
+    )].reduce((acc, [v, count]) => acc.concat(Array(Math.abs(count)).fill(v)), []);
 }
 // Get the identifier for the text area to differentiate between positive and negative
 function getTextAreaIdentifier(textArea) {
@@ -135,7 +135,7 @@ function getTextAreaIdentifier(textArea) {
     let img2img = gradioApp().querySelector('#tab_img2img');
     let img2img_p = img2img.querySelector('#img2img_prompt > label > textarea');
     let img2img_n = img2img.querySelector('#negative_prompt > label > textarea');
-    
+
     let modifier = "";
     if (textArea === img2img_p || textArea === img2img_n) {
         modifier += ".img2img";
@@ -152,10 +152,11 @@ function getTextAreaIdentifier(textArea) {
 function createResultsDiv(textArea) {
     let resultsDiv = document.createElement("div");
     let resultsList = document.createElement('ul');
-    
+
     let textAreaId = getTextAreaIdentifier(textArea);
     let typeClass = textAreaId.replaceAll(".", " ");
 
+    resultsDiv.style.setProperty("max-height", acConfig.maxResults * 50 + "px");
     resultsDiv.setAttribute('class', `autocompleteResults ${typeClass}`);
     resultsList.setAttribute('class', 'autocompleteResultsList');
     resultsDiv.appendChild(resultsList);
@@ -165,6 +166,7 @@ function createResultsDiv(textArea) {
 
 // The selected tag index. Needs to be up here so hide can access it.
 var selectedTag = null;
+var previousTags = [];
 
 // Show or hide the results div
 function isVisible(textArea) {
@@ -186,38 +188,67 @@ function hideResults(textArea) {
     selectedTag = null;
 }
 
+let hideBlocked = false;
 // On click, insert the tag into the prompt textbox with respect to the cursor position
-function insertTextAtCursor(textArea, text, tagword) {
+function insertTextAtCursor(textArea, result, tagword) {
+    let text = result[0];
+    let tagType = result[1];
+
     let cursorPos = textArea.selectionStart;
-    let sanitizedText = acConfig.replaceUnderscores ? text.replaceAll("_", " ") : text;
+    var sanitizedText = text
+
+    // Replace differently depending on if it's a tag or wildcard
+    if (tagType === "wildcardFile") {
+        sanitizedText = "__" + text.replace("Wildcards: ", "") + "__";
+    } else if (tagType === "wildcardTag") {
+        sanitizedText = text.replace(/^.*?: /g, "");
+    } else {
+        sanitizedText = acConfig.replaceUnderscores ? text.replaceAll("_", " ") : text;
+    }
+
     sanitizedText = acConfig.escapeParentheses ? sanitizedText.replaceAll("(", "\\(").replaceAll(")", "\\)") : sanitizedText;
-    
+
     var prompt = textArea.value;
-    let optionalComma = (prompt[cursorPos] === "," || prompt[cursorPos + tagword.length] === ",") ? "" : ", ";
+
 
     // Edit prompt text
-    let toRight = prompt.substring(cursorPos, cursorPos + tagword.length) === tagword;
-    if (toRight) {
-        textArea.value = prompt.substring(0, cursorPos) + sanitizedText + optionalComma + prompt.substring(cursorPos + tagword.length)
-        // Update cursor position to after the inserted text
-        textArea.selectionStart = cursorPos + sanitizedText.length + optionalComma.length;
-    } else {
-        textArea.value = prompt.substring(0, cursorPos - tagword.length) + sanitizedText + optionalComma + prompt.substring(cursorPos)
-        textArea.selectionStart = cursorPos - tagword.length + sanitizedText.length + optionalComma.length;
+    let editStart = Math.max(cursorPos - tagword.length, 0);
+    let editEnd = Math.min(cursorPos + tagword.length, prompt.length);
+    let surrounding = prompt.substring(editStart, editEnd);
+    let match = surrounding.match(new RegExp(`${tagword}`));
+    let afterInsertCursorPos = editStart + match.index + sanitizedText.length;
+
+    var optionalComma = "";
+    if (tagType !== "wildcardFile") {
+        optionalComma = surrounding.match(new RegExp(`${tagword},`)) !== null ? "" : ", ";
     }
-    prompt = textArea.value;
-    textArea.selectionEnd = textArea.selectionStart;
+
+    // Replace partial tag word with new text, add comma if needed
+    let insert = surrounding.replace(tagword, sanitizedText + optionalComma);
+
+    // Add back start
+    var newPrompt = prompt.substring(0, editStart) + insert + prompt.substring(editEnd);
+    textArea.value = newPrompt;
+    textArea.selectionStart = afterInsertCursorPos + optionalComma.length;
+    textArea.selectionEnd = textArea.selectionStart
 
     // Since we've modified a Gradio Textbox component manually, we need to simulate an `input` DOM event to ensure its
     // internal Svelte data binding remains in sync.
     textArea.dispatchEvent(new Event("input", { bubbles: true }));
 
-    // Hide results after inserting
-    hideResults(textArea);
-
     // Update previous tags with the edited prompt to prevent re-searching the same term
-    let tags = prompt.match(/[^, ]+/g);
+    let tags = newPrompt.match(/[^, ]+/g);
     previousTags = tags;
+
+    // Hide results after inserting
+    if (tagType === "wildcardFile") {
+        // If it's a wildcard, we want to keep the results open so the user can select another wildcard
+        hideBlocked = true;
+        autocomplete(textArea, prompt, sanitizedText);
+        setTimeout(() => { hideBlocked = false; }, 100);
+    } else {
+        hideResults(textArea);
+    }
 }
 
 function addResultsToList(textArea, results, tagword) {
@@ -236,15 +267,19 @@ function addResultsToList(textArea, results, tagword) {
         let li = document.createElement("li");
         li.innerHTML = result[0];
 
-        // Set the color of the tag
-        let tagType = result[1];
-        let colorGroup = tagColors[tagFileName];
-        // Default to danbooru scheme if no matching one is found
-        if (colorGroup === undefined) colorGroup = tagColors["danbooru"];
+        // Wildcards have no tag type
+        if (!result[1].startsWith("wildcard")) {
+            // Set the color of the tag
+            let tagType = result[1];
+            let colorGroup = tagColors[tagFileName];
+            // Default to danbooru scheme if no matching one is found
+            if (colorGroup === undefined) colorGroup = tagColors["danbooru"];
+
+            li.style = `color: ${colorGroup[tagType][mode]};`;
+        }
 
-        li.style = `color: ${colorGroup[tagType][mode]};`;
         // Add listener
-        li.addEventListener("click", function() { insertTextAtCursor(textArea, result[0], tagword); });
+        li.addEventListener("click", function () { insertTextAtCursor(textArea, result, tagword); });
         // Add element to list
         resultsList.appendChild(li);
     }
@@ -252,7 +287,8 @@ function addResultsToList(textArea, results, tagword) {
 
 function updateSelectionStyle(textArea, num) {
     let textAreaId = getTextAreaIdentifier(textArea);
-    let resultsList = gradioApp().querySelector('.autocompleteResults' + textAreaId + ' > ul');
+    let resultDiv = gradioApp().querySelector('.autocompleteResults' + textAreaId);
+    let resultsList = resultDiv.querySelector('ul');
     let items = resultsList.getElementsByTagName('li');
 
     for (let i = 0; i < items.length; i++) {
@@ -260,40 +296,71 @@ function updateSelectionStyle(textArea, num) {
     }
 
     items[num].classList.add('selected');
+
+    // Set scrolltop to selected item if we are showing more than max results
+    if (items.length > acConfig.maxResults) {
+        let selected = items[num];
+        resultDiv.scrollTop = selected.offsetTop - resultDiv.offsetTop;
+    }
 }
 
+wildcardFiles = [];
+wildcards = {};
 allTags = [];
-previousTags = [];
 results = [];
 tagword = "";
 resultCount = 0;
-function autocomplete(textArea, prompt) {
+function autocomplete(textArea, prompt, fixedTag = null) {
     // Guard for empty prompt
     if (prompt.length === 0) {
         hideResults(textArea);
         return;
     }
 
-    // Match tags with RegEx to get the last edited one
-    let tags = prompt.match(/[^, ]+/g);
-    let diff = difference(tags, previousTags)
-    previousTags = tags;
+    if (fixedTag === null) {
+        // Match tags with RegEx to get the last edited one
+        let tags = prompt.match(/[^, ]+/g);
+        let diff = difference(tags, previousTags)
+        previousTags = tags;
 
-    // Guard for no difference / only whitespace remaining
-    if (diff === undefined || diff.length === 0) {
-        hideResults(textArea);
-        return;
+        // Guard for no difference / only whitespace remaining
+        if (diff === null || diff.length === 0) {
+            if (!hideBlocked) hideResults(textArea);
+            return;
+        }
+
+        tagword = diff[0]
+
+        // Guard for empty tagword
+        if (tagword === null || tagword.length === 0) {
+            hideResults(textArea);
+            return;
+        }
+    } else {
+        tagword = fixedTag;
     }
 
-    tagword = diff[0]
+    tagword = tagword.toLowerCase();
 
-    // Guard for empty tagword
-    if (tagword === undefined || tagword.length === 0) {
-        hideResults(textArea);
-        return;
+    if ([...tagword.matchAll(/\b__([^,_ ]+)__([^, ]*)\b/g)].length > 0 && acConfig.useWildcards) {
+        // Show wildcards from a file with that name
+        wcMatch = [...tagword.matchAll(/\b__([^,_ ]+)__([^, ]*)\b/g)]
+        let wcFile = wcMatch[0][1];
+        let wcWord = wcMatch[0][2];
+        results = wildcards[wcFile].filter(x => (wcWord !== null) ? x.toLowerCase().includes(wcWord) : x) // Filter by tagword
+            .map(x => [wcFile + ": " + x.trim(), "wildcardTag"]); // Mark as wildcard
+    } else if ((tagword.startsWith("__") && !tagword.endsWith("__") || tagword === "__") && acConfig.useWildcards) {
+        // Show available wildcard files
+        let tempResults = [];
+        if (tagword !== "__") {
+            tempResults = wildcardFiles.filter(x => x.toLowerCase().includes(tagword.replace("__", ""))) // Filter by tagword
+        } else {
+            tempResults = wildcardFiles;
+        }
+        results = tempResults.map(x => ["Wildcards: " + x.trim(), "wildcardFile"]); // Mark as wildcard
+    } else {
+        results = allTags.filter(x => x[0].toLowerCase().includes(tagword)).slice(0, acConfig.maxResults);
     }
-    
-    results = allTags.filter(x => x[0].includes(tagword)).slice(0, acConfig.maxResults);
     resultCount = results.length;
 
     // Guard for empty results
@@ -302,6 +369,7 @@ function autocomplete(textArea, prompt) {
         return;
     }
 
+    selectedTag = null; // Reset since the list changed
     showResults(textArea);
     addResultsToList(textArea, results, tagword);
 }
@@ -335,7 +403,7 @@ function navigateInList(textArea, event) {
             break;
         case "Enter":
             if (selectedTag !== null) {
-                insertTextAtCursor(textArea, results[selectedTag][0], tagword);
+                insertTextAtCursor(textArea, results[selectedTag], tagword);
             }
             break;
         case "Escape":
@@ -351,12 +419,47 @@ function navigateInList(textArea, event) {
     event.stopPropagation();
 }
 
-onUiUpdate(function(){
-    // One-time CSV setup
-    if (acConfig === null) acConfig = JSON.parse(readFile("file/tags/config.json"));
-    if (allTags.length === 0) allTags = loadCSV();
+styleAdded = false;
+onUiUpdate(function () {
+    // One-time config, tags & wildcards loading
+    if (acConfig === null) {
+        try {
+            acConfig = JSON.parse(readFile("file/tags/config.json"));
+        } catch (e) {
+            console.error("Error loading config.json: " + e);
+            return;
+        }
+    }
+    if (allTags.length === 0) {
+        try {
+            allTags = loadCSV();
+        } catch (e) {
+            console.error("Error loading tags file: " + e);
+            return;
+        }
+    }
+    if (wildcardFiles.length === 0 && acConfig.useWildcards) {
+        try {
+            wildcardFiles = readFile("file/tags/wildcardNames.txt").split("\n")
+                .filter(x => !x.startsWith("//")) // Remove comments
+                .filter(x => x.toLowerCase().includes(tagword.substring(2))) // Filter by tagword
+                .filter(x => x.trim().length > 0) // Remove empty lines
 
-	let txt2imgTextArea = gradioApp().querySelector('#txt2img_prompt > label > textarea');
+            wildcardFiles.forEach(fName => {
+                try {
+                    wildcards[fName.trim()] = readFile(`file/scripts/wildcards/${fName}.txt`).split("\n")
+                        .filter(x => x.trim().length > 0) // Remove empty lines
+                } catch (e) {
+                    console.log(`Could not load wildcards for ${fName}`);
+                }
+            });
+        } catch (e) {
+            console.error("Error loading wildcardNames.txt: " + e);
+        }
+    }
+
+    // Find all textareas
+    let txt2imgTextArea = gradioApp().querySelector('#txt2img_prompt > label > textarea');
     let img2imgTextArea = gradioApp().querySelector('#img2img_prompt > label > textarea');
     let negativeTextAreas = Array.from(gradioApp().querySelectorAll('#negative_prompt > label > textarea'));
     let textAreas = [txt2imgTextArea, img2imgTextArea, negativeTextAreas[0], negativeTextAreas[1]];
@@ -373,7 +476,7 @@ onUiUpdate(function(){
     textAreas.forEach(area => {
         // Skip directly if not found on the page
         if (area === null || area === undefined) return;
-        
+
         // Return if autocomplete is disabled for the current area type in config
         let textAreaId = getTextAreaIdentifier(area);
         if (textAreaId.includes("p") || (textAreaId.includes("n") && acConfig.activeIn.negativePrompts)) {
@@ -391,7 +494,7 @@ onUiUpdate(function(){
             area.parentNode.insertBefore(resultsDiv, area.nextSibling);
             // Hide by default so it doesn't show up on page load
             hideResults(area);
-            
+
             // Add autocomplete event listener
             area.addEventListener('input', debounce(() => autocomplete(area, area.value), 100));
             // Add focusout event listener
@@ -401,17 +504,19 @@ onUiUpdate(function(){
 
             // Add class so we know we've already added the listeners
             area.classList.add('autocomplete');
-
-            // Add style to dom
-            let acStyle = document.createElement('style');
-
-            let css = gradioApp().querySelector('.dark') ? autocompleteCSS_dark : autocompleteCSS_light;
-            if (acStyle.styleSheet) {
-                acStyle.styleSheet.cssText = css;
-            } else {
-                acStyle.appendChild(document.createTextNode(css));
-            }
-            gradioApp().appendChild(acStyle);
         }
     });
+
+    if (styleAdded) return;
+
+    // Add style to dom
+    let acStyle = document.createElement('style');
+    let css = gradioApp().querySelector('.dark') ? autocompleteCSS_dark : autocompleteCSS_light;
+    if (acStyle.styleSheet) {
+        acStyle.styleSheet.cssText = css;
+    } else {
+        acStyle.appendChild(document.createTextNode(css));
+    }
+    gradioApp().appendChild(acStyle);
+    styleAdded = true;
 });

tags/config.json

@@ -8,6 +8,7 @@
 	"maxResults": 5,
 	"replaceUnderscores": true,
 	"escapeParentheses": true,
+	"useWildcards": false,
 	"colors": {
 		"danbooru": {
 			"0": ["lightblue", "dodgerblue"],

tags/wildcardNames.txt

@@ -0,0 +1,7 @@
+// Put the file names of wildcard files you want to use here. Needed so that the script can access them.
+// The default ones are the following, you can uncomment them if you have them
+//adjective
+//artist
+//genre
+//site
+//style