nuke thumbs extra networks view mode (use settings tab to change width/height/scale to get thumbs)

5 files changed, 22 insertions, 94 deletions

diff --git a/html/image-update.svg b/html/image-update.svg
deleted file mode 100644
index 3abf12df..00000000
--- a/html/image-update.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <filter id='shadow' color-interpolation-filters="sRGB">
-    <feDropShadow flood-color="black" dx="0" dy="0" flood-opacity="0.9" stdDeviation="0.5"/>
-    <feDropShadow flood-color="black" dx="0" dy="0" flood-opacity="0.9" stdDeviation="0.5"/>
-  </filter>
-  <path style="filter:url(#shadow);" fill="#FFFFFF" d="M13.18 19C13.35 19.72 13.64 20.39 14.03 21H5C3.9 21 3 20.11 3 19V5C3 3.9 3.9 3 5 3H19C20.11 3 21 3.9 21 5V11.18C20.5 11.07 20 11 19.5 11C19.33 11 19.17 11 19 11.03V5H5V19H13.18M11.21 15.83L9.25 13.47L6.5 17H13.03C13.14 15.54 13.73 14.22 14.64 13.19L13.96 12.29L11.21 15.83M19 13.5V12L16.75 14.25L19 16.5V15C20.38 15 21.5 16.12 21.5 17.5C21.5 17.9 21.41 18.28 21.24 18.62L22.33 19.71C22.75 19.08 23 18.32 23 17.5C23 15.29 21.21 13.5 19 13.5M19 20C17.62 20 16.5 18.88 16.5 17.5C16.5 17.1 16.59 16.72 16.76 16.38L15.67 15.29C15.25 15.92 15 16.68 15 17.5C15 19.71 16.79 21.5 19 21.5V23L21.25 20.75L19 18.5V20Z" />
-</svg>
diff --git a/javascript/hints.js b/javascript/hints.js
index 41201b2f..4167cb28 100644
--- a/javascript/hints.js
+++ b/javascript/hints.js
@@ -108,7 +108,6 @@ var titles = {
     "Upscale by": "Adjusts the size of the image by multiplying the original width and height by the selected value. Ignored if either Resize width to or Resize height to are non-zero.",
     "Resize width to": "Resizes image to this width. If 0, width is inferred from either of two nearby sliders.",
     "Resize height to": "Resizes image to this height. If 0, height is inferred from either of two nearby sliders.",
-    "Multiplier for extra networks": "When adding extra network such as Hypernetwork or Lora to prompt, use this multiplier for it.",
     "Discard weights with matching name": "Regular expression; if weights's name matches it, the weights is not written to the resulting checkpoint. Use ^model_ema to discard EMA weights.",
     "Extra networks tab order": "Comma-separated list of tab names; tabs listed here will appear in the extra networks UI first and in order listed.",
     "Negative Guidance minimum sigma": "Skip negative prompt for steps where image is already mostly denoised; the higher this value, the more skips there will be; provides increased performance in exchange for minor quality reduction."
diff --git a/modules/shared.py b/modules/shared.py
index 427dcc50..f6604ef9 100644
--- a/modules/shared.py
+++ b/modules/shared.py
@@ -466,10 +466,11 @@ options_templates.update(options_section(('interrogate', "Interrogate Options"),
 options_templates.update(options_section(('extra_networks', "Extra Networks"), {

     "extra_networks_show_hidden_directories": OptionInfo(True, "Show hidden directories").info("directory is hidden if its name starts with \".\"."),

     "extra_networks_hidden_models": OptionInfo("When searched", "Show cards for models in hidden directories", gr.Radio, {"choices": ["Always", "When searched", "Never"]}).info('"When searched" option will only show the item when the search string has 4 characters or more'),

-    "extra_networks_default_view": OptionInfo("cards", "Default view for Extra Networks", gr.Dropdown, {"choices": ["cards", "thumbs"]}),

-    "extra_networks_default_multiplier": OptionInfo(1.0, "Multiplier for extra networks", gr.Slider, {"minimum": 0.0, "maximum": 1.0, "step": 0.01}),

+    "extra_networks_default_multiplier": OptionInfo(1.0, "Default multiplier for extra networks", gr.Slider, {"minimum": 0.0, "maximum": 2.0, "step": 0.01}),

     "extra_networks_card_width": OptionInfo(0, "Card width for Extra Networks").info("in pixels"),

     "extra_networks_card_height": OptionInfo(0, "Card height for Extra Networks").info("in pixels"),

+    "extra_networks_card_text_scale": OptionInfo(1.0, "Card text scale", gr.Slider, {"minimum": 0.0, "maximum": 2.0, "step": 0.01}).info("1 = original size"),

+    "extra_networks_card_show_desc": OptionInfo(True, "Show description on card"),

     "extra_networks_add_text_separator": OptionInfo(" ", "Extra networks separator").info("extra text to add before <...> when adding extra network to prompt"),

     "ui_extra_networks_tab_reorder": OptionInfo("", "Extra networks tab order").needs_restart(),

     "textual_inversion_print_at_load": OptionInfo(False, "Print a list of Textual Inversion embeddings when loading model"),

diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index a4927c11..d9deccb2 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -132,7 +132,6 @@ class ExtraNetworksPage:
         return ""

 

     def create_html(self, tabname):

-        view = shared.opts.extra_networks_default_view

         items_html = ''

 

         self.metadata = {}

@@ -186,10 +185,10 @@ class ExtraNetworksPage:
         self_name_id = self.name.replace(" ", "_")

 

         res = f"""

-<div id='{tabname}_{self_name_id}_subdirs' class='extra-network-subdirs extra-network-subdirs-{view}'>

+<div id='{tabname}_{self_name_id}_subdirs' class='extra-network-subdirs extra-network-subdirs-cards'>

 {subdirs_html}

 </div>

-<div id='{tabname}_{self_name_id}_cards' class='extra-network-{view}'>

+<div id='{tabname}_{self_name_id}_cards' class='extra-network-cards'>

 {items_html}

 </div>

 """

@@ -248,12 +247,12 @@ class ExtraNetworksPage:
 

         args = {

             "background_image": background_image,

-            "style": f"'display: none; {height}{width}'",

+            "style": f"'display: none; {height}{width}; font-size: {shared.opts.extra_networks_card_text_scale*100}%'",

             "prompt": item.get("prompt", None),

             "tabname": quote_js(tabname),

             "local_preview": quote_js(item["local_preview"]),

             "name": item["name"],

-            "description": (item.get("description") or ""),

+            "description": (item.get("description") or "" if shared.opts.extra_networks_card_show_desc else ""),

             "card_clicked": onclick,

             "save_card_preview": '"' + html.escape(f"""return saveCardPreview(event, {quote_js(tabname)}, {quote_js(item["local_preview"])})""") + '"',

             "search_term": item.get("search_term", ""),

diff --git a/style.css b/style.css
index 4e22cfd6..f7a8cb17 100644
--- a/style.css
+++ b/style.css
@@ -804,127 +804,67 @@ footer {
     width: auto;

 }

 

-.extra-network-cards .nocards, .extra-network-thumbs .nocards{

+.extra-network-cards .nocards{

     margin: 1.25em 0.5em 0.5em 0.5em;

 }

 

-.extra-network-cards .nocards h1, .extra-network-thumbs .nocards h1{

+.extra-network-cards .nocards h1{

     font-size: 1.5em;

     margin-bottom: 1em;

 }

 

-.extra-network-cards .nocards li, .extra-network-thumbs .nocards li{

+.extra-network-cards .nocards li{

     margin-left: 0.5em;

 }

 

 

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

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

     display: none;

     position: absolute;

     color: white;

     right: 0;

 }

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

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

     display: flex;

 }

 

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

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

     color: white;

 }

 

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

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

     content: "🛈";

 }

 

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

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

     content: "🛠";

 }

 

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

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

     padding: 0.25em;

-    font-size: 22pt;

+    font-size: 200%;

     width: 1.5em;

 }

-.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 .card-button:hover, .extra-network-thumbs .card .card-button:hover{

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

     color: red;

 }

 

 

-.extra-network-thumbs {

-    display: flex;

-    flex-flow: row wrap;

-    gap: 10px;

-}

-

-.extra-network-thumbs .card {

-    height: 6em;

-    width: 6em;

-    cursor: pointer;

-    background-image: url('./file=html/card-no-preview.png');

-    background-size: cover;

-    background-position: center center;

-    position: relative;

-}

-

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

+.standalone-card-preview.card .preview{

     position: absolute;

     object-fit: cover;

     width: 100%;

     height:100%;

 }

 

-.extra-network-thumbs .card:hover .additional a {

-    display: inline-block;

-}

-

-.extra-network-thumbs .actions .additional a {

-    background-image: url('./file=html/image-update.svg');

-    background-repeat: no-repeat;

-    background-size: cover;

-    background-position: center center;

-    position: absolute;

-    top: 0;

-    left: 0;

-    width: 24px;

-    height: 24px;

-    display: none;

-    font-size: 0;

-    text-align: -9999;

-}

-

-.extra-network-thumbs .actions .name {

-    position: absolute;

-    bottom: 0;

-    font-size: 10px;

-    padding: 3px;

-    width: 100%;

-    overflow: hidden;

-    white-space: nowrap;

-    text-overflow: ellipsis;

-    background: rgba(0,0,0,.5);

-    color: white;

-}

-

-.extra-network-thumbs .card:hover .actions .name {

-    white-space: normal;

-    word-break: break-all;

-}

-

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

     display: inline-block;

-    margin: 0.5em;

-    width: 16em;

-    height: 24em;

+    margin: 0.5rem;

+    width: 16rem;

+    height: 24rem;

     box-shadow: 0 0 5px rgba(128, 128, 128, 0.5);

-    border-radius: 0.2em;

+    border-radius: 0.2rem;

     position: relative;

 

     background-size: auto 100%;

@@ -958,10 +898,6 @@ footer {
     color: white;

 }

 

-.extra-network-cards .card .actions:hover{

-    box-shadow: 0 0 0.75em 0.75em rgba(0,0,0,0.5) !important;

-}

-

 .extra-network-cards .card .actions .name{

     font-size: 1.7em;

     font-weight: bold;