ExtraNetworks: Performance Updates and Improvements

extensions-builtin/Lora/ui_extra_networks_lora.py

@@ -1,11 +1,16 @@
 import os
+import html
+import datetime
+import math
+import matplotlib as mpl
+import colorsys
 
 import network
 import networks
 
 from modules import shared, ui_extra_networks
 from modules.ui_extra_networks import quote_js
-from ui_edit_user_metadata import LoraUserMetadataEditor
+from ui_edit_user_metadata import LoraUserMetadataEditor, build_tags
 
 
 class ExtraNetworksPageLora(ui_extra_networks.ExtraNetworksPage):
@@ -14,6 +19,7 @@ def __init__(self):
 
     def refresh(self):
         networks.list_available_networks()
+        super().refresh()
 
     def create_item(self, name, index=None, enable_filter=True):
         lora_on_disk = networks.available_networks.get(name)
@@ -43,10 +49,10 @@ def create_item(self, name, index=None, enable_filter=True):
         self.read_user_metadata(item)
         activation_text = item["user_metadata"].get("activation text")
         preferred_weight = item["user_metadata"].get("preferred weight", 0.0)
-        item["prompt"] = quote_js(f"<lora:{alias}:") + " + " + (str(preferred_weight) if preferred_weight else "opts.extra_networks_default_multiplier") + " + " + quote_js(">")
-
+        prompt = f"<lora:{alias}:{str(preferred_weight) if preferred_weight else shared.opts.extra_networks_default_multiplier}>"
         if activation_text:
-            item["prompt"] += " + " + quote_js(" " + activation_text)
+            prompt += f" {activation_text}"
+        item["prompt"] = quote_js(prompt)
 
         negative_prompt = item["user_metadata"].get("negative text")
         item["negative_prompt"] = quote_js("")
@@ -88,3 +94,148 @@ def allowed_directories_for_previews(self):
 
     def create_user_metadata_editor(self, ui, tabname):
         return LoraUserMetadataEditor(ui, tabname, self)
+
+    def get_model_detail_metadata_table(self, model_name: str) -> str:
+        res = super().get_model_detail_metadata_table(model_name)
+
+        metadata = self.metadata.get(model_name)
+        if metadata is None:
+            metadata = {}
+
+        keys = {
+            'ss_output_name': "Output name:",
+            'ss_sd_model_name': "Model:",
+            'ss_clip_skip': "Clip skip:",
+            'ss_network_module': "Kohya module:",
+        }
+
+        params = []
+
+        for k, lbl in keys.items():
+            v = metadata.get(k, None)
+            if v is not None and str(v) != "None":
+                params.append((lbl, html.escape(v)))
+
+        ss_training_started_at = metadata.get('ss_training_started_at')
+        if ss_training_started_at:
+            date_trained = datetime.datetime.utcfromtimestamp(
+                float(ss_training_started_at)
+            ).strftime('%Y-%m-%d %H:%M')
+            params.append(("Date trained:", date_trained))
+
+        ss_bucket_info = metadata.get("ss_bucket_info")
+        if ss_bucket_info and "buckets" in ss_bucket_info:
+            resolutions = {}
+            for _, bucket in ss_bucket_info["buckets"].items():
+                resolution = bucket["resolution"]
+                resolution = f'{resolution[1]}x{resolution[0]}'
+                resolutions[resolution] = resolutions.get(resolution, 0) + int(bucket["count"])
+
+            resolutions_list = sorted(resolutions.keys(), key=resolutions.get, reverse=True)
+            resolutions_text = html.escape(", ".join(resolutions_list))
+            resolutions_text = (
+                "<div class='styled-scrollbar' style='overflow-x: auto'>"
+                f"{resolutions_text}"
+                "</div>"
+            )
+            params.append(("Resolutions:", resolutions_text))
+
+        image_count = 0
+        for v in metadata.get("ss_dataset_dirs", {}).values():
+            image_count += int(v.get("img_count", 0))
+
+        if image_count:
+            params.append(("Dataset size:", image_count))
+
+        tbl_metadata = "".join([f"<tr><th>{tr[0]}</th><td>{tr[1]}</td>" for tr in params])
+
+        return res + tbl_metadata
+
+    def get_model_detail_extra_html(self, model_name: str) -> str:
+        """Generates HTML to show in the details view."""
+        res = ""
+
+        item = self.items.get(model_name, {})
+        metadata = item.get("metadata", {}) or {}
+        user_metadata = item.get("user_metadata", {}) or {}
+
+        sd_version = item.get("sd_version", None)
+        preferred_weight = user_metadata.get("preferred weight", None)
+        activation_text = user_metadata.get("activation text", None)
+        negative_text = user_metadata.get("negative text", None)
+
+        rows = []
+
+        if sd_version is not None:
+            rows.append(("SD Version:", sd_version))
+
+        if preferred_weight is not None:
+            rows.append(("Preferred weight:", preferred_weight))
+
+        if activation_text is not None:
+            rows.append(("Activation text:", activation_text))
+
+        if negative_text is not None:
+            rows.append(("Negative propmt:", negative_text))
+
+        rows_html = "".join([f"<tr><th>{tr[0]}</th><td>{tr[1]}</td>" for tr in rows])
+
+        if rows_html:
+            res += "<h3>User Metadata</h3>"
+            res += f"<table><tbody>{rows_html}</tbody></table>"
+
+        tags = build_tags(metadata)
+        if tags is None or len(tags) == 0:
+            res += "<h3>Model Tags</h3>"
+            res += "<div class='model-info--tags'>Metadata contains no tags</div>"
+            return res
+
+        min_tag = min(int(x[1]) for x in tags)
+        max_tag = max(int(x[1]) for x in tags)
+
+        cmap = mpl.colormaps["coolwarm"]
+
+        def _clamp(x: float, min_val: float, max_val: float) -> float:
+            return max(min_val, min(x, max_val))
+
+        def _get_fg_color(r, g, b) -> str:
+            return "#000000" if (r * 0.299 + g * 0.587 + b * 0.114) > 0.5 else "#FFFFFF"
+
+        tag_elems = []
+        for (tag_name, tag_count) in tags:
+            # Normalize tag count
+            tag_count = int(tag_count)
+            if min_tag == max_tag:  # Prevent DivideByZero error.
+                cmap_idx = cmap.N // 2
+            else:
+                cmap_idx = math.floor(
+                    (tag_count - min_tag) / (max_tag - min_tag) * (cmap.N - 1)
+                )
+
+            # Get the bg color based on tag count and a contrasting fg color.
+            base_color = cmap(cmap_idx)
+            base_color = [_clamp(x, 0, 1) for x in base_color]
+            base_fg_color = _get_fg_color(*base_color[:3])
+            # Now get a slightly darker background for the tag count bg color.
+            h, lum, s = colorsys.rgb_to_hls(*base_color[:3])
+            lum = max(min(lum * 0.7, 1.0), 0.0)
+            dark_color = colorsys.hls_to_rgb(h, lum, s)
+            dark_color = [_clamp(x, 0, 1) for x in dark_color]
+            dark_fg_color = _get_fg_color(*dark_color[:3])
+            # Convert the colors to a hex string.
+            base_color = mpl.colors.rgb2hex(base_color)
+            dark_color = mpl.colors.rgb2hex(dark_color)
+            # Finally, generate the HTML for this tag.
+            tag_style = f"background: {base_color};"
+            name_style = f"color: {base_fg_color};"
+            count_style = f"background: {dark_color}; color: {dark_fg_color};"
+
+            tag_elems.append((
+                f"<span class='model-info--tag' style='{tag_style}'>"
+                f"<span class='model-info--tag-name' style='{name_style}'>{tag_name}</span>"
+                f"<span class='model-info--tag-count' style='{count_style}'>{tag_count}</span>"
+                "</span>"
+            ))
+        res += "<h3>Model Tags</h3>"
+        res += f"<div class='model-info--tags'>{''.join(tag_elems)}</div>"
+        return res

