aodhan/character-browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add semantic tagging, search, favourite/NSFW filtering, and LLM job queue

Browse Source 
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>
This commit is contained in:
Aodhan Collins
2026-03-21 03:22:09 +00:00
parent 7d79e626a5
commit 32a73b02f5
72 changed files with 3163 additions and 2212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
templates/actions/create.html
View File

@@ -10,23 +10,23 @@
<form action="{{ url_for('create_action') }}" method="post">
<div class="mb-3">
<label for="name" class="form-label">Action Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="e.g. Belly Dancing" required>
<input type="text" class="form-control" id="name" name="name" placeholder="e.g. Belly Dancing" value="{{ form_data.get('name', '') }}" required>
</div>
<div class="mb-3">
<label for="filename" class="form-label">Filename (Slug) <small class="text-muted">- optional, auto-generated if empty</small></label>
<input type="text" class="form-control" id="filename" name="filename" placeholder="e.g. belly_dancing">
<input type="text" class="form-control" id="filename" name="filename" placeholder="e.g. belly_dancing" value="{{ form_data.get('filename', '') }}">
<div class="form-text">Used for the JSON file and URL. No spaces or special characters. Auto-generated from name if left empty.</div>
</div>
<div class="mb-3 form-check form-switch">
<input class="form-check-input" type="checkbox" id="use_llm" name="use_llm" checked>
<input class="form-check-input" type="checkbox" id="use_llm" name="use_llm" {{ 'checked' if form_data.get('use_llm', True) }}>
<label class="form-check-label" for="use_llm">Use AI to generate profile from description</label>
</div>
<div class="mb-3" id="prompt-group">
<label for="prompt" class="form-label">Description / Concept</label>
<textarea class="form-control" id="prompt" name="prompt" rows="5" placeholder="Describe the action, pose, or movement. The AI will generate the full action profile based on this."></textarea>
<textarea class="form-control" id="prompt" name="prompt" rows="5" placeholder="Describe the action, pose, or movement. The AI will generate the full action profile based on this.">{{ form_data.get('prompt', '') }}</textarea>
<div class="form-text">Required when AI generation is enabled.</div>
</div>

43
templates/actions/detail.html
View File

@@ -111,33 +111,29 @@
</div>
</div>
{% set tags = action.data.tags if action.data.tags is mapping else {} %}
{% if tags %}
<div class="card mb-4">
<div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
<span>Tags</span>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="include_field" value="special::tags" id="includeTags" form="generate-form"
{% if preferences is not none %}
{% if 'special::tags' in preferences %}checked{% endif %}
{% elif action.default_fields is not none %}
{% if 'special::tags' in action.default_fields %}checked{% endif %}
{% endif %}>
<label class="form-check-label text-white small {% if action.default_fields is not none and 'special::tags' in action.default_fields %}text-accent{% endif %}" for="includeTags">Include</label>
</div>
</div>
<div class="card-header bg-dark text-white"><span>Tags</span></div>
<div class="card-body">
{% for tag in action.data.tags %}
<span class="badge bg-secondary">{{ tag }}</span>
{% else %}
<span class="text-muted">No tags</span>
{% endfor %}
{% if tags.participants %}<span class="badge bg-info">{{ tags.participants }}</span>{% endif %}
{% if action.is_nsfw %}<span class="badge bg-danger">NSFW</span>{% endif %}
{% if action.is_favourite %}<span class="badge bg-warning text-dark">&#9733; Favourite</span>{% endif %}
</div>
</div>
{% endif %}
</div>
<div class="col-md-8">
<div class="d-flex justify-content-between align-items-center mb-3">
<div>
<h1 class="mb-0">{{ action.name }}</h1>
<h1 class="mb-0">
{{ action.name }}
<button class="btn btn-sm btn-link text-decoration-none fav-toggle-btn" data-url="/action/{{ action.slug }}/favourite" title="Toggle favourite">
<span style="font-size:1.2rem;">{% if action.is_favourite %}&#9733;{% else %}&#9734;{% endif %}</span>
</button>
{% if action.is_nsfw %}<span class="badge bg-danger" style="font-size:0.6rem;vertical-align:middle;">NSFW</span>{% endif %}
</h1>
<a href="{{ url_for('edit_action', slug=action.slug) }}" class="btn btn-sm btn-link text-decoration-none">Edit Profile</a>
<form action="{{ url_for('clone_action', slug=action.slug) }}" method="post" style="display: inline;">
<button type="submit" class="btn btn-sm btn-link text-decoration-none">Clone Action</button>
@@ -145,6 +141,7 @@
</div>
<div class="d-flex gap-2">
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#jsonEditorModal">Edit JSON</button>
<button type="button" class="btn btn-outline-warning" id="regenerate-tags-btn" onclick="regenerateTags('actions', '{{ action.slug }}')">Regenerate Tags</button>
<a href="{{ url_for('transfer_resource', category='actions', slug=action.slug) }}" class="btn btn-outline-primary">Transfer</a>
<a href="{{ url_for('actions_index') }}" class="btn btn-outline-secondary">Back to Library</a>
</div>
@@ -299,6 +296,16 @@
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', () => {
// Favourite toggle
document.querySelectorAll('.fav-toggle-btn').forEach(btn => {
btn.addEventListener('click', async (e) => {
e.preventDefault();
const resp = await fetch(btn.dataset.url, {method:'POST', headers:{'X-Requested-With':'XMLHttpRequest'}});
const data = await resp.json();
if (data.success) btn.querySelector('span').innerHTML = data.is_favourite ? '&#9733;' : '&#9734;';
});
});
const form = document.getElementById('generate-form');
const progressBar = document.getElementById('progress-bar');
const progressContainer = document.getElementById('progress-container');

21
templates/actions/edit.html
View File

@@ -22,9 +22,24 @@
<label for="action_id" class="form-label">Action ID</label>
<input type="text" class="form-control" id="action_id" name="action_id" value="{{ action.action_id }}">
</div>
<div class="mb-3">
<label for="tags" class="form-label">Tags (comma separated)</label>
<input type="text" class="form-control" id="tags" name="tags" value="{{ action.data.tags | join(', ') }}">
{% set tags = action.data.tags if action.data.tags is mapping else {} %}
<div class="row">
<div class="col-md-6 mb-3">
<label for="tag_participants" class="form-label">Participants</label>
<input type="text" class="form-control" id="tag_participants" name="tag_participants" value="{{ tags.participants or '' }}" placeholder="e.g. solo, 1girl 1boy, 2girls">
</div>
<div class="col-md-3 mb-3">
<label class="form-label">&nbsp;</label>
<div class="form-check mt-2">
<input class="form-check-input" type="checkbox" id="tag_nsfw" name="tag_nsfw" {% if action.is_nsfw %}checked{% endif %}>
<label class="form-check-label" for="tag_nsfw">NSFW</label>
</div>
</div>
</div>
<div class="form-check form-switch mb-3">
<input class="form-check-input" type="checkbox" id="suppress_wardrobe" name="suppress_wardrobe" {% if action.data.get('suppress_wardrobe') %}checked{% endif %}>
<label class="form-check-label" for="suppress_wardrobe">Suppress Wardrobe</label>
<div class="form-text">When enabled, no clothing/wardrobe prompts are injected during generation.</div>
</div>
</div>
</div>

160
templates/actions/index.html
View File

@@ -1,24 +1,36 @@
{% extends "layout.html" %}
{% from "partials/library_toolbar.html" import library_toolbar %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>Action Library</h2>
<div class="d-flex gap-1 align-items-center">
<button id="batch-generate-btn" class="btn btn-sm btn-outline-success btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Generate cover images for actions without one" data-requires="comfyui"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
<button id="regenerate-all-btn" class="btn btn-sm btn-outline-danger btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Regenerate cover images for all actions" data-requires="comfyui"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
<form action="{{ url_for('bulk_create_actions_from_loras') }}" method="post" class="d-contents">
<button type="submit" class="btn btn-sm btn-primary btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Create new action entries from all LoRA files"><img src="{{ url_for('static', filename='icons/new-file.png') }}"></button>
</form>
<form action="{{ url_for('bulk_create_actions_from_loras') }}" method="post" class="d-contents">
<input type="hidden" name="overwrite" value="true">
<button type="submit" class="btn btn-sm btn-danger btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Overwrite all action metadata from LoRA files (uses API credits)" onclick="return confirm('WARNING: This will re-run LLM generation for ALL action LoRAs, consuming significant API credits and overwriting ALL existing action metadata. Are you absolutely sure?')"><img src="{{ url_for('static', filename='icons/new-file.png') }}"></button>
</form>
<a href="{{ url_for('create_action') }}" class="btn btn-sm btn-success">Create New Action</a>
<form action="{{ url_for('rescan_actions') }}" method="post" class="d-contents">
<button type="submit" class="btn btn-sm btn-outline-primary btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Rescan action files from disk"><img src="{{ url_for('static', filename='icons/refresh.png') }}"></button>
</form>
{{ library_toolbar(
title="Action",
category="actions",
create_url=url_for('create_action'),
create_label="Action",
has_batch_gen=true,
has_regen_all=true,
has_lora_create=true,
bulk_create_url=url_for('bulk_create_actions_from_loras'),
has_tags=true,
regen_tags_category="actions",
rescan_url=url_for('rescan_actions'),
get_missing_url="/get_missing_actions",
clear_covers_url="/clear_all_action_covers",
generate_url_pattern="/action/{slug}/generate"
) }}
<!-- Filters -->
<form method="get" class="mb-3 d-flex gap-3 align-items-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="favourite" value="on" id="favFilter" {% if favourite_filter == 'on' %}checked{% endif %} onchange="this.form.submit()">
<label class="form-check-label small" for="favFilter">&#9733; Favourites</label>
</div>
</div>
<select name="nsfw" class="form-select form-select-sm" style="width:auto;" onchange="this.form.submit()">
<option value="all" {% if nsfw_filter == 'all' %}selected{% endif %}>All ratings</option>
<option value="sfw" {% if nsfw_filter == 'sfw' %}selected{% endif %}>SFW only</option>
<option value="nsfw" {% if nsfw_filter == 'nsfw' %}selected{% endif %}>NSFW only</option>
</select>
</form>
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
{% for action in actions %}
@@ -40,7 +52,7 @@
{% endif %}
</div>
<div class="card-body">
<h5 class="card-title text-center">{{ action.name }}</h5>
<h5 class="card-title text-center">{% if action.is_favourite %}<span class="text-warning">&#9733;</span> {% endif %}{{ action.name }}{% if action.is_nsfw %} <span class="badge bg-danger" style="font-size:0.6rem;vertical-align:middle;">NSFW</span>{% endif %}</h5>
<p class="card-text small text-center text-muted">
{% set ns = namespace(parts=[]) %}
{% if action.data.action is mapping %}
@@ -80,111 +92,11 @@
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Handle highlight parameter
const highlightSlug = new URLSearchParams(window.location.search).get('highlight');
if (highlightSlug) {
const card = document.getElementById(`card-${highlightSlug}`);
if (card) {
card.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}
const batchBtn = document.getElementById('batch-generate-btn');
const regenAllBtn = document.getElementById('regenerate-all-btn');
const itemNameText = document.getElementById('current-item-name');
const stepProgressText = document.getElementById('current-step-progress');
async function waitForJob(jobId) {
return new Promise((resolve, reject) => {
const poll = setInterval(async () => {
try {
const resp = await fetch(`/api/queue/${jobId}/status`);
const data = await resp.json();
if (data.status === 'done') { clearInterval(poll); resolve(data); }
else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
else if (data.status === 'processing') nodeStatus.textContent = 'Generating…';
else nodeStatus.textContent = 'Queued…';
} catch (err) {}
}, 1500);
});
}
async function runBatch() {
const response = await fetch('/get_missing_actions');
const data = await response.json();
const missing = data.missing;
if (missing.length === 0) {
alert("No actions missing cover images.");
return;
}
batchBtn.disabled = true;
regenAllBtn.disabled = true;
// Phase 1: Queue all jobs upfront
const jobs = [];
for (const item of missing) {
try {
const genResp = await fetch(`/action/${item.slug}/generate`, {
method: 'POST',
body: new URLSearchParams({ action: 'replace', character_slug: '__random__' }),
headers: { 'X-Requested-With': 'XMLHttpRequest' }
});
const genData = await genResp.json();
if (genData.job_id) jobs.push({ item, jobId: genData.job_id });
} catch (err) {
console.error(`Failed to queue ${item.name}:`, err);
}
}
// Phase 2: Poll all concurrently
let currentItem = '';
await Promise.all(jobs.map(async ({ item, jobId }) => {
currentItem = item.name;
itemNameText.textContent = `Processing: ${currentItem}`;
try {
const jobResult = await waitForJob(jobId);
if (jobResult.result && jobResult.result.image_url) {
const img = document.getElementById(`img-${item.slug}`);
const noImgSpan = document.getElementById(`no-img-${item.slug}`);
if (img) { img.src = jobResult.result.image_url; img.classList.remove('d-none'); }
if (noImgSpan) noImgSpan.classList.add('d-none');
}
} catch (err) {
console.error(`Failed for ${item.name}:`, err);
}
}));
batchBtn.disabled = false;
regenAllBtn.disabled = false;
alert(`Batch generation complete! ${jobs.length} action images processed.`);
}
batchBtn.addEventListener('click', async () => {
const response = await fetch('/get_missing_actions');
const data = await response.json();
if (data.missing.length === 0) {
alert("No actions missing cover images.");
return;
}
if (!confirm(`Generate cover images for ${data.missing.length} actions?`)) return;
runBatch();
});
regenAllBtn.addEventListener('click', async () => {
if (!confirm("This will unassign ALL current action cover images and generate new ones. Proceed?")) return;
const clearResp = await fetch('/clear_all_action_covers', { method: 'POST' });
if (clearResp.ok) {
document.querySelectorAll('.img-container img').forEach(img => img.classList.add('d-none'));
document.querySelectorAll('.img-container .text-muted').forEach(span => span.classList.remove('d-none'));
runBatch();
}
});
});
const highlightSlug = new URLSearchParams(window.location.search).get('highlight');
if (highlightSlug) {
const card = document.getElementById(`card-${highlightSlug}`);
if (card) card.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
</script>
<script src="{{ url_for('static', filename='js/library-toolbar.js') }}"></script>
{% endblock %}

17
templates/checkpoints/detail.html
View File

@@ -106,7 +106,12 @@
<div class="col-md-8">
<div class="d-flex justify-content-between align-items-center mb-3">
<div>
<h1 class="mb-0">{{ ckpt.name }}</h1>
<h1 class="mb-0">
{{ ckpt.name }}
<button class="btn btn-sm btn-link text-decoration-none fav-toggle-btn" data-url="/checkpoint/{{ ckpt.slug }}/favourite" title="Toggle favourite">
<span style="font-size:1.2rem;">{% if ckpt.is_favourite %}&#9733;{% else %}&#9734;{% endif %}</span>
</button>
</h1>
</div>
<div class="d-flex gap-2">
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#jsonEditorModal">Edit JSON</button>
@@ -232,6 +237,16 @@
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', () => {
// Favourite toggle
document.querySelectorAll('.fav-toggle-btn').forEach(btn => {
btn.addEventListener('click', async (e) => {
e.preventDefault();
const resp = await fetch(btn.dataset.url, {method:'POST', headers:{'X-Requested-With':'XMLHttpRequest'}});
const data = await resp.json();
if (data.success) btn.querySelector('span').innerHTML = data.is_favourite ? '&#9733;' : '&#9734;';
});
});
const form = document.getElementById('generate-form');
const progressBar = document.getElementById('progress-bar');
const progressContainer = document.getElementById('progress-container');

146
templates/checkpoints/index.html
View File

@@ -1,23 +1,34 @@
{% extends "layout.html" %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>Checkpoint Library</h2>
<div class="d-flex gap-1 align-items-center">
<button id="batch-generate-btn" class="btn btn-sm btn-outline-success btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Generate cover images for checkpoints without one" data-requires="comfyui"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
<button id="regenerate-all-btn" class="btn btn-sm btn-outline-danger btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Regenerate cover images for all checkpoints" data-requires="comfyui"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
<form action="{{ url_for('bulk_create_checkpoints') }}" method="post" class="d-contents">
<button type="submit" class="btn btn-sm btn-primary btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Create new checkpoint entries from all checkpoint files"><img src="{{ url_for('static', filename='icons/new-file.png') }}"></button>
</form>
<form action="{{ url_for('bulk_create_checkpoints') }}" method="post" class="d-contents">
<input type="hidden" name="overwrite" value="true">
<button type="submit" class="btn btn-sm btn-danger btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Overwrite all checkpoint metadata (uses API credits)" onclick="return confirm('WARNING: This will re-run LLM generation for ALL checkpoints, consuming API credits and overwriting ALL existing metadata. Are you sure?')"><img src="{{ url_for('static', filename='icons/new-file.png') }}"></button>
</form>
<form action="{{ url_for('rescan_checkpoints') }}" method="post" class="d-contents">
<button type="submit" class="btn btn-sm btn-outline-primary btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Rescan checkpoint files from disk"><img src="{{ url_for('static', filename='icons/refresh.png') }}"></button>
</form>
{% from "partials/library_toolbar.html" import library_toolbar %}
{{ library_toolbar(
title="Checkpoint",
category="checkpoints",
create_url=none,
has_batch_gen=true,
has_regen_all=true,
has_lora_create=true,
bulk_create_url=url_for('bulk_create_checkpoints'),
has_tags=false,
rescan_url=url_for('rescan_checkpoints'),
get_missing_url="/get_missing_checkpoints",
clear_covers_url="/clear_all_checkpoint_covers",
generate_url_pattern="/checkpoint/{slug}/generate"
) }}
<!-- Filters -->
<form method="get" class="mb-3 d-flex gap-3 align-items-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="favourite" value="on" id="favFilter" {% if favourite_filter == 'on' %}checked{% endif %} onchange="this.form.submit()">
<label class="form-check-label small" for="favFilter">&#9733; Favourites</label>
</div>
</div>
<select name="nsfw" class="form-select form-select-sm" style="width:auto;" onchange="this.form.submit()">
<option value="all" {% if nsfw_filter == 'all' %}selected{% endif %}>All ratings</option>
<option value="sfw" {% if nsfw_filter == 'sfw' %}selected{% endif %}>SFW only</option>
<option value="nsfw" {% if nsfw_filter == 'nsfw' %}selected{% endif %}>NSFW only</option>
</select>
</form>
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
{% for ckpt in checkpoints %}
@@ -39,7 +50,10 @@
{% endif %}
</div>
<div class="card-body">
<h5 class="card-title text-center">{{ ckpt.name }}</h5>
<h5 class="card-title text-center">
{% if ckpt.is_favourite %}<span class="text-warning">&#9733;</span> {% endif %}{{ ckpt.name }}
{% if ckpt.is_nsfw %}<span class="badge bg-danger" style="font-size:0.6rem;vertical-align:middle;">NSFW</span>{% endif %}
</h5>
</div>
<div class="card-footer d-flex justify-content-between align-items-center p-1">
<small class="text-muted" title="{{ ckpt.checkpoint_path }}">{{ ckpt.checkpoint_path.split('/')[0] }}</small>
@@ -53,101 +67,5 @@
{% endblock %}
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', () => {
const batchBtn = document.getElementById('batch-generate-btn');
const regenAllBtn = document.getElementById('regenerate-all-btn');
const ckptNameText = document.getElementById('current-ckpt-name');
const stepProgressText = document.getElementById('current-step-progress');
let currentJobId = null;
async function waitForJob(jobId) {
return new Promise((resolve, reject) => {
const poll = setInterval(async () => {
try {
const resp = await fetch(`/api/queue/${jobId}/status`);
const data = await resp.json();
if (data.status === 'done') { clearInterval(poll); resolve(data); }
else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
else if (data.status === 'processing') nodeStatus.textContent = 'Generating…';
else nodeStatus.textContent = 'Queued…';
} catch (err) {}
}, 1500);
});
}
async function runBatch() {
const response = await fetch('/get_missing_checkpoints');
const data = await response.json();
const missing = data.missing;
if (missing.length === 0) {
alert('No checkpoints missing cover images.');
return;
}
batchBtn.disabled = true;
regenAllBtn.disabled = true;
// Phase 1: Queue all jobs upfront
const jobs = [];
for (const ckpt of missing) {
try {
const genResp = await fetch(`/checkpoint/${ckpt.slug}/generate`, {
method: 'POST',
body: new URLSearchParams({ character_slug: '__random__' }),
headers: { 'X-Requested-With': 'XMLHttpRequest' }
});
const genData = await genResp.json();
if (genData.job_id) jobs.push({ item: ckpt, jobId: genData.job_id });
} catch (err) {
console.error(`Failed to queue ${ckpt.name}:`, err);
}
}
// Phase 2: Poll all concurrently
let currentItem = '';
await Promise.all(jobs.map(async ({ item, jobId }) => {
currentItem = item.name;
ckptNameText.textContent = `Processing: ${currentItem}`;
try {
const jobResult = await waitForJob(jobId);
if (jobResult.result && jobResult.result.image_url) {
const img = document.getElementById(`img-${item.slug}`);
const noImgSpan = document.getElementById(`no-img-${item.slug}`);
if (img) { img.src = jobResult.result.image_url; img.classList.remove('d-none'); }
if (noImgSpan) noImgSpan.classList.add('d-none');
}
} catch (err) {
console.error(`Failed for ${item.name}:`, err);
}
}));
batchBtn.disabled = false;
regenAllBtn.disabled = false;
alert(`Batch generation complete! ${jobs.length} checkpoint images processed.`);
}
batchBtn.addEventListener('click', async () => {
const response = await fetch('/get_missing_checkpoints');
const data = await response.json();
if (data.missing.length === 0) { alert('No checkpoints missing cover images.'); return; }
if (!confirm(`Generate cover images for ${data.missing.length} checkpoints?`)) return;
runBatch();
});
regenAllBtn.addEventListener('click', async () => {
if (!confirm('This will unassign ALL current checkpoint cover images and generate new ones. Proceed?')) return;
const clearResp = await fetch('/clear_all_checkpoint_covers', { method: 'POST' });
if (clearResp.ok) {
document.querySelectorAll('.img-container img').forEach(img => img.classList.add('d-none'));
document.querySelectorAll('.img-container .text-muted').forEach(span => span.classList.remove('d-none'));
runBatch();
}
});
});
</script>
<script src="{{ url_for('static', filename='js/library-toolbar.js') }}"></script>
{% endblock %}

