user metadata system for custom networks

8 files changed, 300 insertions, 34 deletions

diff --git a/extensions-builtin/Lora/ui_extra_networks_lora.py b/extensions-builtin/Lora/ui_extra_networks_lora.py
index da49790b..29b16c1c 100644
--- a/extensions-builtin/Lora/ui_extra_networks_lora.py
+++ b/extensions-builtin/Lora/ui_extra_networks_lora.py
@@ -20,7 +20,7 @@ class ExtraNetworksPageLora(ui_extra_networks.ExtraNetworksPage):
 

             yield {

                 "name": name,

-                "filename": path,

+                "filename": lora_on_disk.filename,

                 "preview": self.find_preview(path),

                 "description": self.find_description(path),

                 "search_term": self.search_terms_from_path(lora_on_disk.filename),

diff --git a/html/extra-networks-card.html b/html/extra-networks-card.html
index 68a84c3a..fb787ffe 100644
--- a/html/extra-networks-card.html
+++ b/html/extra-networks-card.html
@@ -1,11 +1,11 @@
 <div class='card' style={style} onclick={card_clicked} {sort_keys}>
 	{background_image}
-	{metadata_button}
+	<div class="button-row">
+		{edit_button}
+		{metadata_button}
+	</div>
 	<div class='actions'>
 		<div class='additional'>
-			<ul>
-				<a href="#" title="replace preview image with currently selected in gallery" onclick={save_card_preview}>replace preview</a>
-			</ul>
 			<span style="display:none" class='search_term{search_only}'>{search_term}</span>
 		</div>
 		<span class='name'>{name}</span>
diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index b87bca3e..68f342de 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -182,19 +182,20 @@ function extraNetworksSearchButton(tabs_id, event) {
 
 var globalPopup = null;
 var globalPopupInner = null;
+function closePopup(){
+    if (!globalPopup) return;
+
+    globalPopup.style.display = "none";
+}
 function popup(contents) {
     if (!globalPopup) {
         globalPopup = document.createElement('div');
-        globalPopup.onclick = function() {
-            globalPopup.style.display = "none";
-        };
+        globalPopup.onclick = closePopup;
         globalPopup.classList.add('global-popup');
 
         var close = document.createElement('div');
         close.classList.add('global-popup-close');
-        close.onclick = function() {
-            globalPopup.style.display = "none";
-        };
+        close.onclick = closePopup;
         close.title = "Close";
         globalPopup.appendChild(close);
 
@@ -263,3 +264,27 @@ function extraNetworksRequestMetadata(event, extraPage, cardName) {
 
     event.stopPropagation();
 }
+
+extraPageUserMetadataEditors = {}
+
+function extraNetworksEditUserMetadata(event, tabname, extraPage, cardName) {
+    var id = tabname + '_' + extraPage + '_edit_user_metadata';
+
+    editor = extraPageUserMetadataEditors[id]
+    if(! editor){
+        editor = {};
+        editor.page = gradioApp().getElementById(id);
+        editor.nameTextarea = gradioApp().querySelector("#" + id + "_name" + ' textarea');
+        editor.button = gradioApp().querySelector("#" + id + "_button");
+        extraPageUserMetadataEditors[id] = editor;
+    }
+
+    editor.nameTextarea.value = cardName;
+    updateInput(editor.nameTextarea);
+
+    editor.button.click();
+
+    popup(editor.page);
+
+    event.stopPropagation();
+}
diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 693cafb6..eaae6217 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -2,7 +2,7 @@ import os.path
 import urllib.parse

 from pathlib import Path

 

-from modules import shared

+from modules import shared, ui_extra_networks_user_metadata, errors

 from modules.images import read_info_from_image, save_image_with_geninfo

 from modules.ui import up_down_symbol

 import gradio as gr

@@ -60,13 +60,34 @@ class ExtraNetworksPage:
     def __init__(self, title):

         self.title = title

         self.name = title.lower()

+        self.id_page = self.name.replace(" ", "_")

         self.card_page = shared.html("extra-networks-card.html")

         self.allow_negative_prompt = False

         self.metadata = {}

+        self.items = {}

 

     def refresh(self):

         pass

 

+    def read_user_metadata(self, item):

+        filename = item.get("filename", None)

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

+        metadata_filename = basename + '.json'

+

+        metadata = {}

+        try:

+            if os.path.isfile(metadata_filename):

+                with open(metadata_filename, "r", encoding="utf8") as file:

+                    metadata = json.load(file)

+        except Exception as e:

+            errors.display(e, f"reading extra network user metadata from {metadata_filename}")

+

+        desc = metadata.get("description", None)

+        if desc is not None:

+            item["description"] = desc

+

+        item["user_metadata"] = metadata

+

     def link_preview(self, filename):

         quoted_filename = urllib.parse.quote(filename.replace('\\', '/'))

         mtime = os.path.getmtime(filename)

@@ -119,11 +140,15 @@ class ExtraNetworksPage:
 </button>

 """ for subdir in subdirs])

 

-        for item in self.list_items():

+        self.items = {x["name"]: x for x in self.list_items()}

+        for item in self.items.values():

             metadata = item.get("metadata")

             if metadata:

                 self.metadata[item["name"]] = metadata

 

+            if "user_metadata" not in item:

+                self.read_user_metadata(item)

+

             items_html += self.create_html_for_item(item, tabname)

 

         if items_html == '':

@@ -166,7 +191,9 @@ class ExtraNetworksPage:
         metadata_button = ""

         metadata = item.get("metadata")

         if metadata:

-            metadata_button = f"<div class='metadata-button' title='Show metadata' onclick='extraNetworksRequestMetadata(event, {json.dumps(self.name)}, {json.dumps(item['name'])})'></div>"

+            metadata_button = f"<div class='metadata-button card-button' title='Show internal metadata' onclick='extraNetworksRequestMetadata(event, {json.dumps(self.name)}, {json.dumps(item['name'])})'></div>"

+

+        edit_button = f"<div class='edit-button card-button' title='Edit metadata' onclick='extraNetworksEditUserMetadata(event, {json.dumps(tabname)}, {json.dumps(self.id_page)}, {json.dumps(item['name'])})'></div>"

 

         local_path = ""

         filename = item.get("filename", "")

@@ -200,6 +227,7 @@ class ExtraNetworksPage:
             "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,

+            "edit_button": edit_button,

             "search_only": " search_only" if search_only else "",

             "sort_keys": sort_keys,

         }

@@ -247,6 +275,9 @@ class ExtraNetworksPage:
                 pass

         return None

 

+    def create_user_metadata_editor(self, ui, tabname):

+        return ui_extra_networks_user_metadata.UserMetadataEditor(ui, tabname, self)

+

 

 def initialize():

     extra_pages.clear()

@@ -297,20 +328,23 @@ def create_ui(container, button, tabname):
     ui = ExtraNetworksUi()

     ui.pages = []

     ui.pages_contents = []

+    ui.user_metadata_editors = []

     ui.stored_extra_pages = pages_in_preferred_order(extra_pages.copy())

     ui.tabname = tabname

 

     with gr.Tabs(elem_id=tabname+"_extra_tabs"):

         for page in ui.stored_extra_pages:

-            page_id = page.title.lower().replace(" ", "_")

-

-            with gr.Tab(page.title, id=page_id):

-                elem_id = f"{tabname}_{page_id}_cards_html"

+            with gr.Tab(page.title, id=page.id_page):

+                elem_id = f"{tabname}_{page.id_page}_cards_html"

                 page_elem = gr.HTML('Loading...', elem_id=elem_id)

                 ui.pages.append(page_elem)

 

                 page_elem.change(fn=lambda: None, _js='function(){applyExtraNetworkFilter(' + json.dumps(tabname) + '); return []}', inputs=[], outputs=[])

 

+                editor = page.create_user_metadata_editor(ui, tabname)

+                editor.create_ui()

+                ui.user_metadata_editors.append(editor)

+

     gr.Textbox('', show_label=False, elem_id=tabname+"_extra_search", placeholder="Search...", visible=False)

     gr.Dropdown(choices=['Default Sort', 'Date Created', 'Date Modified', 'Name'], value='Default Sort', elem_id=tabname+"_extra_sort", multiselect=False, visible=False, show_label=False, interactive=True)

     gr.Button(up_down_symbol, elem_id=tabname+"_extra_sortorder")

@@ -363,6 +397,8 @@ def path_is_parent(parent_path, child_path):
 

 def setup_ui(ui, gallery):

     def save_preview(index, images, filename):

+        # this function is here for backwards compatibility and likely will be removed soon

+

         if len(images) == 0:

             print("There is no image in gallery to save as a preview.")

             return [page.create_html(ui.tabname) for page in ui.stored_extra_pages]

@@ -394,3 +430,7 @@ def setup_ui(ui, gallery):
         outputs=[*ui.pages]

     )

 

+    for editor in ui.user_metadata_editors:

+        editor.setup_ui(gallery)

+

+

diff --git a/modules/ui_extra_networks_checkpoints.py b/modules/ui_extra_networks_checkpoints.py
index 8b9ab71b..bb5071e6 100644
--- a/modules/ui_extra_networks_checkpoints.py
+++ b/modules/ui_extra_networks_checkpoints.py
@@ -18,7 +18,7 @@ class ExtraNetworksPageCheckpoints(ui_extra_networks.ExtraNetworksPage):
             path, ext = os.path.splitext(checkpoint.filename)

             yield {

                 "name": checkpoint.name_for_extra,

-                "filename": path,

+                "filename": checkpoint.filename,

                 "preview": self.find_preview(path),

                 "description": self.find_description(path),

                 "search_term": self.search_terms_from_path(checkpoint.filename) + " " + (checkpoint.sha256 or ""),

diff --git a/modules/ui_extra_networks_hypernets.py b/modules/ui_extra_networks_hypernets.py
index 7c19b532..ea0b7a44 100644
--- a/modules/ui_extra_networks_hypernets.py
+++ b/modules/ui_extra_networks_hypernets.py
@@ -12,12 +12,12 @@ class ExtraNetworksPageHypernetworks(ui_extra_networks.ExtraNetworksPage):
         shared.reload_hypernetworks()

 

     def list_items(self):

-        for index, (name, path) in enumerate(shared.hypernetworks.items()):

-            path, ext = os.path.splitext(path)

+        for index, (name, full_path) in enumerate(shared.hypernetworks.items()):

+            path, ext = os.path.splitext(full_path)

 

             yield {

                 "name": name,

-                "filename": path,

+                "filename": full_path,

                 "preview": self.find_preview(path),

                 "description": self.find_description(path),

                 "search_term": self.search_terms_from_path(path),

diff --git a/modules/ui_extra_networks_user_metadata.py b/modules/ui_extra_networks_user_metadata.py
new file mode 100644
index 00000000..8d20d026
--- /dev/null
+++ b/modules/ui_extra_networks_user_metadata.py
@@ -0,0 +1,169 @@
+import datetime

+import html

+import json

+import os.path

+

+import gradio as gr

+

+from modules import generation_parameters_copypaste, images, sysinfo, errors

+

+

+class UserMetadataEditor:

+

+    def __init__(self, ui, tabname, page):

+        self.ui = ui

+        self.tabname = tabname

+        self.page = page

+        self.id_part = f"{self.tabname}_{self.page.id_page}_edit_user_metadata"

+

+        self.box = None

+

+        self.edit_name_input = None

+        self.button_edit = None

+

+        self.edit_name = None

+        self.edit_description = None

+        self.html_filedata = None

+        self.html_preview = None

+

+        self.button_cancel = None

+        self.button_replace_preview = None

+        self.button_save = None

+

+    def get_user_metadata(self, name):

+        item = self.page.items.get(name, {})

+

+        user_metadata = item.get('user_metadata', None)

+        if user_metadata is None:

+            user_metadata = {}

+            item['user_metadata'] = user_metadata

+

+        return user_metadata

+

+    def create_default_editor_elems(self):

+        with gr.Row():

+            with gr.Column(scale=2):

+                self.edit_name = gr.HTML(elem_classes="extra-network-name")

+                self.edit_description = gr.Textbox(label="Description", lines=4)

+                self.html_filedata = gr.HTML()

+

+            with gr.Column(scale=1, min_width=0):

+                self.html_preview = gr.HTML()

+

+    def create_default_buttons(self):

+

+        with gr.Row():

+            self.button_cancel = gr.Button('Cancel')

+            self.button_replace_preview = gr.Button('Replace preview', variant='primary')

+            self.button_save = gr.Button('Save', variant='primary')

+

+        self.button_cancel.click(fn=None, _js="closePopup")

+

+    def get_card_html(self, name):

+        item = self.page.items.get(name, {})

+

+        preview_url = item.get("preview", None)

+

+        if not preview_url:

+            filename, _ = os.path.splitext(item["filename"])

+            preview_url = self.page.find_preview(filename)

+            item["preview"] = preview_url

+

+        if preview_url:

+            preview = f'''

+            <div class='card standalone-card-preview'>

+                <img src="{html.escape(preview_url)}" class="preview">

+            </div>

+            '''

+        else:

+            preview = "<div class='card standalone-card-preview'></div>"

+

+        return preview

+

+    def get_metadata_table(self, name):

+        item = self.page.items.get(name, {})

+        try:

+            filename = item["filename"]

+

+            stats = os.stat(filename)

+            params = [

+                ('File size: ', sysinfo.pretty_bytes(stats.st_size)),

+                ('Created: ', datetime.datetime.fromtimestamp(stats.st_ctime).strftime('%Y-%m-%d %H:%M')),

+                ('Last modified: ', datetime.datetime.fromtimestamp(stats.st_mtime).strftime('%Y-%m-%d %H:%M')),

+            ]

+

+            return params

+        except Exception as e:

+            errors.display(e, f"reading info for {name}")

+            return []

+

+    def put_values_into_components(self, name):

+        user_metadata = self.get_user_metadata(name)

+

+        params = self.get_metadata_table(name)

+        table = '<table class="file-metadata">' + "".join(f"<tr><th>{name}</th><td>{value}</td></tr>" for name, value in params) + '</table>'

+

+        return html.escape(name), user_metadata.get('description', ''), table, self.get_card_html(name)

+

+    def write_user_metadata(self, name, metadata):

+        item = self.page.items.get(name, {})

+        filename = item.get("filename", None)

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

+

+        with open(basename + '.json', "w", encoding="utf8") as file:

+            json.dump(metadata, file)

+

+    def save_user_metadata(self, name, desc):

+        user_metadata = self.get_user_metadata(name)

+        user_metadata["description"] = desc

+

+        self.write_user_metadata(name, user_metadata)

+

+    def create_editor(self):

+        self.create_default_editor_elems()

+

+        self.create_default_buttons()

+

+        self.button_edit\

+            .click(fn=self.put_values_into_components, inputs=[self.edit_name_input], outputs=[self.edit_name, self.edit_description, self.html_filedata, self.html_preview])\

+            .then(fn=lambda: gr.update(visible=True), inputs=[], outputs=[self.box])

+

+        self.button_save.click(fn=self.save_user_metadata, inputs=[self.edit_name_input, self.edit_description], outputs=[]).then(fn=None, _js="closePopup")

+

+    def create_ui(self):

+        with gr.Box(visible=False, elem_id=self.id_part, elem_classes="edit-user-metadata") as box:

+            self.box = box

+

+            self.edit_name_input = gr.Textbox("Edit user metadata card id", visible=False, elem_id=f"{self.id_part}_name")

+            self.button_edit = gr.Button("Edit user metadata", visible=False, elem_id=f"{self.id_part}_button")

+

+            self.create_editor()

+

+    def save_preview(self, index, gallery, name):

+        if len(gallery) == 0:

+            print("There is no image in gallery to save as a preview.")

+            return [self.get_card_html(name)] + [page.create_html(self.ui.tabname) for page in self.ui.stored_extra_pages]

+

+        item = self.page.items.get(name, {})

+

+        index = int(index)

+        index = 0 if index < 0 else index

+        index = len(gallery) - 1 if index >= len(gallery) else index

+

+        img_info = gallery[index if index >= 0 else 0]

+        image = generation_parameters_copypaste.image_from_url_text(img_info)

+        geninfo, items = images.read_info_from_image(image)

+

+        images.save_image_with_geninfo(image, geninfo, item["local_preview"])

+

+        return [self.get_card_html(name)] + [page.create_html(self.tabname) for page in self.ui.stored_extra_pages]

+

+    def setup_ui(self, gallery):

+        self.button_replace_preview.click(

+            fn=self.save_preview,

+            _js="function(x, y, z){return [selected_gallery_index(), y, z]}",

+            inputs=[self.edit_name_input, gallery, self.edit_name_input],

+            outputs=[self.html_preview, *self.ui.pages]

+        )

+

+

diff --git a/style.css b/style.css
index 9e13d7fd..4431c1aa 100644
--- a/style.css
+++ b/style.css
@@ -550,6 +550,9 @@ table.popup-table .link{
     background-color: rgba(20, 20, 20, 0.95);

 }

 

+.global-popup *{

+    box-sizing: border-box;

+}

 

 .global-popup-close:before {

     content: "×";

@@ -815,32 +818,42 @@ footer {
 }

 

 

-.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{

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

     display: none;

     position: absolute;

     color: white;

     right: 0;

 }

-.extra-network-cards .card .metadata-button {

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

+    display: flex;

+}

+

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

+    color: white;

+}

+

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

+    content: "🛈";

+}

+

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

+    content: "🛠";

+}

+

+.extra-network-cards .card .card-button {

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

     padding: 0.25em;

     font-size: 22pt;

     width: 1.5em;

 }

-.extra-network-thumbs .card .metadata-button {

+.extra-network-thumbs .card .card-button {

     text-shadow: 1px 1px 2px black;

     padding: 0;

     font-size: 16pt;

     width: 1em;

     top: -0.25em;

 }

-.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{

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

     color: red;

 }

 

@@ -861,7 +874,7 @@ footer {
     position: relative;

 }

 

-.extra-network-thumbs .card .preview{

+.extra-network-thumbs .card .preview, .standalone-card-preview.card .preview{

     position: absolute;

     object-fit: cover;

     width: 100%;

@@ -905,7 +918,7 @@ footer {
     word-break: break-all;

 }

 

-.extra-network-cards .card{

+.extra-network-cards .card, .standalone-card-preview.card{

     display: inline-block;

     margin: 0.5em;

     width: 16em;

@@ -989,3 +1002,22 @@ footer {
     width: 100%;

     height:100%;

 }

+

+div.block.gradio-box.edit-user-metadata {

+    min-width: 56em;

+    background: var(--body-background-fill);

+    padding: 2em !important;

+}

+

+.edit-user-metadata .extra-network-name{

+    font-size: 18pt;

+    color: var(--body-text-color);

+}

+

+.edit-user-metadata .file-metadata th{

+    text-align: left;

+}

+

+.edit-user-metadata .wrap.translucent{

+    background: var(--body-background-fill);

+}