Files
SillyTavern/public/index.html
2023-05-30 20:37:45 +03:00

2836 lines
173 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="darkreader-lock">
<link href="webfonts/NotoSans/stylesheet.css" rel="stylesheet">
<!-- fontawesome webfonts-->
<link href="css/fontawesome.css" rel="stylesheet">
<link href="css/solid.css" rel="stylesheet">
<link href="css/jquery-ui.min.css" rel="stylesheet">
<link href="css/bright.min.css" rel="stylesheet">
<link href="css/cropper.min.css" rel="stylesheet">
<link href="css/toastr.min.css" rel="stylesheet">
<link rel="apple-touch-icon" sizes="57x57" href="img/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="img/apple-icon-144x144.png" />
<script>
const documentHeight = () => {
const doc = document.documentElement
doc.style.setProperty('--doc-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', documentHeight)
documentHeight()
</script>
<script src="scripts/jquery-3.5.1.min.js"></script>
<script src="scripts/jquery-ui.min.js"></script>
<script src="scripts/jquery.transit.min.js"></script>
<script src="scripts/jquery-cookie-1.4.1.min.js"></script>
<script src="scripts/showdown.min.js"></script>
<script src="scripts/showdown-katex.min.js"></script>
<script src="scripts/popper.js"></script>
<script src="scripts/purify.min.js"></script>
<script src="scripts/highlight.min.js"></script>
<script src="scripts/moment.min.js"></script>
<script src="scripts/cropper.min.js"></script>
<script src="scripts/jquery-cropper.min.js"></script>
<script src="scripts/toastr.min.js"></script>
<script type="module" src="scripts/eventemitter.js"></script>
<script type="module" src="scripts/power-user.js"></script>
<script type="module" src="scripts/swiped-events.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="css/bg_load.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script type=module src="script.js"></script>
<script type="module" src="scripts/world-info.js"></script>
<script type="module" src="scripts/group-chats.js"></script>
<script type="module" src="scripts/kai-settings.js"></script>
<script type="module" src="scripts/textgen-settings.js"></script>
<script type="module" src="scripts/bookmarks.js"></script>
<script type="module" src="scripts/horde.js"></script>
<script type="module" src="scripts/poe.js"></script>
<script type="module" src="scripts/RossAscends-mods.js"></script>
<script type="module" src="scripts/slash-commands.js"></script>
<script type="module" src="scripts/tags.js"></script>
<script type="module" src="scripts/secrets.js"></script>
<script type="module" src="scripts/context-template.js"></script>
<script type="module" src="scripts/extensions.js"></script>
<script type="text/javascript" src="scripts/toolcool-color-picker.js"></script>
<title>SillyTavern</title>
</head>
<body class="no-blur">
<div id="bg_custom"></div>
<div id="bg1"></div>
<!-- top bar central settings buttons -->
<div id="top-bar">
</div>
<div id="top-settings-holder">
<!-- background selection menu -->
<div id="ai-config-button" class="drawer">
<div class="drawer-toggle drawer-header">
<div id="leftNavDrawerIcon" class="drawer-icon fa-solid fa-sliders closedIcon" title="AI Response Configuration"></div>
</div>
<div id="left-nav-panel" class="drawer-content fillLeft closedDrawer">
<div id="left-nav-panelheader" class="fa-solid fa-grip drag-grabber"></div>
<div id="lm_button_panel_pin_div" title="Locked = AI Configuration panel will stay open">
<input type="checkbox" id="lm_button_panel_pin">
<label for="lm_button_panel_pin">
<div class="unchecked fa-solid fa-lock-open "></div>
<div class="checked fa-solid fa-lock "></div>
</label>
</div>
<div class="toggle-description flex-container justifyLeft wide100p editable-slider-notification">
Click slider numbers to input manually.
</div>
<div class="scrollableInner">
<div class="flex-container">
<div id="respective-presets-block" class="width100p">
<div id="kobold_api-presets">
<h3>Kobold Presets
<a href="/notes#basicsettings" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</h3>
<select id="settings_perset">
<option value="gui">GUI KoboldAI Settings</option>
</select>
</div>
<div id="novel_api-presets">
<h3>
NovelAI Presets
<a href="/notes#settings" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</h3>
<select id="settings_perset_novel">
<option value="gui">Default</option>
</select>
</div>
<div id="openai_api-presets">
<div>
<h4>OpenAI Presets</h4>
<div class="openai_preset_buttons">
<select id="settings_perset_openai">
<option value="gui">Default</option>
</select>
<i id="update_oai_preset" class="menu_button fa-solid fa-save" title="Update current preset"></i>
<i id="new_oai_preset" class="menu_button fa-solid fa-plus" title="Create new preset"></i>
<i id="delete_oai_preset" class="menu_button fa-solid fa-trash-can" title="Delete the preset"></i>
</div>
</div>
</div>
<div id="textgenerationwebui_api-presets">
<h3>Text Gen WebUI (ooba) presets</h3>
<select id="settings_preset_textgenerationwebui">
</select>
</div>
<div id="poe_api-presets">
<h3>Poe.com API Settings</h3>
<!-- just a placeholder title for the Poe.com settings panel-->
</div>
<hr>
</div>
<div id="common-gen-settings-block" class="width100p">
<div id="pro-settings-block">
<div id="amount_gen_block" class="range-block">
<div class="range-block-title">
Response Length (tokens)
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="amount_gen" name="volume" min="16" max="1024" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="amount_gen" id="amount_gen_counter">
select
</div>
</div>
</div>
</div>
</div>
<div id="max_context_block" class="range-block">
<div class="range-block-title">
Context Size (tokens)
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="max_context" name="volume" min="512" max="2048" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="max_context" id="max_context_counter">
select
</div>
</div>
</div>
</div>
<div class="max_context_unlocked_block">
<label class="checkbox_label">
<input id="max_context_unlocked" type="checkbox" />
Unlocked
<div id="max_context_unlocked_warning">
<b class="neutral_warning">ATTENTION!</b>
Only select models support context sizes greater than 2048 tokens.
Proceed only if you know what you're doing.
</div>
</label>
</div>
</div>
<hr>
</div>
<div id="respective-ranges-and-temps" class="width100p">
<div id="range_block">
<div class="range-block">
<div class="range-block-title">
Temperature
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="temp" name="volume" min="0.1" max="2.0" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="temp" id="temp_counter">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Rep. Pen.
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="rep_pen" name="volume" min="1" max="1.5" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="rep_pen" id="rep_pen_counter">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Rep. Pen. Range
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="rep_pen_range" name="volume" min="0" max="2048" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="rep_pen_range" id="rep_pen_range_counter">
select
</div>
</div>
</div>
</div>
</div>
<div id="range_block_novel">
<div class="range-block-title">
Temperature
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="temp_novel" name="volume" min="0.1" max="2.0" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="temp_novel" id="temp_counter_novel">
select
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Rep. Pen.
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="rep_pen_novel" name="volume" min="1" max="1.5" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="rep_pen_novel" id="rep_pen_counter_novel">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Rep. Pen. Range.
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="rep_pen_size_novel" name="volume" min="0" max="2048" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="rep_pen_size_novel" id="rep_pen_size_counter_novel">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Rep. Pen. Slope
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="rep_pen_slope_novel" name="volume" min="0" max="10" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="rep_pen_slope_novel" id="rep_pen_slope_counter_novel">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Rep. Pen. Freq.
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="rep_pen_freq_novel" name="volume" min="0" max="1" step="0.00001">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="rep_pen_freq_novel" id="rep_pen_freq_counter_novel">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Rep. Pen. Presence
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="rep_pen_presence_novel" name="volume" min="0" max="1" step="0.001">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="rep_pen_presence_novel" id="rep_pen_presence_counter_novel">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Tail Free Sampling
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="tail_free_sampling_novel" name="volume" min="0" max="1" step="0.001">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="tail_free_sampling_novel" id="tail_free_sampling_counter_novel">
select
</div>
</div>
</div>
</div>
</div>
<div id="range_block_textgenerationwebui">
<div class="range-block">
<div class="range-block-title">
Temperature
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="temp_textgenerationwebui" name="volume" min="0.1" max="2.0" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="temp_textgenerationwebui" id="temp_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Rep. Pen.
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="rep_pen_textgenerationwebui" name="volume" min="1" max="1.5" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="rep_pen_textgenerationwebui" id="rep_pen_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Encoder Rep. Pen.
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="encoder_rep_pen_textgenerationwebui" name="volume" min="0.8" max="1.5" step="0.01" />
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="encoder_rep_pen_textgenerationwebui" id="encoder_rep_pen_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
No Repeat Ngram Size
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="no_repeat_ngram_size_textgenerationwebui" name="volume" min="0" max="20" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="no_repeat_ngram_size_textgenerationwebui" id="no_repeat_ngram_size_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Min Length
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="min_length_textgenerationwebui" name="volume" min="0" max="2000" step="1" />
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="min_length_textgenerationwebui" id="min_length_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
</div>
<div id="range_block_openai">
<div class="range-block">
<div class="range-block-title justifyLeft">
OpenAI Reverse Proxy
</div>
<div class="toggle-description justifyLeft">
Alternative server URL (leave empty to use the default value).<br>
<div id="ReverseProxyWarningMessage" class="reverse_proxy_warning">
<b>Remove your real OAI API Key from the API panel BEFORE typing anything into this box.</b>
<hr>
<b>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">
<div class="range-block-title justifyLeft">
<label for="legacy_streaming" class="checkbox_label">
<input id="legacy_streaming" type="checkbox" />
Legacy Streaming Processing
</label>
</div>
<div class="toggle-description justifyLeft">
Enable this if the streaming doesn't work with your proxy.
</div>
</div>
<div class="range-block">
<label class="checkbox_label">
<input id="oai_max_context_unlocked" type="checkbox" />
Unlocked Context Size
</label>
<div class="toggle-description justifyLeft">
Unrestricted maximum value for the context size slider. Enable only if you know what you're doing.
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Context Size (tokens)
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="openai_max_context" name="volume" min="512" max="4095" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="openai_max_context" id="openai_max_context_counter">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Max Response Length (tokens)
</div>
<div class="wide100p">
<input type="number" id="openai_max_tokens" name="openai_max_tokens" class="text_pole" min="50" max="1000">
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Temperature
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="temp_openai" name="volume" min="0" max="2.0" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="temp_openai" id="temp_counter_openai">select</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Frequency Penalty
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="freq_pen_openai" name="volume" min="-2" max="2" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="freq_pen_openai" id="freq_pen_counter_openai">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Presence Penalty
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="pres_pen_openai" name="volume" min="-2" max="2" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="pres_pen_openai" id="pres_pen_counter_openai">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Top-p
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="top_p_openai" name="volume" min="0" max="1" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="top_p_openai" id="top_p_counter_openai">
select
</div>
</div>
</div>
</div>
</div>
<div id="range_block_poe">
<div class="range-block">
<label for="poe_streaming" class="checkbox_label widthFreeExpand">
<input id="poe_streaming" type="checkbox" />
Streaming
</label>
<div class="toggle-description justifyLeft">
Display bot response text chunks as they are generated.
</div>
</div>
<div class="range-block">
<label for="poe_auto_purge" class="checkbox_label widthFreeExpand">
<input id="poe_auto_purge" type="checkbox">
Auto-purge API context (save JB)
</label>
<div class="toggle-description justifyLeft">
Delete non-JB messages from Poe context before sending a new prompt. Prevents auto-jailbreak message from being pushed out of context.
</div>
</div>
<div class="range-block">
<label for="poe_auto_jailbreak" class="checkbox_label widthFreeExpand">
<input id="poe_auto_jailbreak" type="checkbox">
Auto-jailbreak
</label>
<div class="toggle-description justifyLeft">
Send the jailbreak message before first generation after page refresh.
</div>
</div>
<div class="range-block">
<label for="poe_character_nudge" class="checkbox_label widthFreeExpand">
<input id="poe_character_nudge" type="checkbox" />
Send character note
</label>
<div class="toggle-description justifyLeft">
Sent with every prompt to modify bot responses.
</div>
<!-- <div class="range-block-range-and-counter">
<div class="range-block-range">
</div>
</div> -->
</div>
</div>
<hr>
</div>
<div id="advanced-ai-config-block" class="width100p">
<div id="kobold_api-settings">
<div id="kobold-advanced-config">
<div class="range-block">
<div class="range-block-title">
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">
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">
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">
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">
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">
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" />
Single-line mode
</label>
</div>
</div>
</div>
<div id="novel_api-settings">
</div>
<div id="textgenerationwebui_api-settings">
<div class="range-block">
<div class="range-block-title">
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">
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">
Typical P
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="typical_p_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="typical_p_textgenerationwebui" id="typical_p_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Top A
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="top_a_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="top_a_textgenerationwebui" id="top_a_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Tail Free Sampling
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="tfs_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="tfs_textgenerationwebui" id="tfs_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<label class="checkbox_label" for="streaming_textgenerationwebui">
<input type="checkbox" id="streaming_textgenerationwebui" />
Streaming
</label>
</div>
<div class="range-block">
<label class="checkbox_label" for="do_sample_textgenerationwebui">
<input type="checkbox" id="do_sample_textgenerationwebui" />
Do Sample
</label>
</div>
<div class="range-block">
<label class="checkbox_label" for="add_bos_token_textgenerationwebui">
<input type="checkbox" id="add_bos_token_textgenerationwebui" />
Add BOS Token
</label>
<div class="toggle-description justifyLeft">
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" />
Ban EOS Token
</label>
<div class="toggle-description justifyLeft">
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" />
Skip Special Tokens
</label>
</div>
<hr>
<h4>Beam search</h4>
<div class="range-block">
<div class="range-block-title">
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">
Length Penalty
</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" />
Early Stopping
</label>
</div>
<hr>
<h4>Contrastive search</h4>
<div class="range-block">
<div class="range-block-title">
Penalty Alpha
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="penalty_alpha_textgenerationwebui" name="volume" min="0" max="5" step="0.05" />
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="penalty_alpha_textgenerationwebui" id="penalty_alpha_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Seed
</div>
<input type="number" id="seed_textgenerationwebui" class="text_pole wide100p" maxlength="100" />
</div>
</div>
<div id="openai_settings">
<div class="">
<div class="range-block">
<label title="Inserts jailbreak as a last system message" class="checkbox_label widthFreeExpand">
<input id="jailbreak_system" type="checkbox" />
Send Jailbreak
</label>
<div class="toggle-description justifyLeft">
Inserts jailbreak as a last system message.<br>
This tells the AI to ignore its usual content restrictions.
</div>
</div>
<div class="range-block">
<label class="checkbox_label widthFreeExpand" for="nsfw_toggle">
<input id="nsfw_toggle" type="checkbox" checked>
NSFW Encouraged
</label>
<div class="toggle-description justifyLeft">
Tell the AI that NSFW is allowed.
</div>
</div>
<div class="range-block">
<label title="NSFW block goes first in the resulting prompt" class="checkbox_label widthFreeExpand">
<input id="nsfw_first" type="checkbox" />
NSFW Prioritized
</label>
<div class="toggle-description justifyLeft">
NSFW prompt text goes first in the prompt to emphasize its effect.
</div>
</div>
<div class="range-block">
<label for="stream_toggle" title="Enables OpenAI completion streaming" class="checkbox_label widthFreeExpand">
<input id="stream_toggle" type="checkbox" />
Streaming
</label>
<div class="toggle-description justifyLeft">
Display the response bit by bit as it is generated.<br>
When this is off, responses will be displayed all at once when they are complete.
</div>
</div>
<div class="range-block">
<label title="Use OAI knowledge base to enhance definitions for public figures and known fictional characters" class="checkbox_label widthFreeExpand">
<input id="enhance_definitions" type="checkbox" />
Enhance Definitions
</label>
<div class="toggle-description justifyLeft">
Use OAI knowledge base to enhance definitions for public figures and known fictional characters
</div>
</div>
<div class="range-block">
<label for="wrap_in_quotes" title="Wrap user messages in quotes before sending" class="checkbox_label widthFreeExpand">
<input id="wrap_in_quotes" type="checkbox" />
Wrap in Quotes
</label>
<div class="toggle-description justifyLeft">
Wrap entire user message in quotes before sending.<br>
Leave off if you use quotes manually for speech.
</div>
</div>
</div>
<br>
<div class="range-block">
<div class="range-block-title openai_restorable">
<span>Main prompt</span>
<div id="main_prompt_restore" title="Restore default prompt" class="right_menu_button">
<div class="fa-solid fa-clock-rotate-left "></div>
</div>
</div>
<div class="toggle-description justifyLeft">
The main prompt used to set the model behavior
</div>
<div class="wide100p">
<textarea id="main_prompt_textarea" class="text_pole textarea_compact" name="main_prompt" rows="6" placeholder=""></textarea>
</div>
</div>
<div class="range-block">
<div class="range-block-title openai_restorable">
<span>NSFW prompt</span>
<div id="nsfw_prompt_restore" title="Restore default prompt" class="right_menu_button">
<div class="fa-solid fa-clock-rotate-left "></div>
</div>
</div>
<div class="toggle-description justifyLeft">
Prompt that is used when the NSFW toggle is ON
</div>
<div class="wide100p">
<textarea id="nsfw_prompt_textarea" class="text_pole textarea_compact" name="nsfw_prompt" rows="6" placeholder=""></textarea>
</div>
</div>
<div class="range-block">
<div class="range-block-title openai_restorable">
<span>NSFW avoidance prompt</span>
<div id="nsfw_avoidance_prompt_restore" title="Restore default prompt" class="right_menu_button">
<div class="fa-solid fa-clock-rotate-left"></div>
</div>
</div>
<div class="toggle-description justifyLeft">
Prompt that is used when the NSFW toggle is OFF
</div>
<div class="wide100p">
<textarea id="nsfw_avoidance_prompt_textarea" class="text_pole textarea_compact" name="nsfw_prompt" rows="2" placeholder=""></textarea>
</div>
</div>
<div class="range-block">
<div class="range-block-title openai_restorable">
<span>Jailbreak prompt</span>
<div id="jailbreak_prompt_restore" title="Restore default prompt" class="right_menu_button">
<div class="fa-solid fa-clock-rotate-left"></div>
</div>
</div>
<div class="toggle-description justifyLeft">
Prompt that is used when the Jailbreak toggle is on
</div>
<div class="wide100p">
<textarea id="jailbreak_prompt_textarea" class="text_pole textarea_compact" name="jailbreak_prompt" rows="6" placeholder=""></textarea>
</div>
</div>
<div class="inline-drawer wide100p">
<div class="inline-drawer-toggle inline-drawer-header margin-bot-10px">
<b>Advanced prompt bits</b>
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div>
<div class="inline-drawer-content">
<div class="range-block">
<div class="range-block-title openai_restorable">
<span>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">
Prompt that is used for Impersonation function
</div>
<div class="wide100p">
<textarea id="impersonation_prompt_textarea" class="text_pole textarea_compact" name="impersonation_prompt" rows="6" placeholder=""></textarea>
</div>
</div>
<div class="range-block">
<div class="range-block-title openai_restorable">
<span>World Info format template</span>
<div id="wi_format_restore" title="Restore default format" class="right_menu_button">
<div class="fa-solid fa-clock-rotate-left"></div>
</div>
</div>
<div class="toggle-description justifyLeft">
Wraps activated World Info entries before inserting into the prompt. Use <tt>{0}</tt> to mark a place where the content is inserted.
</div>
<div class="wide100p">
<textarea id="wi_format_textarea" class="text_pole textarea_compact" rows="3" placeholder=""></textarea>
</div>
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title openai_restorable">
Logit Bias
</div>
<div class="toggle-description justifyLeft">
Helps to ban or reenforce the usage of certain words
</div>
<div class="openai_logit_bias_preset_form">
<select id="openai_logit_bias_preset">
</select>
<i title="New preset" id="openai_logit_bias_new_preset" class="menu_button fa-solid fa-plus"></i>
<i title="Import preset" id="openai_logit_bias_import_preset" class="menu_button fa-solid fa-upload"></i>
<i title="Export preset" id="openai_logit_bias_export_preset" class="menu_button fa-solid fa-download"></i>
<i title="Delete preset" id="openai_logit_bias_delete_preset" class="menu_button fa-solid fa-trash-can"></i>
<input id="openai_logit_bias_import_file" type="file" accept=".json" hidden />
</div>
<div class="inline-drawer wide100p">
<div class="inline-drawer-toggle inline-drawer-header">
<b>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">
Add bias entry
</div>
<div class="openai_logit_bias_list"></div>
</div>
</div>
</div>
</div>
<div id="poe_settings">
<div class="range-block">
<div class="range-block-title justifyLeft poe_restorable">
<span>Jailbreak activation message</span>
<div id="poe_activation_message_restore" title="Restore default jailbreak" class="right_menu_button">
<div class="fa-solid fa-clock-rotate-left"></div>
</div>
</div>
<div class="toggle-description justifyLeft">
Message to send when auto-jailbreak is on.
</div>
<div class="wide100p">
<textarea id="poe_activation_message" class="text_pole textarea_compact" rows="6"></textarea>
</div>
</div>
<div class="range-block">
<div class="range-block-title justifyLeft poe_restorable">
<span>Jailbreak confirmation reply</span>
<div id="poe_activation_response_restore" title="Restore default reply" class="right_menu_button">
<div class="fa-solid fa-clock-rotate-left"></div>
</div>
</div>
<div class="toggle-description justifyLeft">
Bot must send this back to confirm jailbreak
</div>
<div class="wide100p">
<input id="poe_activation_response" class="text_pole textarea_compact" type="text" />
</div>
</div>
<div class="range-block">
<div class="range-block-title justifyLeft poe_restorable">
<span>Character Note</span>
<div id="poe_nudge_text_restore" title="Restore default note" class="right_menu_button">
<div class="fa-solid fa-clock-rotate-left"></div>
</div>
</div>
<div class="toggle-description justifyLeft">
Influences bot behavior in its responses.
</div>
<div class="wide100p">
<textarea id="poe_nudge_text" class="text_pole textarea_compact" rows="6" maxlength="2500"></textarea>
</div>
</div>
<div class="range-block">
<div class="range-block-title justifyLeft poe_restorable">
<span>Impersonation prompt</span>
<div id="poe_impersonation_prompt_restore" title="Restore default prompt" class="right_menu_button">
<div class="fa-solid fa-clock-rotate-left"></div>
</div>
</div>
<div class="toggle-description justifyLeft">
Prompt that is used for Impersonation function
</div>
<div class="wide100p">
<textarea id="poe_impersonation_prompt" class="text_pole textarea_compact" rows="6" maxlength="2500"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="sys-settings-button" class="drawer">
<div class="drawer-toggle drawer-header">
<div id="API-status-top" class="drawer-icon fa-solid fa-plug-circle-exclamation closedIcon" title="API Connections"></div>
</div>
<div id="rm_api_block" class="drawer-content closedDrawer">
<h3 id="title_api">API</h3>
<div class="flex-container flexFlowColumn">
<div id="main-API-selector-block">
<select id="main_api">
<option value="kobold">KoboldAI</option>
<option value="koboldhorde">KoboldAI Horde</option>
<option value="textgenerationwebui">Text Gen WebUI (ooba)</option>
<option value="novel">NovelAI</option>
<option value="openai">OpenAI</option>
<option value="poe">Poe</option>
</select>
</div>
<div id="kobold_horde" style="position: relative;"> <!-- shows the kobold settings -->
<form action="javascript:void(null);" method="post" enctype="multipart/form-data">
<div id="kobold_horde_block">
<ul>
<li>
<a target="_blank" href="https://horde.koboldai.net/register">Register a Horde account for faster queue times</a>
</li>
<li>
<a target="_blank" href="https://github.com/db0/AI-Horde-Worker#readme">Learn how to contribute your idle GPU cycles to the Horde</a>
</li>
</ul>
<label for="horde_auto_adjust_context_length" class="checkbox_label">
<input id="horde_auto_adjust_context_length" type="checkbox" />
Adjust context size to worker capabilities
</label>
<label for="horde_auto_adjust_response_length" class="checkbox_label">
<input id="horde_auto_adjust_response_length" type="checkbox" />
Adjust response length to worker capabilities
</label>
<label for="horde_trusted_workers_only" class="checkbox_label" title="Can help with bad responses by queueing only the approved workers. May slowdown the response time.">
<input id="horde_trusted_workers_only" type="checkbox" />
Trusted workers only
</label>
<h4>API key</h4>
<h5>Get it here: <a target="_blank" href="https://horde.koboldai.net/register">Register</a><br>
Enter <span class="monospace">0000000000</span> to use anonymous mode.
</h5>
<div>
<a id="horde_kudos" href="javascript:void(0);">View my Kudos</a>
</div>
<div class="flex-container">
<input id="horde_api_key" name="horde_api_key" class="text_pole flex1" maxlength="500" type="text" placeholder="0000000000" autocomplete="off">
<div title="Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_horde"></div>
</div>
<div class="neutral_warning">For privacy reasons, your API key will be hidden after you reload the page.</div>
<h4 class="horde_model_title">
Model
<div id="horde_refresh" title="Refresh models" class="right_menu_button">
<div class="fa-solid fa-repeat "></div>
</div>
</h4>
<small class="horde_multiple_hint">You can select multiple models.<br>Avoid sending sensitive information to the Horde. <a id="horde_privacy_disclaimer" target="_blank" href="/notes#horde">Learn more</a></small>
<select id="horde_model" multiple>
<option>-- Horde models not loaded --</option>
</select>
</div>
<div id="online_status_horde">
<div id="online_status_indicator_horde"></div>
<div id="online_status_text_horde">Not connected</div>
</div>
</form>
</div>
<div id="kobold_api" style="position: relative;"> <!-- shows the kobold settings -->
<form action="javascript:void(null);" method="post" enctype="multipart/form-data">
<div id="kobold_api_block">
<h4>API url</h4>
<h5>Example: http://127.0.0.1:5000/api </h5>
<input id="api_url_text" name="api_url" class="text_pole" placeholder="http://127.0.0.1:5000/api" maxlength="500" value="" autocomplete="off">
<input id="api_button" class="menu_button" type="submit" value="Connect">
<div id="api_loading" class="api-load-icon fa-solid fa-hourglass fa-spin"></div>
</div>
<div id="online_status2">
<div id="online_status_indicator2"></div>
<div id="online_status_text2">Not connected</div>
</div>
</form>
</div>
<div id="novel_api" style="display: none;position: relative;"> <!-- shows the novel settings -->
<form action="javascript:void(null);" method="post" enctype="multipart/form-data">
<h4>Novel API key</h4>
<span>
<ol>
<li>
Follow<a href="/notes#apikey" class="notes-link" target="_blank"> these directions </a> to get your NovelAI API key.
</li>
<li>Enter it in the box below:</li>
</ol>
</span>
<div class="flex-container">
<input id="api_key_novel" name="api_key_novel" class="text_pole flex1 wide100p" maxlength="500" size="35" type="text" autocomplete="off">
<div title="Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_novel"></div>
</div>
<div class="neutral_warning">For privacy reasons, your API key will be hidden after you reload the page.</div>
<input id="api_button_novel" class="menu_button" type="submit" value="Connect">
<div id="api_loading_novel" class="api-load-icon fa-solid fa-hourglass fa-spin"></div>
<h4>Novel AI Model
<a href="/notes#models" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</h4>
<select id="model_novel_select">
<option value="euterpe-v2">Euterpe</option>
<option value="krake-v2">Krake</option>
<option value="clio-v1">Clio</option>
</select>
</form>
<div id="online_status3">
<div id="online_status_indicator3"></div>
<div id="online_status_text3">No connection...</div>
</div>
</div>
<div id="textgenerationwebui_api" style="display: none;position: relative;">
<div class="oobabooga_logo flex-container">
<a href="https://github.com/oobabooga/text-generation-webui" target="_blank">
oobabooga/text-generation-webui
</a>
<span>
Make sure you run it with <tt>--api</tt> flag
</span>
</div>
<div>
<div class="flex-container">
<div class="flex1">
<h4>Blocking API url</h4>
<h5>Example: http://127.0.0.1:5000/</h5>
<input id="textgenerationwebui_api_url_text" name="textgenerationwebui_api_url" class="text_pole wide100p" maxlength="500" value="" autocomplete="off">
</div>
<div class="flex1">
<h4>Streaming API url</h4>
<h5>Example: ws://127.0.0.1:5005/api/v1/stream</h5>
<input id="streaming_url_textgenerationwebui" type="text" class="text_pole wide100p" maxlength="500" value="" autocomplete="off">
</div>
</div>
<input id="api_button_textgenerationwebui" class="menu_button" type="submit" value="Connect">
<div id="api_loading_textgenerationwebui" class="api-load-icon fa-solid fa-hourglass fa-spin"></div>
</div>
<div class="online_status4">
<div class="online_status_indicator4"></div>
<div class="online_status_text4">Not connected</div>
</div>
</div>
<div id="openai_api" style="display: none;position: relative;">
<label for="use_window_ai" class="checkbox_label">
<input id="use_window_ai" type="checkbox" />
Use Window.ai
<a href="/notes#windowai" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</label>
<form id="openai_form" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<h4>API key </h4>
<span>
<ol>
<li>
Follow<a href="/notes#apikey-1" class="notes-link" target="_blank"> these directions </a> to get your OpenAI API key.
</li>
<li>Enter it in the box below:</li>
</ol>
</span>
<div class="flex-container">
<input id="api_key_openai" name="api_key_openai" class="text_pole flex1" maxlength="500" value="" type="text" autocomplete="off">
<div title="Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_openai"></div>
</div>
<div class="neutral_warning">For privacy reasons, your API key will be hidden after you reload the page.</div>
<input id="api_button_openai" class="menu_button" type="submit" value="Connect">
<div id="api_loading_openai" class=" api-load-icon fa-solid fa-hourglass fa-spin"></div>
<div class="online_status4">
<div class="online_status_indicator4"></div>
<div class="online_status_text4">No connection...</div>
</div>
<div>
<h4>OpenAI Model</h4>
<select id="model_openai_select">
<option value="gpt-3.5-turbo">gpt-3.5-turbo</option>
<option value="gpt-3.5-turbo-0301">gpt-3.5-turbo-0301</option>
<option value="gpt-4">gpt-4</option>
<option value="gpt-4-0314">gpt-4-0314</option>
<option value="gpt-4-32k">gpt-4-32k</option>
</select>
</div>
<div>
<a id="openai_api_usage" href="javascript:void(0);">View API Usage Metrics</a>
</div>
</form>
<br>
</div>
<div id="poe_api">
<h4>
Poe.com Unofficial "API"
</h4>
<span>
<ol>
<li>
Follow<a href="/notes#apikey-2" class="notes-link" target="_blank"> these directions </a> to get your 'p-b cookie'
</li>
<li>Enter it in the box below:</li>
</ol>
</span>
<div class="widthFreeExpand">
<div class="flex-container">
<input id="poe_token" class="text_pole flex1" type="text" maxlength="100" autocomplete="off" />
<div title="Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_poe"></div>
</div>
<div class="neutral_warning">For privacy reasons, your API key will be hidden after you reload the page.</div>
</div>
<input id="poe_connect" class="menu_button" type="button" value="Connect" />
<div id="api_loading_poe" class="api-load-icon fa-solid fa-hourglass fa-spin"></div>
<div class="range-block">
<div class="range-block-title">
<h4>Bot</h4>
</div>
<div class="widthFreeExpand">
<select id="poe_bots">
<option>-- Connect to the API --</option>
</select>
</div>
</div>
<div class="online_status4">
<div class="online_status_indicator4"></div>
<div class="online_status_text4">No connection...</div>
</div>
</div>
</div>
<div class="flex-container alignitemscenter spaceBetween wide100p">
<label for="auto-connect-checkbox" class="checkbox_label"><input id="auto-connect-checkbox" type="checkbox" />
Auto-connect to Last Server
</label>
<a id="viewSecrets" href="javascript:void(0);">View hidden API keys</a>
</div>
</div>
</div>
<div id="advanced-formatting-button" class="drawer">
<div class="drawer-toggle">
<div class="drawer-icon fa-solid fa-font closedIcon" title="AI Response Formatting"></div>
</div>
<div class="drawer-content">
<h3>Advanced Formatting
<a href="/notes#advancedformatting" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</h3>
<div class="flex-container">
<div name="PygOverrides" class="flex1">
<h4>AutoFormat Overrides</h4>
<label class="checkbox_label" for="disable-description-formatting-checkbox">
<input id="disable-description-formatting-checkbox" type="checkbox" />
Disable description formatting
</label>
<label class="checkbox_label" for="disable-scenario-formatting-checkbox">
<input id="disable-scenario-formatting-checkbox" type="checkbox" />
Disable scenario formatting
</label>
<label class="checkbox_label" for="disable-personality-formatting-checkbox">
<input id="disable-personality-formatting-checkbox" type="checkbox" />
Disable personality formatting
</label>
<label class="checkbox_label" for="disable-examples-formatting-checkbox">
<input id="disable-examples-formatting-checkbox" type="checkbox" />
Disable example chats formatting
</label>
<label class="checkbox_label" for="disable-start-formatting-checkbox">
<input id="disable-start-formatting-checkbox" type="checkbox" />
Disable chat start formatting
</label>
<label class="checkbox_label" for="trim_sentences_checkbox">
<input id="trim_sentences_checkbox" type="checkbox" />
Trim Incomplete Sentences
</label>
<!-- Add margin since this is a child of above -->
<label style="margin-left: 1em;" class="checkbox_label" for="include_newline_checkbox">
<input id="include_newline_checkbox" type="checkbox" />
Include Newline
</label>
<div>
<h4>
Custom Chat Separator
</h4>
<div>
<input id="custom_chat_separator" class="text_pole textarea_compact" type="text" placeholder="&lt;START&gt;" maxlength="100" />
</div>
</div>
<div>
<h4>Instruct mode
<a href="/notes#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" />
Enabled
</label>
<label for="instruct_wrap" class="checkbox_label">
<input id="instruct_wrap" type="checkbox" />
Wrap Sequences with Newline
</label>
<label for="instruct_names" class="checkbox_label">
<input id="instruct_names" type="checkbox" />
Include Names
</label>
</div>
<label for="instruct_presets">Presets</label>
<select id="instruct_presets"></select>
<label>
System Prompt
</label>
<textarea id="instruct_system_prompt" class="text_pole textarea_compact"></textarea>
<div class="flex-container">
<div class="flex1">
<label for="instruct_input_sequence">
Input Sequence
</label>
<div>
<input id="instruct_input_sequence" class="text_pole wide100p textarea_compact" type="text" maxlength="100" />
</div>
</div>
<div class="flex1">
<label for="instruct_output_sequence">
Output Sequence
</label>
<div>
<input id="instruct_output_sequence" class="text_pole wide100p textarea_compact" type="text" maxlength="100" />
</div>
</div>
</div>
<div class="flex-container">
<div class="flex1">
<label for="instruct_system_sequence">
<small>System Sequence</small>
</label>
<div>
<input id="instruct_system_sequence" class="text_pole wide100p textarea_compact" type="text" maxlength="100" />
</div>
</div>
<div class="flex1">
<label for="instruct_stop_sequence">
<small>Stop Sequence</small>
</label>
<div>
<input id="instruct_stop_sequence" class="text_pole wide100p textarea_compact" type="text" maxlength="100" />
</div>
</div>
<div class="flex1">
<label for="instruct_separator_sequence">
<small>Separator</small>
</label>
<div>
<input id="instruct_separator_sequence" class="text_pole wide100p textarea_compact" type="text" maxlength="100" />
</div>
</div>
</div>
</div>
</div>
<div name="ContextFormatting" class="flex1">
<h4>Context Formatting</h4>
<div>
<h4>Tokenizer
<a href="/notes#tokenizer" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</h4>
<select id="tokenizer">
<option value="0">None / Estimated</option>
<option value="1">GPT-3 (OpenAI)</option>
<option value="2">GPT-3 (Alternative / Classic)</option>
<option value="3">Sentencepiece (LLaMA)</option>
</select>
</div>
<div class="range-block">
<div class="range-block-title justifyLeft">
Token Padding
<a href="/notes#tokenpadding" 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" />
Always add character's name to prompt
</label>
<label class="checkbox_label" for="pin-examples-checkbox">
<input id="pin-examples-checkbox" type="checkbox" />
Keep Example Messages in Prompt
</label>
<label class="checkbox_label" for="collapse-newlines-checkbox"><input id="collapse-newlines-checkbox" type="checkbox" />
Remove Empty New Lines from Output
</label>
<div id="context-templates-block" class="template_element">
<h4>
Context Templates
</h4>
<div class="flex-container flexGap5">
<select id="context_template" class="flex1 margin0">
</select>
<div id="context_template_new" class="menu_button fa-solid fa-plus margin0" title="Create new"></div>
<div id="context_template_edit" class="menu_button fa-solid fa-file-pen margin0" title="Edit"></div>
<div id="context_template_rename" class="menu_button fa-solid fa-i-cursor margin0" title="Rename"></div>
<div id="context_template_delete" class="menu_button fa-solid fa-trash-can margin0" title="Delete"></div>
</div>
</div>
<div>
<h4>Pygmalion Formatting</h4>
<select id="pygmalion_formatting">
<option value="-1">Disabled for all models</option>
<option value="0">Automatic (based on model name)</option>
<option value="1">Enabled for all models</option>
</select>
</div>
<div>
<h4>
Multigen
<a href="/notes#multigen" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</h4>
<label class="checkbox_label" for="multigen">
<input id="multigen" type="checkbox" />
<span>
Enabled
</span>
</label>
<div class="multigen_settings_block">
<label for="multigen_1st_chunk">
<small>First chunk (tokens)</small>
<input id="multigen_first_chunk" type="number" class="text_pole textarea_compact" min="1" max="512" />
</label>
<label for="multigen_next_chunk">
<small>Next chunks (tokens)</small>
<input id="multigen_next_chunks" type="number" class="text_pole textarea_compact" min="1" max="512" />
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="WI-SP-button" class="drawer">
<div class="drawer-toggle drawer-header">
<div id="WIDrawerIcon" class="drawer-icon fa-solid fa-book-atlas closedIcon " title="World Info & Soft Prompts"></div>
</div>
<div id="WorldInfo" class="drawer-content closedDrawer">
<div id="WorldInfoheader" class="fa-solid fa-grip drag-grabber"></div>
<div id="WI_panel_pin_div" 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-lock-open "></div>
<div class="checked fa-solid fa-lock "></div>
</label>
</div>
<div id="wi-holder">
<h3>
World Selector
<a href="/notes#worldinfo" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</h3>
<form id="form_world_import" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<input type="file" id="world_import_file" accept=".json" name="avatar" hidden>
</form>
<div class="world_info_select_block">
<select id="world_info" class="flexGrow">
<option value="None">None</option>
</select>
<div id="world_create_button" class="menu_button fa-solid fa-plus" title="Create"></div>
<div id="world_import_button" class="menu_button fa-solid fa-file-arrow-up" title="Import"></div>
<div id="world_info_edit_button" class="menu_button fa-solid fa-pencil" title="Details"></div>
</div>
<div class="flex-container alignitemscenter">
<div class="flex1 range-block">
<div class="range-block-title">
Scan Depth <a href="/notes#scandepth" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="world_info_depth" name="volume" min="1" max="10" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="world_info_depth" id="world_info_depth_counter">
depth
</div>
</div>
</div>
</div>
<div class="flex1 range-block">
<div class="range-block-title">
Token Budget <a href="/notes#budget" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="world_info_budget" name="volume" min="32" max="8192" step="32">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="world_info_budget" id="world_info_budget_counter">
budget
</div>
</div>
</div>
</div>
<div class="flex1 range-block flex-container flexFlowColumn">
<label title="Entries can activate other entries by mentioning their keywords" class="checkbox_label">
<input id="world_info_recursive" type="checkbox" />
<span>
Recursive scanning
<a href="/notes#recursivescanning" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</span>
</label>
<label title="Lookup for the entry keys in the context will respect the case" class="checkbox_label">
<input id="world_info_case_sensitive" type="checkbox" />
<span>
Case-sensitive keys
<a href="/notes#casesensitivekeys" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</span>
</label>
</div>
</div>
<div id="world_popup">
<hr>
<div id="world_popup_text">
<!-- <div id="world_cross" class="fa-solid fa-circle-xmark"></div> -->
<div id="world_popup_header" class="flex-container flexGap5">
<!-- Consider changing logo to something else -->
<div class="world_popup_logo_block">
<!-- <img src="img/book2.png" id="world_logo"> -->
<h3>
World Info Editor
<a href="/notes#worldinfoentry" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
</h3>
</div>
<div id="OpenAllWIEntries" class="menu_button fa-solid fa-expand"></div>
<div id="CloseAllWIEntries" class="menu_button fa-solid fa-compress"></div>
<!-- <div class="world_popup_expander">&nbsp;</div> -->
<form id="form_rename_world" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<input id="world_popup_name" name="world_popup_name" class="text_pole" maxlength="99" size="32" value="" autocomplete="off">
<input id="world_popup_name_button" class="menu_button" type="submit" value="Rename">
</form>
</div>
</div>
<div id="world_popup_entries_list">
</div>
<div id="world_popup_bottom_holder">
<div id="world_popup_new" class="menu_button">New Entry</div>
<!-- <span class="world_popup_expander">&nbsp;</span> -->
<div id="world_popup_export" class="menu_button">Export</div>
<div id="world_popup_delete" class="menu_button">Delete World</div>
</div>
</div>
</div>
<div id="softprompt_block">
<h4>Soft Prompt</h4>
<h5>About soft prompts <a href="/notes#softprompts" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
<select id="softprompt">
<option value="">None</option>
</select>
</div>
</div>
</div>
<div id="user-settings-button" class="drawer">
<div class="drawer-toggle">
<div class="drawer-icon fa-solid fa-face-smile closedIcon" title="User Settings"></div>
</div>
<div id="user-settings-block" class="drawer-content closedDrawer">
<div class="flex-container wide100p alignitemscenter spaceBetween">
<h3>User Settings</h3>
<div id="version_display"></div>
</div>
<div class="flex-container spaceEvenly">
<div name="UI Customization" class="flex-container drawer25pWidth">
<div class="ui-settings">
<h4>UI Customization</h4>
<div>
Avatar Style:<br>
<label>
<input name="avatar_style" type="radio" value="0" />
Circle
</label>
<label>
<input name="avatar_style" type="radio" value="1" />
Rectangle
</label>
</div>
<div>
Chat Style:<br>
<label>
<input name="chat_display" type="radio" value="0" />
Default
</label>
<label>
<input name="chat_display" type="radio" value="1" />
Bubbles
</label>
</div>
<div>
Chat Width (PC):<br>
<label>
<input name="sheld_width" type="radio" value="0" />
800px
</label>
<label>
<input name="sheld_width" type="radio" value="1" />
1000px
</label>
</div>
<div>
<label for="fast_ui_mode" class="checkbox_label" title="removes blur and uses alternative background color for divs">
<input id="fast_ui_mode" type="checkbox" />
No Blur Effect
</label>
<label for="noShadowsmode" class="checkbox_label">
<input id="noShadowsmode" type="checkbox" />
No Text Shadows
</label>
<label for="waifuMode" class="checkbox_label">
<input id="waifuMode" type="checkbox" />
♡ Waifu Mode ♡
</label>
<label for="messageTimerEnabled" class="checkbox_label">
<input id="messageTimerEnabled" type="checkbox" />
Message Timer
</label>
<label for="hotswapEnabled" class="checkbox_label">
<input id="hotswapEnabled" type="checkbox" />
Characters Hotswap
</label>
<label for="movingUImode" class="checkbox_label">
<input id="movingUImode" type="checkbox" />
Movable UI Panels
</label>
<div id="movingUIreset" class="menu_button whitespacenowrap">Reset Panels</div>
</div>
</div>
</div>
<div id="UI-Theme-Block" class="flex-container flexFlowColumn drawer25pWidth">
<div id="color-picker-block" class="flex-container flexFlowColumn">
<h4>UI Colors</h4>
<div class="flex-container">
<toolcool-color-picker id="main-text-color-picker"></toolcool-color-picker>
Main Text
</div>
<div class="flex-container">
<toolcool-color-picker id="italics-color-picker"></toolcool-color-picker>
Italics Text
</div>
<div class="flex-container">
<toolcool-color-picker id="quote-color-picker"></toolcool-color-picker>
Quote Text
</div>
<div class="flex-container">
<toolcool-color-picker id="shadow-color-picker"></toolcool-color-picker>
Shadow Color
</div>
<div class="flex-container">
<toolcool-color-picker id="fastui-bg-color-picker"></toolcool-color-picker>
FastUI BG
</div>
<div class="flex-container">
<toolcool-color-picker id="blur-tint-color-picker"></toolcool-color-picker>
Blur Tint
</div>
<div id="font-blur-UIpresets-block" class="flex-container flexFlowColumn">
<div id="font-scale-block" class="range-block">
<div class="range-block-title">
Font Scale
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="font_scale" name="font_scale" min="0.8" max="1.2" step="0.05">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="font_scale" id="font_scale_counter">
select
</div>
</div>
</div>
</div>
<div id="blur-strength-block" class="range-block">
<div class="range-block-title">
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">
Text Shadow Width
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input type="range" id="shadow_width" name="shadow_width" min="0" max="5" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="shadow_width" id="shadow_width_counter">
select
</div>
</div>
</div>
</div>
</div>
<div id="UI-presets-block" class="flex-container flexFlowColumn">
<h4>
UI Theme Preset
</h4>
<div class="flex-container flexnowrap alignitemscenter">
<select id="themes" class="margin0 margin-r5">
</select>
<div id="ui-preset-save-button" title="Save changes to a new theme file" class="menu_button padding5 margin0">
<i class="fa-solid fa-save"></i>
</div>
</div>
</div>
</div>
</div>
<div id="power-user-options-block" class="flex-container drawer25pWidth">
<div id="power-user-option-checkboxes">
<h4>Power User Options</h4>
<label for="swipes-checkbox">
<input id="swipes-checkbox" type="checkbox" />
Swipes
</label>
<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>
Message Sound
<a href="/notes#messagesound" 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" />
Background Sound Only
</label>
<label for="auto-load-chat-checkbox"><input id="auto-load-chat-checkbox" type="checkbox" />
Auto-load Last Chat
</label>
<label for="auto_save_msg_edits"><input id="auto_save_msg_edits" type="checkbox" />
Auto-save Message Edits
</label>
<label for="auto_fix_generated_markdown">
<input id="auto_fix_generated_markdown" type="checkbox" />
Auto-fix Markdown
</label>
<label class="checkbox_label" for="allow_name2_display">
<input id="allow_name2_display" type="checkbox" />
Allow {{char}}: in bot messages
</label>
<label class="checkbox_label" for="allow_name1_display">
<input id="allow_name1_display" type="checkbox" />
Allow {{user}}: in bot messages
</label>
<label for="auto_scroll_chat_to_bottom">
<input id="auto_scroll_chat_to_bottom" type="checkbox" />
Auto-scroll Chat
</label>
<label for="console_log_prompts">
<input id="console_log_prompts" type="checkbox" />
Log prompts to console
</label>
<label for="render_formulas">
<input id="render_formulas" type="checkbox" />
Render Formulas
<a href="/notes#formulasrendering" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</label>
</div>
</div>
<div name="NameAndAvatar" class="flex-container flexFlowColumn drawer25pWidth">
<div class="inline-drawer wide100p flexFlowColumn">
<div class="flex-container flexFlowColumn">
<h4>
Send on Enter
</h4>
<select id="send_on_enter">
<option value="-1">Always disabled</option>
<option value="0">Automatic (desktop)</option>
<option value="1">Always enabled</option>
</select>
</div>
<div id="groupCurrentMemberListToggle" class="inline-drawer-toggle inline-drawer-header">
<b>Auto-swipe</b>
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div>
<div class="inline-drawer-content">
<label class="checkbox_label" for="auto_swipe">
<input id="auto_swipe" type="checkbox" />
Enabled
</label>
<div>Minimum generated message length</div>
<input id="auto_swipe_minimum_length" name="auto_swipe_minimum_length" type="number" min="0" step="1" value="0" class="text_pole">
<div>Blacklisted words</div>
<div class="auto_swipe">
<textarea id="auto_swipe_blacklist" name="auto_swipe_blacklist" placeholder="words you dont want generated separated by comma ','" class="text_pole textarea_compact" maxlength="5000" value="" autocomplete="off" rows="3"></textarea>
<div>Blacklisted word count to swipe</div>
<input id="auto_swipe_blacklist_threshold" name="auto_swipe_blacklist_threshold" type="number" min="0" step="1" value="1" class="text_pole">
</div>
</div>
</div>
<div name="NameChanger">
<h4>Name</h4>
<div class="change_name">
<input id="your_name" name="your_name" placeholder="Enter your name" class="text_pole wide100p" maxlength="50" value="" autocomplete="off">
<div id="your_name_button" class="menu_button fa-solid fa-check" title="Click to set a new User Name">
</div>
<div id="sync_name_button" class="menu_button fa-solid fa-sync" title="Click to set user name for all messages">
</div>
</div>
</div>
<div name="AvatarSelector">
<h4>Your Avatar</h4>
<div id="user_avatar_block">
<div class="avatar_upload">+</div>
</div>
<form id="form_upload_avatar" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<input type="file" id="avatar_upload_file" accept="image/*" name="avatar">
</form>
</div>
</div>
</div>
</div>
</div>
<div id="logo_block" class="drawer" title="Change Background Image">
<div id="site_logo" class="drawer-toggle drawer-header">
<div class="drawer-icon fa-solid fa-panorama closedIcon"></div>
</div>
<div class="drawer-content closedDrawer">
<div class="flex-container">
<input id="bg-filter" placeholder="Filter" class="text_pole" type="search" />
<div id="bg_menu_content">
<form id="form_bg_download" class="bg_example no-border no-shadow" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<label class="input-file">
<input type="file" id="add_bg_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
<div class="bg_example no-border no-shadow add_bg_but" style="background-image: url('/img/addbg3.png');"></div>
</label>
</form>
</div>
</div>
</div>
</div>
<div id="extensions-settings-button" class="drawer">
<div class="drawer-toggle">
<div class="drawer-icon fa-solid fa-cubes closedIcon" title="Extensions"></div>
</div>
<div id="rm_extensions_block" class="drawer-content closedDrawer">
<div class="extensions_block">
<h3>Extensions API:
<a target="_blank" href="https://github.com/Cohee1207/SillyTavern-extras">
SillyTavern-extras
</a>
</h3>
<input id="extensions_url" type="text" class="text_pole" maxlength="250" />
<div class="extensions_url_block">
<input id="extensions_connect" class="menu_button" type="submit" value="Connect" />
<input id="extensions_details" class="menu_button" type="button" value="Manage extensions" />
<span class="expander"></span>
<label for="extensions_autoconnect"><input id="extensions_autoconnect" type="checkbox" />
Auto-connect
</label>
</div>
<div id="extensions_status">
Not connected
</div>
<div id="extensions_loaded">
<h4>Active extensions</h4>
<ul id="extensions_list">
</ul>
</div>
<div id="extensions_settings">
<h3>Extension settings</h3>
</div>
</div>
</div>
</div>
<div id="rightNavHolder" class="drawer">
<div id="unimportantYes" class="drawer-toggle drawer-header">
<div id="rightNavDrawerIcon" class="drawer-icon fa-solid fa-address-card closedIcon" title="Character Management">
</div>
</div>
<nav id="right-nav-panel" class="drawer-content closedDrawer fillRight gap5px">
<div id="right-nav-panelheader" class="fa-solid fa-grip drag-grabber"></div>
<div id="rm_PinAndTabs">
<div id="rm_button_panel_pin_div" 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-lock-open" alt=""></div>
<div class="fa-solid checked fa-lock" alt=""></div>
</label>
</div>
<div id="right-nav-panel-tabs">
<div class="right_menu_button fa-solid fa-list-ul" id="rm_button_characters" title="Select/Create Characters"></div>
<div id="rm_button_selected_ch">
<h2></h2>
</div>
</div>
</div>
<div class="hotswap flex-container justifyCenter">
</div>
<div name="Solo Char Create/Edit Panel" id="rm_ch_create_block" class="right_menu flex-container flexFlowColumn" style="display: none;">
<form id="form_create" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<div id="avatar-and-name-block">
<div id="name_div">
<input id="character_name_pole" name="ch_name" class="text_pole" placeholder="Name this character" maxlength="50" value="" autocomplete="off">
</div>
<div id="avatar_div" class="avatar_div">
<div id="avatar_div_div" class="avatar">
<img id="avatar_load_preview" src="img/ai4.png" alt="avatar">
</div>
<div class="form_create_bottom_buttons_block">
<label for="add_avatar_button" class="menu_button fa-solid fa-file-image " title="Click to select a new avatar for this character">
<input type="file" id="add_avatar_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
</label>
<div id="rm_button_back" class="menu_button fa-solid fa-left-long "></div>
<div id="renameCharButton" class="menu_button fa-solid fa-user-pen" title="Rename Character"></div>
<div id="favorite_button" class="menu_button fa-solid fa-star" title="Add to Favorites"></div>
<input type="hidden" id="fav_checkbox" name="fav" />
<div id="advanced_div" class="menu_button fa-solid fa-book " title="Advanced Definitions"></div>
<div id="export_button" class="menu_button fa-solid fa-file-export " title="Export and Download"></div>
<div id="dupe_button" class="menu_button fa-solid fa-clone " title="Duplicate Character"></div>
<label for="create_button" id="create_button_label" class="menu_button fa-solid fa-user-check" title="Create Character">
<input type="submit" id="create_button" name="create_button">
</label>
<div id="delete_button" class="menu_button fa-solid fa-skull " title="Delete Character"></div>
</div>
</div>
<div title="Token counts may be inaccurate and provided just for reference." id="result_info">&nbsp;</div>
</div>
<hr>
<div id="tags_div">
<div class="tag_controls">
<input id="tagInput" class="text_pole tag_input wide100p margin0" placeholder="Search / Create tags" maxlength="25" />
<div class="tags_view menu_button fa-solid fa-tags" title="View all tags"></div>
</div>
<div id="tagList" class="tags"></div>
</div>
<div id="description_div" class="margin-bot-10px">
Description
<a href="/notes#characterdescription" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</div>
<textarea id="description_textarea" placeholder="Describe your character's physical and mental traits here." class="margin-bot-10px" name="description" placeholder=""></textarea>
<div id="first_message_div" class="margin-bot-10px">
First message
<a href="/notes#firstmessage" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</div>
<textarea id="firstmessage_textarea" placeholder="This will be the first message from the character that starts every chat." class="margin-bot-10px" name="first_mes" placeholder=""></textarea>
<!-- these divs are invisible and used for server communication purposes -->
<div id="hidden-divs">
<div id="avatar_url_div">
<input id="avatar_url_pole" name="avatar_url" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
</div>
<div id="selected_chat_div">
<input id="selected_chat_pole" name="chat" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
</div>
<div id="create_date_div">
<input id="create_date_pole" name="create_date" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
</div>
<div id="last_mes_div">
<input id="last_mes_pole" name="last_mes" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
</div>
</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">
Group Controls
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div>
<div class="inline-drawer-content">
<div name="group-metadata-controls" class="marginTopBot5">
<input id="rm_group_chat_name" class="text_pole wide100p" type="text" name="chat_name" placeholder="Chat Name (Optional)" maxlength="100" />
<div id="group_tags_div" class="wide100p">
<div class="tag_controls">
<input id="groupTagInput" class="text_pole tag_input flex1 margin0" placeholder="Search / Create tags" maxlength="25" />
<div class="tags_view menu_button fa-solid fa-tags margin0" title="View all tags"></div>
</div>
<div id="groupTagList" class="tags paddingTopBot5"></div>
</div>
<div id="rm_group_top_bar" class="flex-container spaceBetween width100p">
<div name="GroupStragegyAndOrder" id="rm_group_buttons" class="fontsize80p flex-container paddingLeftRight5">
<div class="">
<div class="flex-container flexnowrap width100p whitespacenowrap">
Group reply strategy
<a href="/notes#replyorderstrategies" 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" />
Natural order
</label>
<label class="checkbox_label flexnowrap whitespacenowrap">
<input type="radio" name="rm_group_activation_strategy" value="1" />
List order
</label>
</div>
<div class="">
<label class="checkbox_label whitespacenowrap">
<input id="rm_group_allow_self_responses" type="checkbox" />
Allow self responses
</label>
<label id="rm_group_automode_label" class="checkbox_label whitespacenowrap">
<input id="rm_group_automode" type="checkbox" />
Auto Mode
</label>
</div>
</div>
<div name="GroupFavDelOkBack" class="flex-container flexGap5 spaceEvenly">
<div id="rm_button_back_from_group" class="heightFitContent margin0 menu_button fa-solid fa-left-long"></div>
<div id="rm_group_scenario" class="heightFitContent margin0 menu_button fa-solid fa-scroll" title="Set a group chat scenario"></div>
<div id="group_favorite_button" class="heightFitContent margin0 menu_button fa-solid fa-star" title="Add to Favorites"></div>
<input id="rm_group_fav" type="hidden" />
<div id="rm_group_submit" class="heightFitContent margin0 menu_button fa-solid fa-check" title="Create"></div>
<div id="rm_group_delete" class="heightFitContent margin0 menu_button fa-solid fa-trash-can" title="Delete"></div>
</div>
</div>
</div>
</div>
</div>
<div class="inline-drawer wide100p flexFlowColumn">
<div id="groupCurrentMemberListToggle" class="inline-drawer-toggle inline-drawer-header">
Current Members
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div>
<div class="inline-drawer-content">
<div name="Current Group Members" class="flex-container flexFlowColumn overflowYAuto flex1">
<div id="rm_group_members" class="overflowYAuto flex-container"></div>
</div>
</div>
</div>
<div class="inline-drawer wide100p flexFlowColumn">
<div id="groupAddMemberListToggle" class="inline-drawer-toggle inline-drawer-header">
Add Members
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div>
<div class="inline-drawer-content">
<div name="Unadded Char List" class="flex-container flexFlowColumn overflowYAuto flex1">
<div id="rm_group_add_members_header">
<input id="rm_group_filter" class="text_pole margin0" type="search" placeholder="Filter..." maxlength="100" />
<div id="group_fav_filter" class="menu_button fa-solid fa-ranking-star margin0" title="Show only favorites"></div>
</div>
<div id="rm_group_add_members" class="overflowYAuto flex-container"></div>
</div>
</div>
</div>
</div>
<div id="rm_character_import" class="right_menu" style="display: none;">
<form id="form_import" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<input multiple type="file" id="character_import_file" accept=".json, image/png, image/webp" name="avatar">
<input id="character_import_file_type" name="file_type" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
</form>
</div>
<div name="Character List Panel" id="rm_characters_block" class="right_menu">
<div id="charListFixedTop">
<form id="form_character_search_form" action="javascript:void(null);">
<div id="rm_button_create" title="Create New Character" class="menu_button fa-solid fa-user-plus "></div>
<div id="character_import_button" title="Import Character from File" class="menu_button fa-solid fa-file-arrow-up "></div>
<div id="rm_button_group_chats" title="Create New Chat Group" class="menu_button fa-solid fa-users-gear "></div>
<input id="character_search_bar" class="text_pole width100p" type="search" placeholder="Search..." maxlength="50" />
<select id="character_sort_order" title="Characters sorting order">
<option data-field="name" data-order="asc">A-Z</option>
<option data-field="name" data-order="desc">Z-A</option>
<option data-field="date_added" data-order="desc">Newest</option>
<option data-field="date_added" data-order="asc">Oldest</option>
<option data-field="fav" data-order="desc" data-rule="boolean">Favorites</option>
<option data-field="date_last_chat" data-order="desc">Recent</option>
<option data-field="chat_size" data-order="desc">Most chats</option>
<option data-field="chat_size" data-order="asc">Least chats</option>
</select>
</form>
<div class="rm_tag_controls">
<div id="rm_tag_filter" class="tags"></div>
</div>
</div>
<div id="rm_print_characters_block"></div>
</div>
<!-- only displays after creating/deleting a character/group -->
<div id="rm_info_block" class="right_menu">
<div id="rm_info_panel">
<div id="rm_info_avatar"></div>
<div id="rm_info_text"></div>
<div id="rm_info_button" class="menu_button">Back</div>
</div>
</div>
</nav>
</div>
</div>
<!-- various fullscreen popups -->
<div id="shadow_popup">
<div id="dialogue_popup">
<div id="dialogue_popup_holder">
<div id="dialogue_popup_text">
<h3>text</h3>
</div>
<input id="dialogue_popup_input" class="text_pole" type="text" />
<div id="dialogue_popup_controls">
<div id="dialogue_popup_ok" class="menu_button">Delete</div>
<div id="dialogue_popup_cancel" class="menu_button">Cancel</div>
</div>
</div>
</div>
</div>
<div id="character_popup" class="flex-container flexFlowColumn flexNoGap">
<div id="character_popup_text">
<h3 id="character_popup_text_h3"></h3> - Advanced Definitions
</div>
<hr>
<div id="character_cross" class="fa-solid fa-circle-xmark"></div>
<div id="creatorcomment_div">
Creator's Comment
<h5>This is not sent to the AI Prompt.
<textarea id="creatorcomment_textarea" name="creatorcomment" placeholder="(Describe the bot to the user, list the chat models it has been tested on, and any other useful tips)" form="form_create" class="text_pole" autocomplete="off" rows="2" maxlength="20000"></textarea>
</div>
<div id="personality_div">
<h4>
Personality summary
<a href="/notes#personalitysummary" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
</h4>
<textarea id="personality_textarea" name="personality" placeholder="(A brief description of the personality)" form="form_create" class="text_pole" autocomplete="off" rows="1" maxlength="20000"></textarea>
</div>
<div id="scenario_div">
<h4>
Scenario
<a href="/notes#scenario" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</h4>
<textarea id="scenario_pole" name="scenario" placeholder="(Circumstances and context of the interaction)" class="text_pole" maxlength="20000" value="" autocomplete="off" form="form_create" rows="1"></textarea>
</div>
<div id="talkativeness_div">
<h4>Talkativeness</h4>
<h5>How often the character speaks in &nbsp;<span class="warning">group chats!</span>
</h5>
<input id="talkativeness_slider" name="talkativeness" type="range" min="0" max="1" step="0.05" value="0.5" form="form_create">
<div id="talkativeness_hint">
<span>Shy</span>
<span>Normal</span>
<span>Chatty</span>
</div>
</div>
<hr>
<div id="mes_example_div" class="flex-container flexFlowColumn">
<div>
<h4>Example Dialogue</h4>
<h5>Important to set the character's writing style. <a href="/notes#examplesofdialogue" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
</div>
<textarea id="mes_example_textarea" class="flexGrow" name="mes_example" placeholder="(Examples of chat dialog. Begin each example with <start> on a new line.)" form="form_create" maxlength="20000"></textarea>
</div>
<div id="character_popup_ok" class="menu_button">Save</div>
</div>
<div id="shadow_select_chat_popup">
<div id="select_chat_popup">
<div id="select_chat_import"> <!-- import chat popup header -->
<div id="chat_import_button" class="fa-solid fa-file-arrow-up menu_button"></div>
<div id="selectChatPopupHeaderText" class="TxtLrgBoldCenter">
<span id="ChatHistoryCharName"></span>
<br>
Chat History
<a href="/notes#chatimport" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
</div>
<form id="form_import_chat" action="javascript:void(null);" method="post" enctype="multipart/form-data" style="display: none;">
<input type="file" id="chat_import_file" accept=".json, .jsonl" name="avatar">
<input id="chat_import_file_type" name="file_type" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
<input id="chat_import_avatar_url" name="avatar_url" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
<input id="chat_import_character_name" name="character_name" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
</form>
<div id="select_chat_cross" class="fa-solid fa-circle-xmark" alt="Close Past Chat Popup"></div>
</div>
<div id="select_chat_div">
</div>
<div id="load_select_chat_div">
<div class="fa-solid fa-hourglass fa-spin"></div>
</div>
</div>
</div>
<!-- templates for JS to reuse when needed -->
<div id="context_editor_template" class="template_element">
<div class="context_editor">
<h3>Context Template Editor</h3>
<h4 class="template_name"></h4>
<div class="inline-drawer wide100p">
<div class="inline-drawer-toggle inline-drawer-header">
Substitution Parameters
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div>
<div class="inline-drawer-content">
<i>Click to copy.</i>
<ul class="template_parameters_list justifyLeft margin0">
<li><code>{{char}}</code> - current character name</li>
<li><code>{{user}}</code> - current user name</li>
<li><code>{{description}}</code> - character description</li>
<li><code>{{scenario}}</code> - character or group scenario</li>
<li><code>{{personality}}</code> - character personality</li>
<li><code>{{mesExamples}}</code> - message examples</li>
<li><code>{{wiBeforeCharacter}}</code> - activated World Info entries (Before Char)</li>
<li><code>{{wiAfterCharacter}}</code> - activated World Info entries (After Char)</li>
<li><code>{{instructSystemPrompt}}</code> - system prompt (Instruct mode only)</li>
</ul>
</div>
</div>
<div>
<div class="margin-bot-10px wide100p justifyLeft">
Story String Template
</div>
<textarea class="wide100p textarea_compact story_string_template" rows="8"></textarea>
<div>
<small>Lines containing parameters resolving to an empty value will be removed from the template string.</small>
</div>
</div>
<div>
<div class="title_restorable">
<span>Chat Injections</span>
<div title="Add chat injection" class="menu_button chat_injection_add">
<div class="fa-solid fa-plus"></div>
</div>
</div>
<div class="chat_injections_list flex-container flexFlowColumn flexGap5 wide100p"></div>
</div>
</div>
</div>
<div id="chat_injection_template" class="template_element">
<div class="chat_injection flex-container wide100p flexGap5 flexnowrap">
<input class="chat_injection_text textarea_compact text_pole flex2" placeholder="Injection text (supports parameters)" type="text" />
<input class="chat_injection_depth textarea_compact text_pole flex1" placeholder="Injection depth" type="number" min="0" max="100" />
<div title="Remove injection" class="menu_button fa-solid fa-xmark chat_injection_remove"></div>
</div>
</div>
<div id="group_scenario_template" class="template_element">
<div class="group_scenario range-block flexFlowColumn flex-container">
<div class="range-block-title title_restorable">
<h3>Group Chat Scenario Override</h3>
<div title="Remove" class="menu_button fa-solid fa-trash-can remove_scenario_override"></div>
</div>
<div class="range-block-counter justifyLeft flex-container flexFlowColumn">
<strong>Unique to this chat.</strong> All group members will use the following scenario text instead of what is specified in their character cards.
Bookmarks inherit the scenario from their parent, and can be changed individually after that.
</div>
<div class="range-block-range wide100p">
<textarea class="wide100p group_chat_scenario" class="text_pole" rows="15" placeholder="Type here..."></textarea>
</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 class="renameChatButton fa-solid fa-pen"></div>
<div class="exportChatButton fa-solid fa-file-export"></div>
<div file_name="" class="PastChat_cross fa-solid fa-circle-xmark"></div>
</div>
</div>
</div>
<div id="tag_view_template" class="template_element">
<div class="tag_view_item">
<div class="tagColorPickerHolder"></div>
<div class="tag_view_name" contenteditable="true"></div>
<div class="tag_view_counter"><span class="tag_view_counter_value"></span>&nbsp;entries</div>
<div title="Delete tag" class="tag_delete fa-solid fa-trash-can right_menu_button"></div>
</div>
</div>
<div id="entry_edit_template" class="template_element">
<div class="world_entry">
<form class="world_entry_form">
<div class="inline-drawer wide100p">
<div class="inline-drawer-toggle inline-drawer-header">
<div class="world_entry_thin_controls wide100p">
<div class="world_entry_form_control">
<label for="key">
<h4>Keywords</h4>
<h5>Split by commas</h5>
</label>
<textarea class="text_pole keyprimarytextpole" name="key" rows="1" placeholder="" maxlength="250"></textarea>
</div>
<div class="world_entry_form_control keysecondary">
<label for="keysecondary">
<h4>2nd Keywords</h4>
<h5>Split by commas</h5>
</label>
<textarea class="text_pole keysecondarytextpole" name="keysecondary" rows="1" placeholder="(secondary keywords here)" maxlength="250"></textarea>
</div>
</div>
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div>
<div class="inline-drawer-content">
<div class="world_entry_thin_controls wide100p">
<div class="world_entry_form_control">
<label for="content ">
<h4>Content</h4>
<h5>What this keyword should mean to the AI</h5>
</label>
<textarea class="text_pole" name="content" rows="4" placeholder=""></textarea>
</div>
</div>
<div class="world_entry_thin_controls wide100p">
<div class="world_entry_form_control">
<label for="comment">
<h4>Memo/Note</h4>
<h5>Not sent to AI</h5>
</label>
<textarea class="text_pole" rows="1" name="comment" maxlength="250"></textarea>
</div>
</div>
<div class="world_entry_form_control world_entry_form_horizontal">
<div class="flex-container flexFlowColumn flexNoGap wi-enter-footer-text flex1 ">
<label class="checkbox">
<input type="checkbox" name="constant" />
<span>Constant</span>
</label>
<label class="checkbox">
<input type="checkbox" name="selective" />
<span>Selective</span>
</label>
</div>
<div class="world_entry_form_control world_entry_form_radios wi-enter-footer-text flex1">
<div>
<label><input type="radio" name="position" value="0">
<span>Before Char</span>
</label>
</div>
<div>
<label><input type="radio" name="position" value="1">
<span>After Char</span>
</label>
</div>
</div>
<div class="world_entry_form_control wi-enter-footer-text flex1 flex-container flexNoGap "> <!-- world_entry_form_control -->
<!-- <label for="order"> -->
Insertion Order
<!-- Bigger number = inserted earlier -->
<!-- </label> -->
<input class="text_pole" type="number" name="order" placeholder="" />
</div>
<div class="flex-container flexFlowColumn flexNoGap wi-enter-footer-text flex1">
<div class="world_entry_form_uid">
UID:
&nbsp;
<span class="world_entry_form_uid_value"></span>
</div>
<div class="world_entry_form_tokens">
Tokens:
&nbsp;
<span class="world_entry_form_token_counter">0</span>
</div>
</div>
<div>
<label class="checkbox">
<input type="checkbox" name="disable" />
<span>Disable</span>
</label>
</div>
<span class="world_popup_expander">&nbsp;</span>
<input class="menu_button delete_entry_button" type="submit" value="Delete Entry" />
</div>
</div>
</div>
</form>
</div>
</div>
<div id="character_template" class="template_element">
<div class="character_select flex-container wide100p alignitemsflexstart" chid="" id="">
<div class="avatar" title="">
<img src="">
</div>
<div class="flex-container wide100pLess70px gap5px">
<div class="ch_name"></div>
<i class="ch_fav_icon fa-solid fa-star"></i>
<input class="ch_fav" value="" hidden />
<div class="tags tags_inline"></div>
</div>
</div>
</div>
<div id="tag_template" class="template_element">
<span id="" class="tag">
<span class="tag_name"></span>
<i class="fa-solid fa-circle-xmark tag_remove"></i>
</span>
</div>
<div id="openai_logit_bias_template" class="template_element">
<div class="openai_logit_bias_form">
<input class="openai_logit_bias_text text_pole" placeholder="type here..." />
<input class="openai_logit_bias_value text_pole" type="number" min="-100" value="0" max="100" />
<i class="menu_button fa-solid fa-xmark openai_logit_bias_remove"></i>
</div>
</div>
<div id="message_template" class="template_element">
<div class="mes" mesid="" ch_name="" is_user="" is_system="" bookmark_link="">
<div class="for_checkbox"></div><input type="checkbox" class="del_checkbox">
<div class="mesAvatarWrapper">
<div class="avatar">
<img src="">
</div>
<div class="mes_timer"></div>
</div>
<div class="swipe_left fa-solid fa-chevron-left"></div>
<div class="mes_block">
<div class="ch_name flex-container justifySpaceBetween">
<span class="name_text">${characterName}</span>
<div class="mes_buttons">
<div title="Translate message" class="mes_translate fa-solid fa-language"></div>
<div title="Open bookmark chat" class="mes_bookmark fa-solid fa-bookmark"></div>
<div title="Generate Image" class="sd_message_gen fa-solid fa-paintbrush"></div>
<div title="Narrate" class="mes_narrate fa-solid fa-bullhorn"></div>
<div title="Prompt" class="mes_prompt fa-solid fa-square-poll-horizontal "></div>
<div title="Copy" class="mes_copy fa-solid fa-copy "></div>
<div title="Edit" class="mes_edit fa-solid fa-pencil "></div>
</div>
<div class="mes_edit_buttons">
<div class="mes_edit_done menu_button fa-solid fa-check" title="Confirm"></div>
<div class="mes_edit_copy menu_button fa-solid fa-copy" title="Copy this message"></div>
<div class="mes_edit_delete menu_button fa-solid fa-scissors" title="Delete this message"></div>
<div class="mes_edit_up menu_button fa-solid fa-chevron-up " title="Move message up"></div>
<div class="mes_edit_down menu_button fa-solid fa-chevron-down" title="Move message down"></div>
<div class="mes_edit_cancel menu_button fa-solid fa-xmark" title="Cancel"></div>
</div>
</div>
<div class=mes_text></div>
<div class="mes_img_container">
<div class="mes_img_controls">
<div title="Enlarge" class="right_menu_button fa-lg fa-solid fa-magnifying-glass mes_img_enlarge"></div>
<div title="Delete" class="right_menu_button fa-lg fa-solid fa-trash-can mes_img_delete"></div>
</div>
<img class="mes_img" src="" />
</div>
<div class="mes_bias"></div>
</div>
<div class="swipe_right fa-solid fa-chevron-right">
<div class="swipes-counter"></div>
</div>
</div>
</div>
<div id="group_avatars_template" class="template_element">
<div class="avatar avatar_collage collage_1">
<img alt="img1" class="img_1" src="">
</div>
<div class="avatar avatar_collage collage_2">
<img alt="img1" class="img_1" src="">
<img alt="img2" class="img_2" src="">
</div>
<div class="avatar avatar_collage collage_3">
<img alt="img1" class="img_1" src="">
<img alt="img2" class="img_2" src="">
<img alt="img3" class="img_3" src="">
</div>
<div class="avatar avatar_collage collage_4">
<img alt="img1" class="img_1" src="">
<img alt="img2" class="img_2" src="">
<img alt="img3" class="img_3" src="">
<img alt="img4" class="img_4" src="">
</div>
</div>
<div id="group_member_template" class="template_element">
<div class="group_member">
<div class="avatar">
<img alt="Avatar" src="" />
</div>
<div class="ch_name"></div>
<div class="group_member_icon">
<div title="Temporarily disable automatic replies from this character" data-action="disable" class="right_menu_button fa-solid fa-lg fa-comment-slash"></div>
<div title="Enable automatic replies from this character" data-action="enable" class="right_menu_button fa-solid fa-lg fa-comment-slash"></div>
<div title="Trigger a message from this character" data-action="speak" class="right_menu_button fa-solid fa-lg fa-comment"></div>
<div class="flexFlowColumn flex-container">
<div title="Move up" data-action="up" class="right_menu_button fa-solid fa-chevron-up"></div>
<div title="Move down" data-action="down" class="right_menu_button fa-solid fa-chevron-down"></div>
</div>
<div title="View character card" data-action="view" class="right_menu_button fa-solid fa-xl fa-id-badge"></div>
<div title="Remove from group" data-action="remove" class="right_menu_button fa-solid fa-2xl fa-xmark"></div>
<div title="Add to group" data-action="add" class="right_menu_button fa-solid fa-2xl fa-plus"></div>
</div>
</div>
</div>
<div id="group_list_template" class="template_element">
<div class="group_select flex-container wide100p alignitemsflexstart">
<div class="avatar">
<img src="">
</div>
<div class="flex-container wide100pLess70px gap5px">
<div class="ch_name"></div>
<i class='group_fav_icon fa-solid fa-star'></i>
<input class="ch_fav" value="" hidden />
<div class="tags tags_inline"></div>
</div>
</div>
</div>
<div id="hotswap_template" class="template_element">
<div class="hotswapAvatar">
<img src="/img/ai4.png">
</div>
</div>
<!-- chat and input bar -->
<div id="typing_indicator_template" class="template_element">
<div class="typing_indicator"><span class="typing_indicator_name">CHAR</span> is typing</div>
</div>
<div id="movingDivs"></div>
<div id="sheld">
<div id="sheldheader" class="fa-solid fa-grip drag-grabber"></div>
<div id="chat">
</div>
<div id="form_sheld">
<div id="dialogue_del_mes">
<div id="dialogue_del_mes_ok" class="menu_button">Delete</div>
<div id="dialogue_del_mes_cancel" class="menu_button">Cancel</div>
</div>
<form id="send_form" class="no-connection">
<div id="options_button" class="fa-solid fa-bars"></div>
<textarea id="send_textarea" placeholder="Not connected to API!" name="text"></textarea>
<div id="send_but_sheld">
<div id="mes_stop" title="Abort request" class="mes_stop">
<i class="fa-solid fa-circle-stop"></i>
</div>
<div id="send_but" class="fa-solid fa-paper-plane" title="Send a message"></div>
</div>
</form>
</div>
</div>
<!-- popups live outside sheld to avoid blur conflicts -->
<div id="options" class="font-family-reset">
<div class="options-content">
<a id="option_back_to_main">
<i class="fa-lg fa-solid fa-left-long"></i>
<span>Back to parent chat</span>
</a>
<a id="option_new_bookmark">
<i class="fa-lg fa-solid fa-bookmark"></i>
<span>Save bookmark</span>
</a>
<a id="option_toggle_AN">
<i class="fa-lg fa-solid fa-note-sticky"></i>
<span>Author's Note Show/Hide</span>
</a>
<a id="option_convert_to_group">
<i class="fa-lg fa-solid fa-people-arrows"></i>
<span>Convert to group</span>
</a>
<a id="option_start_new_chat">
<i class="fa-lg fa-solid fa-comment-dots"></i>
<span>Start new chat</span>
</a>
<a id="option_select_chat">
<i class="fa-lg fa-solid fa-address-book"></i>
<span>View past chats</span>
</a>
<hr>
<a id="option_delete_mes">
<i class="fa-lg fa-solid fa-trash-can"></i>
<span>Delete messages</span>
</a>
<a id="option_impersonate" title="Ask AI to write your message for you">
<i class="fa-lg fa-solid fa-user-secret"></i>
<span>Impersonate</span>
</a>
<a id="option_regenerate">
<i class="fa-lg fa-solid fa-repeat"></i>
<span>Regenerate</span>
</a>
</div>
</div>
<div id="export_format_popup" class="list-group">
<div class="export_format list-group-item" data-format="png">PNG</div>
<div class="export_format list-group-item" data-format="json">JSON</div>
<div class="export_format list-group-item" data-format="webp">WEBP</div>
</div>
<div id="avatar_zoom_popup">
<div id="avatar_zoom_popupheader" class="fa-solid fa-grip drag-grabber"></div>
<img id="zoomed_avatar" src="">
</div>
<div id="rawPromptPopup" class="list-group">
<div id="rawPromptWrapper" class="tokenItemizingSubclass"></div>
</div>
<script>
// Configure toast library:
toastr.options.escapeHtml = true; // Prevent raw HTML inserts
toastr.options.timeOut = 4000; // How long the toast will display without user interaction
toastr.options.extendedTimeOut = 10000; // How long the toast will display after a user hovers over it
toastr.options.progressBar = true; // Visually indicate how long before a toast expires.
toastr.options.closeButton = true; // enable a close button
</script>
</body>
</html>