19
templates/create.html
View File

@@ -10,26 +10,32 @@
<form action="{{ url_for('create_character') }}" method="post">
<div class="mb-3">
<label for="name" class="form-label">Character Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="e.g. Cyberpunk Ninja" required>
<input type="text" class="form-control" id="name" name="name" placeholder="e.g. Cyberpunk Ninja" value="{{ form_data.get('name', '') }}" required>
</div>
<div class="mb-3">
<label for="filename" class="form-label">Filename (Slug) <small class="text-muted">- optional, auto-generated if empty</small></label>
<input type="text" class="form-control" id="filename" name="filename" placeholder="e.g. cyberpunk_ninja">
<input type="text" class="form-control" id="filename" name="filename" placeholder="e.g. cyberpunk_ninja" value="{{ form_data.get('filename', '') }}">
<div class="form-text">Used for the JSON file and URL. No spaces or special characters. Auto-generated from name if left empty.</div>
</div>
<div class="mb-3 form-check form-switch">
<input class="form-check-input" type="checkbox" id="use_llm" name="use_llm" checked>
<input class="form-check-input" type="checkbox" id="use_llm" name="use_llm" {{ 'checked' if form_data.get('use_llm', True) }}>
<label class="form-check-label" for="use_llm">Use AI to generate profile from description</label>
</div>
<div class="mb-3" id="prompt-group">
<label for="prompt" class="form-label">Description / Concept</label>
<textarea class="form-control" id="prompt" name="prompt" rows="5" placeholder="Describe the character's appearance, clothing, style, and personality. The AI will generate the full profile based on this."></textarea>
<textarea class="form-control" id="prompt" name="prompt" rows="5" placeholder="Describe the character's appearance, clothing, style, and personality. The AI will generate the full profile based on this.">{{ form_data.get('prompt', '') }}</textarea>
<div class="form-text">Required when AI generation is enabled.</div>
</div>
<div class="mb-3" id="wiki-url-group">
<label for="wiki_url" class="form-label">Wiki / Reference URL <small class="text-muted">- optional</small></label>
<input type="url" class="form-control" id="wiki_url" name="wiki_url" placeholder="e.g. https://finalfantasy.fandom.com/wiki/Tifa_Lockhart" value="{{ form_data.get('wiki_url', '') }}">
<div class="form-text">Fandom wiki URL or other character page. The AI will use this as reference for accurate appearance details.</div>
</div>
<div class="alert alert-info" id="ai-info">
<i class="bi bi-info-circle"></i> The AI will generate a complete character profile based on your description.
</div>
@@ -51,19 +57,22 @@
<script>
document.getElementById('use_llm').addEventListener('change', function() {
const promptGroup = document.getElementById('prompt-group');
const wikiUrlGroup = document.getElementById('wiki-url-group');
const aiInfo = document.getElementById('ai-info');
const manualInfo = document.getElementById('manual-info');
const submitBtn = document.getElementById('submit-btn');
const promptInput = document.getElementById('prompt');
if (this.checked) {
promptGroup.classList.remove('d-none');
wikiUrlGroup.classList.remove('d-none');
aiInfo.classList.remove('d-none');
manualInfo.classList.add('d-none');
submitBtn.textContent = 'Create & Generate';
promptInput.required = true;
} else {
promptGroup.classList.add('d-none');
wikiUrlGroup.classList.add('d-none');
aiInfo.classList.add('d-none');
manualInfo.classList.remove('d-none');
submitBtn.textContent = 'Create Character';

46
templates/detail.html
View File

@@ -59,31 +59,30 @@
</div>
</div>
{% set tags = character.data.tags if character.data.tags is mapping else {} %}
{% if tags %}
<div class="card mb-4">
<div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
<span>Tags</span>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="include_field" value="special::tags" id="includeTags" form="generate-form"
{% if preferences is not none %}
{% if 'special::tags' in preferences %}checked{% endif %}
{% elif character.default_fields is not none %}
{% if 'special::tags' in character.default_fields %}checked{% endif %}
{% endif %}>
<label class="form-check-label text-white small {% if character.default_fields is not none and 'special::tags' in character.default_fields %}text-accent{% endif %}" for="includeTags">Include</label>
</div>
</div>
<div class="card-header bg-dark text-white"><span>Tags</span></div>
<div class="card-body">
{% for tag in character.data.tags %}
<span class="badge bg-secondary">{{ tag }}</span>
{% endfor %}
{% if tags.origin_series %}<span class="badge bg-info">{{ tags.origin_series }}</span>{% endif %}
{% if tags.origin_type %}<span class="badge bg-primary">{{ tags.origin_type }}</span>{% endif %}
{% if character.is_nsfw %}<span class="badge bg-danger">NSFW</span>{% endif %}
{% if character.is_favourite %}<span class="badge bg-warning text-dark">&#9733; Favourite</span>{% endif %}
</div>
</div>
{% endif %}
</div>
<div class="col-md-8">
<div class="d-flex justify-content-between align-items-center mb-4">
<div>
<h1 class="mb-0">{{ character.name }}</h1>
<h1 class="mb-0">
{{ character.name }}
<button class="btn btn-sm btn-link text-decoration-none fav-toggle-btn" data-url="/character/{{ character.slug }}/favourite" title="Toggle favourite">
<span style="font-size:1.2rem;">{% if character.is_favourite %}&#9733;{% else %}&#9734;{% endif %}</span>
</button>
{% if character.is_nsfw %}<span class="badge bg-danger" style="font-size:0.6rem;vertical-align:middle;">NSFW</span>{% endif %}
</h1>
<div class="btn-group" role="group">
<a href="{{ url_for('edit_character', slug=character.slug) }}" class="btn btn-sm btn-link text-decoration-none">Edit Profile</a>
<a href="{{ url_for('transfer_character', slug=character.slug) }}" class="btn btn-sm btn-warning text-decoration-none">
@@ -91,7 +90,10 @@
</a>
</div>
</div>
<a href="/" class="btn btn-outline-secondary">Back to Library</a>
<div class="d-flex gap-2">
<button type="button" class="btn btn-outline-warning" id="regenerate-tags-btn" onclick="regenerateTags('characters', '{{ character.slug }}')">Regenerate Tags</button>
<a href="/" class="btn btn-outline-secondary">Back to Library</a>
</div>
</div>
<ul class="nav nav-tabs mb-4" id="detailTabs" role="tablist">
@@ -271,6 +273,16 @@
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', () => {
// Favourite toggle
document.querySelectorAll('.fav-toggle-btn').forEach(btn => {
btn.addEventListener('click', async (e) => {
e.preventDefault();
const resp = await fetch(btn.dataset.url, {method:'POST', headers:{'X-Requested-With':'XMLHttpRequest'}});
const data = await resp.json();
if (data.success) btn.querySelector('span').innerHTML = data.is_favourite ? '&#9733;' : '&#9734;';
});
});
const form = document.getElementById('generate-form');
const progressBar = document.getElementById('progress-bar');
const progressContainer = document.getElementById('progress-container');

6
templates/detailers/create.html
View File

@@ -10,13 +10,13 @@
<form action="{{ url_for('create_detailer') }}" method="post">
<div class="mb-4">
<label for="name" class="form-label fw-bold">Detailer Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="e.g. Eye Detail Glossy" required>
<input type="text" class="form-control" id="name" name="name" placeholder="e.g. Eye Detail Glossy" value="{{ form_data.get('name', '') }}" required>
<div class="form-text">The display name for the detailer gallery.</div>
</div>
<div class="mb-4">
<label for="filename" class="form-label fw-bold">Detailer ID / Filename <small class="text-muted">(Optional)</small></label>
<input type="text" class="form-control" id="filename" name="filename" placeholder="e.g. eye_detail_glossy">
<input type="text" class="form-control" id="filename" name="filename" placeholder="e.g. eye_detail_glossy" value="{{ form_data.get('filename', '') }}">
<div class="form-text">Used for the JSON file and URL. Auto-generated from name if empty.</div>
</div>

19
templates/detailers/detail.html
View File

@@ -127,13 +127,20 @@
<div class="col-md-8">
<div class="d-flex justify-content-between align-items-center mb-3">
<div>
<h1 class="mb-0">{{ detailer.name }}</h1>
<h1 class="mb-0">
{{ detailer.name }}
<button class="btn btn-sm btn-link text-decoration-none fav-toggle-btn" data-url="/detailer/{{ detailer.slug }}/favourite" title="Toggle favourite">
<span style="font-size:1.2rem;">{% if detailer.is_favourite %}&#9733;{% else %}&#9734;{% endif %}</span>
</button>
{% if detailer.is_nsfw %}<span class="badge bg-danger" style="font-size:0.6rem;vertical-align:middle;">NSFW</span>{% endif %}
</h1>
<div class="mt-1">
<a href="{{ url_for('edit_detailer', slug=detailer.slug) }}" class="btn btn-sm btn-link text-decoration-none ps-0">Edit Detailer</a>
</div>
</div>
<div class="d-flex gap-2">
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#jsonEditorModal">Edit JSON</button>
<button type="button" class="btn btn-outline-warning" id="regenerate-tags-btn" onclick="regenerateTags('detailers', '{{ detailer.slug }}')">Regenerate Tags</button>
<a href="{{ url_for('transfer_resource', category='detailers', slug=detailer.slug) }}" class="btn btn-outline-primary">Transfer</a>
<a href="{{ url_for('detailers_index') }}" class="btn btn-outline-secondary">Back to Library</a>
</div>
@@ -260,6 +267,16 @@
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', () => {
// Favourite toggle
document.querySelectorAll('.fav-toggle-btn').forEach(btn => {
btn.addEventListener('click', async (e) => {
e.preventDefault();
const resp = await fetch(btn.dataset.url, {method:'POST', headers:{'X-Requested-With':'XMLHttpRequest'}});
const data = await resp.json();
if (data.success) btn.querySelector('span').innerHTML = data.is_favourite ? '&#9733;' : '&#9734;';
});
});
const form = document.getElementById('generate-form');
const progressBar = document.getElementById('progress-bar');
const progressContainer = document.getElementById('progress-container');

33
templates/detailers/edit.html
View File

@@ -74,11 +74,34 @@
value="{{ detailer.data.prompt or '' }}">
<div class="form-text">Comma-separated tags, e.g. "glossy eyes, detailed irises"</div>
</div>
<div class="mb-3">
<label for="tags" class="form-label">Extra Tags</label>
<input type="text" class="form-control" id="tags" name="tags"
value="{{ detailer.data.tags | join(', ') if detailer.data.tags else '' }}">
<div class="form-text">Comma-separated extra tags appended to every generation.</div>
{% set tags = detailer.data.tags if detailer.data.tags is mapping else {} %}
<div class="row">
<div class="col-md-4 mb-3">
<label for="tag_associated_resource" class="form-label">Associated Resource</label>
<select class="form-select" id="tag_associated_resource" name="tag_associated_resource">
{% for opt in ['', 'General', 'Looks', 'Styles', 'Faces', 'NSFW'] %}
<option value="{{ opt }}" {% if tags.associated_resource == opt %}selected{% endif %}>{{ opt or '— Select —' }}</option>
{% endfor %}
</select>
</div>
<div class="col-md-5 mb-3">
<label class="form-label">ADetailer Targets</label>
<div>
{% for target in ['face', 'hands', 'body', 'nsfw'] %}
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="tag_target_{{ target }}" name="tag_adetailer_targets" value="{{ target }}" {% if tags.adetailer_targets is defined and target in tags.adetailer_targets %}checked{% endif %}>
<label class="form-check-label" for="tag_target_{{ target }}">{{ target|capitalize }}</label>
</div>
{% endfor %}
</div>
</div>
<div class="col-md-3 mb-3">
<label class="form-label">&nbsp;</label>
<div class="form-check mt-2">
<input class="form-check-input" type="checkbox" id="tag_nsfw" name="tag_nsfw" {% if detailer.is_nsfw %}checked{% endif %}>
<label class="form-check-label" for="tag_nsfw">NSFW</label>
</div>
</div>
</div>
</div>
</div>

160
templates/detailers/index.html
View File

@@ -1,24 +1,36 @@
{% extends "layout.html" %}
{% from "partials/library_toolbar.html" import library_toolbar %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>Detailer Library</h2>
<div class="d-flex gap-1 align-items-center">
<button id="batch-generate-btn" class="btn btn-sm btn-outline-success btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Generate cover images for detailers without one" data-requires="comfyui"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
<button id="regenerate-all-btn" class="btn btn-sm btn-outline-danger btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Regenerate cover images for all detailers" data-requires="comfyui"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
<form action="{{ url_for('bulk_create_detailers_from_loras') }}" method="post" class="d-contents">
<button type="submit" class="btn btn-sm btn-primary btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Create new detailer entries from all LoRA files"><img src="{{ url_for('static', filename='icons/new-file.png') }}"></button>
</form>
<form action="{{ url_for('bulk_create_detailers_from_loras') }}" method="post" class="d-contents">
<input type="hidden" name="overwrite" value="true">
<button type="submit" class="btn btn-sm btn-danger btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Overwrite all detailer metadata from LoRA files (uses API credits)" onclick="return confirm('WARNING: This will re-run LLM generation for ALL detailer LoRAs, consuming significant API credits and overwriting ALL existing detailer metadata. Are you absolutely sure?')"><img src="{{ url_for('static', filename='icons/new-file.png') }}"></button>
</form>
<a href="{{ url_for('create_detailer') }}" class="btn btn-sm btn-success">Create New Detailer</a>
<form action="{{ url_for('rescan_detailers') }}" method="post" class="d-contents">
<button type="submit" class="btn btn-sm btn-outline-primary btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Rescan detailer files from disk"><img src="{{ url_for('static', filename='icons/refresh.png') }}"></button>
</form>
{{ library_toolbar(
title="Detailer",
category="detailers",
create_url=url_for('create_detailer'),
create_label="Detailer",
has_batch_gen=true,
has_regen_all=true,
has_lora_create=true,
bulk_create_url=url_for('bulk_create_detailers_from_loras'),
has_tags=true,
regen_tags_category="detailers",
rescan_url=url_for('rescan_detailers'),
get_missing_url="/get_missing_detailers",
clear_covers_url="/clear_all_detailer_covers",
generate_url_pattern="/detailer/{slug}/generate"
) }}
<!-- Filters -->
<form method="get" class="mb-3 d-flex gap-3 align-items-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="favourite" value="on" id="favFilter" {% if favourite_filter == 'on' %}checked{% endif %} onchange="this.form.submit()">
<label class="form-check-label small" for="favFilter">&#9733; Favourites</label>
</div>
</div>
<select name="nsfw" class="form-select form-select-sm" style="width:auto;" onchange="this.form.submit()">
<option value="all" {% if nsfw_filter == 'all' %}selected{% endif %}>All ratings</option>
<option value="sfw" {% if nsfw_filter == 'sfw' %}selected{% endif %}>SFW only</option>
<option value="nsfw" {% if nsfw_filter == 'nsfw' %}selected{% endif %}>NSFW only</option>
</select>
</form>
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
{% for detailer in detailers %}
@@ -40,7 +52,7 @@
{% endif %}
</div>
<div class="card-body">
<h5 class="card-title text-center">{{ detailer.name }}</h5>
<h5 class="card-title text-center">{% if detailer.is_favourite %}<span class="text-warning">&#9733;</span> {% endif %}{{ detailer.name }}{% if detailer.is_nsfw %} <span class="badge bg-danger" style="font-size:0.6rem;vertical-align:middle;">NSFW</span>{% endif %}</h5>
<p class="card-text small text-center text-muted">
{% set ns = namespace(parts=[]) %}
{% if detailer.data.prompt is string %}
@@ -82,111 +94,11 @@
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Handle highlight parameter
const highlightSlug = new URLSearchParams(window.location.search).get('highlight');
if (highlightSlug) {
const card = document.getElementById(`card-${highlightSlug}`);
if (card) {
card.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}
const batchBtn = document.getElementById('batch-generate-btn');
const regenAllBtn = document.getElementById('regenerate-all-btn');
const detailerNameText = document.getElementById('current-detailer-name');
const stepProgressText = document.getElementById('current-step-progress');
async function waitForJob(jobId) {
return new Promise((resolve, reject) => {
const poll = setInterval(async () => {
try {
const resp = await fetch(`/api/queue/${jobId}/status`);
const data = await resp.json();
if (data.status === 'done') { clearInterval(poll); resolve(data); }
else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
else if (data.status === 'processing') nodeStatus.textContent = 'Generating…';
else nodeStatus.textContent = 'Queued…';
} catch (err) {}
}, 1500);
});
}
async function runBatch() {
const response = await fetch('/get_missing_detailers');
const data = await response.json();
const missing = data.missing;
if (missing.length === 0) {
alert("No detailers missing cover images.");
return;
}
batchBtn.disabled = true;
regenAllBtn.disabled = true;
// Phase 1: Queue all jobs upfront
const jobs = [];
for (const item of missing) {
try {
const genResp = await fetch(`/detailer/${item.slug}/generate`, {
method: 'POST',
body: new URLSearchParams({ action: 'replace', character_slug: '__random__' }),
headers: { 'X-Requested-With': 'XMLHttpRequest' }
});
const genData = await genResp.json();
if (genData.job_id) jobs.push({ item, jobId: genData.job_id });
} catch (err) {
console.error(`Failed to queue ${item.name}:`, err);
}
}
// Phase 2: Poll all concurrently
let currentItem = '';
await Promise.all(jobs.map(async ({ item, jobId }) => {
currentItem = item.name;
detailerNameText.textContent = `Processing: ${currentItem}`;
try {
const jobResult = await waitForJob(jobId);
if (jobResult.result && jobResult.result.image_url) {
const img = document.getElementById(`img-${item.slug}`);
const noImgSpan = document.getElementById(`no-img-${item.slug}`);
if (img) { img.src = jobResult.result.image_url; img.classList.remove('d-none'); }
if (noImgSpan) noImgSpan.classList.add('d-none');
}
} catch (err) {
console.error(`Failed for ${item.name}:`, err);
}
}));
batchBtn.disabled = false;
regenAllBtn.disabled = false;
alert(`Batch generation complete! ${jobs.length} detailer images processed.`);
}
batchBtn.addEventListener('click', async () => {
const response = await fetch('/get_missing_detailers');
const data = await response.json();
if (data.missing.length === 0) {
alert("No detailers missing cover images.");
return;
}
if (!confirm(`Generate cover images for ${data.missing.length} detailers?`)) return;
runBatch();
});
regenAllBtn.addEventListener('click', async () => {
if (!confirm("This will unassign ALL current detailer cover images and generate new ones. Proceed?")) return;
const clearResp = await fetch('/clear_all_detailer_covers', { method: 'POST' });
if (clearResp.ok) {
document.querySelectorAll('.img-container img').forEach(img => img.classList.add('d-none'));
document.querySelectorAll('.img-container .text-muted').forEach(span => span.classList.remove('d-none'));
runBatch();
}
});
});
const highlightSlug = new URLSearchParams(window.location.search).get('highlight');
if (highlightSlug) {
const card = document.getElementById(`card-${highlightSlug}`);
if (card) card.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
</script>
<script src="{{ url_for('static', filename='js/library-toolbar.js') }}"></script>
{% endblock %}

26
templates/edit.html
View File

@@ -18,9 +18,27 @@
<label for="character_name" class="form-label">Display Name</label>
<input type="text" class="form-control" id="character_name" name="character_name" value="{{ character.name }}" required>
</div>
<div class="mb-3">
<label for="tags" class="form-label">Tags (comma separated)</label>
<input type="text" class="form-control" id="tags" name="tags" value="{{ character.data.tags | join(', ') }}">
{% set tags = character.data.tags if character.data.tags is mapping else {} %}
<div class="row">
<div class="col-md-6 mb-3">
<label for="tag_origin_series" class="form-label">Origin Series</label>
<input type="text" class="form-control" id="tag_origin_series" name="tag_origin_series" value="{{ tags.origin_series or '' }}" placeholder="e.g. Fire Emblem, Mario, Original">
</div>
<div class="col-md-3 mb-3">
<label for="tag_origin_type" class="form-label">Origin Type</label>
<select class="form-select" id="tag_origin_type" name="tag_origin_type">
{% for opt in ['', 'Anime', 'Video Game', 'Cartoon', 'Movie', 'Comic', 'Original'] %}
<option value="{{ opt }}" {% if tags.origin_type == opt %}selected{% endif %}>{{ opt or '— Select —' }}</option>
{% endfor %}
</select>
</div>
<div class="col-md-3 mb-3">
<label class="form-label">&nbsp;</label>
<div class="form-check mt-2">
<input class="form-check-input" type="checkbox" id="tag_nsfw" name="tag_nsfw" {% if character.is_nsfw %}checked{% endif %}>
<label class="form-check-label" for="tag_nsfw">NSFW</label>
</div>
</div>
</div>
</div>
</div>
@@ -121,7 +139,7 @@
</button>
</div>
<div class="card-body">
{% set wardrobe_data = character.data.wardrobe %}
{% set wardrobe_data = character.data.get('wardrobe', {}) %}
{% set outfits = character.get_available_outfits() %}
{% if wardrobe_data.default is defined and wardrobe_data.default is mapping %}
{# New nested format - show tabs for each outfit #}

137
templates/gallery.html
View File

@@ -57,23 +57,50 @@
</select>
</div>
<!-- Favourite filter -->
<div class="col-auto">
<label class="form-label form-label-sm mb-1">&nbsp;</label>
<div class="form-check mt-1">
<input class="form-check-input" type="checkbox" name="favourite" value="on" id="favFilter" {% if favourite_filter == 'on' %}checked{% endif %} onchange="this.form.submit()">
<label class="form-check-label small" for="favFilter">&#9733; Favourites</label>
</div>
</div>
<!-- NSFW filter -->
<div class="col-auto">
<label class="form-label form-label-sm mb-1">Rating</label>
<select name="nsfw" class="form-select form-select-sm" onchange="this.form.submit()">
<option value="all" {% if nsfw_filter == 'all' %}selected{% endif %}>All</option>
<option value="sfw" {% if nsfw_filter == 'sfw' %}selected{% endif %}>SFW only</option>
<option value="nsfw" {% if nsfw_filter == 'nsfw' %}selected{% endif %}>NSFW only</option>
</select>
</div>
<!-- Active filter chips -->
<div class="col">
{% if category != 'all' %}
<span class="badge bg-primary me-1">
{{ category | capitalize }}
<a href="{{ url_for('gallery', sort=sort, per_page=per_page) }}" class="text-white ms-1 text-decoration-none">×</a>
<a href="{{ url_for('gallery', sort=sort, per_page=per_page, xref_category=xref_category, xref_slug=xref_slug) }}" class="text-white ms-1 text-decoration-none">×</a>
</span>
{% endif %}
{% if slug %}
<span class="badge bg-secondary me-1">
{{ slug }}
<a href="{{ url_for('gallery', category=category, sort=sort, per_page=per_page) }}" class="text-white ms-1 text-decoration-none">×</a>
<a href="{{ url_for('gallery', category=category, sort=sort, per_page=per_page, xref_category=xref_category, xref_slug=xref_slug) }}" class="text-white ms-1 text-decoration-none">×</a>
</span>
{% endif %}
{% if xref_category and xref_slug %}
<span class="badge bg-info me-1">
Cross-ref: {{ xref_category | capitalize }} = {{ xref_slug }}
<a href="{{ url_for('gallery', category=category, slug=slug, sort=sort, per_page=per_page) }}" class="text-white ms-1 text-decoration-none">×</a>
</span>
{% endif %}
</div>
<input type="hidden" name="page" value="1">
{% if xref_category %}<input type="hidden" name="xref_category" value="{{ xref_category }}">{% endif %}
{% if xref_slug %}<input type="hidden" name="xref_slug" value="{{ xref_slug }}">{% endif %}
</div>
</form>
@@ -113,10 +140,21 @@
class="badge {% if category == 'detailers' %}bg-secondary{% else %}bg-light text-dark{% endif %} text-decoration-none px-3 py-2">
Detailers
</a>
<a href="{{ url_for('gallery', category='checkpoints', sort=sort, per_page=per_page) }}"
<a href="{{ url_for('gallery', category='checkpoints', sort=sort, per_page=per_page) }}"
class="badge {% if category == 'checkpoints' %}bg-dark{% else %}bg-light text-dark{% endif %} text-decoration-none px-3 py-2">
Checkpoints
</a>
<span class="text-muted small mx-1">|</span>
<a href="{{ url_for('gallery', category='presets', sort=sort, per_page=per_page) }}"
class="badge {% if category == 'presets' %}text-white{% else %}bg-light text-dark{% endif %} text-decoration-none px-3 py-2"
{% if category == 'presets' %}style="background-color: #6f42c1"{% endif %}>
Presets
</a>
<a href="{{ url_for('gallery', category='generator', sort=sort, per_page=per_page) }}"
class="badge {% if category == 'generator' %}text-white{% else %}bg-light text-dark{% endif %} text-decoration-none px-3 py-2"
{% if category == 'generator' %}style="background-color: #20c997"{% endif %}>
Generator
</a>
</div>
</div>
@@ -222,6 +260,9 @@
'styles': 'warning',
'detailers': 'secondary',
'checkpoints': 'dark',
'looks': 'primary',
'presets': 'purple',
'generator': 'teal',
} %}
{% for img in images %}
<div class="gallery-card"
@@ -237,6 +278,8 @@
<span class="cat-badge badge bg-{{ cat_colors.get(img.category, 'secondary') }}">
{{ img.category[:-1] if img.category.endswith('s') else img.category }}
</span>
{% if img._sidecar.get('is_favourite') %}<span class="fav-badge" title="Favourite" onclick="event.stopPropagation(); toggleImageFavourite('{{ img.path }}', this)">&#9733;</span>{% else %}<span class="fav-badge fav-off" title="Mark as favourite" onclick="event.stopPropagation(); toggleImageFavourite('{{ img.path }}', this)">&#9734;</span>{% endif %}
{% if img._sidecar.get('is_nsfw') %}<span class="nsfw-badge badge bg-danger" style="position:absolute;top:4px;right:4px;font-size:0.6rem;">NSFW</span>{% endif %}
<!-- Info View Additional Metadata -->
<div class="info-meta">
@@ -280,8 +323,12 @@
<a href="{{ url_for('checkpoint_detail', slug=img.slug) }}"
class="btn btn-sm btn-outline-light py-0 px-2"
onclick="event.stopPropagation()">Open</a>
{% elif img.category in ('presets', 'generator') %}
<a href="{{ url_for('preset_detail', slug=img.slug) }}"
class="btn btn-sm btn-outline-light py-0 px-2"
onclick="event.stopPropagation()">Preset</a>
{% else %}
<a href="{{ url_for('generator') }}?{{ img.category[:-1] }}={{ img.slug }}"
<a href="{{ url_for('generator') }}?preset={{ img.slug }}"
class="btn btn-sm btn-outline-light py-0 px-2"
onclick="event.stopPropagation()">Generator</a>
{% endif %}
@@ -376,6 +423,12 @@
<div class="meta-grid" id="metaGrid"></div>
</div>
<!-- Cross-reference entity chips (from sidecar) -->
<div class="mb-3 d-none" id="xrefRow">
<label class="form-label fw-semibold mb-1">Used Entities</label>
<div class="d-flex flex-wrap gap-1" id="xrefContainer"></div>
</div>
<div id="noMetaMsg" class="d-none">
<p class="text-muted small fst-italic mb-0">No generation metadata found in this image.</p>
</div>
@@ -409,7 +462,31 @@
{% endblock %}
{% block scripts %}
<style>
.fav-badge { position: absolute; top: 4px; left: 4px; font-size: 1.2rem; color: #ffc107; cursor: pointer; text-shadow: 0 0 3px rgba(0,0,0,0.7); z-index: 2; }
.fav-badge.fav-off { color: rgba(255,255,255,0.5); }
.fav-badge:hover { transform: scale(1.2); }
</style>
<script>
async function toggleImageFavourite(path, el) {
const resp = await fetch('/gallery/image/favourite', {
method: 'POST', headers: {'Content-Type': 'application/json'},
body: JSON.stringify({path})
});
const data = await resp.json();
if (data.success) {
el.innerHTML = data.is_favourite ? '&#9733;' : '&#9734;';
el.classList.toggle('fav-off', !data.is_favourite);
}
}
async function toggleImageNsfw(path, el) {
const resp = await fetch('/gallery/image/nsfw', {
method: 'POST', headers: {'Content-Type': 'application/json'},
body: JSON.stringify({path})
});
const data = await resp.json();
if (data.success) location.reload();
}
// ---- Prompt modal ----
let promptModal;
document.addEventListener('DOMContentLoaded', () => {
@@ -473,15 +550,55 @@ async function showPrompt(imgPath, name, category, slug) {
document.getElementById('noMetaMsg').classList.toggle('d-none',
!!(data.positive || loras.length || hasParams));
// Cross-reference entity chips (from sidecar)
const xrefContainer = document.getElementById('xrefContainer');
const xrefRow = document.getElementById('xrefRow');
xrefContainer.innerHTML = '';
if (data.sidecar) {
const sc = data.sidecar;
const xrefColors = {
character: 'primary', outfit: 'success', action: 'danger',
style: 'warning', scene: 'info', detailer: 'secondary',
look: 'primary', preset: 'purple'
};
for (const [key, sidecarKey] of [
['character', 'character_slug'], ['outfit', 'outfit_slug'],
['action', 'action_slug'], ['style', 'style_slug'],
['scene', 'scene_slug'], ['detailer', 'detailer_slug'],
['look', 'look_slug'], ['preset', 'preset_slug']
]) {
const val = sc[sidecarKey];
if (!val) continue;
const chip = document.createElement('a');
chip.className = `badge bg-${xrefColors[key] || 'secondary'} text-decoration-none`;
chip.href = `/gallery?xref_category=${key}&xref_slug=${encodeURIComponent(val)}`;
chip.textContent = `${key}: ${sc[sidecarKey.replace('_slug', '_name')] || val}`;
chip.title = `Show all images using this ${key}`;
xrefContainer.appendChild(chip);
}
xrefRow.classList.toggle('d-none', xrefContainer.children.length === 0);
} else {
xrefRow.classList.add('d-none');
}
// Generator link
const genUrl = category === 'characters'
? `/character/${slug}`
: category === 'checkpoints'
? `/checkpoint/${slug}`
: `/generator?${category.replace(/s$/, '')}=${encodeURIComponent(slug)}`;
let genUrl, genLabel;
if (category === 'characters') {
genUrl = `/character/${slug}`;
genLabel = 'Open';
} else if (category === 'checkpoints') {
genUrl = `/checkpoint/${slug}`;
genLabel = 'Open';
} else if (category === 'presets' || category === 'generator') {
genUrl = `/generator?preset=${encodeURIComponent(slug)}`;
genLabel = 'Open in Generator';
} else {
genUrl = `/generator?${category.replace(/s$/, '')}=${encodeURIComponent(slug)}`;
genLabel = 'Open in Generator';
}
const genBtn = document.getElementById('openGeneratorBtn');
genBtn.href = genUrl;
genBtn.textContent = (category === 'characters' || category === 'checkpoints') ? 'Open' : 'Open in Generator';
genBtn.textContent = genLabel;
} catch (e) {
document.getElementById('promptPositive').value = 'Error loading metadata.';
} finally {

645
templates/generator.html
View File

@@ -6,15 +6,15 @@
<div class="col-md-5">
<div id="progress-container" class="mb-3 d-none">
<label id="progress-label" class="form-label">Generating...</label>
<div class="progress" role="progressbar" aria-label="Generation Progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="progress" role="progressbar">
<div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%">0%</div>
</div>
</div>
<div class="card mb-4">
<div class="card-header bg-primary text-white">Generator Settings</div>
<div class="card-header bg-primary text-white">Generator</div>
<div class="card-body">
<form id="generator-form" action="{{ url_for('generator') }}" method="post">
<form id="generator-form" action="{{ url_for('generator_generate') }}" method="post">
<!-- Controls bar -->
<div class="d-flex align-items-center gap-2 flex-wrap mb-3 pb-3 border-bottom">
@@ -34,184 +34,94 @@
</div>
</div>
<!-- Character -->
<!-- Preset selector -->
<div class="mb-3">
<div class="d-flex justify-content-between align-items-center mb-1">
<label for="character" class="form-label mb-0">Character</label>
<button type="button" class="btn btn-sm btn-outline-secondary" id="random-char-btn">Random</button>
<label for="preset-select" class="form-label mb-0 fw-semibold">Preset</label>
<button type="button" class="btn btn-sm btn-outline-secondary" id="random-preset-btn">Random</button>
</div>
<select class="form-select" id="character" name="character" required>
<option value="" disabled {% if not selected_char %}selected{% endif %}>Select a character...</option>
{% for char in characters %}
<option value="{{ char.slug }}" {% if selected_char == char.slug %}selected{% endif %}>{{ char.name }}</option>
<select class="form-select" id="preset-select" name="preset_slug" required>
<option value="" disabled {% if not preset_slug %}selected{% endif %}>Select a preset...</option>
{% for p in presets %}
<option value="{{ p.slug }}" {% if preset_slug == p.slug %}selected{% endif %}>{{ p.name }}</option>
{% endfor %}
</select>
</div>
<!-- Checkpoint -->
<!-- Preset summary (populated via AJAX) -->
<div class="mb-3" id="preset-summary-container" style="display:none">
<label class="form-label mb-1 small fw-semibold text-muted">Preset Configuration</label>
<div class="d-flex flex-wrap gap-1" id="preset-summary"></div>
</div>
<!-- Checkpoint override -->
<div class="mb-3">
<div class="d-flex justify-content-between align-items-center mb-1">
<label for="checkpoint" class="form-label mb-0">Checkpoint Model</label>
<label for="checkpoint" class="form-label mb-0">Checkpoint Override</label>
<button type="button" class="btn btn-sm btn-outline-secondary" id="random-ckpt-btn">Random</button>
</div>
<select class="form-select" id="checkpoint" name="checkpoint" required>
<select class="form-select form-select-sm" id="checkpoint" name="checkpoint">
<option value="">Use preset default</option>
{% for ckpt in checkpoints %}
<option value="{{ ckpt }}" {% if selected_ckpt == ckpt %}selected{% endif %}>{{ ckpt }}</option>
<option value="{{ ckpt }}" {% if selected_ckpt == ckpt %}selected{% endif %}>{{ ckpt.split('/')[-1] }}</option>
{% endfor %}
</select>
<div class="form-text">Listing models from Illustrious/ folder</div>
</div>
<!-- Mix & Match -->
<div class="mb-3">
<label class="form-label">Mix &amp; Match
<small class="text-muted fw-normal ms-1">— first checked per category applies its LoRA</small>
</label>
<div class="accordion" id="mixAccordion">
{% set mix_categories = [
('Actions', 'action', actions, 'action_slugs'),
('Outfits', 'outfit', outfits, 'outfit_slugs'),
('Scenes', 'scene', scenes, 'scene_slugs'),
('Styles', 'style', styles, 'style_slugs'),
('Detailers', 'detailer', detailers, 'detailer_slugs'),
] %}
{% for cat_label, cat_key, cat_items, field_name in mix_categories %}
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed py-2" type="button"
data-bs-toggle="collapse" data-bs-target="#mix-{{ cat_key }}">
{{ cat_label }}
<span class="badge bg-secondary rounded-pill ms-2" id="badge-{{ cat_key }}">0</span>
<span class="badge bg-light text-secondary border ms-2 px-2 py-1"
style="cursor:pointer;font-size:.7rem;font-weight:normal"
onclick="event.stopPropagation(); randomizeCategory('{{ field_name }}', '{{ cat_key }}')">Random</span>
</button>
</h2>
<div id="mix-{{ cat_key }}" class="accordion-collapse collapse">
<div class="accordion-body p-2">
<input type="text" class="form-control form-control-sm mb-2"
placeholder="Search {{ cat_label | lower }}..."
oninput="filterMixCategory(this, 'mixlist-{{ cat_key }}')">
<div id="mixlist-{{ cat_key }}" style="max-height:220px;overflow-y:auto;">
{% for item in cat_items %}
<label class="mix-item d-flex align-items-center gap-2 px-2 py-1 rounded"
data-name="{{ item.name | lower }}" style="cursor:pointer;">
<input type="checkbox" class="form-check-input flex-shrink-0"
name="{{ field_name }}" value="{{ item.slug }}"
onchange="updateMixBadge('{{ cat_key }}', '{{ field_name }}')">
{% if item.image_path %}
<img src="{{ url_for('static', filename='uploads/' + item.image_path) }}"
class="rounded flex-shrink-0" style="width:32px;height:32px;object-fit:cover">
{% else %}
<span class="rounded bg-light flex-shrink-0 d-inline-flex align-items-center justify-content-center text-muted"
style="width:32px;height:32px;font-size:9px;">N/A</span>
{% endif %}
<span class="small text-truncate">{{ item.name }}</span>
</label>
{% else %}
<p class="text-muted small p-2 mb-0">No {{ cat_label | lower }} found.</p>
{% endfor %}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<!-- Resolution -->
<div class="mb-3">
<label class="form-label">Resolution</label>
<label class="form-label">Resolution Override</label>
<div class="d-flex flex-wrap gap-1 mb-2">
<button type="button" class="btn btn-sm btn-secondary preset-btn" data-w="1024" data-h="1024">1:1</button>
<button type="button" class="btn btn-sm btn-outline-secondary preset-btn" data-w="1152" data-h="896">4:3 L</button>
<button type="button" class="btn btn-sm btn-outline-secondary preset-btn" data-w="896" data-h="1152">4:3 P</button>
<button type="button" class="btn btn-sm btn-outline-secondary preset-btn" data-w="1344" data-h="768">16:9 L</button>
<button type="button" class="btn btn-sm btn-outline-secondary preset-btn" data-w="768" data-h="1344">16:9 P</button>
<button type="button" class="btn btn-sm btn-outline-secondary preset-btn" data-w="1280" data-h="800">16:10 L</button>
<button type="button" class="btn btn-sm btn-outline-secondary preset-btn" data-w="800" data-h="1280">16:10 P</button>
<button type="button" class="btn btn-sm btn-outline-secondary preset-btn" data-w="1792" data-h="768">21:9 L</button>
<button type="button" class="btn btn-sm btn-outline-secondary preset-btn" data-w="768" data-h="1792">21:9 P</button>
<button type="button" class="btn btn-sm btn-outline-secondary res-btn" data-w="" data-h="">Preset default</button>
<button type="button" class="btn btn-sm btn-outline-secondary res-btn" data-w="1024" data-h="1024">1:1</button>
<button type="button" class="btn btn-sm btn-outline-secondary res-btn" data-w="1152" data-h="896">4:3 L</button>
<button type="button" class="btn btn-sm btn-outline-secondary res-btn" data-w="896" data-h="1152">4:3 P</button>
<button type="button" class="btn btn-sm btn-outline-secondary res-btn" data-w="1344" data-h="768">16:9 L</button>
<button type="button" class="btn btn-sm btn-outline-secondary res-btn" data-w="768" data-h="1344">16:9 P</button>
<button type="button" class="btn btn-sm btn-outline-secondary res-btn" data-w="1280" data-h="800">16:10 L</button>
<button type="button" class="btn btn-sm btn-outline-secondary res-btn" data-w="800" data-h="1280">16:10 P</button>
</div>
<div class="d-flex align-items-center gap-2">
<label class="form-label mb-0 small fw-semibold">W</label>
<input type="number" class="form-control form-control-sm" name="width" id="res-width"
value="1024" min="64" max="4096" step="64" style="width:88px">
<span class="text-muted">×</span>
value="" min="64" max="4096" step="64" style="width:88px" placeholder="Auto">
<span class="text-muted">&times;</span>
<label class="form-label mb-0 small fw-semibold">H</label>
<input type="number" class="form-control form-control-sm" name="height" id="res-height"
value="1024" min="64" max="4096" step="64" style="width:88px">
value="" min="64" max="4096" step="64" style="width:88px" placeholder="Auto">
</div>
</div>
<!-- Prompt Preview -->
<!-- Extra prompts -->
<div class="mb-3">
<div class="d-flex justify-content-between align-items-center mb-1">
<label class="form-label mb-0">Prompt Preview</label>
<div class="d-flex gap-1">
<button type="button" class="btn btn-sm btn-outline-primary" id="build-preview-btn">Build</button>
<button type="button" class="btn btn-sm btn-outline-secondary" id="clear-preview-btn">Clear</button>
</div>
</div>
<div class="tag-widget-container d-none" id="prompt-tags"></div>
<textarea class="form-control form-control-sm font-monospace" id="prompt-preview"
name="override_prompt" rows="5"
placeholder="Click Build to preview the auto-generated prompt — edit freely before generating."></textarea>
<div class="form-text" id="preview-status"></div>
</div>
<!-- ADetailer Prompt Previews -->
<div class="mb-3">
<label class="form-label mb-0">Face Detailer Prompt</label>
<div class="tag-widget-container d-none" id="face-tags"></div>
<textarea class="form-control form-control-sm font-monospace" id="face-preview"
name="override_face_prompt" rows="2"
placeholder="Auto-populated on Build — edit to override face detailer prompt."></textarea>
<label for="extra_positive" class="form-label">Extra Positive Prompt</label>
<textarea class="form-control form-control-sm" id="extra_positive" name="extra_positive" rows="2"
placeholder="Additional tags appended to the preset prompt"></textarea>
</div>
<div class="mb-3">
<label class="form-label mb-0">Hand Detailer Prompt</label>
<div class="tag-widget-container d-none" id="hand-tags"></div>
<textarea class="form-control form-control-sm font-monospace" id="hand-preview"
name="override_hand_prompt" rows="2"
placeholder="Auto-populated on Build — edit to override hand detailer prompt."></textarea>
</div>
<!-- Additional prompts -->
<div class="mb-3">
<label for="positive_prompt" class="form-label">Additional Positive Prompt</label>
<textarea class="form-control" id="positive_prompt" name="positive_prompt" rows="2" placeholder="e.g. sitting in a cafe, drinking coffee, daylight"></textarea>
</div>
<div class="mb-3">
<label for="negative_prompt" class="form-label">Additional Negative Prompt</label>
<textarea class="form-control" id="negative_prompt" name="negative_prompt" rows="2" placeholder="e.g. bad hands, extra digits"></textarea>
<label for="extra_negative" class="form-label">Extra Negative Prompt</label>
<textarea class="form-control form-control-sm" id="extra_negative" name="extra_negative" rows="2"
placeholder="Additional negative tags"></textarea>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-7">
<div class="card">
<div class="card-header bg-dark text-white">Result</div>
<div class="card-body p-0 d-flex align-items-center justify-content-center" style="min-height: 500px;" id="result-container">
{% if generated_image %}
<div class="img-container w-100 h-100">
<img src="{{ url_for('static', filename='uploads/' + generated_image) }}" alt="Generated Result" class="img-fluid w-100" id="result-img">
</div>
{% else %}
<div class="text-center text-muted" id="placeholder-text">
<p>Select settings and click Generate</p>
<p>Select a preset and click Generate</p>
</div>
<div class="img-container w-100 h-100 d-none">
<img src="" alt="Generated Result" class="img-fluid w-100" id="result-img">
</div>
{% endif %}
</div>
<div class="card-footer d-none" id="result-footer">
<small class="text-muted">Saved to character gallery</small>
<small class="text-muted">Saved to generator gallery</small>
</div>
</div>
</div>
@@ -221,297 +131,194 @@
{% block scripts %}
<script>
// --- Filtering ---
function filterMixCategory(input, listId) {
const query = input.value.toLowerCase();
document.querySelectorAll(`#${listId} .mix-item`).forEach(el => {
el.style.display = el.dataset.name.includes(query) ? '' : 'none';
});
}
// --- Preset summary ---
async function loadPresetInfo(slug) {
const container = document.getElementById('preset-summary-container');
const summary = document.getElementById('preset-summary');
if (!slug) { container.style.display = 'none'; return; }
function updateMixBadge(key, fieldName) {
const count = document.querySelectorAll(`input[name="${fieldName}"]:checked`).length;
const badge = document.getElementById(`badge-${key}`);
badge.textContent = count;
badge.className = count > 0
? 'badge bg-primary rounded-pill ms-2'
: 'badge bg-secondary rounded-pill ms-2';
}
try {
const res = await fetch(`/generator/preset_info?slug=${encodeURIComponent(slug)}`);
const data = await res.json();
summary.innerHTML = '';
// --- Randomizers (global so inline onclick can call them) ---
function randomizeCategory(fieldName, catKey) {
const cbs = Array.from(document.querySelectorAll(`input[name="${fieldName}"]`));
cbs.forEach(cb => cb.checked = false);
if (cbs.length) cbs[Math.floor(Math.random() * cbs.length)].checked = true;
updateMixBadge(catKey, fieldName);
}
function applyLuckyDip() {
const charOpts = Array.from(document.getElementById('character').options).filter(o => o.value);
if (charOpts.length)
document.getElementById('character').value = charOpts[Math.floor(Math.random() * charOpts.length)].value;
const ckptOpts = Array.from(document.getElementById('checkpoint').options).filter(o => o.value);
if (ckptOpts.length)
document.getElementById('checkpoint').value = ckptOpts[Math.floor(Math.random() * ckptOpts.length)].value;
const presets = Array.from(document.querySelectorAll('.preset-btn'));
if (presets.length) presets[Math.floor(Math.random() * presets.length)].click();
[['action_slugs', 'action'], ['outfit_slugs', 'outfit'], ['scene_slugs', 'scene'],
['style_slugs', 'style'], ['detailer_slugs', 'detailer']].forEach(([field, key]) => {
randomizeCategory(field, key);
});
clearTagWidgets('prompt-tags', 'prompt-preview');
clearTagWidgets('face-tags', 'face-preview');
clearTagWidgets('hand-tags', 'hand-preview');
document.getElementById('preview-status').textContent = '';
}
// --- Resolution presets ---
document.querySelectorAll('.preset-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.getElementById('res-width').value = btn.dataset.w;
document.getElementById('res-height').value = btn.dataset.h;
document.querySelectorAll('.preset-btn').forEach(b => {
b.classList.remove('btn-secondary');
b.classList.add('btn-outline-secondary');
});
btn.classList.remove('btn-outline-secondary');
btn.classList.add('btn-secondary');
});
});
['res-width', 'res-height'].forEach(id => {
document.getElementById(id).addEventListener('input', () => {
document.querySelectorAll('.preset-btn').forEach(b => {
b.classList.remove('btn-secondary');
b.classList.add('btn-outline-secondary');
});
});
});
// --- Tag Widget System ---
function populateTagWidgets(containerId, textareaId, promptStr) {
const container = document.getElementById(containerId);
const textarea = document.getElementById(textareaId);
container.innerHTML = '';
if (!promptStr || !promptStr.trim()) {
container.classList.add('d-none');
return;
}
const tags = promptStr.split(',').map(t => t.trim()).filter(Boolean);
tags.forEach(tag => {
const el = document.createElement('span');
el.className = 'tag-widget active';
el.textContent = tag;
el.dataset.tag = tag;
el.addEventListener('click', () => {
el.classList.toggle('active');
el.classList.toggle('inactive');
rebuildFromTags(containerId, textareaId);
});
container.appendChild(el);
});
container.classList.remove('d-none');
textarea.classList.add('d-none');
}
function rebuildFromTags(containerId, textareaId) {
const container = document.getElementById(containerId);
const textarea = document.getElementById(textareaId);
const activeTags = Array.from(container.querySelectorAll('.tag-widget.active'))
.map(el => el.dataset.tag);
textarea.value = activeTags.join(', ');
}
function clearTagWidgets(containerId, textareaId) {
const container = document.getElementById(containerId);
const textarea = document.getElementById(textareaId);
container.innerHTML = '';
container.classList.add('d-none');
textarea.classList.remove('d-none');
textarea.value = '';
}
// --- Prompt preview ---
async function buildPromptPreview() {
const charVal = document.getElementById('character').value;
const status = document.getElementById('preview-status');
if (!charVal) { status.textContent = 'Select a character first.'; return; }
status.textContent = 'Building...';
const formData = new FormData(document.getElementById('generator-form'));
try {
const resp = await fetch('/generator/preview_prompt', { method: 'POST', body: formData });
const data = await resp.json();
if (data.error) {
status.textContent = 'Error: ' + data.error;
} else {
document.getElementById('prompt-preview').value = data.prompt;
document.getElementById('face-preview').value = data.face || '';
document.getElementById('hand-preview').value = data.hand || '';
populateTagWidgets('prompt-tags', 'prompt-preview', data.prompt);
populateTagWidgets('face-tags', 'face-preview', data.face || '');
populateTagWidgets('hand-tags', 'hand-preview', data.hand || '');
status.textContent = 'Click tags to toggle — Clear to reset.';
}
} catch (err) {
status.textContent = 'Request failed.';
}
}
document.getElementById('build-preview-btn').addEventListener('click', buildPromptPreview);
document.getElementById('clear-preview-btn').addEventListener('click', () => {
clearTagWidgets('prompt-tags', 'prompt-preview');
clearTagWidgets('face-tags', 'face-preview');
clearTagWidgets('hand-tags', 'hand-preview');
document.getElementById('preview-status').textContent = '';
});
// --- Main generation logic ---
document.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('generator-form');
const progressBar = document.getElementById('progress-bar');
const progressCont = document.getElementById('progress-container');
const progressLbl = document.getElementById('progress-label');
const generateBtn = document.getElementById('generate-btn');
const endlessBtn = document.getElementById('endless-btn');
const stopBtn = document.getElementById('stop-btn');
const numInput = document.getElementById('num-images');
const resultImg = document.getElementById('result-img');
const placeholder = document.getElementById('placeholder-text');
const resultFooter = document.getElementById('result-footer');
let currentJobId = null;
let stopRequested = false;
async function waitForJob(jobId) {
return new Promise((resolve, reject) => {
const poll = setInterval(async () => {
try {
const resp = await fetch(`/api/queue/${jobId}/status`);
const data = await resp.json();
if (data.status === 'done') { clearInterval(poll); resolve(data); }
else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
else if (data.status === 'processing') progressLbl.textContent = 'Generating…';
else progressLbl.textContent = 'Queued…';
} catch (err) {}
}, 1500);
});
}
function setGeneratingState(active) {
generateBtn.disabled = active;
endlessBtn.disabled = active;
stopBtn.classList.toggle('d-none', !active);
if (!active) progressCont.classList.add('d-none');
}
async function runOne(label) {
if (document.getElementById('lucky-dip').checked) applyLuckyDip();
progressCont.classList.remove('d-none');
progressBar.style.width = '100%'; progressBar.textContent = '';
progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
progressLbl.textContent = label;
const fd = new FormData(form);
const resp = await fetch(form.action, {
method: 'POST', body: fd,
headers: { 'X-Requested-With': 'XMLHttpRequest' }
});
const data = await resp.json();
if (data.error) throw new Error(data.error);
currentJobId = data.job_id;
progressLbl.textContent = 'Queued…';
const jobResult = await waitForJob(currentJobId);
currentJobId = null;
if (jobResult.result && jobResult.result.image_url) {
resultImg.src = jobResult.result.image_url;
resultImg.parentElement.classList.remove('d-none');
if (placeholder) placeholder.classList.add('d-none');
resultFooter.classList.remove('d-none');
}
updateSeedFromResult(jobResult.result);
progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
}
async function runLoop(endless) {
const total = endless ? Infinity : (parseInt(numInput.value) || 1);
stopRequested = false;
setGeneratingState(true);
let n = 0;
try {
while (!stopRequested && n < total) {
n++;
const lbl = endless ? `Generating #${n} (endless)...`
: total === 1 ? 'Starting...'
: `Generating ${n} / ${total}...`;
await runOne(lbl);
}
} catch (err) {
console.error(err);
alert('Generation failed: ' + err.message);
} finally {
setGeneratingState(false);
}
}
form.addEventListener('submit', (e) => { e.preventDefault(); runLoop(false); });
endlessBtn.addEventListener('click', () => runLoop(true));
stopBtn.addEventListener('click', () => {
stopRequested = true;
progressLbl.textContent = 'Stopping after current image...';
});
document.getElementById('random-char-btn').addEventListener('click', () => {
const opts = Array.from(document.getElementById('character').options).filter(o => o.value);
if (opts.length) {
document.getElementById('character').value = opts[Math.floor(Math.random() * opts.length)].value;
buildPromptPreview();
}
});
document.getElementById('random-ckpt-btn').addEventListener('click', () => {
const opts = Array.from(document.getElementById('checkpoint').options).filter(o => o.value);
if (opts.length)
document.getElementById('checkpoint').value = opts[Math.floor(Math.random() * opts.length)].value;
});
document.getElementById('character').addEventListener('change', buildPromptPreview);
// Pre-populate from gallery URL params (?action=slug, ?outfit=slug, etc.)
const urlParams = new URLSearchParams(window.location.search);
const catMap = {
action: { field: 'action_slugs', catKey: 'action' },
outfit: { field: 'outfit_slugs', catKey: 'outfit' },
scene: { field: 'scene_slugs', catKey: 'scene' },
style: { field: 'style_slugs', catKey: 'style' },
detailer: { field: 'detailer_slugs', catKey: 'detailer' },
const colors = {
character: 'primary', outfit: 'success', action: 'danger',
style: 'warning', scene: 'info', detailer: 'secondary',
look: 'primary', checkpoint: 'dark', resolution: 'light text-dark'
};
let preselected = false;
for (const [param, { field, catKey }] of Object.entries(catMap)) {
const val = urlParams.get(param);
if (!val) continue;
const cb = document.querySelector(`input[name="${field}"][value="${CSS.escape(val)}"]`);
if (cb) {
cb.checked = true;
updateMixBadge(catKey, field);
// Expand the accordion panel
const panel = document.getElementById(`mix-${catKey}`);
if (panel) new bootstrap.Collapse(panel, { toggle: false }).show();
preselected = true;
}
for (const [key, val] of Object.entries(data)) {
if (val === null) continue;
const color = colors[key] || 'secondary';
const chip = document.createElement('span');
chip.className = `badge bg-${color} me-1 mb-1`;
chip.innerHTML = `<small class="opacity-75">${key}:</small> ${val}`;
summary.appendChild(chip);
}
if (preselected) buildPromptPreview();
container.style.display = '';
} catch (e) {
container.style.display = 'none';
}
}
// --- Resolution presets ---
document.querySelectorAll('.res-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.getElementById('res-width').value = btn.dataset.w;
document.getElementById('res-height').value = btn.dataset.h;
document.querySelectorAll('.res-btn').forEach(b => {
b.classList.remove('btn-secondary');
b.classList.add('btn-outline-secondary');
});
btn.classList.remove('btn-outline-secondary');
btn.classList.add('btn-secondary');
});
});
// Deselect res presets when manual input changes
['res-width', 'res-height'].forEach(id => {
document.getElementById(id).addEventListener('input', () => {
document.querySelectorAll('.res-btn').forEach(b => {
b.classList.remove('btn-secondary');
b.classList.add('btn-outline-secondary');
});
});
});
// --- Seed ---
document.getElementById('seed-clear-btn').addEventListener('click', () => {
document.getElementById('seed-input').value = '';
});
// --- Random buttons ---
document.getElementById('random-preset-btn').addEventListener('click', () => {
const opts = Array.from(document.getElementById('preset-select').options).filter(o => o.value);
if (opts.length) {
const pick = opts[Math.floor(Math.random() * opts.length)];
document.getElementById('preset-select').value = pick.value;
loadPresetInfo(pick.value);
}
});
document.getElementById('random-ckpt-btn').addEventListener('click', () => {
const opts = Array.from(document.getElementById('checkpoint').options).filter(o => o.value);
if (opts.length) {
document.getElementById('checkpoint').value = opts[Math.floor(Math.random() * opts.length)].value;
}
});
// --- Lucky Dip ---
function applyLuckyDip() {
document.getElementById('random-preset-btn').click();
const ckptOpts = Array.from(document.getElementById('checkpoint').options).filter(o => o.value);
if (ckptOpts.length)
document.getElementById('checkpoint').value = ckptOpts[Math.floor(Math.random() * ckptOpts.length)].value;
const resBtns = Array.from(document.querySelectorAll('.res-btn'));
if (resBtns.length) resBtns[Math.floor(Math.random() * resBtns.length)].click();
}
// --- Preset select change ---
document.getElementById('preset-select').addEventListener('change', (e) => {
loadPresetInfo(e.target.value);
});
// --- Generation loop ---
let stopRequested = false;
async function waitForJob(jobId) {
while (true) {
const res = await fetch(`/api/queue/${jobId}/status`);
const data = await res.json();
if (data.status === 'done') return data;
if (data.status === 'failed') throw new Error(data.error || 'Generation failed');
await new Promise(r => setTimeout(r, 1500));
}
}
function setGeneratingState(active) {
document.getElementById('generate-btn').disabled = active;
document.getElementById('endless-btn').classList.toggle('d-none', active);
document.getElementById('stop-btn').classList.toggle('d-none', !active);
document.getElementById('progress-container').classList.toggle('d-none', !active);
}
function updateSeedFromResult(result) {
if (result && result.result && result.result.seed != null) {
document.getElementById('seed-input').value = result.result.seed;
}
}
async function runOne(label) {
if (document.getElementById('lucky-dip').checked) applyLuckyDip();
const progressBar = document.getElementById('progress-bar');
progressBar.style.width = '100%';
progressBar.textContent = label;
document.getElementById('progress-label').textContent = label;
const form = document.getElementById('generator-form');
const formData = new FormData(form);
const res = await fetch(form.action, {
method: 'POST',
headers: {'X-Requested-With': 'XMLHttpRequest'},
body: formData,
});
const data = await res.json();
if (data.error) throw new Error(data.error);
const result = await waitForJob(data.job_id);
if (result.result && result.result.image_url) {
const img = document.getElementById('result-img');
img.src = result.result.image_url + '?t=' + Date.now();
img.parentElement.classList.remove('d-none');
document.getElementById('placeholder-text')?.classList.add('d-none');
document.getElementById('result-footer').classList.remove('d-none');
}
updateSeedFromResult(result);
return result;
}
async function runLoop(endless) {
stopRequested = false;
setGeneratingState(true);
const total = endless ? Infinity : parseInt(document.getElementById('num-images').value) || 1;
let i = 0;
try {
while (i < total && !stopRequested) {
i++;
const label = endless
? `Generating (endless) #${i}...`
: total > 1
? `Generating ${i} / ${total}...`
: 'Generating...';
await runOne(label);
}
} catch (e) {
alert('Generation error: ' + e.message);
} finally {
setGeneratingState(false);
}
}
// --- Event listeners ---
document.getElementById('generator-form').addEventListener('submit', (e) => {
e.preventDefault();
runLoop(false);
});
document.getElementById('endless-btn').addEventListener('click', () => runLoop(true));
document.getElementById('stop-btn').addEventListener('click', () => { stopRequested = true; });
// --- Init: load preset info if pre-selected ---
document.addEventListener('DOMContentLoaded', () => {
const presetSelect = document.getElementById('preset-select');
if (presetSelect.value) loadPresetInfo(presetSelect.value);
});
</script>
{% endblock %}

149
templates/index.html
View File

@@ -1,17 +1,35 @@
{% extends "layout.html" %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>Character Library</h2>
<div class="d-flex gap-1 align-items-center">
<a href="/create" class="btn btn-sm btn-outline-success">+ Character</a>
<button id="batch-generate-btn" class="btn btn-sm btn-outline-success btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Generate cover images for characters without one" data-requires="comfyui"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
<button id="regenerate-all-btn" class="btn btn-sm btn-outline-danger btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Regenerate cover images for all characters" data-requires="comfyui"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
<form action="{{ url_for('rescan') }}" method="post" class="d-contents">
<button type="submit" class="btn btn-sm btn-outline-primary btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Rescan character files from disk"><img src="{{ url_for('static', filename='icons/refresh.png') }}"></button>
</form>
{% from "partials/library_toolbar.html" import library_toolbar %}
{{ library_toolbar(
title="Character",
category="characters",
create_url=url_for('create_character'),
create_label="Character",
has_batch_gen=true,
has_regen_all=true,
has_lora_create=false,
has_tags=true,
regen_tags_category="characters",
rescan_url=url_for('rescan'),
get_missing_url="/get_missing_characters",
clear_covers_url="/clear_all_covers",
generate_url_pattern="/character/{slug}/generate"
) }}
<!-- Filters -->
<form method="get" class="mb-3 d-flex gap-3 align-items-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="favourite" value="on" id="favFilter" {% if favourite_filter == 'on' %}checked{% endif %} onchange="this.form.submit()">
<label class="form-check-label small" for="favFilter">&#9733; Favourites</label>
</div>
</div>
<select name="nsfw" class="form-select form-select-sm" style="width:auto;" onchange="this.form.submit()">
<option value="all" {% if nsfw_filter == 'all' %}selected{% endif %}>All ratings</option>
<option value="sfw" {% if nsfw_filter == 'sfw' %}selected{% endif %}>SFW only</option>
<option value="nsfw" {% if nsfw_filter == 'nsfw' %}selected{% endif %}>NSFW only</option>
</select>
</form>
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
{% for char in characters %}
@@ -33,7 +51,10 @@
{% endif %}
</div>
<div class="card-body">
<h5 class="card-title text-center">{{ char.name }}</h5>
<h5 class="card-title text-center">
{% if char.is_favourite %}<span class="text-warning">&#9733;</span> {% endif %}{{ char.name }}
{% if char.is_nsfw %}<span class="badge bg-danger" style="font-size:0.6rem;vertical-align:middle;">NSFW</span>{% endif %}
</h5>
<p class="card-text small text-center text-muted">
{% set ns = namespace(parts=[]) %}
{% for section_key in ['identity', 'defaults'] %}
@@ -58,12 +79,14 @@
{{ ns.parts | join(', ') }}
</p>
</div>
{% if char.data.lora.lora_name %}
{% set lora_name = char.data.lora.lora_name.split('/')[-1].replace('.safetensors', '') %}
<div class="card-footer text-center p-1">
<small class="text-muted" title="{{ char.data.lora.lora_name }}">{{ lora_name }}</small>
<div class="card-footer d-flex justify-content-between align-items-center p-1">
{% if char.data.lora and char.data.lora.lora_name %}
{% set lora_name = char.data.lora.lora_name.split('/')[-1].replace('.safetensors', '') %}
<small class="text-muted text-truncate" title="{{ char.data.lora.lora_name }}">{{ lora_name }}</small>
{% else %}<span></span>{% endif %}
<button class="btn btn-sm btn-outline-danger py-0 px-1 flex-shrink-0 ms-1 resource-delete-btn" title="Delete"
data-category="characters" data-slug="{{ char.slug }}" data-name="{{ char.name | e }}">🗑</button>
</div>
{% endif %}
</div>
</div>
{% endfor %}
@@ -71,97 +94,5 @@
{% endblock %}
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', () => {
const batchBtn = document.getElementById('batch-generate-btn');
const regenAllBtn = document.getElementById('regenerate-all-btn');
async function waitForJob(jobId) {
return new Promise((resolve, reject) => {
const poll = setInterval(async () => {
try {
const resp = await fetch(`/api/queue/${jobId}/status`);
const data = await resp.json();
if (data.status === 'done') { clearInterval(poll); resolve(data); }
else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
else if (data.status === 'processing') nodeStatus.textContent = 'Generating…';
else nodeStatus.textContent = 'Queued…';
} catch (err) {}
}, 1500);
});
}
async function runBatch() {
const response = await fetch('/get_missing_characters');
const data = await response.json();
const missing = data.missing;
if (missing.length === 0) {
alert("No characters missing cover images.");
return;
}
batchBtn.disabled = true;
regenAllBtn.disabled = true;
// Phase 1: Queue all jobs upfront so the page can be navigated away from
const jobs = [];
for (const char of missing) {
try {
const genResp = await fetch(`/character/${char.slug}/generate`, {
method: 'POST',
body: new URLSearchParams({ action: 'replace' }),
headers: { 'X-Requested-With': 'XMLHttpRequest' }
});
const genData = await genResp.json();
if (genData.job_id) jobs.push({ item: char, jobId: genData.job_id });
} catch (err) {
console.error(`Failed to queue ${char.name}:`, err);
}
}
// Phase 2: Poll all jobs concurrently; update UI as each finishes
await Promise.all(jobs.map(async ({ item, jobId }) => {
try {
const jobResult = await waitForJob(jobId);
if (jobResult.result && jobResult.result.image_url) {
const img = document.getElementById(`img-${item.slug}`);
const noImgSpan = document.getElementById(`no-img-${item.slug}`);
if (img) { img.src = jobResult.result.image_url; img.classList.remove('d-none'); }
if (noImgSpan) noImgSpan.classList.add('d-none');
}
} catch (err) {
console.error(`Failed for ${item.name}:`, err);
}
}));
batchBtn.disabled = false;
regenAllBtn.disabled = false;
alert(`Batch generation complete! ${jobs.length} images queued.`);
}
batchBtn.addEventListener('click', async () => {
const response = await fetch('/get_missing_characters');
const data = await response.json();
if (data.missing.length === 0) {
alert("No characters missing cover images.");
return;
}
if (!confirm(`Generate cover images for ${data.missing.length} characters?`)) return;
runBatch();
});
regenAllBtn.addEventListener('click', async () => {
if (!confirm("This will unassign ALL current cover images and generate new ones for every character. Existing files will be kept on disk. Proceed?")) return;
const clearResp = await fetch('/clear_all_covers', { method: 'POST' });
if (clearResp.ok) {
// Update UI to show "No Image" for all
document.querySelectorAll('.img-container img').forEach(img => img.classList.add('d-none'));
document.querySelectorAll('.img-container .text-muted').forEach(span => span.classList.remove('d-none'));
runBatch();
}
});
});
</script>
<script src="{{ url_for('static', filename='js/library-toolbar.js') }}"></script>
{% endblock %}

51
templates/layout.html
View File

@@ -31,8 +31,13 @@
<a href="/gallery" class="btn btn-sm btn-outline-light">Image Gallery</a>
<a href="/settings" class="btn btn-sm btn-outline-light">Settings</a>
<div class="vr mx-1 d-none d-lg-block"></div>
<!-- Search -->
<form action="/search" method="get" class="d-flex" style="max-width:180px;">
<input type="text" name="q" class="form-control form-control-sm bg-dark text-light border-secondary" placeholder="Search..." aria-label="Search">
</form>
<div class="vr mx-1 d-none d-lg-block"></div>
<!-- Queue indicator -->
<button id="queue-btn" class="btn btn-sm queue-btn" data-bs-toggle="modal" data-bs-target="#queueModal" title="Generation Queue">
<button id="queue-btn" class="btn btn-sm queue-btn" data-bs-toggle="modal" data-bs-target="#queueModal" title="Job Queue">
<span class="queue-icon">⏳</span>
<span id="queue-count-badge" class="queue-badge d-none">0</span>
</button>
@@ -93,13 +98,13 @@
</div>
</div>
<!-- Generation Queue Modal -->
<!-- Job Queue Modal -->
<div class="modal fade" id="queueModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
Generation Queue
Job Queue
<span id="queue-modal-count" class="badge bg-secondary ms-2">0</span>
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
@@ -232,6 +237,33 @@
}
}
function regenerateTags(category, slug) {
const btn = document.getElementById('regenerate-tags-btn');
if (!btn) return;
const origText = btn.innerHTML;
btn.disabled = true;
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Regenerating…';
fetch(`/api/${category}/${slug}/regenerate_tags`, {
method: 'POST',
headers: {'X-Requested-With': 'XMLHttpRequest'}
})
.then(r => r.json().then(d => ({ok: r.ok, data: d})))
.then(({ok, data}) => {
if (ok && data.success) {
location.reload();
} else {
alert('Regeneration failed: ' + (data.error || 'Unknown error'));
btn.disabled = false;
btn.innerHTML = origText;
}
})
.catch(err => {
alert('Regeneration failed: ' + err);
btn.disabled = false;
btn.innerHTML = origText;
});
}
function initJsonEditor(saveUrl) {
const jsonModal = document.getElementById('jsonEditorModal');
if (!jsonModal) return;
@@ -533,7 +565,7 @@
})();
</script>
<script>
// ---- Generation Queue UI ----
// ---- Job Queue UI ----
(function() {
const badge = document.getElementById('queue-count-badge');
const modalCount = document.getElementById('queue-modal-count');
@@ -575,7 +607,7 @@
queueBtn.title = `${pendingJobs.length} job(s) queued`;
} else {
queueBtn.classList.remove('queue-btn-generating');
queueBtn.title = 'Generation Queue';
queueBtn.title = 'Job Queue';
}
// Update modal count
@@ -616,6 +648,15 @@
statusDot.className = `queue-status-dot queue-status-${job.status}`;
li.appendChild(statusDot);
// Job type badge
if (job.job_type === 'llm') {
const typeBadge = document.createElement('span');
typeBadge.className = 'badge bg-info';
typeBadge.textContent = 'LLM';
typeBadge.style.fontSize = '0.6rem';
li.appendChild(typeBadge);
}
// Label
const label = document.createElement('span');
label.className = 'flex-grow-1 small';

38
templates/looks/create.html
View File

@@ -15,20 +15,38 @@
<div class="card-body">
<div class="mb-3">
<label for="name" class="form-label">Display Name</label>
<input type="text" class="form-control" id="name" name="name" required>
<input type="text" class="form-control" id="name" name="name" value="{{ form_data.get('name', '') }}" required>
</div>
<div class="mb-3">
<label for="character_id" class="form-label">Linked Character</label>
<select class="form-select" id="character_id" name="character_id">
<option value="">— None —</option>
{% for char in characters %}
<option value="{{ char.character_id }}">{{ char.name }}</option>
<option value="{{ char.character_id }}" {{ 'selected' if form_data.get('character_id') == char.character_id }}>{{ char.name }}</option>
{% endfor %}
</select>
</div>
<div class="mb-3">
<label for="tags" class="form-label">Tags (comma separated)</label>
<input type="text" class="form-control" id="tags" name="tags">
{% set tags = form_data.get('tags', {}) if form_data.get('tags') is mapping else {} %}
<div class="row">
<div class="col-md-4 mb-3">
<label for="tag_origin_series" class="form-label">Origin Series</label>
<input type="text" class="form-control" id="tag_origin_series" name="tag_origin_series" value="{{ tags.origin_series or '' }}" placeholder="e.g. Fire Emblem, Mario, Original">
</div>
<div class="col-md-4 mb-3">
<label for="tag_origin_type" class="form-label">Origin Type</label>
<select class="form-select" id="tag_origin_type" name="tag_origin_type">
{% for opt in ['', 'Anime', 'Video Game', 'Cartoon', 'Movie', 'Comic', 'Original'] %}
<option value="{{ opt }}" {% if tags.origin_type == opt %}selected{% endif %}>{{ opt or '— Select —' }}</option>
{% endfor %}
</select>
</div>
<div class="col-md-3 mb-3">
<label class="form-label">&nbsp;</label>
<div class="form-check mt-2">
<input class="form-check-input" type="checkbox" id="tag_nsfw" name="tag_nsfw">
<label class="form-check-label" for="tag_nsfw">NSFW</label>
</div>
</div>
</div>
</div>
</div>
@@ -43,18 +61,18 @@
<select class="form-select" id="lora_lora_name" name="lora_lora_name">
<option value="">None</option>
{% for lora in loras %}
<option value="{{ lora }}">{{ lora }}</option>
<option value="{{ lora }}" {{ 'selected' if form_data.get('lora_lora_name') == lora }}>{{ lora }}</option>
{% endfor %}
</select>
</div>
<div class="col-md-4">
<label for="lora_lora_weight" class="form-label">Weight</label>
<input type="number" step="0.01" class="form-control" id="lora_lora_weight" name="lora_lora_weight" value="0.8">
<input type="number" step="0.01" class="form-control" id="lora_lora_weight" name="lora_lora_weight" value="{{ form_data.get('lora_lora_weight', 0.8) }}">
</div>
</div>
<div class="mt-3">
<label for="lora_lora_triggers" class="form-label">Triggers</label>
<input type="text" class="form-control" id="lora_lora_triggers" name="lora_lora_triggers">
<input type="text" class="form-control" id="lora_lora_triggers" name="lora_lora_triggers" value="{{ form_data.get('lora_lora_triggers', '') }}">
</div>
</div>
</div>
@@ -65,11 +83,11 @@
<div class="card-body">
<div class="mb-3">
<label for="positive" class="form-label">Positive</label>
<textarea class="form-control" id="positive" name="positive" rows="3"></textarea>
<textarea class="form-control" id="positive" name="positive" rows="3">{{ form_data.get('positive', '') }}</textarea>
</div>
<div class="mb-3">
<label for="negative" class="form-label">Negative</label>
<textarea class="form-control" id="negative" name="negative" rows="2"></textarea>
<textarea class="form-control" id="negative" name="negative" rows="2">{{ form_data.get('negative', '') }}</textarea>
</div>
</div>
</div>

44
templates/looks/detail.html
View File

@@ -138,33 +138,30 @@
</div>
</div>
{% set tags = look.data.tags if look.data.tags is mapping else {} %}
{% if tags %}
<div class="card mb-4">
<div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
<span>Tags</span>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="include_field" value="special::tags" id="includeTags" form="generate-form"
{% if preferences is not none %}
{% if 'special::tags' in preferences %}checked{% endif %}
{% elif look.default_fields is not none %}
{% if 'special::tags' in look.default_fields %}checked{% endif %}
{% endif %}>
<label class="form-check-label text-white small {% if look.default_fields is not none and 'special::tags' in look.default_fields %}text-accent{% endif %}" for="includeTags">Include</label>
</div>
</div>
<div class="card-header bg-dark text-white"><span>Tags</span></div>
<div class="card-body">
{% for tag in look.data.tags %}
<span class="badge bg-secondary">{{ tag }}</span>
{% else %}
<span class="text-muted">No tags</span>
{% endfor %}
{% if tags.origin_series %}<span class="badge bg-info">{{ tags.origin_series }}</span>{% endif %}
{% if tags.origin_type %}<span class="badge bg-primary">{{ tags.origin_type }}</span>{% endif %}
{% if look.is_nsfw %}<span class="badge bg-danger">NSFW</span>{% endif %}
{% if look.is_favourite %}<span class="badge bg-warning text-dark">&#9733; Favourite</span>{% endif %}
</div>
</div>
{% endif %}
</div>
<div class="col-md-8">
<div class="d-flex justify-content-between align-items-center mb-4">
<div>
<h1 class="mb-0">{{ look.name }}</h1>
<h1 class="mb-0">
{{ look.name }}
<button class="btn btn-sm btn-link text-decoration-none fav-toggle-btn" data-url="/look/{{ look.slug }}/favourite" title="Toggle favourite">
<span style="font-size:1.2rem;">{% if look.is_favourite %}&#9733;{% else %}&#9734;{% endif %}</span>
</button>
{% if look.is_nsfw %}<span class="badge bg-danger" style="font-size:0.6rem;vertical-align:middle;">NSFW</span>{% endif %}
</h1>
{% if linked_character_ids %}
<small class="text-muted">
Linked to:
@@ -178,6 +175,7 @@
</div>
<div class="d-flex gap-2">
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#jsonEditorModal">Edit JSON</button>
<button type="button" class="btn btn-outline-warning" id="regenerate-tags-btn" onclick="regenerateTags('looks', '{{ look.slug }}')">Regenerate Tags</button>
<button type="button" class="btn btn-accent" data-bs-toggle="modal" data-bs-target="#generateCharModal">
<i class="bi bi-person-plus"></i> Generate Character
</button>
@@ -281,6 +279,16 @@
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', () => {
// Favourite toggle
document.querySelectorAll('.fav-toggle-btn').forEach(btn => {
btn.addEventListener('click', async (e) => {
e.preventDefault();
const resp = await fetch(btn.dataset.url, {method:'POST', headers:{'X-Requested-With':'XMLHttpRequest'}});
const data = await resp.json();
if (data.success) btn.querySelector('span').innerHTML = data.is_favourite ? '&#9733;' : '&#9734;';
});
});
const form = document.getElementById('generate-form');
const progressBar = document.getElementById('progress-bar');
const progressContainer = document.getElementById('progress-container');

24
templates/looks/edit.html
View File

@@ -39,9 +39,27 @@
</div>
<div class="form-text">Associates this look with multiple characters for generation and LoRA suggestions.</div>
</div>
<div class="mb-3">
<label for="tags" class="form-label">Tags (comma separated)</label>
<input type="text" class="form-control" id="tags" name="tags" value="{{ look.data.tags | join(', ') }}">
{% set tags = look.data.tags if look.data.tags is mapping else {} %}
<div class="row">
<div class="col-md-4 mb-3">
<label for="tag_origin_series" class="form-label">Origin Series</label>
<input type="text" class="form-control" id="tag_origin_series" name="tag_origin_series" value="{{ tags.origin_series or '' }}" placeholder="e.g. Fire Emblem, Mario, Original">
</div>
<div class="col-md-4 mb-3">
<label for="tag_origin_type" class="form-label">Origin Type</label>
<select class="form-select" id="tag_origin_type" name="tag_origin_type">
{% for opt in ['', 'Anime', 'Video Game', 'Cartoon', 'Movie', 'Comic', 'Original'] %}
<option value="{{ opt }}" {% if tags.origin_type == opt %}selected{% endif %}>{{ opt or '— Select —' }}</option>
{% endfor %}
</select>
</div>
<div class="col-md-3 mb-3">
<label class="form-label">&nbsp;</label>
<div class="form-check mt-2">
<input class="form-check-input" type="checkbox" id="tag_nsfw" name="tag_nsfw" {% if look.is_nsfw %}checked{% endif %}>
<label class="form-check-label" for="tag_nsfw">NSFW</label>
</div>
</div>
</div>
</div>
</div>

182
templates/looks/index.html
View File

@@ -1,24 +1,36 @@
{% extends "layout.html" %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>Looks Library</h2>
<div class="d-flex gap-1 align-items-center">
<button id="batch-generate-btn" class="btn btn-sm btn-outline-success btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Generate cover images for looks without one" data-requires="comfyui"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
<button id="regenerate-all-btn" class="btn btn-sm btn-outline-danger btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Regenerate cover images for all looks" data-requires="comfyui"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
<form action="{{ url_for('bulk_create_looks_from_loras') }}" method="post" class="d-contents">
<button type="submit" class="btn btn-sm btn-primary btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Create new look entries from all LoRA files in the Looks folder"><img src="{{ url_for('static', filename='icons/new-file.png') }}"></button>
</form>
<form action="{{ url_for('bulk_create_looks_from_loras') }}" method="post" class="d-contents">
<input type="hidden" name="overwrite" value="true">
<button type="submit" class="btn btn-sm btn-danger btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Overwrite all look metadata from LoRA files (uses API credits)" onclick="return confirm('WARNING: This will re-run LLM generation for ALL look LoRAs, consuming significant API credits and overwriting ALL existing look metadata. Are you absolutely sure?')"><img src="{{ url_for('static', filename='icons/new-file.png') }}"></button>
</form>
<a href="{{ url_for('create_look') }}" class="btn btn-sm btn-success">Create New Look</a>
<form action="{{ url_for('rescan_looks') }}" method="post" class="d-contents">
<button type="submit" class="btn btn-sm btn-outline-primary btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Rescan look files from disk"><img src="{{ url_for('static', filename='icons/refresh.png') }}"></button>
</form>
{% from "partials/library_toolbar.html" import library_toolbar %}
{{ library_toolbar(
title="Look",
category="looks",
create_url=url_for('create_look'),
create_label="Look",
has_batch_gen=true,
has_regen_all=true,
has_lora_create=true,
bulk_create_url=url_for('bulk_create_looks_from_loras'),
has_tags=true,
regen_tags_category="looks",
rescan_url=url_for('rescan_looks'),
get_missing_url="/get_missing_looks",
clear_covers_url="/clear_all_look_covers",
generate_url_pattern="/look/{slug}/generate"
) }}
<!-- Filters -->
<form method="get" class="mb-3 d-flex gap-3 align-items-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="favourite" value="on" id="favFilter" {% if favourite_filter == 'on' %}checked{% endif %} onchange="this.form.submit()">
<label class="form-check-label small" for="favFilter">&#9733; Favourites</label>
</div>
</div>
<select name="nsfw" class="form-select form-select-sm" style="width:auto;" onchange="this.form.submit()">
<option value="all" {% if nsfw_filter == 'all' %}selected{% endif %}>All ratings</option>
<option value="sfw" {% if nsfw_filter == 'sfw' %}selected{% endif %}>SFW only</option>
<option value="nsfw" {% if nsfw_filter == 'nsfw' %}selected{% endif %}>NSFW only</option>
</select>
</form>
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
{% for look in looks %}
@@ -43,7 +55,7 @@
{% endif %}
</div>
<div class="card-body">
<h5 class="card-title text-center">{{ look.name }}</h5>
<h5 class="card-title text-center">{% if look.is_favourite %}<span class="text-warning">&#9733;</span> {% endif %}{{ look.name }}{% if look.is_nsfw %} <span class="badge bg-danger" style="font-size:0.6rem;vertical-align:middle;">NSFW</span>{% endif %}</h5>
{% if look.character_id %}
<p class="card-text small text-center text-info">{{ look.character_id.replace('_', ' ').title() }}</p>
{% endif %}
@@ -86,133 +98,11 @@
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Handle highlight parameter
const highlightSlug = new URLSearchParams(window.location.search).get('highlight');
if (highlightSlug) {
const card = document.getElementById(`card-${highlightSlug}`);
if (card) {
card.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}
const batchBtn = document.getElementById('batch-generate-btn');
const regenAllBtn = document.getElementById('regenerate-all-btn');
const itemNameText = document.getElementById('current-item-name');
const stepProgressText = document.getElementById('current-step-progress');
let currentJobId = null;
let queuePollInterval = null;
async function updateCurrentJobLabel() {
try {
const resp = await fetch('/api/queue');
const data = await resp.json();
const processingJob = data.jobs.find(j => j.status === 'processing');
if (processingJob) {
itemNameText.textContent = `Processing: ${processingJob.label}`;
} else {
itemNameText.textContent = '';
}
} catch (err) {
console.error('Failed to fetch queue:', err);
}
}
async function waitForJob(jobId) {
return new Promise((resolve, reject) => {
const poll = setInterval(async () => {
try {
const resp = await fetch(`/api/queue/${jobId}/status`);
const data = await resp.json();
if (data.status === 'done') { clearInterval(poll); resolve(data); }
else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
else if (data.status === 'processing') nodeStatus.textContent = 'Generating…';
else nodeStatus.textContent = 'Queued…';
} catch (err) {}
}, 1500);
});
}
async function runBatch() {
const response = await fetch('/get_missing_looks');
const data = await response.json();
const missing = data.missing;
if (missing.length === 0) {
alert("No looks missing cover images.");
return;
}
batchBtn.disabled = true;
regenAllBtn.disabled = true;
// Phase 1: Queue all jobs upfront
const jobs = [];
for (const item of missing) {
try {
const genResp = await fetch(`/look/${item.slug}/generate`, {
method: 'POST',
body: new URLSearchParams({ action: 'replace' }),
headers: { 'X-Requested-With': 'XMLHttpRequest' }
});
const genData = await genResp.json();
if (genData.job_id) jobs.push({ item, jobId: genData.job_id });
} catch (err) {
console.error(`Failed to queue ${item.name}:`, err);
}
}
// Phase 2: Poll all concurrently
// Start polling queue for current job label
queuePollInterval = setInterval(updateCurrentJobLabel, 1000);
updateCurrentJobLabel(); // Initial update
let completed = 0;
await Promise.all(jobs.map(async ({ item, jobId }) => {
try {
const jobResult = await waitForJob(jobId);
if (jobResult.result && jobResult.result.image_url) {
const img = document.getElementById(`img-${item.slug}`);
const noImgSpan = document.getElementById(`no-img-${item.slug}`);
if (img) { img.src = jobResult.result.image_url; img.classList.remove('d-none'); }
if (noImgSpan) noImgSpan.classList.add('d-none');
}
} catch (err) {
console.error(`Failed for ${item.name}:`, err);
}
}));
// Stop polling queue
if (queuePollInterval) {
clearInterval(queuePollInterval);
queuePollInterval = null;
}
batchBtn.disabled = false;
regenAllBtn.disabled = false;
alert(`Batch generation complete! ${jobs.length} look images processed.`);
}
batchBtn.addEventListener('click', async () => {
const response = await fetch('/get_missing_looks');
const data = await response.json();
if (data.missing.length === 0) { alert("No looks missing cover images."); return; }
if (!confirm(`Generate cover images for ${data.missing.length} looks?`)) return;
runBatch();
});
regenAllBtn.addEventListener('click', async () => {
if (!confirm("This will unassign ALL current look cover images and generate new ones. Proceed?")) return;
const clearResp = await fetch('/clear_all_look_covers', { method: 'POST' });
if (clearResp.ok) {
document.querySelectorAll('.img-container img').forEach(img => img.classList.add('d-none'));
document.querySelectorAll('.img-container .text-muted').forEach(span => span.classList.remove('d-none'));
runBatch();
}
});
});
const highlightSlug = new URLSearchParams(window.location.search).get('highlight');
if (highlightSlug) {
const card = document.getElementById(`card-${highlightSlug}`);
if (card) card.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
</script>
<script src="{{ url_for('static', filename='js/library-toolbar.js') }}"></script>
{% endblock %}

10
templates/outfits/create.html
View File

@@ -10,23 +10,23 @@
<form action="{{ url_for('create_outfit') }}" method="post">
<div class="mb-3">
<label for="name" class="form-label">Outfit Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="e.g. French Maid" required>
<input type="text" class="form-control" id="name" name="name" placeholder="e.g. French Maid" value="{{ form_data.get('name', '') }}" required>
</div>
<div class="mb-3">
<label for="filename" class="form-label">Filename (Slug) <small class="text-muted">- optional, auto-generated if empty</small></label>
<input type="text" class="form-control" id="filename" name="filename" placeholder="e.g. french_maid_01">
<input type="text" class="form-control" id="filename" name="filename" placeholder="e.g. french_maid_01" value="{{ form_data.get('filename', '') }}">
<div class="form-text">Used for the JSON file and URL. No spaces or special characters. Auto-generated from name if left empty.</div>
</div>
<div class="mb-3 form-check form-switch">
<input class="form-check-input" type="checkbox" id="use_llm" name="use_llm" checked>
<input class="form-check-input" type="checkbox" id="use_llm" name="use_llm" {{ 'checked' if form_data.get('use_llm', True) }}>
<label class="form-check-label" for="use_llm">Use AI to generate profile from description</label>
</div>
<div class="mb-3" id="prompt-group">
<label for="prompt" class="form-label">Description / Concept</label>
<textarea class="form-control" id="prompt" name="prompt" rows="5" placeholder="Describe the outfit's style, components, colors, and any special features. The AI will generate the full outfit profile based on this."></textarea>
<textarea class="form-control" id="prompt" name="prompt" rows="5" placeholder="Describe the outfit's style, components, colors, and any special features. The AI will generate the full outfit profile based on this.">{{ form_data.get('prompt', '') }}</textarea>
<div class="form-text">Required when AI generation is enabled.</div>
</div>

43
templates/outfits/detail.html
View File

@@ -100,33 +100,29 @@
</div>
</div>
{% set tags = outfit.data.tags if outfit.data.tags is mapping else {} %}
{% if tags %}
<div class="card mb-4">
<div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
<span>Tags</span>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="include_field" value="special::tags" id="includeTags" form="generate-form"
{% if preferences is not none %}
{% if 'special::tags' in preferences %}checked{% endif %}
{% elif outfit.default_fields is not none %}
{% if 'special::tags' in outfit.default_fields %}checked{% endif %}
{% endif %}>
<label class="form-check-label text-white small {% if outfit.default_fields is not none and 'special::tags' in outfit.default_fields %}text-accent{% endif %}" for="includeTags">Include</label>
</div>
</div>
<div class="card-header bg-dark text-white"><span>Tags</span></div>
<div class="card-body">
{% for tag in outfit.data.tags %}
<span class="badge bg-secondary">{{ tag }}</span>
{% else %}
<span class="text-muted">No tags</span>
{% endfor %}
{% if tags.outfit_type %}<span class="badge bg-info">{{ tags.outfit_type }}</span>{% endif %}
{% if outfit.is_nsfw %}<span class="badge bg-danger">NSFW</span>{% endif %}
{% if outfit.is_favourite %}<span class="badge bg-warning text-dark">&#9733; Favourite</span>{% endif %}
</div>
</div>
{% endif %}
</div>
<div class="col-md-8">
<div class="d-flex justify-content-between align-items-center mb-3">
<div>
<h1 class="mb-0">{{ outfit.name }}</h1>
<h1 class="mb-0">
{{ outfit.name }}
<button class="btn btn-sm btn-link text-decoration-none fav-toggle-btn" data-url="/outfit/{{ outfit.slug }}/favourite" title="Toggle favourite">
<span style="font-size:1.2rem;">{% if outfit.is_favourite %}&#9733;{% else %}&#9734;{% endif %}</span>
</button>
{% if outfit.is_nsfw %}<span class="badge bg-danger" style="font-size:0.6rem;vertical-align:middle;">NSFW</span>{% endif %}
</h1>
<a href="{{ url_for('edit_outfit', slug=outfit.slug) }}" class="btn btn-sm btn-link text-decoration-none">Edit Profile</a>
<form action="{{ url_for('clone_outfit', slug=outfit.slug) }}" method="post" style="display: inline;">
<button type="submit" class="btn btn-sm btn-link text-decoration-none">Clone Outfit</button>
@@ -134,6 +130,7 @@
</div>
<div class="d-flex gap-2">
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#jsonEditorModal">Edit JSON</button>
<button type="button" class="btn btn-outline-warning" id="regenerate-tags-btn" onclick="regenerateTags('outfits', '{{ outfit.slug }}')">Regenerate Tags</button>
<a href="{{ url_for('transfer_resource', category='outfits', slug=outfit.slug) }}" class="btn btn-outline-primary">Transfer</a>
<a href="{{ url_for('outfits_index') }}" class="btn btn-outline-secondary">Back to Library</a>
</div>
@@ -280,6 +277,16 @@
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', () => {
// Favourite toggle
document.querySelectorAll('.fav-toggle-btn').forEach(btn => {
btn.addEventListener('click', async (e) => {
e.preventDefault();
const resp = await fetch(btn.dataset.url, {method:'POST', headers:{'X-Requested-With':'XMLHttpRequest'}});
const data = await resp.json();
if (data.success) btn.querySelector('span').innerHTML = data.is_favourite ? '&#9733;' : '&#9734;';
});
});
const form = document.getElementById('generate-form');
const progressBar = document.getElementById('progress-bar');
const progressContainer = document.getElementById('progress-container');

20
templates/outfits/edit.html
View File

@@ -22,9 +22,23 @@
<label for="outfit_id" class="form-label">Outfit ID</label>
<input type="text" class="form-control" id="outfit_id" name="outfit_id" value="{{ outfit.outfit_id }}">
</div>
<div class="mb-3">
<label for="tags" class="form-label">Tags (comma separated)</label>
<input type="text" class="form-control" id="tags" name="tags" value="{{ outfit.data.tags | join(', ') }}">
{% set tags = outfit.data.tags if outfit.data.tags is mapping else {} %}
<div class="row">
<div class="col-md-6 mb-3">
<label for="tag_outfit_type" class="form-label">Outfit Type</label>
<select class="form-select" id="tag_outfit_type" name="tag_outfit_type">
{% for opt in ['', 'Formal', 'Casual', 'Swimsuit', 'Lingerie', 'Underwear', 'Nude', 'Cosplay', 'Uniform', 'Fantasy', 'Armor', 'Traditional'] %}
<option value="{{ opt }}" {% if tags.outfit_type == opt %}selected{% endif %}>{{ opt or '— Select —' }}</option>
{% endfor %}
</select>
</div>
<div class="col-md-3 mb-3">
<label class="form-label">&nbsp;</label>
<div class="form-check mt-2">
<input class="form-check-input" type="checkbox" id="tag_nsfw" name="tag_nsfw" {% if outfit.is_nsfw %}checked{% endif %}>
<label class="form-check-label" for="tag_nsfw">NSFW</label>
</div>
</div>
</div>
</div>
</div>

161
templates/outfits/index.html
View File

@@ -1,24 +1,36 @@
{% extends "layout.html" %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>Outfit Library</h2>
<div class="d-flex gap-1 align-items-center">
<button id="batch-generate-btn" class="btn btn-sm btn-outline-success btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Generate cover images for outfits without one" data-requires="comfyui"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
<button id="regenerate-all-btn" class="btn btn-sm btn-outline-danger btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Regenerate cover images for all outfits" data-requires="comfyui"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
<form action="{{ url_for('bulk_create_outfits_from_loras') }}" method="post" class="d-contents">
<button type="submit" class="btn btn-sm btn-primary btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Create new outfit entries from all LoRA files in the Clothing folder"><img src="{{ url_for('static', filename='icons/new-file.png') }}"></button>
</form>
<form action="{{ url_for('bulk_create_outfits_from_loras') }}" method="post" class="d-contents">
<input type="hidden" name="overwrite" value="true">
<button type="submit" class="btn btn-sm btn-danger btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Overwrite all outfit metadata from LoRA files (uses API credits)" onclick="return confirm('WARNING: This will re-run LLM generation for ALL outfit LoRAs, consuming significant API credits and overwriting ALL existing outfit metadata. Are you absolutely sure?')"><img src="{{ url_for('static', filename='icons/new-file.png') }}"></button>
</form>
<a href="{{ url_for('create_outfit') }}" class="btn btn-sm btn-success">Create New Outfit</a>
<form action="{{ url_for('rescan_outfits') }}" method="post" class="d-contents">
<button type="submit" class="btn btn-sm btn-outline-primary btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Rescan outfit files from disk"><img src="{{ url_for('static', filename='icons/refresh.png') }}"></button>
</form>
{% from "partials/library_toolbar.html" import library_toolbar %}
{{ library_toolbar(
title="Outfit",
category="outfits",
create_url=url_for('create_outfit'),
create_label="Outfit",
has_batch_gen=true,
has_regen_all=true,
has_lora_create=true,
bulk_create_url=url_for('bulk_create_outfits_from_loras'),
has_tags=true,
regen_tags_category="outfits",
rescan_url=url_for('rescan_outfits'),
get_missing_url="/get_missing_outfits",
clear_covers_url="/clear_all_outfit_covers",
generate_url_pattern="/outfit/{slug}/generate"
) }}
<!-- Filters -->
<form method="get" class="mb-3 d-flex gap-3 align-items-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="favourite" value="on" id="favFilter" {% if favourite_filter == 'on' %}checked{% endif %} onchange="this.form.submit()">
<label class="form-check-label small" for="favFilter">&#9733; Favourites</label>
</div>
</div>
<select name="nsfw" class="form-select form-select-sm" style="width:auto;" onchange="this.form.submit()">
<option value="all" {% if nsfw_filter == 'all' %}selected{% endif %}>All ratings</option>
<option value="sfw" {% if nsfw_filter == 'sfw' %}selected{% endif %}>SFW only</option>
<option value="nsfw" {% if nsfw_filter == 'nsfw' %}selected{% endif %}>NSFW only</option>
</select>
</form>
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
{% for outfit in outfits %}
@@ -43,7 +55,7 @@
{% endif %}
</div>
<div class="card-body">
<h5 class="card-title text-center">{{ outfit.name }}</h5>
<h5 class="card-title text-center">{% if outfit.is_favourite %}<span class="text-warning">&#9733;</span> {% endif %}{{ outfit.name }}{% if outfit.is_nsfw %} <span class="badge bg-danger" style="font-size:0.6rem;vertical-align:middle;">NSFW</span>{% endif %}</h5>
<p class="card-text small text-center text-muted">
{% set ns = namespace(parts=[]) %}
{% if outfit.data.wardrobe is mapping %}
@@ -83,111 +95,12 @@
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Handle highlight parameter
const highlightSlug = new URLSearchParams(window.location.search).get('highlight');
if (highlightSlug) {
const card = document.getElementById(`card-${highlightSlug}`);
if (card) {
card.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}
const batchBtn = document.getElementById('batch-generate-btn');
const regenAllBtn = document.getElementById('regenerate-all-btn');
const itemNameText = document.getElementById('current-item-name');
const stepProgressText = document.getElementById('current-step-progress');
async function waitForJob(jobId) {
return new Promise((resolve, reject) => {
const poll = setInterval(async () => {
try {
const resp = await fetch(`/api/queue/${jobId}/status`);
const data = await resp.json();
if (data.status === 'done') { clearInterval(poll); resolve(data); }
else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
else if (data.status === 'processing') nodeStatus.textContent = 'Generating…';
else nodeStatus.textContent = 'Queued…';
} catch (err) {}
}, 1500);
});
}
async function runBatch() {
const response = await fetch('/get_missing_outfits');
const data = await response.json();
const missing = data.missing;
if (missing.length === 0) {
alert("No outfits missing cover images.");
return;
}
batchBtn.disabled = true;
regenAllBtn.disabled = true;
// Phase 1: Queue all jobs upfront
const jobs = [];
for (const item of missing) {
try {
const genResp = await fetch(`/outfit/${item.slug}/generate`, {
method: 'POST',
body: new URLSearchParams({ action: 'replace', character_slug: '__random__' }),
headers: { 'X-Requested-With': 'XMLHttpRequest' }
});
const genData = await genResp.json();
if (genData.job_id) jobs.push({ item, jobId: genData.job_id });
} catch (err) {
console.error(`Failed to queue ${item.name}:`, err);
}
}
// Phase 2: Poll all concurrently
let currentItem = '';
await Promise.all(jobs.map(async ({ item, jobId }) => {
currentItem = item.name;
itemNameText.textContent = `Processing: ${currentItem}`;
try {
const jobResult = await waitForJob(jobId);
if (jobResult.result && jobResult.result.image_url) {
const img = document.getElementById(`img-${item.slug}`);
const noImgSpan = document.getElementById(`no-img-${item.slug}`);
if (img) { img.src = jobResult.result.image_url; img.classList.remove('d-none'); }
if (noImgSpan) noImgSpan.classList.add('d-none');
}
} catch (err) {
console.error(`Failed for ${item.name}:`, err);
}
}));
batchBtn.disabled = false;
regenAllBtn.disabled = false;
alert(`Batch generation complete! ${jobs.length} outfit images processed.`);
}
batchBtn.addEventListener('click', async () => {
const response = await fetch('/get_missing_outfits');
const data = await response.json();
if (data.missing.length === 0) {
alert("No outfits missing cover images.");
return;
}
if (!confirm(`Generate cover images for ${data.missing.length} outfits?`)) return;
runBatch();
});
regenAllBtn.addEventListener('click', async () => {
if (!confirm("This will unassign ALL current outfit cover images and generate new ones. Proceed?")) return;
const clearResp = await fetch('/clear_all_outfit_covers', { method: 'POST' });
if (clearResp.ok) {
document.querySelectorAll('.img-container img').forEach(img => img.classList.add('d-none'));
document.querySelectorAll('.img-container .text-muted').forEach(span => span.classList.remove('d-none'));
runBatch();
}
});
});
// Handle highlight parameter
const highlightSlug = new URLSearchParams(window.location.search).get('highlight');
if (highlightSlug) {
const card = document.getElementById(`card-${highlightSlug}`);
if (card) card.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
</script>
<script src="{{ url_for('static', filename='js/library-toolbar.js') }}"></script>
{% endblock %}

70
templates/partials/library_toolbar.html Normal file
View File

@@ -0,0 +1,70 @@
{% macro library_toolbar(title, category,
create_url=none, create_label=none,
has_batch_gen=true, has_regen_all=true,
has_lora_create=false, bulk_create_url=none,
has_tags=true, regen_tags_category=none,
rescan_url=none,
get_missing_url=none, clear_covers_url=none,
generate_url_pattern=none) %}
<div class="d-flex justify-content-between align-items-center mb-4"
data-toolbar-category="{{ category }}"
{% if get_missing_url %}data-get-missing-url="{{ get_missing_url }}"{% endif %}
{% if clear_covers_url %}data-clear-covers-url="{{ clear_covers_url }}"{% endif %}
{% if generate_url_pattern %}data-generate-url="{{ generate_url_pattern }}"{% endif %}
{% if regen_tags_category %}data-regen-tags-category="{{ regen_tags_category }}"{% endif %}
{% if bulk_create_url %}data-bulk-create-url="{{ bulk_create_url }}"{% endif %}>
<h2>{{ title }} Library</h2>
<div class="d-flex gap-2 align-items-center">
{% if create_url %}
<a href="{{ create_url }}" class="btn btn-sm btn-success">+ {{ create_label or title }}</a>
{% endif %}
<div class="dropdown">
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button"
data-bs-toggle="dropdown" aria-expanded="false">
Actions
</button>
<ul class="dropdown-menu dropdown-menu-end">
{% if has_batch_gen %}
<li><button class="dropdown-item" id="batch-generate-btn" data-requires="comfyui">
Generate Missing Covers
</button></li>
{% endif %}
{% if has_regen_all %}
<li><button class="dropdown-item text-danger" id="regenerate-all-btn" data-requires="comfyui">
Regenerate All Covers
</button></li>
{% endif %}
{% if (has_batch_gen or has_regen_all) and (has_tags or has_lora_create) %}
<li><hr class="dropdown-divider"></li>
{% endif %}
{% if has_tags %}
<li><button class="dropdown-item" id="regen-tags-all-btn" data-requires="llm">
Regenerate Tags (LLM)
</button></li>
{% endif %}
{% if has_lora_create %}
<li><button class="dropdown-item" id="bulk-create-btn" data-requires="llm">
Create from LoRAs (LLM)
</button></li>
<li><button class="dropdown-item text-danger" id="bulk-overwrite-btn" data-requires="llm">
Overwrite All from LoRAs (LLM)
</button></li>
{% endif %}
{% if rescan_url %}
<li><hr class="dropdown-divider"></li>
<li>
<form action="{{ rescan_url }}" method="post" class="d-contents">
<button type="submit" class="dropdown-item">Rescan from Disk</button>
</form>
</li>
{% endif %}
</ul>
</div>
</div>
</div>
{% endmacro %}

6
templates/presets/create.html
View File

@@ -22,12 +22,12 @@
<form action="{{ url_for('create_preset') }}" method="post">
<div class="mb-3">
<label for="name" class="form-label">Preset Name <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="name" name="name" required placeholder="e.g. Beach Day Casual">
<input type="text" class="form-control" id="name" name="name" required placeholder="e.g. Beach Day Casual" value="{{ form_data.get('name', '') }}">
</div>
<div class="mb-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="use_llm" name="use_llm" checked>
<input class="form-check-input" type="checkbox" id="use_llm" name="use_llm" {{ 'checked' if form_data.get('use_llm', True) }}>
<label class="form-check-label" for="use_llm">Use AI to build preset from description</label>
</div>
</div>
@@ -37,7 +37,7 @@
<textarea class="form-control" id="description" name="description" rows="5"
placeholder="Describe the kind of generations you want this preset to produce. Include the type of character, setting, mood, outfit style, etc.
Example: A random character in a cheerful beach scene, wearing a swimsuit, with a random action pose. Always include identity and wardrobe fields. Randomise headwear and accessories. No style LoRA needed."></textarea>
Example: A random character in a cheerful beach scene, wearing a swimsuit, with a random action pose. Always include identity and wardrobe fields. Randomise headwear and accessories. No style LoRA needed.">{{ form_data.get('description', '') }}</textarea>
<div class="form-text">The AI will set entity IDs (specific, random, or none) and field toggles (on/off/random) based on your description.</div>
</div>

14
templates/presets/edit.html
View File

@@ -153,6 +153,20 @@
</div>
{% endfor %}
</div>
<hr class="my-3">
<div class="d-flex justify-content-between align-items-center">
<div>
<small class="fw-semibold">Suppress Wardrobe</small>
<div class="form-text mt-0">Strip all clothing/wardrobe prompts from generation</div>
</div>
{% set sw = act.get('suppress_wardrobe') %}
<select class="form-select form-select-sm" name="act_suppress_wardrobe" style="width:auto">
<option value="default" {% if sw is none %}selected{% endif %}>Action default</option>
<option value="true" {% if sw == true %}selected{% endif %}>Always</option>
<option value="false" {% if sw == false %}selected{% endif %}>Never</option>
<option value="random" {% if sw == 'random' %}selected{% endif %}>Random</option>
</select>
</div>
</div>
</div>

6
templates/scenes/create.html
View File

@@ -10,13 +10,13 @@
<form action="{{ url_for('create_scene') }}" method="post">
<div class="mb-4">
<label for="name" class="form-label fw-bold">Scene Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="e.g. Luxury Bedroom" required>
<input type="text" class="form-control" id="name" name="name" placeholder="e.g. Luxury Bedroom" value="{{ form_data.get('name', '') }}" required>
<div class="form-text">The display name for the scene gallery.</div>
</div>
<div class="mb-4">
<label for="filename" class="form-label fw-bold">Scene ID / Filename <small class="text-muted">(Optional)</small></label>
<input type="text" class="form-control" id="filename" name="filename" placeholder="e.g. luxury_bedroom">
<input type="text" class="form-control" id="filename" name="filename" placeholder="e.g. luxury_bedroom" value="{{ form_data.get('filename', '') }}">
<div class="form-text">Used for the JSON file and URL. Auto-generated from name if empty.</div>
</div>

19
templates/scenes/detail.html
View File

@@ -116,7 +116,13 @@
<div class="col-md-8">
<div class="d-flex justify-content-between align-items-center mb-3">
<div>
<h1 class="mb-0">{{ scene.name }}</h1>
<h1 class="mb-0">
{{ scene.name }}
<button class="btn btn-sm btn-link text-decoration-none fav-toggle-btn" data-url="/scene/{{ scene.slug }}/favourite" title="Toggle favourite">
<span style="font-size:1.2rem;">{% if scene.is_favourite %}&#9733;{% else %}&#9734;{% endif %}</span>
</button>
{% if scene.is_nsfw %}<span class="badge bg-danger" style="font-size:0.6rem;vertical-align:middle;">NSFW</span>{% endif %}
</h1>
<div class="mt-1">
<a href="{{ url_for('edit_scene', slug=scene.slug) }}" class="btn btn-sm btn-link text-decoration-none ps-0">Edit Scene</a>
<span class="text-muted">|</span>
@@ -127,6 +133,7 @@
</div>
<div class="d-flex gap-2">
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#jsonEditorModal">Edit JSON</button>
<button type="button" class="btn btn-outline-warning" id="regenerate-tags-btn" onclick="regenerateTags('scenes', '{{ scene.slug }}')">Regenerate Tags</button>
<a href="{{ url_for('transfer_resource', category='scenes', slug=scene.slug) }}" class="btn btn-outline-primary">Transfer</a>
<a href="{{ url_for('scenes_index') }}" class="btn btn-outline-secondary">Back to Library</a>
</div>
@@ -266,6 +273,16 @@
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', () => {
// Favourite toggle
document.querySelectorAll('.fav-toggle-btn').forEach(btn => {
btn.addEventListener('click', async (e) => {
e.preventDefault();
const resp = await fetch(btn.dataset.url, {method:'POST', headers:{'X-Requested-With':'XMLHttpRequest'}});
const data = await resp.json();
if (data.success) btn.querySelector('span').innerHTML = data.is_favourite ? '&#9733;' : '&#9734;';
});
});
const form = document.getElementById('generate-form');
const progressBar = document.getElementById('progress-bar');
const progressContainer = document.getElementById('progress-container');

22
templates/scenes/edit.html
View File

@@ -106,11 +106,23 @@
<div class="card mb-4">
<div class="card-header bg-light"><strong>Tags</strong></div>
<div class="card-body">
<div class="mb-3">
<label for="tags" class="form-label">Tags</label>
<input type="text" class="form-control" id="tags" name="tags"
value="{{ scene.data.tags | join(', ') if scene.data.tags else '' }}">
<div class="form-text">Comma-separated tags appended to every generation.</div>
{% set tags = scene.data.tags if scene.data.tags is mapping else {} %}
<div class="row">
<div class="col-md-6 mb-3">
<label for="tag_scene_type" class="form-label">Scene Type</label>
<select class="form-select" id="tag_scene_type" name="tag_scene_type">
{% for opt in ['', 'Indoor', 'Outdoor', 'Fantasy', 'Urban', 'Nature', 'Abstract'] %}
<option value="{{ opt }}" {% if tags.scene_type == opt %}selected{% endif %}>{{ opt or '— Select —' }}</option>
{% endfor %}
</select>
</div>
<div class="col-md-3 mb-3">
<label class="form-label">&nbsp;</label>
<div class="form-check mt-2">
<input class="form-check-input" type="checkbox" id="tag_nsfw" name="tag_nsfw" {% if scene.is_nsfw %}checked{% endif %}>
<label class="form-check-label" for="tag_nsfw">NSFW</label>
</div>
</div>
</div>
</div>
</div>

159
templates/scenes/index.html
View File

@@ -1,24 +1,36 @@
{% extends "layout.html" %}
{% from "partials/library_toolbar.html" import library_toolbar %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>Scene Library</h2>
<div class="d-flex gap-1 align-items-center">
<button id="batch-generate-btn" class="btn btn-sm btn-outline-success btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Generate cover images for scenes without one" data-requires="comfyui"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
<button id="regenerate-all-btn" class="btn btn-sm btn-outline-danger btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Regenerate cover images for all scenes" data-requires="comfyui"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
<form action="{{ url_for('bulk_create_scenes_from_loras') }}" method="post" class="d-contents">
<button type="submit" class="btn btn-sm btn-primary btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Create new scene entries from all LoRA files"><img src="{{ url_for('static', filename='icons/new-file.png') }}"></button>
</form>
<form action="{{ url_for('bulk_create_scenes_from_loras') }}" method="post" class="d-contents">
<input type="hidden" name="overwrite" value="true">
<button type="submit" class="btn btn-sm btn-danger btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Overwrite all scene metadata from LoRA files (uses API credits)" onclick="return confirm('WARNING: This will re-run LLM generation for ALL scene LoRAs, consuming significant API credits and overwriting ALL existing scene metadata. Are you absolutely sure?')"><img src="{{ url_for('static', filename='icons/new-file.png') }}"></button>
</form>
<a href="{{ url_for('create_scene') }}" class="btn btn-sm btn-success">Create New Scene</a>
<form action="{{ url_for('rescan_scenes') }}" method="post" class="d-contents">
<button type="submit" class="btn btn-sm btn-outline-primary btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Rescan scene files from disk"><img src="{{ url_for('static', filename='icons/refresh.png') }}"></button>
</form>
{{ library_toolbar(
title="Scene",
category="scenes",
create_url=url_for('create_scene'),
create_label="Scene",
has_batch_gen=true,
has_regen_all=true,
has_lora_create=true,
bulk_create_url=url_for('bulk_create_scenes_from_loras'),
has_tags=true,
regen_tags_category="scenes",
rescan_url=url_for('rescan_scenes'),
get_missing_url="/get_missing_scenes",
clear_covers_url="/clear_all_scene_covers",
generate_url_pattern="/scene/{slug}/generate"
) }}
<!-- Filters -->
<form method="get" class="mb-3 d-flex gap-3 align-items-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="favourite" value="on" id="favFilter" {% if favourite_filter == 'on' %}checked{% endif %} onchange="this.form.submit()">
<label class="form-check-label small" for="favFilter">&#9733; Favourites</label>
</div>
</div>
<select name="nsfw" class="form-select form-select-sm" style="width:auto;" onchange="this.form.submit()">
<option value="all" {% if nsfw_filter == 'all' %}selected{% endif %}>All ratings</option>
<option value="sfw" {% if nsfw_filter == 'sfw' %}selected{% endif %}>SFW only</option>
<option value="nsfw" {% if nsfw_filter == 'nsfw' %}selected{% endif %}>NSFW only</option>
</select>
</form>
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
{% for scene in scenes %}
@@ -40,7 +52,7 @@
{% endif %}
</div>
<div class="card-body">
<h5 class="card-title text-center">{{ scene.name }}</h5>
<h5 class="card-title text-center">{% if scene.is_favourite %}<span class="text-warning">&#9733;</span> {% endif %}{{ scene.name }}{% if scene.is_nsfw %} <span class="badge bg-danger" style="font-size:0.6rem;vertical-align:middle;">NSFW</span>{% endif %}</h5>
<p class="card-text small text-center text-muted">
{% set ns = namespace(parts=[]) %}
{% if scene.data.scene is mapping %}
@@ -80,110 +92,11 @@
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Handle highlight parameter
const highlightSlug = new URLSearchParams(window.location.search).get('highlight');
if (highlightSlug) {
const card = document.getElementById(`card-${highlightSlug}`);
if (card) {
card.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}
const batchBtn = document.getElementById('batch-generate-btn');
const regenAllBtn = document.getElementById('regenerate-all-btn');
const sceneNameText = document.getElementById('current-scene-name');
const stepProgressText = document.getElementById('current-step-progress');
async function waitForJob(jobId) {
return new Promise((resolve, reject) => {
const poll = setInterval(async () => {
try {
const resp = await fetch(`/api/queue/${jobId}/status`);
const data = await resp.json();
if (data.status === 'done') { clearInterval(poll); resolve(data); }
else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
else if (data.status === 'processing') nodeStatus.textContent = 'Generating…';
else nodeStatus.textContent = 'Queued…';
} catch (err) {}
}, 1500);
});
}
async function runBatch() {
const response = await fetch('/get_missing_scenes');
const data = await response.json();
const missing = data.missing;
if (missing.length === 0) {
alert("No scenes missing cover images.");
return;
}
batchBtn.disabled = true;
regenAllBtn.disabled = true;
// Phase 1: Queue all jobs upfront
const jobs = [];
for (const scene of missing) {
try {
const genResp = await fetch(`/scene/${scene.slug}/generate`, {
method: 'POST',
body: new URLSearchParams({ action: 'replace', character_slug: '' }),
headers: { 'X-Requested-With': 'XMLHttpRequest' }
});
const genData = await genResp.json();
if (genData.job_id) jobs.push({ item: scene, jobId: genData.job_id });
} catch (err) {
console.error(`Failed to queue ${scene.name}:`, err);
}
}
// Phase 2: Poll all concurrently
let currentItem = '';
await Promise.all(jobs.map(async ({ item, jobId }) => {
currentItem = item.name;
itemNameText.textContent = `Processing: ${currentItem}`;
try {
const jobResult = await waitForJob(jobId);
if (jobResult.result && jobResult.result.image_url) {
const img = document.getElementById(`img-${item.slug}`);
const noImgSpan = document.getElementById(`no-img-${item.slug}`);
if (img) { img.src = jobResult.result.image_url; img.classList.remove('d-none'); }
if (noImgSpan) noImgSpan.classList.add('d-none');
}
} catch (err) {
console.error(`Failed for ${item.name}:`, err);
}
}));
batchBtn.disabled = false;
alert(`Batch generation complete! ${jobs.length} scene images processed.`);
}
batchBtn.addEventListener('click', async () => {
const response = await fetch('/get_missing_scenes');
const data = await response.json();
if (data.missing.length === 0) {
alert("No scenes missing cover images.");
return;
}
if (!confirm(`Generate cover images for ${data.missing.length} scenes?`)) return;
runBatch();
});
regenAllBtn.addEventListener('click', async () => {
if (!confirm("This will unassign ALL current scene cover images and generate new ones. Proceed?")) return;
const clearResp = await fetch('/clear_all_scene_covers', { method: 'POST' });
if (clearResp.ok) {
document.querySelectorAll('.img-container img').forEach(img => img.classList.add('d-none'));
document.querySelectorAll('.img-container .text-muted').forEach(span => span.classList.remove('d-none'));
runBatch();
}
});
});
const highlightSlug = new URLSearchParams(window.location.search).get('highlight');
if (highlightSlug) {
const card = document.getElementById(`card-${highlightSlug}`);
if (card) card.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
</script>
<script src="{{ url_for('static', filename='js/library-toolbar.js') }}"></script>
{% endblock %}

126
templates/search.html Normal file
View File

@@ -0,0 +1,126 @@
{% extends "layout.html" %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>Search</h2>
</div>
<!-- Search form -->
<form method="get" class="mb-4">
<div class="row g-2 align-items-end">
<div class="col-md-5">
<input type="text" name="q" class="form-control" placeholder="Search resources and images..." value="{{ query }}" autofocus>
</div>
<div class="col-auto">
<select name="category" class="form-select form-select-sm" style="width:auto;">
<option value="all" {% if category == 'all' %}selected{% endif %}>All categories</option>
<option value="characters" {% if category == 'characters' %}selected{% endif %}>Characters</option>
<option value="looks" {% if category == 'looks' %}selected{% endif %}>Looks</option>
<option value="outfits" {% if category == 'outfits' %}selected{% endif %}>Outfits</option>
<option value="actions" {% if category == 'actions' %}selected{% endif %}>Actions</option>
<option value="styles" {% if category == 'styles' %}selected{% endif %}>Styles</option>
<option value="scenes" {% if category == 'scenes' %}selected{% endif %}>Scenes</option>
<option value="detailers" {% if category == 'detailers' %}selected{% endif %}>Detailers</option>
<option value="checkpoints" {% if category == 'checkpoints' %}selected{% endif %}>Checkpoints</option>
</select>
</div>
<div class="col-auto">
<select name="nsfw" class="form-select form-select-sm" style="width:auto;">
<option value="all" {% if nsfw_filter == 'all' %}selected{% endif %}>All ratings</option>
<option value="sfw" {% if nsfw_filter == 'sfw' %}selected{% endif %}>SFW only</option>
<option value="nsfw" {% if nsfw_filter == 'nsfw' %}selected{% endif %}>NSFW only</option>
</select>
</div>
<div class="col-auto">
<select name="type" class="form-select form-select-sm" style="width:auto;">
<option value="all" {% if search_type == 'all' %}selected{% endif %}>Resources & Images</option>
<option value="resources" {% if search_type == 'resources' %}selected{% endif %}>Resources only</option>
<option value="images" {% if search_type == 'images' %}selected{% endif %}>Images only</option>
</select>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary btn-sm">Search</button>
</div>
</div>
</form>
{% if query %}
<p class="text-muted mb-3">Found {{ total_resources }} resource{{ 's' if total_resources != 1 }} and {{ total_images }} image{{ 's' if total_images != 1 }} for "<strong>{{ query }}</strong>"</p>
{% set type_labels = {
'characters': 'Characters', 'looks': 'Looks', 'outfits': 'Outfits',
'actions': 'Actions', 'styles': 'Styles', 'scenes': 'Scenes',
'detailers': 'Detailers', 'checkpoints': 'Checkpoints'
} %}
{% set type_url_prefix = {
'characters': '/character', 'looks': '/look', 'outfits': '/outfit',
'actions': '/action', 'styles': '/style', 'scenes': '/scene',
'detailers': '/detailer', 'checkpoints': '/checkpoint'
} %}
<!-- Resource results -->
{% if grouped_resources %}
{% for cat_name, items in grouped_resources.items() %}
<div class="mb-4">
<h5>{{ type_labels.get(cat_name, cat_name | capitalize) }} <span class="badge bg-secondary">{{ items | length }}</span></h5>
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
{% for item in items %}
<div class="col">
<div class="card h-100 character-card" onclick="window.location.href='{{ type_url_prefix.get(cat_name, '/' + cat_name[:-1]) }}/{{ item.slug }}'">
<div class="img-container">
{% if item.image_path %}
<img src="{{ url_for('static', filename='uploads/' + item.image_path) }}" alt="{{ item.name }}">
{% else %}
<span class="text-muted">No Image</span>
{% endif %}
</div>
<div class="card-body">
<h6 class="card-title text-center mb-1">
{% if item.is_favourite %}<span class="text-warning">&#9733;</span> {% endif %}
{{ item.name }}
{% if item.is_nsfw %}<span class="badge bg-danger" style="font-size:0.55rem;vertical-align:middle;">NSFW</span>{% endif %}
</h6>
<p class="card-text small text-center text-muted text-truncate" title="{{ item.match_context }}">{{ item.match_context }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
{% endif %}
<!-- Image results -->
{% if images %}
<div class="mb-4">
<h5>Gallery Images <span class="badge bg-secondary">{{ images | length }}</span></h5>
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
{% for img in images %}
<div class="col">
<div class="card h-100 character-card" onclick="window.location.href='/gallery?category={{ img.category }}&slug={{ img.slug }}'">
<div class="img-container">
<img src="{{ url_for('static', filename='uploads/' + img.path) }}" alt="{{ img.slug }}">
{% if img.is_favourite %}
<span class="gallery-fav-star active" style="position:absolute;top:4px;right:4px;font-size:1.2rem;color:#ffc107;">&#9733;</span>
{% endif %}
{% if img.is_nsfw %}
<span class="badge bg-danger" style="position:absolute;top:4px;left:4px;font-size:0.55rem;">NSFW</span>
{% endif %}
</div>
<div class="card-body py-1">
<p class="card-text small text-center text-muted text-truncate">{{ img.category }}/{{ img.slug }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% if not grouped_resources and not images %}
<p class="text-muted">No results found.</p>
{% endif %}
{% endif %}
{% endblock %}

80
templates/settings.html
View File

@@ -164,6 +164,32 @@
</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 %}
@@ -339,5 +365,59 @@
}
});
});
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 %}

