Files
SillyTavern/public/index.html
RossAsscends 4ea7b22f4b added ability to save to iOS homescreen
added fullscreen capability for iOS (no more address bar in the way)
2023-03-15 07:05:44 +09:00

835 lines
42 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">-->
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
<link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-icon-144x144.png" />
<script src="scripts/jquery-3.5.1.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/popper.js"></script>
<script type="module" src="scripts/RossAscends-mods.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>
//To DO::
//2) Count tokens print fix
//6) Reload setting files when they was rewrite
//7) Show an indicator that shows the message in context or not
//8) Сombine multiple messages into one if the text continues
//10) Design presets
//11) Fix sending propt with json additional symbols (kinda \\ and etc)
//import {encode, decode} from "../scripts/gpt-2-3-tokenizer/mod.js";
//let text = "hello world";
//console.log(encode("dsfs").length); // [258, 18798, 995]
</script>
<script type=module src="script.js">
    </script>
<title>Tavern.AI</title>
</head>
<body>
<div id="bg1"></div>
<div id="bg2"></div>
<div id="top-bar"></div>
<div id="shadow_popup">
<div id="dialogue_popup">
<div id="dialogue_popup_text">
<h3>text</h3>
</div>
<div id="dialogue_popup_ok" class="menu_button">Delete</div>
<div id="dialogue_popup_cancel" class="menu_button">Cancel</div>
</div>
</div>
<div id="colab_shadow_popup">
<div id="colab_popup">
<div id="colab_popup_text" style="float: left;margin-left: 88px;">
<h3>Initialization</h3>
</div>
</div>
</div>
<!--<div id="shadow_character_popup">
</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 Defininitions
</div>
</div>
<img id="character_cross" src="img/cross.png"
style="position: absolute; right: 15px; top: 15px; width: 20px; height: 20px; cursor: pointer; opacity: 0.6">
<div id="personality_div">
<hr>
<h4>Personality summary</h4>
<h5>A brief description of the personality <a href="/notes/2" class="notes-link" target="_blank"><span
class="note-link-span">?</span></a></h5>
<input id="personality_textarea" name="personality" placeholder="" form="form_create" class="text_pole"
autocomplete="off">
</div>
<div id="scenario_div">
<h4>Scenario</h4>
<h5>Circumstances and context of the dialogue <a href="/notes/12" class="notes-link" target="_blank"><span
class="note-link-span">?</span></a></h5>
<input id="scenario_pole" name="scenario" class="text_pole" maxlength="9999" value="" autocomplete="off"
form="form_create">
</div>
<div id="talkativeness_div">
<h4>Talkativeness</h4>
<h5>How often does the character speak randomly.&nbsp;<span class="warning">Affects group chats only!</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/11" 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"></textarea>
</div>
<div id="character_popup_ok" class="menu_button">Save</div>
</div>
<div id="world_popup">
<div id="world_popup_text">
<img id="world_cross" src="img/cross.png">
<div id="world_popup_header">
<!-- Consider changing logo to something else -->
<img src="img/book2.png" id="world_logo">
<h3>
World Info Editor
<span>(<a href="/notes/13_3" target="_blank">?</a>)</span>
</h3>
<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 id="entry_edit_template">
<div class="world_entry">
<form class="world_entry_form">
<div class="world_entry_thin_controls">
<div class="world_entry_form_control">
<label for="key">
<h4>Key</h4>
<h5>Comma-separated list of keywords (e.g: foo,bar).</h5>
</label>
<textarea class="text_pole" name="key" rows="1" placeholder=""></textarea>
</div>
<div class="world_entry_form_control keysecondary">
<label for="keysecondary">
<h4>Secondary Key</h4>
<h5>Comma-separated list of additional keywords.</h5>
</label>
<textarea class="text_pole" name="keysecondary" rows="1" placeholder=""></textarea>
</div>
</div>
<div class="world_entry_thin_controls">
<div class="world_entry_form_control">
<label for="order">
<h4>Insertion Order</h4>
<h5>Higher order number entries will be inserted first.</h5>
</label>
<input class="text_pole" type="number" name="order" placeholder="" />
</div>
<div class="world_entry_form_control">
<label for="comment">
<h4>Comment</h4>
<h5>Optional comment (doesn't affect the AI).</h5>
</label>
<textarea class="text_pole" rows="1" name="comment"></textarea>
</div>
</div>
<div class="world_entry_form_control">
<label for="content">
<h4>Content</h4>
<h5>Text that will be inserted to the prompt upon activation.</h5>
</label>
<textarea class="text_pole" name="content" rows="4" placeholder=""></textarea>
</div>
<div class="world_entry_form_control world_entry_form_horizontal">
<label class="checkbox">
<input type="checkbox" name="constant" />
<h4>Constant</h4>
</label>
<label class="checkbox">
<input type="checkbox" name="selective" />
<h4>Selective</h4>
</label>
<div class="world_entry_form_control world_entry_form_radios">
<div>
<label><input type="radio" name="position" value="0">
<h4>Before Chara</h4>
</label>
</div>
<div>
<label><input type="radio" name="position" value="1">
<h4>After Chara</h4>
</label>
</div>
</div>
<span class="world_popup_expander">&nbsp;</span>
<h5 class="world_entry_form_uid">
UID:
&nbsp;
<span class="world_entry_form_uid_value"></span>
</h5>
<h5 class="world_entry_form_tokens">
Tokens used:
&nbsp;
<span class="world_entry_form_token_counter">0</span>
</h5>
<input class="menu_button delete_entry_button" type="submit" value="Delete Entry" />
</div>
</form>
</div>
</div>
</div>
<div id="shadow_select_chat_popup">
<div id="select_chat_popup">
<div id="select_chat_popup_text">
<img id="select_chat_cross" src="img/cross.png"
style="position: absolute; right: 15px; top:14px; width: 20px; height: 20px; cursor: pointer; opacity: 0.6">
</div>
<div id="select_chat_import"> <!-- import chat popup header -->
<input id="chat_import_button" class="menu_button" type="submit" value="+Import">
<div>
<a href="/notes/10" 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>
<div id="select_chat_div">
</div>
<div id="load_select_chat_div">
<img src="img/load.svg">
</div>
</div>
</div>
<div id="shadow_tips_popup">
<div id="tips_popup">
<img id="tips_cross" src="img/cross.png"
style="position: absolute; margin-left: 230px; width: 20px; height: 20px; cursor: pointer; opacity: 0.6">
<img src="img/love.png" style="width: 45px;height: 45px; margin-bottom: 0px; opacity: 0.6;">
<div style="margin-top:20px; margin-left: 20px; margin-right: 20px; margin-bottom: 15px;">
<u>TavernAI</u> is being developed with love and care on a voluntary basis. If you like the project and
want to support it, your donation would make a huge impact! <u>Thank you!</u>
</div>
<img src="img/eth_icon.png" style="width: 35px;height: 35px; margin-bottom: 0px; opacity: 0.6;">
<img src="img/usdt.png" style="width: 35px;height: 35px; margin-bottom: 0px; opacity: 0.6;">
<div id="tips_text">
<h3 style="margin-top: 0px; opacity: 0.8">Ethereum or USDT</h3>
</div>
<img src="img/eth.png" style="opacity: 0.4; margin-bottom: 4px;">
<div>0x975E5C91042ce8168B3d37b17F99949c5eFB3Dfe</div>
<!--<div style="margin-bottom:5px;">***</div><div>TRX: TCiBKCt6xEGrsjpgQA2jDXWJLyUh1KN2Sn</div><div>BTC: 1LASziomyYNkZ2zk8Sa4ZLTkvczBMrjyjP</div>-->
</div>
</div>
<div id="bg_menu">
<div id="logo_block">
<div id="bg_menu_button"><img src="img/tri.png">
</div>
<img src="img/logo.png" id="site_logo">
<div id="update-notification">
<a id="verson" href="https://github.com/TavernAI/TavernAI" target="_blank"></a>
</div>
</div>
<div id="bg_menu_content">
<form id="form_bg_download" 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">
<span class="bg_example_but_load"><img src='img/addbg3.png'></span>
</label>
</form>
</div>
</div>
<input type="checkbox" id="nav-toggle">
<nav id="right-nav-panel">
<div id="right-nav-panel-tabs">
<div class="right_menu_button" id="rm_button_characters" title="Select/Create Characters">&#x1F464;</div>
<div class="right_menu_button" id="rm_button_settings" title="API and AI Settings">⚙️</div>
<div class="right_menu_button" id="rm_button_selected_ch">
<h2></h2>
</div>
<div class="right_menu_button" id="rm_button_panel_pin_div"><input type="checkbox" id="rm_button_panel_pin"
title="Locked = Settings panel stays open"></div>
</div>
<div id="rm_ch_create_block" class="right_menu" 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">
<h4>Character Name</h4><br>
<input id="character_name_pole" name="ch_name" class="text_pole" maxlength="120" 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/fluffy.png" alt="avatar">
</div>
<label for="add_avatar_button" class="menu_button"
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">
Change Avatar
</label>
</div>
<div id="result_info" style="width: 100px;">&nbsp;</div>
</div>
<hr>
<div id="description_div" class="margin-bot-10px">
<h4>Description <a href="/notes/1" class="notes-link" target="_blank"><span
class="note-link-span">?</span></a></h4>
</div>
<textarea id="description_textarea" class="margin-bot-10px" name="description"
placeholder=""></textarea>
<div id="first_message_div" class="margin-bot-10px">
<h4>First message<a href="/notes/3" class="notes-link" target="_blank"><span
class="note-link-span">?</span></a></h4>
</div>
<textarea id="firstmessage_textarea" 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-->
<input id="advanced_div" class="menu_button" type="button" value="Advanced Edit">
<div class="form_create_bottom_buttons_block">
<div id="rm_button_back" class="menu_button">Go Back</div>
<input id="delete_button" class="menu_button" type="button" value="Delete">
<input id="export_button" class="menu_button" type="button" value="Export">
<input id="create_button" class="menu_button" type="submit" value="Create">
</div>
</form>
</div>
<div id="rm_group_chats_block" class="right_menu">
<div id="rm_group_top_bar">
<div id="rm_button_back_from_group" class="right_menu_button">
<h2 style="color: rgb(188, 193, 200, 0.5);">&#8656;</h2>
</div>
<input id="rm_group_chat_name" class="text_pole" type="text" name="chat_name"
placeholder="Chat Name (Optional)" />
</div>
<div id="rm_group_add_members_header">
<h3>Add Members</h3>
<input id="rm_group_filter" class="text_pole" type="search" placeholder="Filter..." />
</div>
<!-- !!!Don't break line after div!!! -->
<div id="rm_group_add_members"></div>
<h3>Members</h3>
<!-- !!!Don't break line after div!!! -->
<div id="rm_group_members"></div>
<div id="group_member_template">
<div class="group_member">
<div class="avatar">
<img src="" />
</div>
<div class="ch_name"></div>
<div class="group_member_icon">
<img class="minus" src="img/minus-solid.svg">
<img class="plus" src="img/plus-solid.svg">
</div>
</div>
</div>
<div id="group_list_template">
<div class="group_select">
<div class="avatar">
<img src="">
</div>
<div class="group_icon">
<img src="img/user-group-solid.svg">
</div>
<div class="ch_name"></div>
</div>
</div>
<div id="rm_group_buttons">
<label class="checkbox" style="display:none">
<input id="rm_group_automode" type="checkbox" /><span></span>
<h4>Auto Mode</h4>
</label>
<input id="rm_group_submit" class="menu_button" type="submit" value="Create">
<div id="rm_group_buttons_expander">&nbsp;</div>
<input id="rm_group_delete" class="menu_button" type="submit" value="Delete">
</div>
</div>
<div id="rm_api_block" class="right_menu">
<div id="main-API-selector-block">
<h3 id="title_api">API</h3>
<select id="main_api">
<option value="kobold">KoboldAI</option>
<option value="textgenerationwebui">Text generation web UI</option>
<option value="novel">NovelAI</option>
</select>
</div>
<div id="respective-settings-block">
<div id="kobold_api" style="position: relative;"> <!-- shows the kobold settings -->
<div class="API-logo">
<a href="https://github.com/KoboldAI/KoboldAI-Client" target="_blank">
<img src="img/kobold.png" style="width:40px;height:40px;">
</a>
</div>
<form action="javascript:void(null);" method="post" enctype="multipart/form-data">
<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" maxlength="500" value=""
autocomplete="off">
<input id="api_button" class="menu_button" type="submit" value="Connect">
<img id="api_loading" src="img/load.svg">
<div id="online_status2">
<div id="online_status_indicator2"></div>
<div id="online_status_text2">Not connected</div>
</div>
</form>
<hr>
<div id="ai-presets-and-config-block">
<h4>Preset settings <a href="/notes/4" class="notes-link" target="_blank"><span
class="note-link-span">?</span></a></h4>
<select id="settings_perset">
<option value="gui">GUI KoboldAI Settings</option>
</select>
<div id="range_block">
<div class="range-block">
<div class="range-block-title">
<h4>Temperature </h4>
</div>
<div class="range-block-counter">
<h5 id="temp_counter">select</h5>
</div>
<div class="range-block-range"><input type="range" id="temp" name="volume" min="0.1"
max="2.0" step="0.01"></div>
</div>
<div class="range-block">
<div class="range-block-title">
<h4>Repetition Penalty </h4>
</div>
<div class="range-block-counter">
<h5 id="rep_pen_counter">select</h5>
</div>
<div class="range-block-range"><input type="range" id="rep_pen" name="volume" min="1"
max="1.5" step="0.01"></div>
</div>
<div class="range-block">
<div class="range-block-title">
<h4>Repetition Penalty Range</h4>
</div>
<div class="range-block-counter">
<h5 id="rep_pen_size_counter">select</h5>
</div>
<div class="range-block-range"><input type="range" id="rep_pen_size" name="volume"
min="0" max="2048" step="1"></div>
</div>
</div>
<div id="softprompt_block">
<h4>Soft Prompt</h4>
<h5>About soft prompts <a href="/notes/14" 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="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:
<ul>
<li>with <pre>--no-stream</pre> option</li>
<li>in notebook mode (not <pre>--cai-chat</pre> or <pre>--chat</pre>)</li>
</ul>
</span>
<form action="javascript:void(null);" method="post" enctype="multipart/form-data">
<h4>API url</h4>
<h5>Example: http://127.0.0.1:7860/ </h5>
<input id="textgenerationwebui_api_url_text" name="textgenerationwebui_api_url"
class="text_pole" maxlength="500" size="35" value="" autocomplete="off">
<input id="api_button_textgenerationwebui" class="menu_button" type="submit" value="Connect">
<img id="api_loading_textgenerationwebui" src="img/load.svg">
</form>
<div id="online_status4">
<div id="online_status_indicator4"></div>
<div id="online_status_text4">Not connected</div>
</div>
<div id="range_block">
<h4>Temperature </h4>
<h5 id="temp_counter_textgenerationwebui">select</h5>
<input type="range" id="temp_textgenerationwebui" name="volume" min="0.1" max="2.0" step="0.01">
<h4>Repetition Penalty </h4>
<h5 id="rep_pen_counter_textgenerationwebui">select</h5>
<input type="range" id="rep_pen_textgenerationwebui" name="volume" min="1" max="1.5"
step="0.01">
<h4>Repetition Penalty Range</h4>
<h5 id="rep_pen_size_counter_textgenerationwebui">select</h5>
<input type="range" id="rep_pen_size_textgenerationwebui" name="volume" min="0" max="2048"
step="1">
<h4>Top K</h4>
<h5 id="top_k_counter_textgenerationwebui">select</h5>
<input type="range" id="top_k_textgenerationwebui" name="volume" min="0" max="200" step="1">
<h4>Top P</h4>
<h5 id="top_p_counter_textgenerationwebui">select</h5>
<input type="range" id="top_p_textgenerationwebui" name="volume" min="0" max="1" step="0.1">
<h4>Typical P</h4>
<h5 id="typical_p_counter_textgenerationwebui">select</h5>
<input type="range" id="typical_p_textgenerationwebui" name="volume" min="0" max="1" step="0.1">
<h4>Penalty Alpha</h4>
<h5 id="penalty_alpha_counter_textgenerationwebui">select</h5>
<input type="range" id="penalty_alpha_textgenerationwebui" name="volume" min="0" max="5"
step="0.05" />
</div>
</div>
<div id="novel_api" style="display: none;position: relative;"> <!-- shows the novel settings -->
<div class="API-logo">
<a href="https://novelai.net/" target="_blank">
<img src="img/novelai.png" style="width:auto;height:22px;">
</a>
</div>
<form action="javascript:void(null);" method="post" enctype="multipart/form-data">
<h4>Novel API key<a href="/notes/6" class="notes-link" target="_blank"><span
class="note-link-span">?</span></a></h4>
<input id="api_key_novel" name="api_key_novel" class="text_pole" maxlength="500" value=""
autocomplete="off">
<Br>
<input id="api_button_novel" class="menu_button" type="submit" value="Connect">
<img id="api_loading_novel" src="img/load.svg">
</form>
<div id="online_status3">
<div id="online_status_indicator3"></div>
<div id="online_status_text3">No connection...</div>
</div>
<h4>Novel AI Model<a href="/notes/8" class="notes-link" target="_blank"><span
class="note-link-span">?</span></a></h4>
<select id="model_novel_select" class="option_select_right_menu" style='margin-bottom: 16px;'>
<option value="euterpe-v2">Euterpe</option>
<option value="krake-v2">Krake</option>
</select>
<h4>Preset settings<a href="/notes/7" class="notes-link" target="_blank"><span
class="note-link-span">?</span></a></h4>
<select id="settings_perset_novel" class="option_select_right_menu">
<option value="gui">Default</option>
</select>
<div id="range_block_novel">
<h4>Temperature </h4>
<h5 id="temp_counter_novel">select</h5>
<input type="range" id="temp_novel" name="volume" min="0.1" max="2.0" step="0.01">
<h4>Repetition Penalty </h4>
<h5 id="rep_pen_counter_novel">select</h5>
<input type="range" id="rep_pen_novel" name="volume" min="1" max="1.5" step="0.01">
<h4>Repetition Penalty Range</h4>
<h5 id="rep_pen_size_counter_novel">select</h5>
<input type="range" id="rep_pen_size_novel" name="volume" min="0" max="2048" step="1">
</div>
</div>
</div>
<hr>
<div id="user-settings-block">
<h3>User Settings</h3>
<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/png" name="avatar">
</form>
<form id='form_change_name' action="javascript:void(null);" method="post" enctype="multipart/form-data">
<h4>Name</h4><br>
<input id="your_name" name="your_name" class="text_pole" maxlength="35" value=""
autocomplete="off"><br>
<input id="your_name_button" class="menu_button" type="submit"
title="Click to set a new User Name (reloads page)" value="Change Name">
</form>
</div>
<hr>
<div id="world_info_block">
<h3>World Info</h3>
<div id="world_info_buttons">
<div id="world_create_button" class="right_menu_button">
<h4>+Create</h4>
</div>
<div id="world_import_button" class="right_menu_button">
<h4>+Import</h4>
</div>
</div>
</div>
<h4>How to use <a href="/notes/13" class="notes-link" target="_blank"><span
class="note-link-span">?</span></a></h4>
<div id="rm_world_import" class="right_menu" style="display: none;">
<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">
</form>
</div>
<select id="world_info">
<option value="None">None</option>
</select>
<input id="world_info_edit_button" class="menu_button" type="submit" value="Details">
<div id="world_info_depth_block">
<h4>
Scan Depth <a href="/notes/13_1" class="notes-link" target="_blank"><span
class="note-link-span">?</span></a>
</h4>
<h5 id="world_info_depth_counter">depth</h5>
<input type="range" id="world_info_depth" name="volume" min="1" max="10" step="1">
</div>
<div id="world_info_budget_block">
<h4>
Token Budget <a href="/notes/13_2" class="notes-link" target="_blank"><span
class="note-link-span">?</span></a>
</h4>
<h5 id="world_info_budget_counter">budget</h5>
<input type="range" id="world_info_budget" name="volume" min="32" max="2048" step="16">
</div>
<hr>
<div id="pro-settings-block">
<h3>Pro Settings</h3>
<div id="amount_gen_block">
<h4>Amount generation </h4>
<h5 id="amount_gen_counter">select</h5>
<input type="range" id="amount_gen" name="volume" min="16" max="512" step="1">
</div>
<div id="max_context_block">
<h4>Context Size</h4>
<h5 id="max_context_counter">select</h5>
<input type="range" id="max_context" name="volume" min="512" max="2048" step="1">
</div>
<div id="anchors-block">
<h4>Anchors Order</h4>
<h5>Helps to increase the length of messages <a href="/notes/9" class="notes-link"
target="_blank"><span class="note-link-span">?</span></a></h5>
<select id="anchor_order">
<option value="0">Character Anchor - Style Anchor</option>
<option value="1">Style Anchor - Character Anchor</option>
</select>
<div id="anchor_checkbox">
<label for="character_anchor"><input id="character_anchor" type="checkbox" />
<h4>Character Anchor</h4>
</label>
<label for="style_anchor"><input id="style_anchor" type="checkbox" />
<h4>Style Anchor</h4>
</label>
</div>
</div>
</div>
<hr>
<div id="power-user-options-block">
<h3>Power User Options</h3>
<div id="power-user-option-checkboxes">
<label for="auto-connect-checkbox"><input id="auto-connect-checkbox" type="checkbox" />
<h4>Auto-connects Last Server</h4>
</label>
<label for="auto-load-chat-checkbox"><input id="auto-load-chat-checkbox" type="checkbox" />
<h4>Auto-load Last Chat</h4>
</label>
<label for="collapse-newlines-checkbox"><input id="collapse-newlines-checkbox" type="checkbox" />
<h4>Collapse Newlines in Output</h4>
</label>
</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 type="file" id="character_import_file" accept=".json, image/png" name="avatar">
<input id="character_import_file_type" name="file_type" class="text_pole" maxlength="999" size="2"
value="" autocomplete="off">
</form>
</div>
<div id="rm_characters_block" class="right_menu">
<div class="form_create_bottom_buttons_block">
<div id="rm_button_create" class="menu_button">+New Character</div>
<div id="character_import_button" class="menu_button">+Import</div>
<div id="rm_button_group_chats" class="menu_button">+Group</div>
</div>
<form id="form_character_search_form" action="javascript:void(null);">
<input id="character_search_bar" class="text_pole" type="search" placeholder="Search here..." />
<div id="characloud_url" class="menu_button" title="Find more characters on CharaCloud (coming soon)">
<img src="img/cloud_logo.png">
</div>
</form>
<div id="rm_print_characters_block"></div>
</div>
<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 id="typing_indicator_template">
<div class="typing_indicator"><span class="typing_indicator_name">CHAR</span> is typing</div>
</div>
<div id="group_avatars_template">
<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="sheld">
<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">
<div id="options_button">
<div id="options">
<div class="options-content">
<a id="option_start_new_chat"><img src="img/save_and_start_new_chat.png"><span>Start new
chat</span></a>
<a id="option_select_chat"><img src="img/book6.png"><span>View Past Chats</span></a>
<hr>
<a id="option_delete_mes"><img src="img/del_mes.png"><span>Delete messages</span></a>
<a id="option_regenerate"><img src="img/regenerate.png"><span>Regenerate</span></a>
</div>
</div>
</div>
<textarea id="send_textarea" placeholder="Not connected to API!" name="text"></textarea>
<div id="send_but_sheld">
<div id="loading_mes"></div>
<input id="send_but" type="button">
</div>
</form>
</div>
</div>
</body>
</html>