feat(frontend): add Other Models page with subtype filter and badges

static/js/utils/activeFiltersSync.js

@@ -53,7 +53,7 @@ export function syncActiveFilters(pageType) {
  * Register the storage listener and push the current (restored) state once.
  * The initial push covers server restarts, where the backend store is empty
  * until the manager page re-publishes its localStorage-restored filters.
- * @param {string} pageType - 'loras' | 'checkpoints' | 'embeddings'
+ * @param {string} pageType - 'loras' | 'checkpoints' | 'embeddings' | 'other'
  */
 export function initActiveFiltersSync(pageType) {
     setActiveFiltersListener((changedPageType) => syncActiveFilters(changedPageType));

static/js/utils/constants.js

@@ -106,6 +106,12 @@ export const MODEL_SUBTYPE_DISPLAY_NAMES = {
     diffusion_model: "Diffusion Model",
     // Embedding sub-types
     embedding: "Embedding",
+    // Other model sub-types
+    vae: "VAE",
+    upscaler: "Upscaler",
+    text_encoder: "Text Encoder",
+    clip_vision: "CLIP Vision",
+    controlnet: "ControlNet",
 };
 
 // Backward compatibility alias
@@ -119,6 +125,11 @@ export const MODEL_SUBTYPE_ABBREVIATIONS = {
     checkpoint: "CKPT",
     diffusion_model: "DM",
     embedding: "EMB",
+    vae: "VAE",
+    upscaler: "UPS",
+    text_encoder: "TE",
+    clip_vision: "CV",
+    controlnet: "CN",
 };
 
 export function getSubTypeAbbreviation(subType) {

static/js/utils/infiniteScroll.js

@@ -66,7 +66,7 @@ async function getCardCreator(pageType) {
 
 // Function to get the appropriate data fetcher based on page type
 async function getDataFetcher(pageType) {
-    if (pageType === 'loras' || pageType === 'embeddings' || pageType === 'checkpoints') {
+    if (pageType === 'loras' || pageType === 'embeddings' || pageType === 'checkpoints' || pageType === 'other') {
         return (page = 1, pageSize = 100) => getModelApiClient().fetchModelsPage(page, pageSize);
     } else if (pageType === 'recipes') {
         // Import the recipeApi module and use the fetchRecipesPage function

static/js/utils/storageHelpers.js

@@ -8,7 +8,7 @@ const STORAGE_PREFIX = 'lora_manager_';
 
 // Matches keys that carry the manager page's active filter state
 // (e.g. 'loras_activeFolder', 'checkpoints_filters').
-const ACTIVE_FILTER_KEY_PATTERN = /^(loras|checkpoints|embeddings)_(activeFolder|recursiveSearch|filters)$/;
+const ACTIVE_FILTER_KEY_PATTERN = /^(loras|checkpoints|embeddings|other)_(activeFolder|recursiveSearch|filters)$/;
 
 let activeFiltersListener = null;