Implement saving model example images locally. Fixes https://github.com/willmiao/ComfyUI-Lora-Manager/issues/88

This commit is contained in:
Will Miao
2025-04-29 16:18:25 +08:00
parent 4789711910
commit cb876cf77e
20 changed files with 1581 additions and 138 deletions

View File

@@ -73,6 +73,7 @@
{% include 'components/modals.html' %}
{% include 'components/loading.html' %}
{% include 'components/context_menu.html' %}
{% include 'components/progress_panel.html' %}
{% block additional_components %}{% endblock %}
<div class="container">

View File

@@ -125,6 +125,57 @@
</div>
</div>
</div>
<!-- Add Example Images Settings Section -->
<div class="settings-section">
<h3>Example Images</h3>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="exampleImagesPath">Download Location</label>
</div>
<div class="setting-control path-browser-control">
<input type="text" id="exampleImagesPath" placeholder="Select a folder for example images" />
<button id="browseExampleImagesPath" class="browse-btn">
<i class="fas fa-folder-open"></i> Browse
</button>
</div>
</div>
<div class="input-help">
Choose where to save example images downloaded from Civitai
</div>
</div>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="optimizeExampleImages">Optimize Downloaded Images</label>
</div>
<div class="setting-control">
<label class="toggle-switch">
<input type="checkbox" id="optimizeExampleImages" checked
onchange="settingsManager.saveToggleSetting('optimizeExampleImages', 'optimize_example_images')">
<span class="toggle-slider"></span>
</label>
</div>
</div>
<div class="input-help">
Optimize example images to reduce file size and improve loading speed
</div>
</div>
<div class="setting-item">
<div class="setting-row download-buttons">
<button id="startExampleDownloadBtn" class="primary-btn disabled">
<i class="fas fa-download"></i> Download Example Images
</button>
<button id="resumeExampleDownloadBtn" class="primary-btn" style="display: none;">
<i class="fas fa-play"></i> Resume Download
</button>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,48 @@
<!-- Example Images Download Progress Panel -->
<div id="exampleImagesProgress" class="progress-panel">
<div class="progress-panel-header">
<div class="progress-panel-title">
<i class="fas fa-images"></i> Example Images Download
</div>
<div class="progress-panel-actions">
<button id="pauseExampleDownloadBtn" class="icon-button" onclick="exampleImagesManager.pauseDownload()">
<i class="fas fa-pause"></i>
</button>
<button id="collapseProgressBtn" class="icon-button" onclick="exampleImagesManager.toggleProgressPanel()">
<i class="fas fa-chevron-down"></i>
</button>
</div>
</div>
<div class="progress-panel-content">
<div class="download-progress-info">
<div class="progress-status">
<span id="downloadStatusText">Initializing...</span>
<span id="downloadProgressCounts">0/0</span>
</div>
<div class="progress-container">
<div id="downloadProgressBar" class="progress-bar" style="width: 0%;"></div>
</div>
</div>
<div class="current-model-info">
<div class="current-label">Currently downloading:</div>
<div id="currentModelName" class="current-model-name">-</div>
</div>
<div class="download-stats">
<div class="stat-item">
<span class="stat-label">Elapsed:</span>
<span id="elapsedTime" class="stat-value">00:00:00</span>
</div>
<div class="stat-item">
<span class="stat-label">Remaining:</span>
<span id="remainingTime" class="stat-value">--:--:--</span>
</div>
</div>
<div id="downloadErrorContainer" class="download-errors hidden">
<div class="error-header">Recent Errors:</div>
<div id="downloadErrors" class="error-list"></div>
</div>
</div>
</div>