Upload 14 files

tagcomplete/javascript/__globals.js

@@ -0,0 +1,129 @@
+// Core components
+var TAC_CFG = {
+    // Main tag file
+    tagFile: "danbooru.csv",
+    // Active in settings
+    activeIn: {
+        txt2img: true,
+        img2img: true,
+        negativePrompts: true,
+        thirdParty: true,
+    },
+    // Results related settings
+    slidingPopup: true,
+    maxResults: 5,
+    showAllResults: false,
+    resultStepLength: 100,
+    delayTime: 100,
+    includeEmbeddingsInNormalResults: false,
+    showWikiLinks: true,
+    showExtraNetworkPreviews: false,
+    // Insertion related settings
+    replaceUnderscores: true,
+    escapeParentheses: true,
+    appendComma: true,
+    appendSpace: true,
+    alwaysSpaceAtEnd: false,
+    // Alias settings
+    alias: {
+        searchByAlias: true,
+        onlyShowAlias: false
+    },
+    // Translation settings
+    translation: {
+        searchByTranslation: false,
+    },
+    // Extra file settings
+    extra: {
+        extraFile: "danbooru-0-zh.csv",
+        addMode: "Insert before"
+    },
+    // Chant file settings
+    chantFile: "demo-chants.json",
+    // Settings not from tac but still used by the script
+    // Custom mapping settings
+    keymap: {
+        "MoveUp": "ArrowUp",
+        "MoveDown": "ArrowDown",
+        "JumpUp": "PageUp",
+        "JumpDown": "PageDown",
+        "JumpToStart": "Home",
+        "JumpToEnd": "End",
+        "ChooseSelected": "Enter",
+        "ChooseFirstOrSelected": "Tab",
+        "Close": "Escape"
+    },
+    colorMap: {
+        "danbooru": {
+            "-1": ["red", "maroon"],
+            "0": ["lightblue", "dodgerblue"],
+            "1": ["indianred", "firebrick"],
+            "3": ["violet", "darkorchid"],
+            "4": ["lightgreen", "darkgreen"],
+            "5": ["orange", "darkorange"]
+        },
+        "e621": {
+            "-1": ["red", "maroon"],
+            "0": ["lightblue", "dodgerblue"],
+            "1": ["gold", "goldenrod"],
+            "3": ["violet", "darkorchid"],
+            "4": ["lightgreen", "darkgreen"],
+            "5": ["tomato", "darksalmon"],
+            "6": ["red", "maroon"],
+            "7": ["whitesmoke", "black"],
+            "8": ["seagreen", "darkseagreen"]
+        }
+    }
+};
+var tagBasePath = "tagcomplete/tags";
+var modelKeywordPath = "";
+var tacSelfTrigger = false;
+
+// Tag completion data loaded from files
+var allTags = [];
+var translations = new Map();
+var extras = [];
+// Same for tag-likes
+var yamlWildcards = [];
+var umiWildcards = [];
+var modelKeywordDict = new Map();
+var chants = [];
+
+// Current results
+var results = [];
+var resultCount = 0;
+
+// Relevant for parsing
+var previousTags = [];
+var tagword = "";
+var originalTagword = "";
+let hideBlocked = false;
+
+// Tag selection for keyboard navigation
+var selectedTag = null;
+var oldSelectedTag = null;
+var resultCountBeforeNormalTags = 0;
+
+// Lora keyword undo/redo history
+var textBeforeKeywordInsertion = "";
+var textAfterKeywordInsertion = "";
+var lastEditWasKeywordInsertion = false;
+var keywordInsertionUndone = false;
+
+// UMI
+var umiPreviousTags = [];
+
+/// Extendability system:
+/// Provides "queues" for other files of the script (or really any js)
+/// to add functions to be called at certain points in the script.
+/// Similar to a callback system, but primitive.
+
+// Queues
+const QUEUE_AFTER_INSERT = [];
+const QUEUE_AFTER_SETUP = [];
+const QUEUE_FILE_LOAD = [];
+const QUEUE_AFTER_CONFIG_CHANGE = [];
+const QUEUE_SANITIZE = [];
+
+// List of parsers to try
+const PARSERS = [];

tagcomplete/javascript/_baseParser.js

@@ -0,0 +1,21 @@
+class FunctionNotOverriddenError extends Error {
+    constructor(message = "", ...args) {
+        super(message, ...args);
+        this.message = message + " is an abstract base function and must be overwritten.";
+      }
+}
+
+class BaseTagParser {
+    triggerCondition = null;
+
+    constructor (triggerCondition) {
+        if (new.target === BaseTagParser) {
+            throw new TypeError("Cannot construct abstract BaseCompletionParser directly");
+        }
+        this.triggerCondition = triggerCondition;
+    }
+
+    parse() {
+        throw new FunctionNotOverriddenError("parse()");
+    }
+}

tagcomplete/javascript/_caretPosition.js

@@ -0,0 +1,145 @@
+// From https://github.com/component/textarea-caret-position
+
+// We'll copy the properties below into the mirror div.
+// Note that some browsers, such as Firefox, do not concatenate properties
+// into their shorthand (e.g. padding-top, padding-bottom etc. -> padding),
+// so we have to list every single property explicitly.
+var properties = [
+  'direction',  // RTL support
+  'boxSizing',
+  'width',  // on Chrome and IE, exclude the scrollbar, so the mirror div wraps exactly as the textarea does
+  'height',
+  'overflowX',
+  'overflowY',  // copy the scrollbar for IE
+
+  'borderTopWidth',
+  'borderRightWidth',
+  'borderBottomWidth',
+  'borderLeftWidth',
+  'borderStyle',
+
+  'paddingTop',
+  'paddingRight',
+  'paddingBottom',
+  'paddingLeft',
+
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/font
+  'fontStyle',
+  'fontVariant',
+  'fontWeight',
+  'fontStretch',
+  'fontSize',
+  'fontSizeAdjust',
+  'lineHeight',
+  'fontFamily',
+
+  'textAlign',
+  'textTransform',
+  'textIndent',
+  'textDecoration',  // might not make a difference, but better be safe
+
+  'letterSpacing',
+  'wordSpacing',
+
+  'tabSize',
+  'MozTabSize'
+
+];
+
+var isBrowser = (typeof window !== 'undefined');
+var isFirefox = (isBrowser && window.mozInnerScreenX != null);
+
+function getCaretCoordinates(element, position, options) {
+  if (!isBrowser) {
+    throw new Error('textarea-caret-position#getCaretCoordinates should only be called in a browser');
+  }
+
+  var debug = options && options.debug || false;
+  if (debug) {
+    var el = document.querySelector('#input-textarea-caret-position-mirror-div');
+    if (el) el.parentNode.removeChild(el);
+  }
+
+  // The mirror div will replicate the textarea's style
+  var div = document.createElement('div');
+  div.id = 'input-textarea-caret-position-mirror-div';
+  document.body.appendChild(div);
+
+  var style = div.style;
+  var computed = window.getComputedStyle ? window.getComputedStyle(element) : element.currentStyle;  // currentStyle for IE < 9
+  var isInput = element.nodeName === 'INPUT';
+
+  // Default textarea styles
+  style.whiteSpace = 'pre-wrap';
+  if (!isInput)
+    style.wordWrap = 'break-word';  // only for textarea-s
+
+  // Position off-screen
+  style.position = 'absolute';  // required to return coordinates properly
+  if (!debug)
+    style.visibility = 'hidden';  // not 'display: none' because we want rendering
+
+  // Transfer the element's properties to the div
+  properties.forEach(function (prop) {
+    if (isInput && prop === 'lineHeight') {
+      // Special case for <input>s because text is rendered centered and line height may be != height
+      if (computed.boxSizing === "border-box") {
+        var height = parseInt(computed.height);
+        var outerHeight =
+          parseInt(computed.paddingTop) +
+          parseInt(computed.paddingBottom) +
+          parseInt(computed.borderTopWidth) +
+          parseInt(computed.borderBottomWidth);
+        var targetHeight = outerHeight + parseInt(computed.lineHeight);
+        if (height > targetHeight) {
+          style.lineHeight = height - outerHeight + "px";
+        } else if (height === targetHeight) {
+          style.lineHeight = computed.lineHeight;
+        } else {
+          style.lineHeight = 0;
+        }
+      } else {
+        style.lineHeight = computed.height;
+      }
+    } else {
+      style[prop] = computed[prop];
+    }
+  });
+
+  if (isFirefox) {
+    // Firefox lies about the overflow property for textareas: https://bugzilla.mozilla.org/show_bug.cgi?id=984275
+    if (element.scrollHeight > parseInt(computed.height))
+      style.overflowY = 'scroll';
+  } else {
+    style.overflow = 'hidden';  // for Chrome to not render a scrollbar; IE keeps overflowY = 'scroll'
+  }
+
+  div.textContent = element.value.substring(0, position);
+  // The second special handling for input type="text" vs textarea:
+  // spaces need to be replaced with non-breaking spaces - http://stackoverflow.com/a/13402035/1269037
+  if (isInput)
+    div.textContent = div.textContent.replace(/\s/g, '\u00a0');
+
+  var span = document.createElement('span');
+  // Wrapping must be replicated *exactly*, including when a long word gets
+  // onto the next line, with whitespace at the end of the line before (#7).
+  // The  *only* reliable way to do that is to copy the *entire* rest of the
+  // textarea's content into the <span> created at the caret position.
+  // For inputs, just '.' would be enough, but no need to bother.
+  span.textContent = element.value.substring(position) || '.';  // || because a completely empty faux span doesn't render at all
+  div.appendChild(span);
+
+  var coordinates = {
+    top: span.offsetTop + parseInt(computed['borderTopWidth']),
+    left: span.offsetLeft + parseInt(computed['borderLeftWidth']),
+    height: parseInt(computed['lineHeight'])
+  };
+
+  if (debug) {
+    span.style.backgroundColor = '#aaa';
+  } else {
+    document.body.removeChild(div);
+  }
+
+  return coordinates;
+}

