mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-03-25 07:05:43 -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 'layout.css';
|
||||||
|
|
||||||
/* Import Components */
|
/* Import Components */
|
||||||
|
@import 'components/header.css';
|
||||||
@import 'components/card.css';
|
@import 'components/card.css';
|
||||||
@import 'components/modal.css';
|
@import 'components/modal.css';
|
||||||
@import 'components/download-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
|
// Recipe manager module
|
||||||
import { showToast } from './utils/uiHelpers.js';
|
import { showToast } from './utils/uiHelpers.js';
|
||||||
import { state } from './state/index.js';
|
import { state } from './state/index.js';
|
||||||
|
import { initializeCommonComponents } from './common.js';
|
||||||
|
|
||||||
class RecipeManager {
|
class RecipeManager {
|
||||||
constructor() {
|
constructor() {
|
||||||
@@ -199,10 +200,11 @@ class RecipeManager {
|
|||||||
// - Recipe search and filters
|
// - Recipe search and filters
|
||||||
}
|
}
|
||||||
|
|
||||||
// Initialize recipe manager when DOM is loaded
|
// Initialize components
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
initializeCommonComponents();
|
||||||
window.recipeManager = new RecipeManager();
|
window.recipeManager = new RecipeManager();
|
||||||
});
|
});
|
||||||
|
|
||||||
// Export for use in other modules
|
// 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>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
{% include 'components/header.html' %}
|
||||||
<div class="corner-controls">
|
<div class="corner-controls">
|
||||||
<div class="corner-controls-toggle">
|
<div class="corner-controls-toggle">
|
||||||
<i class="fas fa-ellipsis-v"></i>
|
<i class="fas fa-ellipsis-v"></i>
|
||||||
|
|||||||
@@ -119,29 +119,11 @@
|
|||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="corner-controls">
|
{% include 'components/header.html' %}
|
||||||
<div class="corner-controls-toggle">
|
<!-- Reuse corner controls component -->
|
||||||
<i class="fas fa-ellipsis-v"></i>
|
{% include 'components/corner_controls.html' %}
|
||||||
<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>
|
|
||||||
|
|
||||||
|
<!-- Reuse modals, loading, context menu -->
|
||||||
{% include 'components/modals.html' %}
|
{% include 'components/modals.html' %}
|
||||||
{% include 'components/loading.html' %}
|
{% include 'components/loading.html' %}
|
||||||
{% include 'components/context_menu.html' %}
|
{% include 'components/context_menu.html' %}
|
||||||
@@ -163,8 +145,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Recipe controls -->
|
<!-- Recipe controls - can reuse structure from loras controls -->
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
|
<!-- Recipe tags container - similar to folder tags -->
|
||||||
<div class="folder-tags-container">
|
<div class="folder-tags-container">
|
||||||
<div class="recipe-tag-container">
|
<div class="recipe-tag-container">
|
||||||
{% if recipe_tags %}
|
{% if recipe_tags %}
|
||||||
@@ -180,56 +163,12 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="actions">
|
<!-- Search container - similar structure to loras search -->
|
||||||
<div title="Sort recipes by..." class="control-group">
|
{% include 'components/search_controls.html' %}
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Recipe filter panel -->
|
<!-- Recipe grid - similar to lora grid -->
|
||||||
<div id="filterPanel" class="filter-panel hidden">
|
<div class="card-grid recipe-grid" id="recipeGrid">
|
||||||
<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">
|
|
||||||
{% if recipes and recipes|length > 0 %}
|
{% if recipes and recipes|length > 0 %}
|
||||||
{% for recipe in recipes %}
|
{% for recipe in recipes %}
|
||||||
<div class="recipe-card" data-file-path="{{ recipe.file_path }}" data-title="{{ recipe.title }}" data-created="{{ recipe.created_date }}">
|
<div class="recipe-card" data-file-path="{{ recipe.file_path }}" data-title="{{ recipe.title }}" data-created="{{ recipe.created_date }}">
|
||||||
@@ -370,4 +309,4 @@
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user