rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity
Files
fc9c90c4ee9b334556ec174f92a38ad7c0927a0d
SillyTavern/public/index.html
kingbri fc9c90c4ee World Info: Add global multi-selection/merging 
Global world info always involved some kind of merging leading to
extremely large lorebook files that took a long time to import.

This commit adds the ability to select more than one world info file
and they will be merged together along with character world info.
In short, multiple worlds can be meshed together to further contribute
to context.

You can also use this for world "DLCs" of sorts. Let's say someone
else has more information to add regarding a world, but doesn't
want to use a large world file. The JSONs can now be merged.

Signed-off-by: kingbri <bdashore3@proton.me>
2023-06-25 00:49:42 -04:00

3403 lines
220 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="darkreader-lock">
<link href="webfonts/NotoSans/stylesheet.css" rel="stylesheet">
<!-- fontawesome webfonts-->
<link href="css/fontawesome.css" rel="stylesheet">
<link href="css/solid.css" rel="stylesheet">
<link href="css/jquery-ui.min.css" rel="stylesheet">
<link href="css/bright.min.css" rel="stylesheet">
<link href="css/cropper.min.css" rel="stylesheet">
<link href="css/toastr.min.css" rel="stylesheet">
<link rel="apple-touch-icon" sizes="57x57" href="img/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="img/apple-icon-144x144.png" />
<script src="scripts/jquery-3.5.1.min.js"></script>
<script src="scripts/jquery-ui.min.js"></script>
<script src="scripts/jquery.transit.min.js"></script>
<script src="scripts/jquery-cookie-1.4.1.min.js"></script>
<script src="scripts/showdown.min.js"></script>
<script src="scripts/showdown-katex.min.js"></script>
<script src="scripts/popper.js"></script>
<script src="scripts/purify.min.js"></script>
<script src="scripts/highlight.min.js"></script>
<script src="scripts/moment.min.js"></script>
<script src="scripts/cropper.min.js"></script>
<script src="scripts/jquery-cropper.min.js"></script>
<script src="scripts/toastr.min.js"></script>
<script src="scripts/fuse.js"></script>
<script type="module" src="scripts/eventemitter.js"></script>
<script type="module" src="scripts/power-user.js"></script>
<script type="module" src="scripts/swiped-events.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="css/bg_load.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script>
$(document).ready(function () {
var language = navigator.language || navigator.userLanguage;
language = language.toLowerCase();
console.log(language)
//load the appropriate language file
$.getJSON("i18n.json", function (data) {
console.log(data)
if (data.lang.indexOf(language) < 0) language = "en";
console.log(language)
//find all the elements with `data-i18n` attribute
$("[data-i18n]").each(function () {
//read the translation from the language data
const key = $(this).data("i18n");
const text = data?.[language]?.[key]; // Ensure that the translated text is loaded correctly.
if (text) {
$(this).text(text);
}
});
});
});
</script>
<script type=module src="script.js"></script>
<script type="module" src="scripts/world-info.js"></script>
<script type="module" src="scripts/group-chats.js"></script>
<script type="module" src="scripts/kai-settings.js"></script>
<script type="module" src="scripts/textgen-settings.js"></script>
<script type="module" src="scripts/bookmarks.js"></script>
<script type="module" src="scripts/horde.js"></script>
<script type="module" src="scripts/poe.js"></script>
<script type="module" src="scripts/RossAscends-mods.js"></script>
<script type="module" src="scripts/slash-commands.js"></script>
<script type="module" src="scripts/tags.js"></script>
<script type="module" src="scripts/secrets.js"></script>
<script type="module" src="scripts/context-template.js"></script>
<script type="module" src="scripts/extensions.js"></script>
<script type="text/javascript" src="scripts/toolcool-color-picker.js"></script>
<title>SillyTavern</title>
</head>
<body class="no-blur">
<div id="bg_custom"></div>
<div id="bg1"></div>
<!-- top bar central settings buttons -->
<div id="top-bar">
</div>
<div id="top-settings-holder">
<!-- background selection menu -->
<div id="ai-config-button" class="drawer">
<div class="drawer-toggle drawer-header">
<div id="leftNavDrawerIcon" class="drawer-icon fa-solid fa-sliders closedIcon" title="AI Response Configuration"></div>
</div>
<div id="left-nav-panel" class="drawer-content fillLeft closedDrawer">
<div id="left-nav-panelheader" class="fa-solid fa-grip drag-grabber"></div>
<div id="lm_button_panel_pin_div" title="Locked = AI Configuration panel will stay open">
<input type="checkbox" id="lm_button_panel_pin">
<label for="lm_button_panel_pin">
<div class="unchecked fa-solid fa-unlock "></div>
<div class="checked fa-solid fa-lock "></div>
</label>
</div>
<div data-i18n="clickslidertips" class="toggle-description flex-container justifyLeft wide100p editable-slider-notification">
Click slider numbers to input manually.
</div>
<div class="scrollableInner">
<div class="flex-container">
<div id="respective-presets-block" class="width100p">
<div id="kobold_api-presets">
<h3><span data-i18n="kobldpresets">Kobold Presets</span>
<a href="https://docs.sillytavern.app/usage/api-connections/koboldai/" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</h3>
<select id="settings_perset">
<option value="gui" data-i18n="guikoboldaisettings">GUI KoboldAI Settings</option>
</select>
</div>
<div id="novel_api-presets">
<h3>
<span data-i18n="novelaipreserts">NovelAI Presets</span>
<a href="https://docs.sillytavern.app/usage/api-connections/novelai/" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</h3>
<select id="settings_perset_novel">
<option value="gui" data-i18n="default">Default</option>
</select>
</div>
<div id="openai_api-presets">
<div>
<h4><span data-i18n="openaipresets">Chat Completion Presets</span></h4>
<div class="openai_preset_buttons">
<select id="settings_perset_openai">
<option value="gui" data-i18n="default">Default</option>
</select>
<i id="update_oai_preset" class="menu_button fa-solid fa-save" title="Update current preset"></i>
<i id="new_oai_preset" class="menu_button fa-solid fa-plus" title="Create new preset"></i>
<i title="Import preset" id="import_oai_preset" class="menu_button fa-solid fa-upload"></i>
<i title="Export preset" id="export_oai_preset" class="menu_button fa-solid fa-download"></i>
<i id="delete_oai_preset" class="menu_button fa-solid fa-trash-can" title="Delete the preset"></i>
<input id="openai_preset_import_file" type="file" accept=".json,.settings" hidden />
</div>
</div>
</div>
<div id="textgenerationwebui_api-presets">
<h3><span data-i18n="text gen webio(ooba)preset">Text Gen WebUI (ooba) presets</span>
</h3>
<select id="settings_preset_textgenerationwebui">
</select>
</div>
<div id="poe_api-presets">
<h3><span data-i18n="poe.com api settings">Poe.com API Settings</span></h3>
<!-- just a placeholder title for the Poe.com settings panel-->
</div>
<hr>
</div>
<div id="common-gen-settings-block" class="width100p">
<div id="pro-settings-block">
<div id="amount_gen_block" class="range-block">
<div class="range-block-title" data-i18n="response legth(tokens)">
Response Length (tokens)
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="amount_gen" name="volume" min="16" max="1024" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="amount_gen" id="amount_gen_counter">
select
</div>
</div>
</div>
</div>
</div>
<div id="max_context_block" class="range-block">
<div class="range-block-title" data-i18n="context size(tokens)">
Context Size (tokens)
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="max_context" name="volume" min="512" max="2048" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="max_context" id="max_context_counter">
select
</div>
</div>
</div>
</div>
<div class="max_context_unlocked_block">
<label class="checkbox_label">
<input id="max_context_unlocked" type="checkbox" />
<span data-i18n="unlocked">Unlocked</span>
<div id="max_context_unlocked_warning">
<b class="neutral_warning">ATTENTION!</b>
<span data-i18n="only select modls support context sizes greater than 2048 tokens. proceed only is you know you're doing">
Only select models support context sizes greater than 2048 tokens.
Proceed only if you know what you're doing.
</span>
</div>
</label>
</div>
</div>
<hr>
</div>
<div id="respective-ranges-and-temps" class="width100p">
<div id="range_block">
<div class="range-block">
<div class="range-block-title" data-i18n="temperature">
Temperature
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="temp" name="volume" min="0.1" max="2.0" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="temp" id="temp_counter">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title" data-i18n="rep.pen">
Rep. Pen.
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="rep_pen" name="volume" min="1" max="1.5" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="rep_pen" id="rep_pen_counter">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title" data-i18n="rep.pen range">
Rep. Pen. Range
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="rep_pen_range" name="volume" min="0" max="2048" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="rep_pen_range" id="rep_pen_range_counter">
select
</div>
</div>
</div>
</div>
<hr>
<div id="range_block">
<div class="range-block">
<label class="checkbox_label widthFreeExpand">
<input id="streaming_kobold" type="checkbox" />
<span data-i18n="Streaming">Streaming</span>
</label>
<div class="toggle-description justifyLeft">
<span data-i18n="Display the response bit by bit as it is generated.">
Display the response bit by bit as it is generated.</span><br>
<span data-i18n="When this is off, responses will be displayed all at once when they are complete.">
When this is off, responses will be displayed all at once when they are complete.
</span>
</div>
</div>
</div>
</div>
<div id="range_block_novel">
<div class="range-block">
<label class="checkbox_label widthFreeExpand">
<input id="streaming_novel" type="checkbox" />
<span data-i18n="Streaming">Streaming</span>
</label>
<div class="toggle-description justifyLeft">
<span data-i18n="Display the response bit by bit as it is generated.">
Display the response bit by bit as it is generated.</span><br>
<span data-i18n="When this is off, responses will be displayed all at once when they are complete.">
When this is off, responses will be displayed all at once when they are complete.
</span>
</div>
</div>
<div class="range-block-title" data-i18n="temperature">
Temperature
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="temp_novel" name="volume" min="0.1" max="2.0" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="temp_novel" id="temp_counter_novel">
select
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title" data-i18n="rep.pen">
Rep. Pen.
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="rep_pen_novel" name="volume" min="1" max="1.5" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="rep_pen_novel" id="rep_pen_counter_novel">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Rep. Pen. Range.
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="rep_pen_size_novel" name="volume" min="0" max="2048" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="rep_pen_size_novel" id="rep_pen_size_counter_novel">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Rep. Pen. Slope
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="rep_pen_slope_novel" name="volume" min="0.01" max="10" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="rep_pen_slope_novel" id="rep_pen_slope_counter_novel">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Rep. Pen. Freq.
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="rep_pen_freq_novel" name="volume" min="0" max="1" step="0.00001">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="rep_pen_freq_novel" id="rep_pen_freq_counter_novel">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Rep. Pen. Presence
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="rep_pen_presence_novel" name="volume" min="0" max="1" step="0.001">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="rep_pen_presence_novel" id="rep_pen_presence_counter_novel">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Tail Free Sampling
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="tail_free_sampling_novel" name="volume" min="0" max="1" step="0.001">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="tail_free_sampling_novel" id="tail_free_sampling_counter_novel">
select
</div>
</div>
</div>
</div>
</div>
<div id="range_block_textgenerationwebui">
<div class="range-block">
<div class="range-block-title" data-i18n="temperature">
Temperature
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="temp_textgenerationwebui" name="volume" min="0.1" max="2.0" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="temp_textgenerationwebui" id="temp_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title" data-i18n="rep.pen">
Rep. Pen.
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="rep_pen_textgenerationwebui" name="volume" min="1" max="1.5" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="rep_pen_textgenerationwebui" id="rep_pen_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title" data-i18n="Encoder Rep. Pen.">
Encoder Rep. Pen.
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="encoder_rep_pen_textgenerationwebui" name="volume" min="0.8" max="1.5" step="0.01" />
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="encoder_rep_pen_textgenerationwebui" id="encoder_rep_pen_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title" data-i18n="No Repeat Ngram Size">
No Repeat Ngram Size
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="no_repeat_ngram_size_textgenerationwebui" name="volume" min="0" max="20" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="no_repeat_ngram_size_textgenerationwebui" id="no_repeat_ngram_size_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title" data-i18n="Min Length">
Min Length
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="min_length_textgenerationwebui" name="volume" min="0" max="2000" step="1" />
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="min_length_textgenerationwebui" id="min_length_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
</div>
<div id="range_block_openai">
<div class="range-block" data-source="openai,claude">
<div class="range-block-title justifyLeft" data-i18n="OpenAI Reverse Proxy">
OpenAI / Claude Reverse Proxy
</div>
<div class="toggle-description justifyLeft">
<span data-i18n="Alternative server URL (leave empty to use the default value).">
Alternative server URL (leave empty to use the default value).<br>
</span>
<div id="ReverseProxyWarningMessage" class="reverse_proxy_warning">
<b data-i18n="Remove your real OAI API Key from the API panel BEFORE typing anything into this box">
Remove your real OAI API Key from the API panel BEFORE typing anything
into this box.
</b>
<hr>
<b data-i18n="We cannot provide support for problems encountered while using an unofficial OpenAI proxy">
We cannot provide support for problems encountered while using an
unofficial OpenAI proxy.
</b>
</div>
</div>
<div class="wide100p">
<input id="openai_reverse_proxy" type="text" class="text_pole" placeholder="https://api.openai.com/v1" maxlength="100" />
</div>
</div>
<div class="range-block" data-source="openai,claude">
<div class="range-block-title justifyLeft">
<label for="legacy_streaming" class="checkbox_label">
<input id="legacy_streaming" type="checkbox" />
<span data-i18n="Legacy Streaming Processing">
Legacy Streaming Processing
</span>
</label>
</div>
<div class="toggle-description justifyLeft" data-i18n="Enable this if the streaming doesn't work with your proxy">
Enable this if the streaming doesn't work with your proxy.
</div>
</div>
<div class="range-block">
<label class="checkbox_label">
<input id="oai_max_context_unlocked" type="checkbox" />
Unlocked Context Size
</label>
<div class="toggle-description justifyLeft">
Unrestricted maximum value for the context size slider. Enable only if you know
what you're doing.
</div>
</div>
<div class="range-block">
<div class="range-block-title" data-i18n="Context Size (tokens)">
Context Size (tokens)
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="openai_max_context" name="volume" min="512" max="4095" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="openai_max_context" id="openai_max_context_counter">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title" data-i18n="Max Response Length (tokens)">
Max Response Length (tokens)
</div>
<div class="wide100p">
<input type="number" id="openai_max_tokens" name="openai_max_tokens" class="text_pole" min="50" max="1000">
</div>
</div>
<div class="range-block">
<div class="range-block-title" data-i18n="Temperature">
Temperature
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="temp_openai" name="volume" min="0" max="2.0" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="temp_openai" id="temp_counter_openai">
select</div>
</div>
</div>
</div>
<div class="range-block" data-source="openai">
<div class="range-block-title" data-i18n="Frequency Penalty">
Frequency Penalty
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="freq_pen_openai" name="volume" min="-2" max="2" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="freq_pen_openai" id="freq_pen_counter_openai">
select
</div>
</div>
</div>
</div>
<div class="range-block" data-source="openai">
<div class="range-block-title" data-i18n="Presence Penalty">
Presence Penalty
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="pres_pen_openai" name="volume" min="-2" max="2" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="pres_pen_openai" id="pres_pen_counter_openai">
select
</div>
</div>
</div>
</div>
<div class="range-block" data-source="claude">
<div class="range-block-title" data-i18n="Top K">
Top K
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="top_k_openai" name="volume" min="0" max="200" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="top_k_openai" id="top_k_counter_openai">
select
</div>
</div>
</div>
</div>
<div class="range-block" data-source="openai,claude">
<div class="range-block-title" data-i18n="Top-p">
Top P
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="top_p_openai" name="volume" min="0" max="1" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="top_p_openai" id="top_p_counter_openai">
select
</div>
</div>
</div>
</div>
</div>
<div id="range_block_poe">
<div>
Use "Unlocked Context" to enable chunked generation.
It extends the context window in exchange for reply generation speed.
</div>
<h4>Safe Context Size values for Poe bots:</h4>
<ul class="margin0auto">
<li>ChatGPT / Sage = 3600-4000 tokens</li>
<li>Claude-instant / Claude+ = 5000-5500 tokens</li>
<li>GPT-4 = 7600-8000 tokens</li>
</ul>
<div class="flex-container spaceEvenly">
<div id="poe_send_jailbreak" class="menu_button widthFitContent" title="Attempts to automatically jailbreak the bot">
Send Jailbreak
</div>
<div id="poe_purge_chat" class="menu_button widthFitContent" title="Purges the chat history on Poe site">
Purge Poe Chat
</div>
</div>
<div class="range-block">
<label for="poe_streaming" class="checkbox_label widthFreeExpand">
<input id="poe_streaming" type="checkbox" />
<span data-i18n="Streaming">Streaming</span>
</label>
<div class="toggle-description justifyLeft" data-i18n="Display bot response text chunks as they are generated">
Display bot response text chunks as they are generated.
</div>
</div>
<div class="range-block">
<label for="poe_auto_purge" class="checkbox_label widthFreeExpand">
<input id="poe_auto_purge" type="checkbox"><span data-i18n="Auto-purge API context (save JB)">
Auto-purge API context (save JB)</span>
</label>
<div class="toggle-description justifyLeft" data-i18n="Delete non-JB messages from Poe context before sending a new prompt. Prevents auto-jailbreak message from being pushed out of context">
Delete non-JB messages from Poe context before sending a new prompt. Prevents
auto-jailbreak message from being pushed out of context.
</div>
</div>
<div class="range-block">
<label for="poe_auto_jailbreak" class="checkbox_label widthFreeExpand">
<input id="poe_auto_jailbreak" type="checkbox"><span data-i18n="Auto-jailbreak">
Auto-jailbreak</span>
</label>
<div class="toggle-description justifyLeft" data-i18n="Send the jailbreak message before first generation after page refresh.">
Send the jailbreak message before first generation after page refresh.
</div>
</div>
<div class="range-block">
<label for="poe_character_nudge" class="checkbox_label widthFreeExpand">
<input id="poe_character_nudge" type="checkbox" /><span data-i18n="Send character note">
Send character note</span>
</label>
<div class="toggle-description justifyLeft" data-i18n="Sent with every prompt to modify bot responses.">
Sent with every prompt to modify bot responses.
</div>
</div>
<div class="range-block">
<label for="poe_suggest" class="checkbox_label widthFreeExpand">
<input id="poe_suggest" type="checkbox" />
<span data-i18n="Suggest replies">
Suggest replies
</span>
</label>
<div class="toggle-description justifyLeft" data-i18n="Show suggested replies. Not all bots support this.">
Show suggested replies. Not all bots support this.
</div>
</div>
</div>
<hr>
</div>
<div id="advanced-ai-config-block" class="width100p">
<div id="kobold_api-settings">
<div id="kobold-advanced-config">
<div class="range-block">
<div class="range-block-title" data-i18n="Top P">
Top P
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="top_p" name="volume" min="0" max="1" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="top_p" id="top_p_counter">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title" data-i18n="Top A">
Top A
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="top_a" name="volume" min="0" max="1" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="top_a" id="top_a_counter">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title" data-i18n="Top K">
Top K
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="top_k" name="volume" min="0" max="100" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="top_k" id="top_k_counter">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title" data-i18n="Typical Sampling">
Typical Sampling
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="typical" name="volume" min="0" max="1" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="typical" id="typical_counter">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title" data-i18n="Tail Free Sampling">
Tail Free Sampling
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="tfs" name="volume" min="0" max="1" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="tfs" id="tfs_counter">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title" data-i18n="Rep. Pen. Slope">
Rep. Pen. Slope
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="rep_pen_slope" name="volume" min="0" max="10" step="0.1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="rep_pen_slope" id="rep_pen_slope_counter">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<label class="checkbox_label" for="single_line">
<input id="single_line" type="checkbox" /><span data-i18n="Single-line mode">
Single-line mode</span>
</label>
</div>
</div>
</div>
<div id="novel_api-settings">
</div>
<div id="textgenerationwebui_api-settings">
<div class="range-block">
<div class="range-block-title" data-i18n="Top K">
Top K
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="top_k_textgenerationwebui" name="volume" min="0" max="200" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="top_k_textgenerationwebui" id="top_k_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title" data-i18n="Top P">
Top P
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="top_p_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="top_p_textgenerationwebui" id="top_p_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title" data-i18n="Typical P">
Typical P
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="typical_p_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="typical_p_textgenerationwebui" id="typical_p_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Top A
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="top_a_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="top_a_textgenerationwebui" id="top_a_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Tail Free Sampling
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="tfs_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="tfs_textgenerationwebui" id="tfs_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Epsilon Cutoff
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="epsilon_cutoff_textgenerationwebui" name="volume" min="0" max="9" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="epsilon_cutoff_textgenerationwebui" id="epsilon_cutoff_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Eta Cutoff
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="eta_cutoff_textgenerationwebui" name="volume" min="0" max="20" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="eta_cutoff_textgenerationwebui" id="eta_cutoff_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<label class="checkbox_label" for="streaming_textgenerationwebui">
<input type="checkbox" id="streaming_textgenerationwebui" />
<span data-i18n="Streaming">Streaming</span>
</label>
</div>
<div class="range-block">
<label class="checkbox_label" for="do_sample_textgenerationwebui">
<input type="checkbox" id="do_sample_textgenerationwebui" />
<span data-i18n="Do Sample">Do Sample</span>
</label>
</div>
<div class="range-block">
<label class="checkbox_label" for="add_bos_token_textgenerationwebui">
<input type="checkbox" id="add_bos_token_textgenerationwebui" />
<span data-i18n="Add BOS Token">Add BOS Token</span>
</label>
<div class="toggle-description justifyLeft" data-i18n="Add the bos_token to the beginning of prompts. Disabling this can make the replies more creative.">
Add the bos_token to the beginning of prompts. Disabling this can make the
replies more creative.
</div>
</div>
<div class="range-block">
<label class="checkbox_label" for="ban_eos_token_textgenerationwebui">
<input type="checkbox" id="ban_eos_token_textgenerationwebui" />
<span data-i18n="Ban EOS Token">Ban EOS Token</span>
</label>
<div class="toggle-description justifyLeft" data-i18n="Ban the eos_token. This forces the model to never end the generation prematurely">
Ban the eos_token. This forces the model to never end the generation
prematurely.
</div>
</div>
<div class="range-block">
<label class="checkbox_label" for="skip_special_tokens_textgenerationwebui">
<input type="checkbox" id="skip_special_tokens_textgenerationwebui" />
<span data-i18n="Skip Special Tokens">Skip Special Tokens</span>
</label>
</div>
<hr>
<h4><span data-i18n="Beam search">Beam search</span></h4>
<div class="range-block">
<div class="range-block-title" data-i18n="Number of Beams">
Number of Beams
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="num_beams_textgenerationwebui" name="volume" min="1" max="20" step="1" />
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="num_beams_textgenerationwebui" id="num_beams_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
<span data-i18n="Length Penalty">Length Penalty</span>
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="length_penalty_textgenerationwebui" name="volume" min="-5" max="5" step="0.1" />
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="length_penalty_textgenerationwebui" id="length_penalty_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<label class="checkbox_label" for="early_stopping_textgenerationwebui">
<input type="checkbox" id="early_stopping_textgenerationwebui" />
<span data-i18n="Early Stopping">Early Stopping</span>
</label>
</div>
<hr>
<h4>Contrastive search</h4>
<div class="range-block">
<div class="range-block-title" data-i18n="Penalty Alpha">
Penalty Alpha
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="penalty_alpha_textgenerationwebui" name="volume" min="0" max="5" step="0.05" />
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="penalty_alpha_textgenerationwebui" id="penalty_alpha_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title" data-i18n="Seed">
Seed
</div>
<input type="number" id="seed_textgenerationwebui" class="text_pole wide100p" maxlength="100" />
</div>
</div>
<div id="openai_settings">
<div class="">
<div class="range-block">
<label title="Inserts jailbreak as a last system message" class="checkbox_label widthFreeExpand">
<input id="jailbreak_system" type="checkbox" />
Send Jailbreak
</label>
<div class="toggle-description justifyLeft">
<span data-i18n="Inserts jailbreak as a last system message.">Inserts
jailbreak as a last system message.</span><br>
<span data-i18n="This tells the AI to ignore its usual content restrictions.">This
tells the AI to ignore its usual content restrictions.</span>
</div>
</div>
<div class="range-block">
<label class="checkbox_label widthFreeExpand" for="nsfw_toggle">
<input id="nsfw_toggle" type="checkbox" checked>
<span data-i18n="NSFW Encouraged">
NSFW Encouraged</span>
</label>
<div class="toggle-description justifyLeft" data-i18n="Tell the AI that NSFW is allowed.">
Tell the AI that NSFW is allowed.
</div>
</div>
<div class="range-block">
<label title="NSFW block goes first in the resulting prompt" class="checkbox_label widthFreeExpand">
<input id="nsfw_first" type="checkbox" /><span data-i18n="NSFW Prioritized">
NSFW Prioritized</span>
</label>
<div class="toggle-description justifyLeft" data-i18n="NSFW prompt text goes first in the prompt to emphasize its effect.">
NSFW prompt text goes first in the prompt to emphasize its effect.
</div>
</div>
<div class="range-block">
<label for="stream_toggle" title="Enables OpenAI completion streaming" class="checkbox_label widthFreeExpand">
<input id="stream_toggle" type="checkbox" /><span data-i18n="Streaming">
Streaming</span>
</label>
<div class="toggle-description justifyLeft">
<span data-i18n="Display the response bit by bit as it is generated.">Display
the response bit by bit as it is generated.</span><br>
<span data-i18n="When this is off, responses will be displayed all at once when they are complete.">When
this is off, responses will be displayed all at once when they are
complete.</span>
</div>
</div>
<div class="range-block">
<label title="Use OAI knowledge base to enhance definitions for public figures and known fictional characters" class="checkbox_label widthFreeExpand">
<input id="enhance_definitions" type="checkbox" /><span data-i18n="Enhance Definitions">
Enhance Definitions</span>
</label>
<div class="toggle-description justifyLeft" data-i18n="Use OAI knowledge base to enhance definitions for public figures and known fictional characters">
Use OAI knowledge base to enhance definitions for public figures and known
fictional characters
</div>
</div>
<div class="range-block">
<label for="wrap_in_quotes" title="Wrap user messages in quotes before sending" class="checkbox_label widthFreeExpand">
<input id="wrap_in_quotes" type="checkbox" /><span data-i18n="Wrap in Quotes">
Wrap in Quotes</span>
</label>
<div class="toggle-description justifyLeft">
<span data-i18n="Wrap entire user message in quotes before sending.">Wrap
entire user message in quotes before sending.</span><br>
<span data-i18n="Leave off if you use quotes manually for speech.">Leave off
if you use quotes manually for speech.</span>
</div>
</div>
<div class="range-block">
<div class="range-block-title justifyLeft">
Replace empty message
</div>
<div class="toggle-description justifyLeft">
<span data-i18n="Send this text instead of nothing when the text box is empty.">
Send this text instead of nothing when the text box is empty.
</span>
</div>
<div class="wide100p">
<textarea id="send_if_empty_textarea" class="text_pole textarea_compact" name="send_if_empty" rows="1" placeholder=""></textarea>
</div>
</div>
</div>
<br>
<div class="range-block">
<div class="range-block-title openai_restorable">
<span data-i18n="Main prompt">Main prompt</span>
<div id="main_prompt_restore" title="Restore default prompt" class="right_menu_button">
<div class="fa-solid fa-clock-rotate-left "></div>
</div>
</div>
<div class="prompt_overridden">
Overridden by the Character Definitions.
</div>
<div class="toggle-description justifyLeft" data-i18n="The main prompt used to set the model behavior">
The main prompt used to set the model behavior
</div>
<div class="wide100p">
<textarea id="main_prompt_textarea" class="text_pole textarea_compact" name="main_prompt" rows="6" placeholder=""></textarea>
</div>
</div>
<div class="range-block">
<div class="range-block-title openai_restorable">
<span data-i18n="NSFW prompt">NSFW prompt</span>
<div id="nsfw_prompt_restore" title="Restore default prompt" class="right_menu_button">
<div class="fa-solid fa-clock-rotate-left "></div>
</div>
</div>
<div class="toggle-description justifyLeft" data-i18n="Prompt that is used when the NSFW toggle is on">
Prompt that is used when the NSFW toggle is on
</div>
<div class="wide100p">
<textarea id="nsfw_prompt_textarea" class="text_pole textarea_compact" name="nsfw_prompt" rows="6" placeholder=""></textarea>
</div>
</div>
<div class="range-block">
<div class="range-block-title openai_restorable">
<span>NSFW avoidance prompt</span>
<div id="nsfw_avoidance_prompt_restore" title="Restore default prompt" class="right_menu_button">
<div class="fa-solid fa-clock-rotate-left"></div>
</div>
</div>
<div class="toggle-description justifyLeft">
Prompt that is used when the NSFW toggle is OFF
</div>
<div class="wide100p">
<textarea id="nsfw_avoidance_prompt_textarea" class="text_pole textarea_compact" name="nsfw_prompt" rows="2" placeholder=""></textarea>
</div>
</div>
<div class="range-block">
<div class="range-block-title openai_restorable">
<span data-i18n="Jailbreak prompt">Jailbreak prompt</span>
<div id="jailbreak_prompt_restore" title="Restore default prompt" class="right_menu_button">
<div class="fa-solid fa-clock-rotate-left"></div>
</div>
</div>
<div class="jailbreak_overridden">
Overridden by the Character Definitions.
</div>
<div class="toggle-description justifyLeft" data-i18n="Prompt that is used when the Jailbreak toggle is on">
Prompt that is used when the Jailbreak toggle is on
</div>
<div class="wide100p">
<textarea id="jailbreak_prompt_textarea" class="text_pole textarea_compact" name="jailbreak_prompt" rows="6" placeholder=""></textarea>
</div>
</div>
<div class="inline-drawer wide100p">
<div class="inline-drawer-toggle inline-drawer-header margin-bot-10px">
<b>Advanced prompt bits</b>
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div>
<div class="inline-drawer-content">
<div class="range-block">
<div class="range-block-title openai_restorable">
<span data-i18n="Impersonation prompt">Impersonation prompt</span>
<div id="impersonation_prompt_restore" title="Restore default prompt" class="right_menu_button">
<div class="fa-solid fa-clock-rotate-left"></div>
</div>
</div>
<div class="toggle-description justifyLeft" data-i18n="Prompt that is used for Impersonation function">
Prompt that is used for Impersonation function
</div>
<div class="wide100p">
<textarea id="impersonation_prompt_textarea" class="text_pole textarea_compact" name="impersonation_prompt" rows="6" placeholder=""></textarea>
</div>
</div>
<div class="range-block">
<div class="range-block-title openai_restorable">
<span>World Info format template</span>
<div id="wi_format_restore" title="Restore default format" class="right_menu_button">
<div class="fa-solid fa-clock-rotate-left"></div>
</div>
</div>
<div class="toggle-description justifyLeft">
Wraps activated World Info entries before inserting into the prompt. Use
<tt>{0}</tt> to mark a place where the content is inserted.
</div>
<div class="wide100p">
<textarea id="wi_format_textarea" class="text_pole textarea_compact" rows="3" placeholder=""></textarea>
</div>
</div>
</div>
</div>
<div class="range-block" data-source="openai">
<div class="range-block-title openai_restorable" data-i18n="Logit Bias">
Logit Bias
</div>
<div class="toggle-description justifyLeft" data-i18n="Helps to ban or reenforce the usage of certain words">
Helps to ban or reinforce the usage of certain tokens. Confirm token parsing with <a target="_blank" href="https://tiktokenizer.vercel.app/">Tiktokenizer</a>.
</div>
<div class="openai_logit_bias_preset_form">
<select id="openai_logit_bias_preset">
</select>
<i title="New preset" id="openai_logit_bias_new_preset" class="menu_button fa-solid fa-plus"></i>
<i title="Import preset" id="openai_logit_bias_import_preset" class="menu_button fa-solid fa-upload"></i>
<i title="Export preset" id="openai_logit_bias_export_preset" class="menu_button fa-solid fa-download"></i>
<i title="Delete preset" id="openai_logit_bias_delete_preset" class="menu_button fa-solid fa-trash-can"></i>
<input id="openai_logit_bias_import_file" type="file" accept=".json" hidden />
</div>
<div class="inline-drawer wide100p">
<div class="inline-drawer-toggle inline-drawer-header">
<b data-i18n="View / Edit bias preset">View / Edit bias preset</b>
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div>
<div class="inline-drawer-content">
<div id="openai_logit_bias_new_entry" class="menu_button wide100p flex-container justifyCenter" data-i18n="Add bias entry">
Add bias entry
</div>
<div class="openai_logit_bias_list"></div>
</div>
</div>
</div>
</div>
<div id="poe_settings">
<div class="range-block">
<div class="range-block-title justifyLeft poe_restorable">
<span data-i18n="Jailbreak activation message">Jailbreak activation
message</span>
<div id="poe_activation_message_restore" title="Restore default jailbreak" class="right_menu_button">
<div class="fa-solid fa-clock-rotate-left"></div>
</div>
</div>
<div class="toggle-description justifyLeft" data-i18n="Message to send when auto-jailbreak is on.">
Message to send when auto-jailbreak is on.
</div>
<div class="wide100p">
<textarea id="poe_activation_message" class="text_pole textarea_compact" rows="6"></textarea>
</div>
</div>
<div class="range-block">
<div class="range-block-title justifyLeft poe_restorable">
<span data-i18n="Jailbreak confirmation reply">Jailbreak confirmation
reply</span>
<div id="poe_activation_response_restore" title="Restore default reply" class="right_menu_button">
<div class="fa-solid fa-clock-rotate-left"></div>
</div>
</div>
<div class="toggle-description justifyLeft" data-i18n="Bot must send this back to confirm jailbreak">
Bot must send this back to confirm jailbreak
</div>
<div class="wide100p">
<input id="poe_activation_response" class="text_pole textarea_compact" type="text" />
</div>
</div>
<div class="range-block">
<div class="range-block-title justifyLeft poe_restorable">
<span data-i18n="Character Note">Character Note</span>
<div id="poe_nudge_text_restore" title="Restore default note" class="right_menu_button">
<div class="fa-solid fa-clock-rotate-left"></div>
</div>
</div>
<div class="toggle-description justifyLeft" data-i18n="Influences bot behavior in its responses">
Influences bot behavior in its responses.
</div>
<div class="wide100p">
<textarea id="poe_nudge_text" class="text_pole textarea_compact" rows="6" maxlength="2500"></textarea>
</div>
</div>
<div class="range-block">
<div class="range-block-title justifyLeft poe_restorable">
<span data-i18n="Impersonation prompt">Impersonation prompt</span>
<div id="poe_impersonation_prompt_restore" title="Restore default prompt" class="right_menu_button">
<div class="fa-solid fa-clock-rotate-left"></div>
</div>
</div>
<div class="toggle-description justifyLeft" data-i18n="Prompt that is used for Impersonation function">
Prompt that is used for Impersonation function
</div>
<div class="wide100p">
<textarea id="poe_impersonation_prompt" class="text_pole textarea_compact" rows="6" maxlength="2500"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="sys-settings-button" class="drawer">
<div class="drawer-toggle drawer-header">
<div id="API-status-top" class="drawer-icon fa-solid fa-plug-circle-exclamation closedIcon" title="API Connections"></div>
</div>
<div id="rm_api_block" class="drawer-content closedDrawer">
<h3 id="title_api">API</h3>
<div class="flex-container flexFlowColumn">
<div id="main-API-selector-block">
<select id="main_api">
<option value="kobold">KoboldAI</option>
<option value="koboldhorde">KoboldAI Horde</option>
<option value="textgenerationwebui">Text Gen WebUI (ooba)</option>
<option value="novel">NovelAI</option>
<option value="openai">Chat Completion (OpenAI, Claude, Window.ai)</option>
<option value="poe">Poe</option>
</select>
</div>
<div id="kobold_horde" style="position: relative;"> <!-- shows the kobold settings -->
<form action="javascript:void(null);" method="post" enctype="multipart/form-data">
<div id="kobold_horde_block">
<ul>
<li>
<a target="_blank" href="https://horde.koboldai.net/register">Register a Horde
account for faster queue times</a>
</li>
<li>
<a target="_blank" href="https://github.com/db0/AI-Horde-Worker#readme">Learn
how to contribute your idle GPU cycles to the Horde</a>
</li>
</ul>
<label for="horde_auto_adjust_context_length" class="checkbox_label">
<input id="horde_auto_adjust_context_length" type="checkbox" />
Adjust context size to worker capabilities
</label>
<label for="horde_auto_adjust_response_length" class="checkbox_label">
<input id="horde_auto_adjust_response_length" type="checkbox" />
Adjust response length to worker capabilities
</label>
<label for="horde_trusted_workers_only" class="checkbox_label" title="Can help with bad responses by queueing only the approved workers. May slowdown the response time.">
<input id="horde_trusted_workers_only" type="checkbox" />
Trusted workers only
</label>
<h4>API key</h4>
<small>Get it here: <a target="_blank" href="https://horde.koboldai.net/register">Register</a> (<a id="horde_kudos" href="javascript:void(0);">View my Kudos</a>)<br>
Enter <span class="monospace">0000000000</span> to use anonymous mode.
</small>
<!-- <div>
<a id="horde_kudos" href="javascript:void(0);">View my Kudos</a>
</div> -->
<div class="flex-container">
<input id="horde_api_key" name="horde_api_key" class="text_pole flex1" maxlength="500" type="text" placeholder="0000000000" autocomplete="off">
<div title="Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_horde"></div>
</div>
<div class="neutral_warning">For privacy reasons, your API key will be hidden after you
reload the page.</div>
<h4 class="horde_model_title">
Model
<div id="horde_refresh" title="Refresh models" class="right_menu_button">
<div class="fa-solid fa-repeat "></div>
</div>
</h4>
<small class="horde_multiple_hint">You can select multiple models.<br>Avoid sending
sensitive information to the Horde. <a id="horde_privacy_disclaimer" target="_blank" href="https://docs.sillytavern.app/usage/api-connections/koboldai/">Learn more</a></small>
<select id="horde_model" multiple>
<option>-- Horde models not loaded --</option>
</select>
</div>
<div id="online_status_horde">
<div id="online_status_indicator_horde"></div>
<div id="online_status_text_horde">Not connected</div>
</div>
</form>
</div>
<div id="kobold_api" style="position: relative;"> <!-- shows the kobold settings -->
<form action="javascript:void(null);" method="post" enctype="multipart/form-data">
<div id="kobold_api_block">
<h4>API url</h4>
<small>Example: http://127.0.0.1:5000/api </small>
<input id="api_url_text" name="api_url" class="text_pole" placeholder="http://127.0.0.1:5000/api" maxlength="500" value="" autocomplete="off">
<input id="api_button" class="menu_button" type="submit" value="Connect">
<div id="api_loading" class="api-load-icon fa-solid fa-hourglass fa-spin"></div>
</div>
<div id="online_status2">
<div id="online_status_indicator2"></div>
<div id="online_status_text2">Not connected</div>
</div>
</form>
</div>
<div id="novel_api" style="display: none;position: relative;"> <!-- shows the novel settings -->
<form action="javascript:void(null);" method="post" enctype="multipart/form-data">
<h4 data-i18n="Novel API key">Novel API key</h4>
<span>
<ol>
<li>
<a href="https://docs.sillytavern.app/usage/api-connections/novelai/" class="notes-link" target="_blank"> <span data-i18n="Get your NovelAI API Key">Get your NovelAI API key</span></a>
</li>
<li><span data-i18n="Enter it in the box below">Enter it in the box below:</span>
</li>
</ol>
</span>
<div class="flex-container">
<input id="api_key_novel" name="api_key_novel" class="text_pole flex1 wide100p" maxlength="500" size="35" type="text" autocomplete="off">
<div title="Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_novel">
</div>
</div>
<div class="neutral_warning">For privacy reasons, your API key will be hidden after you
reload the page.</div>
<input id="api_button_novel" class="menu_button" type="submit" value="Connect">
<div id="api_loading_novel" class="api-load-icon fa-solid fa-hourglass fa-spin"></div>
<h4><span data-i18n="Novel AI Model">Novel AI Model</span>
<a href="https://docs.sillytavern.app/usage/api-connections/novelai/#models" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</h4>
<select id="model_novel_select">
<option value="euterpe-v2">Euterpe</option>
<option value="krake-v2">Krake</option>
<option value="clio-v1">Clio</option>
</select>
</form>
<div id="online_status3">
<div id="online_status_indicator3"></div>
<div id="online_status_text3">No connection...</div>
</div>
</div>
<div id="textgenerationwebui_api" style="display: none;position: relative;">
<div class="flex-container">
<a href="https://github.com/oobabooga/text-generation-webui" target="_blank">
oobabooga/text-generation-webui
</a>
<span data-i18n="Make sure you run it with">
Make sure you run it with <tt>--api</tt> flag
</span>
</div>
<div>
<div class="flex-container flexFlowColumn">
<div class="flex1">
<h4 data-i18n="Blocking API url">Blocking API url</h4>
<small>Example: http://127.0.0.1:5000/</small>
<input id="textgenerationwebui_api_url_text" name="textgenerationwebui_api_url" class="text_pole wide100p" maxlength="500" value="" autocomplete="off">
</div>
<div class="flex1">
<h4 data-i18n="Streaming API url">Streaming API url</h4>
<small>Example: ws://127.0.0.1:5005/api/v1/stream</small>
<input id="streaming_url_textgenerationwebui" type="text" class="text_pole wide100p" maxlength="500" value="" autocomplete="off">
</div>
</div>
<input id="api_button_textgenerationwebui" class="menu_button" type="submit" value="Connect">
<div id="api_loading_textgenerationwebui" class="api-load-icon fa-solid fa-hourglass fa-spin"></div>
</div>
<div class="online_status4">
<div class="online_status_indicator4"></div>
<div class="online_status_text4">Not connected</div>
</div>
</div>
<div id="openai_api" style="display: none;position: relative;">
<h3>
Chat Completion Source
</h3>
<select id="chat_completion_source">
<option value="openai">OpenAI</option>
<option value="windowai">Window.ai</option>
<option value="claude">Claude</option>
</select>
<form id="openai_form" data-source="openai">
<h4>OpenAI API key</h4>
<span>
<ol>
<li>
Follow<a href="https://docs.sillytavern.app/usage/api-connections/openai/" class="notes-link" target="_blank"> these directions </a> to get your OpenAI
API key.
</li>
<li>Enter it in the box below:</li>
</ol>
</span>
<div class="flex-container">
<input id="api_key_openai" name="api_key_openai" class="text_pole flex1" maxlength="500" value="" type="text" autocomplete="off">
<div title="Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_openai"></div>
</div>
<div class="neutral_warning">For privacy reasons, your API key will be hidden after you
reload the page.</div>
<div>
<h4 data-i18n="OpenAI Model">OpenAI Model</h4>
<select id="model_openai_select">
<option value="gpt-3.5-turbo">gpt-3.5-turbo</option>
<option value="gpt-3.5-turbo-16k">gpt-3.5-turbo-16k</option>
<option value="gpt-3.5-turbo-16k-0613">gpt-3.5-turbo-16k-0613</option>
<option value="gpt-3.5-turbo-0613">gpt-3.5-turbo-0613</option>
<option value="gpt-3.5-turbo-0301">gpt-3.5-turbo-0301</option>
<option value="gpt-4">gpt-4</option>
<option value="gpt-4-0613">gpt-4-0613</option>
<option value="gpt-4-0314">gpt-4-0314</option>
<option value="gpt-4-32k">gpt-4-32k</option>
<option value="gpt-4-32k-0301">gpt-4-32k-0301</option>
<option value="gpt-4-32k-0613">gpt-4-32k-0613</option>
</select>
</div>
<div>
<a id="openai_api_usage" href="javascript:void(0);">View API Usage Metrics</a>
</div>
</form>
<form id="claude_form" data-source="claude">
<h4>Claude API Key</h4>
<div>
Get your key from <a target="_blank" href="https://console.anthropic.com/account/keys">Anthropic's developer console</a>.
</div>
<div>
<b>
Slack and Poe cookies will not work here, do not bother trying.
</b>
</div>
<div class="flex-container">
<input id="api_key_claude" name="api_key_claude" class="text_pole flex1" maxlength="500" value="" type="text" autocomplete="off">
<div title="Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_claude"></div>
</div>
<div class="neutral_warning">For privacy reasons, your API key will be hidden after you
reload the page.</div>
<div>
<h4 data-i18n="Claude Model">Claude Model</h4>
<select id="model_claude_select">
<optgroup label="Latest">
<option value="claude-v1">claude-v1</option>
<option value="claude-v1-100k">claude-v1-100k</option>
<option value="claude-instant-v1">claude-instant-v1</option>
<option value="claude-instant-v1-100k">claude-instant-v1-100k</option>
</optgroup>
<optgroup label="Sub-versions">
<option value="claude-v1.3">claude-v1.3</option>
<option value="claude-v1.3-100k">claude-v1.3-100k</option>
<option value="claude-v1.2">claude-v1.2</option>
<option value="claude-v1.0">claude-v1.0</option>
<option value="claude-instant-v1.1">claude-instant-v1.1</option>
<option value="claude-instant-v1.1-100k">claude-instant-v1.1-100k</option>
<option value="claude-instant-v1.0">claude-instant-v1.0</option>
</optgroup>
</select>
</div>
</form>
<form id="windowai_form" data-source="windowai">
<div>
<h4 data-i18n="Window AI Model">Window AI Model</h4>
<select id="model_windowai_select">
<option value="">Use extension settings</option>
<option value="openai/gpt-3.5-turbo">openai/gpt-3.5-turbo</option>
<option value="openai/gpt-3.5-turbo-16k">openai/gpt-3.5-turbo-16k</option>
<option value="openai/gpt-4">openai/gpt-4</option>
<option value="anthropic/claude-instant-v1">anthropic/claude-instant-v1</option>
<option value="anthropic/claude-instant-v1-100k">anthropic/claude-instant-v1-100k</option>
<option value="anthropic/claude-v1">anthropic/claude-v1</option>
<option value="anthropic/claude-v1-100k">anthropic/claude-v1-100k</option>
<option value="togethercomputer/GPT-NeoXT-Chat-Base-20B">togethercomputer/GPT-NeoXT-Chat-Base-20B</option>
<option value="cohere/command-nightly">cohere/command-nightly</option>
</select>
</div>
</form>
<div class="flex-container flex">
<input id="api_button_openai" class="menu_button" type="submit" value="Connect">
<input id="test_api_button" class="menu_button" type="button" value="Test Message" title="Verifies your API connection by sending a short test message. Be aware that you'll be credited for it!">
</div>
<div id="api_loading_openai" class=" api-load-icon fa-solid fa-hourglass fa-spin"></div>
<div class="online_status4">
<div class="online_status_indicator4"></div>
<div class="online_status_text4">No connection...</div>
</div>
<br>
</div>
<div id="poe_api">
<h4 data-i18n="Poe.com Unofficial API">
Poe.com Unofficial "API"
</h4>
<span>
<ol>
<li>
Follow <a href="https://docs.sillytavern.app/usage/api-connections/poe/" class="notes-link" target="_blank">these directions</a> to get your 'p-b cookie'
</li>
<li>Enter it in the box below:</li>
</ol>
</span>
<div class="widthFreeExpand">
<div class="flex-container">
<input id="poe_token" class="text_pole flex1" type="text" maxlength="100" autocomplete="off" />
<div title="Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_poe">
</div>
</div>
<div class="neutral_warning">For privacy reasons, your API key will be hidden after you
reload the page.</div>
</div>
<input id="poe_connect" class="menu_button" type="button" value="Connect" />
<div id="api_loading_poe" class="api-load-icon fa-solid fa-hourglass fa-spin"></div>
<div class="range-block">
<div class="range-block-title">
<h4 data-i18n="Bot">Bot</h4>
</div>
<div class="widthFreeExpand">
<select id="poe_bots">
<option data-i18n="Connect to the API">-- Connect to the API --</option>
</select>
</div>
</div>
<div class="online_status4">
<div class="online_status_indicator4"></div>
<div class="online_status_text4">No connection...</div>
</div>
</div>
</div>
<div class="flex-container alignitemscenter spaceBetween wide100p">
<label for="auto-connect-checkbox" class="checkbox_label"><input id="auto-connect-checkbox" type="checkbox" />
<span data-i18n="Auto-connect to Last Server">Auto-connect to Last Server</span>
</label>
<a id="viewSecrets" href="javascript:void(0);">View hidden API keys</a>
</div>
</div>
</div>
<div id="advanced-formatting-button" class="drawer">
<div class="drawer-toggle">
<div class="drawer-icon fa-solid fa-font closedIcon" title="AI Response Formatting"></div>
</div>
<div class="drawer-content">
<h3>Advanced Formatting
<a href="https://docs.sillytavern.app/usage/core-concepts/advancedformatting/" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</h3>
<div class="flex-container">
<div name="PygOverrides" class="flex1">
<h4><span data-i18n="AutoFormat Overrides">AutoFormat Overrides</span></h4>
<label class="checkbox_label" for="disable-description-formatting-checkbox">
<input id="disable-description-formatting-checkbox" type="checkbox" />
<span data-i18n="Disable description formatting">Disable description formatting</span>
</label>
<label class="checkbox_label" for="disable-scenario-formatting-checkbox">
<input id="disable-scenario-formatting-checkbox" type="checkbox" />
<span data-i18n=" Disable scenario formatting"> Disable scenario formatting</span>
</label>
<label class="checkbox_label" for="disable-personality-formatting-checkbox">
<input id="disable-personality-formatting-checkbox" type="checkbox" />
<span data-i18n=" Disable personality formatting"> Disable personality formatting</span>
</label>
<label class="checkbox_label" for="disable-examples-formatting-checkbox">
<input id="disable-examples-formatting-checkbox" type="checkbox" />
<span data-i18n="Disable example chats formatting">Disable example chats formatting</span>
</label>
<label class="checkbox_label" for="disable-start-formatting-checkbox">
<input id="disable-start-formatting-checkbox" type="checkbox" />
<span data-i18n="Disable chat start formatting">Disable chat start formatting</span>
</label>
<label class="checkbox_label" for="trim_sentences_checkbox">
<input id="trim_sentences_checkbox" type="checkbox" />
Trim Incomplete Sentences
</label>
<!-- Add margin since this is a child of above -->
<label style="margin-left: 1em;" class="checkbox_label" for="include_newline_checkbox">
<input id="include_newline_checkbox" type="checkbox" />
Include Newline
</label>
<div>
<h4 data-i18n="Custom Chat Separator">
Custom Chat Separator
</h4>
<div>
<input id="custom_chat_separator" class="text_pole textarea_compact" type="text" placeholder="&lt;START&gt;" maxlength="100" />
</div>
</div>
<div>
<h4 data-i18n="Non-markdown strings">
Non-markdown strings
</h4>
<div>
<input id="markdown_escape_strings" class="text_pole textarea_compact" type="text" placeholder="separate with commas w/o space between" maxlength="100" />
</div>
</div>
<div>
<h4 data-i18n="Instruct mode">Instruct mode
<a href="https://docs.sillytavern.app/usage/core-concepts/instructmode/" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</h4>
<div>
<label for="instruct_enabled" class="checkbox_label">
<input id="instruct_enabled" type="checkbox" />
<span data-i18n="Enabled">Enabled</span>
</label>
<label for="instruct_wrap" class="checkbox_label">
<input id="instruct_wrap" type="checkbox" />
<span data-i18n="Wrap Sequences with Newline">Wrap Sequences with Newline</span>
</label>
<label for="instruct_macro" class="checkbox_label">
<input id="instruct_macro" type="checkbox" />
<span data-i18n="Replace Macro is Sequences">Replace Macro in Sequences</span>
</label>
<label for="instruct_names" class="checkbox_label">
<input id="instruct_names" type="checkbox" />
<span data-i18n="Include Names">Include Names</span>
</label>
</div>
<label for="instruct_presets">Presets</label>
<select id="instruct_presets"></select>
<label>
<span data-i18n="System Prompt">System Prompt</span>
</label>
<div class="prompt_overridden">
Overridden by the Character Definitions.
</div>
<textarea id="instruct_system_prompt" class="text_pole textarea_compact"></textarea>
<div class="flex-container">
<div class="flex1">
<label for="instruct_input_sequence">
<span data-i18n="Input Sequence">Input Sequence</span>
</label>
<div>
<input id="instruct_input_sequence" class="text_pole textarea_compact" type="text" maxlength="100" />
</div>
</div>
<div class="flex1">
<label for="instruct_output_sequence">
<span data-i18n="Output Sequence">Output Sequence</span>
</label>
<div>
<input id="instruct_output_sequence" class="text_pole wide100p textarea_compact" type="text" maxlength="100" />
</div>
</div>
</div>
<div class="flex-container">
<div class="flex1">
<label for="instruct_system_sequence">
<small data-i18n="System Sequence">System Sequence</small>
</label>
<div>
<input id="instruct_system_sequence" class="text_pole textarea_compact" type="text" maxlength="100" />
</div>
</div>
<div class="flex1">
<label for="instruct_stop_sequence">
<small data-i18n="Stop Sequence">Stop Sequence</small>
</label>
<div>
<input id="instruct_stop_sequence" class="text_pole wide100p textarea_compact" type="text" maxlength="100" />
</div>
</div>
<div class="flex1">
<label for="instruct_separator_sequence">
<small data-i18n="Separator">Separator</small>
</label>
<div>
<input id="instruct_separator_sequence" class="text_pole wide100p textarea_compact" type="text" maxlength="100" />
</div>
</div>
</div>
</div>
</div>
<div name="ContextFormatting" class="flex1">
<h4><span data-i18n="Context Formatting">Context Formatting</span></h4>
<div>
<h4><span data-i18n="Tokenizer">Tokenizer</span>
<a href="https://docs.sillytavern.app/usage/core-concepts/advancedformatting/#tokenizer" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</h4>
<select id="tokenizer">
<option value="0">None / Estimated</option>
<option value="1">GPT-3 (OpenAI)</option>
<option value="2">GPT-3 (Alternative / Classic)</option>
<option value="3">Sentencepiece (LLaMA)</option>
<option value="4">NerdStash (NovelAI Krake)</option>
<option value="5">NerdStash v2 (NovelAI Clio)</option>
</select>
</div>
<div class="range-block">
<div class="range-block-title justifyLeft">
Token Padding
<a href="https://docs.sillytavern.app/usage/core-concepts/advancedformatting/#token-padding" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</div>
<input id="token_padding" class="text_pole textarea_compact" type="number" min="-2048" max="2048" />
</div>
<label class="checkbox_label" for="always-force-name2-checkbox">
<input id="always-force-name2-checkbox" type="checkbox" />
<span data-i18n="Always add character's name to prompt">
Always add character's name to prompt
</span>
</label>
<label class="checkbox_label" for="pin-examples-checkbox">
<input id="pin-examples-checkbox" type="checkbox" />
<span data-i18n="Keep Example Messages in Prompt">
Keep Example Messages in Prompt
</span>
</label>
<label class="checkbox_label" for="collapse-newlines-checkbox"><input id="collapse-newlines-checkbox" type="checkbox" />
<span data-i18n="Remove Empty New Lines from Output">
Remove Empty New Lines from Output
</span>
</label>
<div id="context-templates-block" class="template_element">
<h4>
Context Templates
</h4>
<div class="flex-container flexGap5">
<select id="context_template" class="flex1 margin0">
</select>
<div id="context_template_new" class="menu_button fa-solid fa-plus margin0" title="Create new"></div>
<div id="context_template_edit" class="menu_button fa-solid fa-file-pen margin0" title="Edit"></div>
<div id="context_template_rename" class="menu_button fa-solid fa-i-cursor margin0" title="Rename"></div>
<div id="context_template_delete" class="menu_button fa-solid fa-trash-can margin0" title="Delete"></div>
</div>
</div>
<div>
<h4>
<span data-i18n="Pygmalion Formatting">
Pygmalion Formatting
</span>
</h4>
<select id="pygmalion_formatting">
<option value="-1">
<span data-i18n="Disabled for all models">
Disabled for all models
</span>
</option>
<option value="0">
<span data-i18n="Automatic (based on model name)">
Automatic (based on model name)
</span>
</option>
<option value="1">
<span data-i18n="Enabled for all models">
Enabled for all models
</span>
</option>
</select>
</div>
<div>
<h4>
<span data-i18n="Multigen">Multigen</span>
<a href="https://docs.sillytavern.app/usage/core-concepts/advancedformatting/#multigen" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</h4>
<label class="checkbox_label" for="multigen">
<input id="multigen" type="checkbox" />
<span>
Enabled
</span>
</label>
<div class="multigen_settings_block">
<label for="multigen_1st_chunk">
<small><span data-i18n="First chunk (tokens)">First chunk (tokens)</span></small>
<input id="multigen_first_chunk" type="number" class="text_pole textarea_compact" min="1" max="512" />
</label>
<label for="multigen_next_chunk">
<small><span data-i18n="Next chunks (tokens)">Next chunks (tokens)</span></small>
<input id="multigen_next_chunks" type="number" class="text_pole textarea_compact" min="1" max="512" />
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="WI-SP-button" class="drawer">
<div class="drawer-toggle drawer-header">
<div id="WIDrawerIcon" class="drawer-icon fa-solid fa-book-atlas closedIcon " title="World Info & Soft Prompts"></div>
</div>
<div id="WorldInfo" class="drawer-content closedDrawer">
<div id="WorldInfoheader" class="fa-solid fa-grip drag-grabber"></div>
<div id="WI_panel_pin_div" class="flex-container alignitemscenter gap10px" title="Locked = World Editor will stay open">
<input type="checkbox" id="WI_panel_pin">
<label for="WI_panel_pin">
<div class="unchecked fa-solid fa-unlock "></div>
<div class="checked fa-solid fa-lock "></div>
</label>
<h3>
Worlds/Lorebooks
<a href="https://docs.sillytavern.app/usage/core-concepts/worldinfo/" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</h3>
</div>
<div id="wi-holder" class="margin5">
<div class="wi-settings flex-container gap10px alignitemscenter">
<div class="flex range-block">
<div class="range-block-title justifyLeft">
<small>Active World</small>
</div>
<div class="range-block-range">
<select id="world_info" multiple>
<option value="">-- World Info not found --</option>
</select>
</div>
</div>
<div class="flex1 flex-container flexFlowColumn">
<div class="flex range-block">
<div class="range-block-title justifyLeft">
<label for="world_info_character_strategy">
<small>Character Lore Insertion Strategy</small>
</label>
</div>
<div class="range-block-range">
<select id="world_info_character_strategy" class="flexGrow margin0">
<option value="0">Sorted Evenly</option>
<option value="1">Character Lore First</option>
<option value="2">Global Lore First</option>
</select>
</div>
</div>
<div name="WIScanAndTokens" class="flex1 flex-container flexFlowColumn">
<div class="flex1 gap5px range-block">
<div class="wide10pMinFit">
<small data-i18n="Scan Depth">Scan Depth</small>
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range paddingLeftRight5">
<input type="range" id="world_info_depth" name="volume" min="0" max="10" step="1">
</div>
<div class="range-block-counter margin0">
<div contenteditable="true" data-for="world_info_depth" id="world_info_depth_counter">
depth
</div>
</div>
</div>
</div>
<div class="flex1 gap5px range-block">
<div class="wide10pMinFit">
<small data-i18n="Token Budget">Context %</small>
</div>
<div class="range-block-range-and-counter ">
<div class="range-block-range paddingLeftRight5">
<input type="range" id="world_info_budget" name="volume" min="1" max="100" step="1">
</div>
<div class="range-block-counter margin0">
<div contenteditable="true" data-for="world_info_budget" id="world_info_budget_counter">
budget
</div>
</div>
</div>
</div>
</div>
</div>
<div class="range-block flex-container flexFlowColumn">
<label title="Entries can activate other entries by mentioning their keywords" class="checkbox_label">
<input id="world_info_recursive" type="checkbox" />
<small>
Recursive scanning
</small>
</label>
<label title="Lookup for the entry keys in the context will respect the case" class="checkbox_label">
<input id="world_info_case_sensitive" type="checkbox" />
<small>
Case-sensitive keys
</small>
</label>
<label title="If the entry key consists of only one word, it would not be matched as part of other words" class="checkbox_label">
<input id="world_info_match_whole_words" type="checkbox" />
<small>
Match whole words
</small>
</label>
</div>
</div>
<div id="world_popup">
<hr>
<div id="world_popup_text">
<div id="world_popup_header" class="flex-container flexGap5">
<div class="world_popup_logo_block">
<h3>
World/Lore Editor
<a href="https://docs.sillytavern.app/usage/core-concepts/worldinfo/#world-info-entry" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
</h3>
</div>
<div id="OpenAllWIEntries" class="menu_button fa-solid fa-expand" title="Open all Entries"></div>
<div id="CloseAllWIEntries" class="menu_button fa-solid fa-compress" title="Close all Entries"></div>
<div id="world_popup_new" class="menu_button fa-solid fa-plus" title="New Entry"></div>
<div class="flex-container">
<form id="form_world_import" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<input type="file" id="world_import_file" accept=".json,.lorebook,.png" name="avatar" hidden>
</form>
<form id="form_rename_world" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<div id="world_create_button" class="menu_button fa-solid fa-globe fa-fw" title="Create"></div>
<div id="world_import_button" class="menu_button fa-solid fa-file-import fa-fw" title="Import World Info"></div>
<div id="world_popup_export" class="menu_button fa-solid fa-file-export margin0 fa-fw" title="Export World Info"></div>
<div id="world_popup_delete" class="menu_button fa-solid fa-trash-can redWarningBG margin0 fa-fw" title="Delete World Info"></div>
<span>&nbsp;Editing:</span>
<select id="world_editor_select" class="margin0">
<option value="">--- None ---</option>
</select>
<div id="world_popup_name_button" class="menu_button fa-solid fa-i-cursor fa-fw" title="Rename World Info"></div>
</form>
</div>
</div>
</div>
<div id="world_popup_entries_list">
</div>
</div>
</div>
</div>
</div>
<div id="user-settings-button" class="drawer">
<div class="drawer-toggle">
<div class="drawer-icon fa-solid fa-face-smile closedIcon" title="User Settings"></div>
</div>
<div id="user-settings-block" class="drawer-content closedDrawer">
<div class="flex-container wide100p alignitemscenter spaceBetween">
<h3><span data-i18n="User Settings">User Settings</span></h3>
<div id="version_display"></div>
</div>
<div class="flex-container spaceEvenly">
<div name="UI Customization" class="flex-container drawer25pWidth">
<div class="ui-settings">
<h4><span data-i18n="UI Customization">UI Customization</span></h4>
<div>
<span data-i18n="Avatar Style">Avatar Style:</span><br>
<label>
<input name="avatar_style" type="radio" value="0" />
<span data-i18n="Circle">Circle</span>
</label>
<label>
<input name="avatar_style" type="radio" value="1" />
<span data-i18n="Rectangle">Rectangle</span>
</label>
</div>
<div>
<span data-i18n="Chat Style:">Chat Style:</span><br>
<label>
<input name="chat_display" type="radio" value="0" />
<span data-i18n="Default">Default</span>
</label>
<label>
<input name="chat_display" type="radio" value="1" />
<span data-i18n="Bubbles">Bubbles</span>
</label>
</div>
<div>
<span data-i18n="Chat Width (PC):">Chat Width (PC):</span><br>
<label>
<input name="sheld_width" type="radio" value="0" />
800px
</label>
<label>
<input name="sheld_width" type="radio" value="1" />
1000px
</label>
</div>
<div>
<label for="play_message_sound" class="checkbox_label">
<input id="play_message_sound" type="checkbox" />
<audio id="audio_message_sound" src="sounds/message.mp3" hidden></audio>
<span>
<span data-i18n="Message Sound">Message Sound</span>
<a href="https://docs.sillytavern.app/usage/core-concepts/uicustomization/#message-sound" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</span>
</label>
<label for="play_sound_unfocused" class="checkbox_label">
<input id="play_sound_unfocused" type="checkbox" />
<span data-i18n="Background Sound Only">Background Sound Only</span>
</label>
<label for="fast_ui_mode" class="checkbox_label" title="removes blur and uses alternative background color for divs">
<input id="fast_ui_mode" type="checkbox" />
<span data-i18n="No Blur Effect">No Blur Effect</span>
</label>
<label for="noShadowsmode" class="checkbox_label">
<input id="noShadowsmode" type="checkbox" />
<span data-i18n="No Text Shadows">No Text Shadows</span>
</label>
<label for="waifuMode" class="checkbox_label">
<input id="waifuMode" type="checkbox" />
<span data-i18n="Waifu Mode">Visual Novel Mode</span>
</label>
<label for="messageTimerEnabled" class="checkbox_label">
<input id="messageTimerEnabled" type="checkbox" />
<span data-i18n="Message Timer">Message Timer</span>
</label>
<label for="messageTimestampsEnabled" class="checkbox_label">
<input id="messageTimestampsEnabled" type="checkbox" />
<span data-i18n="Chat Timestamps">Chat Timestamps</span>
</label>
<label for="auto_scroll_chat_to_bottom" class="checkbox_label">
<input id="auto_scroll_chat_to_bottom" type="checkbox" />
<span data-i18n="Auto-scroll Chat">Auto-scroll Chat</span>
</label>
<label for="hotswapEnabled" class="checkbox_label">
<input id="hotswapEnabled" type="checkbox" />
<span data-i18n="Characters Hotswap">Characters Hotswap</span>
</label>
<label for="movingUImode" class="checkbox_label">
<input id="movingUImode" type="checkbox" />
<span data-i18n="Movable UI Panels">Movable UI Panels</span>
</label>
<div id="movingUIreset" class="menu_button whitespacenowrap" data-i18n="Reset Panels">
Reset Panels</div>
</div>
</div>
</div>
<div id="UI-Theme-Block" class="flex-container flexFlowColumn drawer25pWidth">
<div id="color-picker-block" class="flex-container flexFlowColumn">
<h4><span data-i18n="UI Colors">UI Colors</span></h4>
<div class="flex-container">
<toolcool-color-picker id="main-text-color-picker"></toolcool-color-picker>
<span data-i18n="Main Text">Main Text</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="italics-color-picker"></toolcool-color-picker>
<span data-i18n="Italics Text">Italics Text</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="quote-color-picker"></toolcool-color-picker>
<span data-i18n="Quote Text">Quote Text</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="shadow-color-picker"></toolcool-color-picker>
<span data-i18n="Shadow Color">Text Shadow</span>
</div>
<!-- <div class="flex-container">
<toolcool-color-picker id="fastui-bg-color-picker"></toolcool-color-picker>
<span data-i18n="FastUI BG">FastUI BG</span>
</div> -->
<div class="flex-container">
<toolcool-color-picker id="blur-tint-color-picker"></toolcool-color-picker>
<span data-i18n="Blur Tint">UI Background</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="user-mes-blur-tint-color-picker"></toolcool-color-picker>
<span data-i18n="User Message Blur Tint">User Message</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="bot-mes-blur-tint-color-picker"></toolcool-color-picker>
<span data-i18n="AI Message Blur Tint">AI Message</span>
</div>
<div id="font-blur-UIpresets-block" class="flex-container flexFlowColumn">
<div id="font-scale-block" class="range-block">
<div class="range-block-title" data-i18n="Font Scale">
Font Scale
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="font_scale" name="font_scale" min="0.8" max="1.2" step="0.05">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="font_scale" id="font_scale_counter">
select
</div>
</div>
</div>
</div>
<div id="blur-strength-block" class="range-block">
<div class="range-block-title" data-i18n="Blur Strength">
Blur Strength
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="blur_strength" name="blur_strength" min="0" max="30" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="blur_strength" id="blur_strength_counter">
select
</div>
</div>
</div>
</div>
<div id="shadow-width-block" class="range-block">
<div class="range-block-title" data-i18n="Text Shadow Width">
Text Shadow Width
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="shadow_width" name="shadow_width" min="0" max="5" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="shadow_width" id="shadow_width_counter">
select
</div>
</div>
</div>
</div>
</div>
<div id="UI-presets-block" class="flex-container flexFlowColumn">
<h4>
<span data-i18n="UI Theme Preset">UI Theme Preset</span>
</h4>
<div class="flex-container flexnowrap alignitemscenter">
<select id="themes" class="margin0 margin-r5">
</select>
<div id="ui-preset-save-button" title="Save changes to a new theme file" class="menu_button padding5 margin0">
<i class="fa-solid fa-save"></i>
</div>
</div>
</div>
</div>
</div>
<div id="power-user-options-block" class="flex-container drawer25pWidth">
<div id="power-user-option-checkboxes">
<h4 data-i18n="Power User Options">Power User Options</h4>
<label for="swipes-checkbox">
<input id="swipes-checkbox" type="checkbox" />
<span data-i18n="Swipes">Swipes</span>
</label>
<label data-i18n="Prefer Character Card Prompt" for="prefer_character_prompt" title="If checked and the character card contains a prompt override (System Prompt), use that instead." class="checkbox_label">
<input id="prefer_character_prompt" type="checkbox" />
Prefer Char. Prompt
</label>
<label data-i18n="Prefer Character Card Jailbreak" for="prefer_character_jailbreak" title="If checked and the character card contains a jailbreak override (Post History Instruction), use that instead." class="checkbox_label">
<input id="prefer_character_jailbreak" type="checkbox" />
Prefer Char. JB
</label>
<label for="auto-load-chat-checkbox"><input id="auto-load-chat-checkbox" type="checkbox" />
<span data-i18n="Auto-load Last Chat">Auto-load Last Chat</span>
</label>
<label for="auto_save_msg_edits"><input id="auto_save_msg_edits" type="checkbox" />
<span data-i18n="Auto-save Message Edits">Auto-save Message Edits</span>
</label>
<label for="auto_fix_generated_markdown">
<input id="auto_fix_generated_markdown" type="checkbox" />
<span data-i18n="Auto-fix Markdown">Auto-fix Markdown</span>
</label>
<label class="checkbox_label" for="allow_name2_display">
<input id="allow_name2_display" type="checkbox" />
<span data-i18n="Allow {{char}}: in bot messages">Show {{char}}: in responses</span>
</label>
<label class="checkbox_label" for="allow_name1_display">
<input id="allow_name1_display" type="checkbox" />
<span data-i18n="Allow {{user}}: in bot messages">Show {{user}}: in responses</span>
</label>
<!-- <label class="checkbox_label" for="removeXML">
<input id="removeXML" type="checkbox" />
<span data-i18n="Remove XML/HTML tags from responses">Remove &lt;tags&gt; from responses</span>
</label> -->
<label for="console_log_prompts">
<input id="console_log_prompts" type="checkbox" />
Log prompts to console
</label>
<label for="render_formulas">
<input id="render_formulas" type="checkbox" />
<span data-i18n="Render Formulas">Render Formulas</span>
<a href="https://docs.sillytavern.app/usage/core-concepts/uicustomization/#formulas-rendering" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</label>
<label for="never_resize_avatars"><input id="never_resize_avatars" type="checkbox" />
<span data-i18n="Never Resize Avatars">Never Resize Avatars</span>
</label>
<div id="reload_chat" class="menu_button whitespacenowrap" data-i18n="Reload Chat">
Reload Chat
</div>
</div>
</div>
<div name="NameAndAvatar" class="flex-container flexFlowColumn drawer25pWidth">
<div class="inline-drawer wide100p flexFlowColumn">
<div class="flex-container flexFlowColumn">
<h4 data-i18n="Send on Enter">
Send on Enter
</h4>
<select id="send_on_enter">
<option value="-1"><span data-i18n="Always disabled">Always disabled</span></option>
<option value="0"><span data-i18n="Automatic (desktop)">Automatic (desktop)</span>
</option>
<option value="1"><span data-i18n="Always enabled">Always enabled</span></option>
</select>
</div>
<div class="inline-drawer-toggle inline-drawer-header">
<b>Auto-swipe</b>
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div>
<div class="inline-drawer-content">
<label class="checkbox_label" for="auto_swipe">
<input id="auto_swipe" type="checkbox" />
Enabled
</label>
<div>Minimum generated message length</div>
<input id="auto_swipe_minimum_length" name="auto_swipe_minimum_length" type="number" min="0" step="1" value="0" class="text_pole">
<div>Blacklisted words</div>
<div class="auto_swipe">
<textarea id="auto_swipe_blacklist" name="auto_swipe_blacklist" placeholder="words you dont want generated separated by comma ','" class="text_pole textarea_compact" maxlength="5000" value="" autocomplete="off" rows="3"></textarea>
<div>Blacklisted word count to swipe</div>
<input id="auto_swipe_blacklist_threshold" name="auto_swipe_blacklist_threshold" type="number" min="0" step="1" value="1" class="text_pole">
</div>
</div>
</div>
<div name="NameChanger">
<h4 data-i18n="Name">Name</h4>
<div class="change_name">
<input id="your_name" name="your_name" placeholder="Enter your name" class="text_pole wide100p" maxlength="50" value="" autocomplete="off">
<div id="your_name_button" class="menu_button fa-solid fa-check" title="Click to set a new User Name">
</div>
<div id="lock_user_name" class="menu_button fa-solid fa-lock" title="Click to lock your selected persona to the current chat. Click again to remove the lock.">
</div>
<div id="sync_name_button" class="menu_button fa-solid fa-sync" title="Click to set user name for all messages">
</div>
</div>
</div>
<div name="AvatarSelector">
<h4 data-i18n="Your Avatar">Your Persona</h4>
<div id="user_avatar_block">
<div class="avatar_upload">+</div>
</div>
<form id="form_upload_avatar" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<input type="file" id="avatar_upload_file" accept="image/*" name="avatar">
</form>
</div>
</div>
</div>
</div>
</div>
<div id="logo_block" class="drawer" title="Change Background Image">
<div id="site_logo" class="drawer-toggle drawer-header">
<div class="drawer-icon fa-solid fa-panorama closedIcon"></div>
</div>
<div class="drawer-content closedDrawer">
<div class="flex-container">
<input id="bg-filter" placeholder="Filter" class="text_pole" type="search" />
<div id="bg_menu_content">
<form id="form_bg_download" class="bg_example no-border no-shadow" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<label class="input-file">
<input type="file" id="add_bg_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
<div class="bg_example no-border no-shadow add_bg_but" style="background-image: url('/img/addbg3.png');"></div>
</label>
</form>
</div>
</div>
</div>
</div>
<div id="extensions-settings-button" class="drawer">
<div class="drawer-toggle">
<div class="drawer-icon fa-solid fa-cubes closedIcon" title="Extensions"></div>
</div>
<div id="rm_extensions_block" class="drawer-content closedDrawer">
<div class="extensions_block flex-container">
<div class="alignitemscenter flex-container justifyCenter wide100p" style="justify-content: space-between;">
<h3 class="margin0">Extensions API:
<a target="_blank" href="https://github.com/SillyTavern/SillyTavern-extras">
SillyTavern-extras
</a>
</h3>
<div class="flex-container">
<div id="extensions_status">Not Connected</div>
<label for="extensions_autoconnect">
<input id="extensions_autoconnect" type="checkbox">
Auto-connect
</label>
</div>
</div>
<div class="alignitemsflexstart flex-container wide100p">
<input id="extensions_url" type="text" class="flex1 heightFitContent text_pole widthNatural" maxlength="250" placeholder="Extensions URL">
<input id="extensions_api_key" type="text" class="flex1 heightFitContent text_pole widthNatural" maxlength="250" placeholder="API key">
<div class="alignitemsflexstart extensions_url_block">
<div class="" style="text-align: center">
<input id="extensions_connect" class="menu_button" type="submit" value="Connect">
</div>
<input id="extensions_details" class="alignitemsflexstart menu_button" type="button" value="Manage extensions">
</div>
</div>
<div id="extensions_settings" class="flex1 widthNatural">
</div>
<div id="extensions_settings2" class="flex1 widthNatural">
</div>
</div>
</div>
</div>
<div id="rightNavHolder" class="drawer">
<div id="unimportantYes" class="drawer-toggle drawer-header">
<div id="rightNavDrawerIcon" class="drawer-icon fa-solid fa-address-card closedIcon" title="Character Management">
</div>
</div>
<nav id="right-nav-panel" class="drawer-content closedDrawer fillRight gap5px">
<div id="right-nav-panelheader" class="fa-solid fa-grip drag-grabber">
</div>
<div id="CharListButtonAndHotSwaps" class="flex-container flexnowrap">
<div class="flexFlowColumn flex-container">
<div id="rm_button_panel_pin_div" class="alignitemsflexstart" title="Locked = Character Management panel will stay open">
<input type="checkbox" id="rm_button_panel_pin">
<label for="rm_button_panel_pin">
<div class="fa-solid unchecked fa-unlock" alt=""></div>
<div class="fa-solid checked fa-lock" alt=""></div>
</label>
</div>
<div class="right_menu_button fa-solid fa-list-ul" id="rm_button_characters" title="Select/Create Characters"></div>
</div>
<div name="HotSwapWrapper" class="alignitemscenter flex-container margin0auto">
<div class="hotswap flex-container flex1"></div>
</div>
</div>
<hr>
<!-- this div structure must be preserved until group peeking can adjust -->
<div id="rm_PinAndTabs">
<div id="right-nav-panel-tabs" class="">
<div id="rm_button_selected_ch">
<h2></h2>
</div>
</div>
</div>
<!-- end group peeking cope structure-->
<div name="Solo Char Create/Edit Panel" id="rm_ch_create_block" class="right_menu flex-container flexFlowColumn" style="display: none;">
<form id="form_create" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<div id="avatar-and-name-block">
<div id="name_div">
<input id="character_name_pole" name="ch_name" class="text_pole" placeholder="Name this character" maxlength="50" value="" autocomplete="off">
</div>
<div id="avatar_div" class="avatar_div alignitemsflexstart justifySpaceBetween flexnowrap flexGap5">
<label id="avatar_div_div" class="add_avatar avatar" for="add_avatar_button" title="Click to select a new avatar for this character">
<img id="avatar_load_preview" src="img/ai4.png" alt="avatar">
<input hidden type="file" id="add_avatar_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
</label>
<div class="flex-container flexFlowColumn">
<label for="char-management-dropdown">
<select id="char-management-dropdown">
<option value="default" disabled selected>Options</option>
<option id="set_character_world">
<i class="fa-solid fa-globe"></i> Link to World Info
</option>
<option id="import_character_info">
<i class="fa-solid fa-file-import"></i> Import Embedded World Info
</option>
<option id="set_chat_scenario">
Scenario Override
</option>
<option id="renameCharButton">
Rename
</option>
<option id="dupe_button">
Duplicate
</option>
<option id="export_button">
Export
</option>
<option id="delete_button">
Delete
</option>
</select>
</label>
<div class="form_create_bottom_buttons_block">
<div id="rm_button_back" class="menu_button fa-solid fa-left-long "></div>
<!-- <div id="renameCharButton" class="menu_button fa-solid fa-user-pen" title="Rename Character"></div> -->
<div id="favorite_button" class="menu_button fa-solid fa-star" title="Add to Favorites"></div>
<input type="hidden" id="fav_checkbox" name="fav" />
<div id="advanced_div" class="menu_button fa-solid fa-book " title="Advanced Definitions"></div>
<!-- <div id="export_button" class="menu_button fa-solid fa-file-export " title="Export and Download"></div> -->
<!-- <div id="set_chat_scenario" class="menu_button fa-solid fa-scroll" title="Set a chat scenario override"></div> -->
<!-- <div id="set_character_world" class="menu_button fa-solid fa-globe" title="Set a character World Info / Lorebook"></div> -->
<!-- <div id="dupe_button" class="menu_button fa-solid fa-clone " title="Duplicate Character"></div> -->
<label for="create_button" id="create_button_label" class="menu_button fa-solid fa-user-check" title="Create Character">
<input type="submit" id="create_button" name="create_button">
</label>
<!-- <div id="delete_button" class="menu_button fa-solid fa-skull " title="Delete Character"></div> -->
</div>
<div id="result_info" class="justifyCenter flex-container" title="Token counts may be inaccurate and provided just for reference.">&nbsp;</div>
</div>
</div>
</div>
<hr>
<div id="tags_div" class="marginBot5">
<div class="tag_controls">
<input id="tagInput" class="text_pole tag_input wide100p margin0" placeholder="Search / Create tags" maxlength="25" />
<div class="tags_view menu_button fa-solid fa-tags" title="View all tags"></div>
</div>
<div id="tagList" class="tags"></div>
</div>
<div id="description_div" class="marginBot5">
<span data-i18n="Description">Description</span>
<a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#character-description" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</div>
<textarea id="description_textarea" placeholder="Describe your character's physical and mental traits here." class="marginBot5" name="description" placeholder=""></textarea>
<div id="first_message_div" class="marginBot5 title_restorable">
<span>
<span data-i18n="First message">First message</span>
<a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#first-message" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</span>
<div class="menu_button open_alternate_greetings" title="Click to set additional greeting messages">
<i class="fa-solid fa-comment-dots"></i>
</div>
</div>
<textarea id="firstmessage_textarea" placeholder="This will be the first message from the character that starts every chat." class="marginBot5" name="first_mes" placeholder=""></textarea>
<!-- these divs are invisible and used for server communication purposes -->
<div id="hidden-divs">
<input id="character_json_data" name="json_data" type="hidden">
<input id="avatar_url_pole" name="avatar_url" type="hidden">
<input id="selected_chat_pole" name="chat" type="hidden">
<input id="create_date_pole" name="create_date" type="hidden">
<input id="last_mes_pole" name="last_mes" type="hidden">
<input id="character_world" name="world" type="hidden">
</div>
<!-- now back to normal divs for display purposes-->
</form>
</div>
<div name="Group Chat Edit Panel" id="rm_group_chats_block" class="right_menu flex-container flexNoGap">
<div class="inline-drawer wide100p flexFlowColumn">
<div id="groupControlsToggle" class="inline-drawer-toggle inline-drawer-header">
<span data-i18n="Group Controls">Group Controls</span>
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div>
<div class="inline-drawer-content">
<div name="group-metadata-controls" class="marginTopBot5">
<input id="rm_group_chat_name" class="text_pole wide100p" type="text" name="chat_name" placeholder="Chat Name (Optional)" maxlength="100" />
<div id="group_tags_div" class="wide100p">
<div class="tag_controls">
<input id="groupTagInput" class="text_pole tag_input flex1 margin0" placeholder="Search / Create tags" maxlength="25" />
<div class="tags_view menu_button fa-solid fa-tags margin0" title="View all tags"></div>
</div>
<div id="groupTagList" class="tags paddingTopBot5"></div>
</div>
<div id="rm_group_top_bar" class="flex-container alignitemscenter spaceBetween width100p">
<div class="flex1 flex-container alignitemscenter justifyCenter">
<label class="add_avatar avatar" for="group_avatar_button" title="Click to select a new avatar for this group">
<div id="group_avatar_preview">
<div class="avatar">
<img src="img/ai4.png" alt="avatar">
</div>
</div>
<input hidden type="file" id="group_avatar_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
</label>
</div>
<div name="GroupStragegyAndOrder" id="rm_group_buttons" class="fontsize80p flex-container paddingLeftRight5 flex2">
<div class="">
<div class="flex-container flexnowrap width100p whitespacenowrap">
<span data-i18n="Group reply strategy">Group reply strategy</span>
<a href="https://docs.sillytavern.app/usage/core-concepts/groupchats/" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</div>
<label class="checkbox_label flexnowrap whitespacenowrap">
<input type="radio" name="rm_group_activation_strategy" value="0" />
<span data-i18n="Natural order">Natural order</span>
</label>
<label class="checkbox_label flexnowrap whitespacenowrap">
<input type="radio" name="rm_group_activation_strategy" value="1" />
<span data-i18n="List order">List order</span>
</label>
</div>
<div class="">
<label class="checkbox_label whitespacenowrap">
<input id="rm_group_allow_self_responses" type="checkbox" />
<span data-i18n="Allow self responses">Allow self responses</span>
</label>
<label id="rm_group_automode_label" class="checkbox_label whitespacenowrap">
<input id="rm_group_automode" type="checkbox" />
<span data-i18n="Auto Mode">Auto Mode</span>
</label>
</div>
</div>
<div id="GroupFavDelOkBack" class="flex-container flexGap5 spaceEvenly flex1">
<div id="rm_button_back_from_group" class="heightFitContent margin0 menu_button fa-solid fa-left-long"></div>
<div id="rm_group_scenario" class="heightFitContent margin0 menu_button fa-solid fa-scroll" title="Set a group chat scenario"></div>
<div id="group_favorite_button" class="heightFitContent margin0 menu_button fa-solid fa-star" title="Add to Favorites"></div>
<input id="rm_group_fav" type="hidden" />
<div id="rm_group_submit" class="heightFitContent margin0 menu_button fa-solid fa-check" title="Create"></div>
<div id="rm_group_restore_avatar" class="heightFitContent margin0 menu_button fa-solid fa-images" title="Restore collage avatar"></div>
<div id="rm_group_delete" class="heightFitContent margin0 menu_button fa-solid fa-trash-can" title="Delete"></div>
</div>
</div>
</div>
</div>
</div>
<div class="inline-drawer wide100p flexFlowColumn">
<div id="groupCurrentMemberListToggle" class="inline-drawer-toggle inline-drawer-header">
<span data-i18n="Current Members">Current Members</span>
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div>
<div class="inline-drawer-content">
<div name="Current Group Members" class="flex-container flexFlowColumn overflowYAuto flex1">
<div id="rm_group_members" class="overflowYAuto flex-container"></div>
</div>
</div>
</div>
<div class="inline-drawer wide100p flexFlowColumn">
<div id="groupAddMemberListToggle" class="inline-drawer-toggle inline-drawer-header">
<span data-i18n="Add Members">Add Members</span>
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div>
<div class="inline-drawer-content">
<div name="Unadded Char List" class="flex-container flexFlowColumn overflowYAuto flex1">
<div id="rm_group_add_members_header">
<input id="rm_group_filter" class="text_pole margin0" type="search" placeholder="Filter..." maxlength="100" />
<div id="group_fav_filter" class="menu_button fa-solid fa-ranking-star margin0" title="Show only favorites"></div>
</div>
<div id="rm_group_add_members" class="overflowYAuto flex-container"></div>
</div>
</div>
</div>
</div>
<div id="rm_character_import" class="right_menu" style="display: none;">
<form id="form_import" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<input multiple type="file" id="character_import_file" accept=".json, image/png, image/webp" name="avatar">
<input id="character_import_file_type" name="file_type" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
</form>
</div>
<div name="Character List Panel" id="rm_characters_block" class="right_menu">
<div id="charListFixedTop">
<form id="form_character_search_form" action="javascript:void(null);">
<div id="rm_button_create" title="Create New Character" class="menu_button fa-solid fa-user-plus "></div>
<div id="character_import_button" title="Import Character from File" class="menu_button fa-solid fa-file-arrow-up faSmallFontSquareFix"></div>
<div id="rm_button_group_chats" title="Create New Chat Group" class="menu_button fa-solid fa-users-gear "></div>
<input id="character_search_bar" class="text_pole width100p" type="search" placeholder="Search..." maxlength="50" />
<select id="character_sort_order" title="Characters sorting order">
<option data-field="name" data-order="asc">A-Z</option>
<option data-field="name" data-order="desc">Z-A</option>
<option data-field="date_added" data-order="desc">Newest</option>
<option data-field="date_added" data-order="asc">Oldest</option>
<option data-field="fav" data-order="desc" data-rule="boolean">Favorites</option>
<option data-field="date_last_chat" data-order="desc">Recent</option>
<option data-field="chat_size" data-order="desc">Most chats</option>
<option data-field="chat_size" data-order="asc">Least chats</option>
</select>
</form>
<div class="rm_tag_controls">
<div id="rm_tag_filter" class="tags"></div>
</div>
</div>
<div id="rm_print_characters_block"></div>
</div>
<!-- only displays after creating/deleting a character/group -->
<div id="rm_info_block" class="right_menu">
<div id="rm_info_panel">
<div id="rm_info_avatar"></div>
<div id="rm_info_text"></div>
<div id="rm_info_button" class="menu_button">Back</div>
</div>
</div>
</nav>
</div>
</div>
<!-- various fullscreen popups -->
<div id="shadow_popup">
<div id="dialogue_popup">
<div id="dialogue_popup_holder">
<div id="dialogue_popup_text">
<h3>text</h3>
</div>
<input id="dialogue_popup_input" class="text_pole" type="text" />
<div id="dialogue_popup_controls">
<div id="dialogue_popup_ok" class="menu_button">Delete</div>
<div id="dialogue_popup_cancel" class="menu_button">Cancel</div>
</div>
</div>
</div>
</div>
<div id="character_popup" class="flex-container flexFlowColumn flexNoGap">
<div id="character_popup_text">
<h3 id="character_popup_text_h3"></h3> <span data-i18n="Advanced Defininitions">- Advanced
Defininitions</span>
</div>
<hr class="margin-bot-10px">
<div id="character_cross" class="fa-solid fa-circle-xmark"></div>
<div class="inline-drawer">
<div class="inline-drawer-toggle inline-drawer-header">
<h4>
AI Prompt Overrides
<small>(Affects the generation)</small>
</h4>
<div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
</div>
<div class="inline-drawer-content">
<div>
<h4>System Prompt</h4>
<textarea id="system_prompt_textarea" name="system_prompt" placeholder="(Overrides the main prompt for Chat Completion and/or system prompt for Instruct Mode if not empty. Use {{original}} macro to insert the original prompt.)" form="form_create" class="text_pole" autocomplete="off" rows="3" maxlength="20000"></textarea>
</div>
<div>
<h4>Post History Instructions</h4>
<textarea id="post_history_instructions_textarea" name="post_history_instructions" placeholder="(Overrides the default jailbreak for Chat Completion if not empty. Use {{original}} macro to insert the original jailbreak.)" form="form_create" class="text_pole" autocomplete="off" rows="3" maxlength="20000"></textarea>
</div>
</div>
</div>
<div class="inline-drawer">
<div class="inline-drawer-toggle inline-drawer-header">
<h4>
Creator's Metadata
<small>(Not sent with the AI Prompt)</small>
</h4>
<div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
</div>
<div class="inline-drawer-content">
<div>
<h4>Creator's Name</h4>
<textarea id="creator_textarea" name="creator" placeholder="(Botmaker's name / Contact info)" form="form_create" class="text_pole" autocomplete="off" rows="1" maxlength="2000"></textarea>
</div>
<div>
<h4>Creator's Notes</h4>
<textarea id="creator_notes_textarea" name="creator_notes" placeholder="(Displays in the characters list. Describe the bot to the user, list the chat models it has been tested on, and any other useful tips)" form="form_create" class="text_pole" autocomplete="off" rows="2" maxlength="20000"></textarea>
</div>
<div>
<h4>Creators's Tags</h4>
<textarea id="tags_textarea" name="tags" placeholder="(List of freeform comma-separated tags)" form="form_create" class="text_pole" autocomplete="off" rows="1" maxlength="2000"></textarea>
</div>
<div>
<h4>Character Version</h4>
<textarea id="character_version_textarea" name="character_version" placeholder="(Optional string to track character versions)" form="form_create" class="text_pole" autocomplete="off" rows="1" maxlength="2000"></textarea>
</div>
</div>
</div>
<div id="personality_div">
<h4>
<span data-i18n="Personality summary">Personality summary</span>
<a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#personality-summary" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
</h4>
<textarea id="personality_textarea" name="personality" placeholder="(A brief description of the personality)" form="form_create" class="text_pole" autocomplete="off" rows="1" maxlength="20000"></textarea>
</div>
<div id="scenario_div">
<h4>
<span data-i18n="Scenario">Scenario</span>
<a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#scenario" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</h4>
<textarea id="scenario_pole" name="scenario" placeholder="(Circumstances and context of the interaction)" class="text_pole" maxlength="20000" value="" autocomplete="off" form="form_create" rows="1"></textarea>
</div>
<div id="talkativeness_div">
<h4><span data-i18n="Talkativeness">Talkativeness</span></h4>
<h5>How often the character speaks in &nbsp;<span class="warning">group chats!</span>
</h5>
<input id="talkativeness_slider" name="talkativeness" type="range" min="0" max="1" step="0.05" value="0.5" form="form_create">
<div id="talkativeness_hint">
<span>Shy</span>
<span>Normal</span>
<span>Chatty</span>
</div>
</div>
<hr>
<div id="mes_example_div" class="flex-container flexFlowColumn">
<div>
<h4><span data-i18n="Examples of dialogue">Examples of dialogue</span></h4>
<h5>Important to set the character's writing style. <a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#examples-of-dialogue" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
</div>
<textarea id="mes_example_textarea" class="flexGrow" name="mes_example" placeholder="(Examples of chat dialog. Begin each example with <start> on a new line.)" form="form_create" maxlength="20000" rows="6"></textarea>
</div>
<div id="character_popup_ok" class="menu_button">Save</div>
</div>
<div id="shadow_select_chat_popup">
<div id="select_chat_popup">
<div id="select_chat_import"> <!-- import chat popup header -->
<div id="chat_import_button" class="fa-solid fa-file-arrow-up menu_button"></div>
<div id="selectChatPopupHeaderText" class="TxtLrgBoldCenter">
<span id="ChatHistoryCharName"></span>
<br>
<span data-i18n="Chat History">Chat History</span>
<a href="https://docs.sillytavern.app/usage/core-concepts/chatfilemanagement/#chat-import" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
</div>
<form id="form_import_chat" action="javascript:void(null);" method="post" enctype="multipart/form-data" style="display: none;">
<input type="file" id="chat_import_file" accept=".json, .jsonl" name="avatar">
<input id="chat_import_file_type" name="file_type" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
<input id="chat_import_avatar_url" name="avatar_url" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
<input id="chat_import_character_name" name="character_name" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
</form>
<div id="select_chat_cross" class="fa-solid fa-circle-xmark" alt="Close Past Chat Popup"></div>
</div>
<div id="select_chat_div">
</div>
<div id="load_select_chat_div">
<div class="fa-solid fa-hourglass fa-spin"></div>
</div>
</div>
</div>
<!-- templates for JS to reuse when needed -->
<div id="context_editor_template" class="template_element">
<div class="context_editor">
<h3>Context Template Editor</h3>
<h4 class="template_name"></h4>
<div class="inline-drawer wide100p">
<div class="inline-drawer-toggle inline-drawer-header">
Substitution Parameters
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div>
<div class="inline-drawer-content">
<i>Click to copy.</i>
<ul class="template_parameters_list justifyLeft margin0">
<li><code>{{char}}</code> - current character name</li>
<li><code>{{user}}</code> - current user name</li>
<li><code>{{description}}</code> - character description</li>
<li><code>{{scenario}}</code> - character or group scenario</li>
<li><code>{{personality}}</code> - character personality</li>
<li><code>{{mesExamples}}</code> - message examples</li>
<li><code>{{wiBeforeCharacter}}</code> - activated World Info entries (Before Char)</li>
<li><code>{{wiAfterCharacter}}</code> - activated World Info entries (After Char)</li>
<li><code>{{instructSystemPrompt}}</code> - system prompt (Instruct mode only)</li>
</ul>
</div>
</div>
<div>
<div class="margin-bot-10px wide100p justifyLeft">
Story String Template
</div>
<textarea class="wide100p textarea_compact story_string_template" rows="8"></textarea>
<div>
<small>Lines containing parameters resolving to an empty value will be removed from the template
string.</small>
</div>
</div>
<div>
<div class="title_restorable">
<span>Chat Injections</span>
<div title="Add chat injection" class="menu_button chat_injection_add">
<div class="fa-solid fa-plus"></div>
</div>
</div>
<div class="chat_injections_list flex-container flexFlowColumn flexGap5 wide100p"></div>
</div>
</div>
</div>
<div id="chat_injection_template" class="template_element">
<div class="chat_injection flex-container wide100p flexGap5 flexnowrap">
<input class="chat_injection_text textarea_compact text_pole flex2" placeholder="Injection text (supports parameters)" type="text" />
<input class="chat_injection_depth textarea_compact text_pole flex1" placeholder="Injection depth" type="number" min="0" max="100" />
<div title="Remove injection" class="menu_button fa-solid fa-xmark chat_injection_remove"></div>
</div>
</div>
<div id="scenario_override_template" class="template_element">
<div class="scenario_override range-block flexFlowColumn flex-container">
<div class="range-block-title title_restorable">
<h3><span data-i18n="Chat Scenario Override">Chat Scenario Override</span></h3>
<div title="Remove" class="menu_button fa-solid fa-trash-can remove_scenario_override"></div>
</div>
<div class="range-block-counter justifyLeft flex-container flexFlowColumn">
<strong>Unique to this chat.</strong>
<span data-group="true">All group members will use the following scenario text instead of what is specified in their character cards.</span>
<span data-character="true">The following scenario text will be used instead of the value set in the character card.</span>
Bookmarks inherit the scenario override from their parent, and can be changed individually after that.
</div>
<div class="range-block-range wide100p">
<textarea class="wide100p chat_scenario" class="text_pole" rows="15" placeholder="Type here..."></textarea>
</div>
</div>
</div>
<div id="character_world_template" class="template_element">
<div class="character_world range-block flexFlowColumn flex-container">
<div class="range-block-title">
<h3>
Select a World Info file for <span class="character_name"></span>:
</h3>
</div>
<div class="range-block-counter justifyLeft flex-container flexFlowColumn margin-bot-10px">
A selected World Info / Lorebook will be bound to this character.
When generating an AI reply, it will be combined with the entries from a global World Info / Lorebook selector.
Exporting a character would also export the selected World Info file embedded in the JSON data.
</div>
<div class="range-block-range wide100p">
<select class="character_world_info_selector">
<option value="">--- None ---</option>
</select>
</div>
</div>
</div>
<div id="past_chat_template" class="template_element">
<div class="select_chat_block_wrapper">
<div class="select_chat_block" file_name="">
<div class="avatar">
<img src="">
</div>
<div id="select_chat_name_wrapper">
<div class="select_chat_block_filename select_chat_block_filename_item"></div>
<div class="select_chat_info flex-container">
<div class="chat_messages_date"></div>
<div class="chat_messages_num select_chat_block_filename_item"></div>
<div class="chat_file_size select_chat_block_filename_item"></div>
</div>
</div>
<div class="select_chat_block_mes"></div>
</div>
<div class="flex-container height100pSpaceEvenly">
<div title="Rename chat file" class="renameChatButton fa-solid fa-pen"></div>
<div title="Export JSONL chat file" data-format="jsonl" class="exportRawChatButton fa-solid fa-file-export"></div>
<div title="Download chat as plain text document" data-format="txt" class="exportChatButton fa-solid fa-file-lines"></div>
<div title="Delete chat file" file_name="" class="PastChat_cross fa-solid fa-circle-xmark"></div>
</div>
</div>
</div>
<div id="tag_view_template" class="template_element">
<div class="tag_view_item">
<div class="tagColorPickerHolder"></div>
<div class="tag_view_name" contenteditable="true"></div>
<div class="tag_view_counter"><span class="tag_view_counter_value"></span>&nbsp;entries</div>
<div title="Delete tag" class="tag_delete fa-solid fa-trash-can right_menu_button"></div>
</div>
</div>
<div id="entry_edit_template" class="template_element">
<div class="world_entry">
<form class="world_entry_form">
<div class="inline-drawer wide100p">
<div class="inline-drawer-toggle inline-drawer-header gap5px">
<span class="drag-handle">&#9776;</span>
<div class="gap5px world_entry_thin_controls wide100p">
<div class="world_entry_form_control">
<label for="key">
<small>
<span data-i18n="Keywords">
Keywords
</span>
</small>
<small class="displayNone">
<span data-i18n="Separate with commas">
Separate with commas
</span>
</small>
</label>
<textarea class="text_pole keyprimarytextpole" name="key" rows="1" placeholder="Separate with commas" maxlength="1000"></textarea>
</div>
<div class="world_entry_form_control keysecondary">
<label for="keysecondary">
<small>
<span data-i18n="Secondary Required Keywords">
Secondary Required Keywords
</span>
</small>
<small class="displayNone">
<span data-i18n="Separate with commas">
Separate with commas
</span>
</small>
</label>
<textarea class="text_pole keysecondarytextpole" name="keysecondary" rows="1" placeholder="Separate with commas" maxlength="1000"></textarea>
</div>
</div>
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div>
<div class="inline-drawer-content flex-container">
<div class="WIEntryContentAndMemo flex-container">
<div class="world_entry_thin_controls flex2">
<div class="world_entry_form_control">
<label for="content ">
<small>
<span data-i18n="Content">
Content
</span>
</small>
<small class="displayNone">
<span data-i18n="What this keyword should mean to the AI">
What this keyword should mean to the AI, sent verbatim
</span>
</small>
</label>
<textarea class="text_pole" name="content" rows="4" placeholder="What this keyword should mean to the AI, sent verbatim"></textarea>
</div>
</div>
<div class="world_entry_thin_controls commentContainer">
<div class="world_entry_form_control">
<label for="comment">
<small>
<span data-i18n="Memo/Note">
Memo/Note
</span>
</small>
<small class="displayNone">
<span data-i18n="Not sent to AI">
Not sent to AI
</span>
</small>
</label>
<textarea class="text_pole" rows="4" name="comment" maxlength="2000" placeholder="Not sent to AI"></textarea>
</div>
</div>
</div>
<div name="WIEntryBottomControls" class="flex-container flex1 justifySpaceBetween world_entry_form_horizontal">
<div class="flex-container flexFlowColumn flexNoGap wi-enter-footer-text ">
<label class="checkbox flex-container">
<input type="checkbox" name="constant" />
<span data-i18n="Constant">Constant</span>
</label>
<label class="checkbox flex-container">
<input type="checkbox" name="selective" />
<span data-i18n="Selective">Selective</span>
</label>
<label class="checkbox flex-container">
<input type="checkbox" name="addMemo">
<span data-i18n="Add Memo">Add Memo</span>
</label>
</div>
<div class="world_entry_form_control world_entry_form_radios wi-enter-footer-text ">
<small>Placement</small>
<div>
<label><input type="radio" name="position" value="0">
<span data-i18n="Before Char">Before Char</span>
</label>
</div>
<div>
<label><input type="radio" name="position" value="1">
<span data-i18n="After Char">After Char</span>
</label>
</div>
<div>
<label><input type="radio" name="position" value="2">
<span data-i18n="Author's Note">Author's Note Top</span>
</label>
</div>
<div>
<label><input type="radio" name="position" value="3">
<span data-i18n="Author's Note">Author's Note Bottom</span>
</label>
</div>
</div>
<div class="world_entry_form_control wi-enter-footer-text flex-container flexNoGap ">
Insertion Order
<input class="text_pole wideMax100px" type="number" name="order" placeholder="" />
</div>
<div class="flex-container flexFlowColumn flexNoGap wi-enter-footer-text ">
<div class="world_entry_form_uid">
UID:
&nbsp;
<span class="world_entry_form_uid_value"></span>
</div>
<div class="world_entry_form_tokens">
Tokens:
&nbsp;
<span class="world_entry_form_token_counter">0</span>
</div>
</div>
<div class="wi-enter-footer-text">
<label class="checkbox flex-container alignitemscenter">
<input type="checkbox" name="disable" />
<span data-i18n="Disable">Disable</span>
</label>
<label class="checkbox flex-container alignitemscenter">
<input type="checkbox" name="exclude_recursion" />
<span data-i18n="Exclude from recursion">Exclude from recursion</span>
</label>
</div>
<input class="menu_button delete_entry_button" type="submit" value="Delete Entry" />
</div>
</div>
</div>
</form>
</div>
</div>
<div id="character_template" class="template_element">
<div class="character_select flex-container wide100p alignitemsflexstart" chid="" id="">
<div class="avatar" title="">
<img src="">
</div>
<div class="flex-container wide100pLess70px">
<div class="ch_name"></div>
<i class="ch_fav_icon fa-solid fa-star"></i>
<input class="ch_fav" value="" hidden />
<div class="ch_description"></div>
<div class="tags tags_inline"></div>
</div>
</div>
</div>
<div id="tag_template" class="template_element">
<span id="" class="tag">
<span class="tag_name"></span>
<i class="fa-solid fa-circle-xmark tag_remove"></i>
</span>
</div>
<div id="openai_logit_bias_template" class="template_element">
<div class="openai_logit_bias_form">
<input class="openai_logit_bias_text text_pole" placeholder="type here..." />
<input class="openai_logit_bias_value text_pole" type="number" min="-100" value="0" max="100" />
<i class="menu_button fa-solid fa-xmark openai_logit_bias_remove"></i>
</div>
</div>
<div id="message_template" class="template_element">
<div class="mes" mesid="" ch_name="" is_user="" is_system="" bookmark_link="">
<div class="for_checkbox"></div><input type="checkbox" class="del_checkbox">
<div class="mesAvatarWrapper">
<div class="avatar">
<img src="">
</div>
<div class="mes_timer"></div>
</div>
<div class="swipe_left fa-solid fa-chevron-left"></div>
<div class="mes_block">
<div class="ch_name flex-container justifySpaceBetween">
<div class="flex-container flex1 alignitemscenter">
<span class="name_text">${characterName}</span>
<small class="timestamp"></small>
</div>
<div class="mes_buttons">
<div class="extraMesButtonsHint fa-solid fa-ellipsis"></div>
<div class="extraMesButtons">
<div title="Translate message" class="mes_translate fa-solid fa-language"></div>
<div title="Generate Image" class="sd_message_gen fa-solid fa-paintbrush"></div>
<div title="Narrate" class="mes_narrate fa-solid fa-bullhorn"></div>
<div title="Prompt" class="mes_prompt fa-solid fa-square-poll-horizontal "></div>
<div title="Copy" class="mes_copy fa-solid fa-copy "></div>
</div>
<div title="Open bookmark chat" class="mes_bookmark fa-solid fa-bookmark"></div>
<div title="Edit" class="mes_edit fa-solid fa-pencil "></div>
</div>
<div class="mes_edit_buttons">
<div class="mes_edit_done menu_button fa-solid fa-check" title="Confirm"></div>
<div class="mes_edit_copy menu_button fa-solid fa-copy" title="Copy this message"></div>
<div class="mes_edit_delete menu_button fa-solid fa-scissors" title="Delete this message">
</div>
<div class="mes_edit_up menu_button fa-solid fa-chevron-up " title="Move message up"></div>
<div class="mes_edit_down menu_button fa-solid fa-chevron-down" title="Move message down">
</div>
<div class="mes_edit_cancel menu_button fa-solid fa-xmark" title="Cancel"></div>
</div>
</div>
<div class=mes_text></div>
<div class="mes_img_container">
<div class="mes_img_controls">
<div title="Enlarge" class="right_menu_button fa-lg fa-solid fa-magnifying-glass mes_img_enlarge"></div>
<div title="Delete" class="right_menu_button fa-lg fa-solid fa-trash-can mes_img_delete"></div>
</div>
<img class="mes_img" src="" />
</div>
<div class="mes_bias"></div>
</div>
<div class="swipe_right fa-solid fa-chevron-right">
<div class="swipes-counter"></div>
</div>
</div>
</div>
<div id="group_avatars_template" class="template_element">
<div class="avatar avatar_collage collage_1">
<img alt="img1" class="img_1" src="">
</div>
<div class="avatar avatar_collage collage_2">
<img alt="img1" class="img_1" src="">
<img alt="img2" class="img_2" src="">
</div>
<div class="avatar avatar_collage collage_3">
<img alt="img1" class="img_1" src="">
<img alt="img2" class="img_2" src="">
<img alt="img3" class="img_3" src="">
</div>
<div class="avatar avatar_collage collage_4">
<img alt="img1" class="img_1" src="">
<img alt="img2" class="img_2" src="">
<img alt="img3" class="img_3" src="">
<img alt="img4" class="img_4" src="">
</div>
</div>
<div id="group_member_template" class="template_element">
<div class="group_member">
<div class="avatar">
<img alt="Avatar" src="" />
</div>
<div class="ch_name"></div>
<div class="group_member_icon">
<div title="Temporarily disable automatic replies from this character" data-action="disable" class="right_menu_button fa-solid fa-lg fa-comment-slash"></div>
<div title="Enable automatic replies from this character" data-action="enable" class="right_menu_button fa-solid fa-lg fa-comment-slash"></div>
<div title="Trigger a message from this character" data-action="speak" class="right_menu_button fa-solid fa-lg fa-comment"></div>
<div class="flexFlowColumn flex-container">
<div title="Move up" data-action="up" class="right_menu_button fa-solid fa-chevron-up"></div>
<div title="Move down" data-action="down" class="right_menu_button fa-solid fa-chevron-down"></div>
</div>
<div title="View character card" data-action="view" class="right_menu_button fa-solid fa-xl fa-image-portrait"></div>
<div title="Remove from group" data-action="remove" class="right_menu_button fa-solid fa-2xl fa-xmark">
</div>
<div title="Add to group" data-action="add" class="right_menu_button fa-solid fa-2xl fa-plus"></div>
</div>
</div>
</div>
<div id="group_list_template" class="template_element">
<div class="group_select flex-container wide100p alignitemsflexstart">
<div class="avatar">
<img src="">
</div>
<div class="flex-container wide100pLess70px gap5px">
<div class="ch_name"></div>
<i class='group_fav_icon fa-solid fa-star'></i>
<input class="ch_fav" value="" hidden />
<div class="tags tags_inline"></div>
</div>
</div>
</div>
<div id="hotswap_template" class="template_element">
<div class="hotswapAvatar">
<img src="/img/ai4.png">
</div>
</div>
<div id="alternate_greetings_template" class="template_element">
<div class="alternate_grettings flexFlowColumn flex-container">
<div class="title_restorable">
<h3><span data-i18n="Alternate Greetings">Alternate Greetings</span></h3>
<div title="Add" class="menu_button fa-solid fa-plus add_alternate_greeting"></div>
</div>
<div class="justifyLeft" data-i18n="Alternate Greetings Subtitle">
These will be displayed as swipes on the first message when starting a new chat.
Group members can select one of them to initiate the conversation.
</div>
<hr>
<div class="alternate_greetings_list flexFlowColumn flex-container wide100p">
<strong class="alternate_grettings_hint margin-bot-10px" data-i18n="Alternate Greetings Hint">
Click the <i class="fa-solid fa-plus"></i> button to get started!
</strong>
</div>
</div>
</div>
<div id="alternate_greeting_form_template" class="template_element">
<div class="alternate_greeting">
<div class="title_restorable">
<strong>Alternate Greeting #<span class="greeting_index"></span></strong>
<div class="menu_button fa-solid fa-trash-alt delete_alternate_greeting"></div>
</div>
<textarea name="alternate_greetings" placeholder="(This will be the first message from the character that starts every chat)" class="text_pole textarea_compact alternate_greeting_text" maxlength="20000" value="" autocomplete="off" rows="4"></textarea>
</div>
</div>
<!-- chat and input bar -->
<div id="typing_indicator_template" class="template_element">
<div class="typing_indicator"><span class="typing_indicator_name">CHAR</span> is typing</div>
</div>
<div id="movingDivs"></div>
<div id="sheld">
<div id="sheldheader" class="fa-solid fa-grip drag-grabber"></div>
<div id="chat">
</div>
<div id="form_sheld">
<div id="dialogue_del_mes">
<div id="dialogue_del_mes_ok" class="menu_button">Delete</div>
<div id="dialogue_del_mes_cancel" class="menu_button">Cancel</div>
</div>
<form id="send_form" class="no-connection">
<div id="options_button" class="fa-solid fa-bars"></div>
<textarea id="send_textarea" placeholder="Not connected to API!" name="text"></textarea>
<div id="send_but_sheld">
<div id="mes_stop" title="Abort request" class="mes_stop">
<i class="fa-solid fa-circle-stop"></i>
</div>
<div id="send_but" class="fa-solid fa-paper-plane" title="Send a message"></div>
</div>
</form>
</div>
</div>
<!-- popups live outside sheld to avoid blur conflicts -->
<div id="options" class="font-family-reset" style="display: none;">
<div class="options-content">
<a id="option_back_to_main">
<i class="fa-lg fa-solid fa-left-long"></i>
<span data-i18n="Back to parent chat">Back to parent chat</span>
</a>
<a id="option_new_bookmark">
<i class="fa-lg fa-solid fa-bookmark"></i>
<span data-i18n="Save bookmark">Save bookmark</span>
</a>
<a id="option_convert_to_group">
<i class="fa-lg fa-solid fa-people-arrows"></i>
<span data-i18n="Convert to group">Convert to group</span>
</a>
<a id="option_start_new_chat">
<i class="fa-lg fa-solid fa-comments"></i>
<span data-i18n="Start new chat">Start new chat</span>
</a>
<a id="option_select_chat">
<i class="fa-lg fa-solid fa-address-book"></i>
<span data-i18n="View past chats">View past chats</span>
</a>
<hr>
<a id="option_delete_mes">
<i class="fa-lg fa-solid fa-trash-can"></i>
<span data-i18n="Delete messages">Delete messages</span>
</a>
<a id="option_impersonate" title="Ask AI to write your message for you">
<i class="fa-lg fa-solid fa-user-secret"></i>
<span data-i18n="Impersonate">Impersonate</span>
</a>
<a id="option_regenerate">
<i class="fa-lg fa-solid fa-repeat"></i>
<span data-i18n="Regenerate">Regenerate</span>
</a>
</div>
</div>
<div id="export_format_popup" class="list-group">
<div class="export_format list-group-item" data-format="png">PNG</div>
<div class="export_format list-group-item" data-format="json">JSON</div>
<div class="export_format list-group-item" data-format="webp">WEBP</div>
</div>
<div id="avatar_zoom_popup">
<div id="avatar_zoom_popupheader" class="fa-solid fa-grip drag-grabber"></div>
<img id="zoomed_avatar" src="">
</div>
<div id="rawPromptPopup" class="list-group">
<div id="rawPromptWrapper" class="tokenItemizingSubclass"></div>
</div>
<div id="user_avatar_template" class="template_element">
<div class="avatar-container">
<div imgfile="" class="avatar">
<img src="" alt="User Avatar">
</div>
<div class="avatar-buttons avatar-buttons-top">
<button class="menu_button bind_user_name" title="Bind user name to that avatar">
<i class="fa-solid fa-user-edit"></i>
</button>
<button class="menu_button set_default_persona" title="Select this as default persona for the new chats.">
<i class="fa-solid fa-crown"></i>
</button>
</div>
<div class="avatar-buttons avatar-buttons-bottom">
<button class="menu_button set_user_info" title="Under construction">
<i class="fa-solid fa-circle-user"></i>
</button>
<button class="menu_button delete_avatar" title="Delete persona">
<i class="fa-solid fa-trash-alt"></i>
</button>
</div>
</div>
</div>
<script>
// Configure toast library:
toastr.options.escapeHtml = true; // Prevent raw HTML inserts
toastr.options.timeOut = 4000; // How long the toast will display without user interaction
toastr.options.extendedTimeOut = 10000; // How long the toast will display after a user hovers over it
toastr.options.progressBar = true; // Visually indicate how long before a toast expires.
toastr.options.closeButton = true; // enable a close button
</script>
<script>
const documentHeight = () => {
const doc = document.documentElement
doc.style.setProperty('--doc-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', documentHeight)
documentHeight()
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink