fix(civitai): support civitai.red URLs (#897)

static/js/components/ContextMenu/ModelContextMenuMixin.js

@@ -6,6 +6,7 @@ import { bulkManager } from '../../managers/BulkManager.js';
 import { MODEL_CONFIG } from '../../api/apiConfig.js';
 import { translate } from '../../utils/i18nHelpers.js';
 import { getNsfwLevelSelector } from '../shared/NsfwLevelSelector.js';
+import { extractCivitaiModelUrlParts } from '../../utils/civitaiUtils.js';
 
 // Mixin with shared functionality for LoraContextMenu and CheckpointContextMenu
 export const ModelContextMenuMixin = {
@@ -154,25 +155,7 @@ export const ModelContextMenuMixin = {
     },
 
     extractModelVersionId(url) {
-        try {
-            // Handle all three URL formats:
-            // 1. https://civitai.com/models/649516
-            // 2. https://civitai.com/models/649516?modelVersionId=726676
-            // 3. https://civitai.com/models/649516/cynthia-pokemon-diamond-and-pearl-pdxl-lora?modelVersionId=726676
-            
-            const parsedUrl = new URL(url);
-            
-            // Extract model ID from path
-            const pathMatch = parsedUrl.pathname.match(/\/models\/(\d+)/);
-            const modelId = pathMatch ? pathMatch[1] : null;
-            
-            // Extract model version ID from query parameters
-            const modelVersionId = parsedUrl.searchParams.get('modelVersionId');
-            
-            return { modelId, modelVersionId };
-        } catch (e) {
-            return { modelId: null, modelVersionId: null };
-        }
+        return extractCivitaiModelUrlParts(url);
     },
 
     parseModelId(value) {

static/js/managers/DownloadManager.js

@@ -6,6 +6,7 @@ import { getModelApiClient, resetAndReload } from '../api/modelApiFactory.js';
 import { getStorageItem, setStorageItem } from '../utils/storageHelpers.js';
 import { FolderTreeManager } from '../components/FolderTreeManager.js';
 import { translate } from '../utils/i18nHelpers.js';
+import { extractCivitaiModelUrlParts } from '../utils/civitaiUtils.js';
 
 export class DownloadManager {
     constructor() {
@@ -197,21 +198,22 @@ export class DownloadManager {
     }
 
     extractModelId(url) {
-        const versionMatch = url.match(/modelVersionId=(\d+)/i);
-        this.modelVersionId = versionMatch ? versionMatch[1] : null;
-
         const civarchiveMatch = url.match(/https?:\/\/(?:www\.)?(?:civitaiarchive|civarchive)\.com\/models\/(\d+)/i);
         if (civarchiveMatch) {
+            const versionMatch = url.match(/modelVersionId=(\d+)/i);
+            this.modelVersionId = versionMatch ? versionMatch[1] : null;
             this.source = 'civarchive';
             return civarchiveMatch[1];
         }
 
-        const civitaiMatch = url.match(/https?:\/\/(?:www\.)?civitai\.com\/models\/(\d+)/i);
-        if (civitaiMatch) {
+        const { modelId, modelVersionId } = extractCivitaiModelUrlParts(url);
+        if (modelId) {
+            this.modelVersionId = modelVersionId;
             this.source = null;
-            return civitaiMatch[1];
+            return modelId;
         }
 
+        this.modelVersionId = null;
         this.source = null;
         return null;
     }

static/js/utils/civitaiUtils.js

@@ -13,6 +13,11 @@ export const OptimizationMode = {
     THUMBNAIL: 'thumbnail',
 };
 
+const SUPPORTED_CIVITAI_PAGE_HOSTS = new Set([
+    'civitai.com',
+    'civitai.red',
+]);
+
 /**
  * Rewrite Civitai preview URLs to use optimized renditions.
  * Mirrors the backend's rewrite_preview_url() function from py/utils/civitai_utils.py
@@ -119,3 +124,50 @@ export function isCivitaiUrl(url) {
         return false;
     }
 }
+
+export function isSupportedCivitaiPageHost(hostname) {
+    if (!hostname) {
+        return false;
+    }
+
+    return SUPPORTED_CIVITAI_PAGE_HOSTS.has(hostname.toLowerCase());
+}
+
+export function extractCivitaiModelUrlParts(url) {
+    if (!url) {
+        return { modelId: null, modelVersionId: null };
+    }
+
+    try {
+        const parsedUrl = new URL(url);
+        if (!isSupportedCivitaiPageHost(parsedUrl.hostname)) {
+            return { modelId: null, modelVersionId: null };
+        }
+
+        const pathMatch = parsedUrl.pathname.match(/\/models\/(\d+)/);
+        const modelId = pathMatch ? pathMatch[1] : null;
+        const modelVersionId = parsedUrl.searchParams.get('modelVersionId');
+
+        return { modelId, modelVersionId };
+    } catch (e) {
+        return { modelId: null, modelVersionId: null };
+    }
+}
+
+export function extractCivitaiImageId(url) {
+    if (!url) {
+        return null;
+    }
+
+    try {
+        const parsedUrl = new URL(url);
+        if (!isSupportedCivitaiPageHost(parsedUrl.hostname)) {
+            return null;
+        }
+
+        const pathMatch = parsedUrl.pathname.match(/\/images\/(\d+)/);
+        return pathMatch ? pathMatch[1] : null;
+    } catch (e) {
+        return null;
+    }
+}