feat(misc): add VAE and Upscaler model management page

static/js/components/ContextMenu/MiscContextMenu.js

@@ -0,0 +1,85 @@
+import { BaseContextMenu } from './BaseContextMenu.js';
+import { ModelContextMenuMixin } from './ModelContextMenuMixin.js';
+import { getModelApiClient, resetAndReload } from '../../api/modelApiFactory.js';
+import { showDeleteModal, showExcludeModal } from '../../utils/modalUtils.js';
+import { moveManager } from '../../managers/MoveManager.js';
+import { i18n } from '../../i18n/index.js';
+
+export class MiscContextMenu extends BaseContextMenu {
+    constructor() {
+        super('miscContextMenu', '.model-card');
+        this.nsfwSelector = document.getElementById('nsfwLevelSelector');
+        this.modelType = 'misc';
+        this.resetAndReload = resetAndReload;
+
+        this.initNSFWSelector();
+    }
+
+    // Implementation needed by the mixin
+    async saveModelMetadata(filePath, data) {
+        return getModelApiClient().saveModelMetadata(filePath, data);
+    }
+
+    showMenu(x, y, card) {
+        super.showMenu(x, y, card);
+
+        // Update the "Move to other root" label based on current model type
+        const moveOtherItem = this.menu.querySelector('[data-action="move-other"]');
+        if (moveOtherItem) {
+            const currentType = card.dataset.sub_type || 'vae';
+            const otherType = currentType === 'vae' ? 'upscaler' : 'vae';
+            const typeLabel = i18n.t(`misc.modelTypes.${otherType}`);
+            moveOtherItem.innerHTML = `<i class="fas fa-exchange-alt"></i> ${i18n.t('misc.contextMenu.moveToOtherTypeFolder', { otherType: typeLabel })}`;
+        }
+    }
+
+    handleMenuAction(action) {
+        // First try to handle with common actions
+        if (ModelContextMenuMixin.handleCommonMenuActions.call(this, action)) {
+            return;
+        }
+
+        const apiClient = getModelApiClient();
+
+        // Otherwise handle misc-specific actions
+        switch (action) {
+            case 'details':
+                // Show misc details
+                this.currentCard.click();
+                break;
+            case 'replace-preview':
+                // Add new action for replacing preview images
+                apiClient.replaceModelPreview(this.currentCard.dataset.filepath);
+                break;
+            case 'delete':
+                showDeleteModal(this.currentCard.dataset.filepath);
+                break;
+            case 'copyname':
+                // Copy misc model name
+                if (this.currentCard.querySelector('.fa-copy')) {
+                    this.currentCard.querySelector('.fa-copy').click();
+                }
+                break;
+            case 'refresh-metadata':
+                // Refresh metadata from CivitAI
+                apiClient.refreshSingleModelMetadata(this.currentCard.dataset.filepath);
+                break;
+            case 'move':
+                moveManager.showMoveModal(this.currentCard.dataset.filepath, this.currentCard.dataset.sub_type);
+                break;
+            case 'move-other':
+                {
+                    const currentType = this.currentCard.dataset.sub_type || 'vae';
+                    const otherType = currentType === 'vae' ? 'upscaler' : 'vae';
+                    moveManager.showMoveModal(this.currentCard.dataset.filepath, otherType);
+                }
+                break;
+            case 'exclude':
+                showExcludeModal(this.currentCard.dataset.filepath);
+                break;
+        }
+    }
+}
+
+// Mix in shared methods
+Object.assign(MiscContextMenu.prototype, ModelContextMenuMixin);

static/js/components/ContextMenu/index.js

@@ -2,6 +2,7 @@ export { LoraContextMenu } from './LoraContextMenu.js';
 export { RecipeContextMenu } from './RecipeContextMenu.js';
 export { CheckpointContextMenu } from './CheckpointContextMenu.js';
 export { EmbeddingContextMenu } from './EmbeddingContextMenu.js';
+export { MiscContextMenu } from './MiscContextMenu.js';
 export { GlobalContextMenu } from './GlobalContextMenu.js';
 export { ModelContextMenuMixin } from './ModelContextMenuMixin.js';
 
@@ -9,6 +10,7 @@ import { LoraContextMenu } from './LoraContextMenu.js';
 import { RecipeContextMenu } from './RecipeContextMenu.js';
 import { CheckpointContextMenu } from './CheckpointContextMenu.js';
 import { EmbeddingContextMenu } from './EmbeddingContextMenu.js';