6
templates/styles/create.html
View File

@@ -10,13 +10,13 @@
<form action="{{ url_for('create_style') }}" method="post">
<div class="mb-4">
<label for="name" class="form-label fw-bold">Style Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="e.g. Sabu Style" required>
<input type="text" class="form-control" id="name" name="name" placeholder="e.g. Sabu Style" value="{{ form_data.get('name', '') }}" required>
<div class="form-text">The display name for the style gallery.</div>
</div>
<div class="mb-4">
<label for="filename" class="form-label fw-bold">Style ID / Filename <small class="text-muted">(Optional)</small></label>
<input type="text" class="form-control" id="filename" name="filename" placeholder="e.g. sabu_01">
<input type="text" class="form-control" id="filename" name="filename" placeholder="e.g. sabu_01" value="{{ form_data.get('filename', '') }}">
<div class="form-text">Used for the JSON file and URL. Auto-generated from name if empty.</div>
</div>

19
templates/styles/detail.html
View File

@@ -116,7 +116,13 @@
<div class="col-md-8">
<div class="d-flex justify-content-between align-items-center mb-3">
<div>
<h1 class="mb-0">{{ style.name }}</h1>
<h1 class="mb-0">
{{ style.name }}
<button class="btn btn-sm btn-link text-decoration-none fav-toggle-btn" data-url="/style/{{ style.slug }}/favourite" title="Toggle favourite">
<span style="font-size:1.2rem;">{% if style.is_favourite %}&#9733;{% else %}&#9734;{% endif %}</span>
</button>
{% if style.is_nsfw %}<span class="badge bg-danger" style="font-size:0.6rem;vertical-align:middle;">NSFW</span>{% endif %}
</h1>
<div class="mt-1">
<a href="{{ url_for('edit_style', slug=style.slug) }}" class="btn btn-sm btn-link text-decoration-none ps-0">Edit Style</a>
<span class="text-muted">|</span>
@@ -127,6 +133,7 @@
</div>
<div class="d-flex gap-2">
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#jsonEditorModal">Edit JSON</button>
<button type="button" class="btn btn-outline-warning" id="regenerate-tags-btn" onclick="regenerateTags('styles', '{{ style.slug }}')">Regenerate Tags</button>
<a href="{{ url_for('transfer_resource', category='styles', slug=style.slug) }}" class="btn btn-outline-primary">Transfer</a>
<a href="{{ url_for('styles_index') }}" class="btn btn-outline-secondary">Back to Library</a>
</div>
@@ -258,6 +265,16 @@
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', () => {
// Favourite toggle
document.querySelectorAll('.fav-toggle-btn').forEach(btn => {
btn.addEventListener('click', async (e) => {
e.preventDefault();
const resp = await fetch(btn.dataset.url, {method:'POST', headers:{'X-Requested-With':'XMLHttpRequest'}});
const data = await resp.json();
if (data.success) btn.querySelector('span').innerHTML = data.is_favourite ? '&#9733;' : '&#9734;';
});
});
const form = document.getElementById('generate-form');
const progressBar = document.getElementById('progress-bar');
const progressContainer = document.getElementById('progress-container');

