Merge branch 'dev' into master

1 files changed, 215 insertions, 196 deletions

diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index c85bc79a..aafe0a00 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -1,196 +1,215 @@
-function setupExtraNetworksForTab(tabname){

-    gradioApp().querySelector('#'+tabname+'_extra_tabs').classList.add('extra-networks')

-

-    var tabs = gradioApp().querySelector('#'+tabname+'_extra_tabs > div')

-    var search = gradioApp().querySelector('#'+tabname+'_extra_search textarea')

-    var refresh = gradioApp().getElementById(tabname+'_extra_refresh')

-

-    search.classList.add('search')

-    tabs.appendChild(search)

-    tabs.appendChild(refresh)

-

-    var applyFilter = function(){

-        var searchTerm = search.value.toLowerCase()

-

-        gradioApp().querySelectorAll('#'+tabname+'_extra_tabs div.card').forEach(function(elem){

-            var searchOnly = elem.querySelector('.search_only')

-            var text = elem.querySelector('.name').textContent.toLowerCase() + " " + elem.querySelector('.search_term').textContent.toLowerCase()

-

-            var visible = text.indexOf(searchTerm) != -1

-

-            if(searchOnly && searchTerm.length < 4){

-                visible = false

-            }

-

-            elem.style.display = visible ? "" : "none"

-        })

-    }

-

-    search.addEventListener("input", applyFilter);

-    applyFilter();

-

-    extraNetworksApplyFilter[tabname] = applyFilter;

-}

-

-function applyExtraNetworkFilter(tabname){

-    setTimeout(extraNetworksApplyFilter[tabname], 1);

-}

-

-var extraNetworksApplyFilter = {}

-var activePromptTextarea = {};

-

-function setupExtraNetworks(){

-    setupExtraNetworksForTab('txt2img')

-    setupExtraNetworksForTab('img2img')

-

-    function registerPrompt(tabname, id){

-        var textarea = gradioApp().querySelector("#" + id + " > label > textarea");

-

-        if (! activePromptTextarea[tabname]){

-            activePromptTextarea[tabname] = textarea

-        }

-

-		textarea.addEventListener("focus", function(){

-            activePromptTextarea[tabname] = textarea;

-		});

-    }

-

-    registerPrompt('txt2img', 'txt2img_prompt')

-    registerPrompt('txt2img', 'txt2img_neg_prompt')

-    registerPrompt('img2img', 'img2img_prompt')

-    registerPrompt('img2img', 'img2img_neg_prompt')

-}

-

-onUiLoaded(setupExtraNetworks)

-

-var re_extranet   =    /<([^:]+:[^:]+):[\d\.]+>/;

-var re_extranet_g = /\s+<([^:]+:[^:]+):[\d\.]+>/g;

-

-function tryToRemoveExtraNetworkFromPrompt(textarea, text){

-    var m = text.match(re_extranet)

-    if(! m) return false

-

-    var partToSearch = m[1]

-    var replaced = false

-    var newTextareaText = textarea.value.replaceAll(re_extranet_g, function(found){

-        m = found.match(re_extranet);

-        if(m[1] == partToSearch){

-            replaced = true;

-            return ""

-        }

-        return found;

-    })

-

-    if(replaced){

-        textarea.value = newTextareaText

-        return true;

-    }

-

-    return false

-}

-

-function cardClicked(tabname, textToAdd, allowNegativePrompt){

-    var textarea = allowNegativePrompt ? activePromptTextarea[tabname] : gradioApp().querySelector("#" + tabname + "_prompt > label > textarea")

-

-    if(! tryToRemoveExtraNetworkFromPrompt(textarea, textToAdd)){

-        textarea.value = textarea.value + opts.extra_networks_add_text_separator + textToAdd

-    }

-

-    updateInput(textarea)

-}

-

-function saveCardPreview(event, tabname, filename){

-    var textarea = gradioApp().querySelector("#" + tabname + '_preview_filename  > label > textarea')

-    var button = gradioApp().getElementById(tabname + '_save_preview')

-

-    textarea.value = filename

-    updateInput(textarea)

-

-    button.click()

-

-    event.stopPropagation()

-    event.preventDefault()

-}

-

-function extraNetworksSearchButton(tabs_id, event){

-    var searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > div > textarea')

-    var button = event.target

-    var text = button.classList.contains("search-all") ? "" : button.textContent.trim()

-

-    searchTextarea.value = text

-    updateInput(searchTextarea)

-}

-

-var globalPopup = null;

-var globalPopupInner = null;

