+ })
+
+
+
+
+
+
+ + ${escapeHtml(recipe.title || 'Untitled recipe')} +
+ +
+ View details
+
+
+
+
`;
}
@@ -171,13 +197,194 @@ export class Showcase {
this.deleteExample();
break;
case 'add-example':
- this.showUploadArea();
+ case 'toggle-upload':
+ this.toggleUploadArea();
+ break;
+ case 'cancel-upload':
+ this.hideUploadArea();
break;
case 'copy-prompt':
this.copyPrompt();
break;
}
});
+
+ // File input change
+ const fileInput = this.element.querySelector('.upload-area__input');
+ if (fileInput) {
+ fileInput.addEventListener('change', (e) => {
+ this.handleFileSelect(e.target.files);
+ });
+ }
+
+ // Drag and drop
+ const dropzone = this.element.querySelector('.upload-area__dropzone');
+ if (dropzone) {
+ dropzone.addEventListener('dragover', (e) => {
+ e.preventDefault();
+ dropzone.classList.add('dragover');
+ });
+
+ dropzone.addEventListener('dragleave', () => {
+ dropzone.classList.remove('dragover');
+ });
+
+ dropzone.addEventListener('drop', (e) => {
+ e.preventDefault();
+ dropzone.classList.remove('dragover');
+ this.handleFileSelect(e.dataTransfer.files);
+ });
+
+ dropzone.addEventListener('click', () => {
+ fileInput?.click();
+ });
+ }
+ }
+
+ /**
+ * Toggle upload area visibility
+ */
+ toggleUploadArea() {
+ this.uploadAreaVisible = !this.uploadAreaVisible;
+ const uploadArea = this.element.querySelector('.upload-area');
+ if (uploadArea) {
+ uploadArea.classList.toggle('visible', this.uploadAreaVisible);
+ }
+ }
+
+ /**
+ * Hide upload area
+ */
+ hideUploadArea() {
+ this.uploadAreaVisible = false;
+ const uploadArea = this.element.querySelector('.upload-area');
+ if (uploadArea) {
+ uploadArea.classList.remove('visible');
+ }
+ }
+
+ /**
+ * Handle file selection
+ */
+ async handleFileSelect(files) {
+ if (!files || files.length === 0) return;
+ if (this.isUploading) return;
+
+ this.isUploading = true;
+
+ const uploadArea = this.element.querySelector('.upload-area');
+ const dropzone = this.element.querySelector('.upload-area__dropzone');
+
+ // Show loading state
+ if (dropzone) {
+ dropzone.innerHTML = `
+
+
+
+
+
+
+
+ ${translate('modals.model.examples.dropFiles', {}, 'Drop files here or click to browse')}
+${translate('modals.model.examples.supportedFormats', {}, 'Supports: JPG, PNG, WEBP, MP4, WEBM')}
+
+
+
+
+
+
+ `;
+ }
+
+ try {
+ for (const file of files) {
+ await this.uploadFile(file);
+ }
+
+ showToast('modals.model.examples.uploadSuccess', {}, 'success');
+ this.hideUploadArea();
+
+ // Refresh the showcase by reloading model data
+ this.refreshShowcase();
+ } catch (error) {
+ console.error('Failed to upload file:', error);
+ showToast('modals.model.examples.uploadFailed', {}, 'error');
+
+ // Reset dropzone
+ if (dropzone) {
+ dropzone.innerHTML = `
+
+ ${translate('modals.model.examples.uploading', {}, 'Uploading...')}
+
+
+
+ `;
+ }
+ } finally {
+ this.isUploading = false;
+ }
+ }
+
+ /**
+ * Upload a single file
+ */
+ async uploadFile(file) {
+ if (!this.filePath) {
+ throw new Error('No file path available');
+ }
+
+ // Check file type
+ const allowedTypes = ['image/jpeg', 'image/png', 'image/webp', 'image/jpg', 'video/mp4', 'video/webm'];
+ if (!allowedTypes.includes(file.type)) {
+ throw new Error(`Unsupported file type: ${file.type}`);
+ }
+
+ // Check file size (100MB limit)
+ const maxSize = 100 * 1024 * 1024;
+ if (file.size > maxSize) {
+ throw new Error('File too large (max 100MB)');
+ }
+
+ const formData = new FormData();
+ formData.append('file', file);
+ formData.append('model_path', this.filePath);
+
+ const response = await fetch('/api/lm/upload-example', {
+ method: 'POST',
+ body: formData
+ });
+
+ if (!response.ok) {
+ const error = await response.json().catch(() => ({}));
+ throw new Error(error.error || 'Upload failed');
+ }
+
+ return response.json();
+ }
+
+ /**
+ * Refresh showcase after upload
+ */
+ async refreshShowcase() {
+ if (!this.filePath) return;
+
+ try {
+ const client = getModelApiClient();
+ const metadata = await client.fetchModelMetadata(this.filePath);
+
+ if (metadata) {
+ const regularImages = metadata.images || [];
+ const customImages = metadata.customImages || [];
+ const allImages = [...regularImages, ...customImages];
+
+ this.images = allImages;
+ this.currentIndex = allImages.length - 1;
+
+ // Re-render
+ this.render({ images: allImages, modelHash: this.modelHash, filePath: this.filePath });
+
+ // Load the newly uploaded image
+ if (this.currentIndex >= 0) {
+ this.loadImage(this.currentIndex);
+ }
+ }
+ } catch (error) {
+ console.error('Failed to refresh showcase:', error);
+ }
}
/**
@@ -339,7 +546,6 @@ export class Showcase {
try {
await navigator.clipboard.writeText(prompt);
- const { showToast } = await import('../../utils/uiHelpers.js');
showToast('modals.model.params.promptCopied', {}, 'success');
} catch (err) {
console.error('Failed to copy prompt:', err);
@@ -356,14 +562,12 @@ export class Showcase {
const url = image.url || image;
try {
- const { getModelApiClient } = await import('../../api/modelApiFactory.js');
- await getModelApiClient().setModelPreview(this.filePath, url);
+ const client = getModelApiClient();
+ await client.setModelPreview(this.filePath, url);
- const { showToast } = await import('../../utils/uiHelpers.js');
showToast('modals.model.actions.previewSet', {}, 'success');
} catch (err) {
console.error('Failed to set preview:', err);
- const { showToast } = await import('../../utils/uiHelpers.js');
showToast('modals.model.actions.previewFailed', {}, 'error');
}
}
@@ -375,15 +579,45 @@ export class Showcase {
const image = this.images[this.currentIndex];
if (!image || !this.filePath) return;
- // TODO: Implement delete confirmation and API call
- console.log('Delete example:', image);
- }
+ const url = image.url || image;
+ const isCustom = image.isCustom || false;
+
+ // Confirm deletion
+ const confirmed = confirm(translate('modals.model.examples.confirmDelete', {}, 'Delete this example image?'));
+ if (!confirmed) return;
- /**
- * Show upload area for adding new examples
- */
- showUploadArea() {
- // TODO: Implement upload area expansion
- console.log('Show upload area');
+ try {
+ const response = await fetch('/api/lm/delete-example', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ model_path: this.filePath,
+ image_url: url,
+ is_custom: isCustom
+ })
+ });
+
+ if (!response.ok) {
+ throw new Error('Failed to delete example');
+ }
+
+ showToast('modals.model.examples.deleted', {}, 'success');
+
+ // Remove from local array and refresh
+ this.images.splice(this.currentIndex, 1);
+ if (this.currentIndex >= this.images.length) {
+ this.currentIndex = Math.max(0, this.images.length - 1);
+ }
+
+ // Re-render
+ this.render({ images: this.images, modelHash: this.modelHash, filePath: this.filePath });
+
+ if (this.images.length > 0) {
+ this.loadImage(this.currentIndex);
+ }
+ } catch (err) {
+ console.error('Failed to delete example:', err);
+ showToast('modals.model.examples.deleteFailed', {}, 'error');
+ }
}
}
diff --git a/static/js/components/model-modal/VersionsTab.js b/static/js/components/model-modal/VersionsTab.js
new file mode 100644
index 00000000..97e91450
--- /dev/null
+++ b/static/js/components/model-modal/VersionsTab.js
@@ -0,0 +1,627 @@
+/**
+ * VersionsTab - Model versions list component
+ * Features:
+ * - Version cards with preview, badges, and actions
+ * - Download/Delete/Ignore actions
+ * - Base model filter toggle
+ * - Reference: static/js/components/shared/ModelVersionsTab.js
+ */
+
+import { escapeHtml, formatFileSize } from '../shared/utils.js';
+import { translate } from '../../utils/i18nHelpers.js';
+import { showToast } from '../../utils/uiHelpers.js';
+import { getModelApiClient } from '../../api/modelApiFactory.js';
+import { downloadManager } from '../../managers/DownloadManager.js';
+import { modalManager } from '../../managers/ModalManager.js';
+
+const VIDEO_EXTENSIONS = ['.mp4', '.webm', '.mov', '.mkv'];
+const PREVIEW_PLACEHOLDER_URL = '/loras_static/images/no-preview.png';
+
+const DISPLAY_FILTER_MODES = Object.freeze({
+ SAME_BASE: 'same_base',
+ ANY: 'any',
+});
+
+export class VersionsTab {
+ constructor(container) {
+ this.element = container;
+ this.model = null;
+ this.modelType = null;
+ this.versions = [];
+ this.isLoading = false;
+ this.displayMode = DISPLAY_FILTER_MODES.ANY;
+ this.record = null;
+ }
+
+ /**
+ * Render the versions tab
+ */
+ async render({ model, modelType }) {
+ this.model = model;
+ this.modelType = modelType;
+ this.element.innerHTML = this.getLoadingTemplate();
+
+ await this.loadVersions();
+ }
+
+ /**
+ * Get loading template
+ */
+ getLoadingTemplate() {
+ return `
+ ${translate('modals.model.examples.dropFiles', {}, 'Drop files here or click to browse')}
+${translate('modals.model.examples.supportedFormats', {}, 'Supports: JPG, PNG, WEBP, MP4, WEBM')}
+
+
+ ${translate('modals.model.loading.versions', {}, 'Loading versions...')}
+
+ `;
+ }
+
+ /**
+ * Load versions from API
+ */
+ async loadVersions() {
+ const modelId = this.model?.civitai?.modelId;
+
+ if (!modelId) {
+ this.renderError(translate('modals.model.versions.missingModelId', {}, 'This model is missing a Civitai model id.'));
+ return;
+ }
+
+ this.isLoading = true;
+
+ try {
+ const client = getModelApiClient(this.modelType);
+ const response = await client.fetchModelUpdateVersions(modelId, { refresh: false });
+
+ if (!response?.success) {
+ throw new Error(response?.error || 'Failed to load versions');
+ }
+
+ this.record = response.record;
+ this.renderVersions();
+ } catch (error) {
+ console.error('Failed to load versions:', error);
+ this.renderError(error.message);
+ } finally {
+ this.isLoading = false;
+ }
+ }
+
+ /**
+ * Render error state
+ */
+ renderError(message) {
+ this.element.innerHTML = `
+
+
+
+ `;
+ }
+
+ /**
+ * Render empty state
+ */
+ renderEmpty() {
+ this.element.innerHTML = `
+ ${escapeHtml(message || translate('modals.model.versions.error', {}, 'Failed to load versions.'))}
+
+
+
+ `;
+ }
+
+ /**
+ * Render versions list
+ */
+ renderVersions() {
+ if (!this.record || !Array.isArray(this.record.versions) || this.record.versions.length === 0) {
+ this.renderEmpty();
+ return;
+ }
+
+ const currentVersionId = this.model?.civitai?.versionId;
+ const sortedVersions = [...this.record.versions].sort((a, b) => Number(b.versionId) - Number(a.versionId));
+
+ // Filter versions based on display mode
+ const filteredVersions = this.filterVersions(sortedVersions, currentVersionId);
+
+ if (filteredVersions.length === 0) {
+ this.renderFilteredEmpty();
+ return;
+ }
+
+ this.element.innerHTML = `
+ ${this.renderToolbar()}
+ ${translate('modals.model.versions.empty', {}, 'No version history available for this model yet.')}
+
+ ${filteredVersions.map(version => this.renderVersionCard(version, currentVersionId)).join('')}
+
+ `;
+
+ this.bindEvents();
+ }
+
+ /**
+ * Filter versions based on display mode
+ */
+ filterVersions(versions, currentVersionId) {
+ const currentVersion = versions.find(v => v.versionId === currentVersionId);
+ const currentBaseModel = currentVersion?.baseModel;
+
+ if (this.displayMode !== DISPLAY_FILTER_MODES.SAME_BASE || !currentBaseModel) {
+ return versions;
+ }
+
+ return versions.filter(version => {
+ const versionBase = version.baseModel?.toLowerCase().trim();
+ const targetBase = currentBaseModel.toLowerCase().trim();
+ return versionBase === targetBase;
+ });
+ }
+
+ /**
+ * Render filtered empty state
+ */
+ renderFilteredEmpty() {
+ const currentVersion = this.record.versions.find(v => v.versionId === this.model?.civitai?.versionId);
+ const baseModelLabel = currentVersion?.baseModel || translate('modals.model.metadata.unknown', {}, 'Unknown');
+
+ this.element.innerHTML = `
+ ${this.renderToolbar()}
+
+
+
+ `;
+
+ this.bindEvents();
+ }
+
+ /**
+ * Render toolbar with actions
+ */
+ renderToolbar() {
+ const ignoreText = this.record.shouldIgnore
+ ? translate('modals.model.versions.actions.resumeModelUpdates', {}, 'Resume updates for this model')
+ : translate('modals.model.versions.actions.ignoreModelUpdates', {}, 'Ignore updates for this model');
+
+ const isFilteringActive = this.displayMode === DISPLAY_FILTER_MODES.SAME_BASE;
+ const toggleTooltip = isFilteringActive
+ ? translate('modals.model.versions.filters.tooltip.showAllVersions', {}, 'Switch to showing all versions')
+ : translate('modals.model.versions.filters.tooltip.showSameBaseVersions', {}, 'Switch to showing only versions with the current base model');
+
+ return `
+ ${translate('modals.model.versions.filters.empty', { baseModel: baseModelLabel }, 'No versions match the current base model filter.')}
+
+ ${this.renderMedia(version)}
+
+ `;
+ }
+
+ /**
+ * Check if version is newer than any in library
+ */
+ isNewerVersion(version) {
+ if (!this.record?.inLibraryVersionIds?.length) return false;
+ if (version.isInLibrary) return false;
+ const maxInLibrary = Math.max(...this.record.inLibraryVersionIds);
+ return version.versionId > maxInLibrary;
+ }
+
+ /**
+ * Build badges HTML
+ */
+ buildBadges(version, isCurrent, isNewer) {
+ const badges = [];
+
+ if (isCurrent) {
+ badges.push(this.createBadge(
+ translate('modals.model.versions.badges.current', {}, 'Current Version'),
+ 'current'
+ ));
+ }
+
+ if (version.isInLibrary) {
+ badges.push(this.createBadge(
+ translate('modals.model.versions.badges.inLibrary', {}, 'In Library'),
+ 'success'
+ ));
+ } else if (isNewer && !version.shouldIgnore) {
+ badges.push(this.createBadge(
+ translate('modals.model.versions.badges.newer', {}, 'Newer Version'),
+ 'info'
+ ));
+ }
+
+ if (version.shouldIgnore) {
+ badges.push(this.createBadge(
+ translate('modals.model.versions.badges.ignored', {}, 'Ignored'),
+ 'muted'
+ ));
+ }
+
+ return badges.join('');
+ }
+
+ /**
+ * Create a badge element
+ */
+ createBadge(label, tone) {
+ return `${escapeHtml(label)}`;
+ }
+
+ /**
+ * Build actions HTML
+ */
+ buildActions(version) {
+ const actions = [];
+
+ if (!version.isInLibrary) {
+ actions.push(`
+
+ `);
+ } else if (version.filePath) {
+ actions.push(`
+
+ `);
+ }
+
+ const ignoreLabel = version.shouldIgnore
+ ? translate('modals.model.versions.actions.unignore', {}, 'Unignore')
+ : translate('modals.model.versions.actions.ignore', {}, 'Ignore');
+
+ actions.push(`
+
+ `);
+
+ return actions.join('');
+ }
+
+ /**
+ * Render media (image/video)
+ */
+ renderMedia(version) {
+ if (!version.previewUrl) {
+ return `
+
+
+
+ ${escapeHtml(version.name || translate('modals.model.versions.labels.unnamed', {}, 'Untitled Version'))}
+
+ ${badges}
+
+
+ ${actions}
+
+
+ ${escapeHtml(translate('modals.model.versions.media.placeholder', {}, 'No preview'))}
+
+ `;
+ }
+
+ if (this.isVideoUrl(version.previewUrl)) {
+ return `
+
+
+
+ `;
+ }
+
+ return `
+
+ })
+
+ `;
+ }
+
+ /**
+ * Check if URL is a video
+ */
+ isVideoUrl(url) {
+ if (!url) return false;
+ const extension = url.split('.').pop()?.toLowerCase()?.split('?')[0];
+ return VIDEO_EXTENSIONS.includes(`.${extension}`);
+ }
+
+ /**
+ * Build Civitai URL
+ */
+ buildCivitaiUrl(modelId, versionId) {
+ if (!modelId || !versionId) return null;
+ return `https://civitai.com/models/${encodeURIComponent(modelId)}?modelVersionId=${encodeURIComponent(versionId)}`;
+ }
+
+ /**
+ * Bind event listeners
+ */
+ bindEvents() {
+ this.element.addEventListener('click', (e) => {
+ const target = e.target.closest('[data-action]');
+ if (!target) {
+ // Check if clicked on a clickable card
+ const card = e.target.closest('.version-card.is-clickable');
+ if (card && !e.target.closest('.version-actions')) {
+ const url = card.dataset.civitaiUrl;
+ if (url) window.open(url, '_blank', 'noopener,noreferrer');
+ }
+ return;
+ }
+
+ const action = target.dataset.action;
+ const card = target.closest('.version-card');
+ const versionId = card ? parseInt(card.dataset.versionId, 10) : null;
+
+ switch (action) {
+ case 'toggle-filter':
+ this.toggleFilterMode();
+ break;
+ case 'toggle-model-ignore':
+ this.handleToggleModelIgnore();
+ break;
+ case 'download':
+ if (versionId) this.handleDownload(versionId, target);
+ break;
+ case 'delete':
+ if (versionId) this.handleDelete(versionId, target);
+ break;
+ case 'toggle-ignore':
+ if (versionId) this.handleToggleVersionIgnore(versionId, target);
+ break;
+ }
+ });
+ }
+
+ /**
+ * Toggle filter mode
+ */
+ toggleFilterMode() {
+ this.displayMode = this.displayMode === DISPLAY_FILTER_MODES.SAME_BASE
+ ? DISPLAY_FILTER_MODES.ANY
+ : DISPLAY_FILTER_MODES.SAME_BASE;
+ this.renderVersions();
+ }
+
+ /**
+ * Handle toggle model ignore
+ */
+ async handleToggleModelIgnore() {
+ if (!this.record) return;
+
+ const modelId = this.record.modelId;
+ const nextValue = !this.record.shouldIgnore;
+
+ try {
+ const client = getModelApiClient(this.modelType);
+ const response = await client.setModelUpdateIgnore(modelId, nextValue);
+
+ if (!response?.success) {
+ throw new Error(response?.error || 'Request failed');
+ }
+
+ this.record = response.record;
+ this.renderVersions();
+
+ const toastKey = nextValue
+ ? 'modals.model.versions.toast.modelIgnored'
+ : 'modals.model.versions.toast.modelResumed';
+ showToast(toastKey, {}, 'success');
+ } catch (error) {
+ console.error('Failed to toggle model ignore:', error);
+ showToast(error?.message || 'Failed to update ignore preference', {}, 'error');
+ }
+ }
+
+ /**
+ * Handle download version
+ */
+ async handleDownload(versionId, button) {
+ const version = this.record.versions.find(v => v.versionId === versionId);
+ if (!version) return;
+
+ button.disabled = true;
+
+ try {
+ await downloadManager.downloadVersionWithDefaults(
+ this.modelType,
+ this.record.modelId,
+ versionId,
+ { versionName: version.name || `#${versionId}` }
+ );
+
+ // Reload versions after download starts
+ setTimeout(() => this.loadVersions(), 1000);
+ } catch (error) {
+ console.error('Failed to download version:', error);
+ } finally {
+ button.disabled = false;
+ }
+ }
+
+ /**
+ * Handle delete version
+ */
+ async handleDelete(versionId, button) {
+ const version = this.record.versions.find(v => v.versionId === versionId);
+ if (!version?.filePath) return;
+
+ const confirmed = await this.showDeleteConfirmation(version);
+ if (!confirmed) return;
+
+ button.disabled = true;
+
+ try {
+ const client = getModelApiClient(this.modelType);
+ await client.deleteModel(version.filePath);
+
+ showToast('modals.model.versions.toast.versionDeleted', {}, 'success');
+ await this.loadVersions();
+ } catch (error) {
+ console.error('Failed to delete version:', error);
+ showToast(error?.message || 'Failed to delete version', {}, 'error');
+ button.disabled = false;
+ }
+ }
+
+ /**
+ * Show delete confirmation modal
+ */
+ async showDeleteConfirmation(version) {
+ return new Promise((resolve) => {
+ const modalRecord = modalManager?.getModal?.('deleteModal');
+ if (!modalRecord?.element) {
+ // Fallback to browser confirm
+ const message = translate('modals.model.versions.confirm.delete', {}, 'Delete this version from your library?');
+ resolve(window.confirm(message));
+ return;
+ }
+
+ const title = translate('modals.model.versions.actions.delete', {}, 'Delete');
+ const message = translate('modals.model.versions.confirm.delete', {}, 'Delete this version from your library?');
+ const versionName = version.name || translate('modals.model.versions.labels.unnamed', {}, 'Untitled Version');
+
+ const content = `
+
+
+ `;
+
+ modalManager.showModal('deleteModal', content);
+
+ const modalElement = modalRecord.element;
+ const handleAction = (e) => {
+ const action = e.target.closest('[data-action]')?.dataset.action;
+ if (action === 'confirm') {
+ modalManager.closeModal('deleteModal');
+ resolve(true);
+ } else if (action === 'cancel') {
+ modalManager.closeModal('deleteModal');
+ resolve(false);
+ }
+ };
+
+ modalElement.addEventListener('click', handleAction, { once: true });
+ });
+ }
+
+ /**
+ * Handle toggle version ignore
+ */
+ async handleToggleVersionIgnore(versionId, button) {
+ const version = this.record.versions.find(v => v.versionId === versionId);
+ if (!version) return;
+
+ const nextValue = !version.shouldIgnore;
+ button.disabled = true;
+
+ try {
+ const client = getModelApiClient(this.modelType);
+ const response = await client.setVersionUpdateIgnore(
+ this.record.modelId,
+ versionId,
+ nextValue
+ );
+
+ if (!response?.success) {
+ throw new Error(response?.error || 'Request failed');
+ }
+
+ this.record = response.record;
+ this.renderVersions();
+
+ const updatedVersion = response.record.versions.find(v => v.versionId === versionId);
+ const toastKey = updatedVersion?.shouldIgnore
+ ? 'modals.model.versions.toast.versionIgnored'
+ : 'modals.model.versions.toast.versionUnignored';
+ showToast(toastKey, {}, 'success');
+ } catch (error) {
+ console.error('Failed to toggle version ignore:', error);
+ showToast(error?.message || 'Failed to update version preference', {}, 'error');
+ button.disabled = false;
+ }
+ }
+
+ /**
+ * Refresh versions
+ */
+ async refresh() {
+ await this.loadVersions();
+ }
+}
${escapeHtml(title)}
+ +
+
+
+ ${version.previewUrl ? `
+
+ ` : `
`}
+
+
+
+ ${escapeHtml(versionName)}
+ ${version.baseModel ? `${escapeHtml(version.baseModel)}
` : ''} +
+
+
+
+