25
templates/styles/edit.html
View File

@@ -81,6 +81,31 @@
</div>
</div>
<!-- Tags -->
<div class="card mb-4">
<div class="card-header bg-light"><strong>Tags</strong></div>
<div class="card-body">
{% set tags = style.data.tags if style.data.tags is mapping else {} %}
<div class="row">
<div class="col-md-6 mb-3">
<label for="tag_style_type" class="form-label">Style Type</label>
<select class="form-select" id="tag_style_type" name="tag_style_type">
{% for opt in ['', 'Anime', 'Realistic', 'Western', 'Artistic', 'Sketch', 'Watercolor', 'Digital', 'Pixel Art'] %}
<option value="{{ opt }}" {% if tags.style_type == opt %}selected{% endif %}>{{ opt or '— Select —' }}</option>
{% endfor %}
</select>
</div>
<div class="col-md-3 mb-3">
<label class="form-label">&nbsp;</label>
<div class="form-check mt-2">
<input class="form-check-input" type="checkbox" id="tag_nsfw" name="tag_nsfw" {% if style.is_nsfw %}checked{% endif %}>
<label class="form-check-label" for="tag_nsfw">NSFW</label>
</div>
</div>
</div>
</div>
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<a href="{{ url_for('style_detail', slug=style.slug) }}" class="btn btn-secondary">Cancel</a>
<button type="submit" class="btn btn-primary">Save Changes</button>