-function popup(contents){

-    if(! globalPopup){

-        globalPopup = document.createElement('div')

-        globalPopup.onclick = function(){ globalPopup.style.display = "none"; };

-        globalPopup.classList.add('global-popup');

-

-        var close = document.createElement('div')

-        close.classList.add('global-popup-close');

-        close.onclick = function(){ globalPopup.style.display = "none"; };

-        close.title = "Close";

-        globalPopup.appendChild(close)

-

-        globalPopupInner = document.createElement('div')

-        globalPopupInner.onclick = function(event){ event.stopPropagation(); return false; };

-        globalPopupInner.classList.add('global-popup-inner');

-        globalPopup.appendChild(globalPopupInner)

-

-        gradioApp().appendChild(globalPopup);

-    }

-

-    globalPopupInner.innerHTML = '';

-    globalPopupInner.appendChild(contents);

-

-    globalPopup.style.display = "flex";

-}

-

-function extraNetworksShowMetadata(text){

-    var elem = document.createElement('pre')

-    elem.classList.add('popup-metadata');

-    elem.textContent = text;

-

-    popup(elem);

-}

-

-function requestGet(url, data, handler, errorHandler){

-    var xhr = new XMLHttpRequest();

-    var args = Object.keys(data).map(function(k){ return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) }).join('&')

-    xhr.open("GET", url + "?" + args, true);

-

-    xhr.onreadystatechange = function () {

-        if (xhr.readyState === 4) {

-            if (xhr.status === 200) {

-                try {

-                    var js = JSON.parse(xhr.responseText);

-                    handler(js)

-                } catch (error) {

-                    console.error(error);

-                    errorHandler()

-                }

-            } else{

-                errorHandler()

-            }

-        }

-    };

-    var js = JSON.stringify(data);

-    xhr.send(js);

-}

-

-function extraNetworksRequestMetadata(event, extraPage, cardName){

-    var showError = function(){ extraNetworksShowMetadata("there was an error getting metadata"); }

-

-    requestGet("./sd_extra_networks/metadata", {"page": extraPage, "item": cardName}, function(data){

-        if(data && data.metadata){

-            extraNetworksShowMetadata(data.metadata)

-        } else{

-            showError()

-        }

-    }, showError)

-

-    event.stopPropagation()

-}

