aboutsummaryrefslogtreecommitdiff
path: root/javascript/extraNetworks.js
diff options
context:
space:
mode:
Diffstat (limited to 'javascript/extraNetworks.js')
-rw-r--r--javascript/extraNetworks.js411
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();
+}