Enhance Checkpoints Manager: Implement API integration for checkpoints, add filtering and sorting options, and improve UI components for better user experience

This commit is contained in:
Will Miao
2025-04-10 16:04:08 +08:00
parent 048d486fa6
commit 252e90a633
10 changed files with 877 additions and 41 deletions

View File

@@ -8,18 +8,19 @@
{% endblock %}
{% block init_title %}Initializing Checkpoints Manager{% endblock %}
{% block init_message %}Setting up checkpoints interface. This may take a few moments...{% endblock %}
{% block init_message %}Scanning and building checkpoints cache. This may take a few moments...{% endblock %}
{% block init_check_url %}/api/checkpoints?page=1&page_size=1{% endblock %}
{% block additional_components %}
{% include 'components/checkpoint_modals.html' %}
{% endblock %}
{% block content %}
<div class="work-in-progress">
<div class="wip-content">
<i class="fas fa-tools"></i>
<h2>Checkpoints Manager</h2>
<p>This feature is currently under development and will be available soon.</p>
<p>Please check back later for updates!</p>
{% include 'components/controls.html' %}
<!-- Checkpoint cards container -->
<div class="card-grid" id="checkpointGrid">
<!-- Cards will be dynamically inserted here -->
</div>
</div>
{% endblock %}
{% block main_script %}

View File

@@ -0,0 +1,35 @@
<!-- Checkpoint Modals -->
<!-- Delete Confirmation Modal -->
<div id="deleteConfirmModal" class="modal" style="display: none;">
<div class="modal-content">
<div class="modal-header">
<h2>Confirm Delete</h2>
<span class="close">&times;</span>
</div>
<div class="modal-body">
<p id="deleteConfirmMessage">Are you sure you want to delete this checkpoint?</p>
</div>
<div class="modal-footer">
<button id="cancelDeleteBtn" class="btn btn-secondary">Cancel</button>
<button id="confirmDeleteBtn" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
<!-- Checkpoint Details Modal (to be implemented in the future) -->
<div id="checkpointModal" class="modal" style="display: none;">
<div class="modal-content modal-large">
<div class="modal-header">
<h2 id="checkpointModalTitle">Checkpoint Details</h2>
<span class="close">&times;</span>
</div>
<div class="modal-body">
<div id="checkpointModalContent">
<!-- Content will be dynamically added here -->
<div class="placeholder-message">
<p>Checkpoint details will be displayed here.</p>
</div>
</div>
</div>
</div>
</div>

View File

@@ -74,6 +74,7 @@
{% elif request.path == '/checkpoints' %}
<div class="search-option-tag active" data-option="filename">Filename</div>
<div class="search-option-tag active" data-option="modelname">Checkpoint Name</div>
<div class="search-option-tag active" data-option="tags">Tags</div>
{% else %}
<!-- Default options for LoRAs page -->
<div class="search-option-tag active" data-option="filename">Filename</div>