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

Updated generation pages.

Browse Source
This commit is contained in:
Aodhan Collins
2026-03-15 17:45:17 +00:00
parent 79bbf669e2
commit d756ea1d0e
30 changed files with 2033 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
templates/presets/detail.html
View File

@@ -71,6 +71,31 @@
<textarea class="form-control form-control-sm font-monospace" id="extra_negative" name="extra_negative" rows="2" placeholder="e.g. blurry, low quality">{{ extra_negative or '' }}</textarea>
</div>
{# Resolution override #}
{% set res = preset.data.get('resolution', {}) %}
<div class="mb-3">
<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-outline-secondary res-preset" data-w="" data-h="">Preset Default</button>
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="1024" data-h="1024">1:1</button>
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="1152" data-h="896">4:3 L</button>
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="896" data-h="1152">4:3 P</button>
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="1344" data-h="768">16:9 L</button>
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="768" data-h="1344">16:9 P</button>
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="1280" data-h="800">16:10 L</button>
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" 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="" 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="" min="64" max="4096" step="64" style="width:88px" placeholder="Auto">
</div>
</div>
<div class="d-grid gap-2">
<div class="input-group input-group-sm mb-1">
<span class="input-group-text">Seed</span>
@@ -131,7 +156,7 @@
<div class="mb-2">
<small class="text-muted fw-semibold d-block mb-1">Identity</small>
<div class="d-flex flex-wrap gap-1">
{% for k in ['base_specs','hair','eyes','hands','arms','torso','pelvis','legs','feet','extra'] %}
{% for k in ['base','head','upper_body','lower_body','hands','feet','additional'] %}
<span class="badge-field d-flex align-items-center gap-1 border rounded px-2 py-1 small">
<span>{{ k | replace('_', ' ') }}</span>
{{ toggle_badge(char_fields.identity.get(k, true)) }}
@@ -156,7 +181,7 @@
<span class="badge bg-light text-dark border ms-1">outfit: {{ wd.get('outfit', 'default') }}</span>
</small>
<div class="d-flex flex-wrap gap-1">
{% for k in ['full_body','headwear','top','bottom','legwear','footwear','hands','gloves','accessories'] %}
{% for k in ['base','head','upper_body','lower_body','hands','feet','additional'] %}
<span class="badge-field d-flex align-items-center gap-1 border rounded px-2 py-1 small">
<span>{{ k | replace('_', ' ') }}</span>
{{ toggle_badge(wd.fields.get(k, true)) }}
@@ -175,7 +200,7 @@
<div class="row g-2 mb-3">
{% for section, label, field_key, field_keys in [
('outfit', 'Outfit', 'outfit_id', []),
('action', 'Action', 'action_id', ['full_body','additional','head','eyes','arms','hands']),
('action', 'Action', 'action_id', ['base','head','upper_body','lower_body','hands','feet','additional']),
('style', 'Style', 'style_id', []),
('scene', 'Scene', 'scene_id', ['background','foreground','furniture','colors','lighting','theme']),
('detailer', 'Detailer', 'detailer_id', []),
@@ -225,6 +250,21 @@
<div class="card-body py-2">{{ entity_badge(preset.data.get('checkpoint', {}).get('checkpoint_path')) }}</div>
</div>
</div>
{% set res = preset.data.get('resolution', {}) %}
<div class="col-md-6">
<div class="card h-100">
<div class="card-header py-1"><small class="fw-semibold">Resolution</small></div>
<div class="card-body py-2">
{% if res.get('random', false) %}
<span class="badge bg-warning text-dark">Random</span>
{% elif res.get('width') %}
<span class="badge bg-info text-dark">{{ res.width }} &times; {{ res.height }}</span>
{% else %}
<span class="badge bg-secondary">Default</span>
{% endif %}
</div>
</div>
</div>
</div>
<!-- Tags -->
@@ -362,6 +402,20 @@ window._onEndlessResult = function(jobResult) {
}
};
// Resolution preset buttons
document.querySelectorAll('.res-preset').forEach(btn => {
btn.addEventListener('click', () => {
document.getElementById('res-width').value = btn.dataset.w;
document.getElementById('res-height').value = btn.dataset.h;
document.querySelectorAll('.res-preset').forEach(b => {
b.classList.remove('btn-secondary');
b.classList.add('btn-outline-secondary');
});
btn.classList.remove('btn-outline-secondary');
btn.classList.add('btn-secondary');
});
});
// JSON editor
initJsonEditor("{{ url_for('save_preset_json', slug=preset.slug) }}");
</script>

82
templates/presets/edit.html
View File

@@ -81,7 +81,7 @@
<div class="mb-3">
<label class="form-label fw-semibold">Identity Fields</label>
<div class="row g-2">
{% for k in ['base_specs','hair','eyes','hands','arms','torso','pelvis','legs','feet','extra'] %}
{% for k in ['base','head','upper_body','lower_body','hands','feet','additional'] %}
<div class="col-6 col-sm-4 col-md-4">
<div class="d-flex justify-content-between align-items-center border rounded p-2">
<small>{{ k | replace('_', ' ') }}</small>
@@ -114,7 +114,7 @@
value="{{ wd_cfg.get('outfit', 'default') }}" placeholder="default">
</div>
<div class="row g-2">
{% for k in ['full_body','headwear','top','bottom','legwear','footwear','hands','gloves','accessories'] %}
{% for k in ['base','head','upper_body','lower_body','hands','feet','additional'] %}
<div class="col-6 col-sm-4">
<div class="d-flex justify-content-between align-items-center border rounded p-2">
<small>{{ k | replace('_', ' ') }}</small>
@@ -144,7 +144,7 @@
</div>
<label class="form-label fw-semibold">Fields</label>
<div class="row g-2">
{% for k in ['full_body','additional','head','eyes','arms','hands'] %}
{% for k in ['base','head','upper_body','lower_body','hands','feet','additional'] %}
<div class="col-6 col-sm-4">
<div class="d-flex justify-content-between align-items-center border rounded p-2">
<small>{{ k | replace('_', ' ') }}</small>
@@ -266,6 +266,40 @@
</div>
</div>
<!-- Resolution -->
{% set res = d.get('resolution', {}) %}
<div class="card mb-4">
<div class="card-header py-2 d-flex justify-content-between align-items-center">
<strong>Resolution</strong>
<div class="form-check form-switch mb-0">
<input class="form-check-input" type="checkbox" name="res_random" id="res_random" {% if res.get('random', false) %}checked{% endif %}>
<label class="form-check-label small" for="res_random">Random aspect ratio</label>
</div>
</div>
<div class="card-body" id="res-fields">
<div class="d-flex flex-wrap gap-1 mb-2">
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="1024" data-h="1024">1:1</button>
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="1152" data-h="896">4:3 L</button>
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="896" data-h="1152">4:3 P</button>
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="1344" data-h="768">16:9 L</button>
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="768" data-h="1344">16:9 P</button>
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="1280" data-h="800">16:10 L</button>
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="800" data-h="1280">16:10 P</button>
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="1792" data-h="768">21:9 L</button>
<button type="button" class="btn btn-sm btn-outline-secondary res-preset" data-w="768" data-h="1792">21:9 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="res_width" id="res-width"
value="{{ res.get('width', 1024) }}" min="64" max="4096" step="64" style="width:88px">
<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="res_height" id="res-height"
value="{{ res.get('height', 1024) }}" min="64" max="4096" step="64" style="width:88px">
</div>
</div>
</div>
<div class="d-flex gap-2 pb-4">
<button type="submit" class="btn btn-primary">Save Preset</button>
<a href="{{ url_for('preset_detail', slug=preset.slug) }}" class="btn btn-outline-secondary">Cancel</a>
@@ -274,3 +308,45 @@
</div>
</form>
{% endblock %}
{% block scripts %}
<script>
// Resolution preset buttons
document.querySelectorAll('.res-preset').forEach(btn => {
btn.addEventListener('click', () => {
document.getElementById('res-width').value = btn.dataset.w;
document.getElementById('res-height').value = btn.dataset.h;
document.querySelectorAll('.res-preset').forEach(b => {
b.classList.remove('btn-secondary');
b.classList.add('btn-outline-secondary');
});
btn.classList.remove('btn-outline-secondary');
btn.classList.add('btn-secondary');
});
});
// Highlight the matching preset button on load
(function() {
const w = document.getElementById('res-width').value;
const h = document.getElementById('res-height').value;
document.querySelectorAll('.res-preset').forEach(btn => {
if (btn.dataset.w === w && btn.dataset.h === h) {
btn.classList.remove('btn-outline-secondary');
btn.classList.add('btn-secondary');
}
});
// Toggle resolution fields visibility based on random checkbox
const randomCb = document.getElementById('res_random');
const resFields = document.getElementById('res-fields');
function toggleResFields() {
resFields.querySelectorAll('input, button.res-preset').forEach(el => {
el.disabled = randomCb.checked;
});
resFields.style.opacity = randomCb.checked ? '0.5' : '1';
}
randomCb.addEventListener('change', toggleResFields);
toggleResFields();
})();
</script>
{% endblock %}