refactor: Enhance checkpoint download functionality with new modal and manager integration

This commit is contained in:
Will Miao
2025-04-11 18:25:37 +08:00
parent 3df96034a1
commit 1db49a4dd4
10 changed files with 699 additions and 43 deletions

View File

@@ -32,4 +32,73 @@
</div>
</div>
</div>
</div>
<!-- Download Checkpoint from URL Modal -->
<div id="checkpointDownloadModal" class="modal">
<div class="modal-content">
<button class="close" onclick="modalManager.closeModal('checkpointDownloadModal')">&times;</button>
<h2>Download Checkpoint from URL</h2>
<!-- Step 1: URL Input -->
<div class="download-step" id="cpUrlStep">
<div class="input-group">
<label for="checkpointUrl">Civitai URL:</label>
<input type="text" id="checkpointUrl" placeholder="https://civitai.com/models/..." />
<div class="error-message" id="cpUrlError"></div>
</div>
<div class="modal-actions">
<button class="primary-btn" onclick="checkpointDownloadManager.validateAndFetchVersions()">Next</button>
</div>
</div>
<!-- Step 2: Version Selection -->
<div class="download-step" id="cpVersionStep" style="display: none;">
<div class="version-list" id="cpVersionList">
<!-- Versions will be inserted here dynamically -->
</div>
<div class="modal-actions">
<button class="secondary-btn" onclick="checkpointDownloadManager.backToUrl()">Back</button>
<button class="primary-btn" onclick="checkpointDownloadManager.proceedToLocation()">Next</button>
</div>
</div>
<!-- Step 3: Location Selection -->
<div class="download-step" id="cpLocationStep" style="display: none;">
<div class="location-selection">
<!-- Move path preview to top -->
<div class="path-preview">
<label>Download Location Preview:</label>
<div class="path-display" id="cpTargetPathDisplay">
<span class="path-text">Select a Checkpoint root directory</span>
</div>
</div>
<div class="input-group">
<label>Select Checkpoint Root:</label>
<select id="checkpointRoot"></select>
</div>
<div class="input-group">
<label>Target Folder:</label>
<div class="folder-browser" id="cpFolderBrowser">
{% for folder in folders %}
{% if folder %}
<div class="folder-item" data-folder="{{ folder }}">
{{ folder }}
</div>
{% endif %}
{% endfor %}
</div>
</div>
<div class="input-group">
<label for="cpNewFolder">New Folder (optional):</label>
<input type="text" id="cpNewFolder" placeholder="Enter folder name" />
</div>
</div>
<div class="modal-actions">
<button class="secondary-btn" onclick="checkpointDownloadManager.backToVersions()">Back</button>
<button class="primary-btn" onclick="checkpointDownloadManager.startDownload()">Download</button>
</div>
</div>
</div>
</div>