Add view metadata button for Lora cards.

7 files changed, 152 insertions, 2 deletions

diff --git a/extensions-builtin/Lora/lora.py b/extensions-builtin/Lora/lora.py
index cb8f1d36..8937b585 100644
--- a/extensions-builtin/Lora/lora.py
+++ b/extensions-builtin/Lora/lora.py
@@ -3,7 +3,9 @@ import os
 import re

 import torch

 

-from modules import shared, devices, sd_models

+from modules import shared, devices, sd_models, errors

+

+metadata_tags_order = {"ss_sd_model_name": 1, "ss_resolution": 2, "ss_clip_skip": 3, "ss_num_train_images": 10, "ss_tag_frequency": 20}

 

 re_digits = re.compile(r"\d+")

 re_unet_down_blocks = re.compile(r"lora_unet_down_blocks_(\d+)_attentions_(\d+)_(.+)")

@@ -43,6 +45,23 @@ class LoraOnDisk:
     def __init__(self, name, filename):

         self.name = name

         self.filename = filename

+        self.metadata = {}

+

+        _, ext = os.path.splitext(filename)

+        if ext.lower() == ".safetensors":

+            try:

+                self.metadata = sd_models.read_metadata_from_safetensors(filename)

+            except Exception as e:

+                errors.display(e, f"reading lora {filename}")

+

+        if self.metadata:

+            m = {}

+            for k, v in sorted(self.metadata.items(), key=lambda x: metadata_tags_order.get(x[0], 999)):

+                m[k] = v

+

+            self.metadata = m

+

+        self.ssmd_cover_images = self.metadata.pop('ssmd_cover_images', None)  # those are cover images and they are too big to display in UI as text

 

 

 class LoraModule:

diff --git a/extensions-builtin/Lora/ui_extra_networks_lora.py b/extensions-builtin/Lora/ui_extra_networks_lora.py
index 8d32052e..68b11332 100644
--- a/extensions-builtin/Lora/ui_extra_networks_lora.py
+++ b/extensions-builtin/Lora/ui_extra_networks_lora.py
@@ -23,6 +23,7 @@ class ExtraNetworksPageLora(ui_extra_networks.ExtraNetworksPage):
                 "search_term": self.search_terms_from_path(lora_on_disk.filename),

                 "prompt": json.dumps(f"<lora:{name}:") + " + opts.extra_networks_default_multiplier + " + json.dumps(">"),

                 "local_preview": f"{path}.{shared.opts.samples_format}",

+                "metadata": json.dumps(lora_on_disk.metadata, indent=4) if lora_on_disk.metadata else None,

             }

 

     def allowed_directories_for_previews(self):

diff --git a/html/extra-networks-card.html b/html/extra-networks-card.html
index 8612396d..1bf3fc30 100644
--- a/html/extra-networks-card.html
+++ b/html/extra-networks-card.html
@@ -1,4 +1,6 @@
 <div class='card' {preview_html} onclick={card_clicked}>
+	{metadata_button}
+
 	<div class='actions'>
 		<div class='additional'>
 			<ul>
diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index d0177ad6..2fb87cd5 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -102,4 +102,40 @@ function extraNetworksSearchButton(tabs_id, event){
 

     searchTextarea.value = text

     updateInput(searchTextarea)

-}
\ No newline at end of file
+}

+

+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){

+    elem = document.createElement('pre')

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

+    elem.textContent = text;

+

+    popup(elem);

+}

diff --git a/modules/sd_models.py b/modules/sd_models.py
index 93959f55..5f57ec0c 100644
--- a/modules/sd_models.py
+++ b/modules/sd_models.py
@@ -210,6 +210,30 @@ def get_state_dict_from_checkpoint(pl_sd):
     return pl_sd

 

 

+def read_metadata_from_safetensors(filename):

+    import json

+

+    with open(filename, mode="rb") as file:

+        metadata_len = file.read(8)

+        metadata_len = int.from_bytes(metadata_len, "little")