+function setupExtraNetworksForTab(tabname) {
+    gradioApp().querySelector('#' + tabname + '_extra_tabs').classList.add('extra-networks');
+
+    var tabs = gradioApp().querySelector('#' + tabname + '_extra_tabs > div');
+    var search = gradioApp().querySelector('#' + tabname + '_extra_search textarea');
+    var refresh = gradioApp().getElementById(tabname + '_extra_refresh');
+
+    search.classList.add('search');
+    tabs.appendChild(search);
+    tabs.appendChild(refresh);
+
+    var applyFilter = function() {
+        var searchTerm = search.value.toLowerCase();
+
+        gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card').forEach(function(elem) {
+            var searchOnly = elem.querySelector('.search_only');
+            var text = elem.querySelector('.name').textContent.toLowerCase() + " " + elem.querySelector('.search_term').textContent.toLowerCase();
+
+            var visible = text.indexOf(searchTerm) != -1;
+
+            if (searchOnly && searchTerm.length < 4) {
+                visible = false;
+            }
+
+            elem.style.display = visible ? "" : "none";
+        });
+    };
+
+    search.addEventListener("input", applyFilter);
+    applyFilter();
+
+    extraNetworksApplyFilter[tabname] = applyFilter;
+}
+
+function applyExtraNetworkFilter(tabname) {
+    setTimeout(extraNetworksApplyFilter[tabname], 1);
+}
+
+var extraNetworksApplyFilter = {};
+var activePromptTextarea = {};
+
+function setupExtraNetworks() {
+    setupExtraNetworksForTab('txt2img');
+    setupExtraNetworksForTab('img2img');
+
+    function registerPrompt(tabname, id) {
+        var textarea = gradioApp().querySelector("#" + id + " > label > textarea");
+
+        if (!activePromptTextarea[tabname]) {
+            activePromptTextarea[tabname] = textarea;
+        }
+
+        textarea.addEventListener("focus", function() {
+            activePromptTextarea[tabname] = textarea;
+        });
+    }
+
+    registerPrompt('txt2img', 'txt2img_prompt');
+    registerPrompt('txt2img', 'txt2img_neg_prompt');
+    registerPrompt('img2img', 'img2img_prompt');
+    registerPrompt('img2img', 'img2img_neg_prompt');
+}
+
+onUiLoaded(setupExtraNetworks);
+
+var re_extranet = /<([^:]+:[^:]+):[\d.]+>/;
+var re_extranet_g = /\s+<([^:]+:[^:]+):[\d.]+>/g;
+
+function tryToRemoveExtraNetworkFromPrompt(textarea, text) {
+    var m = text.match(re_extranet);
+    var replaced = false;
+    var newTextareaText;
+    if (m) {
+        var partToSearch = m[1];
+        newTextareaText = textarea.value.replaceAll(re_extranet_g, function(found) {
+            m = found.match(re_extranet);
+            if (m[1] == partToSearch) {
+                replaced = true;
+                return "";
+            }
+            return found;
+        });
+    } else {
+        newTextareaText = textarea.value.replaceAll(new RegExp(text, "g"), function(found) {
+            if (found == text) {
+                replaced = true;
+                return "";
+            }
+            return found;
+        });
+    }
+
+    if (replaced) {
+        textarea.value = newTextareaText;
+        return true;
+    }
+
+    return false;
+}
+
+function cardClicked(tabname, textToAdd, allowNegativePrompt) {
+    var textarea = allowNegativePrompt ? activePromptTextarea[tabname] : gradioApp().querySelector("#" + tabname + "_prompt > label > textarea");
+
+    if (!tryToRemoveExtraNetworkFromPrompt(textarea, textToAdd)) {
+        textarea.value = textarea.value + opts.extra_networks_add_text_separator + textToAdd;
+    }
+
+    updateInput(textarea);
+}
+
+function saveCardPreview(event, tabname, filename) {
+    var textarea = gradioApp().querySelector("#" + tabname + '_preview_filename  > label > textarea');
+    var button = gradioApp().getElementById(tabname + '_save_preview');
+
+    textarea.value = filename;
+    updateInput(textarea);
+
+    button.click();
+
+    event.stopPropagation();
+    event.preventDefault();
+}
+
+function extraNetworksSearchButton(tabs_id, event) {
+    var searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > div > textarea');
+    var button = event.target;
+    var text = button.classList.contains("search-all") ? "" : button.textContent.trim();
+
+    searchTextarea.value = text;
+    updateInput(searchTextarea);
+}
+
+var globalPopup = null;
+var globalPopupInner = null;
+function popup(contents) {
+    if (!globalPopup) {
+        globalPopup = document.createElement('div');
+        globalPopup.onclick = function() {
+            globalPopup.style.display = "none";
+        };
+        globalPopup.classList.add('global-popup');
+
+        var close = document.createElement('div');
+        close.classList.add('global-popup-close');
+        close.onclick = function() {
+            globalPopup.style.display = "none";
+        };
+        close.title = "Close";
+        globalPopup.appendChild(close);
+
+        globalPopupInner = document.createElement('div');
+        globalPopupInner.onclick = function(event) {
+            event.stopPropagation(); return false;
+        };
+        globalPopupInner.classList.add('global-popup-inner');
+        globalPopup.appendChild(globalPopupInner);
+
+        gradioApp().appendChild(globalPopup);
+    }
+
+    globalPopupInner.innerHTML = '';
+    globalPopupInner.appendChild(contents);
+
+    globalPopup.style.display = "flex";
+}
+
+function extraNetworksShowMetadata(text) {
+    var elem = document.createElement('pre');
+    elem.classList.add('popup-metadata');
+    elem.textContent = text;
+
+    popup(elem);
+}
+
+function requestGet(url, data, handler, errorHandler) {
+    var xhr = new XMLHttpRequest();
+    var args = Object.keys(data).map(function(k) {
+        return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]);
+    }).join('&');
+    xhr.open("GET", url + "?" + args, true);
+
+    xhr.onreadystatechange = function() {
+        if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                try {
+                    var js = JSON.parse(xhr.responseText);
+                    handler(js);
+                } catch (error) {
+                    console.error(error);
+                    errorHandler();
+                }
+            } else {
+                errorHandler();
+            }
+        }
+    };
+    var js = JSON.stringify(data);
+    xhr.send(js);
+}
+
+function extraNetworksRequestMetadata(event, extraPage, cardName) {
+    var showError = function() {
+        extraNetworksShowMetadata("there was an error getting metadata");
+    };
+
+    requestGet("./sd_extra_networks/metadata", {page: extraPage, item: cardName}, function(data) {
+        if (data && data.metadata) {
+            extraNetworksShowMetadata(data.metadata);
+        } else {
+            showError();
+        }
+    }, showError);
+
+    event.stopPropagation();
+}