32a73b02f5
Replaces old list-format tags (which duplicated prompt content) with structured dict tags per category (origin_series, outfit_type, participants, style_type, scene_type, etc.). Tags are now purely organizational metadata — removed from the prompt pipeline entirely. Adds is_favourite and is_nsfw columns to all 8 resource models. Favourite is DB-only (user preference); NSFW is mirrored in JSON tags for rescan persistence. All library pages get filter controls and favourites-first sorting. Introduces a parallel LLM job queue (_enqueue_task + _llm_queue_worker) for background tag regeneration, with the same status polling UI as ComfyUI jobs. Fixes call_llm() to use has_request_context() fallback for background threads. Adds global search (/search) across resources and gallery images, with navbar search bar. Adds gallery image sidecar JSON for per-image favourite/NSFW metadata. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
424 lines
22 KiB
HTML
424 lines
22 KiB
HTML
{% extends "layout.html" %}
|
|
|
|
{% block content %}
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8">
|
|
<div class="card shadow">
|
|
<div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">Application Settings</h5>
|
|
<span class="badge bg-primary">LLM Configuration</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="post">
|
|
<div class="mb-4">
|
|
<label for="llm_provider" class="form-label fw-bold">LLM Provider</label>
|
|
<select class="form-select form-select-lg" id="llm_provider" name="llm_provider">
|
|
<option value="openrouter" {% if settings.llm_provider == 'openrouter' %}selected{% endif %}>OpenRouter (Cloud)</option>
|
|
<option value="ollama" {% if settings.llm_provider == 'ollama' %}selected{% endif %}>Ollama (Local)</option>
|
|
<option value="lmstudio" {% if settings.llm_provider == 'lmstudio' %}selected{% endif %}>LMStudio (Local)</option>
|
|
</select>
|
|
<div class="form-text">Choose where your AI text generation requests are processed.</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<!-- OpenRouter Settings -->
|
|
<div id="openrouter-settings" class="provider-settings" {% if settings.llm_provider != 'openrouter' %}style="display:none;"{% endif %}>
|
|
<h5 class="mb-3 text-primary">OpenRouter Configuration</h5>
|
|
<div class="mb-3">
|
|
<label for="api_key" class="form-label">API Key</label>
|
|
<div class="input-group">
|
|
<input type="password" class="form-control" id="api_key" name="api_key" value="{{ settings.openrouter_api_key or '' }}">
|
|
<button class="btn btn-outline-primary" type="button" id="connect-openrouter-btn">Load Models</button>
|
|
</div>
|
|
<div class="form-text">Get your key at <a href="https://openrouter.ai/" target="_blank">openrouter.ai</a></div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="model" class="form-label">Model Selection</label>
|
|
<select class="form-select" id="model" name="model">
|
|
<option value="{{ settings.openrouter_model }}" selected>{{ settings.openrouter_model }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Local LLM Settings (Ollama/LMStudio) -->
|
|
<div id="local-settings" class="provider-settings" {% if settings.llm_provider == 'openrouter' %}style="display:none;"{% endif %}>
|
|
<h5 class="mb-3 text-primary">Local LLM Configuration</h5>
|
|
<div class="mb-3">
|
|
<label for="local_base_url" class="form-label">Base URL</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="local_base_url" name="local_base_url"
|
|
placeholder="e.g. http://localhost:11434/v1"
|
|
value="{{ settings.local_base_url or '' }}">
|
|
<button class="btn btn-outline-primary" type="button" id="connect-local-btn">Load Models</button>
|
|
</div>
|
|
<div id="url-help" class="form-text">
|
|
Ollama default: <code>http://localhost:11434/v1</code><br>
|
|
LMStudio default: <code>http://localhost:1234/v1</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="local_model" class="form-label">Model Selection</label>
|
|
<select class="form-select" id="local_model" name="local_model">
|
|
{% if settings.local_model %}
|
|
<option value="{{ settings.local_model }}" selected>{{ settings.local_model }}</option>
|
|
{% else %}
|
|
<option value="" selected disabled>Select a model...</option>
|
|
{% endif %}
|
|
</select>
|
|
<div class="form-text">Ensure your local LLM server is running and API is enabled.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<!-- Directory Settings -->
|
|
<h5 class="mb-3 text-primary">LoRA Directories</h5>
|
|
<p class="text-muted small">Absolute paths on disk where LoRA files are scanned for each category.</p>
|
|
|
|
<div class="mb-3">
|
|
<label for="lora_dir_characters" class="form-label">Characters / Looks</label>
|
|
<input type="text" class="form-control" id="lora_dir_characters" name="lora_dir_characters"
|
|
value="{{ settings.lora_dir_characters or '/ImageModels/lora/Illustrious/Looks' }}">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="lora_dir_outfits" class="form-label">Outfits</label>
|
|
<input type="text" class="form-control" id="lora_dir_outfits" name="lora_dir_outfits"
|
|
value="{{ settings.lora_dir_outfits or '/ImageModels/lora/Illustrious/Clothing' }}">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="lora_dir_actions" class="form-label">Actions</label>
|
|
<input type="text" class="form-control" id="lora_dir_actions" name="lora_dir_actions"
|
|
value="{{ settings.lora_dir_actions or '/ImageModels/lora/Illustrious/Poses' }}">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="lora_dir_styles" class="form-label">Styles</label>
|
|
<input type="text" class="form-control" id="lora_dir_styles" name="lora_dir_styles"
|
|
value="{{ settings.lora_dir_styles or '/ImageModels/lora/Illustrious/Styles' }}">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="lora_dir_scenes" class="form-label">Scenes</label>
|
|
<input type="text" class="form-control" id="lora_dir_scenes" name="lora_dir_scenes"
|
|
value="{{ settings.lora_dir_scenes or '/ImageModels/lora/Illustrious/Backgrounds' }}">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="lora_dir_detailers" class="form-label">Detailers</label>
|
|
<input type="text" class="form-control" id="lora_dir_detailers" name="lora_dir_detailers"
|
|
value="{{ settings.lora_dir_detailers or '/ImageModels/lora/Illustrious/Detailers' }}">
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<h5 class="mb-3 text-primary">Checkpoint Directories</h5>
|
|
<div class="mb-3">
|
|
<label for="checkpoint_dirs" class="form-label">Checkpoint Scan Paths</label>
|
|
<input type="text" class="form-control" id="checkpoint_dirs" name="checkpoint_dirs"
|
|
value="{{ settings.checkpoint_dirs or '/ImageModels/Stable-diffusion/Illustrious,/ImageModels/Stable-diffusion/Noob' }}">
|
|
<div class="form-text">Comma-separated list of directories to scan for checkpoint files.</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<h5 class="mb-3 text-primary">Default Checkpoint</h5>
|
|
<div class="mb-3">
|
|
<label for="default_checkpoint" class="form-label">Active Checkpoint</label>
|
|
<div class="input-group">
|
|
<select class="form-select" id="default_checkpoint">
|
|
<option value="">— workflow default —</option>
|
|
{% for ckpt in all_checkpoints %}
|
|
<option value="{{ ckpt.checkpoint_path }}"{% if ckpt.checkpoint_path == default_checkpoint_path %} selected{% endif %}>{{ ckpt.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<span id="ckpt-save-status" class="input-group-text text-success" style="opacity:0;transition:opacity 0.5s">Saved</span>
|
|
</div>
|
|
<div class="form-text">Sets the checkpoint used for all generation requests. Saved immediately on change.</div>
|
|
</div>
|
|
|
|
<div class="d-grid mt-4">
|
|
<button type="submit" class="btn btn-primary btn-lg">Save All Settings</button>
|
|
</div>
|
|
</form>
|
|
|
|
<hr>
|
|
|
|
<h5 class="mb-3 text-primary">REST API Key</h5>
|
|
<p class="text-muted small">Generate an API key to use the <code>/api/v1/</code> endpoints for programmatic image generation.</p>
|
|
<div class="mb-3">
|
|
<div class="input-group">
|
|
<input type="password" class="form-control font-monospace" id="api-key-display"
|
|
value="{{ settings.api_key or '' }}" readonly
|
|
placeholder="No API key generated yet">
|
|
<button class="btn btn-outline-secondary" type="button" id="api-key-toggle" title="Show/hide key">
|
|
<i class="bi bi-eye"></i> Show
|
|
</button>
|
|
<button class="btn btn-outline-secondary" type="button" id="api-key-copy" title="Copy to clipboard">
|
|
<i class="bi bi-clipboard"></i> Copy
|
|
</button>
|
|
<button class="btn btn-outline-primary" type="button" id="api-key-regen">Regenerate</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tag Management -->
|
|
<div class="card mb-4">
|
|
<div class="card-header bg-dark text-white">Tag Management</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6>Migrate Tags</h6>
|
|
<p class="text-muted small">Convert old list-format tags to new structured dict format across all resources.</p>
|
|
<button class="btn btn-warning" id="migrate-tags-btn" onclick="migrateTags()">Migrate Tags to New Format</button>
|
|
<span id="migrate-tags-status" class="ms-2"></span>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6>Bulk Regenerate Tags</h6>
|
|
<p class="text-muted small">Use LLM to regenerate structured tags for all resources. This will overwrite existing tags.</p>
|
|
<button class="btn btn-danger" id="bulk-regen-btn" onclick="bulkRegenerateTags()">Regenerate All Tags (LLM)</button>
|
|
<div id="bulk-regen-progress" class="mt-2" style="display: none;">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 0%"></div>
|
|
</div>
|
|
<small class="text-muted" id="bulk-regen-status"></small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const providerSelect = document.getElementById('llm_provider');
|
|
const openrouterSettings = document.getElementById('openrouter-settings');
|
|
const localSettings = document.getElementById('local-settings');
|
|
const localBaseUrlInput = document.getElementById('local_base_url');
|
|
|
|
// Toggle visibility based on provider
|
|
providerSelect.addEventListener('change', () => {
|
|
if (providerSelect.value === 'openrouter') {
|
|
openrouterSettings.style.display = 'block';
|
|
localSettings.style.display = 'none';
|
|
} else {
|
|
openrouterSettings.style.display = 'none';
|
|
localSettings.style.display = 'block';
|
|
|
|
// Auto-fill default URLs if empty
|
|
if (!localBaseUrlInput.value) {
|
|
if (providerSelect.value === 'ollama') {
|
|
localBaseUrlInput.value = 'http://localhost:11434/v1';
|
|
} else if (providerSelect.value === 'lmstudio') {
|
|
localBaseUrlInput.value = 'http://localhost:1234/v1';
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// OpenRouter Model Loading
|
|
const connectOpenRouterBtn = document.getElementById('connect-openrouter-btn');
|
|
const apiKeyInput = document.getElementById('api_key');
|
|
const modelSelect = document.getElementById('model');
|
|
const currentModel = "{{ settings.openrouter_model }}";
|
|
|
|
connectOpenRouterBtn.addEventListener('click', async () => {
|
|
const apiKey = apiKeyInput.value;
|
|
if (!apiKey) { alert('Please enter an API Key first.'); return; }
|
|
|
|
connectOpenRouterBtn.disabled = true;
|
|
connectOpenRouterBtn.textContent = 'Loading...';
|
|
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('api_key', apiKey);
|
|
const response = await fetch('/get_openrouter_models', { method: 'POST', body: formData });
|
|
const data = await response.json();
|
|
|
|
if (data.error) {
|
|
alert('Error: ' + data.error);
|
|
} else {
|
|
modelSelect.innerHTML = '';
|
|
data.models.sort((a, b) => a.name.localeCompare(b.name)).forEach(model => {
|
|
const option = document.createElement('option');
|
|
option.value = model.id;
|
|
option.textContent = model.name;
|
|
if (model.id === currentModel) option.selected = true;
|
|
modelSelect.appendChild(option);
|
|
});
|
|
alert('OpenRouter models loaded successfully!');
|
|
}
|
|
} catch (err) {
|
|
alert('Failed to connect to OpenRouter.');
|
|
} finally {
|
|
connectOpenRouterBtn.disabled = false;
|
|
connectOpenRouterBtn.textContent = 'Load Models';
|
|
}
|
|
});
|
|
|
|
// Default Checkpoint
|
|
const defaultCkptSelect = document.getElementById('default_checkpoint');
|
|
const ckptSaveStatus = document.getElementById('ckpt-save-status');
|
|
if (defaultCkptSelect) {
|
|
defaultCkptSelect.addEventListener('change', () => {
|
|
fetch('/set_default_checkpoint', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
|
|
body: 'checkpoint_path=' + encodeURIComponent(defaultCkptSelect.value)
|
|
}).then(() => {
|
|
ckptSaveStatus.style.opacity = '1';
|
|
setTimeout(() => { ckptSaveStatus.style.opacity = '0'; }, 1500);
|
|
});
|
|
});
|
|
}
|
|
|
|
// API Key Management
|
|
const apiKeyDisplay = document.getElementById('api-key-display');
|
|
const apiKeyToggle = document.getElementById('api-key-toggle');
|
|
const apiKeyCopy = document.getElementById('api-key-copy');
|
|
const apiKeyRegen = document.getElementById('api-key-regen');
|
|
|
|
if (apiKeyToggle) {
|
|
apiKeyToggle.addEventListener('click', () => {
|
|
if (apiKeyDisplay.type === 'password') {
|
|
apiKeyDisplay.type = 'text';
|
|
apiKeyToggle.innerHTML = '<i class="bi bi-eye-slash"></i> Hide';
|
|
} else {
|
|
apiKeyDisplay.type = 'password';
|
|
apiKeyToggle.innerHTML = '<i class="bi bi-eye"></i> Show';
|
|
}
|
|
});
|
|
}
|
|
|
|
if (apiKeyCopy) {
|
|
apiKeyCopy.addEventListener('click', () => {
|
|
if (apiKeyDisplay.value) {
|
|
navigator.clipboard.writeText(apiKeyDisplay.value);
|
|
apiKeyCopy.innerHTML = '<i class="bi bi-check"></i> Copied';
|
|
setTimeout(() => { apiKeyCopy.innerHTML = '<i class="bi bi-clipboard"></i> Copy'; }, 1500);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (apiKeyRegen) {
|
|
apiKeyRegen.addEventListener('click', async () => {
|
|
if (!confirm('Generate a new API key? Any existing key will stop working.')) return;
|
|
apiKeyRegen.disabled = true;
|
|
try {
|
|
const resp = await fetch('/api/key/regenerate', { method: 'POST' });
|
|
const data = await resp.json();
|
|
if (data.api_key) {
|
|
apiKeyDisplay.value = data.api_key;
|
|
apiKeyDisplay.type = 'text';
|
|
apiKeyToggle.innerHTML = '<i class="bi bi-eye-slash"></i> Hide';
|
|
}
|
|
} catch (err) {
|
|
alert('Failed to regenerate API key.');
|
|
} finally {
|
|
apiKeyRegen.disabled = false;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Local Model Loading
|
|
const connectLocalBtn = document.getElementById('connect-local-btn');
|
|
const localModelSelect = document.getElementById('local_model');
|
|
const currentLocalModel = "{{ settings.local_model }}";
|
|
|
|
connectLocalBtn.addEventListener('click', async () => {
|
|
const baseUrl = localBaseUrlInput.value;
|
|
if (!baseUrl) { alert('Please enter a Base URL first.'); return; }
|
|
|
|
connectLocalBtn.disabled = true;
|
|
connectLocalBtn.textContent = 'Loading...';
|
|
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('base_url', baseUrl);
|
|
const response = await fetch('/get_local_models', { method: 'POST', body: formData });
|
|
const data = await response.json();
|
|
|
|
if (data.error) {
|
|
alert('Error: ' + data.error);
|
|
} else {
|
|
localModelSelect.innerHTML = '';
|
|
data.models.forEach(model => {
|
|
const option = document.createElement('option');
|
|
option.value = model.id;
|
|
option.textContent = model.name;
|
|
if (model.id === currentLocalModel) option.selected = true;
|
|
localModelSelect.appendChild(option);
|
|
});
|
|
if (data.models.length === 0) alert('No models found at this URL.');
|
|
else alert('Local models loaded successfully!');
|
|
}
|
|
} catch (err) {
|
|
alert('Failed to connect to local LLM server. Make sure it is running and CORS is enabled if needed.');
|
|
} finally {
|
|
connectLocalBtn.disabled = false;
|
|
connectLocalBtn.textContent = 'Load Models';
|
|
}
|
|
});
|
|
});
|
|
|
|
async function migrateTags() {
|
|
const btn = document.getElementById('migrate-tags-btn');
|
|
const status = document.getElementById('migrate-tags-status');
|
|
if (!confirm('Convert all old list-format tags to new dict format?')) return;
|
|
btn.disabled = true;
|
|
status.textContent = 'Migrating...';
|
|
try {
|
|
const resp = await fetch('/admin/migrate_tags', { method: 'POST' });
|
|
const data = await resp.json();
|
|
status.textContent = data.success ? `Done! Migrated ${data.migrated} resources.` : `Error: ${data.error}`;
|
|
} catch (err) {
|
|
status.textContent = 'Failed: ' + err.message;
|
|
} finally {
|
|
btn.disabled = false;
|
|
}
|
|
}
|
|
|
|
async function bulkRegenerateTags() {
|
|
if (!confirm('Regenerate tags for ALL resources using the LLM? This may take a while and will overwrite existing tags.')) return;
|
|
const btn = document.getElementById('bulk-regen-btn');
|
|
const progress = document.getElementById('bulk-regen-progress');
|
|
const bar = progress.querySelector('.progress-bar');
|
|
const status = document.getElementById('bulk-regen-status');
|
|
btn.disabled = true;
|
|
progress.style.display = 'block';
|
|
|
|
const categories = ['characters', 'outfits', 'actions', 'styles', 'scenes', 'detailers', 'looks'];
|
|
// Fetch all slugs per category
|
|
let allItems = [];
|
|
for (const cat of categories) {
|
|
try {
|
|
const resp = await fetch(`/get_missing_${cat}`);
|
|
// This endpoint returns items missing covers, but we need ALL items.
|
|
// Instead, we'll use a simpler approach: fetch the index page data
|
|
} catch (e) {}
|
|
}
|
|
// Use a simpler approach: call regenerate for each category via a bulk endpoint
|
|
status.textContent = 'Queuing regeneration for all resources...';
|
|
try {
|
|
const resp = await fetch('/admin/bulk_regenerate_tags', { method: 'POST' });
|
|
const data = await resp.json();
|
|
if (data.success) {
|
|
bar.style.width = '100%';
|
|
status.textContent = `Queued ${data.total} resources for regeneration. Check console for progress.`;
|
|
} else {
|
|
status.textContent = `Error: ${data.error}`;
|
|
}
|
|
} catch (err) {
|
|
status.textContent = 'Failed: ' + err.message;
|
|
} finally {
|
|
btn.disabled = false;
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %}
|