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

AI config panel cleanup/styling

Browse Source 
- editable inputs styled
- moved API model selectors from AIConfig to API Panel
- nicer WI Entry footer spacing
- corrected WI Entry textarea height calculations
- centered send_textarea placeholder
.mes_text now wraps anywhere to prevent long strings from overflowing-X
- placeholders added to a few inputs
This commit is contained in:
RossAscends
2023-05-04 16:26:49 +09:00
parent 9c62783e08
commit b7e8d01694
4 changed files with 383 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/NovelAI Settings/Classic-Krake.settings
View File

@@ -6,8 +6,8 @@
"temperature": 1.7, "temperature": 1.7,
"max_length": 90, "max_length": 90,
"min_length": 1, "min_length": 1,
"tail_free_sampling": 0.6602, "tail_free_sampling": 0.66,
"repetition_penalty": 1.0565, "repetition_penalty": 1.06,
"repetition_penalty_range": 340, "repetition_penalty_range": 340,
"repetition_penalty_frequency": 0, "repetition_penalty_frequency": 0,
"repetition_penalty_presence": 0 "repetition_penalty_presence": 0

594
public/index.html
View File

@@ -86,6 +86,9 @@
<div class="checked fa-solid fa-lock "></div> <div class="checked fa-solid fa-lock "></div>
</label> </label>
</div> </div>
<div class="toggle-description flex-container justifyLeft wide100p editable-slider-notification">
Click slider numbers to input manually.
</div>
<div class="scrollableInner"> <div class="scrollableInner">
<div class="flex-container"> <div class="flex-container">
<div id="respective-presets-block" class="width100p"> <div id="respective-presets-block" class="width100p">
@@ -122,16 +125,6 @@
<i id="delete_oai_preset" class="menu_button fa-solid fa-trash-can" title="Delete the preset"></i> <i id="delete_oai_preset" class="menu_button fa-solid fa-trash-can" title="Delete the preset"></i>
</div> </div>
</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> </div>
<div id="textgenerationwebui_api-presets"> <div id="textgenerationwebui_api-presets">
<h3>Text Gen WebUI (ooba) presets</h3> <h3>Text Gen WebUI (ooba) presets</h3>
@@ -142,19 +135,25 @@
<h3>Poe.com API Settings</h3> <h3>Poe.com API Settings</h3>
<!-- just a placeholder title for the Poe.com settings panel--> <!-- just a placeholder title for the Poe.com settings panel-->
</div> </div>
<hr>
</div> </div>
<div id="common-gen-settings-block" class="width100p"> <div id="common-gen-settings-block" class="width100p">
<div id="pro-settings-block"> <div id="pro-settings-block">
<div id="amount_gen_block" class="range-block"> <div id="amount_gen_block" class="range-block">
<div class="range-block-title"> <div class="range-block-title">
Response Length (tokens) Response Length (tokens)
</div> </div>
<div class="range-block-range"> <div class="range-block-range-and-counter">
<input type="range" id="amount_gen" name="volume" min="16" max="512" step="1"> <div class="range-block-range-and-counter">
</div> <div class="range-block-range">
<div class="range-block-counter"> <input type="range" id="amount_gen" name="volume" min="16" max="512" step="1">
<div contenteditable="true" data-for="amount_gen" id="amount_gen_counter"> </div>
select <div class="range-block-counter">
<div contenteditable="true" data-for="amount_gen" id="amount_gen_counter">
select
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -162,29 +161,37 @@
<div class="range-block-title"> <div class="range-block-title">
Context Size (tokens) Context Size (tokens)
</div> </div>
<div class="range-block-range"> <div class="range-block-range-and-counter">
<input type="range" id="max_context" name="volume" min="512" max="2048" step="1"> <div class="range-block-range">
</div> <input type="range" id="max_context" name="volume" min="512" max="2048" step="1">
<div class="range-block-counter"> </div>
<div contenteditable="true" data-for="max_context" id="max_context_counter"> <div class="range-block-counter">
select <div contenteditable="true" data-for="max_context" id="max_context_counter">
select
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<hr>
</div> </div>
<div id="respective-ranges-and-temps" class="width100p"> <div id="respective-ranges-and-temps" class="width100p">
<div id="range_block"> <div id="range_block">
<div class="range-block"> <div class="range-block">
<div class="range-block-title"> <div class="range-block-title">
Temperature Temperature
</div> </div>
<div class="range-block-range"> <div class="range-block-range-and-counter">
<input type="range" id="temp" name="volume" min="0.1" max="2.0" step="0.01"> <div class="range-block-range">
</div> <input type="range" id="temp" name="volume" min="0.1" max="2.0" step="0.01">
<div class="range-block-counter"> </div>
<div contenteditable="true" data-for="temp" id="temp_counter"> <div class="range-block-counter">
select <div contenteditable="true" data-for="temp" id="temp_counter">
select
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -192,12 +199,14 @@
<div class="range-block-title"> <div class="range-block-title">
Rep. Pen. Rep. Pen.
</div> </div>
<div class="range-block-range"> <div class="range-block-range-and-counter">
<input type="range" id="rep_pen" name="volume" min="1" max="1.5" step="0.01"> <div class="range-block-range">
</div> <input type="range" id="rep_pen" name="volume" min="1" max="1.5" step="0.01">
<div class="range-block-counter"> </div>
<div contenteditable="true" data-for="rep_pen" id="rep_pen_counter"> <div class="range-block-counter">
select <div contenteditable="true" data-for="rep_pen" id="rep_pen_counter">
select
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -205,28 +214,28 @@
<div class="range-block-title"> <div class="range-block-title">
Rep. Pen. Range Rep. Pen. Range
</div> </div>
<div class="range-block-range"> <div class="range-block-range-and-counter">
<input type="range" id="rep_pen_range" name="volume" min="0" max="2048" step="1"> <div class="range-block-range">
</div> <input type="range" id="rep_pen_range" name="volume" min="0" max="2048" step="1">
<div class="range-block-counter"> </div>
<div contenteditable="true" data-for="rep_pen_range" id="rep_pen_range_counter"> <div class="range-block-counter">
select <div contenteditable="true" data-for="rep_pen_range" id="rep_pen_range_counter">
select
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="range_block_novel"> <div id="range_block_novel">
</div> <div class="range-block-title">
<div id="range_block_textgenerationwebui"> Temperature
<div class="range-block"> </div>
<div class="range-block-title"> <div class="range-block-range-and-counter">
Temperature
</div>
<div class="range-block-range"> <div class="range-block-range">
<input type="range" id="temp_textgenerationwebui" name="volume" min="0.1" max="2.0" step="0.01"> <input type="range" id="temp_novel" name="volume" min="0.1" max="2.0" step="0.01">
</div> </div>
<div class="range-block-counter"> <div class="range-block-counter">
<div contenteditable="true" data-for="temp_textgenerationwebui" id="temp_counter_textgenerationwebui"> <div contenteditable="true" data-for="temp_novel" id="temp_counter_novel">
select select
</div> </div>
</div> </div>
@@ -235,12 +244,46 @@
<div class="range-block-title"> <div class="range-block-title">
Rep. Pen. Rep. Pen.
</div> </div>
<div class="range-block-range"> <div class="range-block-range-and-counter">
<input type="range" id="rep_pen_textgenerationwebui" name="volume" min="1" max="1.5" step="0.01"> <div class="range-block-range">
<input type="range" id="rep_pen_novel" name="volume" min="1" max="1.5" step="0.01">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="rep_pen_novel" id="rep_pen_counter_novel">
select
</div>
</div>
</div> </div>
<div class="range-block-counter"> </div>
<div contenteditable="true" data-for="rep_pen_textgenerationwebui" id="rep_pen_counter_textgenerationwebui"> </div>
select <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>
</div> </div>
@@ -248,12 +291,14 @@
<div class="range-block-title"> <div class="range-block-title">
Encoder Rep. Pen. Encoder Rep. Pen.
</div> </div>
<div class="range-block-range"> <div class="range-block-range-and-counter">
<input type="range" id="encoder_rep_pen_textgenerationwebui" name="volume" min="0.8" max="1.5" step="0.01" /> <div class="range-block-range">
</div> <input type="range" id="encoder_rep_pen_textgenerationwebui" name="volume" min="0.8" max="1.5" step="0.01" />
<div class="range-block-counter"> </div>
<div contenteditable="true" data-for="encoder_rep_pen_textgenerationwebui" id="encoder_rep_pen_counter_textgenerationwebui"> <div class="range-block-counter">
select <div contenteditable="true" data-for="encoder_rep_pen_textgenerationwebui" id="encoder_rep_pen_counter_textgenerationwebui">
select
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -261,12 +306,14 @@
<div class="range-block-title"> <div class="range-block-title">
No Repeat Ngram Size No Repeat Ngram Size
</div> </div>
<div class="range-block-range"> <div class="range-block-range-and-counter">
<input type="range" id="no_repeat_ngram_size_textgenerationwebui" name="volume" min="0" max="20" step="1"> <div class="range-block-range">
</div> <input type="range" id="no_repeat_ngram_size_textgenerationwebui" name="volume" min="0" max="20" step="1">
<div class="range-block-counter"> </div>
<div contenteditable="true" data-for="no_repeat_ngram_size_textgenerationwebui" id="no_repeat_ngram_size_counter_textgenerationwebui"> <div class="range-block-counter">
select <div contenteditable="true" data-for="no_repeat_ngram_size_textgenerationwebui" id="no_repeat_ngram_size_counter_textgenerationwebui">
select
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -274,22 +321,24 @@
<div class="range-block-title"> <div class="range-block-title">
Min Length Min Length
</div> </div>
<div class="range-block-range"> <div class="range-block-range-and-counter">
<input type="range" id="min_length_textgenerationwebui" name="volume" min="0" max="2000" step="1" /> <div class="range-block-range">
</div> <input type="range" id="min_length_textgenerationwebui" name="volume" min="0" max="2000" step="1" />
<div class="range-block-counter"> </div>
<div contenteditable="true" data-for="min_length_textgenerationwebui" id="min_length_counter_textgenerationwebui"> <div class="range-block-counter">
select <div contenteditable="true" data-for="min_length_textgenerationwebui" id="min_length_counter_textgenerationwebui">
select
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="range_block_openai"> <div id="range_block_openai">
<div class="range-block"> <div class="range-block">
<div class="range-block-title"> <div class="range-block-title justifyLeft">
OpenAI Reverse Proxy OpenAI Reverse Proxy
</div> </div>
<div class="range-block-counter"> <div class="toggle-description justifyLeft">
Alternative server URL (leave empty to use the default value).<br> Alternative server URL (leave empty to use the default value).<br>
<div id="ReverseProxyWarningMessage" class="reverse_proxy_warning"> <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> <b>Remove your real OAI API Key from the API panel BEFORE typing anything into this box.</b>
@@ -305,12 +354,14 @@
<div class="range-block-title"> <div class="range-block-title">
Context Size (tokens) Context Size (tokens)
</div> </div>
<div class="range-block-range"> <div class="range-block-range-and-counter">
<input type="range" id="openai_max_context" name="volume" min="512" max="4095" step="1"> <div class="range-block-range">
</div> <input type="range" id="openai_max_context" name="volume" min="512" max="4095" step="1">
<div class="range-block-counter"> </div>
<div contenteditable="true" data-for="openai_max_context" id="openai_max_context_counter"> <div class="range-block-counter">
select <div contenteditable="true" data-for="openai_max_context" id="openai_max_context_counter">
select
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -327,24 +378,27 @@
Temperature Temperature
</div> </div>
<div class="range-block-range"> <div class="range-block-range-and-counter">
<input type="range" id="temp_openai" name="volume" min="0" max="2.0" step="0.01"> <div class="range-block-range">
</div> <input type="range" id="temp_openai" name="volume" min="0" max="2.0" step="0.01">
<div class="range-block-counter"> </div>
<div contenteditable="true" data-for="temp_openai" id="temp_counter_openai">select</div> <div class="range-block-counter">
<div contenteditable="true" data-for="temp_openai" id="temp_counter_openai">select</div>
</div>
</div> </div>
</div> </div>
<div class="range-block"> <div class="range-block">
<div class="range-block-title"> <div class="range-block-title">
Frequency Penalty Frequency Penalty
</div> </div>
<div class="range-block-range-and-counter">
<div class="range-block-range"> <div class="range-block-range">
<input type="range" id="freq_pen_openai" name="volume" min="-2" max="2" step="0.01"> <input type="range" id="freq_pen_openai" name="volume" min="-2" max="2" step="0.01">
</div> </div>
<div class="range-block-counter"> <div class="range-block-counter">
<div contenteditable="true" data-for="freq_pen_openai" id="freq_pen_counter_openai"> <div contenteditable="true" data-for="freq_pen_openai" id="freq_pen_counter_openai">
select select
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -352,12 +406,14 @@
<div class="range-block-title"> <div class="range-block-title">
Presence Penalty Presence Penalty
</div> </div>
<div class="range-block-range"> <div class="range-block-range-and-counter">
<input type="range" id="pres_pen_openai" name="volume" min="-2" max="2" step="0.01"> <div class="range-block-range">
</div> <input type="range" id="pres_pen_openai" name="volume" min="-2" max="2" step="0.01">
<div class="range-block-counter"> </div>
<div contenteditable="true" data-for="pres_pen_openai" id="pres_pen_counter_openai"> <div class="range-block-counter">
select <div contenteditable="true" data-for="pres_pen_openai" id="pres_pen_counter_openai">
select
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -368,7 +424,7 @@
<input id="poe_streaming" type="checkbox" /> <input id="poe_streaming" type="checkbox" />
Streaming Streaming
</label> </label>
<div class="range-block-counter justifyLeft"> <div class="toggle-description justifyLeft">
Display bot response text chunks as they are generated. Display bot response text chunks as they are generated.
</div> </div>
</div> </div>
@@ -377,7 +433,7 @@
<input id="poe_auto_purge" type="checkbox"> <input id="poe_auto_purge" type="checkbox">
Auto-purge API context (save JB) Auto-purge API context (save JB)
</label> </label>
<div class="range-block-counter justifyLeft"> <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. 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> </div>
@@ -386,7 +442,7 @@
<input id="poe_auto_jailbreak" type="checkbox"> <input id="poe_auto_jailbreak" type="checkbox">
Auto-jailbreak Auto-jailbreak
</label> </label>
<div class="range-block-counter justifyLeft"> <div class="toggle-description justifyLeft">
Send the jailbreak message before first generation after page refresh. Send the jailbreak message before first generation after page refresh.
</div> </div>
</div> </div>
@@ -395,14 +451,18 @@
<input id="poe_character_nudge" type="checkbox" /> <input id="poe_character_nudge" type="checkbox" />
Send character note Send character note
</label> </label>
<div class="range-block-counter justifyLeft"> <div class="toggle-description justifyLeft">
Sent with every prompt to modify bot responses. Sent with every prompt to modify bot responses.
</div> </div>
<div class="range-block-range"> <!-- <div class="range-block-range-and-counter">
</div> <div class="range-block-range">
</div>
</div> -->
</div> </div>
</div> </div>
<hr>
</div> </div>
<div id="advanced-ai-config-block" class="width100p"> <div id="advanced-ai-config-block" class="width100p">
<div id="kobold_api-settings"> <div id="kobold_api-settings">
<div id="kobold-advanced-config"> <div id="kobold-advanced-config">
@@ -410,12 +470,14 @@
<div class="range-block-title"> <div class="range-block-title">
Top P Top P
</div> </div>
<div class="range-block-range"> <div class="range-block-range-and-counter">
<input type="range" id="top_p" name="volume" min="0" max="1" step="0.01"> <div class="range-block-range">
</div> <input type="range" id="top_p" name="volume" min="0" max="1" step="0.01">
<div class="range-block-counter"> </div>
<div contenteditable="true" data-for="top_p" id="top_p_counter"> <div class="range-block-counter">
select <div contenteditable="true" data-for="top_p" id="top_p_counter">
select
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -423,12 +485,14 @@
<div class="range-block-title"> <div class="range-block-title">
Top A Top A
</div> </div>
<div class="range-block-range"> <div class="range-block-range-and-counter">
<input type="range" id="top_a" name="volume" min="0" max="1" step="0.01"> <div class="range-block-range">
</div> <input type="range" id="top_a" name="volume" min="0" max="1" step="0.01">
<div class="range-block-counter"> </div>
<div contenteditable="true" data-for="top_a" id="top_a_counter"> <div class="range-block-counter">
select <div contenteditable="true" data-for="top_a" id="top_a_counter">
select
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -436,12 +500,14 @@
<div class="range-block-title"> <div class="range-block-title">
Top K Top K
</div> </div>
<div class="range-block-range"> <div class="range-block-range-and-counter">
<input type="range" id="top_k" name="volume" min="0" max="100" step="1"> <div class="range-block-range">
</div> <input type="range" id="top_k" name="volume" min="0" max="100" step="1">
<div class="range-block-counter"> </div>
<div contenteditable="true" data-for="top_k" id="top_k_counter"> <div class="range-block-counter">
select <div contenteditable="true" data-for="top_k" id="top_k_counter">
select
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -449,12 +515,14 @@
<div class="range-block-title"> <div class="range-block-title">
Typical Sampling Typical Sampling
</div> </div>
<div class="range-block-range"> <div class="range-block-range-and-counter">
<input type="range" id="typical" name="volume" min="0" max="1" step="0.01"> <div class="range-block-range">
</div> <input type="range" id="typical" name="volume" min="0" max="1" step="0.01">
<div class="range-block-counter"> </div>
<div contenteditable="true" data-for="typical" id="typical_counter"> <div class="range-block-counter">
select <div contenteditable="true" data-for="typical" id="typical_counter">
select
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -462,12 +530,14 @@
<div class="range-block-title"> <div class="range-block-title">
Tail Free Sampling Tail Free Sampling
</div> </div>
<div class="range-block-range"> <div class="range-block-range-and-counter">
<input type="range" id="tfs" name="volume" min="0" max="1" step="0.01"> <div class="range-block-range">
</div> <input type="range" id="tfs" name="volume" min="0" max="1" step="0.01">
<div class="range-block-counter"> </div>
<div contenteditable="true" data-for="tfs" id="tfs_counter"> <div class="range-block-counter">
select <div contenteditable="true" data-for="tfs" id="tfs_counter">
select
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -475,12 +545,14 @@
<div class="range-block-title"> <div class="range-block-title">
Rep. Pen. Slope Rep. Pen. Slope
</div> </div>
<div class="range-block-range"> <div class="range-block-range-and-counter">
<input type="range" id="rep_pen_slope" name="volume" min="0" max="10" step="0.1"> <div class="range-block-range">
</div> <input type="range" id="rep_pen_slope" name="volume" min="0" max="10" step="0.1">
<div class="range-block-counter"> </div>
<div contenteditable="true" data-for="rep_pen_slope" id="rep_pen_slope_counter"> <div class="range-block-counter">
select <div contenteditable="true" data-for="rep_pen_slope" id="rep_pen_slope_counter">
select
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -493,66 +565,20 @@
</div> </div>
</div> </div>
<div id="novel_api-settings"> <div id="novel_api-settings">
<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>
<div class="range-block">
<div class="range-block-title">
Temperature
</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-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">
<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 class="range-block">
<div class="range-block-title">
Rep. Pen. Range (tokens)
</div>
<div class="range-block-range">
<input type="range" id="rep_pen_size_novel" name="volume" min="0" max="2048" step="1">
</div>
<div class="range-block-counter">
<div contenteditable="true" data-for="rep_pen_size_novel" id="rep_pen_size_counter_novel">
select
</div>
</div>
</div>
</div> </div>
<div id="textgenerationwebui_api-settings"> <div id="textgenerationwebui_api-settings">
<div class="range-block"> <div class="range-block">
<div class="range-block-title"> <div class="range-block-title">
Top K Top K
</div> </div>
<div class="range-block-range"> <div class="range-block-range-and-counter">
<input type="range" id="top_k_textgenerationwebui" name="volume" min="0" max="200" step="1"> <div class="range-block-range">
</div> <input type="range" id="top_k_textgenerationwebui" name="volume" min="0" max="200" step="1">
<div class="range-block-counter"> </div>
<div contenteditable="true" data-for="top_k_textgenerationwebui" id="top_k_counter_textgenerationwebui"> <div class="range-block-counter">
select <div contenteditable="true" data-for="top_k_textgenerationwebui" id="top_k_counter_textgenerationwebui">
select
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -560,12 +586,14 @@
<div class="range-block-title"> <div class="range-block-title">
Top P Top P
</div> </div>
<div class="range-block-range"> <div class="range-block-range-and-counter">
<input type="range" id="top_p_textgenerationwebui" name="volume" min="0" max="1" step="0.01"> <div class="range-block-range">
</div> <input type="range" id="top_p_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
<div class="range-block-counter"> </div>
<div contenteditable="true" data-for="top_p_textgenerationwebui" id="top_p_counter_textgenerationwebui"> <div class="range-block-counter">
select <div contenteditable="true" data-for="top_p_textgenerationwebui" id="top_p_counter_textgenerationwebui">
select
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -573,12 +601,14 @@
<div class="range-block-title"> <div class="range-block-title">
Typical P Typical P
</div> </div>
<div class="range-block-range"> <div class="range-block-range-and-counter">
<input type="range" id="typical_p_textgenerationwebui" name="volume" min="0" max="1" step="0.01"> <div class="range-block-range">
</div> <input type="range" id="typical_p_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
<div class="range-block-counter"> </div>
<div contenteditable="true" data-for="typical_p_textgenerationwebui" id="typical_p_counter_textgenerationwebui"> <div class="range-block-counter">
select <div contenteditable="true" data-for="typical_p_textgenerationwebui" id="typical_p_counter_textgenerationwebui">
select
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -599,7 +629,7 @@
<input type="checkbox" id="add_bos_token_textgenerationwebui" /> <input type="checkbox" id="add_bos_token_textgenerationwebui" />
Add BOS Token Add BOS Token
</label> </label>
<div class="range-block-counter justifyLeft"> <div class="toggle-description justifyLeft">
Add the bos_token to the beginning of prompts. Disabling this can make the replies more creative. Add the bos_token to the beginning of prompts. Disabling this can make the replies more creative.
</div> </div>
</div> </div>
@@ -608,7 +638,7 @@
<input type="checkbox" id="ban_eos_token_textgenerationwebui" /> <input type="checkbox" id="ban_eos_token_textgenerationwebui" />
Ban EOS Token Ban EOS Token
</label> </label>
<div class="range-block-counter justifyLeft"> <div class="toggle-description justifyLeft">
Ban the eos_token. This forces the model to never end the generation prematurely. Ban the eos_token. This forces the model to never end the generation prematurely.
</div> </div>
</div> </div>
@@ -624,12 +654,14 @@
<div class="range-block-title"> <div class="range-block-title">
Number of Beams Number of Beams
</div> </div>
<div class="range-block-range"> <div class="range-block-range-and-counter">
<input type="range" id="num_beams_textgenerationwebui" name="volume" min="1" max="20" step="1" /> <div class="range-block-range">
</div> <input type="range" id="num_beams_textgenerationwebui" name="volume" min="1" max="20" step="1" />
<div class="range-block-counter"> </div>
<div contenteditable="true" data-for="num_beams_textgenerationwebui" id="num_beams_counter_textgenerationwebui"> <div class="range-block-counter">
select <div contenteditable="true" data-for="num_beams_textgenerationwebui" id="num_beams_counter_textgenerationwebui">
select
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -637,12 +669,14 @@
<div class="range-block-title"> <div class="range-block-title">
Length Penalty Length Penalty
</div> </div>
<div class="range-block-range"> <div class="range-block-range-and-counter">
<input type="range" id="length_penalty_textgenerationwebui" name="volume" min="-5" max="5" step="0.1" /> <div class="range-block-range">
</div> <input type="range" id="length_penalty_textgenerationwebui" name="volume" min="-5" max="5" step="0.1" />
<div class="range-block-counter"> </div>
<div contenteditable="true" data-for="length_penalty_textgenerationwebui" id="length_penalty_counter_textgenerationwebui"> <div class="range-block-counter">
select <div contenteditable="true" data-for="length_penalty_textgenerationwebui" id="length_penalty_counter_textgenerationwebui">
select
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -658,12 +692,14 @@
<div class="range-block-title"> <div class="range-block-title">
Penalty Alpha Penalty Alpha
</div> </div>
<div class="range-block-range"> <div class="range-block-range-and-counter">
<input type="range" id="penalty_alpha_textgenerationwebui" name="volume" min="0" max="5" step="0.05" /> <div class="range-block-range">
</div> <input type="range" id="penalty_alpha_textgenerationwebui" name="volume" min="0" max="5" step="0.05" />
<div class="range-block-counter"> </div>
<div contenteditable="true" data-for="penalty_alpha_textgenerationwebui" id="penalty_alpha_counter_textgenerationwebui"> <div class="range-block-counter">
select <div contenteditable="true" data-for="penalty_alpha_textgenerationwebui" id="penalty_alpha_counter_textgenerationwebui">
select
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -687,28 +723,28 @@
<input id="nsfw_first" type="checkbox" /> <input id="nsfw_first" type="checkbox" />
NSFW first NSFW first
</label> </label>
<div class="range-block-counter justifyLeft">NSFW block goes first in the resulting prompt</div> <div class="toggle-description justifyLeft">NSFW block goes first in the resulting prompt</div>
</div> </div>
<div class="range-block"> <div class="range-block">
<label title="Inserts jailbreak as a last system message" class="checkbox_label widthFreeExpand"> <label title="Inserts jailbreak as a last system message" class="checkbox_label widthFreeExpand">
<input id="jailbreak_system" type="checkbox" /> <input id="jailbreak_system" type="checkbox" />
Send Jailbreak Send Jailbreak
</label> </label>
<div class="range-block-counter justifyLeft">Inserts jailbreak as a last system message</div> <div class="toggle-description justifyLeft">Inserts jailbreak as a last system message</div>
</div> </div>
<div class="range-block"> <div class="range-block">
<label for="stream_toggle" title="Enables OpenAI completion streaming" class="checkbox_label widthFreeExpand"> <label for="stream_toggle" title="Enables OpenAI completion streaming" class="checkbox_label widthFreeExpand">
<input id="stream_toggle" type="checkbox" /> <input id="stream_toggle" type="checkbox" />
Streaming Streaming
</label> </label>
<div class="range-block-counter justifyLeft">Enables OpenAI completion streaming</div> <div class="toggle-description justifyLeft">Enables OpenAI completion streaming</div>
</div> </div>
<div class="range-block"> <div class="range-block">
<label title="Use OAI knowledge base to enhance definitions for public figures and known fictional characters" class="checkbox_label widthFreeExpand"> <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" /> <input id="enhance_definitions" type="checkbox" />
Enhance Definitions Enhance Definitions
</label> </label>
<div class="range-block-counter justifyLeft"> <div class="toggle-description justifyLeft">
Use OAI knowledge base to enhance definitions for public figures and known fictional characters Use OAI knowledge base to enhance definitions for public figures and known fictional characters
</div> </div>
</div> </div>
@@ -717,7 +753,7 @@
<input id="wrap_in_quotes" type="checkbox" /> <input id="wrap_in_quotes" type="checkbox" />
Wrap in Quotes Wrap in Quotes
</label> </label>
<div class="range-block-counter justifyLeft"> <div class="toggle-description justifyLeft">
Wrap entire user message in quotes before sending. Wrap entire user message in quotes before sending.
Leave off if you use quotes manually for speech. Leave off if you use quotes manually for speech.
</div> </div>
@@ -731,7 +767,7 @@
<div class="fa-solid fa-clock-rotate-left "></div> <div class="fa-solid fa-clock-rotate-left "></div>
</div> </div>
</div> </div>
<div class="range-block-counter"> <div class="toggle-description justifyLeft">
The main prompt used to set the model behavior The main prompt used to set the model behavior
</div> </div>
<div class="wide100p"> <div class="wide100p">
@@ -745,7 +781,7 @@
<div class="fa-solid fa-clock-rotate-left "></div> <div class="fa-solid fa-clock-rotate-left "></div>
</div> </div>
</div> </div>
<div class="range-block-counter"> <div class="toggle-description justifyLeft">
Prompt that is used when the NSFW toggle is on Prompt that is used when the NSFW toggle is on
</div> </div>
<div class="wide100p"> <div class="wide100p">
@@ -759,7 +795,7 @@
<div class="fa-solid fa-clock-rotate-left"></div> <div class="fa-solid fa-clock-rotate-left"></div>
</div> </div>
</div> </div>
<div class="range-block-counter"> <div class="toggle-description justifyLeft">
Prompt that is used when the Jailbreak toggle is on Prompt that is used when the Jailbreak toggle is on
</div> </div>
<div class="wide100p"> <div class="wide100p">
@@ -773,7 +809,7 @@
<div class="fa-solid fa-clock-rotate-left"></div> <div class="fa-solid fa-clock-rotate-left"></div>
</div> </div>
</div> </div>
<div class="range-block-counter"> <div class="toggle-description justifyLeft">
Prompt that is used for Impersonation function Prompt that is used for Impersonation function
</div> </div>
<div class="wide100p"> <div class="wide100p">
@@ -784,7 +820,7 @@
<div class="range-block-title openai_restorable"> <div class="range-block-title openai_restorable">
Logit Bias Logit Bias
</div> </div>
<div class="range-block-counter"> <div class="toggle-description justifyLeft">
Helps to ban or reenforce the usage of certain words Helps to ban or reenforce the usage of certain words
</div> </div>
<div class="openai_logit_bias_preset_form"> <div class="openai_logit_bias_preset_form">
@@ -819,7 +855,7 @@
<div class="fa-solid fa-clock-rotate-left"></div> <div class="fa-solid fa-clock-rotate-left"></div>
</div> </div>
</div> </div>
<div class="range-block-counter justifyLeft"> <div class="toggle-description justifyLeft">
Message to send when auto-jailbreak is on. Message to send when auto-jailbreak is on.
</div> </div>
<div class="wide100p"> <div class="wide100p">
@@ -833,7 +869,7 @@
<div class="fa-solid fa-clock-rotate-left"></div> <div class="fa-solid fa-clock-rotate-left"></div>
</div> </div>
</div> </div>
<div class="range-block-counter justifyLeft"> <div class="toggle-description justifyLeft">
Bot must send this back to confirm jailbreak Bot must send this back to confirm jailbreak
</div> </div>
<div class="wide100p"> <div class="wide100p">
@@ -847,11 +883,11 @@
<div class="fa-solid fa-clock-rotate-left"></div> <div class="fa-solid fa-clock-rotate-left"></div>
</div> </div>
</div> </div>
<div class="range-block-counter justifyLeft"> <div class="toggle-description justifyLeft">
Influences bot behavior in its responses. Influences bot behavior in its responses.
</div> </div>
<div class="wide100p"> <div class="wide100p">
<textarea id="poe_nudge_text" class="text_pole textarea_compact" rows="3" maxlength="250"></textarea> <textarea id="poe_nudge_text" class="text_pole textarea_compact" rows="6" maxlength="250"></textarea>
</div> </div>
</div> </div>
<div class="range-block"> <div class="range-block">
@@ -861,11 +897,11 @@
<div class="fa-solid fa-clock-rotate-left"></div> <div class="fa-solid fa-clock-rotate-left"></div>
</div> </div>
</div> </div>
<div class="range-block-counter justifyLeft"> <div class="toggle-description justifyLeft">
Prompt that is used for Impersonation function Prompt that is used for Impersonation function
</div> </div>
<div class="wide100p"> <div class="wide100p">
<textarea id="poe_impersonation_prompt" class="text_pole textarea_compact" rows="3" maxlength="250"></textarea> <textarea id="poe_impersonation_prompt" class="text_pole textarea_compact" rows="6" maxlength="250"></textarea>
</div> </div>
</div> </div>
</div> </div>
@@ -875,6 +911,7 @@
</div> </div>
</div> </div>
<div id="sys-settings-button" class="drawer"> <div id="sys-settings-button" class="drawer">
<div class="drawer-toggle drawer-header"> <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 id="API-status-top" class="drawer-icon fa-solid fa-plug-circle-exclamation closedIcon" title="API Connections"></div>
@@ -903,7 +940,7 @@
<div id="kobold_api_block"> <div id="kobold_api_block">
<h4>API url</h4> <h4>API url</h4>
<h5>Example: http://127.0.0.1:5000/api </h5> <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_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"> <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 id="api_loading" class="api-load-icon fa-solid fa-hourglass fa-spin"></div>
</div> </div>
@@ -956,6 +993,15 @@
<input id="api_key_novel" name="api_key_novel" class="text_pole" maxlength="500" size="35" value="" autocomplete="off"> <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"> <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> <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> </form>
<div id="online_status3"> <div id="online_status3">
<div id="online_status_indicator3"></div> <div id="online_status_indicator3"></div>
@@ -1005,6 +1051,16 @@
<div class="online_status_indicator4"></div> <div class="online_status_indicator4"></div>
<div class="online_status_text4">No connection...</div> <div class="online_status_text4">No connection...</div>
</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> <div>
<a id="openai_api_usage" href="javascript:void(0);">View API Usage Metrics</a> <a id="openai_api_usage" href="javascript:void(0);">View API Usage Metrics</a>
</div> </div>
@@ -1241,12 +1297,14 @@
<div class="range-block-title"> <div class="range-block-title">
Font Scale Font Scale
</div> </div>
<div class="range-block-range"> <div class="range-block-range-and-counter">
<input type="range" id="font_scale" name="font_scale" min="0.8" max="1.2" step="0.05"> <div class="range-block-range">
</div> <input type="range" id="font_scale" name="font_scale" min="0.8" max="1.2" step="0.05">
<div class="range-block-counter"> </div>
<div contenteditable="true" data-for="font_scale" id="font_scale_counter"> <div class="range-block-counter">
select <div contenteditable="true" data-for="font_scale" id="font_scale_counter">
select
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -1254,12 +1312,14 @@
<div class="range-block-title"> <div class="range-block-title">
Blur Strength Blur Strength
</div> </div>
<div class="range-block-range"> <div class="range-block-range-and-counter">
<input type="range" id="blur_strength" name="blur_strength" min="0" max="30" step="1"> <div class="range-block-range">
</div> <input type="range" id="blur_strength" name="blur_strength" min="0" max="30" step="1">
<div class="range-block-counter"> </div>
<div contenteditable="true" data-for="blur_strength" id="blur_strength_counter"> <div class="range-block-counter">
select <div contenteditable="true" data-for="blur_strength" id="blur_strength_counter">
select
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -1267,12 +1327,14 @@
<div class="range-block-title"> <div class="range-block-title">
Text Shadow Width Text Shadow Width
</div> </div>
<div class="range-block-range"> <div class="range-block-range-and-counter">
<input type="range" id="shadow_width" name="shadow_width" min="0" max="5" step="1"> <div class="range-block-range">
</div> <input type="range" id="shadow_width" name="shadow_width" min="0" max="5" step="1">
<div class="range-block-counter"> </div>
<div contenteditable="true" data-for="shadow_width" id="shadow_width_counter"> <div class="range-block-counter">
select <div contenteditable="true" data-for="shadow_width" id="shadow_width_counter">
select
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -1436,7 +1498,7 @@
<div name="NameChanger"> <div name="NameChanger">
<h4>Name</h4> <h4>Name</h4>
<div class="change_name"> <div class="change_name">
<input id="your_name" name="your_name" class="text_pole" maxlength="50" value="" autocomplete="off"> <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 id="your_name_button" class="menu_button fa-solid fa-check" title="Click to set a new User Name">
</div> </div>
</div> </div>
@@ -1930,7 +1992,7 @@
<div class="world_entry_form_control world_entry_form_horizontal"> <div class="world_entry_form_control world_entry_form_horizontal">
<div class="flex-container flexFlowColumn flexNoGap wi-enter-footer-text "> <div class="flex-container flexFlowColumn flexNoGap wi-enter-footer-text flex1 ">
<label class="checkbox"> <label class="checkbox">
<input type="checkbox" name="constant" /> <input type="checkbox" name="constant" />
<span>Constant</span> <span>Constant</span>
@@ -1940,7 +2002,7 @@
<span>Selective</span> <span>Selective</span>
</label> </label>
</div> </div>
<div class="world_entry_form_control world_entry_form_radios wi-enter-footer-text"> <div class="world_entry_form_control world_entry_form_radios wi-enter-footer-text flex1">
<div> <div>
<label><input type="radio" name="position" value="0"> <label><input type="radio" name="position" value="0">
<span>Before Char</span> <span>Before Char</span>
@@ -1952,18 +2014,18 @@
</label> </label>
</div> </div>
</div> </div>
<div class="world_entry_form_control wi-enter-footer-text flex-container flexNoGap "> <!-- world_entry_form_control --> <div class="world_entry_form_control wi-enter-footer-text flex1 flex-container flexNoGap "> <!-- world_entry_form_control -->
<!-- <label for="order"> --> <!-- <label for="order"> -->
Insertion Order Insertion Order
<!-- Bigger number = inserted earlier --> <!-- Bigger number = inserted earlier -->
<!-- </label> --> <!-- </label> -->
<input class="text_pole wide50px" type="number" name="order" placeholder="" /> <input class="text_pole" type="number" name="order" placeholder="" />
</div> </div>
<div class="flex-container flexFlowColumn flexNoGap wi-enter-footer-text"> <div class="flex-container flexFlowColumn flexNoGap wi-enter-footer-text flex1">
<div class="world_entry_form_uid"> <div class="world_entry_form_uid">
UID: UID:
&nbsp; &nbsp;