+        json_start = file.read(2)

+

+        assert metadata_len > 2 and json_start in (b'{"', b"{'"), f"{filename} is not a safetensors file"

+        json_data = json_start + file.read(metadata_len-2)

+        json_obj = json.loads(json_data)

+

+        res = {}

+        for k, v in json_obj.get("__metadata__", {}).items():

+            res[k] = v

+            if isinstance(v, str) and v[0] == '{':

+                try:

+                    res[k] = json.loads(v)

+                except Exception as e:

+                    pass

+

+        return res

+

+

 def read_state_dict(checkpoint_file, print_global_state=False, map_location=None):

     _, extension = os.path.splitext(checkpoint_file)

     if extension.lower() == ".safetensors":

diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 01df5e90..b5847299 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -124,6 +124,12 @@ class ExtraNetworksPage:
         if onclick is None:

             onclick = '"' + html.escape(f"""return cardClicked({json.dumps(tabname)}, {item["prompt"]}, {"true" if self.allow_negative_prompt else "false"})""") + '"'

 

+        metadata_button = ""

+        metadata = item.get("metadata")

+        if metadata:

+            metadata_onclick = '"' + html.escape(f"""extraNetworksShowMetadata({json.dumps(metadata)}); return false;""") + '"'

+            metadata_button = f"<div class='metadata-button' title='Show metadata' onclick={metadata_onclick}></div>"

+

         args = {

             "preview_html": "style='background-image: url(\"" + html.escape(preview) + "\")'" if preview else '',

             "prompt": item.get("prompt", None),

@@ -134,6 +140,7 @@ class ExtraNetworksPage:
             "card_clicked": onclick,

             "save_card_preview": '"' + html.escape(f"""return saveCardPreview(event, {json.dumps(tabname)}, {json.dumps(item["local_preview"])})""") + '"',

             "search_term": item.get("search_term", ""),

+            "metadata_button": metadata_button,

         }

 

         return self.card_page.format(**args)

diff --git a/style.css b/style.css
index 2f26ad02..3eac2b17 100644
--- a/style.css
+++ b/style.css
@@ -362,6 +362,46 @@ input[type="range"]{
     height: 100%;

 }

 

+.popup-metadata{

+    color: black;

+    background: white;

+    display: inline-block;

+    padding: 1em;

+    white-space: pre-wrap;

+}

+

+.global-popup{

+    display: flex;

+    position: fixed;

+    z-index: 1001;

+    left: 0;

+    top: 0;

+    width: 100%;

+    height: 100%;

+    overflow: auto;

+    background-color: rgba(20, 20, 20, 0.95);

+}

+

+

+.global-popup-close:before {

+    content: "×";

+}

+

+.global-popup-close{

+    position: fixed;

+    right: 0.25em;

+    top: 0;

+    cursor: pointer;

+    color: white;

+    font-size: 32pt;

+}

+

+.global-popup-inner{

+    display: inline-block;

+    margin: auto;

+    padding: 2em;

+}

+

 #lightboxModal{

   display: none;

   position: fixed;

@@ -837,6 +877,27 @@ footer {
     margin-left: 0.5em;

 }

 

+

+.extra-network-cards .card .metadata-button:before, .extra-network-thumbs .card .metadata-button:before{

+    content: "🛈";

+}

+.extra-network-cards .card .metadata-button, .extra-network-thumbs .card .metadata-button{

+    display: none;

+    position: absolute;

+    right: 0;

+    color: white;

+    text-shadow: 2px 2px 3px black;

+    padding: 0.25em;

+    font-size: 22pt;

+}

+.extra-network-cards .card:hover .metadata-button, .extra-network-thumbs .card:hover .metadata-button{

+    display: inline-block;

+}

+.extra-network-cards .card .metadata-button:hover, .extra-network-thumbs .card .metadata-button:hover{

+    color: red;

+}

+

+

 .extra-network-thumbs {

     display: flex;

     flex-flow: row wrap;