diff --git a/html/extra-networks-card-short.html b/html/extra-networks-card-short.html
new file mode 100644
index 000000000..3dc9e46a2
--- /dev/null
+++ b/html/extra-networks-card-short.html
@@ -0,0 +1,13 @@
+
+
+
+
{name}
+
{description}
+
+
diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index 3ecb34639..bff379beb 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -1,22 +1,17 @@
-
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')
var descriptInput = gradioApp().getElementById(tabname+ '_description_input')
var close = gradioApp().getElementById(tabname+'_extra_close')
-
search.classList.add('search')
tabs.appendChild(search)
tabs.appendChild(refresh)
tabs.appendChild(close)
tabs.appendChild(descriptInput)
-
search.addEventListener("input", function(evt){
searchTerm = search.value.toLowerCase()
-
gradioApp().querySelectorAll('#'+tabname+'_extra_tabs div.card').forEach(function(elem){
text = elem.querySelector('.name').textContent.toLowerCase() + " " + elem.querySelector('.search_term').textContent.toLowerCase()
elem.style.display = text.indexOf(searchTerm) == -1 ? "none" : ""
@@ -29,19 +24,13 @@ 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(){
+ 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')
@@ -49,14 +38,12 @@ function setupExtraNetworks(){
}
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, index){
@@ -67,34 +54,25 @@ function tryToRemoveExtraNetworkFromPrompt(textarea, text){
}
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
- }
-
+ 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()
}
@@ -103,18 +81,15 @@ function saveCardDescription(event, tabname, filename, descript){
var textarea = gradioApp().querySelector("#" + tabname + '_description_filename > label > textarea')
var button = gradioApp().getElementById(tabname + '_save_description')
var description = gradioApp().getElementById(tabname+ '_description_input')
-
textarea.value = filename
description.value=descript
updateInput(textarea)
-
button.click()
-
event.stopPropagation()
event.preventDefault()
}
-function readCardDescription(event, tabname, filename, descript){
+function readCardDescription(event, tabname, filename, descript, extraPage, cardName){
var textarea = gradioApp().querySelector("#" + tabname + '_description_filename > label > textarea')
var description_textarea = gradioApp().querySelector("#" + tabname+ '_description_input > label > textarea')
var button = gradioApp().getElementById(tabname + '_read_description')
@@ -125,16 +100,12 @@ function readCardDescription(event, tabname, filename, descript){
button.click()
event.stopPropagation()
event.preventDefault()
- requestGet("./sd_extra_networks/metadata", {"page": extraPage, "item": cardName}, (data) => {
- if (data && data.metadata) extraNetworksShowMetadata(data.metadata)
- }, () => {})
}
function extraNetworksSearchButton(tabs_id, event){
searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > div > textarea')
button = event.target
text = button.classList.contains("search-all") ? "" : button.textContent.trim()
-
searchTextarea.value = text
updateInput(searchTextarea)
}
@@ -146,39 +117,39 @@ function popup(contents){
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){
- elem = document.createElement('pre')
- elem.classList.add('popup-metadata');
- elem.textContent = text;
- popup(elem);
+function readCardMetadata(event, extraPage, cardName){
+ requestGet("./sd_extra_networks/metadata", {"page": extraPage, "item": cardName}, function(data){
+ if (data && data.metadata){
+ elem = document.createElement('pre')
+ elem.classList.add('popup-metadata');
+ elem.textContent = data.metadata;
+ popup(elem);
+ }
+ }, () => {})
+ event.stopPropagation()
+ event.preventDefault()
}
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) {
@@ -197,15 +168,3 @@ function requestGet(url, data, handler, errorHandler){
var js = JSON.stringify(data);
xhr.send(js);
}
-
-function extraNetworksRequestMetadata(event, extraPage, cardName){
- 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()
-}
diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 749a7789f..acaf4df64 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -54,7 +54,8 @@ class ExtraNetworksPage:
def __init__(self, title):
self.title = title
self.name = title.lower()
- self.card_page = shared.html("extra-networks-card.html")
+ self.card_long = shared.html("extra-networks-card-long.html")
+ self.card_short = shared.html("extra-networks-card-short.html")
self.allow_negative_prompt = False
self.metadata = {}
@@ -128,10 +129,6 @@ class ExtraNetworksPage:
height = f"height: {shared.opts.extra_networks_card_height}px;" if shared.opts.extra_networks_card_height else ''
width = f"width: {shared.opts.extra_networks_card_width}px;" if shared.opts.extra_networks_card_width else ''
background_image = f"background-image: url(\"{html.escape(preview)}\");" if preview else ''
- metadata_button = ""
- metadata = item.get("metadata")
- if metadata:
- metadata_button = f"
"
args = {
"style": f"'{height}{width}{background_image}'",
"prompt": item.get("prompt", None),
@@ -144,9 +141,12 @@ class ExtraNetworksPage:
"save_card_preview": '"' + html.escape(f"""return saveCardPreview(event, {json.dumps(tabname)}, {json.dumps(item["local_preview"])})""") + '"',
"read_card_description": '"' + html.escape(f"""return readCardDescription(event, {json.dumps(tabname)}, {json.dumps(item["local_preview"])}, {json.dumps(item["description"])}, {json.dumps(self.name)}, {json.dumps(item["name"])})""") + '"',
"search_term": item.get("search_term", ""),
- "metadata_button": metadata_button,
+ "read_card_metadata": '"' + html.escape(f"""return readCardMetadata(event, {json.dumps(self.name)}, {json.dumps(item["name"])})""") + '"',
}
- return self.card_page.format(**args)
+ if item.get("metadata"):
+ return self.card_long.format(**args)
+ else:
+ return self.card_short.format(**args)
def find_preview(self, path):
"""
diff --git a/modules/ui_extra_networks_checkpoints.py b/modules/ui_extra_networks_checkpoints.py
index 2ddf9b70d..fe65d99df 100644
--- a/modules/ui_extra_networks_checkpoints.py
+++ b/modules/ui_extra_networks_checkpoints.py
@@ -15,7 +15,7 @@ class ExtraNetworksPageCheckpoints(ui_extra_networks.ExtraNetworksPage):
def list_items(self):
checkpoint: sd_models.CheckpointInfo
for name, checkpoint in sd_models.checkpoints_list.items():
- path, ext = os.path.splitext(checkpoint.filename)
+ path, _ext = os.path.splitext(checkpoint.filename)
yield {
"name": checkpoint.name_for_extra,
"filename": path,