Merge pull request #27 from EtSL33py/preview-size

Preview size sliders

__init__.py

@@ -183,11 +183,14 @@ def ui_rules():
         
         Rule("model-preview-thumbnail-type", "AUTO", str),
         Rule("model-preview-fallback-search-safetensors-thumbnail", False, bool),
+        Rule("model-preview-thumbnail-width", 240, int, 150, 480),
+        Rule("model-preview-thumbnail-height", 360, int, 185, 480),
         Rule("model-show-label-extensions", False, bool),
         Rule("model-show-add-button", True, bool),
         Rule("model-show-copy-button", True, bool),
         Rule("model-show-load-workflow-button", True, bool),
         Rule("model-info-button-on-left", False, bool),
+        Rule("model-buttons-only-on-hover", False, bool),
         
         Rule("model-add-embedding-extension", False, bool),
         Rule("model-add-drag-strict-on-field", False, bool),

web/model-manager.css

@@ -51,6 +51,9 @@
     --model-manager-sidebar-height-top: 50vh;
     --model-manager-sidebar-height-bottom: 50vh;
     
+    --model-manager-thumbnail-width: 240px;
+    --model-manager-thumbnail-height: 360px;
+    
     --model-manager-left: 0;
     --model-manager-right: 0;
     --model-manager-top: 0;
