No example images available
';
// Filter images based on SFW setting
@@ -53,7 +81,11 @@ export function renderShowcaseContent(images) {
${hiddenNotification}
`;
@@ -64,7 +96,7 @@ export function renderShowcaseContent(images) {
* @param {Object} media - Media object with image or video data
* @returns {string} HTML content
*/
-function generateMediaWrapper(media) {
+function generateMediaWrapper(media, localUrl = null) {
// Calculate appropriate aspect ratio:
// 1. Keep original aspect ratio
// 2. Limit maximum height to 60% of viewport height
@@ -117,10 +149,10 @@ function generateMediaWrapper(media) {
// Check if this is a video or image
if (media.type === 'video') {
- return generateVideoWrapper(media, heightPercent, shouldBlur, nsfwText, metadataPanel);
+ return generateVideoWrapper(media, heightPercent, shouldBlur, nsfwText, metadataPanel, localUrl);
}
- return generateImageWrapper(media, heightPercent, shouldBlur, nsfwText, metadataPanel);
+ return generateImageWrapper(media, heightPercent, shouldBlur, nsfwText, metadataPanel, localUrl);
}
/**
@@ -193,7 +225,7 @@ function generateMetadataPanel(hasParams, hasPrompts, prompt, negativePrompt, si
/**
* Generate video wrapper HTML
*/
-function generateVideoWrapper(media, heightPercent, shouldBlur, nsfwText, metadataPanel) {
+function generateVideoWrapper(media, heightPercent, shouldBlur, nsfwText, metadataPanel, localUrl = null) {
return `
- ${filteredImages.map(img => generateMediaWrapper(img)).join('')}
+ ${filteredImages.map((img, index) => {
+ // Try to get local URL for the example image
+ const localUrl = getLocalExampleImageUrl(img, index, modelHash);
+ return generateMediaWrapper(img, localUrl);
+ }).join('')}
${shouldBlur ? `
@@ -202,9 +234,11 @@ function generateVideoWrapper(media, heightPercent, shouldBlur, nsfwText, metada
` : ''}
${shouldBlur ? `
@@ -223,7 +257,7 @@ function generateVideoWrapper(media, heightPercent, shouldBlur, nsfwText, metada
/**
* Generate image wrapper HTML
*/
-function generateImageWrapper(media, heightPercent, shouldBlur, nsfwText, metadataPanel) {
+function generateImageWrapper(media, heightPercent, shouldBlur, nsfwText, metadataPanel, localUrl = null) {
return `
${shouldBlur ? `
@@ -231,7 +265,8 @@ function generateImageWrapper(media, heightPercent, shouldBlur, nsfwText, metada
` : ''}
- ![Preview]()
{
+ const localSrc = element.dataset.localSrc;
+ const remoteSrc = element.dataset.remoteSrc;
+
+ // Check if element is an image or video
if (element.tagName.toLowerCase() === 'video') {
- element.src = element.dataset.src;
- element.querySelector('source').src = element.dataset.src;
- element.load();
+ // Try local first, then remote
+ tryLocalOrFallbackToRemote(element, localSrc, remoteSrc);
} else {
- element.src = element.dataset.src;
+ // For images, we'll use an Image object to test if local file exists
+ tryLocalImageOrFallbackToRemote(element, localSrc, remoteSrc);
}
+
element.classList.remove('lazy');
};
+
+ // Try to load local image first, fall back to remote if local fails
+ const tryLocalImageOrFallbackToRemote = (imgElement, localSrc, remoteSrc) => {
+ // Only try local if we have a local path
+ if (localSrc) {
+ const testImg = new Image();
+ testImg.onload = () => {
+ // Local image loaded successfully
+ imgElement.src = localSrc;
+ };
+ testImg.onerror = () => {
+ // Local image failed, use remote
+ imgElement.src = remoteSrc;
+ };
+ // Start loading test image
+ testImg.src = localSrc;
+ } else {
+ // No local path, use remote directly
+ imgElement.src = remoteSrc;
+ }
+ };
+
+ // Try to load local video first, fall back to remote if local fails
+ const tryLocalOrFallbackToRemote = (videoElement, localSrc, remoteSrc) => {
+ // Only try local if we have a local path
+ if (localSrc) {
+ // Try to fetch local file headers to see if it exists
+ fetch(localSrc, { method: 'HEAD' })
+ .then(response => {
+ if (response.ok) {
+ // Local video exists, use it
+ videoElement.src = localSrc;
+ videoElement.querySelector('source').src = localSrc;
+ } else {
+ // Local video doesn't exist, use remote
+ videoElement.src = remoteSrc;
+ videoElement.querySelector('source').src = remoteSrc;
+ }
+ videoElement.load();
+ })
+ .catch(() => {
+ // Error fetching, use remote
+ videoElement.src = remoteSrc;
+ videoElement.querySelector('source').src = remoteSrc;
+ videoElement.load();
+ });
+ } else {
+ // No local path, use remote directly
+ videoElement.src = remoteSrc;
+ videoElement.querySelector('source').src = remoteSrc;
+ videoElement.load();
+ }
+ };
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
@@ -485,4 +578,4 @@ export function scrollToTop(button) {
behavior: 'smooth'
});
}
-}
\ No newline at end of file
+}
diff --git a/static/js/components/checkpointModal/index.js b/static/js/components/checkpointModal/index.js
index 9212d57b..1066b49e 100644
--- a/static/js/components/checkpointModal/index.js
+++ b/static/js/components/checkpointModal/index.js
@@ -96,7 +96,7 @@ export function showCheckpointModal(checkpoint) {
- ${renderShowcaseContent(checkpoint.civitai?.images || [])}
+ ${renderShowcaseContent(checkpoint.civitai?.images || [], checkpoint.sha256)}
diff --git a/static/js/components/loraModal/ShowcaseView.js b/static/js/components/loraModal/ShowcaseView.js
index 9bd7ee3d..66024aee 100644
--- a/static/js/components/loraModal/ShowcaseView.js
+++ b/static/js/components/loraModal/ShowcaseView.js
@@ -6,12 +6,40 @@ import { showToast, copyToClipboard } from '../../utils/uiHelpers.js';
import { state } from '../../state/index.js';
import { NSFW_LEVELS } from '../../utils/constants.js';
+/**
+ * Get the local URL for an example image if available
+ * @param {Object} img - Image object
+ * @param {number} index - Image index
+ * @param {string} modelHash - Model hash
+ * @returns {string|null} - Local URL or null if not available
+ */
+function getLocalExampleImageUrl(img, index, modelHash) {
+ if (!modelHash) return null;
+
+ // Get remote extension
+ const remoteExt = (img.url || '').split('?')[0].split('.').pop().toLowerCase();
+
+ // If it's a video (mp4), use that extension
+ if (remoteExt === 'mp4') {
+ return `/example_images_static/${modelHash}/image_${index + 1}.mp4`;
+ }
+
+ // For images, check if optimization is enabled (defaults to true)
+ const optimizeImages = state.settings.optimizeExampleImages !== false;
+
+ // Use .webp for images if optimization enabled, otherwise use original extension
+ const extension = optimizeImages ? 'webp' : remoteExt;
+
+ return `/example_images_static/${modelHash}/image_${index + 1}.${extension}`;
+}
+
/**
* 渲染展示内容
* @param {Array} images - 要展示的图片/视频数组
+ * @param {string} modelHash - Model hash for identifying local files
* @returns {string} HTML内容
*/
-export function renderShowcaseContent(images) {
+export function renderShowcaseContent(images, modelHash) {
if (!images?.length) return '
diff --git a/templates/components/progress_panel.html b/templates/components/progress_panel.html
new file mode 100644
index 00000000..eaee35f9
--- /dev/null
+++ b/templates/components/progress_panel.html
@@ -0,0 +1,53 @@
+
+No example images available
';
// Filter images based on SFW setting
@@ -53,7 +81,15 @@ export function renderShowcaseContent(images) {
${hiddenNotification}
@@ -186,7 +222,7 @@ export function renderShowcaseContent(images) {
/**
* 生成视频包装HTML
*/
-function generateVideoWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel) {
+function generateVideoWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel, localUrl, remoteUrl) {
return `
- ${filteredImages.map(img => {
+ ${filteredImages.map((img, index) => {
+ // Try to get local URL for the example image
+ const localUrl = getLocalExampleImageUrl(img, index, modelHash);
+
+ // Create data attributes for both remote and local URLs
+ const remoteUrl = img.url;
+ const dataRemoteSrc = remoteUrl;
+ const dataLocalSrc = localUrl;
+
// 计算适当的展示高度：
// 1. 保持原始宽高比
// 2. 限制最大高度为视窗高度的60%
@@ -111,9 +147,9 @@ export function renderShowcaseContent(images) {
`;
if (img.type === 'video') {
- return generateVideoWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel);
+ return generateVideoWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel, dataLocalSrc, dataRemoteSrc);
}
- return generateImageWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel);
+ return generateImageWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel, dataLocalSrc, dataRemoteSrc);
}
// Create a data attribute with the prompt for copying instead of trying to handle it in the onclick
@@ -174,9 +210,9 @@ export function renderShowcaseContent(images) {
`;
if (img.type === 'video') {
- return generateVideoWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel);
+ return generateVideoWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel, dataLocalSrc, dataRemoteSrc);
}
- return generateImageWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel);
+ return generateImageWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel, dataLocalSrc, dataRemoteSrc);
}).join('')}
${shouldBlur ? `
@@ -195,9 +231,11 @@ function generateVideoWrapper(img, heightPercent, shouldBlur, nsfwText, metadata
` : ''}
${shouldBlur ? `
@@ -216,7 +254,7 @@ function generateVideoWrapper(img, heightPercent, shouldBlur, nsfwText, metadata
/**
* 生成图片包装HTML
*/
-function generateImageWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel) {
+function generateImageWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel, localUrl, remoteUrl) {
return `
${shouldBlur ? `
@@ -224,7 +262,8 @@ function generateImageWrapper(img, heightPercent, shouldBlur, nsfwText, metadata
` : ''}
- ![Preview]()
{
+ const localSrc = element.dataset.localSrc;
+ const remoteSrc = element.dataset.remoteSrc;
+
+ // Check if element is an image or video
if (element.tagName.toLowerCase() === 'video') {
- element.src = element.dataset.src;
- element.querySelector('source').src = element.dataset.src;
- element.load();
+ // Try local first, then remote
+ tryLocalOrFallbackToRemote(element, localSrc, remoteSrc);
} else {
- element.src = element.dataset.src;
+ // For images, we'll use an Image object to test if local file exists
+ tryLocalImageOrFallbackToRemote(element, localSrc, remoteSrc);
}
+
element.classList.remove('lazy');
};
+
+ // Try to load local image first, fall back to remote if local fails
+ const tryLocalImageOrFallbackToRemote = (imgElement, localSrc, remoteSrc) => {
+ // Only try local if we have a local path
+ if (localSrc) {
+ const testImg = new Image();
+ testImg.onload = () => {
+ // Local image loaded successfully
+ imgElement.src = localSrc;
+ };
+ testImg.onerror = () => {
+ // Local image failed, use remote
+ imgElement.src = remoteSrc;
+ };
+ // Start loading test image
+ testImg.src = localSrc;
+ } else {
+ // No local path, use remote directly
+ imgElement.src = remoteSrc;
+ }
+ };
+
+ // Try to load local video first, fall back to remote if local fails
+ const tryLocalOrFallbackToRemote = (videoElement, localSrc, remoteSrc) => {
+ // Only try local if we have a local path
+ if (localSrc) {
+ // Try to fetch local file headers to see if it exists
+ fetch(localSrc, { method: 'HEAD' })
+ .then(response => {
+ if (response.ok) {
+ // Local video exists, use it
+ videoElement.src = localSrc;
+ videoElement.querySelector('source').src = localSrc;
+ } else {
+ // Local video doesn't exist, use remote
+ videoElement.src = remoteSrc;
+ videoElement.querySelector('source').src = remoteSrc;
+ }
+ videoElement.load();
+ })
+ .catch(() => {
+ // Error fetching, use remote
+ videoElement.src = remoteSrc;
+ videoElement.querySelector('source').src = remoteSrc;
+ videoElement.load();
+ });
+ } else {
+ // No local path, use remote directly
+ videoElement.src = remoteSrc;
+ videoElement.querySelector('source').src = remoteSrc;
+ videoElement.load();
+ }
+ };
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
@@ -497,4 +594,4 @@ export function scrollToTop(button) {
behavior: 'smooth'
});
}
-}
\ No newline at end of file
+}
diff --git a/static/js/components/loraModal/index.js b/static/js/components/loraModal/index.js
index db9b41e5..458edd27 100644
--- a/static/js/components/loraModal/index.js
+++ b/static/js/components/loraModal/index.js
@@ -122,7 +122,7 @@ export function showLoraModal(lora) {
+
+
+
- ${renderShowcaseContent(lora.civitai?.images)}
+ ${renderShowcaseContent(lora.civitai?.images, lora.sha256)}
diff --git a/static/js/core.js b/static/js/core.js
index b1edac3c..337674d9 100644
--- a/static/js/core.js
+++ b/static/js/core.js
@@ -5,6 +5,7 @@ import { modalManager } from './managers/ModalManager.js';
import { updateService } from './managers/UpdateService.js';
import { HeaderManager } from './components/Header.js';
import { settingsManager } from './managers/SettingsManager.js';
+import { exampleImagesManager } from './managers/ExampleImagesManager.js';
import { showToast, initTheme, initBackToTop, lazyLoadImages } from './utils/uiHelpers.js';
import { initializeInfiniteScroll } from './utils/infiniteScroll.js';
import { migrateStorageItems } from './utils/storageHelpers.js';
@@ -27,12 +28,16 @@ export class AppCore {
updateService.initialize();
window.modalManager = modalManager;
window.settingsManager = settingsManager;
+ window.exampleImagesManager = exampleImagesManager;
// Initialize UI components
window.headerManager = new HeaderManager();
initTheme();
initBackToTop();
+ // Initialize the example images manager
+ exampleImagesManager.initialize();
+
// Mark as initialized
this.initialized = true;
diff --git a/static/js/managers/ExampleImagesManager.js b/static/js/managers/ExampleImagesManager.js
new file mode 100644
index 00000000..3f5ed909
--- /dev/null
+++ b/static/js/managers/ExampleImagesManager.js
@@ -0,0 +1,602 @@
+import { showToast } from '../utils/uiHelpers.js';
+import { getStorageItem, setStorageItem } from '../utils/storageHelpers.js';
+
+// ExampleImagesManager.js
+class ExampleImagesManager {
+ constructor() {
+ this.isDownloading = false;
+ this.isPaused = false;
+ this.progressUpdateInterval = null;
+ this.startTime = null;
+ this.progressPanel = null;
+ this.isProgressPanelCollapsed = false;
+ this.pauseButton = null; // Store reference to the pause button
+
+ // Initialize download path field and check download status
+ this.initializePathOptions();
+ this.checkDownloadStatus();
+ }
+
+ // Initialize the manager
+ initialize() {
+ // Initialize event listeners
+ this.initEventListeners();
+
+ // Initialize progress panel reference
+ this.progressPanel = document.getElementById('exampleImagesProgress');
+
+ // Load collapse state from storage
+ this.isProgressPanelCollapsed = getStorageItem('progress_panel_collapsed', false);
+ if (this.progressPanel && this.isProgressPanelCollapsed) {
+ this.progressPanel.classList.add('collapsed');
+ const icon = document.querySelector('#collapseProgressBtn i');
+ if (icon) {
+ icon.className = 'fas fa-chevron-up';
+ }
+ }
+
+ // Initialize progress panel button handlers
+ this.pauseButton = document.getElementById('pauseExampleDownloadBtn');
+ const collapseBtn = document.getElementById('collapseProgressBtn');
+
+ if (this.pauseButton) {
+ this.pauseButton.onclick = () => this.pauseDownload();
+ }
+
+ if (collapseBtn) {
+ collapseBtn.onclick = () => this.toggleProgressPanel();
+ }
+ }
+
+ // Initialize event listeners for buttons
+ initEventListeners() {
+ const downloadBtn = document.getElementById('exampleImagesDownloadBtn');
+ if (downloadBtn) {
+ downloadBtn.onclick = () => this.handleDownloadButton();
+ }
+ }
+
+ async initializePathOptions() {
+ try {
+ // Get custom path input element
+ const pathInput = document.getElementById('exampleImagesPath');
+
+ // Set path from storage if available
+ const savedPath = getStorageItem('example_images_path', '');
+ if (savedPath) {
+ pathInput.value = savedPath;
+ // Enable download button if path is set
+ this.updateDownloadButtonState(true);
+ } else {
+ // Disable download button if no path is set
+ this.updateDownloadButtonState(false);
+ }
+
+ // Add event listener to validate path input
+ pathInput.addEventListener('input', async () => {
+ const hasPath = pathInput.value.trim() !== '';
+ this.updateDownloadButtonState(hasPath);
+
+ // Save path to storage when changed
+ if (hasPath) {
+ setStorageItem('example_images_path', pathInput.value);
+
+ // Update path in backend settings
+ try {
+ const response = await fetch('/api/settings', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ example_images_path: pathInput.value
+ })
+ });
+
+ if (!response.ok) {
+ throw new Error(`HTTP error! Status: ${response.status}`);
+ }
+
+ const data = await response.json();
+ if (!data.success) {
+ console.error('Failed to update example images path in backend:', data.error);
+ } else {
+ showToast('Example images path updated successfully', 'success');
+ }
+ } catch (error) {
+ console.error('Failed to update example images path:', error);
+ }
+ }
+ });
+ } catch (error) {
+ console.error('Failed to initialize path options:', error);
+ }
+ }
+
+ // Method to update download button state
+ updateDownloadButtonState(enabled) {
+ const downloadBtn = document.getElementById('exampleImagesDownloadBtn');
+ if (downloadBtn) {
+ if (enabled) {
+ downloadBtn.classList.remove('disabled');
+ downloadBtn.disabled = false;
+ } else {
+ downloadBtn.classList.add('disabled');
+ downloadBtn.disabled = true;
+ }
+ }
+ }
+
+ // Method to handle download button click based on current state
+ async handleDownloadButton() {
+ if (this.isDownloading && this.isPaused) {
+ // If download is paused, resume it
+ this.resumeDownload();
+ } else if (!this.isDownloading) {
+ // If no download in progress, start a new one
+ this.startDownload();
+ } else {
+ // If download is in progress, show info toast
+ showToast('Download already in progress', 'info');
+ }
+ }
+
+ async checkDownloadStatus() {
+ try {
+ const response = await fetch('/api/example-images-status');
+ const data = await response.json();
+
+ if (data.success) {
+ this.isDownloading = data.is_downloading;
+ this.isPaused = data.status.status === 'paused';
+
+ // Update download button text based on status
+ this.updateDownloadButtonText();
+
+ if (this.isDownloading) {
+ // Ensure progress panel exists before updating UI
+ if (!this.progressPanel) {
+ this.progressPanel = document.getElementById('exampleImagesProgress');
+ }
+
+ if (this.progressPanel) {
+ this.updateUI(data.status);
+ this.showProgressPanel();
+
+ // Start the progress update interval if downloading
+ if (!this.progressUpdateInterval) {
+ this.startProgressUpdates();
+ }
+ } else {
+ console.warn('Progress panel not found, will retry on next update');
+ // Set a shorter timeout to try again
+ setTimeout(() => this.checkDownloadStatus(), 500);
+ }
+ }
+ }
+ } catch (error) {
+ console.error('Failed to check download status:', error);
+ }
+ }
+
+ // Update download button text based on current state
+ updateDownloadButtonText() {
+ const btnTextElement = document.getElementById('exampleDownloadBtnText');
+ if (btnTextElement) {
+ if (this.isDownloading && this.isPaused) {
+ btnTextElement.textContent = "Resume";
+ } else if (!this.isDownloading) {
+ btnTextElement.textContent = "Download";
+ }
+ }
+ }
+
+ async startDownload() {
+ if (this.isDownloading) {
+ showToast('Download already in progress', 'warning');
+ return;
+ }
+
+ try {
+ const outputDir = document.getElementById('exampleImagesPath').value || '';
+
+ if (!outputDir) {
+ showToast('Please enter a download location first', 'warning');
+ return;
+ }
+
+ const optimize = document.getElementById('optimizeExampleImages').checked;
+
+ const response = await fetch('/api/download-example-images', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ output_dir: outputDir,
+ optimize: optimize,
+ model_types: ['lora', 'checkpoint']
+ })
+ });
+
+ const data = await response.json();
+
+ if (data.success) {
+ this.isDownloading = true;
+ this.isPaused = false;
+ this.startTime = new Date();
+ this.updateUI(data.status);
+ this.showProgressPanel();
+ this.startProgressUpdates();
+ this.updateDownloadButtonText();
+ showToast('Example images download started', 'success');
+
+ // Close settings modal
+ modalManager.closeModal('settingsModal');
+ } else {
+ showToast(data.error || 'Failed to start download', 'error');
+ }
+ } catch (error) {
+ console.error('Failed to start download:', error);
+ showToast('Failed to start download', 'error');
+ }
+ }
+
+ async pauseDownload() {
+ if (!this.isDownloading || this.isPaused) {
+ return;
+ }
+
+ try {
+ const response = await fetch('/api/pause-example-images', {
+ method: 'POST'
+ });
+
+ const data = await response.json();
+
+ if (data.success) {
+ this.isPaused = true;
+ document.getElementById('downloadStatusText').textContent = 'Paused';
+
+ // Only update the icon element, not the entire innerHTML
+ if (this.pauseButton) {
+ const iconElement = this.pauseButton.querySelector('i');
+ if (iconElement) {
+ iconElement.className = 'fas fa-play';
+ }
+ this.pauseButton.onclick = () => this.resumeDownload();
+ }
+
+ this.updateDownloadButtonText();
+ showToast('Download paused', 'info');
+ } else {
+ showToast(data.error || 'Failed to pause download', 'error');
+ }
+ } catch (error) {
+ console.error('Failed to pause download:', error);
+ showToast('Failed to pause download', 'error');
+ }
+ }
+
+ async resumeDownload() {
+ if (!this.isDownloading || !this.isPaused) {
+ return;
+ }
+
+ try {
+ const response = await fetch('/api/resume-example-images', {
+ method: 'POST'
+ });
+
+ const data = await response.json();
+
+ if (data.success) {
+ this.isPaused = false;
+ document.getElementById('downloadStatusText').textContent = 'Downloading';
+
+ // Only update the icon element, not the entire innerHTML
+ if (this.pauseButton) {
+ const iconElement = this.pauseButton.querySelector('i');
+ if (iconElement) {
+ iconElement.className = 'fas fa-pause';
+ }
+ this.pauseButton.onclick = () => this.pauseDownload();
+ }
+
+ this.updateDownloadButtonText();
+ showToast('Download resumed', 'success');
+ } else {
+ showToast(data.error || 'Failed to resume download', 'error');
+ }
+ } catch (error) {
+ console.error('Failed to resume download:', error);
+ showToast('Failed to resume download', 'error');
+ }
+ }
+
+ startProgressUpdates() {
+ // Clear any existing interval
+ if (this.progressUpdateInterval) {
+ clearInterval(this.progressUpdateInterval);
+ }
+
+ // Set new interval to update progress every 2 seconds
+ this.progressUpdateInterval = setInterval(async () => {
+ await this.updateProgress();
+ }, 2000);
+ }
+
+ async updateProgress() {
+ try {
+ const response = await fetch('/api/example-images-status');
+ const data = await response.json();
+
+ if (data.success) {
+ this.isDownloading = data.is_downloading;
+ this.isPaused = data.status.status === 'paused';
+
+ // Update download button text
+ this.updateDownloadButtonText();
+
+ if (this.isDownloading) {
+ this.updateUI(data.status);
+ } else {
+ // Download completed or failed
+ clearInterval(this.progressUpdateInterval);
+ this.progressUpdateInterval = null;
+
+ if (data.status.status === 'completed') {
+ showToast('Example images download completed', 'success');
+ // Hide the panel after a delay
+ setTimeout(() => this.hideProgressPanel(), 5000);
+ } else if (data.status.status === 'error') {
+ showToast('Example images download failed', 'error');
+ }
+ }
+ }
+ } catch (error) {
+ console.error('Failed to update progress:', error);
+ }
+ }
+
+ updateUI(status) {
+ // Ensure progress panel exists
+ if (!this.progressPanel) {
+ this.progressPanel = document.getElementById('exampleImagesProgress');
+ if (!this.progressPanel) {
+ console.error('Progress panel element not found in DOM');
+ return;
+ }
+ }
+
+ // Update status text
+ const statusText = document.getElementById('downloadStatusText');
+ if (statusText) {
+ statusText.textContent = this.getStatusText(status.status);
+ }
+
+ // Update progress counts and bar
+ const progressCounts = document.getElementById('downloadProgressCounts');
+ if (progressCounts) {
+ progressCounts.textContent = `${status.completed}/${status.total}`;
+ }
+
+ const progressBar = document.getElementById('downloadProgressBar');
+ if (progressBar) {
+ const progressPercent = status.total > 0 ? (status.completed / status.total) * 100 : 0;
+ progressBar.style.width = `${progressPercent}%`;
+
+ // Update mini progress circle
+ this.updateMiniProgress(progressPercent);
+ }
+
+ // Update current model
+ const currentModel = document.getElementById('currentModelName');
+ if (currentModel) {
+ currentModel.textContent = status.current_model || '-';
+ }
+
+ // Update time stats
+ this.updateTimeStats(status);
+
+ // Update errors
+ this.updateErrors(status);
+
+ // Update pause/resume button
+ if (!this.pauseButton) {
+ this.pauseButton = document.getElementById('pauseExampleDownloadBtn');
+ }
+
+ if (this.pauseButton) {
+ // Check if the button already has the SVG elements
+ let hasProgressElements = !!this.pauseButton.querySelector('.mini-progress-circle');
+
+ if (!hasProgressElements) {
+ // If elements don't exist, add them
+ this.pauseButton.innerHTML = `
+
+
+
+ `;
+ } else {
+ // If elements exist, just update the icon
+ const iconElement = this.pauseButton.querySelector('i');
+ if (iconElement) {
+ iconElement.className = status.status === 'paused' ? 'fas fa-play' : 'fas fa-pause';
+ }
+ }
+
+ // Update click handler
+ this.pauseButton.onclick = status.status === 'paused'
+ ? () => this.resumeDownload()
+ : () => this.pauseDownload();
+
+ // Update progress immediately
+ const progressBar = document.getElementById('downloadProgressBar');
+ if (progressBar) {
+ const progressPercent = status.total > 0 ? (status.completed / status.total) * 100 : 0;
+ this.updateMiniProgress(progressPercent);
+ }
+ }
+ }
+
+ // Update the mini progress circle in the pause button
+ updateMiniProgress(percent) {
+ // Ensure we have the pause button reference
+ if (!this.pauseButton) {
+ this.pauseButton = document.getElementById('pauseExampleDownloadBtn');
+ if (!this.pauseButton) {
+ console.error('Pause button not found');
+ return;
+ }
+ }
+
+ // Query elements within the context of the pause button
+ const miniProgressCircle = this.pauseButton.querySelector('.mini-progress-circle');
+ const percentText = this.pauseButton.querySelector('.progress-percent');
+
+ if (miniProgressCircle && percentText) {
+ // Circle circumference = 2πr = 2 * π * 10 = 62.8
+ const circumference = 62.8;
+ const offset = circumference - (percent / 100) * circumference;
+
+ miniProgressCircle.style.strokeDashoffset = offset;
+ percentText.textContent = `${Math.round(percent)}%`;
+
+ // Only show percent text when panel is collapsed
+ percentText.style.display = this.isProgressPanelCollapsed ? 'block' : 'none';
+ } else {
+ console.warn('Mini progress elements not found within pause button',
+ this.pauseButton,
+ 'mini-progress-circle:', !!miniProgressCircle,
+ 'progress-percent:', !!percentText);
+ }
+ }
+
+ updateTimeStats(status) {
+ const elapsedTime = document.getElementById('elapsedTime');
+ const remainingTime = document.getElementById('remainingTime');
+
+ if (!elapsedTime || !remainingTime) return;
+
+ // Calculate elapsed time
+ let elapsed;
+ if (status.start_time) {
+ const now = new Date();
+ const startTime = new Date(status.start_time * 1000);
+ elapsed = Math.floor((now - startTime) / 1000);
+ } else {
+ elapsed = 0;
+ }
+
+ elapsedTime.textContent = this.formatTime(elapsed);
+
+ // Calculate remaining time
+ if (status.total > 0 && status.completed > 0 && status.status === 'running') {
+ const rate = status.completed / elapsed; // models per second
+ const remaining = Math.floor((status.total - status.completed) / rate);
+ remainingTime.textContent = this.formatTime(remaining);
+ } else {
+ remainingTime.textContent = '--:--:--';
+ }
+ }
+
+ updateErrors(status) {
+ const errorContainer = document.getElementById('downloadErrorContainer');
+ const errorList = document.getElementById('downloadErrors');
+
+ if (!errorContainer || !errorList) return;
+
+ if (status.errors && status.errors.length > 0) {
+ // Show only the last 3 errors
+ const recentErrors = status.errors.slice(-3);
+ errorList.innerHTML = recentErrors.map(error =>
+ `
${error}
`
+ ).join('');
+
+ errorContainer.classList.remove('hidden');
+ } else {
+ errorContainer.classList.add('hidden');
+ }
+ }
+
+ formatTime(seconds) {
+ const hours = Math.floor(seconds / 3600);
+ const minutes = Math.floor((seconds % 3600) / 60);
+ const secs = seconds % 60;
+
+ return [
+ hours.toString().padStart(2, '0'),
+ minutes.toString().padStart(2, '0'),
+ secs.toString().padStart(2, '0')
+ ].join(':');
+ }
+
+ getStatusText(status) {
+ switch (status) {
+ case 'running': return 'Downloading';
+ case 'paused': return 'Paused';
+ case 'completed': return 'Completed';
+ case 'error': return 'Error';
+ default: return 'Initializing';
+ }
+ }
+
+ showProgressPanel() {
+ // Ensure progress panel exists
+ if (!this.progressPanel) {
+ this.progressPanel = document.getElementById('exampleImagesProgress');
+ if (!this.progressPanel) {
+ console.error('Progress panel element not found in DOM');
+ return;
+ }
+ }
+ this.progressPanel.classList.add('visible');
+ }
+
+ hideProgressPanel() {
+ if (!this.progressPanel) {
+ this.progressPanel = document.getElementById('exampleImagesProgress');
+ if (!this.progressPanel) return;
+ }
+ this.progressPanel.classList.remove('visible');
+ }
+
+ toggleProgressPanel() {
+ if (!this.progressPanel) {
+ this.progressPanel = document.getElementById('exampleImagesProgress');
+ if (!this.progressPanel) return;
+ }
+
+ this.isProgressPanelCollapsed = !this.isProgressPanelCollapsed;
+ this.progressPanel.classList.toggle('collapsed');
+
+ // Save collapsed state to storage
+ setStorageItem('progress_panel_collapsed', this.isProgressPanelCollapsed);
+
+ // Update icon
+ const icon = document.querySelector('#collapseProgressBtn i');
+ if (icon) {
+ if (this.isProgressPanelCollapsed) {
+ icon.className = 'fas fa-chevron-up';
+ } else {
+ icon.className = 'fas fa-chevron-down';
+ }
+ }
+
+ // Force update mini progress if panel is collapsed
+ if (this.isProgressPanelCollapsed) {
+ const progressBar = document.getElementById('downloadProgressBar');
+ if (progressBar) {
+ const progressPercent = parseFloat(progressBar.style.width) || 0;
+ this.updateMiniProgress(progressPercent);
+ }
+ }
+ }
+}
+
+// Create singleton instance
+export const exampleImagesManager = new ExampleImagesManager();
diff --git a/static/js/managers/SettingsManager.js b/static/js/managers/SettingsManager.js
index eff5655a..8bfdf9c8 100644
--- a/static/js/managers/SettingsManager.js
+++ b/static/js/managers/SettingsManager.js
@@ -147,6 +147,8 @@ export class SettingsManager {
state.global.settings.show_only_sfw = value;
} else if (settingKey === 'autoplay_on_hover') {
state.global.settings.autoplayOnHover = value;
+ } else if (settingKey === 'optimize_example_images') {
+ state.global.settings.optimizeExampleImages = value;
} else {
// For any other settings that might be added in the future
state.global.settings[settingKey] = value;
diff --git a/static/js/utils/uiHelpers.js b/static/js/utils/uiHelpers.js
index 90812225..a9da3b64 100644
--- a/static/js/utils/uiHelpers.js
+++ b/static/js/utils/uiHelpers.js
@@ -311,15 +311,12 @@ export function initFolderTagsVisibility() {
}
export function initBackToTop() {
- const button = document.createElement('button');
- button.className = 'back-to-top';
- button.innerHTML = '';
- button.title = 'Back to top';
- document.body.appendChild(button);
+ const button = document.getElementById('backToTopBtn');
+ if (!button) return;
// Get the scrollable container
const scrollContainer = document.querySelector('.page-content');
-
+
// Show/hide button based on scroll position
const toggleBackToTop = () => {
const scrollThreshold = window.innerHeight * 0.3;
diff --git a/templates/base.html b/templates/base.html
index 201c16b0..257ce245 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -73,8 +73,14 @@
{% include 'components/modals.html' %}
{% include 'components/loading.html' %}
{% include 'components/context_menu.html' %}
+ {% include 'components/progress_panel.html' %}
{% block additional_components %}{% endblock %}
+
+
+
{% if is_initializing %}
diff --git a/templates/components/modals.html b/templates/components/modals.html
index aec1246a..e3f1946e 100644
--- a/templates/components/modals.html
+++ b/templates/components/modals.html
@@ -125,6 +125,46 @@
+
Example Images
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ Enter the folder path where example images from Civitai will be saved
+
+
+
+
+
+
+
+
+
+
+
+
+ Optimize example images to reduce file size and improve loading speed
+
+
+
\ No newline at end of file
diff --git a/web/comfyui/usage_stats.js b/web/comfyui/usage_stats.js
index aa77aef7..20676d71 100644
--- a/web/comfyui/usage_stats.js
+++ b/web/comfyui/usage_stats.js
@@ -18,7 +18,7 @@ app.registerExtension({
async updateUsageStats(promptId) {
try {
// Call backend endpoint with the prompt_id
- const response = await fetch(`/loras/api/update-usage-stats`, {
+ const response = await fetch(`/api/update-usage-stats`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
+
+
+ Example Images Download
+
+
+
+
+
+
+
+
+
+
+
+ Initializing...
+ 0/0
+
+
+
+
+
+
+
+ Currently downloading:
+ -
+
+
+
+
+
+ Elapsed:
+ 00:00:00
+
+
+ Remaining:
+ --:--:--
+
+