Update README.md

Since file extensions are already cut off before the client-side request, it's not needed here anymore

README.md

@@ -74,6 +74,10 @@ Wildcard script support:
 
 https://user-images.githubusercontent.com/34448969/200128031-22dd7c33-71d1-464f-ae36-5f6c8fd49df0.mp4
 
+Extra Network preview support:
+
+https://github.com/DominikDoom/a1111-sd-webui-tagcomplete/assets/34448969/3c0cad84-fb5f-436d-b05a-28db35860d13
+
 Dark and Light mode supported, including tag colors:
 
 ![results_dark](https://user-images.githubusercontent.com/34448969/200128214-3b6f21b4-9dda-4acf-820e-5df0285c30d6.png)
@@ -123,6 +127,13 @@ Completion for these types is triggered by typing `<`. By default it will show t
    - Or `<lora:` and `<lyco:` respectively for the long form
 - `<h:` or `<hypernet:` will only show Hypernetworks
 
+### Live previews
+Tag Autocomplete will now also show the preview images used for the cards in the Extra Networks menu in a small window next to the regular popup.
+This enables quick comparisons and additional info for unclear filenames without having to stop typing to look it up in the webui menu.
+It works for all supported extra network types that use preview images (Loras/Lycos, Embeddings & Hypernetworks). The preview window will stay hidden for normal tags or if no preview was found.
+
+![extra_live_preview](https://github.com/DominikDoom/a1111-sd-webui-tagcomplete/assets/34448969/6a5d81e6-b3a0-407b-8bac-c9790f86016c)
+
 ### Lora / Lyco trigger word completion
 This feature will try to add known trigger words on autocompleting a Lora/Lyco.
 
@@ -307,6 +318,14 @@ If this option is turned on, it will show a `?` link next to the tag. Clicking t
 
 ![wikiLink](https://github.com/DominikDoom/a1111-sd-webui-tagcomplete/assets/34448969/733e1ba8-89e1-4c2b-8c4e-2d23352bd3d7)
 </details>
+<!-- Wiki links -->
+<details>
+<summary>Extra network live previews</summary>
+
+This option enables a small preview window alongside the normal completion popup that will show the card preview also usd in the extra networks tab for that file.
+
+![extraNetworkPreviews](https://github.com/DominikDoom/a1111-sd-webui-tagcomplete/assets/34448969/72b5473f-563e-4238-a513-38b60ac87e96)
+</details>
 <!-- Insertion -->
 <details>
 <summary>Completion settings</summary>

javascript/__globals.js

@@ -11,6 +11,7 @@ var extras = [];
 var wildcardFiles = [];
 var wildcardExtFiles = [];
 var yamlWildcards = [];
+var umiWildcards = [];
 var embeddings = [];
 var hypernetworks = [];
 var loras = [];

javascript/_result.js

@@ -8,10 +8,11 @@ const ResultType = Object.freeze({
     "wildcardTag": 4,
     "wildcardFile": 5,
     "yamlWildcard": 6,
-    "hypernetwork": 7,
-    "lora": 8,
-    "lyco": 9,
-    "chant": 10
+    "umiWildcard": 7,
+    "hypernetwork": 8,
+    "lora": 9,
+    "lyco": 10,
+    "chant": 11
 });
 
 // Class to hold result data and annotations to make it clearer to use

javascript/_utils.js

@@ -81,6 +81,15 @@ async function fetchAPI(url, json = true, cache = false) {
         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)
+        return `file=${previewJSON.url}`;
+    else
+        return null;
+}
+
 // Debounce function to prevent spamming the autocomplete function
 var dbTimeOut;
 const debounce = (func, wait = 300) => {
@@ -109,6 +118,28 @@ function difference(a, b) {
     )].reduce((acc, [v, count]) => acc.concat(Array(Math.abs(count)).fill(v)), []);
 }
 
+// Object flatten function adapted from https://stackoverflow.com/a/61602592
+// $roots keeps previous parent properties as they will be added as a prefix for each prop.
+// $sep is just a preference if you want to seperate nested paths other than dot.
+function flatten(obj, roots = [], sep = ".") {
+  return Object.keys(obj).reduce(
+    (memo, prop) =>
+      Object.assign(
+        // create a new object
+        {},
+        // include previously returned object
+        memo,
+        Object.prototype.toString.call(obj[prop]) === "[object Object]"
+          ? // keep working if value is an object
+            flatten(obj[prop], roots.concat([prop]), sep)
+          : // include current prop and value and prefix prop with the roots
+            { [roots.concat([prop]).join(sep)]: obj[prop] }
+      ),
+    {}
+  );
+}
+  
+
 // Sliding window function to get possible combination groups of an array
 function toNgrams(inputArray, size) {
     return Array.from(

javascript/ext_loras.js

@@ -16,7 +16,12 @@ class LoraParser extends BaseTagParser {
         // Add final results
         let finalResults = [];
         tempResults.forEach(t => {
-            let result = new AutocompleteResult(t[0].trim(), ResultType.lora)
+            const text = t[0].trim();
+            let lastDot = text.lastIndexOf(".") > -1 ? text.lastIndexOf(".") : text.length;
+            let lastSlash = text.lastIndexOf("/") > -1 ? text.lastIndexOf("/") : -1;
+            let name = text.substring(lastSlash + 1, lastDot);
+
+            let result = new AutocompleteResult(name, ResultType.lora)
             result.meta = "Lora";
             result.hash = t[1];
             finalResults.push(result);
@@ -46,11 +51,7 @@ async function sanitize(tagType, text) {
             multiplier = info["preferred weight"];
         }
 
-        const lastDot = text.lastIndexOf(".");
-        const lastSlash = text.lastIndexOf("/");
-        const name = text.substring(lastSlash + 1, lastDot);
-
-        return `<lora:${name}:${multiplier}>`;
+        return `<lora:${text}:${multiplier}>`;
     }
     return null;
 }

javascript/ext_lycos.js

@@ -16,7 +16,12 @@ class LycoParser extends BaseTagParser {
         // Add final results
         let finalResults = [];
         tempResults.forEach(t => {
-            let result = new AutocompleteResult(t[0].trim(), ResultType.lyco)
+            const text = t[0].trim();
+            let lastDot = text.lastIndexOf(".") > -1 ? text.lastIndexOf(".") : text.length;
+            let lastSlash = text.lastIndexOf("/") > -1 ? text.lastIndexOf("/") : -1;
+            let name = text.substring(lastSlash + 1, lastDot);
+
+            let result = new AutocompleteResult(name, ResultType.lyco)
             result.meta = "Lyco";
             result.hash = t[1];
             finalResults.push(result);
@@ -46,11 +51,7 @@ async function sanitize(tagType, text) {
             multiplier = info["preferred weight"];
         }
 
-        const lastDot = text.lastIndexOf(".");
-        const lastSlash = text.lastIndexOf("/");
-        const name = text.substring(lastSlash + 1, lastDot);
-
-        return `<lyco:${name}:${multiplier}>`;
+        return `<lyco:${text}:${multiplier}>`;
     }
     return null;
 }

javascript/ext_umi.js

@@ -74,7 +74,7 @@ class UmiParser extends BaseTagParser {
         //console.log({ matches })
 
         const filteredWildcards = (tagword) => {
-            const wildcards = yamlWildcards.filter(x => {
+            const wildcards = umiWildcards.filter(x => {
                 let tags = x[1];
                 const matchesNeg =
                     matches.negative.length === 0
@@ -144,7 +144,7 @@ class UmiParser extends BaseTagParser {
                 // Add final results
                 let finalResults = [];
                 tempResults.forEach(t => {
-                    let result = new AutocompleteResult(t[0].trim(), ResultType.yamlWildcard)
+                    let result = new AutocompleteResult(t[0].trim(), ResultType.umiWildcard)
                     result.count = t[1];
                     finalResults.push(result);
                 });
@@ -156,7 +156,7 @@ class UmiParser extends BaseTagParser {
                 // Add final results
                 let finalResults = [];
                 filteredWildcardsSorted.forEach(t => {
-                    let result = new AutocompleteResult(t[0].trim(), ResultType.yamlWildcard)
+                    let result = new AutocompleteResult(t[0].trim(), ResultType.umiWildcard)
                     result.count = t[1];
                     finalResults.push(result);
                 });
@@ -171,7 +171,7 @@ class UmiParser extends BaseTagParser {
             // Add final results
             let finalResults = [];
             filteredWildcardsSorted.forEach(t => {
-                let result = new AutocompleteResult(t[0].trim(), ResultType.yamlWildcard)
+                let result = new AutocompleteResult(t[0].trim(), ResultType.umiWildcard)
                 result.count = t[1];
                 finalResults.push(result);
             });
@@ -184,8 +184,8 @@ class UmiParser extends BaseTagParser {
 }
 
 function updateUmiTags( tagType, sanitizedText, newPrompt, textArea) {
-    // If it was a yaml wildcard, also update the umiPreviousTags
-    if (tagType === ResultType.yamlWildcard && originalTagword.length > 0) {
+    // If it was a umi wildcard, also update the umiPreviousTags
+    if (tagType === ResultType.umiWildcard && originalTagword.length > 0) {
         let umiSubPrompts = [...newPrompt.matchAll(UMI_PROMPT_REGEX)];
 
         let umiTags = [];
@@ -203,11 +203,11 @@ function updateUmiTags( tagType, sanitizedText, newPrompt, textArea) {
 }
 
 async function load() {
-    if (yamlWildcards.length === 0) {
+    if (umiWildcards.length === 0) {
         try {
-            let yamlTags = (await readFile(`${tagBasePath}/temp/wcet.txt`)).split("\n");
+            let umiTags = (await readFile(`${tagBasePath}/temp/umi_tags.txt`)).split("\n");
             // Split into tag, count pairs
-            yamlWildcards = yamlTags.map(x => x
+            umiWildcards = umiTags.map(x => x
                 .trim()
                 .split(","))
                 .map(([i, ...rest]) => [
@@ -218,14 +218,14 @@ async function load() {
                     }, {}),
                 ]);
         } catch (e) {
-            console.error("Error loading yaml wildcards: " + e);
+            console.error("Error loading umi wildcards: " + e);
         }
     }
 }
 
 function sanitize(tagType, text) {
-    // Replace underscores only if the yaml tag is not using them
-    if (tagType === ResultType.yamlWildcard && !yamlWildcards.includes(text)) {
+    // Replace underscores only if the umi tag is not using them
+    if (tagType === ResultType.umiWildcard && !umiWildcards.includes(text)) {
         return text.replaceAll("_", " "); 
     }
     return null;

javascript/ext_wildcards.js

@@ -13,12 +13,36 @@ class WildcardParser extends BaseTagParser {
         let wcWord = wcMatch[0][2];
 
         // Look in normal wildcard files
-        let wcFound = wildcardFiles.find(x => x[1].toLowerCase() === wcFile);
+        let wcFound = wildcardFiles.filter(x => x[1].toLowerCase() === wcFile);
+        if (wcFound.length === 0) wcFound = null;
         // Use found wildcard file or look in external wildcard files
-        let wcPair = wcFound || wildcardExtFiles.find(x => x[1].toLowerCase() === wcFile);
+        let wcPairs = wcFound || wildcardExtFiles.filter(x => x[1].toLowerCase() === wcFile);
 
-        let wildcards = (await readFile(`${wcPair[0]}/${wcPair[1]}.txt`)).split("\n")
-            .filter(x => x.trim().length > 0 && !x.startsWith('#'));  // Remove empty lines and comments
+        if (!wcPairs) return [];
+    
+        let wildcards = [];
+        for (let i = 0; i < wcPairs.length; i++) {
+            const wcPair = wcPairs[i];
+            if (!wcPair[0] || !wcPair[1]) continue;
+
+            if (wcPair[0].endsWith(".yaml")) {
+                const getDescendantProp = (obj, desc) => {
+                    const arr = desc.split("/");
+                    while (arr.length) {
+                      obj = obj[arr.shift()];
+                    }
+                    return obj;
+                }
+                wildcards = wildcards.concat(getDescendantProp(yamlWildcards[wcPair[0]], wcPair[1]));
+            } else {
+                const fileContent = (await readFile(`${wcPair[0]}/${wcPair[1]}.txt`)).split("\n")
+                .filter(x => x.trim().length > 0 && !x.startsWith('#'));  // Remove empty lines and comments
+                wildcards = wildcards.concat(fileContent);
+            }
+        }
+
+        if (TAC_CFG.sortWildcardResults)
+            wildcards.sort((a, b) => a.localeCompare(b));
 
         let finalResults = [];
         let tempResults = wildcards.filter(x => (wcWord !== null && wcWord.length > 0) ? x.toLowerCase().includes(wcWord) : x) // Filter by tagword
@@ -44,13 +68,27 @@ class WildcardFileParser extends BaseTagParser {
         }
 
         let finalResults = [];
+        const alreadyAdded = new Map();
         // Get final results
         tempResults.forEach(wcFile => {
-            let result = new AutocompleteResult(wcFile[1].trim(), ResultType.wildcardFile);
-            result.meta = "Wildcard file";
+            // Skip duplicate entries incase multiple files have the same name or yaml category
+            if (alreadyAdded.has(wcFile[1])) return;
+
+            let result = null;
+            if (wcFile[0].endsWith(".yaml")) {
+                result = new AutocompleteResult(wcFile[1].trim(), ResultType.yamlWildcard);
+                result.meta = "YAML wildcard collection";
+            } else {
+                result = new AutocompleteResult(wcFile[1].trim(), ResultType.wildcardFile);
+                result.meta = "Wildcard file";
+            }
+                
             finalResults.push(result);
+            alreadyAdded.set(wcFile[1], true);
         });
 
+        finalResults.sort((a, b) => a.text.localeCompare(b.text));
+
         return finalResults;
     }
 }
@@ -87,6 +125,17 @@ async function load() {
                 wcExtFile = wcExtFile.map(x => [base, x]);
                 wildcardExtFiles.push(...wcExtFile);
             }
+
+            // Load the yaml wildcard json file and append it as a wildcard file, appending each key as a path component until we reach the end
+            yamlWildcards = await readFile(`${tagBasePath}/temp/wc_yaml.json`, true);
+            
+            // Append each key as a path component until we reach a leaf
+            Object.keys(yamlWildcards).forEach(file => {
+                const flattened = flatten(yamlWildcards[file], [], "/");
+                Object.keys(flattened).forEach(key => {
+                    wildcardExtFiles.push([file, key]);
+                });
+            });
         } catch (e) {
             console.error("Error loading wildcards: " + e);
         }
@@ -94,7 +143,7 @@ async function load() {
 }
 
 function sanitize(tagType, text) {
-    if (tagType === ResultType.wildcardFile) {
+    if (tagType === ResultType.wildcardFile || tagType === ResultType.yamlWildcard) {
         return `__${text}__`;
     } else if (tagType === ResultType.wildcardTag) {
         return text.replace(/^.*?: /g, "");
@@ -104,7 +153,7 @@ function sanitize(tagType, text) {
 
 function keepOpenIfWildcard(tagType, sanitizedText, newPrompt, textArea) {
     // If it's a wildcard, we want to keep the results open so the user can select another wildcard
-    if (tagType === ResultType.wildcardFile) {
+    if (tagType === ResultType.wildcardFile || tagType === ResultType.yamlWildcard) {
         hideBlocked = true;
         autocomplete(textArea, newPrompt, sanitizedText);
         setTimeout(() => { hideBlocked = false; }, 450);

javascript/tagAutocomplete.js

@@ -25,18 +25,36 @@ const autocompleteCSS = `
         background-color: transparent;
         min-width: fit-content;
     }
-    .autocompleteResults {
+    .autocompleteParent {
+        display: flex;
         position: absolute;
         z-index: 999;
         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;
         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);
     }
@@ -56,6 +74,7 @@ const autocompleteCSS = `
     }
     .acListItem {
         white-space: break-spaces;
+        min-width: 100px;
     }
     .acMetaText {
         position: relative;
@@ -190,11 +209,13 @@ async function syncOptions() {
         resultStepLength: opts["tac_resultStepLength"],
         delayTime: opts["tac_delayTime"],
         useWildcards: opts["tac_useWildcards"],
+        sortWildcardResults: opts["tac_sortWildcardResults"],
         useEmbeddings: opts["tac_useEmbeddings"],
         useHypernetworks: opts["tac_useHypernetworks"],
         useLoras: opts["tac_useLoras"],
 	    useLycos: opts["tac_useLycos"],
         showWikiLinks: opts["tac_showWikiLinks"],
+        showExtraNetworkPreviews: opts["tac_showExtraNetworkPreviews"],
         // Insertion related settings
         replaceUnderscores: opts["tac_replaceUnderscores"],
         escapeParentheses: opts["tac_escapeParentheses"],
@@ -269,47 +290,62 @@ async function syncOptions() {
 
 // 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("class", `autocompleteResults${typeClass} notranslate`);
     resultsDiv.setAttribute("translate", "no");
     resultsList.setAttribute("class", "autocompleteResultsList");
     resultsDiv.appendChild(resultsList);
 
-    return resultsDiv;
+    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 resultsDiv = gradioApp().querySelector('.autocompleteResults' + textAreaId);
-    return resultsDiv.style.display === "block";
+    let parentDiv = gradioApp().querySelector('.autocompleteParent' + textAreaId);
+    return parentDiv.style.display === "flex";
 }
 function showResults(textArea) {
     let textAreaId = getTextAreaIdentifier(textArea);
-    let resultsDiv = gradioApp().querySelector('.autocompleteResults' + textAreaId);
-    resultsDiv.style.display = "block";
+    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 - resultsDiv.offsetWidth);
+        let offset = Math.min(textArea.offsetLeft - textArea.scrollLeft + caretPosition, textArea.offsetWidth - parentDiv.offsetWidth);
     
-        resultsDiv.style.left = `${offset}px`;
+        parentDiv.style.left = `${offset}px`;
     } else {
-        if (resultsDiv.style.left)
-            resultsDiv.style.removeProperty("left");
+        if (parentDiv.style.left)
+            parentDiv.style.removeProperty("left");
     }
     // Reset here too to make absolutely sure the browser registers it
-    resultsDiv.scrollTop = 0;
+    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('.autocompleteResults' + textAreaId);
+    let resultsDiv = gradioApp().querySelector('.autocompleteParent' + textAreaId);
     
     if (!resultsDiv) return;
     
@@ -375,7 +411,7 @@ async function insertTextAtCursor(textArea, result, tagword, tabCompletedWithout
         }
     }
 
-    if (tagType === ResultType.wildcardFile
+    if ((tagType === ResultType.wildcardFile || tagType === ResultType.yamlWildcard)
         && tabCompletedWithoutChoice
         && TAC_CFG.wildcardCompletionMode !== "Always fully"
         && sanitizedText.includes("/")) {
@@ -402,9 +438,11 @@ async function insertTextAtCursor(textArea, result, tagword, tabCompletedWithout
                 }
             }
             // Don't cut off the __ at the end if it is already the full path
-            if (firstDifference < longestResult) {
+            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;
             }
         }
     }
@@ -420,7 +458,7 @@ async function insertTextAtCursor(textArea, result, tagword, tabCompletedWithout
 
     var optionalSeparator = "";
     let extraNetworkTypes = [ResultType.hypernetwork, ResultType.lora];
-    let noCommaTypes = [ResultType.wildcardFile, ResultType.yamlWildcard].concat(extraNetworkTypes);
+    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;
@@ -581,11 +619,6 @@ function addResultsToList(textArea, results, tagword, resetList) {
 
             if (!TAC_CFG.alias.onlyShowAlias && result.text !== bestAlias)
                 displayText += " ➝ " + result.text;
-        } else if (result.type === ResultType.lora || result.type === ResultType.lyco) {
-            let lastDot = result.text.lastIndexOf(".");
-            let lastSlash = result.text.lastIndexOf("/");
-            let name = result.text.substring(lastSlash + 1, lastDot);
-            displayText = escapeHTML(name);
         } else { // No alias
             displayText = escapeHTML(result.text);
         }
@@ -597,7 +630,8 @@ function addResultsToList(textArea, results, tagword, resetList) {
         // Print search term bolded in result
         itemText.innerHTML = displayText.replace(tagword, `<b>${tagword}</b>`);
 
-        if (result.type === ResultType.wildcardFile && itemText.innerHTML.includes("/")) {
+        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);
@@ -696,7 +730,7 @@ function addResultsToList(textArea, results, tagword, resetList) {
     }
 }
 
-function updateSelectionStyle(textArea, newIndex, oldIndex) {
+async function updateSelectionStyle(textArea, newIndex, oldIndex) {
     let textAreaId = getTextAreaIdentifier(textArea);
     let resultDiv = gradioApp().querySelector('.autocompleteResults' + textAreaId);
     let resultsList = resultDiv.querySelector('ul');
@@ -708,13 +742,52 @@ function updateSelectionStyle(textArea, newIndex, oldIndex) {
 
     // make it safer
     if (newIndex !== null) {
-        items[newIndex].classList.add('selected');
+        let selected = items[newIndex];
+        selected.classList.add('selected');
+
+         // Set scrolltop to selected item
+        resultDiv.scrollTop = selected.offsetTop - resultDiv.offsetTop;
     }
 
-    // Set scrolltop to selected item if we are showing more than max results
-    if (items.length > TAC_CFG.maxResults) {
+    // Show preview if enabled and the selected type supports it
+    if (newIndex !== null) {
         let selected = items[newIndex];
-        resultDiv.scrollTop = selected.offsetTop - resultDiv.offsetTop;
+        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";
+        }
     }
 }
 
@@ -1114,7 +1187,7 @@ async function refreshTacTempFiles() {
     setTimeout(async () => {
         wildcardFiles = [];
         wildcardExtFiles = [];
-        yamlWildcards = [];
+        umiWildcards = [];
         embeddings = [];
         hypernetworks = [];
         loras = [];
@@ -1227,8 +1300,8 @@ async function setup() {
     // 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('.autocompleteResults.p')) {
-        if (gradioApp().querySelector('.autocompleteResults.n') || !TAC_CFG.activeIn.negativePrompts) {
+    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) {

scripts/model_keyword_support.py

@@ -28,9 +28,10 @@ def load_hash_cache():
 def update_hash_cache():
     global file_needs_update
     if file_needs_update:
-        with open(known_hashes_file, "w", encoding="utf-8") as file:
+        with open(known_hashes_file, "w", encoding="utf-8", newline='') as file:
+            writer = csv.writer(file)
             for name, (hash, mtime) in hash_dict.items():
-                file.write(f'"{name}",{hash},{mtime}\n')
+                writer.writerow([name, hash, mtime])
 
 
 # Copy of the fast inaccurate hash function from the extension

scripts/tag_autocomplete_helper.py

@@ -3,12 +3,13 @@
 
 import glob
 import json
+import urllib.parse
 from pathlib import Path
 
 import gradio as gr
 import yaml
 from fastapi import FastAPI
-from fastapi.responses import FileResponse
+from fastapi.responses import FileResponse, JSONResponse
 from modules import script_callbacks, sd_hijack, shared
 
 from scripts.model_keyword_support import (get_lora_simple_hash,
@@ -36,37 +37,73 @@ def get_ext_wildcards():
 
     return wildcard_files
 
+def is_umi_format(data):
+    """Returns True if the YAML file is in UMI format."""
+    issue_found = False
+    for item in data:
+        if not (data[item] and 'Tags' in data[item] and isinstance(data[item]['Tags'], list)):
+            issue_found = True
+            break
+    return not issue_found
 
-def get_ext_wildcard_tags():
+def parse_umi_format(umi_tags, count, data):
+    for item in data:
+        umi_tags[count] = ','.join(data[item]['Tags'])
+        count += 1
+    
+
+def parse_dynamic_prompt_format(yaml_wildcards, data, path):
+    # Recurse subkeys, delete those without string lists as values
+    def recurse_dict(d: dict):
+        for key, value in d.copy().items():
+            if isinstance(value, dict):
+                recurse_dict(value)
+            elif not (isinstance(value, list) and all(isinstance(v, str) for v in value)):
+                del d[key]
+    
+    recurse_dict(data)
+    # Add to yaml_wildcards
+    yaml_wildcards[path.name] = data
+
+
+def get_yaml_wildcards():
     """Returns a list of all tags found in extension YAML files found under a Tags: key."""
-    wildcard_tags = {} # { tag: count }
     yaml_files = []
     for path in WILDCARD_EXT_PATHS:
         yaml_files.extend(p for p in path.rglob("*.yml"))
         yaml_files.extend(p for p in path.rglob("*.yaml"))
+
+    yaml_wildcards = {}
+
+    umi_tags = {} # { tag: count }
     count = 0
+
     for path in yaml_files:
         try:
             with open(path, encoding="utf8") as file:
                 data = yaml.safe_load(file)
-                if data:
-                    for item in data:
-                        if data[item] and 'Tags' in data[item] and isinstance(data[item]['Tags'], list):
-                            wildcard_tags[count] = ','.join(data[item]['Tags'])
-                            count += 1
-                        else:
-                            print('Issue with tags found in ' + path.name + ' at item ' + item)
+                if (data):
+                    if (is_umi_format(data)):
+                        parse_umi_format(umi_tags, count, data)
+                    else:
+                        parse_dynamic_prompt_format(yaml_wildcards, data, path)
                 else:
                     print('No data found in ' + path.name)
         except yaml.YAMLError:
-            print('Issue in parsing YAML file ' + path.name                       )
+            print('Issue in parsing YAML file ' + path.name)
             continue
+    
     # Sort by count
-    sorted_tags = sorted(wildcard_tags.items(), key=lambda item: item[1], reverse=True)
-    output = []
-    for tag, count in sorted_tags:
-        output.append(f"{tag},{count}")
-    return output
+    umi_sorted = sorted(umi_tags.items(), key=lambda item: item[1], reverse=True)
+    umi_output = []
+    for tag, count in umi_sorted:
+        umi_output.append(f"{tag},{count}")
+    
+    if (len(umi_output) > 0):
+        write_to_temp_file('umi_tags.txt', umi_output)
+
+    with open(TEMP_PATH.joinpath("wc_yaml.json"), "w", encoding="utf-8") as file:
+        json.dump(yaml_wildcards, file, ensure_ascii=False)
 
 
 def get_embeddings(sd_model):
@@ -226,7 +263,8 @@ if not TEMP_PATH.exists():
 # even if no wildcards or embeddings are found
 write_to_temp_file('wc.txt', [])
 write_to_temp_file('wce.txt', [])
-write_to_temp_file('wcet.txt', [])
+write_to_temp_file('wc_yaml.json', [])
+write_to_temp_file('umi_tags.txt', [])
 write_to_temp_file('hyp.txt', [])
 write_to_temp_file('lora.txt', [])
 write_to_temp_file('lyco.txt', [])
@@ -240,6 +278,8 @@ if EMB_PATH.exists():
     script_callbacks.on_model_loaded(get_embeddings)
 
 def refresh_temp_files():
+    global WILDCARD_EXT_PATHS
+    WILDCARD_EXT_PATHS = find_ext_wildcard_paths()
     write_temp_files()
     get_embeddings(shared.sd_model)
 
@@ -255,10 +295,8 @@ def write_temp_files():
         wildcards_ext = get_ext_wildcards()
         if wildcards_ext:
             write_to_temp_file('wce.txt', wildcards_ext)
-        # Write yaml extension wildcards to wcet.txt if found
-        wildcards_yaml_ext = get_ext_wildcard_tags()
-        if wildcards_yaml_ext:
-            write_to_temp_file('wcet.txt', wildcards_yaml_ext)
+        # Write yaml extension wildcards to umi_tags.txt and wc_yaml.json if found
+        get_yaml_wildcards()
 
     if HYP_PATH.exists():
         hypernets = get_hypernetworks()
@@ -322,11 +360,13 @@ def on_ui_settings():
         "tac_resultStepLength": shared.OptionInfo(100, "How many results to load at once"),
         "tac_delayTime": shared.OptionInfo(100, "Time in ms to wait before triggering completion again").needs_restart(),
         "tac_useWildcards": shared.OptionInfo(True, "Search for wildcards"),
+        "tac_sortWildcardResults": shared.OptionInfo(True, "Sort wildcard file contents alphabetically").info("If your wildcard files have a specific custom order, disable this to keep it"),
         "tac_useEmbeddings": shared.OptionInfo(True, "Search for embeddings"),
         "tac_useHypernetworks": shared.OptionInfo(True, "Search for hypernetworks"),
         "tac_useLoras": shared.OptionInfo(True, "Search for Loras"),
         "tac_useLycos": shared.OptionInfo(True, "Search for LyCORIS/LoHa"),
         "tac_showWikiLinks": shared.OptionInfo(False, "Show '?' next to tags, linking to its Danbooru or e621 wiki page").info("Warning: This is an external site and very likely contains NSFW examples!"),
+        "tac_showExtraNetworkPreviews": shared.OptionInfo(True, "Show preview thumbnails for extra networks if available"),
         # Insertion related settings
         "tac_replaceUnderscores": shared.OptionInfo(True, "Replace underscores with spaces on insertion"),
         "tac_escapeParentheses": shared.OptionInfo(True, "Escape parentheses on insertion"),
@@ -408,34 +448,49 @@ def on_ui_settings():
 script_callbacks.on_ui_settings(on_ui_settings)
 
 def api_tac(_: gr.Blocks, app: FastAPI):
-    async def get_json_info(path: Path):
-        if not path:
+    async def get_json_info(base_path: Path, filename: str = None):
+        if base_path is None or (not base_path.exists()):
             return json.dumps({})
         
         try:
-            if path is not None and path.exists() and path.parent.joinpath(path.stem + ".json").exists():
-                return FileResponse(path.parent.joinpath(path.stem + ".json").as_posix())
+            json_candidates = glob.glob(base_path.as_posix() + f"/**/{filename}.json", recursive=True)
+            if json_candidates is not None and len(json_candidates) > 0:
+                return FileResponse(json_candidates[0])
+        except Exception as e:
+            return json.dumps({"error": e})
+        
+    async def get_preview_thumbnail(base_path: Path, filename: str = None):
+        if base_path is None or (not base_path.exists()):
+            return json.dumps({})
+        
+        try:
+            img_glob = glob.glob(base_path.as_posix() + f"/**/{filename}.*", recursive=True)
+            img_candidates = [img for img in img_glob if Path(img).suffix in [".png", ".jpg", ".jpeg", ".webp"]]
+            if img_candidates is not None and len(img_candidates) > 0:
+                return JSONResponse({"url": urllib.parse.quote(img_candidates[0])})
         except Exception as e:
             return json.dumps({"error": e})
 
-    @app.get("/tacapi/v1/lora-info/{folder}/{lora_name}")
-    async def get_lora_info_subfolder(folder, lora_name):
-        if LORA_PATH is None:
-            return json.dumps({})
-        return await get_json_info(LORA_PATH.joinpath(folder).joinpath(lora_name))
-    
-    @app.get("/tacapi/v1/lyco-info/{folder}/{lyco_name}")
-    async def get_lyco_info_subfolder(folder, lyco_name):
-        if LYCO_PATH is None:
-            return json.dumps({})
-        return await get_json_info(LYCO_PATH.joinpath(folder).joinpath(lyco_name))
-
     @app.get("/tacapi/v1/lora-info/{lora_name}")
     async def get_lora_info(lora_name):
-        return await get_lora_info_subfolder(".", lora_name)
+        return await get_json_info(LORA_PATH, lora_name)
     
     @app.get("/tacapi/v1/lyco-info/{lyco_name}")
     async def get_lyco_info(lyco_name):
-        return await get_lyco_info_subfolder(".", lyco_name)
+        return await get_json_info(LYCO_PATH, lyco_name)
+    
+    @app.get("/tacapi/v1/thumb-preview/{filename}")
+    async def get_thumb_preview(filename, type):
+        if type == "lora":
+            return await get_preview_thumbnail(LORA_PATH, filename)
+        elif type == "lyco":
+            return await get_preview_thumbnail(LYCO_PATH, filename)
+        elif type == "hyper":
+            return await get_preview_thumbnail(HYP_PATH, filename)
+        elif type == "embed":
+            return await get_preview_thumbnail(EMB_PATH, filename)
+        else:
+            return "Invalid type"
+
 
 script_callbacks.on_app_started(api_tac)