use HTTP request to fetch metadata for Lora cards instead of including it into the main page

3 files changed, 72 insertions, 12 deletions

diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index 2fb87cd5..40818bb4 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -139,3 +139,39 @@ function extraNetworksShowMetadata(text){
 

     popup(elem);

 }

+

+function requestGet(url, data, handler, errorHandler){

+    var xhr = new XMLHttpRequest();

+    var args = Object.keys(data).map(function(k){ return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) }).join('&')

+    xhr.open("GET", url + "?" + args, true);

+

+    xhr.onreadystatechange = function () {

+        if (xhr.readyState === 4) {

+            if (xhr.status === 200) {

+                try {

+                    var js = JSON.parse(xhr.responseText);

+                    handler(js)

+                } catch (error) {

+                    console.error(error);

+                    errorHandler()

+                }

+            } else{

+                errorHandler()

+            }

+        }

+    };

+    var js = JSON.stringify(data);

+    xhr.send(js);

+}

+

+function extraNetworksRequestMetadata(extraPage, cardName){

+    showError = function(){ extraNetworksShowMetadata("there was an error getting metadata"); }

+

+    requestGet("./sd_extra_networks/metadata", {"page": extraPage, "item": cardName}, function(data){

+        if(data && data.metadata){

+            extraNetworksShowMetadata(data.metadata)

+        } else{

+            showError()

+        }

+    }, showError)

+}

diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 8cd6d8cf..3cf8fcb6 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -22,21 +22,37 @@ def register_page(page):
     allowed_dirs.update(set(sum([x.allowed_directories_for_previews() for x in extra_pages], [])))

 

 

-def add_pages_to_demo(app):

-    def fetch_file(filename: str = ""):

-        from starlette.responses import FileResponse

+def fetch_file(filename: str = ""):

+    from starlette.responses import FileResponse

+

+    if not any([Path(x).absolute() in Path(filename).absolute().parents for x in allowed_dirs]):

+        raise ValueError(f"File cannot be fetched: {filename}. Must be in one of directories registered by extra pages.")

+

+    ext = os.path.splitext(filename)[1].lower()

+    if ext not in (".png", ".jpg", ".webp"):

+        raise ValueError(f"File cannot be fetched: {filename}. Only png and jpg and webp.")

+

+    # would profit from returning 304

+    return FileResponse(filename, headers={"Accept-Ranges": "bytes"})

+

+

+def get_metadata(page: str = "", item: str = ""):

+    from starlette.responses import JSONResponse

 

-        if not any([Path(x).absolute() in Path(filename).absolute().parents for x in allowed_dirs]):

-            raise ValueError(f"File cannot be fetched: {filename}. Must be in one of directories registered by extra pages.")

+    page = next(iter([x for x in extra_pages if x.name == page]), None)

+    if page is None:

+        return JSONResponse({})

 

-        ext = os.path.splitext(filename)[1].lower()

-        if ext not in (".png", ".jpg", ".webp"):

-            raise ValueError(f"File cannot be fetched: {filename}. Only png and jpg and webp.")

+    metadata = page.metadata.get(item)

+    if metadata is None:

+        return JSONResponse({})

 

-        # would profit from returning 304

-        return FileResponse(filename, headers={"Accept-Ranges": "bytes"})

+    return JSONResponse({"metadata": metadata})

 

+

+def add_pages_to_demo(app):

     app.add_api_route("/sd_extra_networks/thumb", fetch_file, methods=["GET"])

+    app.add_api_route("/sd_extra_networks/metadata", get_metadata, methods=["GET"])

 

 

 class ExtraNetworksPage:

@@ -45,6 +61,7 @@ class ExtraNetworksPage:
         self.name = title.lower()

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

         self.allow_negative_prompt = False

+        self.metadata = {}

 

     def refresh(self):

         pass

@@ -66,6 +83,8 @@ class ExtraNetworksPage:
         view = shared.opts.extra_networks_default_view

         items_html = ''

 

+        self.metadata = {}

+

         subdirs = {}

         for parentdir in [os.path.abspath(x) for x in self.allowed_directories_for_previews()]:

             for x in glob.glob(os.path.join(parentdir, '**/*'), recursive=True):

@@ -92,6 +111,10 @@ class ExtraNetworksPage:
 """ for subdir in subdirs])

 

         for item in self.list_items():

+            metadata = item.get("metadata")

+            if metadata:

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

+

             items_html += self.create_html_for_item(item, tabname)

 

         if items_html == '':

@@ -127,8 +150,7 @@ class ExtraNetworksPage:
         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>"

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

 

         args = {

             "preview_html": "style='background-image: url(\"" + html.escape(preview) + "\")'" if preview else '',

@@ -215,6 +237,7 @@ def create_ui(container, button, tabname):
     with gr.Tabs(elem_id=tabname+"_extra_tabs") as tabs:

         for page in ui.stored_extra_pages:

             with gr.Tab(page.title):

+

                 page_elem = gr.HTML(page.create_html(ui.tabname))

                 ui.pages.append(page_elem)

 

diff --git a/style.css b/style.css
index aa5ecb34..41d2859c 100644
--- a/style.css
+++ b/style.css
@@ -641,6 +641,7 @@ footer {
     text-shadow: 2px 2px 3px black;

     padding: 0.25em;

     font-size: 22pt;

+    width: 1.5em;

 }

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

     display: inline-block;