user metadata system for custom networks
This commit is contained in:
parent
c58cf73c80
commit
e5d3ae2bf4
@ -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),
|
||||
|
@ -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>
|
||||
|
@ -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();
|
||||
}
|
||||
|
@ -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)
|
||||
|
||||
|
||||
|
@ -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 ""),
|
||||
|
@ -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),
|
||||
|
169
modules/ui_extra_networks_user_metadata.py
Normal file
169
modules/ui_extra_networks_user_metadata.py
Normal file
@ -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]
|
||||
)
|
||||
|
||||
|
56
style.css
56
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);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user