mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-03-22 13:42:12 -03:00
checkpoint
This commit is contained in:
Will Miao
11
pages/checkpoints.html
Normal file
11
pages/checkpoints.html
Normal file
@@ -0,0 +1,11 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- ...existing code... -->
|
||||
</head>
|
||||
<body>
|
||||
{% include 'components/header.html' %}
|
||||
<!-- ...existing code... -->
|
||||
</body>
|
||||
</html>
|
||||
10
pages/loras.html
Normal file
10
pages/loras.html
Normal file
@@ -0,0 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- ...existing code... -->
|
||||
</head>
|
||||
<body>
|
||||
{% include 'components/header.html' %}
|
||||
<!-- ...existing code... -->
|
||||
</body>
|
||||
</html>
|
||||
10
pages/recipes.html
Normal file
10
pages/recipes.html
Normal file
@@ -0,0 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- ...existing code... -->
|
||||
</head>
|
||||
<body>
|
||||
{% include 'components/header.html' %}
|
||||
<!-- ...existing code... -->
|
||||
</body>
|
||||
</html>
|
||||
63
static/css/components/header.css
Normal file
63
static/css/components/header.css
Normal file
@@ -0,0 +1,63 @@
|
||||
.app-header {
|
||||
background: var(--card-bg);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: var(--z-header);
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: var(--border-radius-base);
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: var(--lora-surface-hover);
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background: var(--lora-primary);
|
||||
color: var(--lora-text-on-primary);
|
||||
}
|
||||
|
||||
/* Mobile adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.header-container {
|
||||
flex-direction: column;
|
||||
padding-top: 0.5rem;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
@@ -5,6 +5,7 @@
|
||||
@import 'layout.css';
|
||||
|
||||
/* Import Components */
|
||||
@import 'components/header.css';
|
||||
@import 'components/card.css';
|
||||
@import 'components/modal.css';
|
||||
@import 'components/download-modal.css';
|
||||
|
||||
16
static/js/common.js
Normal file
16
static/js/common.js
Normal file
@@ -0,0 +1,16 @@
|
||||
import { toggleTheme, initTheme } from './utils/uiHelpers.js';
|
||||
import { modalManager } from './managers/ModalManager.js';
|
||||
import { updateService } from './managers/UpdateService.js';
|
||||
import { SettingsManager } from './managers/SettingsManager.js';
|
||||
|
||||
// Export common functions
|
||||
export function initializeCommonComponents() {
|
||||
modalManager.initialize();
|
||||
updateService.initialize();
|
||||
initTheme();
|
||||
|
||||
// Initialize common controls
|
||||
window.toggleTheme = toggleTheme;
|
||||
window.modalManager = modalManager;
|
||||
window.settingsManager = new SettingsManager();
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
// Recipe manager module
|
||||
import { showToast } from './utils/uiHelpers.js';
|
||||
import { state } from './state/index.js';
|
||||
import { initializeCommonComponents } from './common.js';
|
||||
|
||||
class RecipeManager {
|
||||
constructor() {
|
||||
@@ -199,10 +200,11 @@ class RecipeManager {
|
||||
// - Recipe search and filters
|
||||
}
|
||||
|
||||
// Initialize recipe manager when DOM is loaded
|
||||
// Initialize components
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initializeCommonComponents();
|
||||
window.recipeManager = new RecipeManager();
|
||||
});
|
||||
|
||||
// Export for use in other modules
|
||||
export { RecipeManager };
|
||||
export { RecipeManager };
|
||||
22
templates/components/corner_controls.html
Normal file
22
templates/components/corner_controls.html
Normal file
@@ -0,0 +1,22 @@
|
||||
<div class="corner-controls">
|
||||
<div class="corner-controls-toggle">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
<span class="update-badge corner-badge hidden"></span>
|
||||
</div>
|
||||
<div class="corner-controls-items">
|
||||
<div class="theme-toggle" onclick="toggleTheme()" title="Toggle theme">
|
||||
<img src="/loras_static/images/theme-toggle-light.svg" alt="Theme" class="theme-icon light-icon">
|
||||
<img src="/loras_static/images/theme-toggle-dark.svg" alt="Theme" class="theme-icon dark-icon">
|
||||
</div>
|
||||
<div class="update-toggle" id="updateToggleBtn" title="Check Updates">
|
||||
<i class="fas fa-bell"></i>
|
||||
<span class="update-badge hidden"></span>
|
||||
</div>
|
||||
<div class="support-toggle" id="supportToggleBtn" title="Support">
|
||||
<i class="fas fa-heart"></i>
|
||||
</div>
|
||||
<div class="settings-toggle" onclick="settingsManager.toggleSettings()" title="Settings">
|
||||
<i class="fas fa-cog"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
21
templates/components/header.html
Normal file
21
templates/components/header.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<header class="app-header">
|
||||
<div class="header-container">
|
||||
<div class="header-branding">
|
||||
<h1 class="app-title">ComfyUI Manager</h1>
|
||||
</div>
|
||||
<nav class="main-nav">
|
||||
<a href="/loras" class="nav-item {% if current_page == 'loras' %}active{% endif %}">
|
||||
<i class="fas fa-layer-group"></i> LoRAs
|
||||
</a>
|
||||
<a href="/loras/recipes" class="nav-item {% if current_page == 'recipes' %}active{% endif %}">
|
||||
<i class="fas fa-book-open"></i> Recipes
|
||||
</a>
|
||||
<a href="/checkpoints" class="nav-item {% if current_page == 'checkpoints' %}active{% endif %}">
|
||||
<i class="fas fa-check-circle"></i> Checkpoints
|
||||
</a>
|
||||
</nav>
|
||||
<div class="header-actions">
|
||||
<!-- Page-specific action buttons can go here -->
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
4
templates/components/search_controls.html
Normal file
4
templates/components/search_controls.html
Normal file
@@ -0,0 +1,4 @@
|
||||
<div class="search-container">
|
||||
<input type="text" id="searchInput" placeholder="Search...">
|
||||
<button id="searchButton"><i class="fas fa-search"></i></button>
|
||||
</div>
|
||||
@@ -46,6 +46,7 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
{% include 'components/header.html' %}
|
||||
<div class="corner-controls">
|
||||
<div class="corner-controls-toggle">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
|
||||
@@ -119,29 +119,11 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="corner-controls">
|
||||
<div class="corner-controls-toggle">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
<span class="update-badge corner-badge hidden"></span>
|
||||
</div>
|
||||
<div class="corner-controls-items">
|
||||
<div class="theme-toggle" onclick="toggleTheme()" title="Toggle theme">
|
||||
<img src="/loras_static/images/theme-toggle-light.svg" alt="Theme" class="theme-icon light-icon">
|
||||
<img src="/loras_static/images/theme-toggle-dark.svg" alt="Theme" class="theme-icon dark-icon">
|
||||
</div>
|
||||
<div class="update-toggle" id="updateToggleBtn" title="Check Updates">
|
||||
<i class="fas fa-bell"></i>
|
||||
<span class="update-badge hidden"></span>
|
||||
</div>
|
||||
<div class="support-toggle" id="supportToggleBtn" title="Support">
|
||||
<i class="fas fa-heart"></i>
|
||||
</div>
|
||||
<div class="settings-toggle" onclick="settingsManager.toggleSettings()" title="Settings">
|
||||
<i class="fas fa-cog"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include 'components/header.html' %}
|
||||
<!-- Reuse corner controls component -->
|
||||
{% include 'components/corner_controls.html' %}
|
||||
|
||||
<!-- Reuse modals, loading, context menu -->
|
||||
{% include 'components/modals.html' %}
|
||||
{% include 'components/loading.html' %}
|
||||
{% include 'components/context_menu.html' %}
|
||||
@@ -163,8 +145,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recipe controls -->
|
||||
<!-- Recipe controls - can reuse structure from loras controls -->
|
||||
<div class="controls">
|
||||
<!-- Recipe tags container - similar to folder tags -->
|
||||
<div class="folder-tags-container">
|
||||
<div class="recipe-tag-container">
|
||||
{% if recipe_tags %}
|
||||
@@ -180,56 +163,12 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<div title="Sort recipes by..." class="control-group">
|
||||
<select id="sortSelect">
|
||||
<option value="date">Date</option>
|
||||
<option value="name">Name</option>
|
||||
</select>
|
||||
</div>
|
||||
<div title="Refresh recipes list" class="control-group">
|
||||
<button onclick="refreshRecipes()"><i class="fas fa-sync"></i> Refresh</button>
|
||||
</div>
|
||||
<div class="search-container">
|
||||
<input type="text" id="searchInput" placeholder="Search recipes..." />
|
||||
<i class="fas fa-search search-icon"></i>
|
||||
<button class="search-filter-toggle" id="filterButton" onclick="recipeFilterManager.toggleFilterPanel()" title="Filter recipes">
|
||||
<i class="fas fa-filter"></i>
|
||||
<span class="filter-badge" id="activeFiltersCount" style="display: none">0</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Search container - similar structure to loras search -->
|
||||
{% include 'components/search_controls.html' %}
|
||||
</div>
|
||||
|
||||
<!-- Recipe filter panel -->
|
||||
<div id="filterPanel" class="filter-panel hidden">
|
||||
<div class="filter-header">
|
||||
<h3>Filter Recipes</h3>
|
||||
<button class="close-filter-btn" onclick="recipeFilterManager.closeFilterPanel()">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="filter-section">
|
||||
<h4>Base Model</h4>
|
||||
<div class="filter-tags" id="baseModelTags">
|
||||
<!-- Tags will be dynamically inserted here -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-section">
|
||||
<h4>LoRAs</h4>
|
||||
<div class="filter-tags" id="loraModelTags">
|
||||
<!-- LoRA tags will be dynamically inserted here -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<button class="clear-filters-btn" onclick="recipeFilterManager.clearFilters()">
|
||||
Clear All Filters
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recipe gallery container -->
|
||||
<div class="recipe-grid" id="recipeGrid">
|
||||
<!-- Recipe grid - similar to lora grid -->
|
||||
<div class="card-grid recipe-grid" id="recipeGrid">
|
||||
{% if recipes and recipes|length > 0 %}
|
||||
{% for recipe in recipes %}
|
||||
<div class="recipe-card" data-file-path="{{ recipe.file_path }}" data-title="{{ recipe.title }}" data-created="{{ recipe.created_date }}">
|
||||
@@ -370,4 +309,4 @@
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
Reference in New Issue
Block a user