rixty/KoboldAI-Client
1
1
Fork 0
mirror of https://github.com/KoboldAI/KoboldAI-Client.git synced 2025-06-05 21:59:24 +02:00
Code Issues Projects Releases Wiki Activity

Tooltip Fix

Browse Source
This commit is contained in:
ebolam
2022-10-11 15:34:33 -04:00
parent 04d345a82c
commit a326699faa
4 changed files with 28 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
static/koboldai.css
View File

@@ -1894,6 +1894,9 @@ body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
position: fixed; position: fixed;
transition: opacity 0s linear 0.5s; transition: opacity 0s linear 0.5s;
border: 3px ridge grey;
width: 200px;
white-space: normal;
top: calc(var(--mouse-y) * 100vh); top: calc(var(--mouse-y) * 100vh);

2
static/koboldai.js
View File

@@ -5060,7 +5060,7 @@ document.addEventListener('mousemove', evt => {
r.style.setProperty("--tooltip_y", "-100%"); r.style.setProperty("--tooltip_y", "-100%");
r.style.setProperty("--tooltip_y_context", "0%"); r.style.setProperty("--tooltip_y_context", "0%");
} else { } else {
r.style.setProperty("--tooltip_y", "200%"); r.style.setProperty("--tooltip_y", "100%");
r.style.setProperty("--tooltip_y_context", "200%"); r.style.setProperty("--tooltip_y_context", "200%");
} }
r.style.setProperty("--mouse-x", evt.clientX / innerWidth); r.style.setProperty("--mouse-x", evt.clientX / innerWidth);

46
templates/settings flyout.html
View File