160
templates/styles/index.html
View File

@@ -1,24 +1,36 @@
{% extends "layout.html" %}
{% from "partials/library_toolbar.html" import library_toolbar %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>Style Library</h2>
<div class="d-flex gap-1 align-items-center">
<button id="batch-generate-btn" class="btn btn-sm btn-outline-success btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Generate cover images for styles without one" data-requires="comfyui"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
<button id="regenerate-all-btn" class="btn btn-sm btn-outline-danger btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Regenerate cover images for all styles" data-requires="comfyui"><img src="{{ url_for('static', filename='icons/new-cover-batch.png') }}"></button>
<form action="{{ url_for('bulk_create_styles_from_loras') }}" method="post" class="d-contents">
<button type="submit" class="btn btn-sm btn-primary btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Create new style entries from all LoRA files"><img src="{{ url_for('static', filename='icons/new-file.png') }}"></button>
</form>
<form action="{{ url_for('bulk_create_styles_from_loras') }}" method="post" class="d-contents">
<input type="hidden" name="overwrite" value="true">
<button type="submit" class="btn btn-sm btn-danger btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Overwrite all style metadata from LoRA files (uses API credits)" onclick="return confirm('WARNING: This will re-run LLM generation for ALL style LoRAs, consuming significant API credits and overwriting ALL existing style metadata. Are you absolutely sure?')"><img src="{{ url_for('static', filename='icons/new-file.png') }}"></button>
</form>
<a href="{{ url_for('create_style') }}" class="btn btn-sm btn-success">Create New Style</a>
<form action="{{ url_for('rescan_styles') }}" method="post" class="d-contents">
<button type="submit" class="btn btn-sm btn-outline-primary btn-icon" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Rescan style files from disk"><img src="{{ url_for('static', filename='icons/refresh.png') }}"></button>
</form>
{{ library_toolbar(
title="Style",
category="styles",
create_url=url_for('create_style'),
create_label="Style",
has_batch_gen=true,
has_regen_all=true,
has_lora_create=true,
bulk_create_url=url_for('bulk_create_styles_from_loras'),
has_tags=true,
regen_tags_category="styles",
rescan_url=url_for('rescan_styles'),
get_missing_url="/get_missing_styles",
clear_covers_url="/clear_all_style_covers",
generate_url_pattern="/style/{slug}/generate"
) }}
<!-- Filters -->
<form method="get" class="mb-3 d-flex gap-3 align-items-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="favourite" value="on" id="favFilter" {% if favourite_filter == 'on' %}checked{% endif %} onchange="this.form.submit()">
<label class="form-check-label small" for="favFilter">&#9733; Favourites</label>
</div>
</div>
<select name="nsfw" class="form-select form-select-sm" style="width:auto;" onchange="this.form.submit()">
<option value="all" {% if nsfw_filter == 'all' %}selected{% endif %}>All ratings</option>
<option value="sfw" {% if nsfw_filter == 'sfw' %}selected{% endif %}>SFW only</option>
<option value="nsfw" {% if nsfw_filter == 'nsfw' %}selected{% endif %}>NSFW only</option>
</select>
</form>
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
{% for style in styles %}
@@ -40,7 +52,7 @@
{% endif %}
</div>
<div class="card-body">
<h5 class="card-title text-center">{{ style.name }}</h5>
<h5 class="card-title text-center">{% if style.is_favourite %}<span class="text-warning">&#9733;</span> {% endif %}{{ style.name }}{% if style.is_nsfw %} <span class="badge bg-danger" style="font-size:0.6rem;vertical-align:middle;">NSFW</span>{% endif %}</h5>
<p class="card-text small text-center text-muted">
{% set ns = namespace(parts=[]) %}
{% if style.data.style is mapping %}
@@ -80,111 +92,11 @@
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Handle highlight parameter
const highlightSlug = new URLSearchParams(window.location.search).get('highlight');
if (highlightSlug) {
const card = document.getElementById(`card-${highlightSlug}`);
if (card) {
card.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}
const batchBtn = document.getElementById('batch-generate-btn');
const regenAllBtn = document.getElementById('regenerate-all-btn');
const styleNameText = document.getElementById('current-style-name');
const stepProgressText = document.getElementById('current-step-progress');
async function waitForJob(jobId) {
return new Promise((resolve, reject) => {
const poll = setInterval(async () => {
try {
const resp = await fetch(`/api/queue/${jobId}/status`);
const data = await resp.json();
if (data.status === 'done') { clearInterval(poll); resolve(data); }
else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
else if (data.status === 'processing') nodeStatus.textContent = 'Generating…';
else nodeStatus.textContent = 'Queued…';
} catch (err) {}
}, 1500);
});
}
async function runBatch() {
const response = await fetch('/get_missing_styles');
const data = await response.json();
const missing = data.missing;
if (missing.length === 0) {
alert("No styles missing cover images.");
return;
}
batchBtn.disabled = true;
regenAllBtn.disabled = true;
// Phase 1: Queue all jobs upfront
const jobs = [];
for (const style of missing) {
try {
const genResp = await fetch(`/style/${style.slug}/generate`, {
method: 'POST',
body: new URLSearchParams({ action: 'replace', character_slug: '__random__' }),
headers: { 'X-Requested-With': 'XMLHttpRequest' }
});
const genData = await genResp.json();
if (genData.job_id) jobs.push({ item: style, jobId: genData.job_id });
} catch (err) {
console.error(`Failed to queue ${style.name}:`, err);
}
}
// Phase 2: Poll all concurrently
let currentItem = '';
await Promise.all(jobs.map(async ({ item, jobId }) => {
currentItem = item.name;
styleNameText.textContent = `Processing: ${currentItem}`;
try {
const jobResult = await waitForJob(jobId);
if (jobResult.result && jobResult.result.image_url) {
const img = document.getElementById(`img-${item.slug}`);
const noImgSpan = document.getElementById(`no-img-${item.slug}`);
if (img) { img.src = jobResult.result.image_url; img.classList.remove('d-none'); }
if (noImgSpan) noImgSpan.classList.add('d-none');
}
} catch (err) {
console.error(`Failed for ${item.name}:`, err);
}
}));
batchBtn.disabled = false;
regenAllBtn.disabled = false;
alert(`Batch generation complete! ${jobs.length} style images processed.`);
}
batchBtn.addEventListener('click', async () => {
const response = await fetch('/get_missing_styles');
const data = await response.json();
if (data.missing.length === 0) {
alert("No styles missing cover images.");
return;
}
if (!confirm(`Generate cover images for ${data.missing.length} styles?`)) return;
runBatch();
});
regenAllBtn.addEventListener('click', async () => {
if (!confirm("This will unassign ALL current style cover images and generate new ones. Proceed?")) return;
const clearResp = await fetch('/clear_all_style_covers', { method: 'POST' });
if (clearResp.ok) {
document.querySelectorAll('.img-container img').forEach(img => img.classList.add('d-none'));
document.querySelectorAll('.img-container .text-muted').forEach(span => span.classList.remove('d-none'));
runBatch();
}
});
});
const highlightSlug = new URLSearchParams(window.location.search).get('highlight');
if (highlightSlug) {
const card = document.getElementById(`card-${highlightSlug}`);
if (card) card.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
</script>
<script src="{{ url_for('static', filename='js/library-toolbar.js') }}"></script>
{% endblock %}