Fretux/KrisHD_AI
3
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

add more design options for AI personas

Browse Source
This commit is contained in:
fretuks
2026-04-08 16:04:26 +02:00
parent b9401f3ad3
commit 94d6a8dc2e
4 changed files with 95 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+10
View File
@@ -240,6 +240,16 @@
<span>Details</span>
<textarea id="personaDetails" rows="4" placeholder="Personality traits, voice, goals, quirks, boundaries, style"></textarea>
</label>
<label id="personaExamplesField" class="field field-wide hidden">
<span>Example dialogues</span>
<div class="dialogue-format-card" aria-hidden="true">
<p class="dialogue-format-label">Format</p>
<pre class="dialogue-format-example">{{character}}: Hello, my name is marc
{{user}}: Hi, Marc!
{{character}}: Nice to meet you</pre>
</div>
<textarea id="personaExampleDialogues" rows="5" placeholder="Write example exchanges that define the AI's tone, phrasing, pacing, and personality."></textarea>
</label>
</div>
<div class="persona-actions">
<button id="personaSave" type="submit" class="primary-action">Save persona</button>
public/script.js
+18 -1
View File
@@ -15,6 +15,7 @@ const personaList = $("personaList"), userPersonaList = $("userPersonaList");
const personaForm = $("personaForm"), personaFormTitle = $("personaFormTitle"), personaTypeSelect = $("personaType");
const personaNameInput = $("personaName"), personaPronounsInput = $("personaPronouns"), personaAppearanceInput = $("personaAppearance");
const personaBackgroundInput = $("personaBackground"), personaDetailsInput = $("personaDetails");
const personaExamplesField = $("personaExamplesField"), personaExampleDialoguesInput = $("personaExampleDialogues");
const personaFormNotice = $("personaFormNotice");
const newPersonaBtn = $("newPersona"), newUserPersonaBtn = $("newUserPersona"), clearPersonaBtn = $("clearPersona"), clearUserPersonaBtn = $("clearUserPersona");
const activePersonaStatus = $("activePersonaStatus"), activeUserPersonaStatus = $("activeUserPersonaStatus");
@@ -253,12 +254,15 @@ function openPersonaForm(persona = null, personaType = "assistant") {
personaTypeSelect.value = editingPersonaType; personaTypeSelect.disabled = true;
personaNameInput.value = persona.name || ""; personaPronounsInput.value = persona.pronouns || "";
personaAppearanceInput.value = persona.appearance || ""; personaBackgroundInput.value = persona.background || ""; personaDetailsInput.value = persona.details || "";
personaExampleDialoguesInput.value = persona.example_dialogues || "";
} else {
editingPersonaId = null; editingPersonaType = personaType;
personaFormTitle.textContent = `Create ${personaType === "user" ? "your persona" : "AI persona"}`;
personaTypeSelect.value = personaType; personaTypeSelect.disabled = false;
personaNameInput.value = ""; personaPronounsInput.value = ""; personaAppearanceInput.value = ""; personaBackgroundInput.value = ""; personaDetailsInput.value = "";
personaExampleDialoguesInput.value = "";
}
personaExamplesField.classList.toggle("hidden", personaTypeSelect.value !== "assistant");
setPersonaFormNotice("");
personaNameInput.focus();
}
@@ -392,7 +396,15 @@ async function clearPersona(type) {
}
async function savePersona() {
const payload = {personaType: personaTypeSelect.value, name: personaNameInput.value.trim(), pronouns: personaPronounsInput.value.trim(), appearance: personaAppearanceInput.value.trim(), background: personaBackgroundInput.value.trim(), details: personaDetailsInput.value.trim()};
const payload = {
personaType: personaTypeSelect.value,
name: personaNameInput.value.trim(),
pronouns: personaPronounsInput.value.trim(),
appearance: personaAppearanceInput.value.trim(),
background: personaBackgroundInput.value.trim(),
details: personaDetailsInput.value.trim(),
exampleDialogues: personaTypeSelect.value === "assistant" ? personaExampleDialoguesInput.value.trim() : ""
};
if (!payload.name) return setPersonaFormNotice("Persona name is required.", "error");
const res = editingPersonaId ? await put(`/personas/${editingPersonaId}`, payload) : await post("/personas", payload);
if (res.error) return setPersonaFormNotice(res.error, "error");
@@ -622,6 +634,11 @@ chatSearchInput.addEventListener("input", renderChatList); modelSelect.addEventL
newPersonaBtn.addEventListener("click", () => openPersonaForm()); newUserPersonaBtn.addEventListener("click", () => openPersonaForm(null, "user"));
clearPersonaBtn.addEventListener("click", () => { void clearPersona("assistant"); }); clearUserPersonaBtn.addEventListener("click", () => { void clearPersona("user"); });
personaForm.addEventListener("submit", (event) => { event.preventDefault(); void savePersona(); }); personaCloseBtn.addEventListener("click", closePersonaForm);
personaTypeSelect.addEventListener("change", () => {
const isAssistant = personaTypeSelect.value === "assistant";
personaExamplesField.classList.toggle("hidden", !isAssistant);
if (!isAssistant) personaExampleDialoguesInput.value = "";
});
personaModal.addEventListener("click", (event) => { if (event.target === personaModal) closePersonaForm(); });
popupConfirmBtn.addEventListener("click", () => {
if (popupMode === "prompt") {
public/style.css
+24
View File
@@ -1413,6 +1413,30 @@ select:focus {
min-height: 112px;
}
.dialogue-format-card {
display: grid;
gap: 8px;
padding: 14px 16px;
border-radius: 14px;
background: rgba(24, 32, 31, 0.05);
border: 1px dashed rgba(24, 32, 31, 0.16);
}
.dialogue-format-label {
margin: 0;
font-size: 0.74rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
}
.dialogue-format-example {
margin: 0;
white-space: pre-wrap;
font: 600 0.92rem/1.7 "Space Grotesk", "Consolas", monospace;
color: var(--text);
}
.persona-actions {
display: flex;
justify-content: flex-end;