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

Add outfit gallery and AI-powered creation for characters and outfits

Browse Source 
- Add outfit gallery with CRUD operations (create, read, update, delete)
- Add AI-powered profile generation for both characters and outfits
- Add toggle to switch between AI generation and manual creation
- Auto-generate filenames from names with incrementing for duplicates
- Add 'full_body' and 'bottom' fields to wardrobe structure
- Update all character and outfit JSON files with new wardrobe fields
- Reorganize data into data/characters and data/clothing directories
- Update README with new features and JSON structure documentation
This commit is contained in:
Aodhan Collins
2026-02-19 18:34:46 +00:00
parent 369c92e3ea
commit c0e6cff7b7
87 changed files with 2325 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
templates/detail.html
View File

@@ -1,10 +1,21 @@
{% extends "layout.html" %}
{% block content %}
<!-- Image Modal -->
<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content bg-transparent border-0">
<div class="modal-body p-0 text-center">
<img id="modalImage" src="" alt="Enlarged Image" class="img-fluid" style="max-height: 90vh;">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card mb-4">
<div class="img-container" style="height: auto; min-height: 400px;">
<div class="img-container" style="height: auto; min-height: 400px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#imageModal" onclick="showImage(this.querySelector('img').src)">
{% if character.image_path %}
<img src="{{ url_for('static', filename='uploads/' + character.image_path) }}" alt="{{ character.name }}" class="img-fluid">
{% else %}
@@ -21,7 +32,6 @@
</form>
<div class="d-grid gap-2">
<button type="submit" name="action" value="preview" class="btn btn-success" form="generate-form">Generate Preview</button>
<button type="submit" name="action" value="replace" class="btn btn-outline-danger" form="generate-form">Generate & Replace Cover</button>
<button type="submit" form="generate-form" formaction="{{ url_for('save_defaults', slug=character.slug) }}" class="btn btn-sm btn-outline-secondary mt-2">Save as Default Selection</button>
</div>
</div>
@@ -36,18 +46,28 @@
{% if preview_image %}
<div class="card mb-4 border-success">
<div class="card-header bg-success text-white">Latest Preview</div>
<div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
<span>Latest Preview</span>
<form action="{{ url_for('replace_cover_from_preview', slug=character.slug) }}" method="post" class="m-0">
<button type="submit" class="btn btn-sm btn-outline-light">Replace Cover</button>
</form>
</div>
<div class="card-body p-0">
<div class="img-container" style="height: auto; min-height: 400px;">
<div class="img-container" style="height: auto; min-height: 400px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#imageModal" onclick="showImage(this.querySelector('img').src)">
<img id="preview-img" src="{{ url_for('static', filename='uploads/' + preview_image) }}" alt="Preview" class="img-fluid">
</div>
</div>
</div>
{% else %}
<div class="card mb-4 border-secondary d-none" id="preview-card">
<div class="card-header bg-secondary text-white">Latest Preview</div>
<div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
<span>Latest Preview</span>
<form action="{{ url_for('replace_cover_from_preview', slug=character.slug) }}" method="post" class="m-0" id="replace-cover-form">
<button type="submit" class="btn btn-sm btn-outline-light" id="replace-cover-btn" disabled>Replace Cover</button>
</form>
</div>
<div class="card-body p-0">
<div class="img-container" style="height: auto; min-height: 400px;">
<div class="img-container" style="height: auto; min-height: 400px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#imageModal" onclick="showImage(this.querySelector('img').src)">
<img id="preview-img" src="" alt="Preview" class="img-fluid">
</div>
</div>
@@ -265,7 +285,7 @@
form.addEventListener('submit', async (e) => {
// Only intercept generate actions
const submitter = e.submitter;
if (!submitter || (submitter.value !== 'preview' && submitter.value !== 'replace')) {
if (!submitter || submitter.value !== 'preview') {
return;
}
@@ -320,7 +340,7 @@
progressLabel.textContent = 'Saving image...';
const url = `/character/{{ character.slug }}/finalize_generation/${promptId}`;
const formData = new FormData();
formData.append('action', action);
formData.append('action', 'preview'); // Always save as preview
try {
const response = await fetch(url, {
@@ -330,12 +350,19 @@
const data = await response.json();
if (data.success) {
if (action === 'preview') {
previewImg.src = data.image_url;
if (previewCard) previewCard.classList.remove('d-none');
} else {
// Reload for cover update
window.location.reload();
// Update preview image
previewImg.src = data.image_url;
if (previewCard) previewCard.classList.remove('d-none');
// Enable the replace cover button if it exists
const replaceBtn = document.getElementById('replace-cover-btn');
if (replaceBtn) {
replaceBtn.disabled = false;
// Check if there's a form to update
const form = replaceBtn.closest('form');
if (form) {
form.action = `/character/{{ character.slug }}/replace_cover_from_preview`;
}
}
} else {
alert('Save failed: ' + data.error);
@@ -348,5 +375,10 @@
}
}
});
// Image modal function
function showImage(src) {
document.getElementById('modalImage').src = src;
}
</script>
{% endblock %}