html/extra-networks-btn-chevron.html

@@ -0,0 +1,11 @@
+<div class="tree-list-item-action--chevron {extra_classes}">
+    <svg class="chevron-icon-single" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none"
+        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M 4 4 H 12 V 12" />
+    </svg>
+    <svg class="chevron-icon-double" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none"
+        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M 5 3 H 13 V 11" />
+        <path d="M 1 7 H 9 V 15" />
+    </svg>
+</div>

html/extra-networks-btn-copy-path.html

@@ -0,0 +1,2 @@
+<div class="copy-path-button card-button" title="Copy path to clipboard" data-clipboard-text="{clipboard_text}">
+</div>

html/extra-networks-btn-dirs-view-item.html

@@ -0,0 +1,2 @@
+<button class='lg secondary gradio-button custom-button extra-network-dirs-view-button {extra_class}' title="{title}"
+    {data_attributes}>{label}</button>

html/extra-networks-btn-edit-metadata.html

@@ -0,0 +1 @@
+<div class="edit-button card-button" title="Edit metadata"></div>

html/extra-networks-btn-show-metadata.html

@@ -0,0 +1 @@
+<div class="metadata-button card-button" title="Show internal metadata"></div>

html/extra-networks-card.html

@@ -1,9 +1,8 @@
-<div class="card" style="{style}" onclick="{card_clicked}" data-name="{name}" {sort_keys}>
-	{background_image}
-	<div class="button-row">{copy_path_button}{metadata_button}{edit_button}</div>
-	<div class="actions">
-		<div class="additional">{search_terms}</div>
-		<span class="name">{name}</span>
-		<span class="description">{description}</span>
-	</div>
+<div class="card" style="{style}" {data_attributes}>
+    {background_image}
+    {button_row}
+    <div class="actions">
+        <span class="name">{name}</span>
+        <span class="description" {description_data_attributes}>{description}</span>
+    </div>
 </div>

html/extra-networks-model-details.html

@@ -0,0 +1,17 @@
+<div class="extra-network-content--dets-view-model-info">
+    <div class="model-info--header">
+        <h1 class="model-info--name">{name}</h1>
+        <button class="extra-network-control model-info--close" title="Close model details">
+            <svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none"
+                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M 2 2 L 14 14 M 2 14 L 14 2" />
+            </svg>
+        </button>
+    </div>
+    <p class="model-info--description" {description_data_attributes}>{description}</p>
+    <h3>Model Metadata</h3>
+    <table class="model-info--metadata">
+        <tbody>{metadata_table}</tbody>
+    </table>
+    {model_specific}
+</div>