arch_agent/neon-chat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v2.4 — Character Editor + Image-to-Image Portrait Consistency

Browse Source 
Features:
- /edit/{name} route: Character nachträglich bearbeiten
- /api/character/update/{name}: API zum Aktualisieren
- create.html dient als Editor und Creator (mode=edit/create)
- Index-Seite: ✏️ Button pro Character
- Portrait-Vorschau im Editor
- Image-to-Image: Folge-Portraits nutzen bestehendes Bild als Referenz
  - LoadImage → ImageScale → VAEEncode → KSampler (denoise=0.45)
  - Aussehen bleibt konsistent über mehrere Generierungen
  - Fallback auf Text-to-Image wenn kein Referenzbild existiert
- ComfyUI Image Upload via /upload/image API
- Jinja2 if-Expressions für vorausgefüllte Formularfelder
This commit is contained in:
arch_agent
2026-07-24 22:08:15 +02:00
parent f454d7b785
commit ea1b231fea
6 changed files with 216 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/create.html
+84 -47
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NeonChat — Neuer Charakter</title>
<title>NeonChat — {{ "Bearbeiten" if mode == "edit" else "Neuer Charakter" }}</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #0a0a0f; color: #e0e0e8; min-height: 100vh; }
@@ -22,63 +22,78 @@
.btn:hover { opacity: 0.9; }
.btn-back { background: transparent; border: 1px solid #252535; color: #6b6b80; margin-right: 10px; }
#models { margin-top: 4px; }
.section-header { font-size: 1rem; font-weight: 700; color: #8338ec; margin: 24px 0 12px; padding-bottom: 8px; border-bottom: 1px solid #252535; }
.appearance-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.appearance-grid .form-group { margin-bottom: 12px; }
@media (max-width: 600px) { .appearance-grid { grid-template-columns: 1fr; } }
.portrait-preview { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.portrait-preview img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid #8338ec; }
.portrait-preview .info { font-size: 0.85rem; color: #6b6b80; }
</style>
</head>
<body>
<div class="container">
<h1>✦ Neuer Charakter</h1>
<h1>✦ {{ "Charakter bearbeiten" if mode == "edit" else "Neuer Charakter" }}</h1>
<p class="subtitle">Definiere Persönlichkeit, Verhalten, Hintergrund und Aussehen.</p>
{% if mode == "edit" and character %}
<div class="portrait-preview">
<img id="portraitImg" src="/static/avatars/{{ character_filename }}.png?t={{ range(1,99999) | random }}"
onerror="this.style.display='none'; document.getElementById('portraitPlaceholder').style.display='flex'"
style="display: block;">
<div id="portraitPlaceholder" style="display: none; width: 80px; height: 80px; border-radius: 50%; background: #1e1e2e; align-items: center; justify-content: center; font-size: 2rem;">{{ character.avatar | default('👤') }}</div>
<div class="info">
<b>{{ character.name }}</b><br>
Aktuelles Portrait. Beim Speichern und neu Generieren bleibt das Aussehen konsistent.
</div>
</div>
{% endif %}
<form id="createForm">
<div class="section-header">Basis</div>
<div class="row">
<div class="form-group">
<label>Name</label>
<input type="text" id="name" placeholder="z.B. Mara" required>
<input type="text" id="name" placeholder="z.B. Mara" required value="{{ character.name if character else '' }}">
</div>
<div class="form-group" style="max-width: 80px;">
<label>Avatar</label>
<input type="text" id="avatar" value="👤" maxlength="4" style="text-align: center; font-size: 1.5rem;">
<input type="text" id="avatar" value="{{ character.avatar if character else '👤' }}" maxlength="4" style="text-align: center; font-size: 1.5rem;">
</div>
</div>
<div class="form-group">
<label>Kurze Beschreibung <span class="hint">(für die Übersicht)</span></label>
<input type="text" id="description" placeholder="z.B. Barista, 28, zynisch aber warmherzig">
<input type="text" id="description" placeholder="z.B. Barista, 28, zynisch aber warmherzig" value="{{ character.description if character else '' }}">
</div>
<div class="section-header">Persönlichkeit</div>
<div class="form-group">
<label>Persönlichkeit <span class="hint">(wie ist der Charakter?)</span></label>
<textarea id="personality" placeholder="z.B. Trocken, sarkastisch, aber loyal."></textarea>
<label>Persönlichkeit</label>
<textarea id="personality" placeholder="z.B. Trocken, sarkastisch, aber loyal.">{{ character.personality if character else '' }}</textarea>
</div>
<div class="form-group">
<label>Hintergrund <span class="hint">(Wer ist der Charakter?)</span></label>
<textarea id="background" placeholder="z.B. Arbeitet seit 5 Jahren in einem Café..."></textarea>
<label>Hintergrund</label>
<textarea id="background" placeholder="z.B. Arbeitet seit 5 Jahren in einem Café...">{{ character.background if character else '' }}</textarea>
</div>
<div class="form-group">
<label>Verhalten <span class="hint">(wie verhält sich der Charakter?)</span></label>
<textarea id="behavior" placeholder="z.B. Flucht in Wortwitze wenn nervös."></textarea>
<label>Verhalten</label>
<textarea id="behavior" placeholder="z.B. Flucht in Wortwitze wenn nervös.">{{ character.behavior if character else '' }}</textarea>
</div>
<div class="form-group">
<label>Sprachstil <span class="hint">(wie spricht der Charakter?)</span></label>
<textarea id="tone" placeholder="z.B. Umgangssprachlich, 'ne' statt 'nicht'..."></textarea>
<label>Sprachstil</label>
<textarea id="tone" placeholder="z.B. Umgangssprachlich...">{{ character.tone if character else '' }}</textarea>
</div>
<div class="form-group">
<label>Szenario <span class="hint">(optional — wo spielt das Gespräch?)</span></label>
<input type="text" id="scenario" placeholder="z.B. Du sitzt in einem kleinen Café...">
<label>Szenario <span class="hint">(optional)</span></label>
<input type="text" id="scenario" placeholder="z.B. Du sitzt in einem Café..." value="{{ character.scenario if character else '' }}">
</div>
<div class="form-group">
<label>NSFW / Soziale Regeln <span class="hint">(optional)</span></label>
<textarea id="nsfw" placeholder="z.B. Keine Einschränkungen."></textarea>
<textarea id="nsfw" placeholder="z.B. Keine Einschränkungen.">{{ character.nsfw if character else '' }}</textarea>
</div>
<div class="form-group">
<label>Begrüßung <span class="hint">(erste Nachricht vom Bot)</span></label>
<textarea id="greeting" placeholder="z.B. *schaut auf* Na, wieder da?"></textarea>
<label>Begrüßung <span class="hint">(erste Nachricht)</span></label>
<textarea id="greeting" placeholder="z.B. *schaut auf* Na, wieder da?">{{ character.greeting if character else '' }}</textarea>
</div>
<div class="section-header">Aussehen <span class="hint" style="font-weight:400;">(für Portrait-Generierung)</span></div>
@@ -86,57 +101,57 @@
<div class="form-group">
<label>Stil</label>
<select id="app_style">
<option value="anime">Anime</option>
<option value="realistic">Realistisch</option>
<option value="comic">Comic</option>
<option value="cartoon">Cartoon</option>
<option value="pixel">Pixel Art</option>
<option value="anime" {{ 'selected' if character and character.appearance.style == 'anime' else '' }}>Anime</option>
<option value="realistic" {{ 'selected' if character and character.appearance.style == 'realistic' else '' }}>Realistisch</option>
<option value="comic" {{ 'selected' if character and character.appearance.style == 'comic' else '' }}>Comic</option>
<option value="cartoon" {{ 'selected' if character and character.appearance.style == 'cartoon' else '' }}>Cartoon</option>
<option value="pixel" {{ 'selected' if character and character.appearance.style == 'pixel' else '' }}>Pixel Art</option>
</select>
</div>
<div class="form-group">
<label>Geschlecht</label>
<select id="app_gender">
<option value="female">Weiblich</option>
<option value="male">Männlich</option>
<option value="other">Divers</option>
<option value="female" {{ 'selected' if character and character.appearance.gender == 'female' else '' }}>Weiblich</option>
<option value="male" {{ 'selected' if character and character.appearance.gender == 'male' else '' }}>Männlich</option>
<option value="other" {{ 'selected' if character and character.appearance.gender == 'other' else '' }}>Divers</option>
</select>
</div>
<div class="form-group">
<label>Alter</label>
<input type="text" id="app_age" placeholder="z.B. 28">
<input type="text" id="app_age" placeholder="z.B. 28" value="{{ character.appearance.age if character and character.appearance.age else '' }}">
</div>
<div class="form-group">
<label>Größe</label>
<input type="text" id="app_height" placeholder="z.B. 168cm">
<input type="text" id="app_height" placeholder="z.B. 168cm" value="{{ character.appearance.height if character and character.appearance.height else '' }}">
</div>
<div class="form-group">
<label>Statur</label>
<input type="text" id="app_build" placeholder="z.B. schlank, athletisch">
<input type="text" id="app_build" placeholder="z.B. schlank" value="{{ character.appearance.build if character and character.appearance.build else '' }}">
</div>
<div class="form-group">
<label>Haarfarbe</label>
<input type="text" id="app_hair_color" placeholder="z.B. dunkelbraun">
<input type="text" id="app_hair_color" placeholder="z.B. dunkelbraun" value="{{ character.appearance.hair_color if character and character.appearance.hair_color else '' }}">
</div>
<div class="form-group">
<label>Frisur</label>
<input type="text" id="app_hair_style" placeholder="z.B. kurz, ungeordnet">
<input type="text" id="app_hair_style" placeholder="z.B. kurz, ungeordnet" value="{{ character.appearance.hair_style if character and character.appearance.hair_style else '' }}">
</div>
<div class="form-group">
<label>Augenfarbe</label>
<input type="text" id="app_eye_color" placeholder="z.B. braun">
<input type="text" id="app_eye_color" placeholder="z.B. braun" value="{{ character.appearance.eye_color if character and character.appearance.eye_color else '' }}">
</div>
<div class="form-group">
<label>Haut</label>
<input type="text" id="app_skin" placeholder="z.B. hell, gebräunt">
<input type="text" id="app_skin" placeholder="z.B. hell" value="{{ character.appearance.skin if character and character.appearance.skin else '' }}">
</div>
</div>
<div class="form-group">
<label>Kleidung</label>
<input type="text" id="app_clothing" placeholder="z.B. Café-Schürze, schwarzes T-Shirt, Jeans">
<input type="text" id="app_clothing" placeholder="z.B. Café-Schürze, Jeans" value="{{ character.appearance.clothing if character and character.appearance.clothing else '' }}">
</div>
<div class="form-group">
<label>Besondere Merkmale</label>
<input type="text" id="app_distinctive" placeholder="z.B. müde Augen, Augenringe, Kaugummi">
<input type="text" id="app_distinctive" placeholder="z.B. müde Augen, Augenringe" value="{{ character.appearance.distinctive if character and character.appearance.distinctive else '' }}">
</div>
<div class="section-header">Modell</div>
@@ -149,25 +164,32 @@
<div id="models" style="font-size: 0.8rem; color: #4b4b60;"></div>
</div>
<div class="form-group" style="max-width: 100px;">
<label>Temperatur <span class="hint">(Kreativität)</span></label>
<input type="number" id="temperature" value="0.8" min="0.1" max="2.0" step="0.1">
<label>Temperatur</label>
<input type="number" id="temperature" value="{{ character.temperature if character and character.temperature else 0.8 }}" min="0.1" max="2.0" step="0.1">
</div>
</div>
<div style="margin-top: 24px;">
<button type="button" class="btn btn-back" onclick="location.href='/'">← Abbrechen</button>
<button type="submit" class="btn">Charakter erstellen</button>
<button type="submit" class="btn">{{ "Speichern" if mode == "edit" else "Charakter erstellen" }}</button>
</div>
</form>
</div>
<script>
const mode = "{{ mode }}";
const characterFilename = "{{ character_filename if mode == 'edit' else '' }}";
// Load models
fetch('/api/models').then(r => r.json()).then(data => {
const select = document.getElementById('model');
if (data.models) {
data.models.forEach(m => {
const opt = document.createElement('option');
opt.value = m; opt.textContent = m;
{% if character and character.model %}
if (m === "{{ character.model }}") opt.selected = true;
{% endif %}
select.appendChild(opt);
});
}
@@ -203,14 +225,29 @@
distinctive: document.getElementById('app_distinctive').value,
}
};
const resp = await fetch('/api/character/create', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(data)
});
const result = await resp.json();
if (result.status === 'ok') {
location.href = '/chat/' + encodeURIComponent(result.character);
if (mode === 'edit') {
// Update existing
const resp = await fetch(`/api/character/update/${characterFilename}`, {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(data)
});
const result = await resp.json();
if (result.status === 'ok') {
location.href = '/chat/' + encodeURIComponent(characterFilename);
}
} else {
// Create new
const resp = await fetch('/api/character/create', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(data)
});
const result = await resp.json();
if (result.status === 'ok') {
location.href = '/chat/' + encodeURIComponent(result.character);
}
}
});
</script>
templates/index.html
+1
View File
@@ -56,6 +56,7 @@
<h3>{{ c.name }}</h3>
<p>{{ c.description[:80] }}{% if c.description|length > 80 %}...{% endif %}</p>
</div>
<a href="/edit/{{ c.filename | urlencode }}" onclick="event.stopPropagation()" style="color: #6b6b80; text-decoration: none; font-size: 1.1rem; padding: 4px 8px;" title="Bearbeiten">✏️</a>
</div>
{% endfor %}
<div class="new-card" onclick="location.href='/create'">