@@ -99,6 +107,14 @@ export async function showModelModal(model, modelType) {
+
+
${loadingRecipesText}
+
+
` :
`
+
+ ${loadingVersionsText}
+
+
@@ -114,6 +130,14 @@ export async function showModelModal(model, modelType) {
+
+
`;
const content = `
@@ -232,9 +256,22 @@ export async function showModelModal(model, modelType) {
};
modalManager.showModal(modalId, content, null, onCloseCallback);
+ const versionsTabController = initVersionsTab({
+ modalId,
+ modelType,
+ modelId: civitaiModelId,
+ currentVersionId: civitaiVersionId,
+ });
setupEditableFields(modelWithFullData.file_path, modelType);
setupShowcaseScroll(modalId);
- setupTabSwitching();
+ setupTabSwitching({
+ onTabChange: async (tab) => {
+ if (tab === 'versions') {
+ await versionsTabController.load();
+ }
+ },
+ });
+ versionsTabController.load({ eager: true });
setupTagTooltip();
setupTagEditMode(modelType);
setupModelNameEditing(modelWithFullData.file_path);
diff --git a/static/js/components/shared/ModelVersionsTab.js b/static/js/components/shared/ModelVersionsTab.js
new file mode 100644
index 00000000..cc406d30
--- /dev/null
+++ b/static/js/components/shared/ModelVersionsTab.js
@@ -0,0 +1,563 @@
+import { getModelApiClient } from '../../api/modelApiFactory.js';
+import { downloadManager } from '../../managers/DownloadManager.js';
+import { showToast } from '../../utils/uiHelpers.js';
+import { translate } from '../../utils/i18nHelpers.js';
+import { state } from '../../state/index.js';
+import { formatFileSize } from './utils.js';
+
+const VIDEO_EXTENSIONS = ['.mp4', '.webm', '.mov', '.mkv'];
+
+function escapeHtml(value) {
+ if (value == null) {
+ return '';
+ }
+ return String(value)
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
+}
+
+function isVideoUrl(url) {
+ if (!url || typeof url !== 'string') {
+ return false;
+ }
+ try {
+ const parsed = new URL(url, window.location.origin);
+ const pathname = parsed.pathname || '';
+ const extension = pathname.slice(pathname.lastIndexOf('.')).toLowerCase();
+ return VIDEO_EXTENSIONS.includes(extension);
+ } catch (error) {
+ const normalized = url.split('?')[0].toLowerCase();
+ return VIDEO_EXTENSIONS.some(ext => normalized.endsWith(ext));
+ }
+}
+
+function formatDateLabel(value) {
+ if (!value) {
+ return null;
+ }
+ const parsed = new Date(value);
+ if (Number.isNaN(parsed.getTime())) {
+ return null;
+ }
+ return parsed.toLocaleDateString(undefined, {
+ year: 'numeric',
+ month: 'short',
+ day: 'numeric',
+ });
+}
+
+function buildMetaMarkup(version) {
+ const segments = [];
+ if (version.baseModel) {
+ segments.push(
+ ``
+ );
+ }
+ const releaseLabel = formatDateLabel(version.releasedAt);
+ if (releaseLabel) {
+ segments.push(escapeHtml(releaseLabel));
+ }
+ if (typeof version.sizeBytes === 'number' && version.sizeBytes > 0) {
+ segments.push(escapeHtml(formatFileSize(version.sizeBytes)));
+ }
+
+ if (!segments.length) {
+ return escapeHtml(
+ translate('modals.model.versions.labels.noDetails', {}, 'No additional details')
+ );
+ }
+
+ return segments
+ .map(segment => ``)
+ .join('');
+}
+
+function buildBadge(label, tone) {
+ return `${escapeHtml(label)}`;
+}
+
+function getAutoplaySetting() {
+ try {
+ return Boolean(state?.global?.settings?.autoplay_on_hover);
+ } catch (error) {
+ return false;
+ }
+}
+
+function renderMediaMarkup(version) {
+ if (!version.previewUrl) {
+ const placeholderText = translate('modals.model.versions.media.placeholder', {}, 'No preview');
+ return `
+
+ ${loadingVersionsText}
+
+ ${escapeHtml(placeholderText)}
`;
+ }
+
+ if (isVideoUrl(version.previewUrl)) {
+ const autoplayOnHover = getAutoplaySetting();
+ return `
+
+
+
+ `;
+ }
+
+ return `
+
+ })
+
+ `;
+}
+
+function renderRow(version, options) {
+ const { latestLibraryVersionId, currentVersionId } = options;
+ const isCurrent = currentVersionId && version.versionId === currentVersionId;
+ const isNewer =
+ typeof latestLibraryVersionId === 'number' &&
+ version.versionId > latestLibraryVersionId;
+ const badges = [];
+
+ if (isCurrent) {
+ badges.push(buildBadge(translate('modals.model.versions.badges.current', {}, 'Current Version'), 'current'));
+ }
+
+ if (version.isInLibrary) {
+ badges.push(buildBadge(translate('modals.model.versions.badges.inLibrary', {}, 'In Library'), 'success'));
+ } else if (isNewer && !version.shouldIgnore) {
+ badges.push(buildBadge(translate('modals.model.versions.badges.newer', {}, 'Newer Version'), 'info'));
+ }
+
+ if (version.shouldIgnore) {
+ badges.push(buildBadge(translate('modals.model.versions.badges.ignored', {}, 'Ignored'), 'muted'));
+ }
+
+ const downloadLabel = translate('modals.model.versions.actions.download', {}, 'Download');
+ const deleteLabel = translate('modals.model.versions.actions.delete', {}, 'Delete');
+ const ignoreLabel = translate(
+ version.shouldIgnore
+ ? 'modals.model.versions.actions.unignore'
+ : 'modals.model.versions.actions.ignore',
+ {},
+ version.shouldIgnore ? 'Unignore' : 'Ignore'
+ );
+
+ const actions = [];
+ if (!version.isInLibrary) {
+ actions.push(
+ ``
+ );
+ } else if (version.filePath) {
+ actions.push(
+ ``
+ );
+ }
+ actions.push(
+ ``
+ );
+
+ return `
+
+ ${renderMediaMarkup(version)}
+
+ `;
+}
+
+function setupMediaHoverInteractions(container) {
+ const autoplayOnHover = getAutoplaySetting();
+ if (!autoplayOnHover) {
+ return;
+ }
+ container.querySelectorAll('.version-media video').forEach(video => {
+ if (video.dataset.autoplayOnHover !== 'true') {
+ return;
+ }
+ const play = () => {
+ try {
+ video.currentTime = 0;
+ const promise = video.play();
+ if (promise && typeof promise.catch === 'function') {
+ promise.catch(() => {});
+ }
+ } catch (error) {
+ console.debug('Failed to autoplay preview video:', error);
+ }
+ };
+ const stop = () => {
+ video.pause();
+ video.currentTime = 0;
+ };
+ video.addEventListener('mouseenter', play);
+ video.addEventListener('focus', play);
+ video.addEventListener('mouseleave', stop);
+ video.addEventListener('blur', stop);
+ });
+}
+
+function getLatestLibraryVersionId(record) {
+ if (!record || !Array.isArray(record.inLibraryVersionIds) || !record.inLibraryVersionIds.length) {
+ return null;
+ }
+ return Math.max(...record.inLibraryVersionIds);
+}
+
+function renderToolbar(record) {
+ const ignoreText = 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 viewLocalText = translate('modals.model.versions.actions.viewLocalVersions', {}, 'View all local versions');
+ const infoText = translate(
+ 'modals.model.versions.copy',
+ { count: record.versions.length },
+ 'Track and manage every version of this model in one place.'
+ );
+
+ return `
+
+
+
+ ${escapeHtml(version.name || translate('modals.model.versions.labels.unnamed', {}, 'Untitled Version'))}
+ #${escapeHtml(version.versionId)}
+
+ ${badges.join('')}
+
+
+ ${actions.join('')}
+
+
+
+
+ `;
+}
+
+function renderErrorState(container, message) {
+ const fallback = translate('modals.model.versions.error', {}, 'Failed to load versions.');
+ container.innerHTML = `
+ ${escapeHtml(message)}
+
+
+
+ `;
+}
+
+export function initVersionsTab({
+ modalId,
+ modelType,
+ modelId,
+ currentVersionId,
+}) {
+ const pane = document.querySelector(`#${modalId} #versions-tab`);
+ const container = pane ? pane.querySelector('.model-versions-tab') : null;
+ const normalizedCurrentVersionId =
+ typeof currentVersionId === 'number'
+ ? currentVersionId
+ : currentVersionId
+ ? Number(currentVersionId)
+ : null;
+
+ if (!container) {
+ return {
+ async load() {},
+ async refresh() {},
+ };
+ }
+
+ let controller = {
+ isLoading: false,
+ hasLoaded: false,
+ record: null,
+ };
+
+ let apiClient;
+
+ function ensureClient() {
+ if (apiClient) {
+ return apiClient;
+ }
+ try {
+ apiClient = getModelApiClient(modelType);
+ } catch (error) {
+ apiClient = getModelApiClient();
+ }
+ return apiClient;
+ }
+
+ function showLoading() {
+ const loadingText = translate('modals.model.loading.versions', {}, 'Loading versions...');
+ container.innerHTML = `
+ ${escapeHtml(message || fallback)}
+
+ ${escapeHtml(loadingText)}
+
+ `;
+ }
+
+ function render(record) {
+ controller.record = record;
+ controller.hasLoaded = true;
+
+ if (!record || !Array.isArray(record.versions) || record.versions.length === 0) {
+ renderEmptyState(container);
+ return;
+ }
+
+ const latestLibraryVersionId = getLatestLibraryVersionId(record);
+ let dividerInserted = false;
+
+ const sortedVersions = [...record.versions].sort(
+ (a, b) => Number(b.versionId) - Number(a.versionId)
+ );
+
+ const rowsMarkup = sortedVersions
+ .map(version => {
+ const isNewer =
+ typeof latestLibraryVersionId === 'number' &&
+ version.versionId > latestLibraryVersionId;
+ let markup = '';
+ if (
+ !dividerInserted &&
+ typeof latestLibraryVersionId === 'number' &&
+ !isNewer
+ ) {
+ dividerInserted = true;
+ markup += '';
+ }
+ markup += renderRow(version, {
+ latestLibraryVersionId,
+ currentVersionId: normalizedCurrentVersionId,
+ });
+ return markup;
+ })
+ .join('');
+
+ container.innerHTML = `
+ ${renderToolbar(record)}
+
+ ${rowsMarkup}
+
+ `;
+
+ setupMediaHoverInteractions(container);
+ }
+
+ async function loadVersions({ forceRefresh = false, eager = false } = {}) {
+ if (controller.isLoading) {
+ return;
+ }
+ if (!modelId) {
+ renderErrorState(container, translate('modals.model.versions.missingModelId', {}, 'This model is missing a Civitai model id.'));
+ return;
+ }
+ if (controller.hasLoaded && !forceRefresh) {
+ return;
+ }
+
+ controller.isLoading = true;
+ if (!eager) {
+ showLoading();
+ }
+
+ try {
+ const client = ensureClient();
+ const response = await client.fetchModelUpdateVersions(modelId, {
+ refresh: true,
+ });
+ if (!response?.success) {
+ throw new Error(response?.error || 'Request failed');
+ }
+ render(response.record);
+ } catch (error) {
+ console.error('Failed to load model versions:', error);
+ renderErrorState(container, error?.message);
+ } finally {
+ controller.isLoading = false;
+ }
+ }
+
+ async function refresh() {
+ await loadVersions({ forceRefresh: true });
+ }
+
+ async function handleToggleModelIgnore(button) {
+ if (!controller.record) {
+ return;
+ }
+ const client = ensureClient();
+ const nextValue = !controller.record.shouldIgnore;
+ button.disabled = true;
+ try {
+ const response = await client.setModelUpdateIgnore(modelId, nextValue);
+ if (!response?.success) {
+ throw new Error(response?.error || 'Request failed');
+ }
+ render(response.record);
+ const toastKey = nextValue
+ ? 'modals.model.versions.toast.modelIgnored'
+ : 'modals.model.versions.toast.modelResumed';
+ const toastMessage = translate(
+ toastKey,
+ {},
+ nextValue ? 'Updates ignored for this model' : 'Update tracking resumed'
+ );
+ showToast(toastMessage, {}, 'success');
+ } catch (error) {
+ console.error('Failed to update model ignore state:', error);
+ showToast(error?.message || 'Failed to update ignore preference', {}, 'error');
+ } finally {
+ button.disabled = false;
+ }
+ }
+
+ async function handleToggleVersionIgnore(button, versionId) {
+ if (!controller.record) {
+ return;
+ }
+ const client = ensureClient();
+ const targetVersion = controller.record.versions.find(v => v.versionId === versionId);
+ const nextValue = targetVersion ? !targetVersion.shouldIgnore : true;
+ button.disabled = true;
+ try {
+ const response = await client.setVersionUpdateIgnore(
+ modelId,
+ versionId,
+ nextValue
+ );
+ if (!response?.success) {
+ throw new Error(response?.error || 'Request failed');
+ }
+ render(response.record);
+ const updatedVersion = response.record.versions.find(v => v.versionId === versionId);
+ const toastKey = updatedVersion?.shouldIgnore
+ ? 'modals.model.versions.toast.versionIgnored'
+ : 'modals.model.versions.toast.versionUnignored';
+ const toastMessage = translate(
+ toastKey,
+ {},
+ updatedVersion?.shouldIgnore ? 'Updates ignored for this version' : 'Version re-enabled'
+ );
+ showToast(toastMessage, {}, 'success');
+ } catch (error) {
+ console.error('Failed to toggle version ignore state:', error);
+ showToast(error?.message || 'Failed to update version preference', {}, 'error');
+ } finally {
+ button.disabled = false;
+ }
+ }
+
+ async function handleDeleteVersion(button, versionId) {
+ if (!controller.record) {
+ return;
+ }
+ const version = controller.record.versions.find(item => item.versionId === versionId);
+ if (!version?.filePath) {
+ return;
+ }
+ const confirmText = translate(
+ 'modals.model.versions.confirm.delete',
+ {},
+ 'Delete this version from your library?'
+ );
+ if (!window.confirm(confirmText)) {
+ return;
+ }
+ button.disabled = true;
+ try {
+ const client = ensureClient();
+ await client.deleteModel(version.filePath);
+ showToast(
+ translate('modals.model.versions.toast.versionDeleted', {}, 'Version deleted'),
+ {},
+ 'success'
+ );
+ await refresh();
+ } catch (error) {
+ console.error('Failed to delete version:', error);
+ showToast(error?.message || 'Failed to delete version', {}, 'error');
+ } finally {
+ button.disabled = false;
+ }
+ }
+
+ function handleDownloadVersion(versionId) {
+ if (!controller.record) {
+ return;
+ }
+ downloadManager.openForModelVersion(modelType, modelId, versionId);
+ }
+
+ container.addEventListener('click', async event => {
+ const toolbarAction = event.target.closest('[data-versions-action]');
+ if (toolbarAction) {
+ const action = toolbarAction.dataset.versionsAction;
+ if (action === 'toggle-model-ignore') {
+ event.preventDefault();
+ await handleToggleModelIgnore(toolbarAction);
+ }
+ return;
+ }
+
+ const actionButton = event.target.closest('[data-version-action]');
+ if (!actionButton) {
+ return;
+ }
+ const row = actionButton.closest('.model-version-row');
+ if (!row) {
+ return;
+ }
+ const versionId = Number(row.dataset.versionId);
+ const action = actionButton.dataset.versionAction;
+
+ switch (action) {
+ case 'download':
+ event.preventDefault();
+ handleDownloadVersion(versionId);
+ break;
+ case 'delete':
+ event.preventDefault();
+ await handleDeleteVersion(actionButton, versionId);
+ break;
+ case 'toggle-ignore':
+ event.preventDefault();
+ await handleToggleVersionIgnore(actionButton, versionId);
+ break;
+ default:
+ break;
+ }
+ });
+
+ return {
+ load: options => loadVersions(options),
+ refresh,
+ };
+}
diff --git a/static/js/managers/DownloadManager.js b/static/js/managers/DownloadManager.js
index bfd96906..e6967014 100644
--- a/static/js/managers/DownloadManager.js
+++ b/static/js/managers/DownloadManager.js
@@ -140,6 +140,14 @@ export class DownloadManager {
this.loadDefaultPathSetting();
}
+ async retrieveVersionsForModel(modelId, source = null) {
+ this.versions = await this.apiClient.fetchCivitaiVersions(modelId, source);
+ if (!this.versions || !this.versions.length) {
+ throw new Error(translate('modals.download.errors.noVersions'));
+ }
+ return this.versions;
+ }
+
async validateAndFetchVersions() {
const url = document.getElementById('modelUrl').value.trim();
const errorElement = document.getElementById('urlError');
@@ -152,12 +160,8 @@ export class DownloadManager {
throw new Error(translate('modals.download.errors.invalidUrl'));
}
- this.versions = await this.apiClient.fetchCivitaiVersions(this.modelId, this.source);
-
- if (!this.versions.length) {
- throw new Error(translate('modals.download.errors.noVersions'));
- }
-
+ await this.retrieveVersionsForModel(this.modelId, this.source);
+
// If we have a version ID from URL, pre-select it
if (this.modelVersionId) {
this.currentVersion = this.versions.find(v => v.id.toString() === this.modelVersionId);
@@ -171,6 +175,27 @@ export class DownloadManager {
}
}
+ async fetchVersionsForCurrentModel() {
+ const errorElement = document.getElementById('urlError');
+ if (errorElement) {
+ errorElement.textContent = '';
+ }
+ try {
+ this.loadingManager.showSimpleLoading(translate('modals.download.fetchingVersions'));
+ await this.retrieveVersionsForModel(this.modelId, this.source);
+ if (this.modelVersionId) {
+ this.currentVersion = this.versions.find(v => v.id.toString() === this.modelVersionId);
+ }
+ this.showVersionStep();
+ } catch (error) {
+ if (errorElement) {
+ errorElement.textContent = error.message;
+ }
+ } finally {
+ this.loadingManager.hide();
+ }
+ }
+
extractModelId(url) {
const versionMatch = url.match(/modelVersionId=(\d+)/i);
this.modelVersionId = versionMatch ? versionMatch[1] : null;
@@ -191,6 +216,26 @@ export class DownloadManager {
return null;
}
+ async openForModelVersion(modelType, modelId, versionId = null) {
+ try {
+ this.apiClient = getModelApiClient(modelType);
+ } catch (error) {
+ this.apiClient = getModelApiClient();
+ }
+
+ this.showDownloadModal();
+
+ this.modelId = modelId ? modelId.toString() : null;
+ this.modelVersionId = versionId ? versionId.toString() : null;
+ this.source = null;
+
+ if (!this.modelId) {
+ return;
+ }
+
+ await this.fetchVersionsForCurrentModel();
+ }
+
showVersionStep() {
document.getElementById('urlStep').style.display = 'none';
document.getElementById('versionStep').style.display = 'block';
diff --git a/tests/routes/test_model_update_handler.py b/tests/routes/test_model_update_handler.py
index b85fa83d..a378115c 100644
--- a/tests/routes/test_model_update_handler.py
+++ b/tests/routes/test_model_update_handler.py
@@ -41,7 +41,7 @@ class DummyUpdateService:
@pytest.mark.asyncio
-async def test_build_preview_overrides_uses_static_urls():
+async def test_build_version_context_includes_static_urls():
cache = SimpleNamespace(version_index={123: {"preview_url": "/tmp/previews/example.png"}})
service = DummyService(cache)
handler = ModelUpdateHandler(
@@ -70,9 +70,9 @@ async def test_build_preview_overrides_uses_static_urls():
should_ignore_model=False,
)
- overrides = await handler._build_preview_overrides(record)
+ overrides = await handler._build_version_context(record)
expected = config.get_preview_static_url("/tmp/previews/example.png")
- assert overrides == {123: expected}
+ assert overrides == {123: {"file_path": None, "file_name": None, "preview_override": expected}}
@pytest.mark.asyncio