@@ -399,8 +402,8 @@
 /* preview image */
 .model-manager .item {
     position: relative;
-    width: 240px;
-    height: 360px;
+    width: var(--model-manager-thumbnail-width);;
+    height: var(--model-manager-thumbnail-height);;
     text-align: center;
     overflow: hidden;
 	border-radius: 8px;
@@ -489,7 +492,6 @@
 .model-manager .comfy-grid .model-preview-top-right,
 .model-manager .comfy-grid .model-preview-top-left {
     position: absolute;
-    display: flex;
     flex-direction: column;
     gap: 8px;
     top: 8px;
@@ -503,6 +505,15 @@
     left: 8px;
 }
 
+.model-manager .item .model-buttons-hidden {
+    display: none;
+}
+
+.model-manager .item:hover .model-buttons-hidden,
+.model-manager .comfy-grid .model-buttons-visible  {
+    display: flex;
+}
+
 .model-manager .comfy-grid .model-button {
     opacity: 0.65;
 }

web/model-manager.js

@@ -250,8 +250,6 @@ function imageUri(
   return uri;
 }
 const PREVIEW_NONE_URI = imageUri();
-const PREVIEW_THUMBNAIL_WIDTH = 320;
-const PREVIEW_THUMBNAIL_HEIGHT = 480;
 
 /**
  *
@@ -2042,6 +2040,12 @@ class ModelGrid {
       !settingsElements['model-add-embedding-extension'].checked;
     const previewThumbnailFormat =
       settingsElements['model-preview-thumbnail-type'].value;
+    const previewThumbnailWidth =
+      Math.round(settingsElements['model-preview-thumbnail-width'].value / 0.75);
+    const previewThumbnailHeight =
+      Math.round(settingsElements['model-preview-thumbnail-height'].value / 0.75);
+    const buttonsOnlyOnHover =
+      settingsElements['model-buttons-only-on-hover'].checked;
     if (models.length > 0) {
 
       const $overlay = IS_FIREFOX
@@ -2083,6 +2087,8 @@ class ModelGrid {
             draggable: true,
           });
         });
+        const forHiddingButtonsClass = buttonsOnlyOnHover
+          ? 'model-buttons-hidden' : 'model-buttons-visible';
 
       return models.map((item) => {
         const previewInfo = item.preview;
@@ -2092,8 +2098,8 @@ class ModelGrid {
           src: imageUri(
             previewInfo?.path,
             previewInfo?.dateModified,
-            PREVIEW_THUMBNAIL_WIDTH,
-            PREVIEW_THUMBNAIL_HEIGHT,
+            previewThumbnailWidth,
+            previewThumbnailHeight,
             previewThumbnailFormat,
           ),
           draggable: false,
@@ -2180,14 +2186,14 @@ class ModelGrid {
             strictDragToAdd,
           ),
           $el(
-            'div.model-preview-top-right',
+            'div.model-preview-top-right.' + forHiddingButtonsClass,
             {
               draggable: false,
             },
             modelInfoButtonOnLeft ? infoButtons : actionButtons,
           ),
           $el(
-            'div.model-preview-top-left',
+            'div.model-preview-top-left.' + forHiddingButtonsClass,
             {
               draggable: false,
             },
@@ -4361,6 +4367,8 @@ class SettingsView {
       /** @type {HTMLInputElement} */ 'model-persistent-search': null,
 
       /** @type {HTMLInputElement} */ 'model-preview-thumbnail-type': null,
+      /** @type {HTMLInputElement} */ 'model-preview-thumbnail-width': null,
+      /** @type {HTMLInputElement} */ 'model-preview-thumbnail-height': null,
       /** @type {HTMLInputElement} */ 'model-preview-fallback-search-safetensors-thumbnail':
         null,
       /** @type {HTMLInputElement} */ 'model-show-label-extensions': null,
@@ -4368,6 +4376,7 @@ class SettingsView {
       /** @type {HTMLInputElement} */ 'model-show-copy-button': null,
       /** @type {HTMLInputElement} */ 'model-show-load-workflow-button': null,
       /** @type {HTMLInputElement} */ 'model-info-button-on-left': null,
+      /** @type {HTMLInputElement} */ 'model-buttons-only-on-hover': null,
 
       /** @type {HTMLInputElement} */ 'model-add-embedding-extension': null,
       /** @type {HTMLInputElement} */ 'model-add-drag-strict-on-field': null,
@@ -4628,6 +4637,34 @@ class SettingsView {
           textContent: 'Preview thumbnail type',
           options: ['AUTO', 'JPEG'], // should use AUTO to avoid artifacts from changing between formats; use JPEG for backward compatibility
         }),
+        $el('label', [
+          'Preview thumbnail width',
+          $el('input', {
+            $: (el) => (settings['model-preview-thumbnail-width'] = el),
+            type: 'range',
+            name: 'default thumbnail width',
+            value: 240,
+            min: 150,
+            max: 480,
+            step: 5,
+            oninput: function(){ this.nextElementSibling.textContent = this.value + 'px'},
+          }),
+          $el('span'),
+        ]),
+        $el('label', [
+          'Preview thumbnail height', 
+          $el('input', {
+            $: (el) => (settings['model-preview-thumbnail-height'] = el),
+            type: 'range',
+            name: 'default thumbnail height',
+            value: 360,
+            min: 185,
+            max: 480,
+            step: 5,
+            oninput: function(){ this.nextElementSibling.textContent = this.value + 'px'},
+          }),
+          $el('span'),
+        ]),
         $checkbox({
           $: (el) =>
             (settings['model-preview-fallback-search-safetensors-thumbnail'] =
@@ -4654,6 +4691,10 @@ class SettingsView {
           $: (el) => (settings['model-info-button-on-left'] = el),
           textContent: '"Model Info" button on left',
         }),
+        $checkbox({
+          $: (el) => (settings['model-buttons-only-on-hover'] = el),
+          textContent: 'Show buttons on hover only',
+        }),
         $el('h2', ['Node Graph']),
         $checkbox({
           $: (el) => (settings['model-add-embedding-extension'] = el),
@@ -5443,6 +5484,24 @@ class ModelManager extends ComfyDialog {
       this.#downloadView.elements.clearSearchButton.style.display =
         hideClearSearchButtons ? 'none' : '';
     }
+
+    {
+      // update thumbnail widths & heights
+      const thumbnailWidthEl = settings['model-preview-thumbnail-width'];
+      const thumbnailHeightEl = settings['model-preview-thumbnail-height'];
+
+      this.element.style.setProperty(
+        '--model-manager-thumbnail-width',
+        thumbnailWidthEl.value.toString() + 'px',
+      );
+      thumbnailWidthEl.dispatchEvent(new Event('input'));
+
+      this.element.style.setProperty(
+        '--model-manager-thumbnail-height',
+        thumbnailHeightEl.value.toString() + 'px',
+      );
+      thumbnailHeightEl.dispatchEvent(new Event('input'));
+    }
   }
 
   #resetManagerContentsScroll = () => {