tagcomplete/javascript/_result.js

@@ -0,0 +1,38 @@
+// Result data type for cleaner use of optional completion result properties
+
+// Type enum
+const ResultType = Object.freeze({
+    "tag": 1,
+    "extra": 2,
+    "embedding": 3,
+    "wildcardTag": 4,
+    "wildcardFile": 5,
+    "yamlWildcard": 6,
+    "umiWildcard": 7,
+    "hypernetwork": 8,
+    "lora": 9,
+    "lyco": 10,
+    "chant": 11,
+    "styleName": 12
+});
+
+// Class to hold result data and annotations to make it clearer to use
+class AutocompleteResult {
+    // Main properties
+    text = "";
+    type = ResultType.tag;
+
+    // Additional info, only used in some cases
+    category = null;
+    count = null;
+    aliases = null;
+    meta = null;
+    hash = null;
+    sortKey = null;
+
+    // Constructor
+    constructor(text, type) {
+        this.text = text;
+        this.type = type;
+    }
+}

tagcomplete/javascript/_textAreas.js

@@ -0,0 +1,198 @@
+// Utility functions to select text areas the script should work on,
+// including third party options.
+// Supported third party options so far:
+// - Dataset Tag Editor
+
+// Core text area selectors
+const core = [
+    "#txt2img_prompt > label > textarea",
+    "#img2img_prompt > label > textarea",
+    "#txt2img_qua_prompt > label > textarea",
+    "#txt2img_neg_prompt > label > textarea",
+    "#img2img_neg_prompt > label > textarea",
+    ".prompt > label > textarea",
+    "#txt2img_edit_style_prompt > label > textarea",
+    "#txt2img_edit_style_neg_prompt > label > textarea",
+    "#img2img_edit_style_prompt > label > textarea",
+    "#img2img_edit_style_neg_prompt > label > textarea"
+];
+
+// Third party text area selectors
+const thirdParty = {
+    "dataset-tag-editor": {
+        "base": "#tab_dataset_tag_editor_interface",
+        "hasIds": false,
+        "selectors": [
+            "Caption of Selected Image",
+            "Interrogate Result",
+            "Edit Caption",
+            "Edit Tags"
+        ]
+    },
+    "image browser": {
+        "base": "#tab_image_browser",
+        "hasIds": false,
+        "selectors": [
+            "Filename keyword search",
+            "EXIF keyword search"
+        ]
+    },
+    "tab_tagger": {
+        "base": "#tab_tagger",
+        "hasIds": false,
+        "selectors": [
+            "Additional tags (split by comma)",
+            "Exclude tags (split by comma)"
+        ]
+    },
+    "tiled-diffusion-t2i": {
+        "base": "#txt2img_script_container",
+        "hasIds": true,
+        "onDemand": true,
+        "selectors": [
+            "[id^=MD-t2i][id$=prompt] textarea",
+            "[id^=MD-t2i][id$=prompt] input[type='text']"
+        ]
+    },
+    "tiled-diffusion-i2i": {
+        "base": "#img2img_script_container",
+        "hasIds": true,
+        "onDemand": true,
+        "selectors": [
+            "[id^=MD-i2i][id$=prompt] textarea",
+            "[id^=MD-i2i][id$=prompt] input[type='text']"
+        ]
+    },
+    "adetailer-t2i": {
+        "base": "#txt2img_script_container",
+        "hasIds": true,
+        "onDemand": true,
+        "selectors": [
+            "[id^=script_txt2img_adetailer_ad_prompt] textarea",
+            "[id^=script_txt2img_adetailer_ad_negative_prompt] textarea"
+        ]
+    },
+    "adetailer-i2i": {
+        "base": "#img2img_script_container",
+        "hasIds": true,
+        "onDemand": true,
+        "selectors": [
+            "[id^=script_img2img_adetailer_ad_prompt] textarea",
+            "[id^=script_img2img_adetailer_ad_negative_prompt] textarea"
+        ]
+    },
+    "deepdanbooru-object-recognition": {
+        "base": "#tab_deepdanboru_object_recg_tab",
+        "hasIds": false,
+        "selectors": [
+            "Found tags",
+        ]
+    }
+}
+
+function getTextAreas() {
+    // First get all core text areas
+    let textAreas = [...gradioApp().querySelectorAll(core.join(", "))];
+
+    for (const [key, entry] of Object.entries(thirdParty)) {
+        if (entry.hasIds) { // If the entry has proper ids, we can just select them
+            textAreas = textAreas.concat([...gradioApp().querySelectorAll(entry.selectors.join(", "))]);
+        } else { // Otherwise, we have to find the text areas by their adjacent labels
+            let base = gradioApp().querySelector(entry.base);
+
+            // Safety check
+            if (!base) continue;
+
+            let allTextAreas = [...base.querySelectorAll("textarea, input[type='text']")];
+
+            // Filter the text areas where the adjacent label matches one of the selectors
+            let matchingTextAreas = allTextAreas.filter(ta => [...ta.parentElement.childNodes].some(x => entry.selectors.includes(x.innerText)));
+            textAreas = textAreas.concat(matchingTextAreas);
+        }
+    };
+
+    return textAreas;
+}
+
+function addOnDemandObservers(setupFunction) {
+    for (const [key, entry] of Object.entries(thirdParty)) {
+        if (!entry.onDemand) continue;
+
+        let base = gradioApp().querySelector(entry.base);
+        if (!base) continue;
+
+        let accordions = [...base?.querySelectorAll(".gradio-accordion")];
+        if (!accordions) continue;
+
+        accordions.forEach(acc => {
+            let accObserver = new MutationObserver((mutationList, observer) => {
+                for (const mutation of mutationList) {
+                    if (mutation.type === "childList") {
+                        let newChildren = mutation.addedNodes;
+                        if (!newChildren) {
+                            accObserver.disconnect();
+                            continue;
+                        }
+
+                        newChildren.forEach(child => {
+                            if (child.classList.contains("gradio-accordion") || child.querySelector(".gradio-accordion")) {
+                                let newAccordions = [...child.querySelectorAll(".gradio-accordion")];
+                                newAccordions.forEach(nAcc => accObserver.observe(nAcc, { childList: true }));
+                            }
+                        });
+
+                        if (entry.hasIds) { // If the entry has proper ids, we can just select them
+                            [...gradioApp().querySelectorAll(entry.selectors.join(", "))].forEach(x => setupFunction(x));
+                        } else { // Otherwise, we have to find the text areas by their adjacent labels
+                            let base = gradioApp().querySelector(entry.base);
+
+                            // Safety check
+                            if (!base) continue;
+
+                            let allTextAreas = [...base.querySelectorAll("textarea, input[type='text']")];
+
+                            // Filter the text areas where the adjacent label matches one of the selectors
+                            let matchingTextAreas = allTextAreas.filter(ta => [...ta.parentElement.childNodes].some(x => entry.selectors.includes(x.innerText)));
+                            matchingTextAreas.forEach(x => setupFunction(x));
+                        }
+                    }
+                }
+            });
+            accObserver.observe(acc, { childList: true });
+        });
+    };
+}
+
+const thirdPartyIdSet = new Set();
+// Get the identifier for the text area to differentiate between positive and negative
+function getTextAreaIdentifier(textArea) {
+    let txt2img_p = gradioApp().querySelector('#txt2img_prompt > label > textarea');
+    let txt2img_n = gradioApp().querySelector('#txt2img_neg_prompt > label > textarea');
+    let img2img_p = gradioApp().querySelector('#img2img_prompt > label > textarea');
+    let img2img_n = gradioApp().querySelector('#img2img_neg_prompt > label > textarea');
+
+    let modifier = "";
+    switch (textArea) {
+        case txt2img_p:
+            modifier = ".txt2img.p";
+            break;
+        case txt2img_n:
+            modifier = ".txt2img.n";
+            break;
+        case img2img_p:
+            modifier = ".img2img.p";
+            break;
+        case img2img_n:
+            modifier = ".img2img.n";
+            break;
+        default:
+            // If the text area is not a core text area, it must be a third party text area
+            // Add it to the set of third party text areas and get its index as a unique identifier
+            if (!thirdPartyIdSet.has(textArea))
+                thirdPartyIdSet.add(textArea);
+
+            modifier = `.thirdParty.ta${[...thirdPartyIdSet].indexOf(textArea)}`;
+            break;
+    }
+    return modifier;
+}

tagcomplete/javascript/_utils.js

