added Lazy-load extra network thumbnails? #101

extensions-builtin/Lora/ui_extra_networks_lora.py

@@ -18,7 +18,7 @@ class ExtraNetworksPageLora(ui_extra_networks.ExtraNetworksPage):
             yield {
                 "name": name,
                 "filename": path,
-                "preview": self.find_preview(path),
+                "preview": self.find_preview(path) if self.find_preview(path) else './file=html/card-no-preview.png',
                 "description": self.find_description(path),
                 "search_term": self.search_terms_from_path(lora_on_disk.filename),
                 "prompt": json.dumps(f"<lora:{name}:") + " + opts.extra_networks_default_multiplier + " + json.dumps(">"),

html/extra-networks-card.html

@@ -1,5 +1,6 @@
 <div class='card-container' >	
-	<div class='card' {preview_html} onclick={card_clicked}>
+	<div class='card' onclick={card_clicked}><!--{preview_html}-->		
+		<img src={preview_image} loading="lazy">
 		{metadata_button}
 		<div class='actions'>
 			<div class='additional'>

modules/ui_extra_networks.py

@@ -165,6 +165,7 @@ class ExtraNetworksPage:
         args = {
             #"style": f"'{height}{width}{background_image}'",
             "preview_html": "style='background-image: url(\"" + html.escape(preview) + "\")'" if preview else '',
+            "preview_image": html.escape(preview) if preview else './file=html/card-no-preview.png',
             "prompt": item.get("prompt", None),
             "tabname": json.dumps(tabname),
             "local_preview": json.dumps(item["local_preview"]),

style.css

@@ -1502,6 +1502,12 @@ display:none !important;
     border: 0;
     padding: 0px;
 }
+.compact.svelte-15lo0d8, .panel.svelte-15lo0d8 {
+    border-radius: var(--ae-panel-border-radius);
+    background: var(--ae-panel-bg-color);
+    padding: 0;
+	gap:1px !important;
+}
 
 .script-group .compact,
 .script-group .gradio-column{
@@ -2217,7 +2223,7 @@ height: calc(var(--ae-container-height-gap) - 150px) !important;
     display: none;
     position: absolute;
     right: 8px;
-	top:0;
+	top:8px;
     color: white;
     text-shadow: 2px 2px 3px black;  
     font-size: 22pt;
@@ -2229,6 +2235,20 @@ height: calc(var(--ae-container-height-gap) - 150px) !important;
     color: var(--ae-primary-color);
 }
 
+.extra-network-cards .card{
+    overflow: hidden;
+}
+
+.extra-network-cards .card img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+	object-fit: cover;
+    width: 100%;
+    height: 100%;
+}
+
 /************/
 /* MainTabs */
 /************/