rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity
Files
e8eb1ac36b0472d22a5b10cb15aaa6aa04346e1a
SillyTavern/public/index.html

2496 lines
149 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="darkreader-lock">
<link href="webfonts/NotoSans/stylesheet.css" rel="stylesheet">
<!-- fontawesome webfonts-->
<link href="css/fontawesome.css" rel="stylesheet">
<link href="css/solid.css" rel="stylesheet">
<link href="css/jquery-ui.min.css" rel="stylesheet">
<link href="css/bright.min.css" rel="stylesheet">
<link href="css/cropper.min.css" rel="stylesheet">
<link 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 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="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="512" 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>
<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">
<label for="oai_breakdown" class="checkbox_label widthFreeExpand">
<input id="oai_breakdown" type="checkbox" />
Token Breakdown
</label>
<div class="toggle-description justifyLeft">
Display a breakdown of the tokens used in the request.
</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">
<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" 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>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="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">
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="250"></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="250"></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">
<div id="main-API-selector-block">
<select id="main_api">
<option value="kobold">KoboldAI</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_api" style="position: relative;"> <!-- shows the kobold settings -->
<form action="javascript:void(null);" method="post" enctype="multipart/form-data">
<label for="use_horde" class="checkbox_label">
<input id="use_horde" type="checkbox" />
Use Horde
</label>
<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="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>
<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 class="flex-container">
<input id="horde_api_key" name="horde_api_key" class="text_pole flex1" maxlength="500" type="text" placeholder="0000000000">
<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">Hold Control / Command key to select multiple models.</small>
<select id="horde_model" multiple>
<option>-- Horde models not loaded --</option>
</select>
</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" maxlength="500" size="35" type="text">
<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>
</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">
<a href="https://github.com/oobabooga/text-generation-webui" target="_blank">
oobabooga/text-generation-webui
</a>
</div>
<span>
Make sure you run it with <tt>--api</tt> flag
</span>
<form action="javascript:void(null);" method="post" enctype="multipart/form-data">
<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" maxlength="500" value="" autocomplete="off">
<input id="api_button_textgenerationwebui" class="menu_button" type="submit" value="Connect">
<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" maxlength="500" value="" autocomplete="off">
<div id="api_loading_textgenerationwebui" class="api-load-icon fa-solid fa-hourglass fa-spin"></div>
</form>
<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;">
<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">
<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>
</form>
<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>
<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" />
<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>
<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 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 textarea_compact" type="text" maxlength="100" />
</div>
</div>
</div>
<div class="flex-container">
<div class="flex1">
<label for="instruct_system_sequence">
System Sequence
</label>
<div>
<input id="instruct_system_sequence" class="text_pole textarea_compact" type="text" maxlength="100" />
</div>
</div>
<div class="flex1">
<label for="instruct_stop_sequence">
Stop Sequence
</label>
<div>
<input id="instruct_stop_sequence" class="text_pole 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>
<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 id="anchors-block">
<h4>
Anchors
</h4>
<p>
This feature is obsolete and has been removed.
Something else is coming soon in its place!
</p>
</div>
</div>
</div>
</div>
</div>
<div id="WI-SP-button" class="drawer">
<div class="drawer-toggle drawer-header">
<div class="drawer-icon fa-solid fa-book-atlas closedIcon " title="World Info & Soft Prompts"></div>
</div>
<div class="drawer-content closedDrawer">
<div id="wi-holder">
<h3>
World Info
<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="2048" step="16">
</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">
<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>
</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="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 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>
</div>
<div name="NameAndAvatar" class="flex-container flexFlowColumn drawer25pWidth">
<div name="NameChanger">
<h4>Name</h4>
<div class="change_name">
<input id="your_name" name="your_name" placeholder="Enter your name" class="text_pole" 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>
</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>
<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-trash-can " 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" 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" 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" placeholder="Search / Create tags" maxlength="25" />
<div class="tags_view menu_button fa-solid fa-tags" title="View all tags"></div>
</div>
<div id="groupTagList" class="tags paddingTopBot5"></div>
</div>
<div id="rm_group_top_bar" class="flex-container spaceEvenly 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" type="search" placeholder="Filter..." maxlength="100" />
<div id="group_fav_filter" class="menu_button fa-solid fa-ranking-star" 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" 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">
<div id="character_popup_text">
<div>
<img src="img/book2.png" id="advanced_book_logo">
</div>
<div>
<h3 id="character_popup_text_h3"></h3> - Advanced Definitions
</div>
</div>
<div id="character_cross" class="fa-solid fa-circle-xmark"></div>
<div id="personality_div">
<hr>
<h4>Personality summary</h4>
<h5>A brief description of the personality <a href="/notes#personalitysummary" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
<textarea id="personality_textarea" name="personality" placeholder="" form="form_create" class="text_pole" autocomplete="off" rows="2" maxlength="20000"></textarea>
</div>
<div id="scenario_div">
<h4>Scenario</h4>
<h5>Circumstances and context of the dialogue
<a href="/notes#scenario" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</h5>
<textarea id="scenario_pole" name="scenario" class="text_pole" maxlength="20000" value="" autocomplete="off" form="form_create" rows="2"></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>
<div id="mes_example_div">
<div>
<h4>Examples of dialogue</h4>
<h5>Forms a personality more clearly <a href="/notes#examplesofdialogue" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
</div>
<textarea id="mes_example_textarea" name="mes_example" placeholder="" form="form_create" maxlength="20000"></textarea>
</div>
<div id="character_popup_ok" class="menu_button">Save</div>
</div>
<div id="world_popup">
<div id="world_popup_text">
<div id="world_cross" class="fa-solid fa-circle-xmark"></div>
<div id="world_popup_header">
<!-- 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 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="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">
All group members will use the following scenario text instead of what is specified in their character cards.
</div>
<div class="range-block-range wide100p">
<textarea class="wide100p group_chat_scenario" class="text_pole" rows="5" 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">
<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 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>Separate with 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>Secondary Required Keywords</h4>
<h5>Separate with 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="${count_view_mes}" ch_name="${characterName}" is_user="${mes.is_user}" is_system="${mes.is_system}">
<div class="for_checkbox"></div><input type="checkbox" class="del_checkbox">
<div>
<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">
<span class="name_text">${characterName}</span>
<div class="mes_buttons">
<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 title="Stop Streaming" class="mes_stop">
<i class="fa-xl fa-solid fa-circle-stop"></i>
</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="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="sheld">
<div id="sheldheader" class="fa-solid fa-grip drag-grabber"></div>
<!-- <div class="pull-tab"></div> -->
<div id="chat">
</div>
<div id="form_sheld">
<div id="token_breakdown" style="display:none;">
<div>
<!-- Token Breakdown Goes Here -->
</div>
</div>
<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="loading_mes">
<div title="Loading" class="fa-solid fa-hourglass-half"></div>
</div>
<div id="send_but" class="fa-solid fa-feather-pointed" 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_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>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink