1009 lines
32 KiB
HTML
1009 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="color-scheme" content="light dark" />
|
|
<title>Majoor Assets Manager - 🎨 Modern User Guide</title>
|
|
<style>
|
|
:root {
|
|
/* Light theme colors */
|
|
--bg-light: #f8fafc;
|
|
--panel-light: #ffffff;
|
|
--text-light: #1e293b;
|
|
--muted-light: #64748b;
|
|
--border-light: #e2e8f0;
|
|
--accent-light: #3b82f6;
|
|
--success-light: #10b981;
|
|
--warning-light: #f59e0b;
|
|
--danger-light: #ef4444;
|
|
|
|
/* Dark theme colors */
|
|
--bg-dark: #0f172a;
|
|
--panel-dark: #1e293b;
|
|
--text-dark: #e2e8f0;
|
|
--muted-dark: #94a3b8;
|
|
--border-dark: #334155;
|
|
--accent-dark: #60a5fa;
|
|
--success-dark: #34d399;
|
|
--warning-dark: #fbbf24;
|
|
--danger-dark: #f87171;
|
|
|
|
/* Theme variables */
|
|
--bg: var(--bg-light);
|
|
--panel: var(--panel-light);
|
|
--text: var(--text-light);
|
|
--muted: var(--muted-light);
|
|
--border: var(--border-light);
|
|
--accent: var(--accent-light);
|
|
--success: var(--success-light);
|
|
--warning: var(--warning-light);
|
|
--danger: var(--danger-light);
|
|
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
--radius: 12px;
|
|
--radius-small: 8px;
|
|
--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
--sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: var(--bg-dark);
|
|
--panel: var(--panel-dark);
|
|
--text: var(--text-dark);
|
|
--muted: var(--muted-dark);
|
|
--border: var(--border-dark);
|
|
--accent: var(--accent-dark);
|
|
--success: var(--success-dark);
|
|
--warning: var(--warning-dark);
|
|
--danger: var(--danger-dark);
|
|
}
|
|
}
|
|
|
|
/* Forced dark/light theme classes */
|
|
.theme-light {
|
|
--bg: var(--bg-light);
|
|
--panel: var(--panel-light);
|
|
--text: var(--text-light);
|
|
--muted: var(--muted-light);
|
|
--border: var(--border-light);
|
|
--accent: var(--accent-light);
|
|
--success: var(--success-light);
|
|
--warning: var(--warning-light);
|
|
--danger: var(--danger-light);
|
|
}
|
|
|
|
.theme-dark {
|
|
--bg: var(--bg-dark);
|
|
--panel: var(--panel-dark);
|
|
--text: var(--text-dark);
|
|
--muted: var(--muted-dark);
|
|
--border: var(--border-dark);
|
|
--accent: var(--accent-dark);
|
|
--success: var(--success-dark);
|
|
--warning: var(--warning-dark);
|
|
--danger: var(--danger-dark);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--sans);
|
|
color: var(--text);
|
|
background: var(--bg);
|
|
line-height: 1.6;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
a {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
mark {
|
|
background: color-mix(in srgb, var(--accent) 20%, transparent);
|
|
color: var(--text);
|
|
padding: 0 4px;
|
|
border-radius: 4px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
code {
|
|
font-family: var(--mono);
|
|
font-size: 0.875em;
|
|
padding: 2px 6px;
|
|
border-radius: var(--radius-small);
|
|
background: color-mix(in srgb, var(--text) 10%, transparent);
|
|
color: var(--accent);
|
|
}
|
|
|
|
pre {
|
|
margin: 1rem 0;
|
|
padding: 1rem;
|
|
border-radius: var(--radius);
|
|
background: color-mix(in srgb, var(--text) 5%, transparent);
|
|
overflow: auto;
|
|
box-shadow: inset 0 0 0 1px var(--border);
|
|
}
|
|
|
|
pre code {
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
font-size: 0.875em;
|
|
display: block;
|
|
}
|
|
|
|
hr {
|
|
border: 0;
|
|
border-top: 1px solid var(--border);
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
blockquote {
|
|
margin: 1rem 0;
|
|
padding: 1rem;
|
|
border-left: 4px solid var(--accent);
|
|
background: color-mix(in srgb, var(--accent) 10%, transparent);
|
|
border-radius: 0 var(--radius) var(--radius) 0;
|
|
color: var(--text);
|
|
}
|
|
|
|
.table-wrap {
|
|
overflow: auto;
|
|
border-radius: var(--radius);
|
|
border: 1px solid var(--border);
|
|
background: color-mix(in srgb, var(--text) 3%, transparent);
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th, td {
|
|
padding: 0.75rem;
|
|
vertical-align: top;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
th {
|
|
text-align: left;
|
|
font-weight: 600;
|
|
color: var(--muted);
|
|
background: color-mix(in srgb, var(--text) 5%, transparent);
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.header {
|
|
background: linear-gradient(135deg, var(--accent), #8b5cf6);
|
|
color: white;
|
|
padding: 2rem;
|
|
border-radius: 0 0 var(--radius) var(--radius);
|
|
margin-bottom: 2rem;
|
|
text-align: center;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.header p {
|
|
font-size: 1.1rem;
|
|
opacity: 0.9;
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.toc {
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.toc h2 {
|
|
margin-bottom: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.toc ul {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.toc li {
|
|
margin-bottom: 0.5rem;
|
|
padding-left: 1.5rem;
|
|
position: relative;
|
|
}
|
|
|
|
.toc li:before {
|
|
content: "▶";
|
|
position: absolute;
|
|
left: 0;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.section {
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.section h2 {
|
|
font-size: 1.75rem;
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 2px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.section h3 {
|
|
font-size: 1.4rem;
|
|
margin: 1.5rem 0 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: var(--text);
|
|
}
|
|
|
|
.section h4 {
|
|
font-size: 1.1rem;
|
|
margin: 1.25rem 0 0.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: var(--text);
|
|
}
|
|
|
|
.section p {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.section ul, .section ol {
|
|
margin: 1rem 0;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.section li {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.feature-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 1.5rem;
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
.feature-card {
|
|
background: color-mix(in srgb, var(--text) 5%, transparent);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 1.25rem;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.feature-card h5 {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.75rem;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.callout {
|
|
border-left: 4px solid var(--accent);
|
|
background: color-mix(in srgb, var(--accent) 10%, transparent);
|
|
border-radius: 0 var(--radius) var(--radius) 0;
|
|
padding: 1rem;
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
.callout.warning {
|
|
border-left-color: var(--warning);
|
|
background: color-mix(in srgb, var(--warning) 10%, transparent);
|
|
}
|
|
|
|
.callout.success {
|
|
border-left-color: var(--success);
|
|
background: color-mix(in srgb, var(--success) 10%, transparent);
|
|
}
|
|
|
|
.callout.danger {
|
|
border-left-color: var(--danger);
|
|
background: color-mix(in srgb, var(--danger) 10%, transparent);
|
|
}
|
|
|
|
.icon-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 50px;
|
|
background: color-mix(in srgb, var(--accent) 15%, transparent);
|
|
color: var(--accent);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.theme-toggle {
|
|
position: fixed;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: 50%;
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
z-index: 100;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.footer {
|
|
text-align: center;
|
|
padding: 2rem;
|
|
color: var(--muted);
|
|
font-size: 0.875rem;
|
|
margin-top: 2rem;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.highlight-box {
|
|
background: linear-gradient(135deg, var(--accent), #8b5cf6);
|
|
color: white;
|
|
padding: 1.5rem;
|
|
border-radius: var(--radius);
|
|
margin: 1.5rem 0;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.highlight-box h3 {
|
|
color: white;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.emoji-large {
|
|
font-size: 2rem;
|
|
display: block;
|
|
text-align: center;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.step-list {
|
|
counter-reset: step-counter;
|
|
list-style: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.step-list li {
|
|
counter-increment: step-counter;
|
|
position: relative;
|
|
padding-left: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.step-list li:before {
|
|
content: counter(step-counter);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background: var(--accent);
|
|
color: white;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.feature-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="theme-toggle" onclick="toggleTheme()" title="Toggle theme">
|
|
🌙
|
|
</div>
|
|
|
|
<div class="header">
|
|
<h1>🎨 Majoor Assets Manager - Ultimate User Guide</h1>
|
|
<p>Your comprehensive resource for mastering the most powerful asset management tool for ComfyUI</p>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="toc">
|
|
<h2>📋 Table of Contents</h2>
|
|
<ul>
|
|
<li><a href="#introduction">👋 Introduction & Overview</a></li>
|
|
<li><a href="#installation">📦 Installation & Setup</a></li>
|
|
<li><a href="#core-features">⭐ Core Features</a></li>
|
|
<li><a href="#search-filtering">🔍 Search & Filtering</a></li>
|
|
<li><a href="#metadata-viewer">🖼️ Metadata & Viewer</a></li>
|
|
<li><a href="#organization">📂 Organization Tools</a></li>
|
|
<li><a href="#drag-drop">🔄 Drag & Drop</a></li>
|
|
<li><a href="#shortcuts">⌨️ Keyboard Shortcuts</a></li>
|
|
<li><a href="#configuration">⚙️ Configuration</a></li>
|
|
<li><a href="#troubleshooting">🛠️ Troubleshooting</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<section id="introduction" class="section">
|
|
<h2>👋 Introduction & Overview</h2>
|
|
<p>The <strong>Majoor Assets Manager</strong> is the ultimate asset management solution for ComfyUI enthusiasts. It transforms how you organize, search, and utilize your generated assets with powerful features and an intuitive interface.</p>
|
|
|
|
<div class="highlight-box">
|
|
<div class="emoji-large">✨</div>
|
|
<h3>Why Choose Majoor Assets Manager?</h3>
|
|
<p>Experience the most comprehensive asset management solution with cutting-edge features that streamline your creative workflow!</p>
|
|
</div>
|
|
|
|
<div class="feature-grid">
|
|
<div class="feature-card">
|
|
<h5>⚡ Lightning-Fast Search</h5>
|
|
<p>Powered by SQLite FTS5 with BM25 ranking for instant results across thousands of assets.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h5>📊 Rich Metadata</h5>
|
|
<p>Extract generation info from PNG/WEBP/video files with ExifTool and FFprobe integration.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h5>🎨 Advanced Viewer</h5>
|
|
<p>With comparison tools, analysis features, and enhancement controls for detailed inspection.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="callout">
|
|
<h4>💡 Pro Tip</h4>
|
|
<p>Start with the <code>Outputs</code> tab to explore your generated assets. The interface will automatically index and display your creations!</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="installation" class="section">
|
|
<h2>📦 Installation & Setup</h2>
|
|
<p>Get up and running with Majoor Assets Manager in minutes with our streamlined installation process.</p>
|
|
|
|
<h3>📋 Prerequisites</h3>
|
|
<ul>
|
|
<li>✅ ComfyUI installation</li>
|
|
<li>✅ Python 3.8 or higher</li>
|
|
<li>✅ At least 500MB free disk space</li>
|
|
</ul>
|
|
|
|
<h3>🚀 Quick Installation (Recommended)</h3>
|
|
<div class="callout success">
|
|
<h4>Using ComfyUI Manager</h4>
|
|
<ol class="step-list">
|
|
<li>Open ComfyUI Manager in your browser</li>
|
|
<li>Find "Majoor Assets Manager" in the extensions list</li>
|
|
<li>Click "Install" next to the extension</li>
|
|
<li>Wait for the installation to complete</li>
|
|
<li>Restart ComfyUI completely</li>
|
|
<li>The extension should now be available in the Assets Manager tab</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<h3>🔧 Manual Installation</h3>
|
|
<ol class="step-list">
|
|
<li>Navigate to your ComfyUI custom_nodes directory</li>
|
|
<li>Clone the repository:
|
|
<pre><code class="language-bash">git clone https://github.com/MajoorWaldi/ComfyUI-Majoor-AssetsManager ComfyUI-Majoor-AssetsManager</code></pre>
|
|
</li>
|
|
<li>Install Python dependencies:
|
|
<pre><code class="language-bash">cd ComfyUI-Majoor-AssetsManager
|
|
pip install -r requirements.txt</code></pre>
|
|
</li>
|
|
<li>Restart ComfyUI to load the new extension</li>
|
|
</ol>
|
|
|
|
<h3>🛠️ Optional Dependencies (Highly Recommended)</h3>
|
|
<p>For full functionality including metadata extraction and file tagging, install these external tools:</p>
|
|
|
|
<div class="feature-grid">
|
|
<div class="feature-card">
|
|
<h5>🖥️ Windows</h5>
|
|
<p>Using Scoop:</p>
|
|
<pre><code class="language-powershell">scoop install ffmpeg exiftool</code></pre>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h5>🍎 macOS</h5>
|
|
<p>Using Homebrew:</p>
|
|
<pre><code class="language-bash">brew install ffmpeg exiftool</code></pre>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h5>🐧 Linux</h5>
|
|
<p>Ubuntu/Debian:</p>
|
|
<pre><code class="language-bash">sudo apt update
|
|
sudo apt install -y ffmpeg libimage-exiftool-perl</code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="core-features" class="section">
|
|
<h2>⭐ Core Features</h2>
|
|
<p>Discover the powerful capabilities that make Majoor Assets Manager the premier choice for asset management.</p>
|
|
|
|
<h3>🌐 Four-Tab Interface</h3>
|
|
<div class="feature-grid">
|
|
<div class="feature-card">
|
|
<h5>📤 Outputs</h5>
|
|
<p>Browse your ComfyUI output directory with powerful filtering and search capabilities.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h5>📥 Inputs</h5>
|
|
<p>Manage your input assets with the same powerful tools as your outputs.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h5>📁 Custom</h5>
|
|
<p>Access user-defined directories for comprehensive asset management.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h5>📚 Collections</h5>
|
|
<p>Organize assets into custom collections for project-based workflows.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>🔍 Smart Indexing</h3>
|
|
<p>The Assets Manager automatically indexes your assets with:</p>
|
|
<ul>
|
|
<li>⚡ Incremental scanning for fast updates</li>
|
|
<li>🔄 Background processing for non-blocking operations</li>
|
|
<li>💾 Efficient caching for optimal performance</li>
|
|
<li>🔒 Safe file operations with validation</li>
|
|
</ul>
|
|
|
|
<div class="callout warning">
|
|
<h4>⚠️ Performance Tip</h4>
|
|
<p>The first scan of a large directory may take time, but subsequent scans are much faster thanks to incremental indexing!</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="search-filtering" class="section">
|
|
<h2>🔍 Search & Filtering</h2>
|
|
<p>Powerful search and filtering capabilities to find exactly what you need in seconds.</p>
|
|
|
|
<h3>⚡ Full-Text Search</h3>
|
|
<p>Our search engine uses SQLite FTS5 with BM25 ranking for the most relevant results:</p>
|
|
<ul>
|
|
<li>🔍 Searches filenames, metadata, prompts, and other text fields</li>
|
|
<li>📊 Results ranked by relevance using advanced algorithms</li>
|
|
<li>🌍 Works across all scopes (Outputs, Inputs, Custom, Collections)</li>
|
|
<li>⚡ Near-instantaneous results even with thousands of assets</li>
|
|
</ul>
|
|
|
|
<h3>🎯 Advanced Filters</h3>
|
|
<div class="feature-grid">
|
|
<div class="feature-card">
|
|
<h5>🏷️ Kind Filter</h5>
|
|
<p>Filter by file type: Images, Videos, Workflows, and more.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h5>⭐ Rating Filter</h5>
|
|
<p>Show only assets with minimum rating (1-5 stars).</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h5>📅 Date Filters</h5>
|
|
<p>Filter by creation/modification dates for temporal searches.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h5>⚙️ Workflow Filter</h5>
|
|
<p>Show only assets with embedded workflow information.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>📝 Search Tips</h3>
|
|
<ul>
|
|
<li>Use quotes for exact phrase matching: <code>"landscape portrait"</code></li>
|
|
<li>Combine multiple terms for broader search: <code>character landscape</code></li>
|
|
<li>Search for specific parameters: <code>model:SDXL</code> or <code>steps:30</code></li>
|
|
<li>Use the summary line to see total assets and current selection count</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section id="metadata-viewer" class="section">
|
|
<h2>🖼️ Metadata & Viewer</h2>
|
|
<p>Comprehensive metadata extraction and an advanced viewer with powerful analysis tools.</p>
|
|
|
|
<h3>📋 Metadata Extraction</h3>
|
|
<p>We support multiple backends for comprehensive metadata extraction:</p>
|
|
|
|
<div class="feature-grid">
|
|
<div class="feature-card">
|
|
<h5>📸 Image Metadata</h5>
|
|
<p>Generation parameters, workflow information, technical details, and custom tags.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h5>🎬 Video Metadata</h5>
|
|
<p>Duration, frame rate, resolution, audio information, and embedded parameters.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h5>🛠️ Extraction Backends</h5>
|
|
<p>ExifTool (most comprehensive), FFprobe (video/audio focused), and built-in extraction.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>📺 Advanced Viewer Features</h3>
|
|
<div class="feature-grid">
|
|
<div class="feature-card">
|
|
<h5>🔍 Single View Mode</h5>
|
|
<p>Zoom, pan, 1:1 pixel view, exposure adjustment, gamma correction, and channel isolation.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h5> ↔️ Comparison Modes</h5>
|
|
<p>Side-by-side, A/B toggle, wipe slider, and difference comparison tools.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h5>🎥 Video Player</h5>
|
|
<p>Loop/once playback, seek controls, in/out point markers, and frame-by-frame stepping.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h5>📐 Overlays</h5>
|
|
<p>Grid overlays, pixel probe, loupe magnification, and histogram/waveform scopes.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="organization" class="section">
|
|
<h2>📂 Organization Tools</h2>
|
|
<p>Powerful tools to keep your assets organized and easily accessible.</p>
|
|
|
|
<h3>⭐ Rating System</h3>
|
|
<p>Rate assets from 0 to 5 stars for quick quality assessment:</p>
|
|
<ul>
|
|
<li>⭐ 0 Stars: Poor quality or unusable</li>
|
|
<li>⭐ 1 Star: Below average quality</li>
|
|
<li>⭐ 2 Stars: Average quality</li>
|
|
<li>⭐ 3 Stars: Good quality</li>
|
|
<li>⭐ 4 Stars: Very good quality</li>
|
|
<li>⭐ 5 Stars: Excellent quality</li>
|
|
</ul>
|
|
|
|
<h3>🏷️ Tagging System</h3>
|
|
<p>Customizable keywords to categorize and organize your assets:</p>
|
|
<ul>
|
|
<li>📝 Free-form text labels (e.g., "character", "landscape", "fantasy")</li>
|
|
<li>🔗 Multiple tags per asset</li>
|
|
<li>🏗️ Hierarchical tagging support (e.g., "style:anime", "color:warm")</li>
|
|
<li>🔍 Searchable across all assets</li>
|
|
</ul>
|
|
|
|
<h3>📚 Collections</h3>
|
|
<p>User-created groups of assets that can span multiple directories:</p>
|
|
<ul>
|
|
<li>🎯 Named groups of related assets</li>
|
|
<li>🌐 Can include assets from different scopes</li>
|
|
<li>💾 Persistent storage in JSON format</li>
|
|
<li>👥 Shareable between users</li>
|
|
</ul>
|
|
|
|
<div class="callout">
|
|
<h4>💡 Organization Best Practice</h4>
|
|
<p>Create collections for different projects, styles, or clients. Use consistent tagging to make assets easily discoverable later!</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="drag-drop" class="section">
|
|
<h2>🔄 Drag & Drop Functionality</h2>
|
|
<p>Seamless drag and drop integration with both ComfyUI and your operating system.</p>
|
|
|
|
<h3>📤 Drag to ComfyUI Canvas</h3>
|
|
<p>Drag assets directly onto the ComfyUI canvas for instant integration:</p>
|
|
<ul>
|
|
<li>🎯 Assets automatically staged to compatible input nodes</li>
|
|
<li>🔗 File paths injected into appropriate nodes</li>
|
|
<li>🔢 Works with single or multiple selections</li>
|
|
<li>⚡ Compatible with LoadImage, LoadVideo, and similar nodes</li>
|
|
</ul>
|
|
|
|
<h3>📥 Drag to Operating System</h3>
|
|
<p>Drag assets to your file explorer for easy file management:</p>
|
|
<ul>
|
|
<li>📁 Single files open directly in their default application</li>
|
|
<li>📦 Multiple selections automatically packaged into a ZIP file</li>
|
|
<li>🔄 ZIP files created on-demand and cleaned up automatically</li>
|
|
<li>🔗 Supports DownloadURL and text/uri-list protocols</li>
|
|
</ul>
|
|
|
|
<div class="highlight-box">
|
|
<div class="emoji-large">⚡</div>
|
|
<h3>Drag Power Tip</h3>
|
|
<p>Use Ctrl/Cmd+click to select multiple assets, then drag any selected asset to initiate a multi-file drag operation!</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="shortcuts" class="section">
|
|
<h2>⌨️ Keyboard Shortcuts</h2>
|
|
<p>Boost your productivity with these essential keyboard shortcuts.</p>
|
|
|
|
<h3>🎯 Essential Shortcuts</h3>
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Action</th>
|
|
<th>Windows/Linux</th>
|
|
<th>macOS</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Scan current scope</td>
|
|
<td>Ctrl+S</td>
|
|
<td>Cmd+S</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Toggle details sidebar</td>
|
|
<td>D</td>
|
|
<td>D</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Rate 5 stars</td>
|
|
<td>5</td>
|
|
<td>5</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Select all</td>
|
|
<td>Ctrl+A</td>
|
|
<td>Cmd+A</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Focus search</td>
|
|
<td>Ctrl+F</td>
|
|
<td>Cmd+F</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Close viewer</td>
|
|
<td>Esc</td>
|
|
<td>Esc</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h3>🔍 Viewer Shortcuts</h3>
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Action</th>
|
|
<th>Shortcut</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Toggle false color</td>
|
|
<td>F</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Toggle zebra patterns</td>
|
|
<td>Z</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Cycle grid overlays</td>
|
|
<td>G</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Toggle pixel probe</td>
|
|
<td>I</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Toggle loupe</td>
|
|
<td>L</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Copy color value</td>
|
|
<td>C</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="callout success">
|
|
<h4>🔥 Power User Sequence</h4>
|
|
<p>Try this sequence: <code>Ctrl+F</code> [search term] <code>Enter</code> <code>Ctrl+A</code> <code>5</code> - Search, select all results, rate everything 5 stars!</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="configuration" class="section">
|
|
<h2>⚙️ Configuration</h2>
|
|
<p>Customize the Assets Manager to match your workflow and preferences.</p>
|
|
|
|
<h3>🎨 Display Settings</h3>
|
|
<ul>
|
|
<li><strong>Page Size</strong>: Number of assets loaded per request (default: 50)</li>
|
|
<li><strong>Sidebar Position</strong>: Left or right placement</li>
|
|
<li><strong>Hide PNG Siblings</strong>: Hide PNG files when video previews exist</li>
|
|
<li><strong>Auto-scan</strong>: Automatically scan on open/startup</li>
|
|
</ul>
|
|
|
|
<h3>⚡ Performance Settings</h3>
|
|
<ul>
|
|
<li><strong>Status Poll Interval</strong>: How often to check background tasks (default: 2s)</li>
|
|
<li><strong>Tags Cache TTL</strong>: Time-to-live for tag caching (default: 30s)</li>
|
|
<li><strong>Max Connections</strong>: Database connection pool size (default: 8)</li>
|
|
</ul>
|
|
|
|
<h3>🔧 Backend Configuration</h3>
|
|
<p>Configure the backend using environment variables:</p>
|
|
<pre><code class="language-bash"># Override output directory
|
|
export MAJOOR_OUTPUT_DIRECTORY="/path/to/output"
|
|
|
|
# Specify tool paths if not in PATH
|
|
export MAJOOR_EXIFTOOL_PATH="/path/to/exiftool"
|
|
export MAJOOR_FFPROBE_PATH="/path/to/ffprobe"
|
|
|
|
# Set media probe backend
|
|
export MAJOOR_MEDIA_PROBE_BACKEND="auto" # auto, exiftool, ffprobe, both
|
|
|
|
# Enable file watcher for auto-reindexing
|
|
export MAJOOR_ENABLE_FILE_WATCHER=true</code></pre>
|
|
</section>
|
|
|
|
<section id="troubleshooting" class="section">
|
|
<h2>🛠️ Troubleshooting</h2>
|
|
<p>Solutions to common issues and how to resolve them.</p>
|
|
|
|
<h3>🚨 Common Issues</h3>
|
|
|
|
<div class="callout danger">
|
|
<h4>❌ Missing Dependencies</h4>
|
|
<p>If you see warnings about missing dependencies:</p>
|
|
<ol class="step-list">
|
|
<li>Check that all requirements are installed: <code>pip install -r requirements.txt</code></li>
|
|
<li>Install optional tools (ExifTool, FFprobe) for full functionality</li>
|
|
<li>Verify tools are in your system PATH or set environment variables</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="callout warning">
|
|
<h4>🐢 Slow Performance</h4>
|
|
<p>If experiencing slow performance:</p>
|
|
<ul>
|
|
<li>Large collections may take time to load</li>
|
|
<li>Increase page size for fewer requests</li>
|
|
<li>Ensure external tools (ExifTool, FFprobe) are properly installed</li>
|
|
<li>Adjust database connection settings if needed</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h3>🔍 Verification Steps</h3>
|
|
<ol class="step-list">
|
|
<li>Start ComfyUI and look for the Assets Manager tab</li>
|
|
<li>Check the console/logs for any error messages during startup</li>
|
|
<li>Run <code>exiftool -ver</code> and <code>ffprobe -version</code> to verify external tools</li>
|
|
<li>Open the Assets Manager and try a simple search to verify indexing</li>
|
|
</ol>
|
|
|
|
<h3>📁 File Locations</h3>
|
|
<ul>
|
|
<li><strong>Index Database</strong>: <code><output>/_mjr_index/assets.sqlite</code></li>
|
|
<li><strong>Custom Roots</strong>: <code><output>/_mjr_index/custom_roots.json</code></li>
|
|
<li><strong>Collections</strong>: <code><output>/_mjr_index/collections/*.json</code></li>
|
|
<li><strong>Temporary ZIPs</strong>: <code><output>/_mjr_batch_zips/</code> (auto-cleaned)</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<div class="footer">
|
|
<p>🎨 Majoor Assets Manager - Ultimate User Guide | Last Updated: January 2026</p>
|
|
<p>Need help? Visit our <a href="#">documentation</a> or join our <a href="#">community</a> for support!</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Theme toggle functionality
|
|
function toggleTheme() {
|
|
const body = document.body;
|
|
const toggleBtn = document.querySelector('.theme-toggle');
|
|
|
|
if (body.classList.contains('theme-dark')) {
|
|
body.classList.remove('theme-dark');
|
|
body.classList.add('theme-light');
|
|
toggleBtn.innerHTML = '🌙';
|
|
localStorage.setItem('theme', 'light');
|
|
} else if (body.classList.contains('theme-light')) {
|
|
body.classList.remove('theme-light');
|
|
body.classList.add('theme-dark');
|
|
toggleBtn.innerHTML = '☀️';
|
|
localStorage.setItem('theme', 'dark');
|
|
} else {
|
|
// Detect system preference
|
|
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
body.classList.add('theme-light');
|
|
body.classList.remove('theme-dark');
|
|
toggleBtn.innerHTML = '🌙';
|
|
localStorage.setItem('theme', 'light');
|
|
} else {
|
|
body.classList.add('theme-dark');
|
|
body.classList.remove('theme-light');
|
|
toggleBtn.innerHTML = '☀️';
|
|
localStorage.setItem('theme', 'dark');
|
|
}
|
|
}
|
|
}
|
|
|
|
// Apply saved theme on page load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const savedTheme = localStorage.getItem('theme');
|
|
const toggleBtn = document.querySelector('.theme-toggle');
|
|
|
|
if (savedTheme === 'dark') {
|
|
document.body.classList.add('theme-dark');
|
|
toggleBtn.innerHTML = '☀️';
|
|
} else if (savedTheme === 'light') {
|
|
document.body.classList.add('theme-light');
|
|
toggleBtn.innerHTML = '🌙';
|
|
}
|
|
});
|
|
|
|
// Smooth scrolling for anchor links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |