Files
SillyTavern/public/index.html
2023-03-22 16:53:01 +02:00

1296 lines
71 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="img/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="img/apple-icon-144x144.png" />
<script src="scripts/jquery-3.5.1.min.js"></script>
<script src="scripts/jquery.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 src="scripts/purify.min.js"></script>
<script type="module" src="scripts/RossAscends-mods.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>
//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>
<script type="module" src="scripts/world-info.js"></script>
<script type="module" src="scripts/group-chats.js"></script>
<script type="module" src="scripts/power-user.js"></script>
<script type="module" src="scripts/kai-settings.js"></script>
<script type="module" src="scripts/textgen-settings.js"></script>
<title>Tavern.AI</title>
</head>
<body>
<div id="bg1"></div>
<div id="bg2"></div>
<!-- top bar central settings buttons -->
<div id="top-bar">
</div>
<div id="top-settings-holder">
<!-- background selection menu -->
<div id="logo_block" class="drawer" style="z-index:3001;">
<div id="site_logo" class="drawer-toggle drawer-header">
<div class="drawer-icon icon-panorama closedIcon"></div>
</div>
<div class="drawer-content closedDrawer">
<div class="flex-container">
<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>
</div>
</div>
<div id="sys-settings-button" class="drawer" style="z-index:3001;">
<div class="drawer-toggle drawer-header">
<div id="API-status-top" class="drawer-icon icon-connect closedIcon"></div>
</div>
<div id="rm_api_block" class="drawer-content closedDrawer">
<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>
<option value="openai">OpenAI</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">
<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>
<div id="kobold_api-presets">
<h3>Kobold Presets
<a href="/notes/4" 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>
<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>API key</h4>
<h5>Where to get
<a href="/notes/6" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</h5>
<input id="api_key_novel" name="api_key_novel" class="text_pole" maxlength="500" size="35" value="" autocomplete="off">
<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>
<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 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>
<h5>Where to get
<a href="/notes/oai_api_key" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</h5>
<input id="api_key_openai" name="api_key_openai" class="text_pole" maxlength="500" size="35" value="" autocomplete="off">
<input id="api_button_openai" class="menu_button" type="submit" value="Connect">
<img id="api_loading_openai" src="img/load.svg">
</form>
<div class="online_status4">
<div class="online_status_indicator4"></div>
<div class="online_status_text4">No connection...</div>
</div>
<h4>Preset settings</h4>
<select id="settings_perset_openai">
<option value="gui">Default</option>
</select>
<h4>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="text-davinci-003">text-davinci-003</option>
<option value="text-davinci-002">text-davinci-002</option>
<option value="code-davinci-002">code-davinci-002</option>
</select>
</div>
</div>
</div>
<div id="user-settings-button" class="drawer" style="z-index:3004;">
<div class="drawer-toggle">
<div class="drawer-icon icon-user closedIcon"></div>
</div>
<div id="user-settings-block" class="drawer-content closedDrawer">
<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>
<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 id="power-user-options-block">
<h3>Power User Options</h3>
<div id="power-user-option-checkboxes">
<label class="checkbox_label" for="pin-examples-checkbox"><input id="pin-examples-checkbox" type="checkbox" />
Pin message examples
</label>
<label for="auto-connect-checkbox"><input id="auto-connect-checkbox" type="checkbox" />
Auto-connect to Last Server
</label>
<label for="auto-load-chat-checkbox"><input id="auto-load-chat-checkbox" type="checkbox" />
Auto-load Last Chat
</label>
<label for="collapse-newlines-checkbox"><input id="collapse-newlines-checkbox" type="checkbox" />
Collapse Newlines in Output
</label>
<label for="force-pygmalion-formatting-checkbox"><input id="force-pygmalion-formatting-checkbox" type="checkbox" />
Pygmalion Formatting for All Models
</label>
<label for="swipes-checkbox"><input id="swipes-checkbox" type="checkbox" />
Swipes
</label>
</div>
</div>
</div>
</div>
<div id="ai-config-button" class="drawer" style="z-index:3002;">
<div class="drawer-toggle drawer-header">
<div class="drawer-icon icon-sliders closedIcon"></div>
</div>
<div class="drawer-content closedDrawer widthFreeExpand">
<div class="flex-container">
<div id="ai-settings-flex-col1" class="flexWide50p">
<div id="common-gen-settings-block">
<div id="pro-settings-block">
<div id="amount_gen_block" class="range-block">
<div class="range-block-title">
Amount generation
</div>
<span id="amount_gen_counter" class="range-block-counter">select</span>
<input type="range" class="range-block-range" id="amount_gen" name="volume" min="16" max="512" step="1">
</div>
<div id="max_context_block" class="range-block">
<div class="range-block-title">
Context Size
</div>
<span id="max_context_counter" class="range-block-counter">select</span>
<input type="range" class="range-block-range" id="max_context" name="volume" min="512" max="2048" step="1">
</div>
</div>
</div>
<div id="respective-ranges-and-temps">
<div id="range_block">
<div class="range-block">
<div class="range-block-title">
Temperature
</div>
<div class="range-block-counter">
<span id="temp_counter">select</span>
</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">
Repetition Penalty
</div>
<div class="range-block-counter">
<span id="rep_pen_counter">select</span>
</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">
Repetition Penalty Range
</div>
<div class="range-block-counter">
<span id="rep_pen_range_counter">select</span>
</div>
<div class="range-block-range">
<input type="range" id="rep_pen_range" name="volume" min="0" max="2048" step="1">
</div>
</div>
</div>
<div id="range_block_novel">
<div class="range-block-title">
Temperature
</div>
<div class="range-block-counter">
<span id="temp_counter_novel">select</span>
</div>
<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-title">
Repetition Penalty
</div>
<div class="range-block-counter">
<span id="rep_pen_counter_novel">select</span>
</div>
<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-title"></div>
Repetition Penalty Range
<div class="range-block-counter">
<span id="rep_pen_size_counter_novel">select</span>
</div>
<div class="range-block-range">
<input type="range" id="rep_pen_size_novel" name="volume" min="0" max="2048" step="1">
</div>
</div>
<div id="range_block_textgenerationwebui">
<div class="range-block">
<div class="range-block-title">
Temperature
</div>
<div class="range-block-counter">
<span id="temp_counter_textgenerationwebui">select</span>
</div>
<div class="range-block-range">
<input type="range" id="temp_textgenerationwebui" name="volume" min="0.1" max="2.0" step="0.01">
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Repetition Penalty
</div>
<div class="range-block-counter">
<span id="rep_pen_counter_textgenerationwebui">select</span>
</div>
<div class="range-block-range">
<input type="range" id="rep_pen_textgenerationwebui" name="volume" min="1" max="1.5" step="0.01">
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Repetition Penalty Range
</div>
<div class="range-block-counter">
<span id="rep_pen_size_counter_textgenerationwebui">select</span>
</div>
<div class="range-block-range">
<input type="range" id="rep_pen_size_textgenerationwebui" name="volume" min="0" max="2048" step="1">
</div>
</div>
</div>
<div id="range_block_openai">
<div class="range-block">
<div class="range-block-title">
OpenAI Context Size
</div>
<div class="range-block-counter">
<span id="openai_max_context_counter">select</span>
</div>
<div class="range-block-range">
<input type="range" id="openai_max_context" name="volume" min="512" max="4095" step="1">
</div>
</div>
<div class="range-block">
<div class="range-block-title">
OpenAI max response length (in tokens)
</div>
<div class="range-block-range">
<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-counter">
<span id="temp_counter_openai">select</span>
</div>
<div class="range-block-range">
<input type="range" id="temp_openai" name="volume" min="0" max="2.0" step="0.01">
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Frequency Penalty
</div>
<div class="range-block-counter">
<span id="freq_pen_counter_openai">select</span>
</div>
<div class="range-block-range">
<input type="range" id="freq_pen_openai" name="volume" min="-2" max="2" step="0.01">
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Presence Penalty
</div>
<div class="range-block-counter">
<span id="pres_pen_counter_openai">select</span>
</div>
<div class="range-block-range">
<input type="range" id="pres_pen_openai" name="volume" min="-2" max="2" step="0.01">
</div>
</div>
</div>
</div>
<div id="anchors-block">
Anchors Order
<a href="/notes/9" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
<br>
<select id="anchor_order">
<option value="0">Character then Style</option>
<option value="1">Style then Character</option>
</select>
<div id="anchor_checkbox">
<label for="character_anchor"><input id="character_anchor" type="checkbox" />
Character Anchor
</label>
<label for="style_anchor"><input id="style_anchor" type="checkbox" />
Style Anchor
</label>
</div>
</div>
</div>
<div id="ai-settings-flex-col2" class="flexWide50p">
<div id="advanced-ai-config-block">
<div id="kobold_api-settings">
<div id="kobold-advanced-config">
<div class="range-block">
<div class="range-block-title">
Top P Sampling
</div>
<div class="range-block-counter">
<span id="top_p_counter">select</span>
</div>
<div class="range-block-range">
<input type="range" id="top_p" name="volume" min="0" max="1" step="0.01">
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Top A Sampling
</div>
<div class="range-block-counter">
<span id="top_a_counter">select</span>
</div>
<div class="range-block-range">
<input type="range" id="top_a" name="volume" min="0" max="1" step="0.01">
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Top K Sampling
</div>
<div class="range-block-counter">
<span id="top_k_counter">select</span>
</div>
<div class="range-block-range">
<input type="range" id="top_k" name="volume" min="0" max="100" step="1">
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Typical Sampling
</div>
<div class="range-block-counter">
<span id="typical_counter">select</span>
</div>
<div class="range-block-range">
<input type="range" id="typical" name="volume" min="0" max="1" step="0.01">
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Tail Free Sampling
</div>
<div class="range-block-counter">
<span id="tfs_counter">select</span>
</div>
<div class="range-block-range">
<input type="range" id="tfs" name="volume" min="0" max="1" step="0.05">
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Repetition Penalty Slope
</div>
<div class="range-block-counter">
<span id="rep_pen_slope_counter">select</span>
</div>
<div class="range-block-range">
<input type="range" id="rep_pen_slope" name="volume" min="0" max="10" step="0.1">
</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">
***COMING SOON***
</div>
<div id="textgenerationwebui_api-settings">
<div class="range-block">
<div class="range-block-title">
Top K
</div>
<div class="range-block-counter">
<span id="top_k_counter_textgenerationwebui">select</span>
</div>
<div class="range-block-range">
<input type="range" id="top_k_textgenerationwebui" name="volume" min="0" max="200" step="1">
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Top P
</div>
<div class="range-block-counter">
<span id="top_p_counter_textgenerationwebui">select</span>
</div>
<div class="range-block-range">
<input type="range" id="top_p_textgenerationwebui" name="volume" min="0" max="1" step="0.1">
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Typical P
</div>
<div class="range-block-counter">
<span id="typical_p_counter_textgenerationwebui">select</span>
</div>
<div class="range-block-range">
<input type="range" id="typical_p_textgenerationwebui" name="volume" min="0" max="1" step="0.1">
</div>
</div>
<div class="range-block">
<div class="range-block-title">
Penalty Alpha
</div>
<div class="range-block-counter">
<span id="penalty_alpha_counter_textgenerationwebui">select</span>
</div>
<div class="range-block-range">
<input type="range" id="penalty_alpha_textgenerationwebui" name="volume" min="0" max="5" step="0.05" />
</div>
</div>
</div>
<div id="openai_settings">
<div class="range-block">
<label class="checkbox_label" for="nsfw_toggle">
<input id="nsfw_toggle" type="checkbox" checked>
NSFW Toggle
</label>
</div>
<div class="range-block">
<label title="NSFW block goes first in the resulting prompt" class="checkbox_label">
<input id="nsfw_first" type="checkbox" />
NSFW first
</label>
</div>
<!-- Currently broken -->
<div style="display: none" class="range-block">
<label title="Enables OpenAI completion streaming" class="checkbox_label" for="stream_toggle">
<input id="stream_toggle" type="checkbox" />
Streaming
</label>
</div>
<div class="range-block">
<label title="Blends definitions with model's knowledge" class="checkbox_label">
<input id="enhance_definitions" type="checkbox" />
Enhance Definitions
</label>
</div>
<div class="range-block">
<label for="wrap_in_quotes" title="Wrap user messages in quotes before sending" class="checkbox_label">
<input id="wrap_in_quotes" type="checkbox" />
Wrap in Quotes
</label>
</div>
<br>
<div class="range-block">
<div class="range-block-title">
Main prompt
</div>
<div class="range-block-counter">
The main prompt used to set the model behavior
</div>
<div class="range-block-range">
<textarea id="main_prompt_textarea" class="text_pole" name="main_prompt" rows="5" placeholder=""></textarea>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
NSFW prompt
</div>
<div class="range-block-counter">
Prompt that is used when the NSFW toggle is on
</div>
<div class="range-block-range">
<textarea id="nsfw_prompt_textarea" class="custom_textarea" name="nsfw_prompt" rows="5" placeholder=""></textarea>
</div>
</div>
<div class="range-block">
<input id="save_prompts" class="menu_button" type="button" value="Save prompt settings">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="WI-SP-button" class="drawer" style="z-index:3003;">
<div class="drawer-toggle drawer-header">
<div class="drawer-icon icon-globe closedIcon "></div>
</div>
<div class="drawer-content closedDrawer">
<div id="wi-holder">
<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>
<span id="world_info_depth_counter">depth</span>
<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>
<span id="world_info_budget_counter">budget</span>
<input type="range" id="world_info_budget" name="volume" min="32" max="2048" step="16">
</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="advanced-formatting-button" class="drawer" style="z-index:3005;">
<div class="drawer-toggle">
<div class="drawer-icon icon-formatting closedIcon"></div>
</div>
<div class="drawer-content">
<h3>Advanced Formatting
<a href="/notes/advanced_formatting" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</h3>
<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="always-force-name2-checkbox">
<input id="always-force-name2-checkbox" type="checkbox" />
Always add character's name to prompt
</label>
</div>
</div>
<div id="extensions-settings-button" class="drawer" style="z-index:3004;">
<div class="drawer-toggle">
<div class="drawer-icon icon-cubes closedIcon"></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/SillyLossy/TavernAI-extras">
TavernAI-extras
</a>
</h3>
<input id="extensions_url" type="text" class="text_pole" />
<div class="extensions_url_block">
<input id="extensions_connect" class="menu_button" type="submit" value="Connect" />
<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>
<p>Missing something? Press <a id="extensions_details" href="javascript:void">here</a> for more details!</p>
</div>
<div id="extensions_settings">
<h3>Extension settings</h3>
</div>
</div>
</div>
</div>
<div id="rightNavHolder" class="drawer" style="z-index:3001;">
<div id="unimportantYes" class="drawer-toggle drawer-header">
<div class="drawer-icon icon-idcard closedIcon"></div>
</div>
<nav id="right-nav-panel" class="drawer-content closedDrawer">
<div id="right-nav-panel-tabs">
<div class="right_menu_button" id="rm_button_characters" title="Select/Create Characters">
<img alt="" class="svg_icon" src="img/list-ul-solid.svg" />
</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" title="Locked = Settings panel stays open">
<input type="checkbox" id="rm_button_panel_pin">
<label for="rm_button_panel_pin">
<img class="unchecked svg_icon" alt="" src="img/lock-open-solid.svg" />
<img class="checked svg_icon" alt="" src="img/lock-solid.svg" />
</label>
</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>
<input id="character_name_pole" name="ch_name" class="text_pole" placeholder="Name this character" 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">
<img alt="" class="svg_icon" src="img/file-image-solid.svg">
</label>
<div class="form_create_bottom_buttons_block">
<div id="rm_button_back" class="menu_button">
<img alt="" class="svg_icon" src="img/left-long-solid.svg">
</div>
<div id="advanced_div" class="menu_button" title="Advanced Definitions">
<img alt="" class="svg_icon" src="img/book-solid.svg">
</div>
<div id="export_button" class="menu_button" title="Export and Download">
<img alt="" class="svg_icon" src="img/file-export-solid.svg">
</div>
<!-- <div id="create_button" class="menu_button" type="submit" title="Create Character">✅</div> -->
<label for="create_button" id="create_button_label" class="menu_button" title="Create Character">
<input type="submit" id="create_button" name="create_button">
<img alt="" class="svg_icon" src="img/user-check-solid.svg">
</label>
<!-- <input id="create_button" class="menu_button" title="Create Character" type="submit" value="✅"> -->
<div id="delete_button" class="menu_button" title="Delete Character">
<img alt="" class="svg_icon" src="img/trash-can-solid.svg">
</div>
</div>
</div>
<div id="result_info"></div>
</div>
<hr>
<div id="description_div" class="margin-bot-10px">
Description
<a href="/notes/1" 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/3" 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 id="rm_group_chats_block" class="right_menu">
<div id="rm_group_top_bar">
<div id="rm_button_back_from_group" class="menu_button">
<img alt="" class="svg_icon" src="img/left-long-solid.svg">
</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 alt="Avatar" src="" />
</div>
<div class="ch_name"></div>
<div class="group_member_icon">
<img alt="Remove" class="minus svg_icon" src="img/minus-solid.svg">
<img alt="Add" class="plus svg_icon" 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 class="svg_icon" 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_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" title="Create New Character" class="menu_button">
<img alt="" class="svg_icon" src="img/user-plus-solid.svg">
</div>
<div id="character_import_button" title="Import Character from File" class="menu_button">
<img alt="" class="svg_icon" src="img/file-arrow-up-solid.svg">
</div>
<div id="rm_button_group_chats" title="Create New Chat Group" class="menu_button">
<img alt="" class="svg_icon" src="img/user-group-solid.svg">
</div>
</div>
<form id="form_character_search_form" action="javascript:void(null);">
<input id="character_search_bar" class="text_pole" type="search" placeholder="Character search..." />
</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>
</div>
<!-- various fullscreen popups -->
<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 the chracter 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/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" alt="Close">
</div>
<div id="select_chat_import"> <!-- import chat popup header -->
<div id="chat_import_button" class="right_menu_button">
<img alt="" class="svg_icon" src="img/cloud-arrow-up-solid.svg" />
</div>
<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>
<!-- right nav panel for character/groups management/editing/creation -->
<!-- <input type="checkbox" id="nav-toggle"> -->
<!-- templates for JS to reuse when needed -->
<div id="message_template">
<div class="mes" mesid="${count_view_mes}" ch_name="${characterName}" is_user="${mes.is_user}">
<div class="for_checkbox"></div><input type="checkbox" class="del_checkbox">
<div class="avatar"><img src=""></div>
<div class="swipe_left"><img src="img/swipe_left.png"></div>
<div class="mes_block">
<div class="ch_name">
<span class="name_text">${characterName}</span>
<div title=Edit class=mes_edit></div>
<div class=mes_edit_cancel><img src=img/cancel.png></div>
<div class=mes_edit_done><img src=img/done.png></div>
</div>
<div class=mes_text></div>
<div class="mes_bias"></div>
</div>
<div class="swipe_right">
<img src="img/swipe_right.png">
<div class="swipes-counter"></div>
</div>
</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>
<!-- chat and input bar -->
<div id="typing_indicator_template">
<div class="typing_indicator"><span class="typing_indicator_name">CHAR</span> is typing</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 alt="" src="img/save_and_start_new_chat.png">
<span>Start new chat</span></a>
<a id="option_select_chat">
<img alt="" src="img/book6.png">
<span>View Past Chats</span>
</a>
<hr>
<a id="option_delete_mes">
<img alt="" src="img/del_mes.png">
<span>Delete messages</span>
</a>
<a id="option_regenerate">
<img alt="" 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>