@@ -0,0 +1,214 @@
+// Utility functions for tag autocomplete
+
+// Parse the CSV file into a 2D array. Doesn't use regex, so it is very lightweight.
+// We are ignoring newlines in quote fields since we expect one-line entries and parsing would break for unclosed quotes otherwise
+function parseCSV(str) {
+    const arr = [];
+    let quote = false;  // 'true' means we're inside a quoted field
+
+    // Iterate over each character, keep track of current row and column (of the returned array)
+    for (let row = 0, col = 0, c = 0; c < str.length; c++) {
+        let 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
+
+        // If the current character is a quotation mark, and we're inside a
+        // quoted field, and the next character is also a quotation mark,
+        // add a quotation mark to the current column and skip the next character
+        if (cc == '"' && quote && nc == '"') { arr[row][col] += cc; ++c; continue; }
+
+        // If it's just one quotation mark, begin/end quoted field
+        if (cc == '"') { quote = !quote; continue; }
+
+        // If it's a comma and we're not in a quoted field, move on to the next column
+        if (cc == ',' && !quote) { ++col; continue; }
+
+        // If it's a newline (CRLF), skip the next character and move on to the next row and move to column 0 of that new row
+        if (cc == '\r' && nc == '\n') { ++row; col = 0; ++c; quote = false; continue; }
+
+        // If it's a newline (LF or CR) move on to the next row and move to column 0 of that new row
+        if (cc == '\n') { ++row; col = 0; quote = false; continue; }
+        if (cc == '\r') { ++row; col = 0; quote = false; continue; }
+
+        // Otherwise, append the current character to the current column
+        arr[row][col] += cc;
+    }
+    return arr;
+}
+
+// Load file
+async function readFile(filePath, json = false, cache = false) {
+    if (!cache)
+        filePath += `?${new Date().getTime()}`;
+
+    let response = await fetch(`file=${filePath}`);
+
+    if (response.status != 200) {
+        console.error(`Error loading file "${filePath}": ` + response.status, response.statusText);
+        return null;
+    }
+
+    if (json)
+        return await response.json();
+    else
+        return await response.text();
+}
+
+// Load CSV
+async function loadCSV(path) {
+    let text = await readFile(path);
+    return parseCSV(text);
+}
+
+// Fetch API
+async function fetchAPI(url, json = true, cache = false) {
+    if (!cache) {
+        const appendChar = url.includes("?") ? "&" : "?";
+        url += `${appendChar}${new Date().getTime()}`
+    }
+
+    let response = await fetch(url);
+
+    if (response.status != 200) {
+        console.error(`Error fetching API endpoint "${url}": ` + response.status, response.statusText);
+        return null;
+    }
+
+    if (json)
+        return await response.json();
+    else
+        return await response.text();
+}
+
+// Extra network preview thumbnails
+async function getExtraNetworkPreviewURL(filename, type) {
+    const previewJSON = await fetchAPI(`tacapi/v1/thumb-preview/${filename}?type=${type}`, true, true);
+    if (previewJSON?.url) {
+        const properURL = `sd_extra_networks/thumb?filename=${previewJSON.url}`;
+        if ((await fetch(properURL)).status == 200) {
+            return properURL;
+        } else {
+            // create blob url
+            const blob = await (await fetch(`tacapi/v1/thumb-preview-blob/${filename}?type=${type}`)).blob();
+            return URL.createObjectURL(blob);
+        }
+    } else {
+        return null;
+    }
+}
+
+// Debounce function to prevent spamming the autocomplete function
+var dbTimeOut;
+const debounce = (func, wait = 300) => {
+    return function (...args) {
+        if (dbTimeOut) {
+            clearTimeout(dbTimeOut);
+        }
+
+        dbTimeOut = setTimeout(() => {
+            func.apply(this, args);
+        }, wait);
+    }
+}
+
+// Difference function to fix duplicates not being seen as changes in normal filter
+function difference(a, b) {
+    if (a.length == 0) {
+        return b;
+    }
+    if (b.length == 0) {
+        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)), []);
+}
+
+// Sliding window function to get possible combination groups of an array
+function toNgrams(inputArray, size) {
+    return Array.from(
+        { length: inputArray.length - (size - 1) }, //get the appropriate length
+        (_, index) => inputArray.slice(index, index + size) //create the windows
+    );
+}
+
+function escapeRegExp(string, wildcardMatching = false) {
+    if (wildcardMatching) {
+        // Escape all characters except asterisks and ?, which should be treated separately as placeholders.
+        return string.replace(/[-[\]{}()+.,\\^$|#\s]/g, '\\$&').replace(/\*/g, '.*').replace(/\?/g, '.');
+    }
+    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+}
+function escapeHTML(unsafeText) {
+    let div = document.createElement('div');
+    div.textContent = unsafeText;
+    return div.innerHTML;
+}
+
+// Sort functions
+function getSortFunction() {
+    let criterion = TAC_CFG.modelSortOrder || "Name";
+
+    const textSort = (a, b, reverse = false) => {
+        const textHolderA = a.type === ResultType.chant ? a.aliases : a.text;
+        const textHolderB = b.type === ResultType.chant ? b.aliases : b.text;
+
+        const aKey = a.sortKey || textHolderA;
+        const bKey = b.sortKey || textHolderB;
+        return reverse ? bKey.localeCompare(aKey) : aKey.localeCompare(bKey);
+    }
+    const numericSort = (a, b, reverse = false) => {
+        const noKey = reverse ? "-1" : Number.MAX_SAFE_INTEGER;
+        let aParsed = parseFloat(a.sortKey || noKey);
+        let bParsed = parseFloat(b.sortKey || noKey);
+
+        if (aParsed === bParsed) {
+            return textSort(a, b, false);
+        }
+        
+        return reverse ? bParsed - aParsed : aParsed - bParsed;
+    }
+
+    return (a, b) => {
+        switch (criterion) {
+            case "Date Modified (newest first)":
+                return numericSort(a, b, true);
+            case "Date Modified (oldest first)":
+                return numericSort(a, b, false);
+            default:
+                return textSort(a, b);
+        }
+    }
+}
+
+// Queue calling function to process global queues
+async function processQueue(queue, context, ...args) {
+    for (let i = 0; i < queue.length; i++) {
+        await queue[i].call(context, ...args);
+    }
+}
+// The same but with return values
+async function processQueueReturn(queue, context, ...args)
+{
+    let qeueueReturns = [];
+    for (let i = 0; i < queue.length; i++) {
+        let returnValue = await queue[i].call(context, ...args);
+        if (returnValue)
+            qeueueReturns.push(returnValue);
+    }
+    return qeueueReturns;
+}
+// Specific to tag completion parsers
+async function processParsers(textArea, prompt) {
+    // Get all parsers that have a successful trigger condition
+    let matchingParsers = PARSERS.filter(parser => parser.triggerCondition());
+    // Guard condition
+    if (matchingParsers.length === 0) {
+        return null;
+    }
+
+    let parseFunctions = matchingParsers.map(parser => parser.parse);
+    // Process them and return the results
+    return await processQueueReturn(parseFunctions, null, textArea, prompt);
+}

tagcomplete/javascript/ext_chants.js

@@ -0,0 +1,57 @@
+const CHANT_REGEX = /<(?!e:|h:|l:)[^,> ]*>?/g;
+const CHANT_TRIGGER = () => TAC_CFG.chantFile && TAC_CFG.chantFile !== "None" && tagword.match(CHANT_REGEX);
+
+class ChantParser extends BaseTagParser {
+    parse() {
+        // Show Chant
+        let tempResults = [];
+        if (tagword !== "<" && tagword !== "<c:") {
+            let searchTerm = tagword.replace("<chant:", "").replace("<c:", "").replace("<", "");
+            let filterCondition = x => {
+                let regex = new RegExp(escapeRegExp(searchTerm, true), 'i');
+                return regex.test(x.terms.toLowerCase()) || regex.test(x.name.toLowerCase());
+            };
+            tempResults = chants.filter(x => filterCondition(x)); // Filter by tagword
+        } else {
+            tempResults = chants;
+        }
+
+        // Add final results
+        let finalResults = [];
+        tempResults.forEach(t => {
+            let result = new AutocompleteResult(t.content.trim(), ResultType.chant)
+            result.meta = "Chant";
+            result.aliases = t.name;
+            result.category = t.color;
+            finalResults.push(result);
+        });
+
+        return finalResults;
+    }
+}
+
+async function load() {
+    if (TAC_CFG.chantFile && TAC_CFG.chantFile !== "None") {
+        try {
+            chants = await readFile(`${tagBasePath}/${TAC_CFG.chantFile}?`, true);
+        } catch (e) {
+            console.error("Error loading chants.json: " + e);
+        }
+    } else {
+        chants = [];
+    }
+}
+
+function sanitize(tagType, text) {
+    if (tagType === ResultType.chant) {
+        return text;
+    }
+    return null;
+}
+
+PARSERS.push(new ChantParser(CHANT_TRIGGER));
+
+// Add our utility functions to their respective queues
+QUEUE_FILE_LOAD.push(load);
+QUEUE_SANITIZE.push(sanitize);
+QUEUE_AFTER_CONFIG_CHANGE.push(load);

tagcomplete/javascript/tagAutocomplete.js

@@ -0,0 +1,1085 @@
+const styleColors = {
+    "--results-neutral-text": ["#e0e0e0","black"],
+    "--results-bg": ["#0b0f19", "#ffffff"],
+    "--results-border-color": ["#4b5563", "#e5e7eb"],
+    "--results-border-width": ["1px", "1.5px"],
+    "--results-bg-odd": ["#111827", "#f9fafb"],
+    "--results-hover": ["#1f2937", "#f5f6f8"],
+    "--results-selected": ["#374151", "#e5e7eb"],
+    "--meta-text-color": ["#6b6f7b", "#a2a9b4"],
+    "--embedding-v1-color": ["lightsteelblue", "#2b5797"],
+    "--embedding-v2-color": ["skyblue", "#2d89ef"],
+    "--live-translation-rt": ["whitesmoke", "#222"],
+    "--live-translation-color-1": ["lightskyblue", "#2d89ef"],
+    "--live-translation-color-2": ["palegoldenrod", "#eb5700"],
+    "--live-translation-color-3": ["darkseagreen", "darkgreen"],
+}
+const browserVars = {
+    "--results-overflow-y": {
+        "firefox": "scroll",
+        "other": "auto"
+    }
+}
+// Style for new elements. Gets appended to the Gradio root.
+const autocompleteCSS = `
+    #quicksettings [id^=setting_tac] {
+        background-color: transparent;
+        min-width: fit-content;
+    }
+    .autocompleteParent {
+        display: flex;
+        position: absolute;
+        z-index: 9999;
+        max-width: calc(100% - 1.5rem);
+        margin: 5px 0 0 0;
+    }
+    .autocompleteResults {
+        background-color: var(--results-bg) !important;
+        border: var(--results-border-width) solid var(--results-border-color) !important;
+        color: var(--results-neutral-text) !important;
+        border-radius: 12px !important;
+        height: fit-content;
+        flex-basis: fit-content;
+        flex-shrink: 0;
+        overflow-y: var(--results-overflow-y);
+        overflow-x: hidden;
+        word-break: break-word;
+    }
+    .sideInfo {
+        display: none;
+        position: relative;
+        margin-left: 10px;
+        height: 18rem;
+        max-width: 16rem;
+    }
+    .sideInfo > img {
+        object-fit: cover;
+        height: 100%;
+        width: 100%;
+    }
+    .autocompleteResultsList > li:nth-child(odd) {
+        background-color: var(--results-bg-odd);
+    }
+    .autocompleteResultsList > li {
+        list-style-type: none;
+        padding: 10px;
+        cursor: pointer;
+    }
+    .autocompleteResultsList > li:hover {
+        background-color: var(--results-hover);
+    }
+    .autocompleteResultsList > li.selected {
+        background-color: var(--results-selected);
+    }
+    .resultsFlexContainer {
+        display: flex;
+    }
+    .acListItem {
+        white-space: break-spaces;
+        min-width: 100px;
+    }
+    .acMetaText {
+        position: relative;
+        flex-grow: 1;
+        text-align: end;
+        padding: 0 0 0 15px;
+        white-space: nowrap;
+        color: var(--meta-text-color);
+    }
+    .acWikiLink {
+        padding: 0.5rem;
+        margin: -0.5rem 0 -0.5rem -0.5rem;
+    }
+    .acWikiLink:hover {
+        text-decoration: underline;
+    }
+    .acListItem.acEmbeddingV1 {
+        color: var(--embedding-v1-color);
+    }
+    .acListItem.acEmbeddingV2 {
+        color: var(--embedding-v2-color);
+    }
+    .acListItem .acPathPart:nth-child(3n+1) {
+        color: var(--live-translation-color-1);
+    }
+    .acListItem .acPathPart:nth-child(3n+2) {
+        color: var(--live-translation-color-2);
+    }
+    .acListItem .acPathPart:nth-child(3n+3) {
+        color: var(--live-translation-color-3);
+    }
+`;
+
+function gradioApp() {
+    const elems = document.getElementsByTagName('gradio-app');
+    const elem = elems.length == 0 ? document : elems[0];
+
+    if (elem !== document) {
+        elem.getElementById = function(id) {
+            return document.getElementById(id);
+        };
+    }
+    return elem.shadowRoot ? elem.shadowRoot : elem;
+}
+
+function updateInput(target) {
+    let e = new Event("input", {bubbles: true});
+    Object.defineProperty(e, "target", {value: target});
+    target.dispatchEvent(e);
+}
+
+async function loadTags(c) {
+    // Load main tags and aliases
+    if (allTags.length === 0 && c.tagFile && c.tagFile !== "None") {
+        try {
+            allTags = await loadCSV(`${tagBasePath}/${c.tagFile}`);
+        } catch (e) {
+            console.error("Error loading tags file: " + e);
+            return;
+        }
+    }
+    await loadExtraTags(c);
+}
+
+async function loadExtraTags(c) {
+    if (c.extra.extraFile && c.extra.extraFile !== "None") {
+        try {
+            extras = await loadCSV(`${tagBasePath}/${c.extra.extraFile}`);
+            // Add translations to the main translation map for extra tags that have them
+            extras.forEach(e => {
+                if (e[4]) translations.set(e[0], e[4]);
+            });
+        } catch (e) {
+            console.error("Error loading extra file: " + e);
+            return;
+        }
+    }
+}
+
+// Create the result list div and necessary styling
+function createResultsDiv(textArea) {
+    let parentDiv = document.createElement("div");
+    let resultsDiv = document.createElement("div");
+    let resultsList = document.createElement("ul");
+    let sideDiv = document.createElement("div");
+    let sideDivImg = document.createElement("img");
+
+    let textAreaId = getTextAreaIdentifier(textArea);
+    let typeClass = textAreaId.replaceAll(".", " ");
+
+    parentDiv.setAttribute("class", `autocompleteParent${typeClass}`);
+
+    resultsDiv.style.maxHeight = `${TAC_CFG.maxResults * 50}px`;
+    resultsDiv.setAttribute("class", `autocompleteResults${typeClass} notranslate`);
+    resultsDiv.setAttribute("translate", "no");
+    resultsList.setAttribute("class", "autocompleteResultsList");
+    resultsDiv.appendChild(resultsList);
+
+    sideDiv.setAttribute("class", `autocompleteResults${typeClass} sideInfo`);
+    sideDiv.appendChild(sideDivImg);
+
+    parentDiv.appendChild(resultsDiv);
+    parentDiv.appendChild(sideDiv);
+
+    return parentDiv;
+}
+
+// Show or hide the results div
+function isVisible(textArea) {
+    let textAreaId = getTextAreaIdentifier(textArea);
+    let parentDiv = gradioApp().querySelector('.autocompleteParent' + textAreaId);
+    return parentDiv.style.display === "flex";
+}
+
+function showResults(textArea) {
+    let textAreaId = getTextAreaIdentifier(textArea);
+    let parentDiv = gradioApp().querySelector('.autocompleteParent' + textAreaId);
+    parentDiv.style.display = "flex";
+
+    if (TAC_CFG.slidingPopup) {
+        let caretPosition = getCaretCoordinates(textArea, textArea.selectionEnd).left;
+        let offset = Math.min(textArea.offsetLeft - textArea.scrollLeft + caretPosition, textArea.offsetWidth - parentDiv.offsetWidth);
+
+        parentDiv.style.left = `${offset}px`;
+    } else {
+        if (parentDiv.style.left)
+            parentDiv.style.removeProperty("left");
+    }
+    // Reset here too to make absolutely sure the browser registers it
+    parentDiv.scrollTop = 0;
+
+    // Ensure preview is hidden
+    let previewDiv = gradioApp().querySelector(`.autocompleteParent${textAreaId} .sideInfo`);
+    previewDiv.style.display = "none";
+}
+
+function hideResults(textArea) {
+    let textAreaId = getTextAreaIdentifier(textArea);
+    let resultsDiv = gradioApp().querySelector('.autocompleteParent' + textAreaId);
+
+    if (!resultsDiv) return;
+
+    resultsDiv.style.display = "none";
+    selectedTag = null;
+}
+
+const WEIGHT_REGEX = /[([]([^()[\]:|]+)(?::(?:\d+(?:\.\d+)?|\.\d+))?[)\]]/g;
+const POINTY_REGEX = /<[^\s,<](?:[^\t\n\r,<>]*>|[^\t\n\r,> ]*)/g;
+const COMPLETED_WILDCARD_REGEX = /__[^\s,_][^\t\n\r,_]*[^\s,_]__[^\s,_]*/g;
+const STYLE_VAR_REGEX = /\$\(?[^$|\[\],\s]*\)?/g;
+const NORMAL_TAG_REGEX = /[^\s,|<>\[\]:]+_\([^\s,|<>\[\]:]*\)?|[^\s,|<>():\[\]]+|</g;
+const TAG_REGEX = new RegExp(`${POINTY_REGEX.source}|${COMPLETED_WILDCARD_REGEX.source}|${STYLE_VAR_REGEX.source}|${NORMAL_TAG_REGEX.source}`, "g");
+
+// On click, insert the tag into the prompt textbox with respect to the cursor position
+async function insertTextAtCursor(textArea, result, tagword, tabCompletedWithoutChoice = false) {
+    let text = result.text;
+    let tagType = result.type;
+
+    let cursorPos = textArea.selectionStart;
+    var sanitizedText = text
+
+    // Run sanitize queue and use first result as sanitized text
+    sanitizeResults = await processQueueReturn(QUEUE_SANITIZE, null, tagType, text);
+
+    if (sanitizeResults && sanitizeResults.length > 0) {
+        sanitizedText = sanitizeResults[0];
+    } else {
+        sanitizedText = TAC_CFG.replaceUnderscores ? text.replaceAll("_", " ") : text;
+
+        if (TAC_CFG.escapeParentheses && tagType === ResultType.tag) {
+            sanitizedText = sanitizedText
+                .replaceAll("(", "\\(")
+                .replaceAll(")", "\\)")
+                .replaceAll("[", "\\[")
+                .replaceAll("]", "\\]");
+        }
+    }
+
+    if ((tagType === ResultType.wildcardFile || tagType === ResultType.yamlWildcard)
+        && tabCompletedWithoutChoice
+        && TAC_CFG.wildcardCompletionMode !== "Always fully"
+        && sanitizedText.includes("/")) {
+        if (TAC_CFG.wildcardCompletionMode === "To next folder level") {
+            let regexMatch = sanitizedText.match(new RegExp(`${escapeRegExp(tagword)}([^/]*\\/?)`, "i"));
+            if (regexMatch) {
+                let pathPart = regexMatch[0];
+                // In case the completion would have just added a slash, try again one level deeper
+                if (pathPart === `${tagword}/`) {
+                    pathPart = sanitizedText.match(new RegExp(`${escapeRegExp(tagword)}\\/([^/]*\\/?)`, "i"))[0];
+                }
+                sanitizedText = pathPart;
+            }
+        } else if (TAC_CFG.wildcardCompletionMode === "To first difference") {
+            let firstDifference = 0;
+            let longestResult = results.map(x => x.text.length).reduce((a, b) => Math.max(a, b));
+            // Compare the results to each other to find the first point where they differ
+            for (let i = 0; i < longestResult; i++) {
+                let char = results[0].text[i];
+                if (results.every(x => x.text[i] === char)) {
+                    firstDifference++;
+                } else {
+                    break;
+                }
+            }
+            // Don't cut off the __ at the end if it is already the full path
+            if (firstDifference > 0 && firstDifference < longestResult) {
+                // +2 because the sanitized text already has the __ at the start but the matched text doesn't
+                sanitizedText = sanitizedText.substring(0, firstDifference + 2);
+            } else if (firstDifference === 0) {
+                sanitizedText = tagword;
+            }
+        }
+    }
+
+    var prompt = textArea.value;
+
+    // Edit prompt text
+    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(escapeRegExp(`${tagword}`), "i"));
+    let afterInsertCursorPos = editStart + match.index + sanitizedText.length;
+
+    var optionalSeparator = "";
+    let extraNetworkTypes = [ResultType.hypernetwork, ResultType.lora];
+    let noCommaTypes = [ResultType.wildcardFile, ResultType.yamlWildcard, ResultType.umiWildcard].concat(extraNetworkTypes);
+    if (!noCommaTypes.includes(tagType)) {
+        // Append comma if enabled and not already present
+        let beforeComma = surrounding.match(new RegExp(`${escapeRegExp(tagword)}[,:]`, "i")) !== null;
+        if (TAC_CFG.appendComma)
+            optionalSeparator = beforeComma ? "" : ",";
+        // Add space if enabled
+        if (TAC_CFG.appendSpace && !beforeComma)
+            optionalSeparator += " ";
+        // If at end of prompt and enabled, override the normal setting if not already added
+        if (!TAC_CFG.appendSpace && TAC_CFG.alwaysSpaceAtEnd)
+            optionalSeparator += surrounding.match(new RegExp(`${escapeRegExp(tagword)}$`, "im")) !== null ? " " : "";
+    } else if (extraNetworkTypes.includes(tagType)) {
+        // Use the dedicated separator for extra networks if it's defined, otherwise fall back to space
+        optionalSeparator = TAC_CFG.extraNetworksSeparator || " ";
+    }
+
+    // Escape $ signs since they are special chars for the replace function
+    // We need four since we're also escaping them in replaceAll in the first place
+    sanitizedText = sanitizedText.replaceAll("$", "$$$$");
+
+    // Replace partial tag word with new text, add comma if needed
+    let insert = surrounding.replace(match, sanitizedText + optionalSeparator);
+
+    // Add back start
+    var newPrompt = prompt.substring(0, editStart) + insert + prompt.substring(editEnd);
+
+    // Add lora/lyco keywords if enabled and found
+    let keywordsLength = 0;
+
+    if (TAC_CFG.modelKeywordCompletion !== "Never" && (tagType === ResultType.lora || tagType === ResultType.lyco)) {
+        let keywords = null;
+        // Check built-in activation words first
+        if (tagType === ResultType.lora || tagType === ResultType.lyco) {
+            let info = await fetchAPI(`tacapi/v1/lora-info/${result.text}`)
+            if (info && info["activation text"]) {
+                keywords = info["activation text"];
+            }
+        }
+
+        if (!keywords && modelKeywordPath.length > 0 && result.hash && result.hash !== "NOFILE" && result.hash.length > 0) {
+            let nameDict = modelKeywordDict.get(result.hash);
+            let names = [result.text + ".safetensors", result.text + ".pt", result.text + ".ckpt"];
+
+            // No match, try to find a sha256 match from the cache file
+            if (!nameDict) {
+                const sha256 = await fetchAPI(`/tacapi/v1/lora-cached-hash/${result.text}`)
+                if (sha256) {
+                    nameDict = modelKeywordDict.get(sha256);
+                }
+            }
+
+            if (nameDict) {
+                let found = false;
+                names.forEach(name => {
+                    if (!found && nameDict.has(name)) {
+                        found = true;
+                        keywords = nameDict.get(name);
+                    }
+                });
+
+                if (!found)
+                    keywords = nameDict.get("none");
+            }
+        }
+
+        if (keywords && keywords.length > 0) {
+            textBeforeKeywordInsertion = newPrompt;
+
+            if (TAC_CFG.modelKeywordLocation === "Start of prompt")
+                newPrompt = `${keywords}, ${newPrompt}`; // Insert keywords
+            else if (TAC_CFG.modelKeywordLocation === "End of prompt")
+                newPrompt = `${newPrompt}, ${keywords}`; // Insert keywords
+            else {
+                let keywordStart = prompt[editStart - 1] === " " ? editStart - 1 : editStart;
+                newPrompt = prompt.substring(0, keywordStart) + `, ${keywords} ${insert}` + prompt.substring(editEnd);
+            }
+
+
+            textAfterKeywordInsertion = newPrompt;
+            keywordInsertionUndone = false;
+            setTimeout(() => lastEditWasKeywordInsertion = true, 200)
+
+            keywordsLength = keywords.length + 2; // +2 for the comma and space
+        }
+    }
+
+    // Insert into prompt textbox and reposition cursor
+    textArea.value = newPrompt;
+    textArea.selectionStart = afterInsertCursorPos + optionalSeparator.length + keywordsLength;
+    textArea.selectionEnd = textArea.selectionStart
+
+    // Set self trigger flag to show wildcard contents after the filename was inserted
+    if ([ResultType.wildcardFile, ResultType.yamlWildcard, ResultType.umiWildcard].includes(result.type))
+        tacSelfTrigger = true;
+    // Since we've modified a Gradio Textbox component manually, we need to simulate an `input` DOM event to ensure it's propagated back to python.
+    // Uses a built-in method from the webui's ui.js which also already accounts for event target
+    updateInput(textArea);
+
+    // Update previous tags with the edited prompt to prevent re-searching the same term
+    let weightedTags = [...newPrompt.matchAll(WEIGHT_REGEX)]
+            .map(match => match[1]);
+    let tags = newPrompt.match(TAG_REGEX)
+    if (weightedTags !== null) {
+        tags = tags.filter(tag => !weightedTags.some(weighted => tag.includes(weighted)))
+            .concat(weightedTags);
+    }
+    previousTags = tags;
+
+    // Callback
+    let returns = await processQueueReturn(QUEUE_AFTER_INSERT, null, tagType, sanitizedText, newPrompt, textArea);
+    // Return if any queue function returned true (has handled hide/show already)
+    if (returns.some(x => x === true))
+        return;
+
+    // Hide results after inserting, if it hasn't been hidden already by a queue function
+    if (!hideBlocked && isVisible(textArea)) {
+        hideResults(textArea);
+    }
+}
+
+function addResultsToList(textArea, results, tagword, resetList) {
+    let textAreaId = getTextAreaIdentifier(textArea);
+    let resultDiv = gradioApp().querySelector('.autocompleteResults' + textAreaId);
+    let resultsList = resultDiv.querySelector('ul');
+
+    // Reset list, selection and scrollTop since the list changed
+    if (resetList) {
+        resultsList.innerHTML = "";
+        selectedTag = null;
+        oldSelectedTag = null;
+        resultDiv.scrollTop = 0;
+        resultCount = 0;
+    }
+
+    // Find right colors from config
+    let tagFileName = TAC_CFG.tagFile.split(".")[0];
+    let tagColors = TAC_CFG.colorMap;
+    let mode = (document.querySelector(".dark") || gradioApp().querySelector(".dark")) ? 0 : 1;
+    let nextLength = Math.min(results.length, resultCount + TAC_CFG.resultStepLength);
+
+    for (let i = resultCount; i < nextLength; i++) {
+        let result = results[i];
+
+        // Skip if the result is null or undefined
+        if (!result)
+            continue;
+
+        let li = document.createElement("li");
+
+        let flexDiv = document.createElement("div");
+        flexDiv.classList.add("resultsFlexContainer");
+        li.appendChild(flexDiv);
+
+        let itemText = document.createElement("div");
+        itemText.classList.add("acListItem");
+
+        let displayText = "";
+        // If the tag matches the tagword, we don't need to display the alias
+        if(result.type === ResultType.chant) {
+            displayText = escapeHTML(result.aliases);
+        } else if (result.aliases && !result.text.includes(tagword)) { // Alias
+            let splitAliases = result.aliases.split(",");
+            let bestAlias = splitAliases.find(a => a.toLowerCase().includes(tagword));
+
+            // search in translations if no alias matches
+            if (!bestAlias) {
+                let tagOrAlias = pair => pair[0] === result.text || splitAliases.includes(pair[0]);
+                var tArray = [...translations];
+                if (tArray) {
+                    var translationKey = [...translations].find(pair => tagOrAlias(pair) && pair[1].includes(tagword));
+                    if (translationKey)
+                        bestAlias = translationKey[0];
+                }
+            }
+
+            displayText = escapeHTML(bestAlias);
+
+            // Append translation for alias if it exists and is not what the user typed
+            if (translations.has(bestAlias) && translations.get(bestAlias) !== bestAlias && bestAlias !== result.text)
+                displayText += `[${translations.get(bestAlias)}]`;
+
+            if (!TAC_CFG.alias.onlyShowAlias && result.text !== bestAlias)
+                displayText += " ➝ " + result.text;
+        } else { // No alias
+            displayText = escapeHTML(result.text);
+        }
+
+        // Append translation for result if it exists
+        if (translations.has(result.text))
+            displayText += `[${translations.get(result.text)}]`;
+
+        // Print search term bolded in result
+        itemText.innerHTML = displayText.replace(tagword, `<b>${tagword}</b>`);
+
+        const splitTypes = [ResultType.wildcardFile, ResultType.yamlWildcard]
+        if (splitTypes.includes(result.type) && itemText.innerHTML.includes("/")) {
+            let parts = itemText.innerHTML.split("/");
+            let lastPart = parts[parts.length - 1];
+            parts = parts.slice(0, parts.length - 1);
+
+            itemText.innerHTML = "<span class='acPathPart'>" + parts.join("</span><span class='acPathPart'>/") + "</span>" + "/" + lastPart;
+        }
+
+        // Add wiki link if the setting is enabled and a supported tag set loaded
+        if (TAC_CFG.showWikiLinks
+            && (result.type === ResultType.tag)
+            && (tagFileName.toLowerCase().startsWith("danbooru") || tagFileName.toLowerCase().startsWith("e621"))) {
+            let wikiLink = document.createElement("a");
+            wikiLink.classList.add("acWikiLink");
+            wikiLink.innerText = "?";
+
+            let linkPart = displayText;
+            // Only use alias result if it is one
+            if (displayText.includes("➝"))
+                linkPart = displayText.split(" ➝ ")[1];
+
+            // Remove any trailing translations
+            if (linkPart.includes("[")) {
+                linkPart = linkPart.split("[")[0]
+            }
+
+            linkPart = encodeURIComponent(linkPart);
+
+            // Set link based on selected file
+            let tagFileNameLower = tagFileName.toLowerCase();
+            if (tagFileNameLower.startsWith("danbooru")) {
+                wikiLink.href = `https://danbooru.donmai.us/wiki_pages/${linkPart}`;
+            } else if (tagFileNameLower.startsWith("e621")) {
+                wikiLink.href = `https://e621.net/wiki_pages/${linkPart}`;
+            }
+
+            wikiLink.target = "_blank";
+            flexDiv.appendChild(wikiLink);
+        }
+
+        flexDiv.appendChild(itemText);
+
+        // Add post count & color if it's a tag
+        // Wildcards & Embeds have no tag category
+        if (result.category) {
+            // Set the color of the tag
+            let cat = result.category;
+            let colorGroup = tagColors[tagFileName];
+            // Default to danbooru scheme if no matching one is found
+            if (!colorGroup)
+                colorGroup = tagColors["danbooru"];
+
+            // Set tag type to invalid if not found
+            if (!colorGroup[cat])
+                cat = "-1";
+
+            flexDiv.style = `color: ${colorGroup[cat][mode]};`;
+        }
+
+        // Post count
+        if (result.count && !isNaN(result.count)) {
+            let postCount = result.count;
+            let formatter;
+
+            // Danbooru formats numbers with a padded fraction for 1M or 1k, but not for 10/100k
+            if (postCount >= 1000000 || (postCount >= 1000 && postCount < 10000))
+                formatter = Intl.NumberFormat("en", { notation: "compact", minimumFractionDigits: 1, maximumFractionDigits: 1 });
+            else
+                formatter = Intl.NumberFormat("en", {notation: "compact"});
+
+            let formattedCount = formatter.format(postCount);
+
+            let countDiv = document.createElement("div");
+            countDiv.textContent = formattedCount;
+            countDiv.classList.add("acMetaText");
+            flexDiv.appendChild(countDiv);
+        } else if (result.meta) { // Check if there is meta info to display
+            let metaDiv = document.createElement("div");
+            metaDiv.textContent = result.meta;
+            metaDiv.classList.add("acMetaText");
+
+            // Add version info classes if it is an embedding
+            if (result.type === ResultType.embedding) {
+                if (result.meta.startsWith("v1"))
+                    itemText.classList.add("acEmbeddingV1");
+                else if (result.meta.startsWith("v2"))
+                    itemText.classList.add("acEmbeddingV2");
+            }
+
+            flexDiv.appendChild(metaDiv);
+        }
+
+        // Add listener
+        li.addEventListener("click", function () { insertTextAtCursor(textArea, result, tagword); });
+        // Add element to list
+        resultsList.appendChild(li);
+    }
+    resultCount = nextLength;
+
+    if (resetList) {
+        selectedTag = null;
+        oldSelectedTag = null;
+        resultDiv.scrollTop = 0;
+    }
+}
+
+async function updateSelectionStyle(textArea, newIndex, oldIndex) {
+    let textAreaId = getTextAreaIdentifier(textArea);
+    let resultDiv = gradioApp().querySelector('.autocompleteResults' + textAreaId);
+    let resultsList = resultDiv.querySelector('ul');
+    let items = resultsList.getElementsByTagName('li');
+
+    if (oldIndex != null) {
+        items[oldIndex].classList.remove('selected');
+    }
+
+    // make it safer
+    if (newIndex !== null) {
+        let selected = items[newIndex];
+        selected.classList.add('selected');
+
+         // Set scrolltop to selected item
+        resultDiv.scrollTop = selected.offsetTop - resultDiv.offsetTop;
+    }
+
+    // Show preview if enabled and the selected type supports it
+    if (newIndex !== null) {
+        let selected = items[newIndex];
+        let previewTypes = ["v1 Embedding", "v2 Embedding", "Hypernetwork", "Lora", "Lyco"];
+        let selectedType = selected.querySelector(".acMetaText").innerText;
+        let selectedFilename = selected.querySelector(".acListItem").innerText;
+
+        let previewDiv = gradioApp().querySelector(`.autocompleteParent${textAreaId} .sideInfo`);
+
+        if (TAC_CFG.showExtraNetworkPreviews && previewTypes.includes(selectedType)) {
+            let shorthandType = "";
+            switch (selectedType) {
+                case "v1 Embedding":
+                case "v2 Embedding":
+                    shorthandType = "embed";
+                    break;
+                case "Hypernetwork":
+                    shorthandType = "hyper";
+                    break;
+                case "Lora":
+                    shorthandType = "lora";
+                    break;
+                case "Lyco":
+                    shorthandType = "lyco";
+                    break;
+            }
+
+            let img = previewDiv.querySelector("img");
+
+            let url = await getExtraNetworkPreviewURL(selectedFilename, shorthandType);
+            if (url) {
+                img.src = url;
+                previewDiv.style.display = "block";
+            } else {
+                previewDiv.style.display = "none";
+            }
+        } else {
+            previewDiv.style.display = "none";
+        }
+    }
+}
+
+// Check if the last edit was the keyword insertion, and catch undo/redo in that case
+function checkKeywordInsertionUndo(textArea, event) {
+    if (TAC_CFG.modelKeywordCompletion === "Never") return;
+
+    switch (event.inputType) {
+        case "historyUndo":
+            if (lastEditWasKeywordInsertion && !keywordInsertionUndone) {
+                keywordInsertionUndone = true;
+                textArea.value = textBeforeKeywordInsertion;
+                tacSelfTrigger = true;
+                updateInput(textArea);
+            }
+            break;
+        case "historyRedo":
+            if (lastEditWasKeywordInsertion && keywordInsertionUndone) {
+                keywordInsertionUndone = false;
+                textArea.value = textAfterKeywordInsertion;
+                tacSelfTrigger = true;
+                updateInput(textArea);
+            }
+        case undefined:
+            // undefined is caused by the updateInput event firing, so we just ignore it
+            break;
+        default:
+            // Everything else deactivates the keyword undo and returns to normal undo behavior
+            lastEditWasKeywordInsertion = false;
+            keywordInsertionUndone = false;
+            textBeforeKeywordInsertion = "";
+            textAfterKeywordInsertion = "";
+            break;
+    }
+}
+
+async function autocomplete(textArea, prompt, fixedTag = null) {
+    // Return if the function is deactivated in the UI
+
+    // Guard for empty prompt
+    if (prompt.length === 0) {
+        hideResults(textArea);
+        previousTags = [];
+        tagword = "";
+        return;
+    }
+
+    if (fixedTag === null) {
+        // Match tags with RegEx to get the last edited one
+        // We also match for the weighting format (e.g. "tag:1.0") here, and combine the two to get the full tag word set
+        let weightedTags = [...prompt.matchAll(WEIGHT_REGEX)]
+            .map(match => match[1]);
+        let tags = prompt.match(TAG_REGEX)
+        if (weightedTags !== null && tags !== null) {
+            tags = tags.filter(tag => !weightedTags.some(weighted => tag.includes(weighted) && !tag.startsWith("<[") && !tag.startsWith("$(")))
+                .concat(weightedTags);
+        }
+
+        // Guard for no tags
+        if (!tags || tags.length === 0) {
+            previousTags = [];
+            tagword = "";
+            hideResults(textArea);
+            return;
+        }
+
+        let tagCountChange = tags.length - previousTags.length;
+        let diff = difference(tags, previousTags);
+        previousTags = tags;
+
+        // Guard for no difference / only whitespace remaining / last edited tag was fully removed
+        if (diff === null || diff.length === 0 || (diff.length === 1 && tagCountChange < 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;
+    }
+
+    results = [];
+    resultCountBeforeNormalTags = 0;
+    tagword = tagword.toLowerCase().replace(/[\n\r]/g, "");
+
+    // Process all parsers
+    let resultCandidates = (await processParsers(textArea, prompt))?.filter(x => x.length > 0);
+    // If one ore more result candidates match, use their results
+    if (resultCandidates && resultCandidates.length > 0) {
+        // Flatten our candidate(s)
+        results = resultCandidates.flat();
+        // Sort results, but not if it's umi tags since they are sorted by count
+        if (!(resultCandidates.length === 1 && results[0].type === ResultType.umiWildcard))
+            results = results.sort(getSortFunction());
+
+        // Since some tags are kaomoji, we have to add the normal results in some cases
+        if (tagword.startsWith("<") || tagword.startsWith("*<")) {
+            // Create escaped search regex with support for * as a start placeholder
+            let searchRegex;
+            if (tagword.startsWith("*")) {
+                tagword = tagword.slice(1);
+                searchRegex = new RegExp(`${escapeRegExp(tagword)}`, 'i');
+            } else {
+                searchRegex = new RegExp(`(^|[^a-zA-Z])${escapeRegExp(tagword)}`, 'i');
+            }
+            let genericResults = allTags.filter(x => x[0].toLowerCase().search(searchRegex) > -1).slice(0, TAC_CFG.maxResults);
+
+            genericResults.forEach(g => {
+                let result = new AutocompleteResult(g[0].trim(), ResultType.tag)
+                result.category = g[1];
+                result.count = g[2];
+                result.aliases = g[3];
+                results.push(result);
+            });
+        }
+    }
+    // Else search the normal tag list
+    if (!resultCandidates || resultCandidates.length === 0
+        || (TAC_CFG.includeEmbeddingsInNormalResults && !(tagword.startsWith("<") || tagword.startsWith("*<")))
+    ) {
+        resultCountBeforeNormalTags = results.length;
+
+        // Create escaped search regex with support for * as a start placeholder
+        let searchRegex;
+        if (tagword.startsWith("*")) {
+            tagword = tagword.slice(1);
+            searchRegex = new RegExp(`${escapeRegExp(tagword)}`, 'i');
+        } else {
+            searchRegex = new RegExp(`(^|[^a-zA-Z])${escapeRegExp(tagword)}`, 'i');
+        }
+
+        // Both normal tags and aliases/translations are included depending on the config
+        let baseFilter = (x) => x[0].toLowerCase().search(searchRegex) > -1;
+        let aliasFilter = (x) => x[3] && x[3].toLowerCase().search(searchRegex) > -1;
+        let translationFilter = (x) => (translations.has(x[0]) && translations.get(x[0]).toLowerCase().search(searchRegex) > -1)
+            || x[3] && x[3].split(",").some(y => translations.has(y) && translations.get(y).toLowerCase().search(searchRegex) > -1);
+
+        let fil;
+        if (TAC_CFG.alias.searchByAlias && TAC_CFG.translation.searchByTranslation)
+            fil = (x) => baseFilter(x) || aliasFilter(x) || translationFilter(x);
+        else if (TAC_CFG.alias.searchByAlias && !TAC_CFG.translation.searchByTranslation)
+            fil = (x) => baseFilter(x) || aliasFilter(x);
+        else if (TAC_CFG.translation.searchByTranslation && !TAC_CFG.alias.searchByAlias)
+            fil = (x) => baseFilter(x) || translationFilter(x);
+        else
+            fil = (x) => baseFilter(x);
+
+        // Add final results
+        allTags.filter(fil).forEach(t => {
+            let result = new AutocompleteResult(t[0].trim(), ResultType.tag)
+            result.category = t[1];
+            result.count = t[2];
+            result.aliases = t[3];
+            results.push(result);
+        });
+
+        // Add extras
+        if (TAC_CFG.extra.extraFile) {
+            let extraResults = [];
+
+            extras.filter(fil).forEach(e => {
+                let result = new AutocompleteResult(e[0].trim(), ResultType.extra)
+                result.category = e[1] || 0; // If no category is given, use 0 as the default
+                result.meta = e[2] || "Custom tag";
+                result.aliases = e[3] || "";
+                extraResults.push(result);
+            });
+
+            if (TAC_CFG.extra.addMode === "Insert before") {
+                results = extraResults.concat(results);
+            } else {
+                results = results.concat(extraResults);
+            }
+        }
+
+        // Slice if the user has set a max result count
+        if (!TAC_CFG.showAllResults) {
+            results = results.slice(0, TAC_CFG.maxResults + resultCountBeforeNormalTags);
+        }
+    }
+
+    // Guard for empty results
+    if (!results || results.length === 0) {
+        //console.log('No results found for "' + tagword + '"');
+        hideResults(textArea);
+        return;
+    }
+
+    addResultsToList(textArea, results, tagword, true);
+    showResults(textArea);
+}
+
+function navigateInList(textArea, event) {
+    // Return if the function is deactivated in the UI or the current model is excluded due to white/blacklist settings
+
+    let keys = TAC_CFG.keymap;
+
+    // Close window if Home or End is pressed while not a keybinding, since it would break completion on leaving the original tag
+    if ((event.key === "Home" || event.key === "End") && !Object.values(keys).includes(event.key)) {
+        hideResults(textArea);
+        return;
+    }
+
+    // All set keys that are not None or empty are valid
+    // Default keys are: ArrowUp, ArrowDown, PageUp, PageDown, Home, End, Enter, Tab, Escape
+    validKeys = Object.values(keys).filter(x => x !== "None" && x !== "");
+
+    if (!validKeys.includes(event.key)) return;
+    if (!isVisible(textArea)) return
+    // Add modifier keys to base as text+.
+    let modKey = "";
+    if (event.ctrlKey) modKey += "Ctrl+";
+    if (event.altKey) modKey += "Alt+";
+    if (event.shiftKey) modKey += "Shift+";
+    if (event.metaKey) modKey += "Meta+";
+        modKey += event.key;
+
+    oldSelectedTag = selectedTag;
+
+    switch (modKey) {
+        case keys["MoveUp"]:
+            if (selectedTag === null) {
+                selectedTag = resultCount - 1;
+            } else {
+                selectedTag = (selectedTag - 1 + resultCount) % resultCount;
+            }
+            break;
+        case keys["MoveDown"]:
+            if (selectedTag === null) {
+                selectedTag = 0;
+            } else {
+                selectedTag = (selectedTag + 1) % resultCount;
+            }
+            break;
+        case keys["JumpUp"]:
+            if (selectedTag === null || selectedTag === 0) {
+                selectedTag = resultCount - 1;
+            } else {
+                selectedTag = (Math.max(selectedTag - 5, 0) + resultCount) % resultCount;
+            }
+            break;
+        case keys["JumpDown"]:
+            if (selectedTag === null || selectedTag === resultCount - 1) {
+                selectedTag = 0;
+            } else {
+                selectedTag = Math.min(selectedTag + 5, resultCount - 1) % resultCount;
+            }
+            break;
+        case keys["JumpToStart"]:
+            if (TAC_CFG.includeEmbeddingsInNormalResults &&
+                selectedTag > resultCountBeforeNormalTags &&
+                resultCountBeforeNormalTags > 0
+            ) {
+                selectedTag = resultCountBeforeNormalTags;
+            } else {
+                selectedTag = 0;
+            }
+            break;
+        case keys["JumpToEnd"]:
+            // Jump to the end of the list, or the end of embeddings if they are included in the normal results
+            if (TAC_CFG.includeEmbeddingsInNormalResults &&
+                selectedTag < resultCountBeforeNormalTags &&
+                resultCountBeforeNormalTags > 0
+            ) {
+                selectedTag = Math.min(resultCountBeforeNormalTags, resultCount - 1);
+            } else {
+                selectedTag = resultCount - 1;
+            }
+            break;
+        case keys["ChooseSelected"]:
+            if (selectedTag !== null) {
+                insertTextAtCursor(textArea, results[selectedTag], tagword);
+            } else {
+                hideResults(textArea);
+                return;
+            }
+            break;
+        case keys["ChooseFirstOrSelected"]:
+            let withoutChoice = false;
+            if (selectedTag === null) {
+                selectedTag = 0;
+                withoutChoice = true;
+            } else if (TAC_CFG.wildcardCompletionMode === "To next folder level") {
+                withoutChoice = true;
+            }
+            insertTextAtCursor(textArea, results[selectedTag], tagword, withoutChoice);
+            break;
+        case keys["Close"]:
+            hideResults(textArea);
+            break;
+        default:
+            if (event.ctrlKey || event.altKey || event.shiftKey || event.metaKey) return;
+    }
+    let moveKeys = [keys["MoveUp"], keys["MoveDown"], keys["JumpUp"], keys["JumpDown"], keys["JumpToStart"], keys["JumpToEnd"]];
+    if (selectedTag === resultCount - 1 && moveKeys.includes(event.key)) {
+        addResultsToList(textArea, results, tagword, false);
+    }
+    // Update highlighting
+    if (selectedTag !== null)
+        updateSelectionStyle(textArea, selectedTag, oldSelectedTag);
+
+    // Prevent default behavior
+    event.preventDefault();
+    event.stopPropagation();
+}
+
+function addAutocompleteToArea(area) {
+    // Return if autocomplete is disabled for the current area type in config
+    let textAreaId = getTextAreaIdentifier(area);
+    if ((!TAC_CFG.activeIn.img2img && textAreaId.includes("img2img"))
+        || (!TAC_CFG.activeIn.txt2img && textAreaId.includes("txt2img"))
+        || (!TAC_CFG.activeIn.negativePrompts && textAreaId.includes("n"))
+        || (!TAC_CFG.activeIn.thirdParty && textAreaId.includes("thirdParty"))) {
+        return;
+    }
+
+    // Only add listeners once
+    if (!area.classList.contains('autocomplete')) {
+        // Add our new element
+        var resultsDiv = createResultsDiv(area);
+        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', (e) => {
+
+            // Cancel autocomplete itself if the event has no inputType (e.g. because it was triggered by the updateInput() function)
+            if (!e.inputType && !tacSelfTrigger) return;
+            tacSelfTrigger = false;
+
+            debounce(autocomplete(area, area.value), TAC_CFG.delayTime);
+            checkKeywordInsertionUndo(area, e);
+        });
+        // Add focusout event listener
+        area.addEventListener('focusout', debounce(() => {
+            if (!hideBlocked)
+                hideResults(area);
+        }, 400));
+        // Add up and down arrow event listener
+        area.addEventListener('keydown', (e) => navigateInList(area, e));
+        // CompositionEnd fires after the user has finished IME composing
+        // We need to block hide here to prevent the enter key from insta-closing the results
+        area.addEventListener('compositionend', () => {
+            hideBlocked = true;
+            setTimeout(() => { hideBlocked = false; }, 100);
+        });
+
+        // Add class so we know we've already added the listeners
+        area.classList.add('autocomplete');
+    }
+}
+
+// One-time setup, triggered from onUiUpdate
+async function setup() {
+    // Load external files needed by completion extensions
+    await processQueue(QUEUE_FILE_LOAD, null);
+
+    // Find all textareas
+    let textAreas = getTextAreas();
+
+    // Add mutation observer to accordions inside a base that has onDemand set to true
+    addOnDemandObservers(addAutocompleteToArea);
+
+    // Not found, we're on a page without prompt textareas
+    if (textAreas.every(v => v === null || v === undefined)) return;
+    // Already added or unnecessary to add
+    if (gradioApp().querySelector('.autocompleteParent.p')) {
+        if (gradioApp().querySelector('.autocompleteParent.n') || !TAC_CFG.activeIn.negativePrompts) {
+            return;
+        }
+    } else if (!TAC_CFG.activeIn.txt2img && !TAC_CFG.activeIn.img2img) {
+        return;
+    }
+
+    textAreas.forEach(area => addAutocompleteToArea(area));
+    textAreas.forEach(area => area.offsetParent.style.setProperty('overflow', 'visible'));
+    textAreas[0].offsetParent.parentElement.style.overflow = 'visible';
+    // Add style to dom
+    let acStyle = document.createElement('style');
+    let mode = (document.querySelector(".dark") || gradioApp().querySelector(".dark")) ? 0 : 1;
+    // Check if we are on webkit
+    let browser = navigator.userAgent.toLowerCase().indexOf('firefox') > -1 ? "firefox" : "other";
+
+    let css = autocompleteCSS;
+    // Replace vars with actual values (can't use actual css vars because of the way we inject the css)
+    Object.keys(styleColors).forEach((key) => {
+        css = css.replaceAll(`var(${key})`, styleColors[key][mode]);
+    })
+    Object.keys(browserVars).forEach((key) => {
+        css = css.replaceAll(`var(${key})`, browserVars[key][browser]);
+    })
+
+    if (acStyle.styleSheet) {
+        acStyle.styleSheet.cssText = css;
+    } else {
+        acStyle.appendChild(document.createTextNode(css));
+    }
+    gradioApp().appendChild(acStyle);
+
+    // Callback
+    await processQueue(QUEUE_AFTER_SETUP, null);
+}
+var tacLoading = false;
+async function run() {
+    if (tacLoading) return;
+    if (!TAC_CFG) return;
+    tacLoading = true;
+    // Get our tag base path from the temp file
+    // Rest of setup
+    await loadTags(TAC_CFG);
+    setup();
+    tacLoading = false;
+}
+run();

tagcomplete/tags/demo-chants.json

@@ -0,0 +1,32 @@
+[
+    {
+        "name": "Basic-NegativePrompt",
+        "terms": "Basic,Negative,Low,Quality",
+        "content": "(worst quality, low quality, normal quality)",
+        "color": 3
+    },
+    {
+        "name": "Basic-HighQuality",
+        "terms": "Basic,Best,High,Quality",
+        "content": "(masterpiece, best quality, high quality, highres, ultra-detailed)",
+        "color": 1
+    },
+    {
+        "name": "Basic-Start",
+        "terms": "Basic, Start, Simple, Demo",
+        "content": "(masterpiece, best quality, high quality, highres), 1girl, extremely beautiful detailed face, short curly hair, light smile, flower dress, outdoors, leaf, tree, best shadow",
+        "color": 5
+    },
+    {
+        "name": "Fancy-FireMagic",
+        "terms": "Fire, Magic, Fancy",
+        "content": "(extremely detailed CG unity 8k wallpaper), (masterpiece), (best quality), (ultra-detailed), (best illustration),(best shadow), (an extremely delicate and beautiful), dynamic angle, floating, fine detail, (bloom), (shine), glinting stars, classic, (painting), (sketch),\n\na girl, solo, bare shoulders, flat_chest, diamond and glaring eyes, beautiful detailed cold face, very long blue and sliver hair, floating black feathers, wavy hair, extremely delicate and beautiful girls, beautiful detailed eyes, glowing eyes,\n\npalace, the best building, ((Fire butterflies, Flying sparks, Flames))",
+        "color": 5
+    },
+    {
+        "name": "Fancy-WaterMagic",
+        "terms": "Water, Magic, Fancy",
+        "content": "(extremely detailed CG unity 8k wallpaper), (masterpiece), (best quality), (ultra-detailed), (best illustration),(best shadow), (an extremely delicate and beautiful), classic, dynamic angle, floating, fine detail, Depth of field, classic, (painting), (sketch), (bloom), (shine), glinting stars,\n\na girl, solo, bare shoulders, flat chest, diamond and glaring eyes, beautiful detailed cold face, very long blue and sliver hair, floating black feathers, wavy hair, extremely delicate and beautiful girls, beautiful detailed eyes, glowing eyes,\n\nriver, (forest),palace, (fairyland,feather,flowers, nature),(sunlight),Hazy fog, mist",
+        "color": 5
+    }
+]

tagcomplete/tags/extra-quality-tags.csv

@@ -0,0 +1,6 @@
+masterpiece,5,Quality tag,,
+best_quality,5,Quality tag,,
+high_quality,5,Quality tag,,
+normal_quality,5,Quality tag,,
+low_quality,5,Quality tag,,
+worst_quality,5,Quality tag,,