2
public/scripts/world-info.js
View File

@@ -309,7 +309,7 @@ function appendWorldEntry(entry) {
async function resetScrollHeight(element) { async function resetScrollHeight(element) {
await delay(1); await delay(1);
const height = Number($(element).prop("scrollHeight")) + 1; const height = Number($(element).prop("scrollHeight")) + 3;
$(element).css("height", ""); $(element).css("height", "");
$(element).css("height", `${height}px`); $(element).css("height", `${height}px`);
} }

57
public/style.css
View File

@@ -546,6 +546,12 @@ code {
flex-direction: column; flex-direction: column;
} }
.range-block-range-and-counter {
flex: 1;
flex-wrap: nowrap;
display: flex;
}
.change_name { .change_name {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -623,7 +629,8 @@ body.big-avatars .avatar img {
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
max-width: 100%; max-width: 100%;
word-wrap: break-word; /* word-wrap: break-word; */
overflow-wrap: anywhere;
/* animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; */ /* animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; */
} }
@@ -685,9 +692,15 @@ select {
flex: 1; flex: 1;
} }
#send_textarea::placeholder,
.text_pole::placeholder { .text_pole::placeholder {
color: var(--SmartThemeBodyColor); color: rgb(92, 90, 90);
}
#send_textarea::placeholder {
color: var(--SmartThemeEmColor);
text-align: center;
white-space: nowrap;
} }
#rm_ch_create_block textarea { #rm_ch_create_block textarea {
@@ -1940,21 +1953,39 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button
} }
.range-block-counter { .range-block-counter {
width: max-content; /* width: max-content; */
margin-left: 5px; margin-left: 5px;
margin-right: 15px; margin-right: 15px;
font-size: calc(var(--mainFontSize) * 0.95); font-size: calc(var(--mainFontSize) * 0.95);
color: var(--SmartThemeBodyColor); color: var(--SmartThemeBodyColor);
flex: 1;
display: flex;
}
.toggle-description {
width: max-content;
margin-left: 5px;
margin-right: 15px;
font-size: calc(var(--mainFontSize) * 0.8);
color: var(--SmartThemeEmColor);
text-align: center;
} }
.range-block-counter div[contenteditable="true"] { .range-block-counter div[contenteditable="true"] {
display: block; display: block;
cursor: text; cursor: text;
background-color: var(--black30a);
border: 1px solid var(--white30a);
border-radius: 5px;
padding: 2px;
flex: 1;
text-align: center;
} }
.range-block-range { .range-block-range {
margin: 0; margin: 0;
width: 80%; /* width: 80%; */
flex: 5;
/* margin-bottom: 10px; */ /* margin-bottom: 10px; */
} }
@@ -3440,6 +3471,10 @@ toolcool-color-picker {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.flex1 {
flex: 1;
}
.alignitemscenter { .alignitemscenter {
align-items: center; align-items: center;
} }
@@ -3529,6 +3564,18 @@ toolcool-color-picker {
flex: 1; flex: 1;
} }
.editable-slider-notification {
position: absolute;
right: 0px;
left: 0px;
margin: 0 auto;
width: 70%;
top: 5px;
padding: 0;
display: block;
text-align: center;
}
.openai_logit_bias_form { .openai_logit_bias_form {
display: flex; display: flex;
flex-direction: row; flex-direction: row;