user metadata system for custom networks

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

html/extra-networks-card.html

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

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();
+}

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

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 ""),

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

modules/ui_extra_networks_user_metadata.py

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

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);
+}