rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2024-12-13 01:46:57 +01:00
Code Issues Packages Projects Releases Wiki Activity
2411006fdb
SillyTavern/public/index.html
Brian Dashore 2411006fdb
World Info: Add insertion order at depth (#1174) 
Depth previously injected entries randomly. This is not ideal for
world info architectures that rely on insertion order to function
properly.

Redo depth injection to have its own parameter and redo how it's
handled in generate.

Signed-off-by: kingbri <bdashore3@proton.me>
2023-09-24 14:41:56 +03:00

4590 lines
325 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">
<meta name="robots" content="noindex, nofollow" />
<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 href="css/select2.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="lib/jquery-3.5.1.min.js"></script>
<script src="lib/jquery-ui.min.js"></script>
<script src="lib/jquery.transit.min.js"></script>
<script src="lib/jquery-cookie-1.4.1.min.js"></script>
<script src="lib/jquery.ui.touch-punch.min.js"></script>
<script src="lib/showdown.min.js"></script>
<script src="lib/showdown-katex.min.js"></script>
<script src="lib/popper.js"></script>
<script src="lib/purify.min.js"></script>
<script src="lib/highlight.min.js"></script>
<script src="lib/moment.min.js"></script>
<script src="lib/cropper.min.js"></script>
<script src="lib/jquery-cropper.min.js"></script>
<script src="lib/toastr.min.js"></script>
<script src="lib/fuse.js"></script>
<script src="lib/select2.min.js"></script>
<script src="lib/select2-search-placeholder.js"></script>
<script src="lib/seedrandom.min.js"></script>
<script src="lib/droll.js"></script>
<script src="lib/localforage.min.js"></script>
<script src="lib/handlebars.js"></script>
<script src="lib/pagination.js"></script>
<script src="lib/toolcool-color-picker.js"></script>
<script src="lib/svg-inject.js"></script>
<script type="module" src="lib/structured-clone/monkey-patch.js"></script>
<script type="module" src="lib/swiped-events.js"></script>
<script type="module" src="lib/eventemitter.js"></script>
<script type="module" src="scripts/power-user.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/st-tailwind.css">
<link rel="stylesheet" type="text/css" href="css/tags.css">
<link rel="stylesheet" type="text/css" href="css/rm-groups.css">
<link rel="stylesheet" type="text/css" href="css/group-avatars.css">
<link rel="stylesheet" type="text/css" href="css/toggle-dependent.css">
<link rel="stylesheet" type="text/css" href="css/world-info.css">
<link rel="stylesheet" type="text/css" href="css/extensions-panel.css">
<link rel="stylesheet" type="text/css" href="css/select2-overrides.css">
<link rel="stylesheet" type="text/css" href="css/mobile-styles.css">
<link rel="stylesheet" href="css/bg_load.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script type="module" src="scripts/i18n.js"></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/mancer-settings.js"></script>
<script type="module" src="scripts/bookmarks.js"></script>
<script type="module" src="scripts/horde.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/extensions.js"></script>
<script type="module" src="scripts/authors-note.js"></script>
<script type="module" src="scripts/preset-manager.js"></script>
<script type="module" src="scripts/filters.js"></script>
<script type="module" src="scripts/personas.js"></script>
<script type="module" src="scripts/server-history.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" data-i18n="[title]AI Response Configuration" 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" data-i18n="[title]AI Configuration panel will stay open" 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 wide100p editable-slider-notification">
Click slider numbers to input manually.
</div>
<div class="scrollableInner">
<div class="flex-container" id="ai_response_configuration">
<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>
<div class="preset_buttons">
<select id="settings_perset" data-preset-manager-for="kobold">
<option value="gui" data-i18n="guikoboldaisettings">GUI KoboldAI Settings</option>
</select>
<input type="file" hidden data-preset-manager-file="kobold" accept=".json, .settings">
<i data-newbie-hidden data-preset-manager-update="kobold" class="menu_button fa-solid fa-save" title="Update current preset" data-i18n="[title]Update current preset"></i>
<i data-newbie-hidden data-preset-manager-new="kobold" class="menu_button fa-solid fa-plus" title="Create new preset" data-i18n="[title]Create new preset"></i>
<i data-newbie-hidden data-preset-manager-import="kobold" class="menu_button fa-solid fa-file-import" title="Import preset" data-i18n="[title]Import preset"></i>
<i data-newbie-hidden data-preset-manager-export="kobold" class="menu_button fa-solid fa-file-export" title="Export preset" data-i18n="[title]Export preset"></i>
<i data-newbie-hidden data-preset-manager-delete="kobold" class="menu_button fa-solid fa-trash-can" title="Delete the preset" data-i18n="[title]Delete the preset"></i>
</div>
</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>
<div class="preset_buttons">
<select id="settings_perset_novel" data-preset-manager-for="novel">
<option value="gui" data-i18n="default">Default</option>
</select>
<input type="file" hidden data-preset-manager-file="novel" accept=".json, .settings">
<i data-newbie-hidden data-preset-manager-update="novel" class="menu_button fa-solid fa-save" title="Update current preset" data-i18n="[title]Update current preset"></i>
<i data-newbie-hidden data-preset-manager-new="novel" class="menu_button fa-solid fa-plus" title="Create new preset" data-i18n="[title]Create new preset"></i>
<i data-newbie-hidden data-preset-manager-import="novel" class="menu_button fa-solid fa-file-import" title="Import preset" data-i18n="[title]Import preset"></i>
<i data-newbie-hidden data-preset-manager-export="novel" class="menu_button fa-solid fa-file-export" title="Export preset" data-i18n="[title]Export preset"></i>
<i data-newbie-hidden data-preset-manager-delete="novel" class="menu_button fa-solid fa-trash-can" title="Delete the preset" data-i18n="[title]Delete the preset"></i>
</div>
</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" data-i18n="[title]Update current preset"></i>
<i id="new_oai_preset" class="menu_button fa-solid fa-plus" title="Create new preset" data-i18n="[title]Create new preset"></i>
<i data-newbie-hidden title="Import preset" id="import_oai_preset" class="menu_button fa-solid fa-file-import" data-i18n="[title]Import preset"></i>
<i data-newbie-hidden title="Export preset" id="export_oai_preset" class="menu_button fa-solid fa-file-export" data-i18n="[title]Export preset"></i>
<i data-newbie-hidden id="delete_oai_preset" class="menu_button fa-solid fa-trash-can" title="Delete the preset" data-i18n="[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 WebUI (ooba/Mancer) presets">Text Gen WebUI (ooba/Mancer) presets</span>
</h3>
<div class="preset_buttons">
<select id="settings_preset_textgenerationwebui" data-preset-manager-for="textgenerationwebui">
</select>
<input type="file" hidden data-preset-manager-file="textgenerationwebui" accept=".json, .settings">
<i data-newbie-hidden data-preset-manager-update="textgenerationwebui" class="menu_button fa-solid fa-save" title="Update current preset" data-i18n="[title]Update current preset"></i>
<i data-newbie-hidden data-preset-manager-new="textgenerationwebui" class="menu_button fa-solid fa-plus" title="Create new preset" data-i18n="[title]Create new preset"></i>
<i data-newbie-hidden data-preset-manager-import="textgenerationwebui" class="menu_button fa-solid fa-file-import" title="Import preset" data-i18n="[title]Import preset"></i>
<i data-newbie-hidden data-preset-manager-export="textgenerationwebui" class="menu_button fa-solid fa-file-export" title="Export preset" data-i18n="[title]Export preset"></i>
<i data-newbie-hidden data-preset-manager-delete="textgenerationwebui" class="menu_button fa-solid fa-trash-can" title="Delete the preset" data-i18n="[title]Delete the preset"></i>
</div>
</div>
<hr>
</div>
<div data-newbie-hidden id="ai_module_block_novel" class="width100p">
<div class="range-block">
<div class="range-block-title justifyLeft" data-i18n="AI Module">
AI Module
</div>
<div class="toggle-description justifyLeft" data-i18n="Changes the style of the generated text.">
Changes the style of the generated text.
</div>
<select id="nai_prefix">
<option value="vanilla" data-i18n="No Module">No Module</option>
<option value="special_instruct" data-i18n="Instruct">Instruct</option>
<option value="special_proseaugmenter" data-i18n="Prose Augmenter">Prose Augmenter</option>
<option value="theme_textadventure" data-i18n="Text Adventure">Text Adventure</option>
</select>
</div>
</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" data-randomization-disabled="true">
<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="4096" step="1">
</div>
<div class="range-block-counter" data-randomization-disabled="true">
<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>
</label>
<div id="max_context_unlocked_warning" class="toggle-description justifyLeft widthUnset">
<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.
Increase only if you know what you're doing.
</span>
</div>
</div>
</div>
<hr>
</div>
<div id="respective-ranges-and-temps" class="width100p">
<div id="range_block">
<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 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.0" 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">
Repetition Penalty
</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 data-newbie-hidden class="range-block">
<div class="range-block-title" data-i18n="rep.pen range">
Repetition Penalty 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="4096" 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>
</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">
<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.50" 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>
<div class="range-block">
<div class="range-block-title" data-i18n="rep.pen">
Repetition Penalty
</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="8" step="0.05">
</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 data-newbie-hidden class="range-block">
<div class="range-block-title" data-i18n="Rep. Pen. Range.">
Repetition Penalty 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="8192" 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 data-newbie-hidden class="range-block">
<div class="range-block-title" data-i18n="Rep. Pen. Slope">
Repetition Penalty 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 data-newbie-hidden class="range-block">
<div class="range-block-title" data-i18n="Rep. Pen. Freq.">
Repetition Penalty Frequency
</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.01">
</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 data-newbie-hidden class="range-block">
<div class="range-block-title" data-i18n="Rep. Pen. Presence">
Repetition Penalty 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.01">
</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 data-newbie-hidden 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="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 data-newbie-hidden class="range-block">
<div class="range-block-title" data-i18n="Phrase Repetition Penalty">
Phrase Repetition Penalty
</div>
<select id="phrase_rep_pen_novel">
<option value="off" data-i18n="Off">Off</option>
<option value="very_light" data-i18n="Very light">Very light</option>
<option value="light" data-i18n="Light">Light</option>
<option value="medium" data-i18n="Medium">Medium</option>
<option value="aggressive" data-i18n="Aggressive">Aggressive</option>
<option value="very_aggressive" data-i18n="Very aggressive">Very aggressive</option>
</select>
</div>
</div>
<div id="range_block_textgenerationwebui">
<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 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">
<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.0" 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">
Repetition Penalty
</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 data-newbie-hidden class="range-block">
<div class="range-block-title" data-i18n="rep.pen range">
Repetition Penalty Range
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="rep_pen_range_textgenerationwebui" name="volume" min="0" max="4096" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="rep_pen_range_textgenerationwebui" id="rep_pen_range_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
<div data-newbie-hidden 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 data-newbie-hidden 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 data-newbie-hidden 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 data-newbie-hidden class="range-block">
<label class="checkbox_label">
<input id="oai_max_context_unlocked" type="checkbox" />
<span data-i18n="Unlocked Context Size">
Unlocked Context Size
</span>
</label>
<div class="toggle-description justifyLeft">
<span data-i18n="Unrestricted maximum value for the context slider">
Unrestricted maximum value for the context size slider. Enable only if you know
what you're doing.
</span>
</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" data-randomization-disabled="true">
<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 data-source="openrouter">
Max prompt cost: <span id="openrouter_max_prompt_cost">Unknown</span>
</div>
<hr>
<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" data-source="openai,claude,windowai,openrouter,ai21,scale,palm">
<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 data-newbie-hidden class="range-block" data-source="openai,openrouter,ai21">
<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 data-newbie-hidden class="range-block" data-source="openai,openrouter,ai21">
<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 data-newbie-hidden class="range-block" data-source="ai21">
<div class="range-block-title" data-i18n="Count Penalty">
Count Penalty
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="count_pen" name="volume" min="0" max="1" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="count_pen" id="count_pen_counter">
select
</div>
</div>
</div>
</div>
<div data-newbie-hidden class="range-block" data-source="claude,openrouter,ai21,palm">
<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 data-newbie-hidden class="range-block" data-source="openai,claude,openrouter,ai21,scale,palm">
<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 class="inline-drawer m-t-1 wide100p">
<div class="inline-drawer-toggle inline-drawer-header">
<b data-i18n="Quick Edit">Quick Prompts Edit</b>
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div>
<div class="inline-drawer-content">
<div class="range-block m-t-1">
<div class="justifyLeft" data-i18n="Main">Main</div>
<div class="wide100p">
<textarea id="main_prompt_quick_edit_textarea" class="text_pole textarea_compact autoSetHeight" rows="6" placeholder="&mdash;" data-pm-prompt="main"></textarea>
</div>
</div>
<div class="range-block m-t-1">
<div class="justifyLeft" data-i18n="NSFW">NSFW</div>
<div class="wide100p">
<textarea id="nsfw_prompt_quick_edit_textarea" class="text_pole textarea_compact autoSetHeight" rows="6" placeholder="&mdash;" data-pm-prompt="nsfw"></textarea>
</div>
</div>
<div class="range-block m-t-1">
<div class="justifyLeft" data-i18n="Jailbreak">Jailbreak</div>
<div class="wide100p">
<textarea id="jailbreak_prompt_quick_edit_textarea" class="text_pole textarea_compact autoSetHeight" rows="6" placeholder="&mdash;" data-pm-prompt="jailbreak"></textarea>
</div>
</div>
<div id="claude_assistant_prefill_block" data-source="claude" class="range-block">
<span id="claude_assistant_prefill_text" data-i18n="Assistant Prefill">Assistant Prefill</span>
<textarea id="claude_assistant_prefill" class="text_pole textarea_compact" name="assistant_prefill autoSetHeight" rows="3" maxlength="5000" data-i18n="[placeholder]Start Claude's answer with..." placeholder="Start Claude's answer with..."></textarea>
</div>
</div>
</div>
<div data-newbie-hidden class="inline-drawer wide100p">
<div class="inline-drawer-toggle inline-drawer-header">
<b data-i18n="Utility Prompts">Utility Prompts</b>
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div>
<div class="inline-drawer-content">
<div class="range-block m-t-1">
<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 autoSetHeight" name="impersonation_prompt" rows="3" placeholder="&mdash;"></textarea>
</div>
</div>
<div class="range-block m-t-1">
<div class="range-block-title openai_restorable" data-i18n="World Info Format Template">
<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" data-i18n="Wraps activated World Info entries before inserting into the prompt.">
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 autoSetHeight" rows="3" placeholder="&mdash;"></textarea>
</div>
</div>
<div class="range-block m-t-1">
<div class="range-block-title openai_restorable" data-i18n="New Chat">
<span>New Chat</span>
<div id="newchat_prompt_restore" title="Restore new chat prompt" class="right_menu_button">
<div class="fa-solid fa-clock-rotate-left"></div>
</div>
</div>
<div class="toggle-description justifyLeft">
<span data-i18n="Set at the beginning of the chat history to indicate that a new chat is about to start.">
Set at the beginning of the chat history to indicate that a new chat is about to start.
</span>
</div>
<div class="wide100p">
<textarea id="newchat_prompt_textarea" class="text_pole textarea_compact autoSetHeight" name="new_chat" rows="3" placeholder="&mdash;"></textarea>
</div>
</div>
<div class="range-block m-t-1">
<div class="range-block-title openai_restorable">
<span data-i18n="New Group Chat">New Group Chat</span>
<div id="newgroupchat_prompt_restore" title="Restore default prompt" data-i18n="[title]Restore new group chat prompt" class="right_menu_button">
<div class="fa-solid fa-clock-rotate-left"></div>
</div>
</div>
<div class="toggle-description justifyLeft">
<span data-i18n="Set at the beginning of the chat history to indicate that a new group chat is about to start.">
Set at the beginning of the chat history to indicate that a new group chat is about to start.
</span>
</div>
<div class="wide100p">
<textarea id="newgroupchat_prompt_textarea" class="text_pole textarea_compact autoSetHeight" name="new_group_chat" rows="3" placeholder="&mdash;"></textarea>
</div>
</div>
<div class="range-block m-t-1">
<div class="range-block-title openai_restorable">
<span data-i18n="New Example Chat">New Example Chat</span>
<div id="newexamplechat_prompt_restore" title="Restore new example chat prompt" data-i18n="[title]Restore default prompt" class="right_menu_button">
<div class="fa-solid fa-clock-rotate-left"></div>
</div>
</div>
<div class="toggle-description justifyLeft">
<span data-i18n="Set at the beginning of Dialogue examples to indicate that a new example chat is about to start.">
Set at the beginning of Dialogue examples to indicate that a new example chat is about to start.
</span>
</div>
<div class="wide100p">
<textarea id="newexamplechat_prompt_textarea" class="text_pole textarea_compact autoSetHeight" name="new_example_chat" rows="3" placeholder="&mdash;"></textarea>
</div>
</div>
<div class="range-block m-t-1">
<div class="range-block-title openai_restorable" data-i18n="Continue nudge">
<span>Continue nudge</span>
<div id="continue_nudge_prompt_restore" title="Restore new chat prompt" class="right_menu_button">
<div class="fa-solid fa-clock-rotate-left"></div>
</div>
</div>
<div class="toggle-description justifyLeft">
<span data-i18n="Set at the beginning of the chat history to indicate that a new chat is about to start.">
Set at the end of the chat history when the continue button is pressed.
</span>
</div>
<div class="wide100p">
<textarea id="continue_nudge_prompt_textarea" class="text_pole textarea_compact autoSetHeight" name="continue_nudge" rows="3" placeholder="&mdash;"></textarea>
</div>
</div>
<div class="range-block m-t-1">
<div class="range-block-title justifyLeft" data-i18n="Replace empty message">
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 autoSetHeight" name="send_if_empty" rows="3" placeholder="&mdash;"></textarea>
</div>
</div>
</div>
</div>
<hr data-source="openai,claude">
<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" data-i18n="Proxy Password">
Proxy Password
</div>
<div class="toggle-description justifyLeft">
<span data-i18n="Will be used as a password for the proxy instead of API key.">
Will be used as a password for the proxy instead of API key.<br>
</span>
</div>
<div class="flex-container width100p">
<input id="openai_proxy_password" type="password" class="text_pole flex1" placeholder="" maxlength="200" form="openai_form" />
<div id="openai_proxy_password_show" title="Peek a password" class="menu_button fa-solid fa-eye-slash fa-fw"></div>
</div>
</div>
<div data-newbie-hidden 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>
<hr>
</div>
<div data-newbie-hidden id="advanced-ai-config-block" class="width100p">
<div data-newbie-hidden 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 class="range-block">
<label class="checkbox_label" for="use_default_badwordsids">
<input id="use_default_badwordsids" type="checkbox" />
<span data-i18n="Ban EOS Token">
Ban EOS Token
</span>
</label>
</div>
<hr>
<h4 data-i18n="Mirostat">Mirostat</h4>
<div class="range-block">
<div class="range-block-title" data-i18n="Mirostat Mode">
Mirostat Mode
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="mirostat_mode_kobold" name="volume" min="0" max="2" step="1" />
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="mirostat_mode_kobold" id="mirostat_mode_counter_kobold">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title" data-i18n="Mirostat Tau">
Mirostat Tau
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="mirostat_tau_kobold" name="volume" min="0" max="20" step="0.01" />
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="mirostat_tau_kobold" id="mirostat_tau_counter_kobold">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title" data-i18n="Mirostat Eta">
Mirostat Eta
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="mirostat_eta_kobold" name="volume" min="0" max="1" step="0.01" />
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="mirostat_eta_kobold" id="mirostat_eta_counter_kobold">
select
</div>
</div>
</div>
</div>
<hr>
<div id="grammar_block">
<h4 data-i18n="Grammar">Grammar</h4>
<div class="range-block">
<textarea id="grammar" rows="2" class="text_pole textarea_compact monospace"></textarea>
<div class="toggle-description justifyLeft">
<span data-i18n="Type in the desired custom grammar (GBNF).">
Type in the desired custom grammar (<a href="https://github.com/ggerganov/llama.cpp/blob/master/grammars/README.md" target="_blank">GBNF</a>).
</span>
</div>
</div>
</div>
<hr>
<div class="range-block flexFlowColumn">
<div class="range-block-title">
<span data-i18n="Samplers Order">Samplers Order</span>
</div>
<div class="toggle-description widthUnset" data-i18n="Samplers will be applied in a top-down order. Use with caution.">
Samplers will be applied in a top-down order.
Use with caution.
</div>
<div id="kobold_order" class="prompt_order">
<div data-id="0">
<span data-i18n="Top K">Top K</span>
<small>0</small>
</div>
<div data-id="1">
<span data-i18n="Top A">Top A</span>
<small>1</small>
</div>
<div data-id="2">
<span data-i18n="Top P">Top P</span>
<small>2</small>
</div>
<div data-id="3">
<span data-i18n="Tail Free Sampling">Tail Free Sampling</span>
<small>3</small>
</div>
<div data-id="4">
<span data-i18n="Typical Sampling">Typical P Sampling</span>
<small>4</small>
</div>
<div data-id="5">
<span data-i18n="Temperature">Temperature</span>
<small>5</small>
</div>
<div data-id="6">
<span data-i18n="Repetition Penalty">Repetition Penalty</span>
<small>6</small>
</div>
</div>
<div id="samplers_order_recommended" class="menu_button menu_button_icon">
<span data-i18n="Load koboldcpp order">Load koboldcpp order</span>
</div>
</div>
</div>
</div>
<div data-newbie-hidden id="novel_api-settings">
<div class="range-block">
<div class="range-block-title openai_restorable">
<span data-i18n="Preamble">Preamble</span>
<div id="nai_preamble_restore" title="Restore default prompt" data-i18n="[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="Use style tags to modify the writing style of the output.">
Use style tags to modify the writing style of the output.
</div>
<div class="wide100p">
<textarea id="nai_preamble_textarea" class="text_pole textarea_compact" name="nai_preamble" rows="2" placeholder=""></textarea>
</div>
</div>
<div class="range-block">
<div class="range-block-title justifyLeft">
<span data-i18n="Banned Tokens">Banned Tokens</span>
</div>
<div class="toggle-description justifyLeft" data-i18n="Sequences you don't want to appear in the output. One per line.">
Sequences you don't want to appear in the output. One per line.
</div>
<div class="wide100p">
<textarea id="nai_banned_tokens" class="text_pole textarea_compact" name="nai_banned_tokens" rows="2" placeholder=""></textarea>
</div>
</div>
<div class="range-block">
<div class="range-block-title title_restorable">
<span data-i18n="Logit Bias">Logit Bias</span>
<div id="novelai_logit_bias_new_entry" class="menu_button menu_button_icon">
<i class="fa-xs fa-solid fa-plus"></i>
<small data-i18n="Add">Add</small>
</div>
</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.
</div>
<div class="flex-container flexFlowColumn wide100p">
<div class="novelai_logit_bias_list"></div>
</div>
</div>
<div class="range-block">
<hr>
<div class="range-block-title justifyLeft" data-i18n="CFG Scale">
CFG Scale
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="cfg_scale_novel" name="volume" min="1" max="3" step="0.05">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="cfg_scale_novel" id="cfg_scale_counter_novel">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title justifyLeft">
<span data-i18n="Negative Prompt">Negative Prompt</span>
</div>
<div class="wide100p">
<textarea id="nai_cfg_uc" class="text_pole textarea_compact" name="cfg_uc" rows="2" data-i18n="[placeholder]Add text here that would make the AI generate things you don't want in your outputs." placeholder="Add text here that would make the AI generate things you don't want in your outputs."></textarea>
</div>
<small class="margin-bot-10px" data-i18n="Used if CFG Scale is unset globally, per chat or character">
Used if CFG Scale is unset globally, per chat or character
</small>
<hr>
</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_novel" name="volume" min="0" max="1" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="top_p_novel" id="top_p_counter_novel">
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_novel" name="volume" min="0" max="1" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="top_a_novel" id="top_a_counter_novel">
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_novel" name="volume" min="0" max="300" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="top_k_novel" id="top_k_counter_novel">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title" data-i18n="Mirostat Tau">
Mirostat Tau
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="mirostat_tau_novel" name="volume" min="0" max="6" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="mirostat_tau_novel" id="mirostat_tau_counter_novel">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title" data-i18n="Mirostat LR">
Mirostat LR
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="mirostat_lr_novel" name="volume" min="0" max="1" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="mirostat_lr_novel" id="mirostat_lr_counter_novel">
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_novel" name="volume" min="0" max="1" step="0.001">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="typical_p_novel" id="typical_p_counter_novel">
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_novel" name="volume" min="1" max="150" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="min_length_novel" id="min_length_counter_novel">
select
</div>
</div>
</div>
</div>
<div class="range-block flexFlowColumn">
<div class="range-block-title">
<span data-i18n="Samplers Order">Samplers Order</span>
</div>
<div class="toggle-description widthUnset" data-i18n="Samplers will be applied in a top-down order. Use with caution.">
Samplers will be applied in a top-down order. Use with caution.
</div>
<div id="novel_order" class="prompt_order">
<div data-id="0">
<span data-i18n="Temperature">Temperature</span>
<small>0</small>
<div class="toggle_button right_menu_button"></div>
</div>
<div data-id="1">
<span data-i18n="Top K Sampling">Top K Sampling</span>
<small>1</small>
<div class="toggle_button right_menu_button"></div>
</div>
<div data-id="2">
<span data-i18n="Nucleus Sampling">Nucleus Sampling</span>
<small>2</small>
<div class="toggle_button right_menu_button"></div>
</div>
<div data-id="3">
<span data-i18n="Tail Free Sampling">Tail Free Sampling</span>
<small>3</small>
<div class="toggle_button right_menu_button"></div>
</div>
<div data-id="4">
<span data-i18n="Top A Sampling">Top A Sampling</span>
<small>4</small>
<div class="toggle_button right_menu_button"></div>
</div>
<div data-id="5">
<span data-i18n="Typical Sampling">Typical Sampling</span>
<small>5</small>
<div class="toggle_button right_menu_button"></div>
</div>
<div data-id="6">
<span data-i18n="CFG">CFG</span>
<small>6</small>
<div class="toggle_button right_menu_button"></div>
</div>
<!-- Yes, there is no 7. It was a removed Top G sampling. RIP. -->
<div data-id="8">
<span data-i18n="Mirostat">Mirostat</span>
<small>8</small>
<div class="toggle_button right_menu_button"></div>
</div>
</div>
</div>
</div>
<div data-newbie-hidden 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" 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_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" data-i18n="Epsilon Cutoff">
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" data-i18n="Eta Cutoff">
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="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>
<div class="range-block">
<h4 class="range-block-title justifyLeft" data-i18n="CFG Scale">
CFG Scale
</h4>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="guidance_scale_textgenerationwebui" name="volume" min="0.1" max="4" step="0.05">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="guidance_scale_textgenerationwebui" id="guidance_scale_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title justifyLeft">
<span data-i18n="Negative Prompt">Negative Prompt</span>
</div>
<div class="wide100p">
<textarea id="negative_prompt_textgenerationwebui" class="text_pole textarea_compact" name="negative_prompt" rows="2" data-i18n="[placeholder]Add text here that would make the AI generate things you don't want in your outputs." placeholder="Add text here that would make the AI generate things you don't want in your outputs."></textarea>
</div>
</div>
<small class="margin-bot-10px" data-i18n="Used if CFG Scale is unset globally, per chat or character">
Used if CFG Scale is unset globally, per chat or character
</small>
<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 data-i18n="Contrastive search">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>
<hr>
<h4 data-i18n="Mirostat (mode=1 is only for llama.cpp)">Mirostat (mode=1 is only for llama.cpp)</h4>
<div class="range-block">
<div class="range-block-title" data-i18n="Mirostat Mode">
Mirostat Mode
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="mirostat_mode_textgenerationwebui" name="volume" min="0" max="2" step="1" />
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="mirostat_mode_textgenerationwebui" id="mirostat_mode_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title" data-i18n="Mirostat Tau">
Mirostat Tau
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="mirostat_tau_textgenerationwebui" name="volume" min="0" max="20" step="0.01" />
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="mirostat_tau_textgenerationwebui" id="mirostat_tau_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title" data-i18n="Mirostat Eta">
Mirostat Eta
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="mirostat_eta_textgenerationwebui" name="volume" min="0" max="1" step="0.01" />
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="mirostat_eta_textgenerationwebui" id="mirostat_eta_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
<hr>
<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 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">
<label for="names_in_completion" title="Add character names" class="checkbox_label widthFreeExpand">
<input id="names_in_completion" type="checkbox" /><span data-i18n="Add character names">Add character names</span>
</label>
<div class="toggle-description justifyLeft">
<span data-i18n="Send names in the ChatML objects.">Send names in the ChatML objects. Helps the model to associate messages with characters.</span>
</div>
</div>
<div class="range-block" data-source="ai21">
<label for="use_ai21_tokenizer" title="Use AI21 Tokenizer" class="checkbox_label widthFreeExpand">
<input id="use_ai21_tokenizer" type="checkbox" /><span data-i18n="Use AI21 Tokenizer">Use AI21 Tokenizer</span>
</label>
<div class="toggle-description justifyLeft">
<span data-i18n="Use the appropriate tokenizer for Jurassic models, which is more efficient than GPT's.">Use the appropriate tokenizer for Jurassic models, which is more efficient than GPT's.</span>
</div>
</div>
<div data-newbie-hidden class="range-block" data-source="claude">
<label for="exclude_assistant" title="Exclude Assistant suffix" class="checkbox_label widthFreeExpand">
<input id="exclude_assistant" type="checkbox" /><span data-i18n="Exclude Assistant suffix">Exclude Assistant suffix</span>
</label>
<div class="toggle-description justifyLeft">
<span data-i18n="Exclude the assistant suffix from being added to the end of prompt.">Exclude the assistant suffix from being added to the end of prompt (Requires jailbreak with 'Assistant:' in it).</span>
</div>
</div>
</div>
<div data-newbie-hidden class="range-block m-t-1" data-source="openai,openrouter,scale">
<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" data-i18n="[title]New preset"></i>
<i title="Import preset" id="openai_logit_bias_import_preset" class="menu_button fa-solid fa-file-import" data-i18n="[title]Import preset"></i>
<i title="Export preset" id="openai_logit_bias_export_preset" class="menu_button fa-solid fa-file-export" data-i18n="[title]Export preset"></i>
<i title="Delete preset" id="openai_logit_bias_delete_preset" class="menu_button fa-solid fa-trash-can" data-i18n="[title]Delete preset"></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 data-newbie-hidden class="range-block m-b-1">
<div id="completion_prompt_manager"></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" data-i18n="[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"><span data-i18n="KoboldAI">KoboldAI</span></option>
<option value="koboldhorde"><span data-i18n="KoboldAI Horde">KoboldAI Horde</span></option>
<option value="textgenerationwebui"><span data-i18n="Text Gen WebUI (ooba/Mancer)">Text Gen WebUI (ooba/Mancer)</span></option>
<option value="novel"><span data-i18n="NovelAI">NovelAI</span></option>
<option value="openai"><span data-i18n="Chat Completion (OpenAI, Claude, Window/OpenRouter, Scale, AI21)">Chat Completion (OpenAI, Claude, Window, OpenRouter, Scale, AI21, PaLM)</span></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 data-i18n="Avoid sending sensitive information to the Horde.">
Avoid sending sensitive information to the Horde.
<a target="_blank" href="https://docs.sillytavern.app/usage/api-connections/horde/" data-i18n="Review the Privacy statement">Review the Privacy statement</a>
</li>
<li>
<a target="_blank" href="https://horde.koboldai.net/register" data-i18n="Register a Horde account for faster queue times">Register a Horde
account for faster queue times</a>
</li>
<li>
<a target="_blank" href="https://github.com/db0/AI-Horde-Worker#readme" data-i18n="Learn how to contribute your idle GPU cycles to the Horde">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" />
<span data-i18n="Adjust context size to worker capabilities">Adjust context size to worker capabilities</span>
</label>
<label for="horde_auto_adjust_response_length" class="checkbox_label">
<input id="horde_auto_adjust_response_length" type="checkbox" />
<span data-i18n="Adjust response length to worker capabilities">Adjust response length to worker capabilities</span>
</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." data-i18n="[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" />
<span data-i18n="Trusted workers only">Trusted workers only</span>
</label>
<small id="adjustedHordeParams">Context: --, Response: --</small>
<h4 data-i18n="API key">API key</h4>
<small>
<span data-i18n="Get it here:">Get it here: </span> <a target="_blank" href="https://horde.koboldai.net/register" data-i18n="Register">Register</a> (<a id="horde_kudos" href="javascript:void(0);" data-i18n="View my Kudos">View my Kudos</a>)<br>
<span data-i18n="Enter">Enter </span> <span class="monospace">0000000000</span> <span data-i18n="to use anonymous mode.">to use anonymous mode. </span>
</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" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_horde"></div>
</div>
<div data-for="horde_api_key" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
For privacy reasons, your API key will be hidden after you reload the page.
</div>
<h4 class="horde_model_title">
<span data-i18n="Models">Models </span>
<div id="horde_refresh" title="Refresh models" data-i18n="[title]Refresh models" class="right_menu_button">
<div class="fa-solid fa-repeat "></div>
</div>
</h4>
<select id="horde_model" multiple>
<option data-i18n="-- Horde models not loaded --">-- 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" data-i18n="Not connected...">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 data-i18n="API url">API url</h4>
<small data-i18n="Example: http://127.0.0.1:5000/api ">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" data-server-history="kobold">
<div id="api_button" class="menu_button" type="submit" data-i18n="Connect" data-server-connect="kobold">Connect</div>
<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" data-i18n="Not connected...">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" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_novel">
</div>
</div>
<div data-for="api_key_novel" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
For privacy reasons, your API key will be hidden after you reload the page.
</div>
<div id="api_button_novel" class="menu_button" type="submit" data-i18n="Connect">Connect</div>
<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="clio-v1">Clio</option>
<option value="kayra-v1">Kayra</option>
</select>
</form>
<div id="online_status3">
<div id="online_status_indicator3"></div>
<div id="online_status_text3" data-i18n="No connection...">No connection... </div>
</div>
</div>
<div id="textgenerationwebui_api" style="display: none;position: relative;">
<form action="javascript:void(null);" method="post" enctype="multipart/form-data">
<span data-i18n="If you are using:"> If you are using:</span>
<div class="flex-container indent20p">
<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 class="flex-container indent20p">
<a href="https://mancer.tech/" target="_blank">
Mancer AI
</a>
<label class="checkbox_label" for="use-mancer-api-checkbox">
<span data-i18n="Use API key (Only required for Mancer)">
Click this box (and add your API key!):
</span>
<input id="use-mancer-api-checkbox" type="checkbox" />
</label>
</div>
<div>
<div id="mancer_api_subpanel" class="flex-container flexFlowColumn" style="display:none;">
<h4 data-i18n="Mancer API key">Mancer API key</h4>
<div class="flex-container">
<input id="api_key_mancer" name="api_key_mancer" class="text_pole flex1 wide100p" maxlength="500" size="35" type="text" autocomplete="off">
<div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_mancer">
</div>
</div>
<div data-for="api_key_mancer" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
For privacy reasons, your API key will be hidden after you reload the page.
</div>
<div class="flex1">
<h4>Mancer Model</h4>
<select id="mancer_model"></select>
<h4 data-i18n="Mancer API url">Mancer API URL</h4>
<small data-i18n="Example: https://neuro.mancer.tech/webui/MODEL/api">Example: https://neuro.mancer.tech/webui/MODEL/api</small>
<input id="mancer_api_url_text" name="mancer_api_url" class="text_pole wide100p" maxlength="500" value="" autocomplete="off">
</div>
</div>
<div id="tgwebui_api_subpanel" class="flex-container flexFlowColumn">
<div class="flex1">
<h4 data-i18n="Blocking API url">Blocking API URL</h4>
<small data-i18n="Example: http://127.0.0.1:5000/api ">Example: http://127.0.0.1:5000/api </small>
<input id="textgenerationwebui_api_url_text" name="textgenerationwebui_api_url" class="text_pole wide100p" maxlength="500" value="" autocomplete="off" data-server-history="ooba_blocking">
</div>
<div class="flex1">
<h4 data-i18n="Streaming API url">Streaming API URL</h4>
<small data-i18n="Example: ws://127.0.0.1:5005/api/v1/stream">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" data-server-history="ooba_streaming">
</div>
</div>
<div id="api_button_textgenerationwebui" class="menu_button" type="submit" data-i18n="Connect" data-server-connect="ooba_blocking,ooba_streaming">Connect</div>
<div id="api_loading_textgenerationwebui" class="api-load-icon fa-solid fa-hourglass fa-spin"></div>
</div>
</form>
<div class="online_status4">
<div class="online_status_indicator4"></div>
<div class="online_status_text4" data-i18n="Not connected...">Not connected...</div>
</div>
</div>
<div id="openai_api" style="display: none;position: relative;">
<h3 data-i18n="Chat Completion Source">
Chat Completion Source
</h3>
<select id="chat_completion_source">
<option value="openai">OpenAI</option>
<option value="windowai">Window AI</option>
<option value="openrouter">OpenRouter</option>
<option value="claude">Claude</option>
<option value="scale">Scale</option>
<option value="ai21">AI21</option>
<option value="palm">Google PaLM 2</option>
</select>
<form id="openai_form" data-source="openai" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<h4><span data-i18n="OpenAI API key">OpenAI API key</span></h4>
<div>
<a id="openai_api_usage" href="https://platform.openai.com/account/usage" target="_blank">
<span data-i18n="View API Usage Metrics">View API Usage Metrics</span>
</a>
</div>
<span>
<ol>
<li>
<span data-i18n="Follow">Follow</span>
<a href="https://docs.sillytavern.app/usage/api-connections/openai/" class="notes-link" target="_blank"><span data-i18n="these directions"> these directions </span></a>
<span data-i18n="to get your OpenAI API key.">to get your OpenAI API key.</span>
</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_openai" name="api_key_openai" class="text_pole flex1" maxlength="500" value="" type="text" autocomplete="off">
<div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_openai"></div>
</div>
<div id="ReverseProxyWarningMessage2" class="reverse_proxy_warning">
<b data-i18n="Use Proxy password field instead. This input will be ignored.">
Use "Proxy password" field instead. This input will be ignored.
</b>
</div>
<div data-for="api_key_openai" 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">
<optgroup label="GPT-3.5 Turbo">
<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>
</optgroup>
<optgroup label="GPT-3.5 Turbo Instruct">
<option value="gpt-3.5-turbo-instruct">gpt-3.5-turbo-instruct</option>
<option value="gpt-3.5-turbo-instruct-0914">gpt-3.5-turbo-instruct-0914</option>
</optgroup>
<optgroup label="GPT-4">
<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>
</optgroup>
<optgroup label="Other">
<option value="text-davinci-003">text-davinci-003</option>
<option value="text-davinci-002">text-davinci-002</option>
<option value="text-curie-001">text-curie-001</option>
<option value="text-babbage-001">text-babbage-001</option>
<option value="text-ada-001">text-ada-001</option>
<option value="code-davinci-002">code-davinci-002</option>
</optgroup>
<optgroup id="openai_external_category" label="External">
</optgroup>
</select>
<label for="openai_show_external_models" class="checkbox_label">
<input id="openai_show_external_models" type="checkbox" />
<span data-i18n="Show External models (provided by API)">Show "External" models (provided by API)</span>
</label>
</div>
</form>
<form id="claude_form" data-source="claude" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<h4>Claude API Key</h4>
<div>
<span data-i18n="Get your key from">Get your key from </span> <a target="_blank" href="https://console.anthropic.com/account/keys" data-i18n="Anthropic's developer console">Anthropic's developer console</a>.
</div>
<div>
<b data-i18n="Slack and Poe cookies will not work here, do not bother trying.">
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" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_claude"></div>
</div>
<div data-for="api_key_claude" 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-2">claude-2</option>
<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-2.0">claude-2.0</option>
<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-1.2">claude-instant-1.2</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" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<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="openai/gpt-4-32k">openai/gpt-4-32k</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="google/palm-2-chat-bison">google/palm-2-chat-bison</option>
<option value="google/palm-2-codechat-bison">google/palm-2-codechat-bison</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>
<form id="openrouter_form" data-source="openrouter" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<div>
<h4 data-i18n="OpenRouter Model">OpenRouter Model</h4>
<select id="model_openrouter_select">
<option data-i18n="Connect to the API">-- Connect to the API --</option>
</select>
</div>
<div class="marginTopBot5">
<label for="openrouter_use_fallback" class="checkbox_label">
<input id="openrouter_use_fallback" type="checkbox" />
<span data-i18n="Allow fallback routes">Allow fallback routes</span>
</label>
<div class="toggle-description justifyLeft">
<span data-i18n="Allow fallback routes Description">
Automatically chooses an alternative model if the chosen model can't serve your request.
</span>
</div>
</div>
<h4 data-i18n="OpenRouter API Key">OpenRouter API Key</h4>
<div>
<small data-i18n="Click Authorize below or get the key from">
Click "Authorize" below or get the key from </small> <a target="_blank" href="https://openrouter.ai/keys/">OpenRouter</a>.
<br>
<a href="https://openrouter.ai/account" target="_blank" data-i18n="View Remaining Credits">View Remaining Credits</a>
</div>
<div class="flex-container">
<input id="api_key_openrouter" name="api_key_openrouter" class="text_pole flex1" maxlength="500" value="" type="text" autocomplete="off">
<div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_openrouter"></div>
</div>
<div data-for="api_key_openrouter" class="neutral_warning">
For privacy reasons, your API key will be hidden after you reload the page.
</div>
</form>
<form id="scale_form" data-source="scale" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<div id="normal_scale_form">
<h4 data-i18n="Scale API Key">Scale API Key</h4>
<div class="flex-container">
<input id="api_key_scale" name="api_key_scale" class="text_pole flex1" maxlength="500" value="" autocomplete="off">
<div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_scale"></div>
</div>
<div data-for="api_key_scale" class="neutral_warning">
For privacy reasons, your API key will be hidden after you reload the page.
</div>
<h4>Scale API URL</h4>
<input id="api_url_scale" name="api_url_scale" class="text_pole" maxlength="500" value="" autocomplete="off" placeholder="https://dashboard.scale.com/spellbook/api/v2/deploy/xxxxxxx">
</div>
<div id="alt_scale_form">
<h4>Scale Cookie (_jwt)</h4>
<div class="flex-container">
<input id="scale_cookie" name="scale_cookie" class="text_pole flex1" maxlength="500" value="" autocomplete="off">
<div title="Clear your cookie" data-i18n="[title]Clear your cookie" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="scale_cookie"></div>
</div>
<div data-for="scale_cookie" class="neutral_warning">
For privacy reasons, your cookie will be hidden after you reload the page.
</div>
</div>
<!-- Its only purpose is to trigger max context size check -->
<select id="model_scale_select" class="displayNone"></select>
<label for="scale-alt" class="checkbox_label">
<input id="scale-alt" type="checkbox" checked>
<span data-i18n="Alt Method">Alt Method</span>
</label>
</form>
<form id="ai21_form" data-source="ai21" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<h4 data-i18n="AI21 API Key">AI21 API Key</h4>
<div class="flex-container">
<input id="api_key_ai21" name="api_key_ai21" class="text_pole flex1" maxlength="500" value="" type="text" autocomplete="off">
<div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_ai21"></div>
</div>
<div data-for="api_key_ai21" class="neutral_warning">
For privacy reasons, your API key will be hidden after you reload the page.
</div>
<div>
<h4 data-i18n="AI21 Model">AI21 Model</h4>
<select id="model_ai21_select">
<optgroup label="Latest">
<option value="j2-ultra">j2-ultra</option>
<option value="j2-mid">j2-mid</option>
<option value="j2-light">j2-light</option>
</optgroup>
</select>
</div>
</form>
<form id="palm_form" data-source="palm" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<h4 data-i18n="PaLM API Key">PaLM API Key</h4>
<div class="flex-container">
<input id="api_key_palm" name="api_key_palm" class="text_pole flex1" maxlength="500" value="" type="text" autocomplete="off">
<div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_palm"></div>
</div>
<div data-for="api_key_palm" class="neutral_warning">
For privacy reasons, your API key will be hidden after you reload the page.
</div>
<!-- Its only purpose is to trigger max context size check -->
<select id="model_palm_select" class="displayNone"></select>
</form>
<div class="flex-container flex">
<div id="api_button_openai" class="menu_button menu_button_icon" type="submit" data-i18n="Connect">Connect</div>
<div data-source="openrouter" id="openrouter_authorize" class="menu_button menu_button_icon" title="Get your OpenRouter API token using OAuth flow. You will be redirected to openrouter.ai" data-i18n="[title]Get your OpenRouter API token using OAuth flow. You will be redirected to openrouter.ai">Authorize</div>
<div id="test_api_button" class="menu_button menu_button_icon" title="Verifies your API connection by sending a short test message. Be aware that you'll be credited for it!" data-i18n="[title]Verifies your API connection by sending a short test message. Be aware that you'll be credited for it!">Test Message</div>
</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" data-i18n="No connection...">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);"><span data-i18n="View hidden API keys">View hidden API keys</span></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" data-i18n="[title]AI Response Formatting"></div>
</div>
<div class="drawer-content">
<h3 data-i18n="Advanced Formatting">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 id="PygOverrides">
<div>
<h4 data-i18n="Context Template">
Context Template
</h4>
<div class="preset_buttons flex-container">
<select id="context_presets" data-preset-manager-for="context" class="flex1"></select>
<input type="file" hidden data-preset-manager-file="context" accept=".json, .settings">
<i id="context_set_default" class="menu_button fa-solid fa-heart" title="Auto-select this preset for Instruct Mode."></i>
<i data-newbie-hidden data-preset-manager-update="context" class="menu_button fa-solid fa-save" title="Update current preset" data-i18n="[title]Update current preset"></i>
<i data-newbie-hidden data-preset-manager-new="context" class="menu_button fa-solid fa-plus" title="Create new preset" data-i18n="[title]Create new preset"></i>
<i data-newbie-hidden data-preset-manager-import="context" class="menu_button fa-solid fa-file-import" title="Import preset" data-i18n="[title]Import preset"></i>
<i data-newbie-hidden data-preset-manager-export="context" class="menu_button fa-solid fa-file-export" title="Export preset" data-i18n="[title]Export preset"></i>
<i data-newbie-hidden id="context_delete_preset" data-preset-manager-delete="context" class="menu_button fa-solid fa-trash-can" title="Delete the preset" data-i18n="[title]Delete the preset"></i>
</div>
<div data-newbie-hidden>
<label for="context_story_string">
<small data-i18n="Story String">Story String</small>
</label>
<textarea id="context_story_string" class="text_pole textarea_compact autoSetHeight" rows="1"></textarea>
<div class="flex-container">
<div class="flex1">
<label for="context_example_separator">
<small data-i18n="Example Separator">Example Separator</small>
</label>
<div>
<textarea id="context_example_separator" class="text_pole textarea_compact autoSetHeight" maxlength="500" rows="1"></textarea>
</div>
</div>
<div class="flex1">
<label for="context_chat_start">
<small data-i18n="Chat Start">Chat Start</small>
</label>
<div>
<textarea id="context_chat_start" class="text_pole textarea_compact autoSetHeight" maxlength="500" rows="1"></textarea>
</div>
</div>
</div>
</div>
<div data-newbie-hidden class="inline-drawer wide100p flexFlowColumn margin-bot-10px" style="display:none;">
<div class="inline-drawer-toggle inline-drawer-header">
<b><span data-i18n="Context Order">Context Order</span></b>
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div>
<div class="inline-drawer-content">
<div id="context_order" class="prompt_order">
<div data-id="0">
<span data-i18n="Story String">Story String</span>
<small>0</small>
</div>
<div data-id="1">
<span data-i18n="Summary">Summary</span>
<small>1</small>
</div>
<div data-id="2">
<span data-i18n="Author's Note">Author's Note</span>
<small>2</small>
</div>
<div data-id="3">
<span data-i18n="Example Dialogues">Example Dialogues</span>
<small>3</small>
</div>
<div data-id="4">
<span data-i18n="Chat Start">Chat History</span>
<small>4</small>
</div>
</div>
<small>
<b data-i18n="Hint">Hint:</b>
<span data-i18n="In-Chat Position not affected">
Summary and Author's Note orders are only affected when they don't have an In-Chat position set.
</span>
</small>
</div>
</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>
</div>
<label for="instruct_presets">
<span data-i18n="Presets">Presets</span>
</label>
<div class="preset_buttons">
<select id="instruct_presets" data-preset-manager-for="instruct" class="flex1"></select>
<input type="file" hidden data-preset-manager-file="instruct" accept=".json, .settings">
<i id="instruct_set_default" class="menu_button fa-solid fa-heart" title="Auto-select this preset on API connection."></i>
<i data-newbie-hidden data-preset-manager-update="instruct" class="menu_button fa-solid fa-save" title="Update current preset" data-i18n="[title]Update current preset"></i>
<i data-newbie-hidden data-preset-manager-new="instruct" class="menu_button fa-solid fa-plus" title="Create new preset" data-i18n="[title]Create new preset"></i>
<i data-newbie-hidden data-preset-manager-import="instruct" class="menu_button fa-solid fa-file-import" title="Import preset" data-i18n="[title]Import preset"></i>
<i data-newbie-hidden data-preset-manager-export="instruct" class="menu_button fa-solid fa-file-export" title="Export preset" data-i18n="[title]Export preset"></i>
<i data-newbie-hidden data-preset-manager-delete="instruct" class="menu_button fa-solid fa-trash-can" title="Delete the preset" data-i18n="[title]Delete the preset"></i>
</div>
<label data-newbie-hidden>
<small data-i18n="Activation Regex">
Activation Regex
</small>
</label>
<div data-newbie-hidden>
<textarea id="instruct_activation_regex" class="text_pole textarea_compact autoSetHeight" maxlength="5000" rows="1"></textarea>
</div>
<div data-newbie-hidden>
<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 in 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>
<label for="instruct_names_force_groups" class="checkbox_label indent20p">
<input id="instruct_names_force_groups" type="checkbox" />
<span data-i18n="Force for Groups and Personas">Force for Groups and Personas</span>
</label>
</div>
<div data-newbie-hidden>
<label>
<small data-i18n="System Prompt">System Prompt</small>
</label>
<div class="prompt_overridden">
Overridden by the Character Definitions.
</div>
<textarea id="instruct_system_prompt" class="text_pole textarea_compact autoSetHeight" rows="1"></textarea>
</div>
<div data-newbie-hidden class="inline-drawer wide100p flexFlowColumn">
<div class="inline-drawer-toggle inline-drawer-header">
<b><span data-i18n="Instruct Mode Sequences">Instruct Mode Sequences</span></b>
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div>
<div class="inline-drawer-content">
<div class="flex-container">
<div class="flex1">
<label for="instruct_input_sequence">
<small data-i18n="Input Sequence">Input Sequence</small>
</label>
<div>
<textarea id="instruct_input_sequence" class="text_pole textarea_compact autoSetHeight" maxlength="2000" placeholder="&mdash;" rows="1"></textarea>
</div>
</div>
<div class="flex1">
<label for="instruct_output_sequence">
<small data-i18n="Output Sequence">Output Sequence</small>
</label>
<div>
<textarea id="instruct_output_sequence" class="text_pole wide100p textarea_compact autoSetHeight" maxlength="2000" placeholder="&mdash;" rows="1"></textarea>
</div>
</div>
</div>
<div class="flex-container">
<div class="flex1">
<label for="instruct_first_output_sequence">
<small data-i18n="First Output Sequence">First Output Sequence</small>
</label>
<div>
<textarea id="instruct_first_output_sequence" class="text_pole textarea_compact autoSetHeight" maxlength="2000" placeholder="&mdash;" rows="1"></textarea>
</div>
</div>
<div class="flex1">
<label for="instruct_last_output_sequence">
<small data-i18n="Last Output Sequence">Last Output Sequence</small>
</label>
<div>
<textarea id="instruct_last_output_sequence" class="text_pole wide100p textarea_compact autoSetHeight" maxlength="2000" placeholder="&mdash;" rows="1"></textarea>
</div>
</div>
</div>
<div class="flex-container">
<div class="flex1">
<label for="instruct_system_sequence_prefix">
<small data-i18n="System Sequence Prefix">System Sequence Prefix</small>
</label>
<div>
<textarea id="instruct_system_sequence_prefix" class="text_pole textarea_compact autoSetHeight" maxlength="2000" placeholder="&mdash;" rows="1"></textarea>
</div>
</div>
<div class="flex1">
<label for="instruct_system_sequence_suffix">
<small data-i18n="System Sequence Suffix">System Sequence Suffix</small>
</label>
<div>
<textarea id="instruct_system_sequence_suffix" class="text_pole wide100p textarea_compact autoSetHeight" maxlength="2000" placeholder="&mdash;" rows="1"></textarea>
</div>
</div>
</div>
<div class="flex-container">
<div class="flex1">
<label for="instruct_stop_sequence">
<small data-i18n="Stop Sequence">Stop Sequence</small>
</label>
<div>
<textarea id="instruct_stop_sequence" class="text_pole textarea_compact autoSetHeight" maxlength="2000" placeholder="&mdash;" rows="1"></textarea>
</div>
</div>
<div class="flex1">
<label for="instruct_separator_sequence">
<small data-i18n="Separator">Separator</small>
</label>
<div>
<textarea id="instruct_separator_sequence" class="text_pole wide100p textarea_compact autoSetHeight" maxlength="2000" placeholder="&mdash;" rows="1"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="ContextFormatting">
<div data-newbie-hidden>
<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="99">Best match (recommended)</option>
<option value="0">None / Estimated</option>
<option value="1">GPT-2</option>
<!-- Option #2 was a legacy GPT-2/3 tokenizer -->
<option value="3">Sentencepiece (LLaMA)</option>
<option value="4">NerdStash (NovelAI Clio)</option>
<option value="5">NerdStash v2 (NovelAI Kayra)</option>
<option value="6">API (WebUI / koboldcpp)</option>
</select>
</div>
<div class="range-block" data-newbie-hidden>
<div class="range-block-title justifyLeft">
<span data-i18n="Token Padding">Token Padding</span>
<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 data-newbie-hidden 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 data-newbie-hidden class="checkbox_label" for="remove-examples-checkbox">
<input id="remove-examples-checkbox" type="checkbox" />
<span data-i18n="Strip Example Messages from Prompt">
Strip Example Messages from 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>
<label data-newbie-hidden class="checkbox_label" for="trim_spaces">
<input id="trim_spaces" type="checkbox" />
<span data-i18n="Trim spaces">Trim spaces</span>
</label>
<label class="checkbox_label" for="trim_sentences_checkbox">
<input id="trim_sentences_checkbox" type="checkbox" />
<span data-i18n="Trim Incomplete Sentences">Trim Incomplete Sentences</span>
</label>
<!-- Add margin since this is a child of above -->
<label data-newbie-hidden class="checkbox_label indent20p" for="include_newline_checkbox">
<input id="include_newline_checkbox" type="checkbox" />
<span data-i18n="Include Newline">Include Newline</span>
</label>
<div data-newbie-hidden>
<h4>
<span data-i18n="Start Reply With">
Start Reply With
</span>
</h4>
<div>
<textarea id="start_reply_with" rows="2" class="text_pole textarea_compact" data-i18n="[placeholder]AI reply prefix" placeholder="AI reply prefix"></textarea>
</div>
<label class="checkbox_label" for="chat-show-reply-prefix-checkbox"><input id="chat-show-reply-prefix-checkbox" type="checkbox" />
<span data-i18n="Show reply prefix in chat">
Show reply prefix in chat
</span>
</label>
<div>
<h4 data-i18n="Non-markdown strings">
Non-markdown strings
</h4>
<div>
<input id="markdown_escape_strings" class="text_pole textarea_compact" type="text" data-i18n="[placeholder]separate with commas w/o space between" placeholder="separate with commas w/o space between" maxlength="100" />
</div>
</div>
<h4>
<div class="range-block-title justifyLeft">
<span data-i18n="Custom Stopping Strings">
Custom Stopping Strings
</span>
<a href="https://docs.sillytavern.app/usage/core-concepts/advancedformatting/#custom-stopping-strings" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</div>
<div>
<small>
<span data-i18n="JSON serialized array of strings">JSON serialized array of strings, for example:</span><br>
<span class="monospace">["\n", "\nUser:", "\nChar:"]</span>
</small>
</div>
</h4>
<div>
<textarea id="custom_stopping_strings" rows="2" class="text_pole textarea_compact monospace" placeholder="[&quot;Ford&quot;, &quot;BMW&quot;, &quot;Fiat&quot;]"></textarea>
</div>
<label class="checkbox_label" for="custom_stopping_strings_macro">
<input id="custom_stopping_strings_macro" type="checkbox" checked>
<span data-i18n="Replace Macro in Custom Stopping Strings">
Replace Macro in Custom Stopping Strings
</span>
</label>
</div>
<div data-newbie-hidden>
<h4>
<span data-i18n="Auto-Continue">Auto-Continue</span>
</h4>
<div class="flex-container">
<label class="checkbox_label" for="auto_continue_enabled">
<input id="auto_continue_enabled" type="checkbox" />
<span data-i18n="Enabled">
Enabled
</span>
</label>
<label class="checkbox_label" for="auto_continue_allow_chat_completions">
<input id="auto_continue_allow_chat_completions" type="checkbox" />
<span data-i18n="Allow for Chat Completion APIs">
Allow for Chat Completion APIs
</span>
</label>
</div>
<div class="auto_continue_settings_block">
<label for="auto_continue_target_length">
<span data-i18n="Target length (tokens)">Target length (tokens)</span>
<input id="auto_continue_target_length" type="number" class="text_pole textarea_compact" min="0" max="1024" />
</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" data-i18n="[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" data-i18n="[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>
<span data-i18n="Worlds/Lorebooks">Worlds/Lorebooks</span>
<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="justifyContentSpaceAround wi-settings flex-container gap10px alignitemscenter">
<div id="WIMultiSelector" class="flex2 flex alignSelfStart range-block">
<div class="range-block-title justifyLeft">
<span data-i18n="Active World(s) for all chats"><small>Active World(s) for all chats</small></span>
</div>
<div class="range-block-range">
<select id="world_info" multiple>
<option value="">
<span data-i18n="-- World Info not found --">-- World Info not found --</span>
</option>
</select>
</div>
</div>
<div class="flex2 flex-container flexFlowColumn">
<div data-newbie-hidden class="flex range-block">
<div class="range-block-title justifyLeft">
<label for="world_info_character_strategy">
<span data-i18n="Character Lore Insertion Strategy"><small>Character Lore Insertion Strategy</small></span>
</label>
</div>
<div class="range-block-range">
<select id="world_info_character_strategy" class="flexGrow margin0">
<option value="0" data-i18n="Sorted Evenly">Sorted Evenly</option>
<option value="1" data-i18n="Character Lore First">Character Lore First</option>
<option value="2" data-i18n="Global Lore First">Global Lore First</option>
</select>
</div>
</div>
<div name="WIScanAndTokens" class="flex1 flex-container flexFlowColumn">
<div data-newbie-hidden 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="Context %">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 data-newbie-hidden class="flex1 gap5px range-block">
<div class="wide10pMinFit">
<small data-i18n="Budget Cap">Budget Cap</small>
</div>
<div class="range-block-range-and-counter ">
<div class="range-block-range paddingLeftRight5">
<input type="range" id="world_info_budget_cap" name="volume" min="0" max="8192" step="1">
</div>
<div class="range-block-counter margin0">
<div contenteditable="true" data-for="world_info_budget_cap" id="world_info_budget_cap_counter">
0
</div>
</div>
</div>
<div class="budget_cap_note">
<small data-i18n="(0 = disabled)">(0 = disabled)</small>
</div>
</div>
</div>
</div>
<div data-newbie-hidden class="alignitemsflexstart flex1 range-block flex-container flexFlowColumn">
<label title="Entries can activate other entries by mentioning their keywords" data-i18n="[title]Entries can activate other entries by mentioning their keywords" class="checkbox_label">
<input id="world_info_recursive" type="checkbox" />
<small data-i18n="Recursive Scan">
Recursive Scan
</small>
</label>
<label title="Lookup for the entry keys in the context will respect the case" data-i18n="[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 data-i18n="Case Sensitive">
Case-sensitive
</small>
</label>
<label title="If the entry key consists of only one word, it would not be matched as part of other words" data-i18n="[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 data-i18n="Match whole words">
Match whole words
</small>
</label>
<label title="Alert if your world info is greater than the allocated budget." data-i18n="[title]Alert if your world info is greater than the allocated budget." class="checkbox_label">
<input id="world_info_overflow_alert" type="checkbox" />
<small data-i18n="Alert On Overflow">
Alert On Overflow
</small>
</label>
</div>
</div>
<div id="world_popup">
<hr>
<div class="flex-container alignitemscenter">
<input type="file" id="world_import_file" accept=".json,.lorebook,.png" name="avatar" hidden>
<div id="world_create_button" class="menu_button menu_button_icon">
<i class="fa-solid fa-globe"></i>
<span data-i18n="Create">Create</span>
</div>
<small data-i18n="or">or</small>
<select id="world_editor_select" class="margin0">
<option value="" data-i18n="--- Pick to Edit ---">--- Pick to Edit ---</option>
</select>
<div id="world_popup_name_button" class="menu_button fa-pencil fa-solid" title="Rename World Info" data-i18n="[title]Rename World Info"></div>
<div id="OpenAllWIEntries" class="menu_button fa-solid fa-expand" title="Open all Entries" data-i18n="[title]Open all Entries"></div>
<div id="CloseAllWIEntries" class="menu_button fa-solid fa-compress" title="Close all Entries" data-i18n="[title]Close all Entries"></div>
<div id="world_popup_new" class="menu_button fa-solid fa-plus" title="New Entry" data-i18n="[title]New Entry"></div>
<div id="world_import_button" class="menu_button fa-solid fa-file-import" title="Import World Info" data-i18n="[title]Import World Info"></div>
<div id="world_popup_export" class="menu_button fa-solid fa-file-export" title="Export World Info" data-i18n="[title]Export World Info"></div>
<div id="world_popup_delete" class="menu_button fa-solid fa-trash-can redWarningBG" title="Delete World Info" data-i18n="[title]Delete World Info"></div>
<input type="search" class="text_pole textarea_compact" data-i18n="[placeholder]Search..." id="world_info_search" placeholder="Search...">
<div id="world_info_pagination"></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-user-cog closedIcon" title="User Settings" data-i18n="[title]User Settings"></div>
</div>
<div id="user-settings-block" class="drawer-content closedDrawer">
<div class="flex-container flexFlowColumn">
<div name="userSettingsRowOne" class="flex-container flexFlowRow alignitemscenter spaceBetween">
<div class="flex-container">
<div class="flex-container flexnowrap alignitemscenter">
<h3><span data-i18n="User Settings">User Settings</span></h3>
<select id="ui_mode_select" class="margin0 widthNatural">
<option value="0" data-i18n="Simple">Simple</option>
<option value="1" data-i18n="Advanced">Advanced</option>
</select>
</div>
</div>
<div id="UI-language-block" class="flex-container alignitemscenter">
<span data-i18n="UI Language">Language:</span>
<select id="ui_language_select" class="widthNatural flex1 margin0">
<option value="" data-i18n="Default">Default</option>
<option value="en">en</option>
</select>
</div>
<small id="version_display"></small>
</div>
<div name="UserSettingsRowTwo" class="flex-container flexFlowRow">
<textarea id="settingsSearch" class="textarea_compact wide100p" rows="1" placeholder="Search Settings"></textarea>
</div>
</div>
<div id="user-settings-block-content" class="flex-container spaceEvenly">
<div name="UserSettingsFirstColumn" id="UI-Theme-Block" class="flex-container flexFlowColumn wide100p">
<div id="UI-presets-block" class="flex-container flexFlowColumn">
<h4>
<span data-i18n="UI Theme Preset">Theme Preset</span>
</h4>
<div class="flex-container flexnowrap alignitemscenter">
<select id="themes" class="margin0">
</select>
<div id="ui-preset-save-button" title="Save changes to a new theme file" data-i18n="[title]Save changes to a new theme file" class="menu_button margin0">
<i class="fa-solid fa-save"></i>
</div>
</div>
</div>
<div name="themeElements" data-newbie-hidden class="flex-container flexFlowColumn flexNoGap">
<h4><span data-i18n="UI Colors">Theme Settings</span></h4>
<div name="AvatarAndChatDisplay" class="flex-container flexFlowColumn">
<div class="flex-container">
<span data-i18n="Avatar Style">Avatars:</span>
<select id="avatar_style" class="widthNatural flex1 margin0">
<option value="0" data-i18n="Circle">Circle</option>
<option value="1" data-i18n="Rectangle">Rectangle</option>
</select>
</div>
<div class="flex-container">
<span data-i18n="Chat Style:">Chat Style:</span><br>
<select id="chat_display" class="widthNatural flex1 margin0">
<option value="0" data-i18n="Default">Flat</span>
<option value="1" data-i18n="Bubbles">Bubbles</option>
<option value="2" data-i18n="Document">Document</option>
</select>
</div>
</div>
<div id="color-picker-block" class="flex-container flexFlowColumn flexNoGap">
<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="chat-tint-color-picker"></toolcool-color-picker>
<span data-i18n="Chat Background">Chat Background</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="blur-tint-color-picker"></toolcool-color-picker>
<span data-i18n="UI Background">UI Background</span>
</div>
<div class="flex-container">
<toolcool-color-picker id="border-color-picker"></toolcool-color-picker>
<span data-i18n="UI Border">UI Border</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>
<div data-newbie-hidden name="FontBlurChatWidthBlock" class="flex-container flexFlowColumn flexNoGap">
<div data-newbie-hidden class="range-block">
<div class="range-block-title" data-i18n="Chat Width (PC)">
Chat Width (PC)
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input id="chat_width_slider" class="wide100p" type="range" min="25" max="100" step="1" value="50">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="chat_width_slider" id="chat_width_slider_counter">
select
</div>
</div>
</div>
</div>
<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.01">
</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>
</div>
<div name="UserSettingsSecondColumn" id="UI-Customization" class="flex-container flexFlowColumn wide100p">
<div name="themeToggles">
<h4 data-i18n="Theme Toggles">Theme Toggles</h4>
<label data-newbie-hidden for="fast_ui_mode" class="checkbox_label" title="removes blur from window backgrounds" data-i18n="[title]removes blur from window backgrounds">
<input id="fast_ui_mode" type="checkbox" />
<span data-i18n="No Blur Effect">No Blur Effect</span>
</label>
<label data-newbie-hidden 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 data-newbie-hidden for="expandMessageActions" class="checkbox_label">
<input id="expandMessageActions" type="checkbox" />
<span data-i18n="Auto-Expand Message Actions">Expand Message Actions</span>
</label>
<label data-newbie-hidden for="messageTimerEnabled" class="checkbox_label">
<input id="messageTimerEnabled" type="checkbox" />
<span data-i18n="Message Timer">Message Timer</span>
</label>
<label data-newbie-hidden for="messageTimestampsEnabled" class="checkbox_label">
<input id="messageTimestampsEnabled" type="checkbox" />
<span data-i18n="Chat Timestamps">Chat Timestamps</span>
</label>
<label data-newbie-hidden for="messageModelIconEnabled" class="checkbox_label">
<input id="messageModelIconEnabled" type="checkbox" />
<span data-i18n="Model Icon">Model Icons</span>
</label>
<label data-newbie-hidden for="mesIDDisplayEnabled" class="checkbox_label">
<input id="mesIDDisplayEnabled" type="checkbox" />
<span data-i18n="Message IDs">Message IDs</span>
</label>
<label data-newbie-hidden for="messageTokensEnabled" class="checkbox_label">
<input id="messageTokensEnabled" type="checkbox" />
<span data-i18n="Show Message Token Count">Message Token Count</span>
</label>
<label data-newbie-hidden for="hotswapEnabled" class="checkbox_label">
<input id="hotswapEnabled" type="checkbox" />
<span data-i18n="Characters Hotswap">Characters Hotswap</span>
</label>
</div>
<h4><span data-i18n="Miscellaneous">Miscellaneous</span></h4>
<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 data-newbie-hidden class="checkbox_label" for="relaxed_api_urls" title="Reduce the formatting requirements on API URLS">
<input id="relaxed_api_urls" type="checkbox" />
<span data-i18n="Relaxed API URLS">Relaxed API URLs</span>
</label>
<label data-newbie-hidden id="movingUIModeCheckBlock" for="movingUImode" class="checkbox_label">
<input id="movingUImode" type="checkbox" />
<span data-i18n="Movable UI Panels">MovingUI</span>
</label>
<div data-newbie-hidden id="MovingUI-presets-block" class="flex-container alignitemscenter">
<div class="flex-container alignitemscenter">
<span>MUI Preset:</span>
<div class="flex-container flexnowrap">
<select id="movingUIPresets" class="widthNatural flex1 margin0">
</select>
<div id="movingui-preset-save-button" title="Save changes to a new MovingUI preset file" data-i18n="[title]Save movingUI changes to a new file" class="menu_button margin0">
<i class="fa-solid fa-save"></i>
</div>
</div>
</div>
</div>
<div id="movingUIreset" class="menu_button whitespacenowrap" data-i18n="Reset Panels">
Reset MovingUI
</div>
<div data-newbie-hidden id="CustomCSS-block" class="flex-container flexFlowColumn">
<h4>
<span data-i18n="Custom CSS">Custom CSS</span>
</h4>
<div class="flex-container flexnowrap alignitemscenter">
<textarea id="customCSS" class="text_pole margin0 margin-r5 textarea_compact monospace"></textarea>
</div>
</div>
</div>
</div>
<div name="UserSettingsThirdColumn" id="power-user-options-block" class="flex-container wide100p">
<div id="power-user-option-checkboxes">
<div data-newbie-hidden name="CharacterHandlingToggles">
<h4>Character Handling</h4>
<label data-newbie-hidden class="checkbox_label" for="fuzzy_search_checkbox">
<input id="fuzzy_search_checkbox" type="checkbox" />
<span data-i18n="Advanced Character Search">Advanced Character Search</span>
</label>
<label data-newbie-hidden for="prefer_character_prompt" title="If checked and the character card contains a prompt override (System Prompt), use that instead." data-i18n="[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" />
<span data-i18n="Prefer Character Card Prompt">Prefer Char. Prompt</span>
</label>
<label data-newbie-hidden for="prefer_character_jailbreak" title="If checked and the character card contains a jailbreak override (Post History Instruction), use that instead." data-i18n="[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" />
<span data-i18n="Prefer Character Card Jailbreak">Prefer Char. JB</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="never_resize_avatars">
<input id="never_resize_avatars" type="checkbox" />
<span data-i18n="Never resize avatars">Never resize avatars</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="show_card_avatar_urls">
<input id="show_card_avatar_urls" type="checkbox" />
<span data-i18n="Show avatar filenames">Show avatar filenames</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="import_card_tags">
<input id="import_card_tags" type="checkbox" />
<span data-i18n="Import Card Tags">Import Card Tags</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="spoiler_free_mode">
<input id="spoiler_free_mode" type="checkbox" />
<span data-i18n="Spoiler Free Mode">Spoiler Free Mode</span>
</label>
</div>
<div name="ChatMessageHandlingToggles">
<h4>Chat/Message Handling</h4>
<div data-newbie-hidden class="flex-container alignitemscenter">
<span data-i18n="Send on Enter">
Enter to Send:
</span>
<select id="send_on_enter" class="widthNatural flex1 margin0">
<option value="-1" data-i18n="Disabled">Disabled</option>
<option value="0" data-i18n="Automatic (PC)">Automatic (PC)</option>
<option value="1" data-i18n="Enabled">Enabled</option>
</select>
</div>
<label data-newbie-hidden class="checkbox_label" for="continue_on_send">
<input id="continue_on_send" type="checkbox" />
<span data-i18n="Press Send to continue">
"Send" to Continue
</span>
</label>
<label class="checkbox_label" for="quick_continue">
<input id="quick_continue" type="checkbox" />
<span data-i18n="Press Send to continue">
Quick "Continue" button
</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="swipes-checkbox">
<input id="swipes-checkbox" type="checkbox" />
<span data-i18n="Swipes">Swipes</span>
</label>
<label class="checkbox_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 data-newbie-hidden 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 data-newbie-hidden class="checkbox_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 data-newbie-hidden class="checkbox_label" for="confirm_message_delete">
<input id="confirm_message_delete" type="checkbox" />
<span data-i18n="Confirm message deletion">Confirm message deletion</span>
</label>
<label class="checkbox_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 data-newbie-hidden class="checkbox_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 data-newbie-hidden 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 data-newbie-hidden 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="encode_tags">
<input id="encode_tags" type="checkbox" />
<span data-i18n="Show tags in responses">Show &lt;tags&gt; in responses</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="disable_group_trimming" title="Allow AI messages in groups to contain lines spoken by other group members.">
<input id="disable_group_trimming" type="checkbox" />
<span data-i18n="Relax message trim in Groups">Relax message trim in Groups</span>
</label>
<label data-newbie-hidden class="checkbox_label" for="console_log_prompts">
<input id="console_log_prompts" type="checkbox" />
<span data-i18n="Log prompts to console">Log prompts to console</span>
</label>
<div data-newbie-hidden class="inline-drawer wide100p flexFlowColumn">
<div class="inline-drawer-toggle inline-drawer-header">
<b><span data-i18n="Auto-swipe">Auto-swipe</span></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" />
<span data-i18n="Enabled">Enabled</span>
</label>
<div data-i18n="Minimum generated message length">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 data-i18n="Blacklisted words">Blacklisted words</div>
<div class="auto_swipe">
<textarea id="auto_swipe_blacklist" name="auto_swipe_blacklist" data-i18n="[placeholder]words you dont want generated separated by comma ','" placeholder="words you dont want generated separated by comma ','" class="text_pole textarea_compact" maxlength="5000" value="" autocomplete="off" rows="3"></textarea>
<div data-i18n="Blacklisted word count to swipe">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>
<div data-newbie-hidden class="flex-container">
<div id="reload_chat" class="menu_button whitespacenowrap" data-i18n="Reload Chat">
Reload Chat
</div>
<div id="debug_menu" class="menu_button whitespacenowrap" data-i18n="Debug Menu">
Debug Menu
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="logo_block" class="drawer" title="Change Background Image" data-i18n="[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" data-i18n="[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" data-i18n="Extensions API:">Extensions API:
<a target="_blank" href="https://github.com/SillyTavern/SillyTavern-extras">
SillyTavern-extras
</a>
</h3>
<div class="flex-container">
<div id="extensions_status" data-i18n="Not connected...">Not connected...</div>
<label for="extensions_autoconnect">
<input id="extensions_autoconnect" type="checkbox">
<span data-i18n="Auto-connect">Auto-connect</span>
</label>
</div>
</div>
<div class="alignitemsflexstart flex-container wide100p">
<input id="extensions_url" type="text" class="flex1 heightFitContent text_pole widthNatural" maxlength="250" data-i18n="[placeholder]Extensions URL" placeholder="Extensions URL">
<input id="extensions_api_key" type="text" class="flex1 heightFitContent text_pole widthNatural" maxlength="250" data-i18n="[placeholder]API key" placeholder="Extras API key">
<div class="extensions_url_block">
<div id="extensions_connect" class="menu_button" data-i18n="Connect">Connect</div>
<div id="extensions_details" class="menu_button_icon menu_button">
Manage extensions
</div>
<div id="third_party_extension_button" title="Import Extension From Git Repo" class="menu_button fa-solid fa-cloud-arrow-down faSmallFontSquareFix"></div>
</div>
</div>
<div id="extensions_settings" class="flex1 wide50p">
</div>
<div id="extensions_settings2" class="flex1 wide50p">
</div>
</div>
</div>
</div>
<div id="persona-management-button" class="drawer">
<div class="drawer-toggle">
<div class="drawer-icon fa-solid fa-face-smile closedIcon" title="Persona Management" data-i18n="[title]Persona Management"></div>
</div>
<div class="drawer-content closedDrawer">
<div class="flex-container wide100p alignitemscenter spaceBetween">
<h3><span data-i18n="Persona Management">Persona Management</span></h3>
<a href="https://docs.sillytavern.app/usage/core-concepts/personas/" target="_blank" data-i18n="How do I use this?">How do I use this?</a>
<div id="persona-management-block" class="flex-container wide100p">
<div class="flex1">
<h4 data-i18n="Name">Name</h4>
<div class="change_name">
<input id="your_name" name="your_name" data-i18n="[placeholder]Enter 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" data-i18n="[title]Click to set a new User Name">
</div>
<div id="lock_user_name" class="menu_button fa-solid fa-unlock" title="Click to lock your selected persona to the current chat. Click again to remove the lock." data-i18n="[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" data-i18n="[title]Click to set user name for all messages">
</div>
</div>
<div>
<h4 data-i18n="Persona Description">Persona Description</h4>
<textarea id="persona_description" name="persona_description" placeholder="Example:&#10;[{{user}} is a 28-year-old Romanian cat girl.]" class="text_pole textarea_compact" maxlength="5000" value="" autocomplete="off" rows="8"></textarea>
<div class="extension_token_counter">
Tokens: <span id="persona_description_token_count">0</span>
</div>
<div data-newbie-hidden>
<label for="persona_description_position" data-i18n="Position:">Position:</label>
<select id="persona_description_position">
<option value="0" data-i18n="In Story String / Prompt Manager">In Story String / Prompt Manager</option>
<option value="2" data-i18n="Top of Author's Note">Top of Author's Note</option>
<option value="3" data-i18n="Bottom of Author's Note">Bottom of Author's Note</option>
</select>
</div>
</div>
<div class="range-block">
<label for="persona_show_notifications" class="checkbox_label">
<input id="persona_show_notifications" type="checkbox" />
<span data-i18n="Show notifications on switching personas">
Show notifications on switching personas
</span>
</label>
</div>
</div>
<div class="flex1">
<h4 class="title_restorable">
<span data-i18n="Your Persona">Your Persona</span>
<div class="menu_button menu_button_icon user_stats_button" title="Click for stats!">
<i class="fa-solid fa-ranking-star"></i><span data-i18n="Usage Stats">Usage Stats</span>
</div>
<div id="create_dummy_persona" class="menu_button menu_button_icon" title="Create a dummy persona" data-i18n="[title]Create a dummy persona">
<i class="fa-solid fa-person-circle-question fa-fw"></i>
<span data-i18n="Blank">Blank</span>
</div>
</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">
<input type="hidden" id="avatar_upload_overwrite" name="overwrite_name" value="">
</form>
</div>
</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" data-i18n="[title]Character Management">
</div>
</div>
<nav id="right-nav-panel" class="drawer-content closedDrawer fillRight">
<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" data-i18n="[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" data-i18n="[title]Select/Create Characters"></div>
</div>
<div id="HotSwapWrapper" class="alignitemscenter flex-container margin0auto width100p">
<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 id="result_info" class="flex-container" style="display: none;">
<div id="result_info_text" title="Token counts may be inaccurate and provided just for reference." data-i18n="[title]Token counts may be inaccurate and provided just for reference.">
<div>
<strong id="result_info_total_tokens" title="Total tokens">Calculating...</strong>&nbsp;<span data-i18n="Tokens">Tokens</span>
</div>
<div>
<small title="Permanent tokens">
(<span id="result_info_permanent_tokens"></span>&nbsp;<span data-i18n="Permanent">Permanent</span>)
</small>
</div>
</div>
<a id="chartokenwarning" class="right_menu_button fa-solid fa-triangle-exclamation" href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#character-tokens" target="_blank" title="About Token 'Limits'"></a>
<i title="Click for stats!" class="fa-solid fa-ranking-star right_menu_button rm_stats_button"></i>
<i title="Toggle character info panel" id="hideCharPanelAvatarButton" class="fa-solid fa-eye right_menu_button"></i>
</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" data-i18n="[placeholder]Name this character" placeholder="Name this character" maxlength="50" value="" autocomplete="off">
<div class="extension_token_counter">
Tokens: <span data-token-counter="character_name_pole" data-token-permanent="true">counting...</span>
</div>
</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" data-i18n="[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">
<div class="flex-container flexFlowColumn">
<div class="flex-container justifyContentFlexEnd flexFlowColumn">
<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" data-i18n="[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" data-i18n="[title]Advanced Definition"></div>
<div id="world_button" class="menu_button fa-solid fa-globe" title="Character Lore" data-i18n="[title]Character Lore"></div>
<div id="export_button" class="menu_button fa-solid fa-file-export " title="Export and Download" data-i18n="[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" data-i18n="[title]Duplicate Character"></div>
<label for="create_button" id="create_button_label" class="menu_button fa-solid fa-user-check" title="Create Character" data-i18n="[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" data-i18n="[title]Delete Character"></div>
</div>
<label class="flex1" for="char-management-dropdown">
<select id="char-management-dropdown">
<option value="default" disabled selected data-i18n="More...">More...</option>
<option id="set_character_world" data-i18n="Link to World Info">
Link to World Info
</option>
<option id="import_character_info" data-i18n="Import Card Lore">
Import Card Lore
</option>
<option id="set_chat_scenario" data-i18n="Scenario Override">
Scenario Override
</option>
<option id="convert_to_persona" data-i18n="Convert to Persona">
Convert to Persona
</option>
<option id="renameCharButton" data-i18n="Rename">
Rename
</option>
<!--<option id="dupe_button">
Duplicate
</option>
<option id="export_button">
Export
</option>
<option id="delete_button">
Delete
</option>-->
</select>
</label>
</div>
<div id="tags_div" class="marginBot5">
<div class="tag_controls">
<input id="tagInput" class="text_pole tag_input wide100p margin0" data-i18n="[placeholder]Search / Create Tags" placeholder="Search / Create tags" maxlength="25" />
<div class="tags_view menu_button fa-solid fa-tags" title="View all tags" data-i18n="[title]View all tags"></div>
</div>
<div id="tagList" class="tags"></div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div id="description_div" class="marginBot5">
<span data-i18n="Character 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" data-i18n="[placeholder]Describe your character's physical and mental traits here." placeholder="Describe your character's physical and mental traits here." class="marginBot5" name="description" placeholder=""></textarea>
<div class="extension_token_counter">
Tokens: <span data-token-counter="description_textarea" data-token-permanent="true">counting...</span>
</div>
<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" data-i18n="[title]Click to set additional greeting messages">
<i class="fa-solid fa-comment-dots"></i>
</div>
</div>
<textarea id="firstmessage_textarea" data-i18n="[placeholder]This will be the first message from the character that starts every chat." placeholder="This will be the first message from the character that starts every chat." class="marginBot5" name="first_mes" placeholder=""></textarea>
<div class="extension_token_counter">
Tokens: <span data-token-counter="firstmessage_textarea">counting...</span>
</div>
<div id="spoiler_free_desc">
<div id="creators_notes_div" class="marginBot5 title_restorable">
<span data-i18n="Creator's Notes">Creator's Notes</span>
<div id="spoiler_free_desc_button" class="menu_button fa-solid fa-eye" title="Show / Hide Description and First Message" data-i18n="[title]Show / Hide Description and First Message"></div>
</a>
</div>
<hr>
<div id="creator_notes_spoiler" data-i18n="[placeholder]Creator's Notes" placeholder="Creator's Notes" class="marginBot5" name="creator_notes_spoiler"></div>
<!-- A button to show / hide description_div and description_textarea and first_message_div and firstmessage_textarea-->
</div>
<!-- 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" data-i18n="[placeholder]Chat Name (Optional)" 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" data-i18n="[placeholder]Search / Create Tags" placeholder="Search / Create tags" maxlength="25" />
<div class="tags_view menu_button fa-solid fa-tags margin0" title="View all tags" data-i18n="[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>
<label class="add_avatar avatar flex-container justifyCenter" for="group_avatar_button" title="Click to select a new avatar for this group" data-i18n="[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" data-i18n="[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" data-i18n="[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" data-i18n="[title]Create"></div>
<div id="rm_group_restore_avatar" class="heightFitContent margin0 menu_button fa-solid fa-images" title="Restore collage avatar" data-i18n="[title]Restore collage avatar"></div>
<div id="rm_group_delete" class="heightFitContent margin0 menu_button fa-solid fa-trash-can" title="Delete" data-i18n="[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><i id="groupCurrentMemberPopoutButton" class="fa-solid fa-window-restore menu_button"></i>
<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_pagination" class="group_pagination"></div>
<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" data-i18n="[placeholder]Search..." placeholder="Search..." maxlength="100" />
</div>
<div class="rm_tag_controls">
<div class="tags rm_tag_filter"></div>
</div>
<div id="rm_group_add_members_pagination" class="group_pagination"></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" 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" data-i18n="[title]Create New Character" class="menu_button fa-solid fa-user-plus "></div>
<div id="character_import_button" title="Import Character from File" data-i18n="[title]Import Character from File" class="menu_button fa-solid fa-file-import faSmallFontSquareFix"></div>
<div id="external_import_button" title="Import content from external URL" data-i18n="[title]Import content from external URL" class="menu_button fa-solid fa-cloud-arrow-down faSmallFontSquareFix"></div>
<div id="rm_button_group_chats" title="Create New Chat Group" data-i18n="[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" data-i18n="[placeholder]Search..." placeholder="Search..." maxlength="50" />
<select id="character_sort_order" title="Characters sorting order" data-i18n="[title]Characters sorting order">
<option data-field="name" data-order="asc" data-i18n="A-Z">A-Z</option>
<option data-field="name" data-order="desc" data-i18n="Z-A">Z-A</option>
<option data-field="create_date" data-order="desc" data-i18n="Newest">Newest</option>
<option data-field="create_date" data-order="asc" data-i18n="Oldest">Oldest</option>
<option data-field="fav" data-order="desc" data-rule="boolean" data-i18n="Favorites">Favorites</option>
<option data-field="date_last_chat" data-order="desc" data-i18n="Recent">Recent</option>
<option data-field="chat_size" data-order="desc" data-i18n="Most chats">Most chats</option>
<option data-field="chat_size" data-order="asc" data-i18n="Least chats">Least chats</option>
<option data-field="data_size" data-order="desc" data-i18n="Most tokens">Most tokens</option>
<option data-field="data_size" data-order="asc" data-i18n="Least tokens">Least tokens</option>
<option data-field="name" data-order="random" data-i18n="Random">Random</option>
</select>
</form>
<div class="rm_tag_controls">
<div class="tags rm_tag_filter"></div>
</div>
<hr>
</div>
<div id="rm_print_characters_pagination">
<i id="charListGridToggle" class="fa-solid fa-table-cells-large menu_button" title="Toggle character grid view"></i>
</div>
<div id="rm_print_characters_block" class="flexFlowColumn"></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>
<textarea id="dialogue_popup_input" class="text_pole" rows="1"></textarea>
<div id="dialogue_popup_controls">
<div id="dialogue_popup_ok" class="menu_button" data-i18n="Delete">Delete</div>
<div id="dialogue_popup_cancel" class="menu_button" data-i18n="Cancel">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
Definitions</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 data-i18n="Prompt Overrides (For OpenAI/Claude/Scale APIs, Window/OpenRouter, and Instruct Mode)">
Prompt Overrides <small>(For OpenAI/Claude/Scale APIs, Window/OpenRouter, and Instruct Mode)</small>
</h4>
<div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
</div>
<div class="inline-drawer-content">
<small data-i18n="Insert {{original}} into either box to include the respective default prompt from system settings.">Insert {{original}} into either box to include the respective default prompt from system settings.</small>
<div>
<h4 data-i18n="Main Prompt">Main Prompt</h4>
<textarea id="system_prompt_textarea" name="system_prompt" data-i18n="[placeholder]Any contents here will replace the default Main Prompt used for this character. (v2 spec: system_prompt)" placeholder="Any contents here will replace the default Main Prompt used for this character.&#10;(v2 spec: system_prompt)" form="form_create" class="text_pole" autocomplete="off" rows="3" maxlength="20000"></textarea>
<div class="extension_token_counter">
Tokens: <span data-token-counter="system_prompt_textarea">counting...</span>
</div>
</div>
<div>
<h4 data-i18n="Jailbreak">Jailbreak</h4>
<textarea id="post_history_instructions_textarea" name="post_history_instructions" data-i18n="[placeholder]Any contents here will replace the default Jailbreak Prompt used for this character. (v2 spec: post_history_instructions)" placeholder="Any contents here will replace the default Jailbreak Prompt used for this character.&#10;(v2 spec: post_history_instructions)" form="form_create" class="text_pole" autocomplete="off" rows="3" maxlength="20000"></textarea>
<div class="extension_token_counter">
Tokens: <span data-token-counter="post_history_instructions_textarea">counting...</span>
</div>
</div>
</div>
</div>
<hr>
<div class="inline-drawer">
<div class="inline-drawer-toggle inline-drawer-header">
<h4 data-i18n="Creator's Metadata (Not sent with the AI prompt)">
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">
<small data-i18n="Everything here is optional">Everything here is optional</small>
<div class="flex-container flexnowrap">
<div class="flex1">
<h4 data-i18n="Created by">Created by</h4>
<textarea id="creator_textarea" name="creator" data-i18n="[placeholder](Botmaker's name / Contact Info)" placeholder="(Botmaker's name / Contact info)" form="form_create" class="text_pole" autocomplete="off" rows="2" maxlength="2000"></textarea>
</div>
<div class="flex1">
<h4 data-i18n="Character Version">Character Version</h4>
<textarea id="character_version_textarea" name="character_version" data-i18n="[placeholder](If you want to track character versions)" placeholder="(If you want to track character versions)" form="form_create" class="text_pole" autocomplete="off" rows="2" maxlength="200"></textarea>
</div>
</div>
<div class="flex-container flexnowrap">
<div class="flex1">
<h4 data-i18n="Creator's Notes">Creator's Notes</h4>
<textarea id="creator_notes_textarea" name="creator_notes" data-i18n="[placeholder](Describe the bot, give use tips, or list the chat models it has been tested on. This will be displayed in the character list.)" placeholder="(Describe the bot, give use tips, or list the chat models it has been tested on. This will be displayed in the character list.)" form="form_create" class="text_pole" autocomplete="off" rows="4" maxlength="20000"></textarea>
</div>
<div class="flex1">
<h4 data-i18n="Tags to Embed">Tags to Embed</h4>
<textarea id="tags_textarea" name="tags" data-i18n="[placeholder](Write a comma-separated list of tags)" placeholder="(Write a comma-separated list of tags)" form="form_create" class="text_pole" autocomplete="off" rows="4" maxlength="2000"></textarea>
</div>
</div>
</div>
</div>
<hr>
<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" data-i18n="[placeholder](A brief description of the personality)" placeholder="(A brief description of the personality)" form="form_create" class="text_pole" autocomplete="off" rows="1" maxlength="20000"></textarea>
<div class="extension_token_counter">
Tokens: <span data-token-counter="personality_textarea" data-token-permanent="true">counting...</span>
</div>
</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" data-i18n="[placeholder](Circumstances and context of the interaction)" placeholder="(Circumstances and context of the interaction)" class="text_pole" maxlength="20000" value="" autocomplete="off" form="form_create" rows="1"></textarea>
<div class="extension_token_counter">
Tokens: <span data-token-counter="scenario_pole" data-token-permanent="true">counting...</span>
</div>
</div>
<div id="talkativeness_div">
<h4><span data-i18n="Talkativeness">Talkativeness</span></h4>
<h5 data-i18n="How often the character speaks in group chats!">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 class="slider_hint">
<span data-i18n="Shy">Shy</span>
<span data-i18n="Normal">Normal</span>
<span data-i18n="Chatty">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 data-i18n="Important to set the character's writing style.">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" data-i18n="[placeholder](Examples of chat dialog. Begin each example with START on a new line.)" placeholder="(Examples of chat dialog. Begin each example with &lt;START&gt; on a new line.)" form="form_create" maxlength="20000" rows="6"></textarea>
<div class="extension_token_counter">
Tokens: <span data-token-counter="mes_example_textarea">counting...</span>
</div>
</div>
<div id="character_popup_ok" class="menu_button" data-i18n="Save">Save</div>
</div>
<div id="shadow_select_chat_popup">
<div id="select_chat_popup">
<input type="text" id="select_chat_search" placeholder="Search..." autocomplete="off">
<div id="select_chat_import"> <!-- import chat popup header -->
<div id="chat_import_button" class="fa-solid fa-file-import 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>
<div id="background_template" class="template_element">
<div class="bg_example flex-container" bgfile="" class="bg_example_img" title="">
<div title="Rename background" bgfile="" class="bg_button bg_example_edit fa-solid fa-pencil"></div>
<div title="Delete background" bgfile="" class="bg_button bg_example_cross fa-solid fa-circle-xmark"></div>
<div class="BGSampleTitle">
</div>
</div>
</div>
<!-- templates for JS to reuse when needed -->
<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" data-i18n="[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" data-i18n="[placeholder]Type here..." 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>
<span data-i18n="Select a World Info file for"> Select a World Info file for <span class="character_name"></span></span>:
</h3>
</div>
<h4 data-i18n="Primary Lorebook">Primary Lorebook</h4>
<div class="range-block-counter justifyLeft flex-container flexFlowColumn margin-bot-10px">
<span data-i18n="A selected World Info will be bound to this character as its own Lorebook.">A selected World Info will be bound to this character as its own Lorebook.</span>
<span data-i18n="When generating an AI reply, it will be combined with the entries from a global World Info selector.">When generating an AI reply, it will be combined with the entries from a global World Info selector.</span>
<span data-i18n="Exporting a character would also export the selected Lorebook file embedded in the JSON data.">Exporting a character would also export the selected Lorebook file embedded in the JSON data.</span>
</div>
<div class="range-block-range wide100p">
<select class="character_world_info_selector wide100p">
<option value="">--- None ---</option>
</select>
</div>
<div class="range-block-title">
<h4>
<span data-i18n="Additional Lorebooks">Additional Lorebooks</span>
</h4>
</div>
<div class="range-block-counter justifyLeft flex-container flexFlowColumn margin-bot-10px">
<span data-i18n="Associate one or more auxillary Lorebooks with this character.">Associate one or more auxillary Lorebooks with this character.</span><br>
<span data-i18n="NOTE: These choices are optional and won't be preserved on character export!">NOTE: These choices are optional and won't be preserved on character export!</span>
</div>
<div class="range-block-range wide100p">
<select class="character_extra_world_info_selector wide100p" multiple>
<option value="" data-i18n="-- World Info not found --">-- World Info not found --</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-pencil" data-i18n="[title]Rename chat file"></div>
<div title="Export JSONL chat file" data-format="jsonl" class="exportRawChatButton fa-solid fa-file-export" data-i18n="[title]Export JSONL chat file"></div>
<div title="Download chat as plain text document" data-format="txt" class="exportChatButton fa-solid fa-file-lines" data-i18n="[title]Download chat as plain text document"></div>
<div title="Delete chat file" file_name="" class="PastChat_cross fa-solid fa-skull" data-i18n="[title]Delete chat file"></div>
</div>
</div>
</div>
<div id="tag_view_template" class="template_element">
<div class="tag_view_item">
<div class="tagColorPickerHolder"></div>
<div class="tagColorPicker2Holder"></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" data-i18n="[title]Delete tag"></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 flex1">
<label for="key">
<small>
<span data-i18n="Keywords">
Keywords
</span>
<span>(UID:&nbsp;
<span class="world_entry_form_uid_value"></span>
)
</span>
</small>
<small class="displayNone">
<span data-i18n="Comma separated (required)">
Comma separated (required)
</span>
</small>
</label>
<textarea class="text_pole keyprimarytextpole" name="key" rows="1" data-i18n="[placeholder]Comma separated (required)" placeholder="Comma separated (required)" maxlength="1000"></textarea>
</div>
<div class="flex-container widthFitContent alignItemsFlexEnd">
<select name="entryLogicType" class="height32px widthFitContent margin0">
<option value="0">AND</option>
<option value="1">NOT</option>
</select>
</div>
<div class="world_entry_form_control keysecondary flex1">
<label for="keysecondary">
<small>
<span data-i18n="Secondary Required Keywords">
Optional Filter
</span>
</small>
<small class="displayNone">
<span data-i18n="Comma seperated (ignored if empty)">
Comma seperated (ignored if empty)
</span>
</small>
</label>
<textarea class="text_pole keysecondarytextpole" name="keysecondary" rows="1" data-i18n="[placeholder]Comma separated (ignored if empty)" placeholder="Comma separated (ignored if empty)" maxlength="1000"></textarea>
</div>
</div>
<div class="fa-fw 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 flex1">
<label for="content ">
<small>
<span data-i18n="Content">
Content
<span>(Tokens:&nbsp; <span class="world_entry_form_token_counter" data-first-run="true">counting...</span>)
</span>
</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" data-i18n="[placeholder]What this keyword should mean to the AI, sent verbatim" 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 flex1">
<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" data-i18n="[placeholder]Not sent to the AI" placeholder="Not sent to AI"></textarea>
</div>
</div>
</div>
<div class="flex-container flexFlowColumn flexNoGap wide100p">
<label for="characterFilter" class="range-block-title justifyLeft">
<small data-i18n="Filter to Character(s)">Filter to Character(s)</small>
</label>
<div class="range-block-range">
<select name="characterFilter" multiple>
<option value="">
<span data-i18n="-- Characters not found --">-- Characters not found --</span>
</option>
</select>
</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 alignitemscenter">
<input type="checkbox" name="disable" />
<span data-i18n="Disable">Disable</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="useProbability" />
<span data-i18n="Use Probability">Use Probability</span>
</label>
<label class="checkbox flex-container">
<input type="checkbox" name="addMemo">
<span data-i18n="Add Memo">Add Memo</span>
</label>
<label class="checkbox flex-container alignitemscenter">
<input type="checkbox" name="exclude_recursion" />
<span data-i18n="Exclude from recursion">
Non-recursable
</span>
</label>
<label class="checkbox flex-container alignitemscenter">
<input type="checkbox" name="character_exclusion" />
<span data-i18n="Character Exclusion">
Character Exclusion
</span>
</label>
</div>
<!--
<div name="injectioStratBlock" class="world_entry_form_control world_entry_form_radios wi-enter-footer-text ">
<label for="injectionStrat">Injection:</label>
<small>
<select name="injectionStrat">
<option value="0">Normal</option>
<option value="1">Constant</option>
<option value="2">Disabled</option>
</select>
</small>
</div>
-->
<div name="PositionBlock" class="world_entry_form_control world_entry_form_radios wi-enter-footer-text ">
<label for="position" data-i18n="Position:">Position:</label>
<small>
<select name="position">
<option value="0" data-i18n="Before Char Defs">Before Char Defs</option>
<option value="1" data-i18n="After Char Defs">After Char Defs</option>
<option value="2" data-i18n="Before AN">Before AN</option>
<option value="3" data-i18n="After AN">After AN</option>
<option value="4" data-i18n="at Depth">at Depth</option>
</select>
</small>
</div>
<div class="world_entry_form_control wi-enter-footer-text flex-container flexNoGap ">
<label for="depth" data-i18n="Depth:">Depth:</label>
<input class="text_pole wideMax100px margin0" type="number" name="depth" placeholder="" min="0" max="10000" />
</div>
<div class="world_entry_form_control wi-enter-footer-text flex-container flexNoGap ">
<label for="order" data-i18n="Order:">Order:</label>
<input class="text_pole wideMax100px margin0" type="number" name="order" placeholder="" min="0" max="10000" />
</div>
<div class="world_entry_form_control wi-enter-footer-text flex-container flexNoGap probabilityContainer">
<label for="probability" data-i18n="Probability:"></label>Probability:</label>
<input class="text_pole wideMax100px margin0" type="number" name="probability" placeholder="" min="0" max="100" />
</div>
<input class="menu_button delete_entry_button" type="submit" data-i18n="Delete Entry" value="Delete Entry" />
</div>
<div class="wide100p">
<hr>
</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 character_select_container">
<div class="wide100p character_name_block">
<span class="ch_name"></span>
<small class="character_version"></small>
<small class="ch_avatar_url"></small>
</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" data-i18n="[placeholder]Type here..." 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>
</form>
</div>
</div>
</div>
<div id="novelai_logit_bias_template" class="template_element">
<div class="novelai_logit_bias_form">
<input class="novelai_logit_bias_text text_pole" data-i18n="[placeholder]Type here..." placeholder="type here..." />
<input class="novelai_logit_bias_value text_pole" type="number" min="-2" value="0" max="2" step="0.01" />
<i class="menu_button fa-solid fa-xmark novelai_logit_bias_remove"></i>
</div>
</div>
<div id="completion_prompt_manager_popup" class="drawer-content" style="display:none;">
<div id="completion_prompt_manager_popup_inspect">
<h3>Inspect</h3>
<div class="completion_prompt_manager_popup_entry">
<form class="completion_prompt_manager_popup_entry_form">
<div class="completion_prompt_manager_popup_entry_form_control">
<div class="completion_prompt_manager_popup_header">
<label for="completion_prompt_manager_popup_entry_form_prompt">
<span>Prompt List</span>
</label>
<a id="completion_prompt_manager_popup_close_button" title="close" class="fa-solid fa-close menu_button"></a>
</div>
<div class="text_muted">The list of prompts associated with this marker.</div>
<div id="completion_prompt_manager_popup_entry_form_inspect_list"></div>
</div>
</form>
</div>
</div>
<div id="completion_prompt_manager_popup_edit">
<h3>Edit</h3>
<div class="completion_prompt_manager_popup_entry">
<form class="completion_prompt_manager_popup_entry_form">
<div class="completion_prompt_manager_popup_entry_form_control">
<label for="completion_prompt_manager_popup_entry_form_name">
<span>Name</span>
</label>
<div class="text_muted">A name for this prompt.</div>
<input id="completion_prompt_manager_popup_entry_form_name" class="text_pole" type="text" name="name" />
</div>
<div class="completion_prompt_manager_popup_entry_form_control">
<label for="completion_prompt_manager_popup_entry_form_role">
<span>Role</span>
</label>
<div class="text_muted">To whom this message will be attributed.</div>
<select id="completion_prompt_manager_popup_entry_form_role" class="text_pole" name="role">
<option value="system">System</option>
<option value="user">User</option>
<option value="assistant">AI Assistant</option>
</select>
</div>
<div class="completion_prompt_manager_popup_entry_form_control">
<label for="completion_prompt_manager_popup_entry_form_prompt">
<span>Prompt</span>
</label>
<div class="text_muted">The prompt to be sent.</div>
<textarea id="completion_prompt_manager_popup_entry_form_prompt" class="text_pole" name="prompt">
</textarea>
</div>
<div class="completion_prompt_manager_popup_entry_form_footer">
<a id="completion_prompt_manager_popup_entry_form_close" title="close" class="fa-solid fa-close menu_button"></a>
<a id="completion_prompt_manager_popup_entry_form_reset" title="reset" class="fa-solid fa-undo menu_button"></a>
<a id="completion_prompt_manager_popup_entry_form_save" title="save" class="fa-solid fa-save menu_button" data-pm-prompt=""></a>
</div>
</form>
</div>
</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="mesIDDisplay"></div>
<div class="mes_timer"></div>
<div class="tokenCounterDisplay"></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" data-i18n="[title]Translate message"></div>
<div title="Generate Image" class="sd_message_gen fa-solid fa-paintbrush" data-i18n="[title]Generate Image"></div>
<div title="Narrate" class="mes_narrate fa-solid fa-bullhorn" data-i18n="[title]Narrate"></div>
<div title="Prompt" class="mes_prompt fa-solid fa-square-poll-horizontal " data-i18n="[title]Prompt"></div>
<div title="Create bookmark" class="mes_create_bookmark fa-regular fa-solid fa-book-bookmark" data-i18n="[title]Create Bookmark"></div>
<div title="Create branch" class="mes_create_branch fa-regular fa-code-branch" data-i18n="[title]Create Branch"></div>
<div title="Copy" class="mes_copy fa-solid fa-copy " data-i18n="[title]Copy"></div>
</div>
<div title="Open bookmark chat" class="mes_bookmark fa-solid fa-bookmark" data-i18n="[title]Open bookmark chat"></div>
<div title="Edit" class="mes_edit fa-solid fa-pencil " data-i18n="[title]Edit"></div>
</div>
<div class="mes_edit_buttons">
<div class="mes_edit_done menu_button fa-solid fa-check" title="Confirm" data-i18n="[title]Confirm"></div>
<div class="mes_edit_copy menu_button fa-solid fa-copy" title="Copy this message" data-i18n="[title]Copy this message"></div>
<div class="mes_edit_delete menu_button fa-solid fa-trash-can" title="Delete this message" data-i18n="[title]Delete this message">
</div>
<div class="mes_edit_up menu_button fa-solid fa-chevron-up " title="Move message up" data-i18n="[title]Move message up"></div>
<div class="mes_edit_down menu_button fa-solid fa-chevron-down" title="Move message down" data-i18n="[title]Move message down">
</div>
<div class="mes_edit_cancel menu_button fa-solid fa-xmark" title="Cancel" data-i18n="[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" data-i18n="[title]Enlarge"></div>
<div title="Delete" class="right_menu_button fa-lg fa-solid fa-trash-can mes_img_delete" data-i18n="[title]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="onboarding_template" class="template_element">
<div class="onboarding">
<h3 data-i18n="Welcome to SillyTavern!">Welcome to SillyTavern!</h3>
<ul class="justifyLeft margin-bot-10px">
<li>Read the <a href="https://docs.sillytavern.app/" target="_blank">Official Documentation</a>.</li>
<li>Type <code>/help</code> in chat for commands and macros.</li>
<li>Join the <a href="https://discord.gg/RZdyAEUPvj" target="_blank">Discord server</a> for info and announcements.</li>
</ul>
<b>SillyTavern is aimed at advanced users.</b>
<div>
If you're new to this, enable the simplified UI mode below.
</div>
<label class="checkbox_label">
<input type="checkbox" name="enable_simple_mode" />
<span data-i18n="Enable simple UI mode">Enable simple UI mode</span>
</label>
<div class="justifyLeft margin-bot-10px">
Before you get started, you must select a user name.
This can be changed at any time via the <code><i class="fa-solid fa-face-smile"></i></code> icon.
</div>
<h4>User Name:</h4>
</div>
</div>
<div id="group_member_template" class="template_element">
<div class="group_member">
<div class="avatar">
<img alt="Avatar" src="" />
</div>
<div class="group_member_name">
<div class="ch_name"></div>
<div class="tags tags_inline"></div>
</div>
<input class="ch_fav" value="" hidden />
<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" data-i18n="[title]Temporarily disable automatic replies from this character"></div>
<div title="Enable automatic replies from this character" data-action="enable" class="right_menu_button fa-solid fa-lg fa-comment-slash" data-i18n="[title]Enable automatic replies from this character"></div>
<div title="Trigger a message from this character" data-action="speak" class="right_menu_button fa-solid fa-lg fa-comment" data-i18n="[title]Trigger a message from this character"></div>
<div class="flexFlowColumn flex-container">
<div title="Move up" data-action="up" class="right_menu_button fa-solid fa-chevron-up" data-i18n="[title]Move up"></div>
<div title="Move down" data-action="down" class="right_menu_button fa-solid fa-chevron-down" data-i18n="[title]Move down"></div>
</div>
<div title="View character card" data-action="view" class="right_menu_button fa-solid fa-xl fa-image-portrait" data-i18n="[title]View character card"></div>
<div title="Remove from group" data-action="remove" class="right_menu_button fa-solid fa-2xl fa-xmark" data-i18n="[title]Remove from group">
</div>
<div title="Add to group" data-action="add" class="right_menu_button fa-solid fa-2xl fa-plus" data-i18n="[title]Add to group"></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 group_name_block">
<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" title="Add a character/group to favorites to display it here!">
<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" data-i18n="[title]Add"></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" data-i18n="[placeholder](This will be the first message from the character that starts every chat)" 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 id="floatingPrompt" class="drawer-content flexGap5">
<div class="panelControlBar flex-container">
<div id="floatingPromptheader" class="fa-solid fa-grip drag-grabber"></div>
<div id="ANClose" class="fa-solid fa-circle-xmark"></div>
</div>
<div name="floatingPromptHolder" class="scrollY">
<div class="inline-drawer">
<div id="ANBlockToggle" class="inline-drawer-toggle inline-drawer-header">
<b>Author's Note</b>
<div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
</div>
<div class="inline-drawer-content">
<small>
<b>Unique to this chat</b>.<br>
Bookmarks inherit the Note from their parent, and can be changed individually after that.<br>
</small>
<textarea id="extension_floating_prompt" class="text_pole" rows="8" maxlength="10000"></textarea>
<div class="extension_token_counter">
Tokens: <span id="extension_floating_prompt_token_counter">0</span>
</div>
<div class="floating_prompt_radio_group">
<label>
<input type="radio" name="extension_floating_position" value="2" />
Before Main Prompt / Story String
</label>
<label>
<input type="radio" name="extension_floating_position" value="0" />
After Main Prompt / Story String
</label>
<label>
<input type="radio" name="extension_floating_position" value="1" />
In-chat @ Depth <input id="extension_floating_depth" class="text_pole widthUnset" type="number" min="0" max="99" />
</label>
</div>
<!--<label for="extension_floating_interval">In-Chat Insertion Depth</label>-->
<label for="extension_floating_interval">Insertion Frequency</label>
<input id="extension_floating_interval" class="text_pole widthUnset" type="number" min="0" max="999" /><small> (0 = Disable, 1 = Always)</small>
<br>
<span>User inputs until next insertion: <span id="extension_floating_counter">(disabled)</span></span>
</div>
</div>
<hr class="sysHR">
<div class="inline-drawer">
<div id="charaANBlockToggle" class="inline-drawer-toggle inline-drawer-header">
<b>Character Author's Note</b>
<div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
</div>
<div class="inline-drawer-content">
<small>Will be automatically added as the author's note for this character. Will be used in groups, but
can't be modified when a group chat is open.</small>
<textarea id="extension_floating_chara" class="text_pole" rows="8" maxlength="10000" placeholder="Example:&#10;[Scenario: wacky adventures; Genre: romantic comedy; Style: verbose, creative]"></textarea>
<div class="extension_token_counter">
Tokens: <span id="extension_floating_chara_token_counter">0</span>
</div>
<label class="checkbox_label" for="extension_use_floating_chara">
<input id="extension_use_floating_chara" type="checkbox" />
<span data-i18n="Use character author's note">Use character author's note</span>
</label>
<div class="floating_prompt_radio_group">
<label>
<input type="radio" name="extension_floating_char_position" value="0" />
Replace Author's Note
</label>
<label>
<input type="radio" name="extension_floating_char_position" value="1" />
Top of Author's Note
</label>
<label>
<input type="radio" name="extension_floating_char_position" value="2" />
Bottom of Author's Note
</label>
</div>
</div>
</div>
<hr class="sysHR">
<div class="inline-drawer">
<div id="defaultANBlockToggle" class="inline-drawer-toggle inline-drawer-header">
<b>Default Author's Note</b>
<div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
</div>
<div class="inline-drawer-content">
<small>Will be automatically added as the Author's Note for all new chats.</small>
<textarea id="extension_floating_default" class="text_pole" rows="8" maxlength="10000" placeholder="Example:&#10;[Scenario: wacky adventures; Genre: romantic comedy; Style: verbose, creative]"></textarea>
<div class="extension_token_counter">
Tokens: <span id="extension_floating_default_token_counter">0</span>
</div>
<div class="floating_prompt_radio_group">
<label>
<input type="radio" name="extension_default_position" value="0" />
After Main Prompt / Story String
</label>
<label>
<input type="radio" name="extension_default_position" value="1" />
In-chat @ Depth <input id="extension_default_depth" class="text_pole widthUnset" type="number" min="0" max="99" />
</label>
</div>
<label for="extension_default_interval">Insertion Frequency</label>
<input id="extension_default_interval" class="text_pole widthUnset" type="number" min="0" max="999" /><small> (0 = Disable, 1 = Always)</small>
</div>
</div>
</div>
</div>
</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" data-i18n="[placeholder]Not connected to API!" placeholder="Not connected to API!" name="text"></textarea>
<div id="send_but_sheld">
<div id="mes_stop" title="Abort request" class="mes_stop" data-i18n="[title]Abort request">
<i class="fa-solid fa-circle-stop"></i>
</div>
<div id="mes_continue" class="fa-fw fa-solid fa-arrow-right displayNone" title="Continue the last message" data-i18n="[title]Continue the last message"></div>
<div id="send_but" class="fa-solid fa-paper-plane displayNone" title="Send a message" data-i18n="[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_close_chat" class="displayNone">
<i class="fa-lg fa-solid fa-times"></i>
<span data-i18n="Close chat">Close chat</span>
</a>
<a id="option_settings" class="displayNone">
<i class="fa-lg fa-solid fa-cog"></i>
<span data-i18n="Toggle Panels">Toggle Panels</span>
</a>
<a id="option_toggle_AN">
<i class="fa-lg fa-solid fa-note-sticky"></i>
<span data-i18n="Author's Note">Author's Note</span>
</a>
<div data-newbie-hidden id="options_advanced">
</div>
<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>
<hr>
<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_close_chat">
<i class="fa-lg fa-solid fa-times"></i>
<span data-i18n="Close chat">Close 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" data-i18n="[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_continue" title="Continue the last message" data-i18n="[title]Continue the last message">
<i class="fa-lg fa-solid fa-arrow-right"></i>
<span data-i18n="Continue">Continue</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>
<div id="zoomed_avatar_template" class="template_element">
<div class="zoomed_avatar">
<div id="" class="fa-solid fa-grip drag-grabber"></div>
<img class="zoomed_avatar_img" src="">
</div>
</div>
<template id="generic_draggable_template">
<div class="draggable">
<div class="panelControlBar flex-container">
<div class="fa-solid fa-grip drag-grabber"></div>
<div class="fa-solid fa-circle-xmark dragClose"></div>
</div>
</div>
</template>
<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" data-i18n="[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." data-i18n="[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_persona_image" title="Change persona image" data-i18n="[title]Change persona image">
<i class="fa-solid fa-image"></i>
</button>
<button class="menu_button delete_avatar" title="Delete persona" data-i18n="[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
toastr.options.positionClass = "toast-top-center"; // Where to position the toast container
</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