Add view metadata button for Lora cards.

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:

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):

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>

javascript/extraNetworks.js

@@ -102,4 +102,40 @@ function extraNetworksSearchButton(tabs_id, event){
 
     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){
+    elem = document.createElement('pre')
+    elem.classList.add('popup-metadata');
+    elem.textContent = text;
+
+    popup(elem);
+}

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":

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)

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;