+import { MiscContextMenu } from './MiscContextMenu.js';
 import { GlobalContextMenu } from './GlobalContextMenu.js';
 
 // Factory method to create page-specific context menu instances
@@ -22,6 +24,8 @@ export function createPageContextMenu(pageType) {
             return new CheckpointContextMenu();
         case 'embeddings':
             return new EmbeddingContextMenu();
+        case 'misc':
+            return new MiscContextMenu();
         default:
             return null;
     }

static/js/components/Header.js

@@ -32,6 +32,7 @@ export class HeaderManager {
       if (path.includes('/checkpoints')) return 'checkpoints';
       if (path.includes('/embeddings')) return 'embeddings';
       if (path.includes('/statistics')) return 'statistics';
+      if (path.includes('/misc')) return 'misc';
       if (path.includes('/loras')) return 'loras';
       return 'unknown';
     }

static/js/components/controls/MiscControls.js

@@ -0,0 +1,119 @@
+// MiscControls.js - Specific implementation for the Misc (VAE/Upscaler) page
+import { PageControls } from './PageControls.js';
+import { getModelApiClient, resetAndReload } from '../../api/modelApiFactory.js';
+import { getSessionItem, removeSessionItem } from '../../utils/storageHelpers.js';
+import { downloadManager } from '../../managers/DownloadManager.js';
+
+/**
+ * MiscControls class - Extends PageControls for Misc-specific functionality
+ */
+export class MiscControls extends PageControls {
+    constructor() {
+        // Initialize with 'misc' page type
+        super('misc');
+
+        // Register API methods specific to the Misc page
+        this.registerMiscAPI();
+
+        // Check for custom filters (e.g., from recipe navigation)
+        this.checkCustomFilters();
+    }
+
+    /**
+     * Register Misc-specific API methods
+     */
+    registerMiscAPI() {
+        const miscAPI = {
+            // Core API functions
+            loadMoreModels: async (resetPage = false, updateFolders = false) => {
+                return await getModelApiClient().loadMoreWithVirtualScroll(resetPage, updateFolders);
+            },
+
+            resetAndReload: async (updateFolders = false) => {
+                return await resetAndReload(updateFolders);
+            },
+
+            refreshModels: async (fullRebuild = false) => {
+                return await getModelApiClient().refreshModels(fullRebuild);
+            },
+
+            // Add fetch from Civitai functionality for misc models
+            fetchFromCivitai: async () => {
+                return await getModelApiClient().fetchCivitaiMetadata();
+            },
+
+            // Add show download modal functionality
+            showDownloadModal: () => {
+                downloadManager.showDownloadModal();
+            },
+
+            toggleBulkMode: () => {
+                if (window.bulkManager) {
+                    window.bulkManager.toggleBulkMode();
+                } else {
+                    console.error('Bulk manager not available');
+                }
+            },
+
+            clearCustomFilter: async () => {
+                await this.clearCustomFilter();
+            }
+        };
+
+        // Register the API
+        this.registerAPI(miscAPI);
+    }
+
+    /**
+     * Check for custom filters sent from other pages (e.g., recipe modal)
+     */
+    checkCustomFilters() {
+        const filterMiscHash = getSessionItem('recipe_to_misc_filterHash');
+        const filterRecipeName = getSessionItem('filterMiscRecipeName');
+
+        if (filterMiscHash && filterRecipeName) {
+            const indicator = document.getElementById('customFilterIndicator');
+            const filterText = indicator?.querySelector('.customFilterText');
+
+            if (indicator && filterText) {
+                indicator.classList.remove('hidden');
+
+                const displayText = `Viewing misc model from: ${filterRecipeName}`;
+                filterText.textContent = this._truncateText(displayText, 30);
+                filterText.setAttribute('title', displayText);
+
+                const filterElement = indicator.querySelector('.filter-active');
+                if (filterElement) {
+                    filterElement.classList.add('animate');
+                    setTimeout(() => filterElement.classList.remove('animate'), 600);
+                }
+            }
+        }
+    }
+
+    /**
+     * Clear misc custom filter and reload
+     */
+    async clearCustomFilter() {
+        removeSessionItem('recipe_to_misc_filterHash');
+        removeSessionItem('recipe_to_misc_filterHashes');
+        removeSessionItem('filterMiscRecipeName');
+
+        const indicator = document.getElementById('customFilterIndicator');
+        if (indicator) {
+            indicator.classList.add('hidden');
+        }
+
+        await resetAndReload();
+    }
+
+    /**
+     * Helper to truncate text with ellipsis
+     * @param {string} text
+     * @param {number} maxLength
+     * @returns {string}
+     */
+    _truncateText(text, maxLength) {
+        return text.length > maxLength ? `${text.substring(0, maxLength - 3)}...` : text;
+    }
+}