@@ -24,7 +24,7 @@
<icon class="material-icons-outlined" style="font-size:14px;position:relative;top:2px;">open_in_new</icon> <icon class="material-icons-outlined" style="font-size:14px;position:relative;top:2px;">open_in_new</icon>
</span> </span>
</div> </div>
<span class="material-icons-outlined cursor search_icon" title="Search Settings" onclick="open_finder();">search</span> <span class="material-icons-outlined cursor search_icon" tooltip="Search Settings" onclick="open_finder();">search</span>
<div class="flyout_menu_contents"> <div class="flyout_menu_contents">
<div id="setting_menu_home" class="settings_category_area tab-target tab-target-settings"> <div id="setting_menu_home" class="settings_category_area tab-target tab-target-settings">
@@ -39,13 +39,13 @@
</div> </div>
<div style="text-align: center;"> <div style="text-align: center;">
<button class="settings_button" onclick="socket.emit('load_model_button', {});"> <button class="settings_button" onclick="socket.emit('load_model_button', {});">
<span class="material-icons-outlined cursor" title="Load Model" style="font-size: 1.4em;">folder_open</span> <span class="material-icons-outlined cursor" tooltip="Load Model" style="font-size: 1.4em;">folder_open</span>
<span class="button_label">Load Model</span> <span class="button_label">Load Model</span>
</button> </button>
<select class="var_sync_model_selected_preset settings_select presets" onchange='sync_to_server(this)'><option>Preset</option></select> <select class="var_sync_model_selected_preset settings_select presets" onchange='sync_to_server(this)'><option>Preset</option></select>
{% if not on_colab %} {% if not on_colab %}
<div class="horde_trigger var_sync_alt_model_model"><input type=checkbox data-size="mini" data-onstyle="success" data-toggle="toggle" class='var_sync_system_horde_share' onchange='sync_to_server(this)'> Share with Horde </div> <div class="horde_trigger var_sync_alt_model_model"><input type=checkbox data-size="mini" data-onstyle="success" data-toggle="toggle" class='var_sync_system_horde_share' onchange='sync_to_server(this)'> Share with Horde </div>
<span class="helpicon material-icons-outlined" title="Shares your GPU with other KoboldAI users. Does not share data/stories.">help_icon</span> <span class="helpicon material-icons-outlined" tooltip="Shares your GPU with other KoboldAI users. Does not share data/stories.">help_icon</span>
{% endif %} {% endif %}
</div> </div>
</div> </div>
@@ -57,7 +57,7 @@
<span class="var_sync_story_story_name fullwidth" contenteditable=true onblur="sync_to_server(this);"></span> <span class="var_sync_story_story_name fullwidth" contenteditable=true onblur="sync_to_server(this);"></span>
</span> </span>
<span> <span>
<span class="material-icons-outlined cursor" style="padding-top: 8px;" title="Download Story" onclick="document.getElementById('download_iframe').src = 'json';">file_download</span> <span class="material-icons-outlined cursor" style="padding-top: 8px;" tooltip="Download Story" onclick="document.getElementById('download_iframe').src = 'json';">file_download</span>
</span> </span>
</div> </div>
<div id="text_storyname"> <div id="text_storyname">
@@ -65,15 +65,15 @@
</div> </div>
<div class="story_title_icons"> <div class="story_title_icons">
<button class="settings_button" onclick="socket.emit('new_story', '');"> <button class="settings_button" onclick="socket.emit('new_story', '');">
<span class="material-icons-outlined cursor" title="New Story">description</span> <span class="material-icons-outlined cursor" tooltip="New Story">description</span>
<span class="button_label">New Story</span> <span class="button_label">New Story</span>
</button> </button>
<button class="settings_button" onclick="socket.emit('load_story_list', '');"> <button class="settings_button" onclick="socket.emit('load_story_list', '');">
<span class="material-icons-outlined cursor" title="Load Story">folder_open</span> <span class="material-icons-outlined cursor" tooltip="Load Story">folder_open</span>
<span class="button_label">Load Story</span> <span class="button_label">Load Story</span>
</button> </button>
<button class="settings_button var_sync_alt_story_gamesaved" onclick='socket.emit("save_story", null, (response) => {save_as_story(response);});'> <button class="settings_button var_sync_alt_story_gamesaved" onclick='socket.emit("save_story", null, (response) => {save_as_story(response);});'>
<span class="material-icons-outlined cursor var_sync_alt_story_gamesaved" title="Save Story">save</span> <span class="material-icons-outlined cursor var_sync_alt_story_gamesaved" tooltip="Save Story">save</span>
<span class="button_label">Save Story</span> <span class="button_label">Save Story</span>
</button> </button>
</div> </div>
@@ -90,7 +90,7 @@
<!---Top Row----> <!---Top Row---->
<span class="setting_label"> <span class="setting_label">
<span style="white-space: pre-wrap;">Chat Name: </span> <span style="white-space: pre-wrap;">Chat Name: </span>
<span class="helpicon material-icons-outlined" title="Your name for chat mode.">help_icon</span> <span class="helpicon material-icons-outlined" tooltip="Your name for chat mode.">help_icon</span>
</span> </span>
<!---Bottom Row----> <!---Bottom Row---->
<span class="setting_item" style="height: 25px;"> <span class="setting_item" style="height: 25px;">
@@ -113,7 +113,7 @@
<div id="setting_menu_settings" class="hidden settings_category_area tab-target tab-target-settings"> <div id="setting_menu_settings" class="hidden settings_category_area tab-target tab-target-settings">
<div class="preset_area"> <div class="preset_area">
<button class="settings_button" onclick="show_save_preset();"> <button class="settings_button" onclick="show_save_preset();">
<span class="material-icons-outlined cursor" title="Save Preset">save</span> <span class="material-icons-outlined cursor" tooltip="Save Preset">save</span>
<span class="button_label">Save Preset</span> <span class="button_label">Save Preset</span>
</button> </button>
<select class="var_sync_model_selected_preset settings_select presets" onchange='sync_to_server(this)'><option>Preset</option></select> <select class="var_sync_model_selected_preset settings_select presets" onchange='sync_to_server(this)'><option>Preset</option></select>
@@ -139,7 +139,7 @@
<div class="setting_container_single"> <div class="setting_container_single">
<!---Top Row----> <!---Top Row---->
<span class="setting_label"> <span class="setting_label">
<span>Samplers Order:&nbsp;</span><span class="helpicon material-icons-outlined" title="Changes the order of the samplers to have a considerably different effect than just leaving the samplers at their default order.">help_icon</span> <span>Samplers Order:&nbsp;</span><span class="helpicon material-icons-outlined" tooltip="Changes the order of the samplers to have a considerably different effect than just leaving the samplers at their default order.">help_icon</span>
</span> </span>
<!---Bottom Row----> <!---Bottom Row---->
<span class="setting_item"> <span class="setting_item">
@@ -193,14 +193,14 @@
<!---Top Row----> <!---Top Row---->
<span class="setting_label"> <span class="setting_label">
<span style="white-space: pre-wrap;">Soft Prompt: </span> <span style="white-space: pre-wrap;">Soft Prompt: </span>
<span class="helpicon material-icons-outlined" title="Changes how the AI decides what to output.">help_icon</span> <span class="helpicon material-icons-outlined" tooltip="Changes how the AI decides what to output.">help_icon</span>
</span> </span>
<!---Bottom Row----> <!---Bottom Row---->
<span class="setting_item"> <span class="setting_item">
<!---<span class="material-icons-outlined cursor" onclick="socket.emit('load_softprompt_list', '');">folder_open</span> <span class="var_sync_system_spname"></span>---> <!---<span class="material-icons-outlined cursor" onclick="socket.emit('load_softprompt_list', '');">folder_open</span> <span class="var_sync_system_spname"></span>--->
<select autocomplete="off" id="sp" class="var_sync_system_splist var_sync_system_spfilename settings_select" style="width: 140px;margin-right:0px;padding-bottom: 0px;" onclick="socket.emit('load_softprompt', this.value);"> <select autocomplete="off" id="sp" class="var_sync_system_splist var_sync_system_spfilename settings_select" style="width: 140px;margin-right:0px;padding-bottom: 0px;" onclick="socket.emit('load_softprompt', this.value);">
</select> </select>
<span class="material-icons-outlined cursor" style="font-size: 18px;" title="Refresh List" onclick="socket.emit('sp_list_refresh', '');">autorenew</span> <span class="material-icons-outlined cursor" style="font-size: 18px;" tooltip="Refresh List" onclick="socket.emit('sp_list_refresh', '');">autorenew</span>
</span> </span>
<!---Slider Labels---> <!---Slider Labels--->
<span class="setting_minlabel"><span style="top: -4px; position: relative;"></span></span> <span class="setting_minlabel"><span style="top: -4px; position: relative;"></span></span>
@@ -210,15 +210,15 @@
<!---Top Row----> <!---Top Row---->
<span class="setting_label"> <span class="setting_label">
<span style="white-space: pre-wrap;">Enabled User Scripts: </span> <span style="white-space: pre-wrap;">Enabled User Scripts: </span>
<span class="helpicon material-icons-outlined" title="Allows for user scripts that modify the way the game functions">help_icon</span> <span class="helpicon material-icons-outlined" tooltip="Allows for user scripts that modify the way the game functions">help_icon</span>
</span> </span>
<!---Bottom Row----> <!---Bottom Row---->
<span class="setting_item"> <span class="setting_item">
<div style="display: flex;flex-direction: row;"> <div style="display: flex;flex-direction: row;">
<select id="loaded_userscripts" class="var_sync_system_userscripts settings_select" multiple style="width:300px;"></select> <select id="loaded_userscripts" class="var_sync_system_userscripts settings_select" multiple style="width:300px;"></select>
<div style="display: flex;flex-direction: column;"> <div style="display: flex;flex-direction: column;">
<span class="material-icons-outlined cursor" style="font-size: 24px;" title="Unload File(s)" onclick="unload_userscripts();">delete</span> <span class="material-icons-outlined cursor" style="font-size: 24px;" tooltip="Unload File(s)" onclick="unload_userscripts();">delete</span>
<span class="material-icons-outlined cursor" style="font-size: 24px;" title="Load File" onclick="socket.emit('load_userscripts_list', '');">upload_file</span> <span class="material-icons-outlined cursor" style="font-size: 24px;" tooltip="Load File" onclick="socket.emit('load_userscripts_list', '');">upload_file</span>
</div> </div>
</div> </div>
</span> </span>
@@ -238,7 +238,7 @@
<div class="bias_header_score">Score</div> <div class="bias_header_score">Score</div>
<div class="bias_header_comp_threshold"> <div class="bias_header_comp_threshold">
Completion Threshold Completion Threshold
<span class="helpicon material-icons-outlined" title="Amount of tokens that must match the phrase before it is force-completed.">help_icon</span> <span class="helpicon material-icons-outlined" tooltip="Amount of tokens that must match the phrase before it is force-completed.">help_icon</span>
</div> </div>
</div> </div>
</div> </div>
@@ -255,7 +255,7 @@
{% endwith %} {% endwith %}
<div class="setting_container"> <div class="setting_container">
<span class="setting_label"> <span class="setting_label">
<span>Max Game Screen: &nbsp;</span><span class="helpicon material-icons-outlined" title="When enabled and both menus are un-pinned, the game screen will take up all avaialable space. When disabled, the game screen will be centered.">help_icon</span> <span>Max Game Screen: &nbsp;</span><span class="helpicon material-icons-outlined" tooltip="When enabled and both menus are un-pinned, the game screen will take up all avaialable space. When disabled, the game screen will be centered.">help_icon</span>
</span> </span>
<span class="setting_item"> <span class="setting_item">
<input type=checkbox id="preserve_game_space_setting" data-size=mini data-onstyle=success data-toggle=toggle onchange="preserve_game_space(this.checked)"/> <input type=checkbox id="preserve_game_space_setting" data-size=mini data-onstyle=success data-toggle=toggle onchange="preserve_game_space(this.checked)"/>
@@ -266,7 +266,7 @@
</div> </div>
<div class="setting_container"> <div class="setting_container">
<span class="setting_label"> <span class="setting_label">
<span>Options on Right:&nbsp;</span><span class="helpicon material-icons-outlined" title="When enabled and only the story menu is pinned, the generated story options will be shown on the right instead of the left of the game text.">help_icon</span> <span>Options on Right:&nbsp;</span><span class="helpicon material-icons-outlined" tooltip="When enabled and only the story menu is pinned, the generated story options will be shown on the right instead of the left of the game text.">help_icon</span>
</span> </span>
<span class="setting_item"> <span class="setting_item">
<input type=checkbox id="options_on_right" data-size=mini data-onstyle=success data-toggle=toggle onchange="options_on_right(this.checked)"/> <input type=checkbox id="options_on_right" data-size=mini data-onstyle=success data-toggle=toggle onchange="options_on_right(this.checked)"/>
@@ -278,7 +278,7 @@
<div class="setting_container"> <div class="setting_container">
<!---Top Row----> <!---Top Row---->
<span class="setting_label"> <span class="setting_label">
<span>Font Size:&nbsp;</span><span class="helpicon material-icons-outlined" title="Change the font size of the game text">help_icon</span> <span>Font Size:&nbsp;</span><span class="helpicon material-icons-outlined" tooltip="Change the font size of the game text">help_icon</span>
</span> </span>
<input autocomplete="off" class="setting_value" id="font_size_cur" <input autocomplete="off" class="setting_value" id="font_size_cur"
value="1" item_id="font_size" value="1" item_id="font_size"
@@ -313,13 +313,13 @@
<div class="setting_tile_area" id="Substitutions"> <div class="setting_tile_area" id="Substitutions">
<span class="help_text">Automatically replaces phrases that you or the AI insert.</span> <span class="help_text">Automatically replaces phrases that you or the AI insert.</span>
<span class="helpicon material-icons-outlined" title="Can be used to help you insert special characters or automatically correct the AI. The pencil button toggles if a substitution is active or not.">help_icon</span> <span class="helpicon material-icons-outlined" tooltip="Can be used to help you insert special characters or automatically correct the AI. The pencil button toggles if a substitution is active or not.">help_icon</span>
<div id="substitution-header" class="noselect"> <div id="substitution-header" class="noselect">
<b>Replace</b> <b>With</b> <b>Replace</b> <b>With</b>
</div> </div>
<div id="substitution-container"></div> <div id="substitution-container"></div>
<div id="new-sub-card" class="cursor" title="Add Substitution"> <div id="new-sub-card" class="cursor" tooltip="Add Substitution">
<span class="material-icons-outlined"> <span class="material-icons-outlined">
add add
</span> </span>
@@ -342,12 +342,12 @@
</div> </div>
<div class="setting_tile_area" id="Theme"> <div class="setting_tile_area" id="Theme">
<select id="selected_theme" class="var_sync_system_theme_list" autocomplete="off" onchange="Change_Theme(this.value);"> <select id="selected_theme" class="var_sync_system_theme_list" autocomplete="off" onchange="Change_Theme(this.value);">
</select><span class="material-icons-outlined cursor" title="Refresh List" onclick="socket.emit('theme_list_refresh', '');">autorenew</span> </select><span class="material-icons-outlined cursor" tooltip="Refresh List" onclick="socket.emit('theme_list_refresh', '');">autorenew</span>
<div id="palette_area"> <div id="palette_area">
<b style="font-size: 20px;">Palette</b> <b style="font-size: 20px;">Palette</b>
<div id="save_theme_area" > <div id="save_theme_area" >
<input type="text" id="save_theme_name" autocomplete="off" placeholder="New Theme Name"/> <input type="text" id="save_theme_name" autocomplete="off" placeholder="New Theme Name"/>
<span class="material-icons-outlined cursor" title="Save Theme" onclick='save_theme();'>save</span> <span class="material-icons-outlined cursor" tooltip="Save Theme" onclick='save_theme();'>save</span>
</div> </div>
<div class="setting_tile_area" id="Palette"> <div class="setting_tile_area" id="Palette">
<table id="Palette_Table" border=1 style="border-color: var(--palette_table_border);"> <table id="Palette_Table" border=1 style="border-color: var(--palette_table_border);">

2
templates/story flyout.html
View File

@@ -55,7 +55,7 @@
<h4 class="section_header" style="margin-left: 12px;">World Info</h4> <h4 class="section_header" style="margin-left: 12px;">World Info</h4>
<span class="help_text" style="margin-left: 20px;"> <span class="help_text" style="margin-left: 20px;">
Lore information, which the AI recalls by certain words. Lore information, which the AI recalls by certain words.
<span class="helpicon material-icons-outlined" title="Use this instead of Memory for information on things like characters, objects, events, places, and anything else with detail.">help_icon</span> <span class="helpicon material-icons-outlined" tooltip="Use this instead of Memory for information on things like characters, objects, events, places, and anything else with detail.">help_icon</span>
</span> </span>
<div class="setting_tile_area wi_settings"> <div class="setting_tile_area wi_settings">
{% with menu='World Info' %} {% with menu='World Info' %}