${nsfwText}
- - `; - - // Add click event to the show button - const showBtn = warningContent.querySelector('.show-content-btn'); - showBtn.addEventListener('click', (e) => { - e.stopPropagation(); - previewContainer.classList.remove('blurred'); - nsfwOverlay.style.display = 'none'; - - // Update toggle button icon if it exists - const toggleBtn = card.querySelector('.toggle-blur-btn'); - if (toggleBtn) { - toggleBtn.querySelector('i').className = 'fas fa-eye-slash'; - } - }); - - nsfwOverlay.appendChild(warningContent); - previewContainer.appendChild(nsfwOverlay); - } else { - // Update existing overlay - const warningText = nsfwOverlay.querySelector('p'); - if (warningText) { - let nsfwText = "Mature Content"; - if (level >= NSFW_LEVELS.XXX) { - nsfwText = "XXX-rated Content"; - } else if (level >= NSFW_LEVELS.X) { - nsfwText = "X-rated Content"; - } else if (level >= NSFW_LEVELS.R) { - nsfwText = "R-rated Content"; - } - warningText.textContent = nsfwText; - } - nsfwOverlay.style.display = 'flex'; - } - - // Get or create the toggle button in the header - const cardHeader = previewContainer.querySelector('.card-header'); - if (cardHeader) { - let toggleBtn = cardHeader.querySelector('.toggle-blur-btn'); - - if (!toggleBtn) { - toggleBtn = document.createElement('button'); - toggleBtn.className = 'toggle-blur-btn'; - toggleBtn.title = 'Toggle blur'; - toggleBtn.innerHTML = ''; - - // Add click event to toggle button - toggleBtn.addEventListener('click', (e) => { - e.stopPropagation(); - const isBlurred = previewContainer.classList.toggle('blurred'); - const icon = toggleBtn.querySelector('i'); - - // Update icon and overlay visibility - if (isBlurred) { - icon.className = 'fas fa-eye'; - nsfwOverlay.style.display = 'flex'; - } else { - icon.className = 'fas fa-eye-slash'; - nsfwOverlay.style.display = 'none'; - } - }); - - // Add to the beginning of header - cardHeader.insertBefore(toggleBtn, cardHeader.firstChild); - - // Update base model label class - const baseModelLabel = cardHeader.querySelector('.base-model-label'); - if (baseModelLabel && !baseModelLabel.classList.contains('with-toggle')) { - baseModelLabel.classList.add('with-toggle'); - } - } else { - // Update existing toggle button - toggleBtn.querySelector('i').className = 'fas fa-eye'; - } - } - } else { - // Remove blur - previewContainer.classList.remove('blurred'); - - // Hide overlay if it exists - const overlay = previewContainer.querySelector('.nsfw-overlay'); - if (overlay) overlay.style.display = 'none'; - - // Update or remove toggle button - const toggleBtn = card.querySelector('.toggle-blur-btn'); - if (toggleBtn) { - // We'll leave the button but update the icon - toggleBtn.querySelector('i').className = 'fas fa-eye-slash'; - } - } - } - - showNSFWLevelSelector(x, y, card) { - const selector = document.getElementById('nsfwLevelSelector'); - const currentLevelEl = document.getElementById('currentNSFWLevel'); - - // Get current NSFW level - let currentLevel = 0; - try { - const metaData = JSON.parse(card.dataset.meta || '{}'); - currentLevel = metaData.preview_nsfw_level || 0; - - // Update if we have no recorded level but have a dataset attribute - if (!currentLevel && card.dataset.nsfwLevel) { - currentLevel = parseInt(card.dataset.nsfwLevel) || 0; - } - } catch (err) { - console.error('Error parsing metadata:', err); - } - - currentLevelEl.textContent = getNSFWLevelName(currentLevel); - - // Position the selector - if (x && y) { - const viewportWidth = document.documentElement.clientWidth; - const viewportHeight = document.documentElement.clientHeight; - const selectorRect = selector.getBoundingClientRect(); - - // Center the selector if no coordinates provided - let finalX = (viewportWidth - selectorRect.width) / 2; - let finalY = (viewportHeight - selectorRect.height) / 2; - - selector.style.left = `${finalX}px`; - selector.style.top = `${finalY}px`; - } - - // Highlight current level button - document.querySelectorAll('.nsfw-level-btn').forEach(btn => { - if (parseInt(btn.dataset.level) === currentLevel) { - btn.classList.add('active'); - } else { - btn.classList.remove('active'); - } - }); - - // Store reference to current card - selector.dataset.cardPath = card.dataset.filepath; - - // Show selector - selector.style.display = 'block'; - } - - showMenu(x, y, card) { - this.currentCard = card; - this.menu.style.display = 'block'; - - // 获取菜单尺寸 - const menuRect = this.menu.getBoundingClientRect(); - - // 获取视口尺寸 - const viewportWidth = document.documentElement.clientWidth; - const viewportHeight = document.documentElement.clientHeight; - - // 计算最终位置 - 使用 clientX/Y，不需要考虑滚动偏移 - let finalX = x; - let finalY = y; - - // 确保菜单不会超出右侧边界 - if (x + menuRect.width > viewportWidth) { - finalX = x - menuRect.width; - } - - // 确保菜单不会超出底部边界 - if (y + menuRect.height > viewportHeight) { - finalY = y - menuRect.height; - } - - // 直接设置位置，因为 position: fixed 是相对于视口定位的 - this.menu.style.left = `${finalX}px`; - this.menu.style.top = `${finalY}px`; - } - - hideMenu() { - this.menu.style.display = 'none'; - this.currentCard = null; - } -} - -// For backward compatibility, re-export the LoraContextMenu class -// export { LoraContextMenu } from './ContextMenu/LoraContextMenu.js'; \ No newline at end of file diff --git a/static/js/components/ContextMenu/CheckpointContextMenu.js b/static/js/components/ContextMenu/CheckpointContextMenu.js index 0945901f..3ed3af0f 100644 --- a/static/js/components/ContextMenu/CheckpointContextMenu.js +++ b/static/js/components/ContextMenu/CheckpointContextMenu.js @@ -4,6 +4,9 @@ import { showToast, getNSFWLevelName, openExampleImagesFolder } from '../../util import { NSFW_LEVELS } from '../../utils/constants.js'; import { getStorageItem } from '../../utils/storageHelpers.js'; import { showExcludeModal } from '../../utils/modalUtils.js'; +import { modalManager } from '../../managers/ModalManager.js'; +import { state } from '../../state/index.js'; +import { resetAndReload } from '../../api/checkpointApi.js'; export class CheckpointContextMenu extends BaseContextMenu { constructor() { @@ -56,6 +59,10 @@ export class CheckpointContextMenu extends BaseContextMenu { // Refresh metadata from CivitAI refreshSingleCheckpointMetadata(this.currentCard.dataset.filepath); break; + case 'relink-civitai': + // Handle re-link to Civitai + this.showRelinkCivitaiModal(); + break; case 'set-nsfw': // Set NSFW level this.showNSFWLevelSelector(null, null, this.currentCard); @@ -319,4 +326,87 @@ export class CheckpointContextMenu extends BaseContextMenu { // Show selector selector.style.display = 'block'; } + + showRelinkCivitaiModal() { + const filePath = this.currentCard.dataset.filepath; + if (!filePath) return; + + // Set up confirm button handler + const confirmBtn = document.getElementById('confirmRelinkBtn'); + const urlInput = document.getElementById('civitaiModelUrl'); + const errorDiv = document.getElementById('civitaiModelUrlError'); + + // Remove previous event listener if exists + if (this._boundRelinkHandler) { + confirmBtn.removeEventListener('click', this._boundRelinkHandler); + } + + // Create new bound handler + this._boundRelinkHandler = async () => { + const url = urlInput.value.trim(); + const modelVersionId = this.extractModelVersionId(url); + + if (!modelVersionId) { + errorDiv.textContent = 'Invalid URL format. Must include modelVersionId parameter.'; + return; + } + + errorDiv.textContent = ''; + modalManager.closeModal('relinkCivitaiModal'); + + try { + state.loadingManager.showSimpleLoading('Re-linking to Civitai...'); + + const response = await fetch('/api/checkpoints/relink-civitai', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + file_path: filePath, + model_version_id: modelVersionId + }) + }); + + if (!response.ok) { + throw new Error(`Failed to re-link model: ${response.statusText}`); + } + + const data = await response.json(); + + if (data.success) { + showToast('Model successfully re-linked to Civitai', 'success'); + // Reload the current view to show updated data + await resetAndReload(); + } else { + throw new Error(data.error || 'Failed to re-link model'); + } + } catch (error) { + console.error('Error re-linking model:', error); + showToast(`Error: ${error.message}`, 'error'); + } finally { + state.loadingManager.hide(); + } + }; + + // Set new event listener + confirmBtn.addEventListener('click', this._boundRelinkHandler); + + // Clear previous input + urlInput.value = ''; + errorDiv.textContent = ''; + + // Show modal + modalManager.showModal('relinkCivitaiModal'); + } + + extractModelVersionId(url) { + try { + const parsedUrl = new URL(url); + const modelVersionId = parsedUrl.searchParams.get('modelVersionId'); + return modelVersionId; + } catch (e) { + return null; + } + } } \ No newline at end of file diff --git a/static/js/components/ContextMenu/LoraContextMenu.js b/static/js/components/ContextMenu/LoraContextMenu.js index c2cdbc8e..540b6c7f 100644 --- a/static/js/components/ContextMenu/LoraContextMenu.js +++ b/static/js/components/ContextMenu/LoraContextMenu.js @@ -1,9 +1,11 @@ import { BaseContextMenu } from './BaseContextMenu.js'; -import { refreshSingleLoraMetadata, saveModelMetadata, replacePreview } from '../../api/loraApi.js'; +import { refreshSingleLoraMetadata, saveModelMetadata, replacePreview, resetAndReload } from '../../api/loraApi.js'; import { showToast, getNSFWLevelName, copyToClipboard, sendLoraToWorkflow, openExampleImagesFolder } from '../../utils/uiHelpers.js'; import { NSFW_LEVELS } from '../../utils/constants.js'; import { getStorageItem } from '../../utils/storageHelpers.js'; import { showExcludeModal, showDeleteModal } from '../../utils/modalUtils.js'; +import { modalManager } from '../../managers/ModalManager.js'; +import { state } from '../../state/index.js'; export class LoraContextMenu extends BaseContextMenu { constructor() { @@ -64,6 +66,9 @@ export class LoraContextMenu extends BaseContextMenu { case 'refresh-metadata': refreshSingleLoraMetadata(this.currentCard.dataset.filepath); break; + case 'relink-civitai': + this.showRelinkCivitaiModal(); + break; case 'set-nsfw': this.showNSFWLevelSelector(null, null, this.currentCard); break; @@ -93,6 +98,90 @@ export class LoraContextMenu extends BaseContextMenu { sendLoraToWorkflow(loraSyntax, replaceMode, 'lora'); } + // New method to handle re-link to Civitai + showRelinkCivitaiModal() { + const filePath = this.currentCard.dataset.filepath; + if (!filePath) return; + + // Set up confirm button handler + const confirmBtn = document.getElementById('confirmRelinkBtn'); + const urlInput = document.getElementById('civitaiModelUrl'); + const errorDiv = document.getElementById('civitaiModelUrlError'); + + // Remove previous event listener if exists + if (this._boundRelinkHandler) { + confirmBtn.removeEventListener('click', this._boundRelinkHandler); + } + + // Create new bound handler + this._boundRelinkHandler = async () => { + const url = urlInput.value.trim(); + const modelVersionId = this.extractModelVersionId(url); + + if (!modelVersionId) { + errorDiv.textContent = 'Invalid URL format. Must include modelVersionId parameter.'; + return; + } + + errorDiv.textContent = ''; + modalManager.closeModal('relinkCivitaiModal'); + + try { + state.loadingManager.showSimpleLoading('Re-linking to Civitai...'); + + const response = await fetch('/api/relink-civitai', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + file_path: filePath, + model_version_id: modelVersionId + }) + }); + + if (!response.ok) { + throw new Error(`Failed to re-link model: ${response.statusText}`); + } + + const data = await response.json(); + + if (data.success) { + showToast('Model successfully re-linked to Civitai', 'success'); + // Reload the current view to show updated data + await resetAndReload(); + } else { + throw new Error(data.error || 'Failed to re-link model'); + } + } catch (error) { + console.error('Error re-linking model:', error); + showToast(`Error: ${error.message}`, 'error'); + } finally { + state.loadingManager.hide(); + } + }; + + // Set new event listener + confirmBtn.addEventListener('click', this._boundRelinkHandler); + + // Clear previous input + urlInput.value = ''; + errorDiv.textContent = ''; + + // Show modal + modalManager.showModal('relinkCivitaiModal'); + } + + extractModelVersionId(url) { + try { + const parsedUrl = new URL(url); + const modelVersionId = parsedUrl.searchParams.get('modelVersionId'); + return modelVersionId; + } catch (e) { + return null; + } + } + // NSFW Selector methods from the original context menu initNSFWSelector() { // Close button diff --git a/static/js/managers/ModalManager.js b/static/js/managers/ModalManager.js index d4ed36af..2785d558 100644 --- a/static/js/managers/ModalManager.js +++ b/static/js/managers/ModalManager.js @@ -221,6 +221,19 @@ export class ModalManager { }); } + // Add relinkCivitaiModal registration + const relinkCivitaiModal = document.getElementById('relinkCivitaiModal'); + if (relinkCivitaiModal) { + this.registerModal('relinkCivitaiModal', { + element: relinkCivitaiModal, + onClose: () => { + this.getModal('relinkCivitaiModal').element.style.display = 'none'; + document.body.classList.remove('modal-open'); + }, + closeOnOutsideClick: true + }); + } + document.addEventListener('keydown', this.boundHandleEscape); this.initialized = true; } diff --git a/templates/checkpoints.html b/templates/checkpoints.html index e8ebce2d..547bd09b 100644 --- a/templates/checkpoints.html +++ b/templates/checkpoints.html @@ -18,6 +18,7 @@ + diff --git a/templates/components/context_menu.html b/templates/components/context_menu.html index 8f600a4d..8c74758d 100644 --- a/templates/components/context_menu.html +++ b/templates/components/context_menu.html @@ -8,6 +8,9 @@ + diff --git a/templates/components/modals.html b/templates/components/modals.html index 69fee159..c9600ab1 100644 --- a/templates/components/modals.html +++ b/templates/components/modals.html @@ -571,4 +571,34 @@ + + + +