static/js/components/controls/index.js

@@ -3,13 +3,14 @@ import { PageControls } from './PageControls.js';
 import { LorasControls } from './LorasControls.js';
 import { CheckpointsControls } from './CheckpointsControls.js';
 import { EmbeddingsControls } from './EmbeddingsControls.js';
+import { MiscControls } from './MiscControls.js';
 
 // Export the classes
-export { PageControls, LorasControls, CheckpointsControls, EmbeddingsControls };
+export { PageControls, LorasControls, CheckpointsControls, EmbeddingsControls, MiscControls };
 
 /**
  * Factory function to create the appropriate controls based on page type
- * @param {string} pageType - The type of page ('loras', 'checkpoints', or 'embeddings')
+ * @param {string} pageType - The type of page ('loras', 'checkpoints', 'embeddings', or 'misc')
  * @returns {PageControls} - The appropriate controls instance
  */
 export function createPageControls(pageType) {
@@ -19,6 +20,8 @@ export function createPageControls(pageType) {
         return new CheckpointsControls();
     } else if (pageType === 'embeddings') {
         return new EmbeddingsControls();
+    } else if (pageType === 'misc') {
+        return new MiscControls();
     } else {
         console.error(`Unknown page type: ${pageType}`);
         return null;

static/js/components/shared/ModelCard.js

@@ -214,6 +214,52 @@ function handleSendToWorkflow(card, replaceMode, modelType) {
             missingNodesMessage,
             missingTargetMessage,
         });
+    } else if (modelType === MODEL_TYPES.MISC) {
+        const modelPath = card.dataset.filepath;
+        if (!modelPath) {
+            const message = translate('modelCard.sendToWorkflow.missingPath', {}, 'Unable to determine model path for this card');
+            showToast(message, {}, 'error');
+            return;
+        }
+
+        const subtype = (card.dataset.sub_type || 'vae').toLowerCase();
+        const isVae = subtype === 'vae';
+        const widgetName = isVae ? 'vae_name' : 'model_name';
+        const actionTypeText = translate(
+            isVae ? 'uiHelpers.nodeSelector.vae' : 'uiHelpers.nodeSelector.upscaler',
+            {},
+            isVae ? 'VAE' : 'Upscaler'
+        );
+        const successMessage = translate(
+            isVae ? 'uiHelpers.workflow.vaeUpdated' : 'uiHelpers.workflow.upscalerUpdated',
+            {},
+            isVae ? 'VAE updated in workflow' : 'Upscaler updated in workflow'
+        );
+        const failureMessage = translate(
+            isVae ? 'uiHelpers.workflow.vaeFailed' : 'uiHelpers.workflow.upscalerFailed',
+            {},
+            isVae ? 'Failed to update VAE node' : 'Failed to update upscaler node'
+        );
+        const missingNodesMessage = translate(
+            'uiHelpers.workflow.noMatchingNodes',
+            {},
+            'No compatible nodes available in the current workflow'
+        );
+        const missingTargetMessage = translate(
+            'uiHelpers.workflow.noTargetNodeSelected',
+            {},
+            'No target node selected'
+        );
+
+        sendModelPathToWorkflow(modelPath, {
+            widgetName,
+            collectionType: MODEL_TYPES.MISC,
+            actionTypeText,
+            successMessage,
+            failureMessage,
+            missingNodesMessage,
+            missingTargetMessage,
+        });
     } else {
         showToast('modelCard.sendToWorkflow.checkpointNotImplemented', {}, 'info');
     }
@@ -230,6 +276,10 @@ function handleCopyAction(card, modelType) {
     } else if (modelType === MODEL_TYPES.EMBEDDING) {
         const embeddingName = card.dataset.file_name;
         copyToClipboard(embeddingName, 'Embedding name copied');
+    } else if (modelType === MODEL_TYPES.MISC) {
+        const miscName = card.dataset.file_name;
+        const message = translate('modelCard.actions.miscNameCopied', {}, 'Model name copied');
+        copyToClipboard(miscName, message);
     }
 }