From fb29219b66f962112aea9a29bfb5889070d2668e Mon Sep 17 00:00:00 2001 From: RossAscends <124905043+RossAscends@users.noreply.github.com> Date: Tue, 11 Apr 2023 14:44:02 +0900 Subject: [PATCH 001/187] fixed world info editing window on mobile --- public/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/style.css b/public/style.css index a569b2676..cca93221c 100644 --- a/public/style.css +++ b/public/style.css @@ -598,7 +598,7 @@ textarea { font-family: "Noto Sans", "Noto Color Emoji", sans-serif; font-size: 15px; padding: 7px; - /* width: 100%; */ + width: 100%; margin: 5px 0; } From ec4b84096bedaa3f4af1a205b33af79978a2725e Mon Sep 17 00:00:00 2001 From: SillyLossy Date: Tue, 11 Apr 2023 14:26:30 +0300 Subject: [PATCH 002/187] Lightweight loading button --- public/img/hourglass-half-solid.svg | 1 + public/index.html | 4 +++- public/script.js | 2 +- public/scripts/extensions/caption/style.css | 12 ----------- public/style.css | 24 +++++++++++++++++---- 5 files changed, 25 insertions(+), 18 deletions(-) create mode 100644 public/img/hourglass-half-solid.svg diff --git a/public/img/hourglass-half-solid.svg b/public/img/hourglass-half-solid.svg new file mode 100644 index 000000000..36718ee4a --- /dev/null +++ b/public/img/hourglass-half-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/index.html b/public/index.html index 14261f01b..a39af0bf8 100644 --- a/public/index.html +++ b/public/index.html @@ -1718,7 +1718,9 @@
-
+
+ +
diff --git a/public/script.js b/public/script.js index 3eadabef2..60c971ff4 100644 --- a/public/script.js +++ b/public/script.js @@ -1924,7 +1924,7 @@ function activateSendButtons() { function deactivateSendButtons() { $("#send_but").css("display", "none"); - $("#loading_mes").css("display", "inline-block"); + $("#loading_mes").css("display", "flex"); } function resetChatState() { diff --git a/public/scripts/extensions/caption/style.css b/public/scripts/extensions/caption/style.css index 4015383c6..113a526cb 100644 --- a/public/scripts/extensions/caption/style.css +++ b/public/scripts/extensions/caption/style.css @@ -22,15 +22,3 @@ #img_form { display: none; } - -.spin { - animation-name: spin; - animation-duration: 2000ms; - animation-iteration-count: infinite; - animation-timing-function: linear; -} - -@keyframes spin { - from {transform:rotate(0deg);} - to {transform:rotate(360deg);} -} \ No newline at end of file diff --git a/public/style.css b/public/style.css index cca93221c..1ded471ff 100644 --- a/public/style.css +++ b/public/style.css @@ -268,11 +268,15 @@ code { width: 40px; height: 40px; margin: 0 auto; - /*margin-left: 2px;*/ - background: url('img/load.svg') no-repeat; - background-size: 26px 26px; - background-position: center center; order: 99999; + align-items: center; + justify-content: center; + filter: brightness(0.7); +} + +#loading_mes .svg_icon { + width: 24px; + height: 24px; } #options_button { @@ -3397,4 +3401,16 @@ body.no-blur #select_chat_popup { } +} + +.spin { + animation-name: spin; + animation-duration: 2000ms; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +@keyframes spin { + from {transform:rotate(0deg);} + to {transform:rotate(360deg);} } \ No newline at end of file From 0f8738eacd3dc8e711ce44d6e3b91d3bb5b75c8d Mon Sep 17 00:00:00 2001 From: SillyLossy Date: Tue, 11 Apr 2023 15:00:51 +0300 Subject: [PATCH 003/187] Fix dice dropdown not being visible --- public/scripts/extensions/caption/index.js | 3 +-- public/scripts/extensions/caption/style.css | 2 +- public/style.css | 1 - 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/public/scripts/extensions/caption/index.js b/public/scripts/extensions/caption/index.js index eaa1fe86a..1d9d10b4b 100644 --- a/public/scripts/extensions/caption/index.js +++ b/public/scripts/extensions/caption/index.js @@ -27,8 +27,7 @@ async function setImageIcon() { async function setSpinnerIcon() { try { const sendButton = document.getElementById('send_picture'); - sendButton.style.backgroundImage = `url('/img/spinner-solid.svg')`; - sendButton.classList.add('spin'); + sendButton.style.backgroundImage = `url('/img/hourglass-half-solid.svg')`; } catch (error) { console.log(error); diff --git a/public/scripts/extensions/caption/style.css b/public/scripts/extensions/caption/style.css index 113a526cb..97a82af46 100644 --- a/public/scripts/extensions/caption/style.css +++ b/public/scripts/extensions/caption/style.css @@ -5,7 +5,7 @@ margin: 0; padding: 1px; background: no-repeat; - background-size: 26px auto; + background-size: 24px 24px; background-position: center center; outline: none; border: none; diff --git a/public/style.css b/public/style.css index 1ded471ff..8b18d0f06 100644 --- a/public/style.css +++ b/public/style.css @@ -238,7 +238,6 @@ code { background-position: center; display: flex; flex-direction: row; - overflow: hidden; } #send_but { From 7b066a1b5b5944e8b0fb396aa969be446528db34 Mon Sep 17 00:00:00 2001 From: RossAscends <124905043+RossAscends@users.noreply.github.com> Date: Tue, 11 Apr 2023 23:09:28 +0900 Subject: [PATCH 004/187] - dynamic font sizes site-wide - based on rem variable in root - ready to add slider --- public/index.html | 3 +- public/style.css | 180 ++++++++++++++++------------------------------ 2 files changed, 62 insertions(+), 121 deletions(-) diff --git a/public/index.html b/public/index.html index a39af0bf8..aef7a3b40 100644 --- a/public/index.html +++ b/public/index.html @@ -1105,7 +1105,7 @@ - Play a sound on new message + Play a sound on new message ? @@ -1387,6 +1387,7 @@
+
diff --git a/public/style.css b/public/style.css index 8b18d0f06..5d846a1a3 100644 --- a/public/style.css +++ b/public/style.css @@ -36,6 +36,9 @@ --ivory: rgb(220, 220, 210); --sheldWidth: 800px; + /*base variable calculated in rems*/ + --mainFontSize: calc(1 * 1rem); + } @@ -65,7 +68,7 @@ body { background-attachment: fixed; background-size: cover; font-family: "Noto Sans", "Noto Color Emoji", sans-serif; - font-size: 15px; + font-size: var(--mainFontSize); color: var(--ivory); } @@ -100,7 +103,7 @@ body { .mes_bias { display: block; - font-size: 0.9rem; + font-size: calc(var(--mainFontSize) - 0.1rem); font-weight: 500; color: darkgoldenrod; } @@ -283,8 +286,6 @@ code { display: inline; color: var(--white50a); cursor: pointer; - font-size: 1rem; - line-height: 1rem; z-index: 2001; -webkit-transition: color .25s ease-in-out; -moz-transition: color .25s ease-in-out; @@ -297,7 +298,8 @@ code { #options_button:after { content: '\2630'; text-decoration: none; - font-size: 1.5rem; + font-size: calc(var(--mainFontSize) + .5rem); + } @@ -320,7 +322,7 @@ code { border-radius: 15px; box-shadow: 0 0 5px black; text-shadow: 0 0 3px black; - min-width: 200px; + /* min-width: 200px; */ z-index: 2000; margin-bottom: 3px; } @@ -345,9 +347,9 @@ code { } .options-content img { - width: 1.5rem; + width: calc(var(--mainFontSize) + .5rem); margin-right: 5px; - height: 1.25rem; + width: calc(var(--mainFontSize) + .25rem); vertical-align: middle; } @@ -507,16 +509,16 @@ body.big-avatars .avatar img { .mes_text { font-weight: 500; - line-height: 1.5rem; + line-height: calc(var(--mainFontSize) + .5rem); padding-left: 0; padding-top: 5px; padding-bottom: 5px; /*max-width: 720px;*/ word-wrap: break-word; - 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; */ } -.mes_text::after { +/* .mes_text::after { content: "▋"; animation: blink 1s steps(1) infinite; opacity: 0.7; @@ -527,7 +529,7 @@ body.big-avatars .avatar img { 60% { visibility: hidden; } -} +} */ br { display: block; @@ -543,17 +545,22 @@ textarea { border: 1px solid var(--white30a); border-radius: 10px; color: var(--white70a); - font-size: 15px; + font-size: var(--mainFontSize); font-family: "Noto Sans", "Noto Color Emoji", sans-serif; padding: 5px 10px; scrollbar-width: thin; } +input, +select { + font-size: var(--mainFontSize); +} + #send_textarea { - font-size: 1rem; + /* font-size: 1rem; line-height: 1.5rem; - min-height: calc(1.5em + 0.75rem + 2px); + min-height: calc(1.5em + 0.75rem + 2px); */ max-height: 50svh; word-wrap: break-word; height: 40px; @@ -573,7 +580,6 @@ textarea { } #rm_ch_create_block textarea { - font-size: 15px; min-height: 200px; } @@ -599,7 +605,7 @@ textarea { border: 1px solid var(--white30a); border-radius: 10px; font-family: "Noto Sans", "Noto Color Emoji", sans-serif; - font-size: 15px; + padding: 7px; width: 100%; margin: 5px 0; @@ -615,13 +621,6 @@ textarea { padding: 5px 0; } -#top-bar h5 { - color: var(--white50a); - margin-bottom: 0; - margin-top: 0; - font-size: 0.75rem; -} - input:focus, textarea:focus, select:focus { @@ -655,7 +654,6 @@ input[type="file"] { cursor: pointer; text-align: center; padding-right: 20px; - font-size: 1.5rem; margin-top: 0; filter: grayscale(1) brightness(75%); -webkit-transition: all 0.5s ease-in-out; @@ -750,7 +748,6 @@ select { color: var(--white70a); padding: 7px; background-color: var(--black30a); - font-size: 15px; border: 1px solid var(--white30a); border-radius: 10px; margin-bottom: 10px; @@ -873,7 +870,6 @@ img[src="img/load.svg"] { #character_search_bar { flex: 1; - font-size: 1em; padding-left: 0.75em; margin: 0; } @@ -1087,7 +1083,7 @@ input[type=search]:focus::-webkit-search-cancel-button { } #rm_info_panel { - font-size: 20px; + font-size: calc(var(--mainFontSize) + .5rem); display: block; text-align: center; } @@ -1115,6 +1111,7 @@ input[type=search]:focus::-webkit-search-cancel-button { #result_info { color: var(--white30a); display: flex; + font-size: calc(var(--mainFontSize) - 0.2rem); } /* Focus */ @@ -1207,7 +1204,7 @@ input[type=search]:focus::-webkit-search-cancel-button { cursor: pointer; margin: 0; transition: 0.3s; - font-size: 22px; + min-width: 40px; min-height: 40px; filter: grayscale(0.5); @@ -1226,7 +1223,7 @@ input[type=search]:focus::-webkit-search-cancel-button { cursor: pointer; margin: 10px 0; transition: 0.3s; - font-size: 15px; + } .menu_button:hover { @@ -1235,7 +1232,7 @@ input[type=search]:focus::-webkit-search-cancel-button { #dialogue_del_mes .menu_button { - font-size: 1.25rem; + margin-left: 25px; margin-right: 25px; } @@ -1359,7 +1356,7 @@ input[type=search]:focus::-webkit-search-cancel-button { margin-top: auto; margin-bottom: auto; margin-left: 1rem; - font-size: 16px; + } #world_popup { @@ -1461,7 +1458,7 @@ input[type=search]:focus::-webkit-search-cancel-button { #world_popup_entries_list:empty::before { content: 'No entries exist. Try creating one!'; - font-size: 1.5rem; + font-size: calc(var(--mainFontSize) + .5rem); font-weight: bolder; width: 100%; height: 100%; @@ -1603,8 +1600,8 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin) { appearance: none; outline: none; position: relative; - width: 1.5rem; - height: 1.5rem; + width: var(--mainFontSize); + height: var(--mainFontSize); overflow: hidden; border-radius: 3px; background-color: white; @@ -1682,7 +1679,9 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button display: flex; justify-content: center; align-items: center; + /*this is just a big + sign, no need to dynamically size it*/ font-size: 3rem; + } #form_upload_avatar { @@ -1696,7 +1695,7 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button .range-block-title { margin: 0; padding: 0; - font-size: 14px; + } .range-block-counter { @@ -1707,7 +1706,7 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button margin-left: auto; margin-right: auto; /* margin-top: 10px; */ - font-size: 11px; + font-size: calc(var(--mainFontSize) - 0.3rem); color: var(--white50a); } @@ -1718,27 +1717,6 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button margin-bottom: 10px; } -/* input[type=range] { - -webkit-appearance: none; - appearance: none; - margin: 0; - padding: 0; - width: 100%; - height: 5px; - background: var(--white50a); - border-radius: 15px; - background-size: 70% 100%; - background-repeat: no-repeat; -} -input[type=range]::-webkit-slider-thumb, input[type=range]::-moz-range-thumb { - -webkit-appearance: none; - height: 15px; - width: 15px; - margin-top: -5px; - border-radius: 50%; - background:red; -} */ - input[type="range"] { -webkit-appearance: none; appearance: none; @@ -1789,16 +1767,14 @@ input[type="range"]::-webkit-slider-thumb { color: var(--sienna); border: 1px solid var(--sienna); border-radius: 10px; - line-height: 15px; - font-size: 15px; - width: 20px; - height: 20px; - padding-left: 6px; - padding-top: 1px; + line-height: var(--mainFontSize); + font-size: var(--mainFontSize); + width: calc(var(--mainFontSize) + 0.2rem); + height: calc(var(--mainFontSize) + 0.2rem); display: inline-block; opacity: 0.7; margin: 0 5px; - text-align: initial; + text-align: center; } @@ -1909,8 +1885,7 @@ input[type="range"]::-webkit-slider-thumb { margin: 0; outline: none; background-color: var(--black50a); - font-size: 15px; - line-height: 1.25rem; + line-height: calc(var(--mainFontSize)+ .25rem); } #anchor_order { @@ -2146,7 +2121,7 @@ input[type="range"]::-webkit-slider-thumb { } .select_chat_block_mes { - font-size: 0.75rem; + font-size: calc(var(--mainFontSize) - .25rem); } #select_chat_cross { @@ -2207,7 +2182,7 @@ input[type="range"]::-webkit-slider-thumb { #rm_button_group_chats h2 { margin-top: auto; margin-bottom: auto; - font-size: 16px; + /* font-size: 16px; */ color: rgb(188, 193, 200, 1); border: 1px solid #333; background-color: rgba(0, 0, 0, 0.3); @@ -2256,7 +2231,7 @@ input[type="range"]::-webkit-slider-thumb { } #rm_group_buttons>input { - font-size: 16px; + cursor: pointer; user-select: none; } @@ -2294,7 +2269,7 @@ input[type="range"]::-webkit-slider-thumb { #rm_group_members:empty::before { content: 'Group is empty'; - font-size: 1rem; + font-weight: bolder; width: 100%; height: 100%; @@ -2323,7 +2298,7 @@ input[type="range"]::-webkit-slider-thumb { #rm_group_add_members:empty::before { content: 'No characters available'; - font-size: 1rem; + font-weight: bolder; width: 100%; height: 100%; @@ -2609,7 +2584,7 @@ span.warning { #talkativeness_hint span { min-width: 10em; - font-size: small; + font-size: calc(var(--mainFontSize) - .25rem); } #talkativeness_hint span:nth-child(1) { @@ -2638,24 +2613,19 @@ hr { } h1 { - font-size: 2rem; + font-size: calc(var(--mainFontSize) + 1rem); line-height: 32px; margin-bottom: 22px; - font-weight: 300; } h2 { - font-size: 1.5rem; - line-height: 1.5rem; margin-top: 5px; margin-bottom: 22px; - font-weight: 300; } .right_menu_button h2 { margin-top: 0; margin-bottom: 0; - font-size: 1.25rem; } .right_menu_button img { @@ -2708,7 +2678,6 @@ a { #right-nav-panel { width: calc((100svw - var(--sheldWidth) - 2px) /2); - /* min-width: 450px; */ height: 100svh; position: fixed; top: 0; @@ -2721,7 +2690,6 @@ a { background-color: var(--black50a); -webkit-backdrop-filter: blur(10px); z-index: 3000; - /* white-space: nowrap; */ border: 0; border-left: 1px solid var(--grey30a); border-bottom: 1px solid var(--grey30a); @@ -2744,36 +2712,6 @@ a { z-index: 3001; } -#nav-toggle:hover::after { - color: var(--ivory); -} - -#nav-toggle::after { - content: '\2630'; - line-height: 30px; - font-size: 2em; - padding: 0; - text-align: center; - vertical-align: middle; - display: inline-block; - width: 30px; - height: 30px; - margin-top: -8px; - margin-left: -24px; - border: 1px solid var(--white30a); - border-radius: 5px; - background: var(--black30a); - color: var(--white50a); - -webkit-transition: all 0.275s; - transition: all 0.275s; -} - -#nav-toggle:checked::after { - content: '\2715'; - line-height: 30px; - font-size: 2em; -} - #right-nav-panel>div:not(#right-nav-panel-tabs) { height: calc(100% - 40px); overflow-y: auto; @@ -2783,8 +2721,6 @@ a { display: none; } - - /* Message images */ .mes img.img_extra { max-width: 600px; @@ -3121,7 +3057,7 @@ label[for="extensions_autoconnect"] { margin: 0 3px; display: block; font-weight: 700; - font-size: 1.2em; + font-size: calc(var(--mainFontSize) + .2rem); } .openai_logit_bias_list_item { @@ -3164,7 +3100,6 @@ label[for="extensions_autoconnect"] { } body { - font-size: 16px; position: fixed; touch-action: none; overflow: hidden; @@ -3253,7 +3188,7 @@ label[for="extensions_autoconnect"] { } #result_info { - font-size: 14px; + font-size: calc(var(--mainFontSize) - .1rem); } .avatar_div { @@ -3270,8 +3205,8 @@ label[for="extensions_autoconnect"] { #send_textarea { /*larger input bar for mobile screens, easier to tap*/ - font-size: 1.25rem; - line-height: 1.5rem; + font-size: calc(var(--mainFontSize) + .25rem); + line-height: calc(var(--mainFontSize) + .5rem); min-height: calc(2rem + 0.75rem + 2px); max-height: 200px; word-wrap: break-word; @@ -3410,6 +3345,11 @@ body.no-blur #select_chat_popup { } @keyframes spin { - from {transform:rotate(0deg);} - to {transform:rotate(360deg);} + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } } \ No newline at end of file From e449aaf96151627887cae04fe2dbd0de47d7eedb Mon Sep 17 00:00:00 2001 From: SillyLossy Date: Tue, 11 Apr 2023 17:29:30 +0300 Subject: [PATCH 005/187] Style fixes --- public/style.css | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/public/style.css b/public/style.css index 5d846a1a3..fe000ec72 100644 --- a/public/style.css +++ b/public/style.css @@ -349,7 +349,7 @@ code { .options-content img { width: calc(var(--mainFontSize) + .5rem); margin-right: 5px; - width: calc(var(--mainFontSize) + .25rem); + height: calc(var(--mainFontSize) + .25rem); vertical-align: middle; } @@ -470,7 +470,7 @@ body.big-avatars .avatar { box-shadow: 0 0 5px var(--black50a); } -body.big-avatars #user_avatar_block .avatar { +body.big-avatars #user_avatar_block .avatar, body.big-avatars #user_avatar_block .avatar_upload { height: 90px; width: 60px; border-radius: 10px; @@ -637,7 +637,7 @@ input[type="file"] { width: 100%; max-height: 30px; display: flex; - align-items: flex-end; + align-items: center; padding: 0 10px; } @@ -1673,15 +1673,13 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button cursor: pointer; width: 60px; height: 60px; - background: rgba(100, 100, 100, 0.5); - backdrop-filter: blur(10px) brightness(0.3); + background: var(--grey30); border-radius: 100%; display: flex; justify-content: center; align-items: center; /*this is just a big + sign, no need to dynamically size it*/ font-size: 3rem; - } #form_upload_avatar { @@ -2288,12 +2286,12 @@ input[type="range"]::-webkit-slider-thumb { flex-direction: row; align-items: center; width: 100%; + column-gap: 1rem; } #rm_group_add_members_header input { - flex-grow: 1; + flex: 1; width: 100%; - margin-left: 1rem; } #rm_group_add_members:empty::before { From f445121068e8bd330ad3d5eb3e2b155199aa5ee7 Mon Sep 17 00:00:00 2001 From: RossAscends <124905043+RossAscends@users.noreply.github.com> Date: Tue, 11 Apr 2023 23:54:34 +0900 Subject: [PATCH 006/187] padding for group panel --- public/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/public/style.css b/public/style.css index 5d846a1a3..beb1922b7 100644 --- a/public/style.css +++ b/public/style.css @@ -2195,6 +2195,7 @@ input[type="range"]::-webkit-slider-thumb { height: 100%; flex-direction: column; align-items: flex-start; + padding: 0 5px; } #rm_group_chats_block h3, From afb0a350af237eb30968999108618159c0f65808 Mon Sep 17 00:00:00 2001 From: SillyLossy Date: Tue, 11 Apr 2023 18:11:25 +0300 Subject: [PATCH 007/187] Changes to world editor styles --- public/index.html | 12 ++++++---- public/style.css | 61 +++++++++++++++++++++++++++++++---------------- 2 files changed, 48 insertions(+), 25 deletions(-) diff --git a/public/index.html b/public/index.html index aef7a3b40..181acbf5e 100644 --- a/public/index.html +++ b/public/index.html @@ -1477,11 +1477,13 @@
- -

- World Info Editor - ? -

+
+ +

+ World Info Editor + ? +

+
 
diff --git a/public/style.css b/public/style.css index fe000ec72..4295364d4 100644 --- a/public/style.css +++ b/public/style.css @@ -1361,9 +1361,8 @@ input[type=search]:focus::-webkit-search-cancel-button { #world_popup { display: none; - background-color: rgba(0, 0, 0, 0.3); + background-color: var(--black30a); backdrop-filter: blur(50px); - -webkit-backdrop-filter: blur(50px); max-width: var(--sheldWidth); height: calc(100% - 40px); position: absolute; @@ -1371,6 +1370,7 @@ input[type=search]:focus::-webkit-search-cancel-button { margin-right: auto; left: 0; right: 0; + top: 40px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); padding: 4px; /*border: 1px solid #333333;*/ @@ -1416,6 +1416,11 @@ input[type=search]:focus::-webkit-search-cancel-button { background-image: linear-gradient(270deg, rgba(0, 0, 0, 0), rgba(100, 100, 100, 0.75), rgba(0, 0, 0, 0)); } +.world_popup_logo_block { + display: flex; + align-items: center; +} + #world_popup_header { display: flex; flex-direction: row; @@ -1423,6 +1428,10 @@ input[type=search]:focus::-webkit-search-cancel-button { margin-left: 18px; } +#world_popup_header h3 { + margin: 0; +} + #form_rename_world { display: flex; align-items: center; @@ -1494,6 +1503,7 @@ input[type=search]:focus::-webkit-search-cancel-button { .world_entry_form_control label h4 { margin-bottom: 0px; + margin-top: 0.5rem; } .world_entry_form_control label h5 { @@ -1533,8 +1543,8 @@ input[type=search]:focus::-webkit-search-cancel-button { display: inline-block; } -.world_entry_form_radios { - margin-left: 1rem; +.world_entry_form_radios label { + margin-left: 0; } .world_entry_form_radios h4 { @@ -1557,20 +1567,8 @@ input[type=search]:focus::-webkit-search-cancel-button { margin-right: 0.5rem; } -#world_popup h4 a, -#world_popup h5 a, -#world_popup h3 a { - color: #936f4a; -} - -#world_popup h5 a:hover, -#world_popup h4 a:hover, -#world_popup h4 a:hover a { - color: #998e6b; -} - #world_popup h5 { - color: #757575; + color: var(--grey70); } /* STLYES FOR THE CHAT MESSAGE DELETION CHECKBOXES */ @@ -2683,7 +2681,7 @@ a { right: 0; left: auto; padding: 0; - padding-bottom: 5px; + margin-bottom: 5px; backdrop-filter: blur(10px); background-color: var(--black50a); -webkit-backdrop-filter: blur(10px); @@ -2711,7 +2709,7 @@ a { } #right-nav-panel>div:not(#right-nav-panel-tabs) { - height: calc(100% - 40px); + height: calc(100% - 50px); overflow-y: auto; } @@ -3097,6 +3095,29 @@ label[for="extensions_autoconnect"] { max-width: 100%; } + .world_entry_thin_controls { + flex-direction: column; + } + + .world_entry_form_control.world_entry_form_horizontal { + flex-direction: column; + align-items: flex-start; + row-gap: 0.5rem; + } + + .world_entry_form_control.world_entry_form_horizontal .world_popup_expander { + display: none; + } + + #world_popup_header { + flex-direction: column; + align-items: flex-start; + } + + #world_popup_header .world_popup_expander { + display: none; + } + body { position: fixed; touch-action: none; @@ -3164,7 +3185,7 @@ label[for="extensions_autoconnect"] { #right-nav-panel, #left-nav-panel { - height: calc(100svh - 45px); + height: calc(100svh - 40px); min-width: 100%; width: 100%; max-width: 100%; From 9070ef0b6a6c3468baacea8dff8ee65957203481 Mon Sep 17 00:00:00 2001 From: SillyLossy Date: Tue, 11 Apr 2023 18:17:03 +0300 Subject: [PATCH 008/187] (EXPERIMENTAL) Subtract amount_gen tokens from max content amount --- public/script.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/public/script.js b/public/script.js index 60c971ff4..149359d01 100644 --- a/public/script.js +++ b/public/script.js @@ -1331,7 +1331,9 @@ async function Generate(type, automatic_trigger, force_name2) { console.log('post replace chat.length = ' + chat.length); //chat2 = chat2.reverse(); var this_max_context = 1487; - if (main_api == 'kobold') this_max_context = max_context; + if (main_api == 'kobold' || main_api == 'textgenerationwebui') { + this_max_context = (max_context - amount_gen); + } if (main_api == 'novel') { if (novel_tier === 1) { this_max_context = 1024; @@ -1345,9 +1347,6 @@ async function Generate(type, automatic_trigger, force_name2) { if (main_api == 'openai') { this_max_context = oai_settings.openai_max_context; } - if (main_api == 'textgenerationwebui') { - this_max_context = (max_context - amount_gen); - } if (main_api == 'poe') { this_max_context = Math.min(Number(max_context), POE_MAX_CONTEXT); From 2577913ea219f044c4d8cc594922ad70b95e89a7 Mon Sep 17 00:00:00 2001 From: SillyLossy Date: Tue, 11 Apr 2023 18:18:06 +0300 Subject: [PATCH 009/187] 1px gap for right panel --- public/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/style.css b/public/style.css index 45f5c2ace..fcc02c740 100644 --- a/public/style.css +++ b/public/style.css @@ -2675,7 +2675,7 @@ a { #right-nav-panel { width: calc((100svw - var(--sheldWidth) - 2px) /2); - height: 100svh; + height: 99.9svh; position: fixed; top: 0; margin: 0; From 0ef0e9fc578a078d904f21d0286f838a4bbbda8c Mon Sep 17 00:00:00 2001 From: RossAscends <124905043+RossAscends@users.noreply.github.com> Date: Wed, 12 Apr 2023 00:58:14 +0900 Subject: [PATCH 010/187] added font scale slider to UI --- public/index.html | 20 ++++++++++++--- public/scripts/power-user.js | 48 +++++++++++++++++++++++++++++++++--- public/style.css | 13 +++++++--- 3 files changed, 72 insertions(+), 9 deletions(-) diff --git a/public/index.html b/public/index.html index aef7a3b40..2209d5ae4 100644 --- a/public/index.html +++ b/public/index.html @@ -1046,19 +1046,20 @@
+
-

Avatars Style

+

Avatar Style

@@ -1092,7 +1093,20 @@
+
+
+
+

Font Scale

+
+
+ select +
+
+ +
+
+

Power User Options

diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js index 00e72709c..1f2fe4a3f 100644 --- a/public/scripts/power-user.js +++ b/public/scripts/power-user.js @@ -23,6 +23,8 @@ const sheld_width = { w1000px: 1, } +var font_scale = 1; + let power_user = { collapse_newlines: false, force_pygmalion_formatting: false, @@ -41,6 +43,7 @@ let power_user = { play_sound_unfocused: true, sort_field: 'name', sort_order: 'asc', + font_scale: '1' }; const storage_keys = { @@ -56,7 +59,8 @@ const storage_keys = { multigen: "TavernAI_multigen", avatar_style: "TavernAI_avatar_style", chat_display: "TavernAI_chat_display", - sheld_width: "TavernAI_sheld_width" + sheld_width: "TavernAI_sheld_width", + font_scale: "TavernAI_font_scale" }; //Updated at the bottom of this script document based on 'focus' and 'blur' events @@ -109,11 +113,39 @@ function applySheldWidth() { r.style.setProperty('--sheldWidth', '800px'); } } +function applyFontScale() { + + const sliders = [ + { + sliderId: "#font_scale", + counterId: "#font_scale_counter", + format: (val) => `${val}`, + setValue: (val) => { font_scale = Number(val); }, + } + ]; + + sliders.forEach(slider => { + $(document).on("input", slider.sliderId, function () { + const value = $(this).val(); + const formattedValue = slider.format(value); + slider.setValue(value); + $(slider.counterId).text(formattedValue); + console.log('saving'); + saveSettingsDebounced(); + }); + }); + + power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? chat_styles.DEFAULT); + let r = document.documentElement; + r.style.setProperty('--fontScale', power_user.font_scale); + $("#font_scale_counter").html(power_user.font_scale); +} applyAvatarStyle(); switchUiMode(); applyChatDisplay(); applySheldWidth(); +applyFontScale(); // TODO delete in next release function loadFromLocalStorage() { @@ -143,6 +175,7 @@ function loadPowerUserSettings(settings) { power_user.avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? avatar_styles.ROUND); power_user.chat_display = Number(localStorage.getItem(storage_keys.chat_display) ?? chat_styles.DEFAULT); power_user.sheld_width = Number(localStorage.getItem(storage_keys.sheld_width) ?? sheld_width.DEFAULT); + power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? font_scale); $("#force-pygmalion-formatting-checkbox").prop("checked", power_user.force_pygmalion_formatting); $("#collapse-newlines-checkbox").prop("checked", power_user.collapse_newlines); @@ -159,6 +192,8 @@ function loadPowerUserSettings(settings) { $(`input[name="avatar_style"][value="${power_user.avatar_style}"]`).prop("checked", true); $(`input[name="chat_display"][value="${power_user.chat_display}"]`).prop("checked", true); $(`input[name="sheld_width"][value="${power_user.sheld_width}"]`).prop("checked", true); + $("#font_scale").val(power_user.font_scale); + $("#font_scale_counter").html(power_user.font_scale); $(`#character_sort_order option[data-order="${power_user.sort_order}"][data-field="${power_user.sort_field}"]`).prop("selected", true); sortCharactersList(); } @@ -253,6 +288,13 @@ $(document).ready(() => { applySheldWidth(); }); + $(`input[name="font_scale"]`).on('input', function (e) { + power_user.font_scale = Number(e.target.value); + localStorage.setItem(storage_keys.font_scale, power_user.font_scale); + /* console.log("font scale: " + power_user.font_scale); */ + applyFontScale(); + }); + $("#play_message_sound").on('input', function () { power_user.play_message_sound = !!$(this).prop('checked'); saveSettingsDebounced(); @@ -270,11 +312,11 @@ $(document).ready(() => { saveSettingsDebounced(); }); - $(window).on('focus', function() { + $(window).on('focus', function () { browser_has_focus = true; }); - $(window).on('blur', function() { + $(window).on('blur', function () { browser_has_focus = false; }); }); diff --git a/public/style.css b/public/style.css index 9e8c8f9ad..344167765 100644 --- a/public/style.css +++ b/public/style.css @@ -37,7 +37,8 @@ --sheldWidth: 800px; /*base variable calculated in rems*/ - --mainFontSize: calc(1 * 1rem); + --fontScale: 1; + --mainFontSize: calc(var(--fontScale) * 1rem); } @@ -427,7 +428,7 @@ code { .ui-settings { display: flex; flex-direction: row; - align-items: flex-end; + /* align-items: flex-end; */ column-gap: 10px; } @@ -470,7 +471,8 @@ body.big-avatars .avatar { box-shadow: 0 0 5px var(--black50a); } -body.big-avatars #user_avatar_block .avatar, body.big-avatars #user_avatar_block .avatar_upload { +body.big-avatars #user_avatar_block .avatar, +body.big-avatars #user_avatar_block .avatar_upload { height: 90px; width: 60px; border-radius: 10px; @@ -3003,6 +3005,11 @@ label[for="extensions_autoconnect"] { flex: 50%; } +.wide50p { + width: 50%; +} + + .justifyLeft { text-align: start; justify-content: left; From 38f88a691da5e90bb9a584936986a7fa823adf1f Mon Sep 17 00:00:00 2001 From: SillyLossy Date: Tue, 11 Apr 2023 18:58:58 +0300 Subject: [PATCH 011/187] Update readme --- readme.md | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/readme.md b/readme.md index 95d74627e..9cc19da86 100644 --- a/readme.md +++ b/readme.md @@ -40,14 +40,18 @@ https://rentry.org/TAI_Termux ## This version includes * A heavily modified TavernAI 1.2.8 (more than 50% of code rewritten or optimized) * Swipes -* Group chats -* Chat bookmarks (duplicates the current in its curent state) -* Advanced KoboldAI generation settings -* World Info support +* Group chats: multi-bot rooms for characters to talk to you or each other +* Chat bookmarks / branching (duplicates the current dialogue in its current state) +* Advanced KoboldAI / TextGen generation settings with a lot of community-made presets +* World Info support: create a rich lore or save tokens on your character card * [Oobabooga's TextGen WebUI](https://github.com/oobabooga/text-generation-webui) API connection +* [AI Horde](https://horde.koboldai.net/) connection +* [Poe.com](https://poe.com) (ChatGPT / Claude) connection * Soft prompts selector for KoboldAI * Prompt generation formatting tweaking +* webp character card interoperability (PNG is still an internal format) * Extensibility support via [SillyLossy's TAI-extras](https://github.com/Cohee1207/TavernAI-extras) plugins + * Author's Note / Character Bias * Character emotional expressions * Auto-Summary of the chat history * Sending images to chat, and the AI interpreting the content. @@ -78,12 +82,18 @@ https://rentry.org/TAI_Termux * Better Past Chats View * New Chat filenames are saved in a readable format of "(character) - (when it was created)" * Chat preview increased from 40 character to 300. + * Multiple options for characters list sorting (by name, creation date, chat sizes). * Now, by default the settings panel will close when you click away from it. * Clicking the Lock on the nav panel will hold the panel open, and this setting be remembered across sessions. * Nav panel status of open or closed will also be saved across sessions. * mobile UI optimized for iOS, and supports saving a shortcut to iOS homescreen and opening in fullscreen mode. +* Customizable chat UI: + * Play a sound when new message arrives + * Switch between round or rectangle avatar styles + * Have a wider chat window on desktop + * Optional semi-transparent glass-like panels ## Installation @@ -120,7 +130,7 @@ if you want other people on the internet to connect, and check [here](https://wh ## Performance issues? -Try enabling the Fast UI mode on User settings panel. +Try enabling the No Blur Effect mode on User settings panel. ## Questions or suggestions? Contact us on Discord: Cohee#1207 or RossAscends#1779 From 40829dfadaac39e35d302619b8323b38296cffdf Mon Sep 17 00:00:00 2001 From: SillyLossy Date: Tue, 11 Apr 2023 19:18:57 +0300 Subject: [PATCH 012/187] Fix font scaling --- public/index.html | 2 +- public/scripts/power-user.js | 47 ++++++++++++++---------------------- 2 files changed, 19 insertions(+), 30 deletions(-) diff --git a/public/index.html b/public/index.html index 5635d12c0..da654f3fb 100644 --- a/public/index.html +++ b/public/index.html @@ -1103,7 +1103,7 @@ select
- +

diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js index 1f2fe4a3f..101a08a38 100644 --- a/public/scripts/power-user.js +++ b/public/scripts/power-user.js @@ -23,8 +23,6 @@ const sheld_width = { w1000px: 1, } -var font_scale = 1; - let power_user = { collapse_newlines: false, force_pygmalion_formatting: false, @@ -43,7 +41,7 @@ let power_user = { play_sound_unfocused: true, sort_field: 'name', sort_order: 'asc', - font_scale: '1' + font_scale: 1, }; const storage_keys = { @@ -60,7 +58,7 @@ const storage_keys = { avatar_style: "TavernAI_avatar_style", chat_display: "TavernAI_chat_display", sheld_width: "TavernAI_sheld_width", - font_scale: "TavernAI_font_scale" + font_scale: "TavernAI_font_scale", }; //Updated at the bottom of this script document based on 'focus' and 'blur' events @@ -113,32 +111,23 @@ function applySheldWidth() { r.style.setProperty('--sheldWidth', '800px'); } } -function applyFontScale() { - const sliders = [ - { - sliderId: "#font_scale", - counterId: "#font_scale_counter", - format: (val) => `${val}`, - setValue: (val) => { font_scale = Number(val); }, - } - ]; +async function applyFontScale() { + power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? 1); - sliders.forEach(slider => { - $(document).on("input", slider.sliderId, function () { - const value = $(this).val(); - const formattedValue = slider.format(value); - slider.setValue(value); - $(slider.counterId).text(formattedValue); - console.log('saving'); - saveSettingsDebounced(); - }); - }); + // temporarily unset transition from chat to not make the browser calculate the animation + const chat = document.getElementById('chat'); + const chatTransition = window.getComputedStyle(chat).transition; + chat.style.transition = 'unset'; - power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? chat_styles.DEFAULT); - let r = document.documentElement; - r.style.setProperty('--fontScale', power_user.font_scale); - $("#font_scale_counter").html(power_user.font_scale); + // now apply the font scale to the document + document.documentElement.style.setProperty('--fontScale', power_user.font_scale); + $("#font_scale_counter").text(power_user.font_scale); + + // a small delay to let the browser do the layout redraw + await delay(1); + // set transition back to chat + chat.style.transition = chatTransition; } applyAvatarStyle(); @@ -175,7 +164,7 @@ function loadPowerUserSettings(settings) { power_user.avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? avatar_styles.ROUND); power_user.chat_display = Number(localStorage.getItem(storage_keys.chat_display) ?? chat_styles.DEFAULT); power_user.sheld_width = Number(localStorage.getItem(storage_keys.sheld_width) ?? sheld_width.DEFAULT); - power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? font_scale); + power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? 1); $("#force-pygmalion-formatting-checkbox").prop("checked", power_user.force_pygmalion_formatting); $("#collapse-newlines-checkbox").prop("checked", power_user.collapse_newlines); @@ -290,8 +279,8 @@ $(document).ready(() => { $(`input[name="font_scale"]`).on('input', function (e) { power_user.font_scale = Number(e.target.value); + $("#font_scale_counter").text(power_user.font_scale); localStorage.setItem(storage_keys.font_scale, power_user.font_scale); - /* console.log("font scale: " + power_user.font_scale); */ applyFontScale(); }); From b17f160dfe56e320f560718d5e6a68135e81ca1b Mon Sep 17 00:00:00 2001 From: SillyLossy Date: Tue, 11 Apr 2023 19:20:06 +0300 Subject: [PATCH 013/187] Add missing import --- public/scripts/power-user.js | 1 + 1 file changed, 1 insertion(+) diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js index 101a08a38..38a7c3fa9 100644 --- a/public/scripts/power-user.js +++ b/public/scripts/power-user.js @@ -1,4 +1,5 @@ import { saveSettingsDebounced, characters } from "../script.js"; +import { delay } from "./utils.js"; export { loadPowerUserSettings, From e8909a4f2ffdcf92fb0293dc3075a7886b8a4be0 Mon Sep 17 00:00:00 2001 From: SillyLossy Date: Tue, 11 Apr 2023 19:29:12 +0300 Subject: [PATCH 014/187] Properly save and restore transition value on long slider shifts --- public/scripts/power-user.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js index 38a7c3fa9..eaacf38c3 100644 --- a/public/scripts/power-user.js +++ b/public/scripts/power-user.js @@ -62,6 +62,9 @@ const storage_keys = { font_scale: "TavernAI_font_scale", }; +const chat = document.getElementById('chat'); +const chatTransition = window.getComputedStyle(chat).transition; + //Updated at the bottom of this script document based on 'focus' and 'blur' events let browser_has_focus = true; @@ -117,8 +120,6 @@ async function applyFontScale() { power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? 1); // temporarily unset transition from chat to not make the browser calculate the animation - const chat = document.getElementById('chat'); - const chatTransition = window.getComputedStyle(chat).transition; chat.style.transition = 'unset'; // now apply the font scale to the document From af114e525513b4edb99fbc6795b76d13a6d08539 Mon Sep 17 00:00:00 2001 From: SillyLossy Date: Tue, 11 Apr 2023 19:31:33 +0300 Subject: [PATCH 015/187] Enlarge the tick in checkboxes --- public/style.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/public/style.css b/public/style.css index 842855846..4adcd5724 100644 --- a/public/style.css +++ b/public/style.css @@ -1614,10 +1614,10 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button content: ''; color: var(--white100); position: absolute; - top: 4px; - right: 4px; - bottom: 4px; - left: 4px; + top: 1px; + right: 1px; + bottom: 1px; + left: 1px; background-color: var(--transparent); background-size: contain; background-position: center center; From 8c8c2c40c42bd4558e8793b17547aa74e862e253 Mon Sep 17 00:00:00 2001 From: SillyLossy Date: Tue, 11 Apr 2023 19:42:54 +0300 Subject: [PATCH 016/187] Don't crash the server on failed thumbnail generation --- server.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/server.js b/server.js index d11a48438..c2d3d9c6f 100644 --- a/server.js +++ b/server.js @@ -1887,8 +1887,13 @@ async function generateThumbnail(type, file) { const imageSizes = { 'bg': [160, 90], 'avatar': [96, 144] }; const mySize = imageSizes[type]; - const image = await jimp.read(pathToOriginalFile); - await image.cover(mySize[0], mySize[1]).quality(95).writeAsync(pathToCachedFile); + try { + const image = await jimp.read(pathToOriginalFile); + await image.cover(mySize[0], mySize[1]).quality(95).writeAsync(pathToCachedFile); + } + catch { + return null; + } return pathToCachedFile; } From dee813dfa70e99f1a947ce03ed860eec0a4efabe Mon Sep 17 00:00:00 2001 From: SillyLossy Date: Tue, 11 Apr 2023 22:49:05 +0300 Subject: [PATCH 017/187] Foundation for token streaming (non-functional at the moment) --- public/script.js | 243 ++++++++++++++++++++++++++++----------- public/scripts/openai.js | 39 ++----- 2 files changed, 188 insertions(+), 94 deletions(-) diff --git a/public/script.js b/public/script.js index 149359d01..f818e97b5 100644 --- a/public/script.js +++ b/public/script.js @@ -190,6 +190,7 @@ let exportPopper = Popper.createPopper(document.getElementById('export_button'), }); let dialogueResolve = null; let chat_metadata = {}; +let streamingProcessor = null; const durationSaveEdit = 200; const saveSettingsDebounced = debounce(() => saveSettings(), durationSaveEdit); @@ -1105,6 +1106,86 @@ function appendToStoryString(value, prefix) { return ''; } +function isStreamingEnabled() { + return (main_api == 'openai' && oai_settings.stream_openai); +} + +class StreamingProcessor { + onStartStreaming(text) { + saveReply(type, text); + return (count_view_mes - 1); + } + + onProgressStreaming(messageId, text) { + let processedText = cleanUpMessage(text); + ({isName, processedText} = extractNameFromMessage(processedText, force_name2)); + chat[messageId]['is_name'] = isName; + chat[messageId]['mes'] = processedText; + let formattedText = messageFormating(processedText, chat[messageId].name, chat[messageId].is_system, chat[messageId].force_avatar); + const mesText = $(`#chat .mes[mesid="${messageId}"] .mes_text`); + mesText.empty(); + mesText.append(formattedText); + } + + onFinishStreaming(messageId, text) { + this.onProgressStreaming(messageId, text); + playMessageSound(); + saveChatConditional(); + activateSendButtons(); + showSwipeButtons(); + setGenerationProgress(0); + $('.mes_edit:last').show(); + } + + onErrorStreaming() { + $("#send_textarea").removeAttr('disabled'); + is_send_press = false; + activateSendButtons(); + setGenerationProgress(0); + } + + onStopStreaming() { + this.onErrorStreaming(); + } + + nullStreamingGeneration() { + throw new Error('Generation function for streaming is not hooked up'); + } + + constructor() { + this.result = ""; + this.messageId = -1; + this.isStopped = false; + this.isFinished = false; + this.generator = this.nullStreamingGeneration; + } + + async generate() { + this.messageId = this.onStartStreaming(''); + + for await (const text of this.generator()) { + if (this.isStopped) { + this.onStopStreaming(); + return; + } + + try { + this.result = text; + this.onProgressStreaming(this.messageId, text); + } + catch (err) { + console.error(err); + this.onErrorStreaming(); + this.isStopped = true; + return; + } + } + + this.isFinished = true; + this.onFinishStreaming(this.messageId, this.result); + } +} + async function Generate(type, automatic_trigger, force_name2) { console.log('Generate entered'); setGenerationProgress(0); @@ -1696,10 +1777,18 @@ async function Generate(type, automatic_trigger, force_name2) { } console.log('rungenerate calling API'); + streamingProcessor = new StreamingProcessor(); if (main_api == 'openai') { let prompt = await prepareOpenAIMessages(name2, storyString, worldInfoBefore, worldInfoAfter, extension_prompt, promptBias); - sendOpenAIRequest(prompt).then(onSuccess).catch(onError); + + if (isStreamingEnabled()) { + streamingProcessor.generator = () => sendOpenAIRequest(prompt); + await streamingProcessor.generate(); + } + else { + sendOpenAIRequest(prompt).then(onSuccess).catch(onError); + } } else if (main_api == 'kobold' && horde_settings.use_horde) { generateHorde(finalPromt, generate_data).then(onSuccess).catch(onError); @@ -1729,32 +1818,7 @@ async function Generate(type, automatic_trigger, force_name2) { is_send_press = false; if (!data.error) { //const getData = await response.json(); - var getMessage = ""; - if (main_api == 'kobold' && !horde_settings.use_horde) { - getMessage = data.results[0].text; - } - else if (main_api == 'kobold' && horde_settings.use_horde) { - getMessage = data; - } - else if (main_api == 'textgenerationwebui') { - getMessage = data.data[0]; - if (getMessage == null || data.error) { - activateSendButtons(); - callPopup('

Got empty response from Text generation web UI. Try restarting the API with recommended options.

', 'text'); - return; - } - getMessage = getMessage.substring(finalPromt.length); - } - else if (main_api == 'novel') { - getMessage = data.output; - } - if (main_api == 'openai' || main_api == 'poe') { - getMessage = data; - } - - if (power_user.collapse_newlines) { - getMessage = collapseNewlines(getMessage); - } + let getMessage = extractMessageFromData(data, finalPromt); //Pygmalion run again // to make it continue generating so long as it's under max_amount and hasn't signaled @@ -1776,50 +1840,21 @@ async function Generate(type, automatic_trigger, force_name2) { } //Formating - getMessage = $.trim(getMessage); - if (is_pygmalion) { - getMessage = getMessage.replace(//g, name1); - getMessage = getMessage.replace(//g, name2); - getMessage = getMessage.replace(/You:/g, name1 + ':'); - } - if (getMessage.indexOf(name1 + ":") != -1) { - getMessage = getMessage.substr(0, getMessage.indexOf(name1 + ":")); + getMessage = cleanUpMessage(getMessage); - } - if (getMessage.indexOf('<|endoftext|>') != -1) { - getMessage = getMessage.substr(0, getMessage.indexOf('<|endoftext|>')); - - } - // clean-up group message from excessive generations - if (selected_group) { - getMessage = cleanGroupMessage(getMessage); - } - let this_mes_is_name = true; - if (getMessage.indexOf(name2 + ":") === 0) { - getMessage = getMessage.replace(name2 + ':', ''); - getMessage = getMessage.trimStart(); - } else { - this_mes_is_name = false; - } - if (force_name2) this_mes_is_name = true; + let this_mes_is_name; + ({ this_mes_is_name, getMessage } = extractNameFromMessage(getMessage, force_name2)); //getMessage = getMessage.replace(/^\s+/g, ''); if (getMessage.length > 0) { ({ type, getMessage } = saveReply(type, getMessage, this_mes_is_name)); + activateSendButtons(); playMessageSound(); generate_loop_counter = 0; } else { ++generate_loop_counter; if (generate_loop_counter > MAX_GENERATION_LOOPS) { - callPopup(`Could not extract reply in ${MAX_GENERATION_LOOPS} attempts. Try generating again`, 'text'); - generate_loop_counter = 0; - $("#send_textarea").removeAttr('disabled'); - is_send_press = false; - activateSendButtons(); - setGenerationProgress(0); - showSwipeButtons(); - $('.mes_edit:last').show(); - throw new Error('Generate circuit breaker interruption'); + throwCircuitBreakerError(); } // regenerate with character speech reenforced @@ -1837,7 +1872,6 @@ async function Generate(type, automatic_trigger, force_name2) { console.log('/savechat called by /Generate'); saveChatConditional(); - activateSendButtons(); showSwipeButtons(); setGenerationProgress(0); @@ -1866,6 +1900,89 @@ async function Generate(type, automatic_trigger, force_name2) { console.log('generate ending'); } //generate ends +function extractNameFromMessage(getMessage, force_name2) { + let this_mes_is_name = true; + if (getMessage.indexOf(name2 + ":") === 0) { + getMessage = getMessage.replace(name2 + ':', ''); + getMessage = getMessage.trimStart(); + } else { + this_mes_is_name = false; + } + if (force_name2) + this_mes_is_name = true; + return { this_mes_is_name, getMessage }; +} + +function throwCircuitBreakerError() { + callPopup(`Could not extract reply in ${MAX_GENERATION_LOOPS} attempts. Try generating again`, 'text'); + generate_loop_counter = 0; + $("#send_textarea").removeAttr('disabled'); + is_send_press = false; + activateSendButtons(); + setGenerationProgress(0); + showSwipeButtons(); + $('.mes_edit:last').show(); + throw new Error('Generate circuit breaker interruption'); +} + +function extractMessageFromData(data, finalPromt) { + let getMessage = ""; + + if (main_api == 'kobold' && !horde_settings.use_horde) { + getMessage = data.results[0].text; + } + + if (main_api == 'kobold' && horde_settings.use_horde) { + getMessage = data; + } + + if (main_api == 'textgenerationwebui') { + getMessage = data.data[0]; + if (getMessage == null || data.error) { + activateSendButtons(); + callPopup('

Got empty response from Text generation web UI. Try restarting the API with recommended options.

', 'text'); + return; + } + getMessage = getMessage.substring(finalPromt.length); + } + + if (main_api == 'novel') { + getMessage = data.output; + } + + if (main_api == 'openai' || main_api == 'poe') { + getMessage = data; + } + + return getMessage; +} + +function cleanUpMessage(getMessage) { + if (power_user.collapse_newlines) { + getMessage = collapseNewlines(getMessage); + } + + getMessage = $.trim(getMessage); + if (is_pygmalion) { + getMessage = getMessage.replace(//g, name1); + getMessage = getMessage.replace(//g, name2); + getMessage = getMessage.replace(/You:/g, name1 + ':'); + } + if (getMessage.indexOf(name1 + ":") != -1) { + getMessage = getMessage.substr(0, getMessage.indexOf(name1 + ":")); + + } + if (getMessage.indexOf('<|endoftext|>') != -1) { + getMessage = getMessage.substr(0, getMessage.indexOf('<|endoftext|>')); + + } + // clean-up group message from excessive generations + if (selected_group) { + getMessage = cleanGroupMessage(getMessage); + } + return getMessage; +} + function saveReply(type, getMessage, this_mes_is_name) { if (chat.length && (chat[chat.length - 1]['swipe_id'] === undefined || chat[chat.length - 1]['is_user'])) { @@ -1905,8 +2022,6 @@ function saveReply(type, getMessage, this_mes_is_name) { } //console.log('runGenerate calls addOneMessage'); addOneMessage(chat[chat.length - 1]); - - activateSendButtons(); } return { type, getMessage }; } diff --git a/public/scripts/openai.js b/public/scripts/openai.js index 577a8b787..2ed483089 100644 --- a/public/scripts/openai.js +++ b/public/scripts/openai.js @@ -453,51 +453,30 @@ async function sendOpenAIRequest(openai_msgs_tosend) { } // Unused -function onStream(e, resolve, reject, last_view_mes) { - let end = false; - if (!oai_settings.stream_openai) +async function* onStream(e) { + if (!oai_settings.stream_openai) { return; + } + let response = e.currentTarget.response; + if (response == "{\"error\":true}") { - reject('', 'error'); + throw new Error('error during streaming'); } let eventList = response.split("\n"); let getMessage = ""; + for (let event of eventList) { if (!event.startsWith("data")) continue; if (event == "data: [DONE]") { - chat[chat.length - 1]['mes'] = getMessage; - $("#send_but").css("display", "block"); - $("#loading_mes").css("display", "none"); - saveChat(); - end = true; - break; + return getMessage; } let data = JSON.parse(event.substring(6)); // the first and last messages are undefined, protect against that getMessage += data.choices[0]["delta"]["content"] || ""; - } - - if ($("#chat").children().filter(`[mesid="${last_view_mes}"]`).length == 0) { - chat[chat.length] = {}; - chat[chat.length - 1]['name'] = name2; - chat[chat.length - 1]['is_user'] = false; - chat[chat.length - 1]['is_name'] = false; - chat[chat.length - 1]['send_date'] = Date.now(); - chat[chat.length - 1]['mes'] = ""; - addOneMessage(chat[chat.length - 1]); - } - - let messageText = messageFormating($.trim(getMessage), name1); - $("#chat").children().filter(`[mesid="${last_view_mes}"]`).children('.mes_block').children('.mes_text').html(messageText); - - let $textchat = $('#chat'); - $textchat.scrollTop($textchat[0].scrollHeight); - - if (end) { - resolve(); + yield getMessage; } } From 401535d53959444f23571b4a3694e4f13ee9977c Mon Sep 17 00:00:00 2001 From: RossAscends <124905043+RossAscends@users.noreply.github.com> Date: Wed, 12 Apr 2023 05:31:10 +0900 Subject: [PATCH 018/187] - added color pickers - updated CSS to reflect live changes --- public/index.html | 22 +++++ public/scripts/power-user.js | 76 ++++++++++++++++ public/scripts/toolcool-color-picker.js | 113 ++++++++++++++++++++++++ public/style.css | 39 ++++---- 4 files changed, 231 insertions(+), 19 deletions(-) create mode 100644 public/scripts/toolcool-color-picker.js diff --git a/public/index.html b/public/index.html index da654f3fb..13bd668a8 100644 --- a/public/index.html +++ b/public/index.html @@ -47,6 +47,7 @@ + Tavern.AI @@ -1106,6 +1107,27 @@
+
+
+ Main Text Color +
+ +
+ Italics Text Color +
+ +
+ FastUI BG Color +
+ +
+ Blur Tint Color + +
+ + + +

Power User Options

diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js index eaacf38c3..6069edcb0 100644 --- a/public/scripts/power-user.js +++ b/public/scripts/power-user.js @@ -1,6 +1,7 @@ import { saveSettingsDebounced, characters } from "../script.js"; import { delay } from "./utils.js"; + export { loadPowerUserSettings, collapseNewlines, @@ -43,6 +44,11 @@ let power_user = { sort_field: 'name', sort_order: 'asc', font_scale: 1, + + main_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBodyColor').trim()}`, + italics_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeEmColor').trim()}`, + fastui_bg_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeFastUIBGColor').trim()}`, + blur_tint_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBlurTintColor').trim()}`, }; const storage_keys = { @@ -60,6 +66,11 @@ const storage_keys = { chat_display: "TavernAI_chat_display", sheld_width: "TavernAI_sheld_width", font_scale: "TavernAI_font_scale", + + main_text_color: "TavernAI_main_text_color", + italics_text_color: "TavernAI_italics_text_color", + fastui_bg_color: "TavernAI_fastui_bg_color", + blur_tint_color: "TavernAI_blur_tint_color", }; const chat = document.getElementById('chat'); @@ -116,6 +127,40 @@ function applySheldWidth() { } } +function applyThemeColor(type) { + + const $MainTextColorPicker = document.getElementById('main-text-color-picker'); + const $ItalicsTextColorPicker = document.getElementById('italics-color-picker'); + const $FastUIBGColorPicker = document.getElementById('fastui-bg-color-picker'); + const $BlurTintColorPicker = document.getElementById('blur-tint-color-picker'); + + if (type === 'main') { + $MainTextColorPicker.color = `${power_user.main_text_color}`; + document.documentElement.style.setProperty('--SmartThemeBodyColor', power_user.main_text_color); + console.log($MainTextColorPicker.color); + return + } + + if (type === 'italics') { + $ItalicsTextColorPicker.color = `${power_user.italics_text_color}`; + document.documentElement.style.setProperty('--SmartThemeEmColor', power_user.italics_text_color); + console.log($ItalicsTextColorPicker.color); + return + } + if (type === 'fastUIBG') { + $FastUIBGColorPicker.color = `${power_user.fastui_bg_color}`; + document.documentElement.style.setProperty('--SmartThemeFastUIBGColor', power_user.fastui_bg_color); + console.log($FastUIBGColorPicker.color); + return + } + if (type === 'blurTint') { + $BlurTintColorPicker.color = `${power_user.blur_tint_color}`; + document.documentElement.style.setProperty('--SmartThemeBlurTintColor', power_user.blur_tint_color); + console.log($BlurTintColorPicker.color); + return + } +} + async function applyFontScale() { power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? 1); @@ -137,6 +182,7 @@ switchUiMode(); applyChatDisplay(); applySheldWidth(); applyFontScale(); +applyThemeColor(); // TODO delete in next release function loadFromLocalStorage() { @@ -185,6 +231,12 @@ function loadPowerUserSettings(settings) { $(`input[name="sheld_width"][value="${power_user.sheld_width}"]`).prop("checked", true); $("#font_scale").val(power_user.font_scale); $("#font_scale_counter").html(power_user.font_scale); + + $("#main-text-color-picker").attr('color', power_user.main_text_color); + $("#italics-color-picker").attr('color', power_user.italics_text_color); + $("#fastui-bg-color-picker").attr('color', power_user.fastui_bg_color); + $("#blur-tint-color-picker").attr('color', power_user.blur_tint_color); + $(`#character_sort_order option[data-order="${power_user.sort_order}"][data-field="${power_user.sort_field}"]`).prop("selected", true); sortCharactersList(); } @@ -286,6 +338,30 @@ $(document).ready(() => { applyFontScale(); }); + $("#main-text-color-picker").on('change', (evt) => { + power_user.main_text_color = evt.detail.rgba; + applyThemeColor('main'); + saveSettingsDebounced(); + }); + + $("#italics-color-picker").on('change', (evt) => { + power_user.italics_text_color = evt.detail.rgba; + applyThemeColor('italics'); + saveSettingsDebounced(); + }); + + $("#fastui-bg-color-picker").on('change', (evt) => { + power_user.fastui_bg_color = evt.detail.rgba; + applyThemeColor('fastUIBG'); + saveSettingsDebounced(); + }); + + $("#blur-tint-color-picker").on('change', (evt) => { + power_user.blur_tint_color = evt.detail.rgba; + applyThemeColor('blurTint'); + saveSettingsDebounced(); + }); + $("#play_message_sound").on('input', function () { power_user.play_message_sound = !!$(this).prop('checked'); saveSettingsDebounced(); diff --git a/public/scripts/toolcool-color-picker.js b/public/scripts/toolcool-color-picker.js new file mode 100644 index 000000000..0646c23fd --- /dev/null +++ b/public/scripts/toolcool-color-picker.js @@ -0,0 +1,113 @@ +/* +Tool Cool Color Picker +Version: 1.0.14 +Documentation: https://github.com/mzusin/toolcool-color-picker +Author: Miriam Zusin +License: MIT License +*/ +(() => { + var Mt = Object.defineProperty; var kt = (o, e, t) => e in o ? Mt(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t; var h = (o, e, t) => (kt(o, typeof e != "symbol" ? e + "" : e, t), t); var ot = ":root{--tool-cool-color-picker-btn-bg:#fff;--tool-cool-color-picker-btn-border-color:#cecece;--tool-cool-color-picker-btn-border-color-inner:#626262;--tool-cool-color-picker-btn-border-radius:.25rem;--tool-cool-color-picker-btn-border-radius-inner:0}.color-picker{position:relative}.button{width:3rem;height:1.5rem;padding:.25rem;background:var(--tool-cool-color-picker-btn-bg,#fff);border-radius:var(--tool-cool-color-picker-btn-border-radius,0.25rem);border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-btn-border-color,#cecece);cursor:pointer;box-sizing:border-box}.button-color{display:block;width:100%;height:100%;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-btn-border-color-inner,#626262);background:#000;box-sizing:border-box;border-radius:var(--tool-cool-color-picker-btn-border-radius-inner,0)}"; var it = ":root{--tool-cool-color-picker-popup-bg:#fff;--tool-cool-color-picker-popup-border-color:#cecece;--tool-cool-color-picker-popup-width:214px}.popup{position:absolute;left:0;top:-230px;z-index:50;width:var(--tool-cool-color-picker-popup-width,214px);box-shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px -1px rgba(0,0,0,0.1);padding:.5rem;background:var(--tool-cool-color-picker-popup-bg,#fff);border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-popup-border-color,#cecece);border-radius:.25rem}.popup.right{right:0;left:auto}"; var rt = ".saturation{touch-action:none;overflow:hidden;width:100%;height:9rem;position:relative}.box{width:100%;height:100%;position:absolute}.white{background:linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.black{background:linear-gradient(0,#000,transparent)}.pointer{top:34.902%;left:18.6747%;cursor:pointer;position:absolute;outline:0}.handler{box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgb(0,0,0,0.3),0 0 1px 2px rgb(0,0,0,0.4);-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px);border-radius:100%;width:.25rem;height:.25rem;outline:0}"; var p = "tc-hsv-changed", f = "tc-hue-changed", m = "tc-alpha-changed", D = "tc-button-clicked", nt = o => { !o || document.dispatchEvent(new CustomEvent(D, { detail: { cid: o } })) }, M = (o, e) => { !o || document.dispatchEvent(new CustomEvent(m, { detail: { a: e, cid: o } })) }, b = (o, e, t, i) => { !o || document.dispatchEvent(new CustomEvent(p, { detail: { h: e, s: t, v: i, cid: o } })) }, st = (o, e) => { !o || document.dispatchEvent(new CustomEvent(f, { detail: { h: e, cid: o } })) }; function u(o, e) { St(o) && (o = "100%"); var t = Tt(o); return o = e === 360 ? o : Math.min(e, Math.max(0, parseFloat(o))), t && (o = parseInt(String(o * e), 10) / 100), Math.abs(o - e) < 1e-6 ? 1 : (e === 360 ? o = (o < 0 ? o % e + e : o % e) / parseFloat(String(e)) : o = o % e / parseFloat(String(e)), o) } function k(o) { return Math.min(1, Math.max(0, o)) } function St(o) { return typeof o == "string" && o.indexOf(".") !== -1 && parseFloat(o) === 1 } function Tt(o) { return typeof o == "string" && o.indexOf("%") !== -1 } function _(o) { return o = parseFloat(o), (isNaN(o) || o < 0 || o > 1) && (o = 1), o } function L(o) { return o <= 1 ? "".concat(Number(o) * 100, "%") : o } function C(o) { return o.length === 1 ? "0" + o : String(o) } function at(o, e, t) { return { r: u(o, 255) * 255, g: u(e, 255) * 255, b: u(t, 255) * 255 } } function U(o, e, t) { o = u(o, 255), e = u(e, 255), t = u(t, 255); var i = Math.max(o, e, t), r = Math.min(o, e, t), n = 0, s = 0, a = (i + r) / 2; if (i === r) s = 0, n = 0; else { var d = i - r; switch (s = a > .5 ? d / (2 - i - r) : d / (i + r), i) { case o: n = (e - t) / d + (e < t ? 6 : 0); break; case e: n = (t - o) / d + 2; break; case t: n = (o - e) / d + 4; break; default: break }n /= 6 } return { h: n, s, l: a } } function O(o, e, t) { return t < 0 && (t += 1), t > 1 && (t -= 1), t < 1 / 6 ? o + (e - o) * (6 * t) : t < 1 / 2 ? e : t < 2 / 3 ? o + (e - o) * (2 / 3 - t) * 6 : o } function ht(o, e, t) { var i, r, n; if (o = u(o, 360), e = u(e, 100), t = u(t, 100), e === 0) r = t, n = t, i = t; else { var s = t < .5 ? t * (1 + e) : t + e - t * e, a = 2 * t - s; i = O(a, s, o + 1 / 3), r = O(a, s, o), n = O(a, s, o - 1 / 3) } return { r: i * 255, g: r * 255, b: n * 255 } } function N(o, e, t) { o = u(o, 255), e = u(e, 255), t = u(t, 255); var i = Math.max(o, e, t), r = Math.min(o, e, t), n = 0, s = i, a = i - r, d = i === 0 ? 0 : a / i; if (i === r) n = 0; else { switch (i) { case o: n = (e - t) / a + (e < t ? 6 : 0); break; case e: n = (t - o) / a + 2; break; case t: n = (o - e) / a + 4; break; default: break }n /= 6 } return { h: n, s: d, v: s } } function lt(o, e, t) { o = u(o, 360) * 6, e = u(e, 100), t = u(t, 100); var i = Math.floor(o), r = o - i, n = t * (1 - e), s = t * (1 - r * e), a = t * (1 - (1 - r) * e), d = i % 6, w = [t, s, n, n, a, t][d], x = [a, t, t, s, n, n][d], R = [n, n, a, t, t, s][d]; return { r: w * 255, g: x * 255, b: R * 255 } } function K(o, e, t, i) { var r = [C(Math.round(o).toString(16)), C(Math.round(e).toString(16)), C(Math.round(t).toString(16))]; return i && r[0].startsWith(r[0].charAt(1)) && r[1].startsWith(r[1].charAt(1)) && r[2].startsWith(r[2].charAt(1)) ? r[0].charAt(0) + r[1].charAt(0) + r[2].charAt(0) : r.join("") } function dt(o, e, t, i, r) { var n = [C(Math.round(o).toString(16)), C(Math.round(e).toString(16)), C(Math.round(t).toString(16)), C(Rt(i))]; return r && n[0].startsWith(n[0].charAt(1)) && n[1].startsWith(n[1].charAt(1)) && n[2].startsWith(n[2].charAt(1)) && n[3].startsWith(n[3].charAt(1)) ? n[0].charAt(0) + n[1].charAt(0) + n[2].charAt(0) + n[3].charAt(0) : n.join("") } function Rt(o) { return Math.round(parseFloat(o) * 255).toString(16) } function V(o) { return g(o) / 255 } function g(o) { return parseInt(o, 16) } function ut(o) { return { r: o >> 16, g: (o & 65280) >> 8, b: o & 255 } } var A = { aliceblue: "#f0f8ff", antiquewhite: "#faebd7", aqua: "#00ffff", aquamarine: "#7fffd4", azure: "#f0ffff", beige: "#f5f5dc", bisque: "#ffe4c4", black: "#000000", blanchedalmond: "#ffebcd", blue: "#0000ff", blueviolet: "#8a2be2", brown: "#a52a2a", burlywood: "#deb887", cadetblue: "#5f9ea0", chartreuse: "#7fff00", chocolate: "#d2691e", coral: "#ff7f50", cornflowerblue: "#6495ed", cornsilk: "#fff8dc", crimson: "#dc143c", cyan: "#00ffff", darkblue: "#00008b", darkcyan: "#008b8b", darkgoldenrod: "#b8860b", darkgray: "#a9a9a9", darkgreen: "#006400", darkgrey: "#a9a9a9", darkkhaki: "#bdb76b", darkmagenta: "#8b008b", darkolivegreen: "#556b2f", darkorange: "#ff8c00", darkorchid: "#9932cc", darkred: "#8b0000", darksalmon: "#e9967a", darkseagreen: "#8fbc8f", darkslateblue: "#483d8b", darkslategray: "#2f4f4f", darkslategrey: "#2f4f4f", darkturquoise: "#00ced1", darkviolet: "#9400d3", deeppink: "#ff1493", deepskyblue: "#00bfff", dimgray: "#696969", dimgrey: "#696969", dodgerblue: "#1e90ff", firebrick: "#b22222", floralwhite: "#fffaf0", forestgreen: "#228b22", fuchsia: "#ff00ff", gainsboro: "#dcdcdc", ghostwhite: "#f8f8ff", goldenrod: "#daa520", gold: "#ffd700", gray: "#808080", green: "#008000", greenyellow: "#adff2f", grey: "#808080", honeydew: "#f0fff0", hotpink: "#ff69b4", indianred: "#cd5c5c", indigo: "#4b0082", ivory: "#fffff0", khaki: "#f0e68c", lavenderblush: "#fff0f5", lavender: "#e6e6fa", lawngreen: "#7cfc00", lemonchiffon: "#fffacd", lightblue: "#add8e6", lightcoral: "#f08080", lightcyan: "#e0ffff", lightgoldenrodyellow: "#fafad2", lightgray: "#d3d3d3", lightgreen: "#90ee90", lightgrey: "#d3d3d3", lightpink: "#ffb6c1", lightsalmon: "#ffa07a", lightseagreen: "#20b2aa", lightskyblue: "#87cefa", lightslategray: "#778899", lightslategrey: "#778899", lightsteelblue: "#b0c4de", lightyellow: "#ffffe0", lime: "#00ff00", limegreen: "#32cd32", linen: "#faf0e6", magenta: "#ff00ff", maroon: "#800000", mediumaquamarine: "#66cdaa", mediumblue: "#0000cd", mediumorchid: "#ba55d3", mediumpurple: "#9370db", mediumseagreen: "#3cb371", mediumslateblue: "#7b68ee", mediumspringgreen: "#00fa9a", mediumturquoise: "#48d1cc", mediumvioletred: "#c71585", midnightblue: "#191970", mintcream: "#f5fffa", mistyrose: "#ffe4e1", moccasin: "#ffe4b5", navajowhite: "#ffdead", navy: "#000080", oldlace: "#fdf5e6", olive: "#808000", olivedrab: "#6b8e23", orange: "#ffa500", orangered: "#ff4500", orchid: "#da70d6", palegoldenrod: "#eee8aa", palegreen: "#98fb98", paleturquoise: "#afeeee", palevioletred: "#db7093", papayawhip: "#ffefd5", peachpuff: "#ffdab9", peru: "#cd853f", pink: "#ffc0cb", plum: "#dda0dd", powderblue: "#b0e0e6", purple: "#800080", rebeccapurple: "#663399", red: "#ff0000", rosybrown: "#bc8f8f", royalblue: "#4169e1", saddlebrown: "#8b4513", salmon: "#fa8072", sandybrown: "#f4a460", seagreen: "#2e8b57", seashell: "#fff5ee", sienna: "#a0522d", silver: "#c0c0c0", skyblue: "#87ceeb", slateblue: "#6a5acd", slategray: "#708090", slategrey: "#708090", snow: "#fffafa", springgreen: "#00ff7f", steelblue: "#4682b4", tan: "#d2b48c", teal: "#008080", thistle: "#d8bfd8", tomato: "#ff6347", turquoise: "#40e0d0", violet: "#ee82ee", wheat: "#f5deb3", white: "#ffffff", whitesmoke: "#f5f5f5", yellow: "#ffff00", yellowgreen: "#9acd32" }; function ct(o) { var e = { r: 0, g: 0, b: 0 }, t = 1, i = null, r = null, n = null, s = !1, a = !1; return typeof o == "string" && (o = Pt(o)), typeof o == "object" && (E(o.r) && E(o.g) && E(o.b) ? (e = at(o.r, o.g, o.b), s = !0, a = String(o.r).substr(-1) === "%" ? "prgb" : "rgb") : E(o.h) && E(o.s) && E(o.v) ? (i = L(o.s), r = L(o.v), e = lt(o.h, i, r), s = !0, a = "hsv") : E(o.h) && E(o.s) && E(o.l) && (i = L(o.s), n = L(o.l), e = ht(o.h, i, n), s = !0, a = "hsl"), Object.prototype.hasOwnProperty.call(o, "a") && (t = o.a)), t = _(t), { ok: s, format: o.format || a, r: Math.min(255, Math.max(e.r, 0)), g: Math.min(255, Math.max(e.g, 0)), b: Math.min(255, Math.max(e.b, 0)), a: t } } var Dt = "[-\\+]?\\d+%?", _t = "[-\\+]?\\d*\\.\\d+%?", y = "(?:".concat(_t, ")|(?:").concat(Dt, ")"), G = "[\\s|\\(]+(".concat(y, ")[,|\\s]+(").concat(y, ")[,|\\s]+(").concat(y, ")\\s*\\)?"), F = "[\\s|\\(]+(".concat(y, ")[,|\\s]+(").concat(y, ")[,|\\s]+(").concat(y, ")[,|\\s]+(").concat(y, ")\\s*\\)?"), v = { CSS_UNIT: new RegExp(y), rgb: new RegExp("rgb" + G), rgba: new RegExp("rgba" + F), hsl: new RegExp("hsl" + G), hsla: new RegExp("hsla" + F), hsv: new RegExp("hsv" + G), hsva: new RegExp("hsva" + F), hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/, hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/ }; function Pt(o) { if (o = o.trim().toLowerCase(), o.length === 0) return !1; var e = !1; if (A[o]) o = A[o], e = !0; else if (o === "transparent") return { r: 0, g: 0, b: 0, a: 0, format: "name" }; var t = v.rgb.exec(o); return t ? { r: t[1], g: t[2], b: t[3] } : (t = v.rgba.exec(o), t ? { r: t[1], g: t[2], b: t[3], a: t[4] } : (t = v.hsl.exec(o), t ? { h: t[1], s: t[2], l: t[3] } : (t = v.hsla.exec(o), t ? { h: t[1], s: t[2], l: t[3], a: t[4] } : (t = v.hsv.exec(o), t ? { h: t[1], s: t[2], v: t[3] } : (t = v.hsva.exec(o), t ? { h: t[1], s: t[2], v: t[3], a: t[4] } : (t = v.hex8.exec(o), t ? { r: g(t[1]), g: g(t[2]), b: g(t[3]), a: V(t[4]), format: e ? "name" : "hex8" } : (t = v.hex6.exec(o), t ? { r: g(t[1]), g: g(t[2]), b: g(t[3]), format: e ? "name" : "hex" } : (t = v.hex4.exec(o), t ? { r: g(t[1] + t[1]), g: g(t[2] + t[2]), b: g(t[3] + t[3]), a: V(t[4] + t[4]), format: e ? "name" : "hex8" } : (t = v.hex3.exec(o), t ? { r: g(t[1] + t[1]), g: g(t[2] + t[2]), b: g(t[3] + t[3]), format: e ? "name" : "hex" } : !1))))))))) } function E(o) { return Boolean(v.CSS_UNIT.exec(String(o))) } var l = function () { function o(e, t) { e === void 0 && (e = ""), t === void 0 && (t = {}); var i; if (e instanceof o) return e; typeof e == "number" && (e = ut(e)), this.originalInput = e; var r = ct(e); this.originalInput = e, this.r = r.r, this.g = r.g, this.b = r.b, this.a = r.a, this.roundA = Math.round(100 * this.a) / 100, this.format = (i = t.format) !== null && i !== void 0 ? i : r.format, this.gradientType = t.gradientType, this.r < 1 && (this.r = Math.round(this.r)), this.g < 1 && (this.g = Math.round(this.g)), this.b < 1 && (this.b = Math.round(this.b)), this.isValid = r.ok } return o.prototype.isDark = function () { return this.getBrightness() < 128 }, o.prototype.isLight = function () { return !this.isDark() }, o.prototype.getBrightness = function () { var e = this.toRgb(); return (e.r * 299 + e.g * 587 + e.b * 114) / 1e3 }, o.prototype.getLuminance = function () { var e = this.toRgb(), t, i, r, n = e.r / 255, s = e.g / 255, a = e.b / 255; return n <= .03928 ? t = n / 12.92 : t = Math.pow((n + .055) / 1.055, 2.4), s <= .03928 ? i = s / 12.92 : i = Math.pow((s + .055) / 1.055, 2.4), a <= .03928 ? r = a / 12.92 : r = Math.pow((a + .055) / 1.055, 2.4), .2126 * t + .7152 * i + .0722 * r }, o.prototype.getAlpha = function () { return this.a }, o.prototype.setAlpha = function (e) { return this.a = _(e), this.roundA = Math.round(100 * this.a) / 100, this }, o.prototype.toHsv = function () { var e = N(this.r, this.g, this.b); return { h: e.h * 360, s: e.s, v: e.v, a: this.a } }, o.prototype.toHsvString = function () { var e = N(this.r, this.g, this.b), t = Math.round(e.h * 360), i = Math.round(e.s * 100), r = Math.round(e.v * 100); return this.a === 1 ? "hsv(".concat(t, ", ").concat(i, "%, ").concat(r, "%)") : "hsva(".concat(t, ", ").concat(i, "%, ").concat(r, "%, ").concat(this.roundA, ")") }, o.prototype.toHsl = function () { var e = U(this.r, this.g, this.b); return { h: e.h * 360, s: e.s, l: e.l, a: this.a } }, o.prototype.toHslString = function () { var e = U(this.r, this.g, this.b), t = Math.round(e.h * 360), i = Math.round(e.s * 100), r = Math.round(e.l * 100); return this.a === 1 ? "hsl(".concat(t, ", ").concat(i, "%, ").concat(r, "%)") : "hsla(".concat(t, ", ").concat(i, "%, ").concat(r, "%, ").concat(this.roundA, ")") }, o.prototype.toHex = function (e) { return e === void 0 && (e = !1), K(this.r, this.g, this.b, e) }, o.prototype.toHexString = function (e) { return e === void 0 && (e = !1), "#" + this.toHex(e) }, o.prototype.toHex8 = function (e) { return e === void 0 && (e = !1), dt(this.r, this.g, this.b, this.a, e) }, o.prototype.toHex8String = function (e) { return e === void 0 && (e = !1), "#" + this.toHex8(e) }, o.prototype.toRgb = function () { return { r: Math.round(this.r), g: Math.round(this.g), b: Math.round(this.b), a: this.a } }, o.prototype.toRgbString = function () { var e = Math.round(this.r), t = Math.round(this.g), i = Math.round(this.b); return this.a === 1 ? "rgb(".concat(e, ", ").concat(t, ", ").concat(i, ")") : "rgba(".concat(e, ", ").concat(t, ", ").concat(i, ", ").concat(this.roundA, ")") }, o.prototype.toPercentageRgb = function () { var e = function (t) { return "".concat(Math.round(u(t, 255) * 100), "%") }; return { r: e(this.r), g: e(this.g), b: e(this.b), a: this.a } }, o.prototype.toPercentageRgbString = function () { var e = function (t) { return Math.round(u(t, 255) * 100) }; return this.a === 1 ? "rgb(".concat(e(this.r), "%, ").concat(e(this.g), "%, ").concat(e(this.b), "%)") : "rgba(".concat(e(this.r), "%, ").concat(e(this.g), "%, ").concat(e(this.b), "%, ").concat(this.roundA, ")") }, o.prototype.toName = function () { if (this.a === 0) return "transparent"; if (this.a < 1) return !1; for (var e = "#" + K(this.r, this.g, this.b, !1), t = 0, i = Object.entries(A); t < i.length; t++) { var r = i[t], n = r[0], s = r[1]; if (e === s) return n } return !1 }, o.prototype.toString = function (e) { var t = Boolean(e); e = e != null ? e : this.format; var i = !1, r = this.a < 1 && this.a >= 0, n = !t && r && (e.startsWith("hex") || e === "name"); return n ? e === "name" && this.a === 0 ? this.toName() : this.toRgbString() : (e === "rgb" && (i = this.toRgbString()), e === "prgb" && (i = this.toPercentageRgbString()), (e === "hex" || e === "hex6") && (i = this.toHexString()), e === "hex3" && (i = this.toHexString(!0)), e === "hex4" && (i = this.toHex8String(!0)), e === "hex8" && (i = this.toHex8String()), e === "name" && (i = this.toName()), e === "hsl" && (i = this.toHslString()), e === "hsv" && (i = this.toHsvString()), i || this.toHexString()) }, o.prototype.toNumber = function () { return (Math.round(this.r) << 16) + (Math.round(this.g) << 8) + Math.round(this.b) }, o.prototype.clone = function () { return new o(this.toString()) }, o.prototype.lighten = function (e) { e === void 0 && (e = 10); var t = this.toHsl(); return t.l += e / 100, t.l = k(t.l), new o(t) }, o.prototype.brighten = function (e) { e === void 0 && (e = 10); var t = this.toRgb(); return t.r = Math.max(0, Math.min(255, t.r - Math.round(255 * -(e / 100)))), t.g = Math.max(0, Math.min(255, t.g - Math.round(255 * -(e / 100)))), t.b = Math.max(0, Math.min(255, t.b - Math.round(255 * -(e / 100)))), new o(t) }, o.prototype.darken = function (e) { e === void 0 && (e = 10); var t = this.toHsl(); return t.l -= e / 100, t.l = k(t.l), new o(t) }, o.prototype.tint = function (e) { return e === void 0 && (e = 10), this.mix("white", e) }, o.prototype.shade = function (e) { return e === void 0 && (e = 10), this.mix("black", e) }, o.prototype.desaturate = function (e) { e === void 0 && (e = 10); var t = this.toHsl(); return t.s -= e / 100, t.s = k(t.s), new o(t) }, o.prototype.saturate = function (e) { e === void 0 && (e = 10); var t = this.toHsl(); return t.s += e / 100, t.s = k(t.s), new o(t) }, o.prototype.greyscale = function () { return this.desaturate(100) }, o.prototype.spin = function (e) { var t = this.toHsl(), i = (t.h + e) % 360; return t.h = i < 0 ? 360 + i : i, new o(t) }, o.prototype.mix = function (e, t) { t === void 0 && (t = 50); var i = this.toRgb(), r = new o(e).toRgb(), n = t / 100, s = { r: (r.r - i.r) * n + i.r, g: (r.g - i.g) * n + i.g, b: (r.b - i.b) * n + i.b, a: (r.a - i.a) * n + i.a }; return new o(s) }, o.prototype.analogous = function (e, t) { e === void 0 && (e = 6), t === void 0 && (t = 30); var i = this.toHsl(), r = 360 / t, n = [this]; for (i.h = (i.h - (r * e >> 1) + 720) % 360; --e;)i.h = (i.h + r) % 360, n.push(new o(i)); return n }, o.prototype.complement = function () { var e = this.toHsl(); return e.h = (e.h + 180) % 360, new o(e) }, o.prototype.monochromatic = function (e) { e === void 0 && (e = 6); for (var t = this.toHsv(), i = t.h, r = t.s, n = t.v, s = [], a = 1 / e; e--;)s.push(new o({ h: i, s: r, v: n })), n = (n + a) % 1; return s }, o.prototype.splitcomplement = function () { var e = this.toHsl(), t = e.h; return [this, new o({ h: (t + 72) % 360, s: e.s, l: e.l }), new o({ h: (t + 216) % 360, s: e.s, l: e.l })] }, o.prototype.onBackground = function (e) { var t = this.toRgb(), i = new o(e).toRgb(); return new o({ r: i.r + (t.r - i.r) * t.a, g: i.g + (t.g - i.g) * t.a, b: i.b + (t.b - i.b) * t.a }) }, o.prototype.triad = function () { return this.polyad(3) }, o.prototype.tetrad = function () { return this.polyad(4) }, o.prototype.polyad = function (e) { for (var t = this.toHsl(), i = t.h, r = [this], n = 360 / e, s = 1; s < e; s++)r.push(new o({ h: (i + s * n) % 360, s: t.s, l: t.l })); return r }, o.prototype.equals = function (e) { return this.toRgbString() === new o(e).toRgbString() }, o }(); var $ = () => Math.random().toString(16).slice(2), P = o => Math.round((o + Number.EPSILON) * 100) / 100; var H = .01, q = o => (o < 0 && (o = 0), o > 360 && (o = 360), `hsl(${Math.round(o)}, 100%, 50%)`), z = o => { let e = o.toRgb(); return `linear-gradient(to right, rgba(${e.r},${e.g},${e.b}, 0) 0%, rgba(${e.r},${e.g},${e.b}, 1) 100%)` }, S = o => { let e = o.toRgb(); return `rgba(${e.r}, ${e.g}, ${e.b}, ${P(e.a)})` }, pt = o => { let e = o.toHsl(); return `hsla(${Math.round(e.h)}, ${Math.round(e.s * 100)}%, ${Math.round(e.l * 100)}%, ${P(e.a)})` }, gt = o => { let e = o.toHsv(); return `hsva(${Math.round(e.h)}, ${Math.round(e.s * 100)}%, ${Math.round(e.v * 100)}%, ${P(e.a)})` }, W = o => (o < 0 && (o = 0), o > 1 && (o = 1), `${(-(o * 100) + 100).toFixed(2)}%`), X = o => (o < 0 && (o = 0), o > 1 && (o = 1), `${(o * 100).toFixed(2)}%`), T = o => { o < 0 && (o = 0), o > 360 && (o = 360); let e = o * 100 / 360, t = Math.round(e * 100) / 100; return t < 0 && (t = 0), t > 100 && (t = 100), t }, B = o => 360 * o / 100, I = o => { let e = Number(o) || 0; return e = Math.round(e), e = Math.max(0, e), e = Math.min(255, e), e }, ft = o => { let e = Number(o) || 100; return e = Math.round(e), e = Math.max(0, e), e = Math.min(100, e), e }, c = o => { let e = new l(o || "#000"); return e.setAlpha(e.getAlpha()), e }; var j = class extends HTMLElement { + constructor() { super(); h(this, "cid"); h(this, "$saturation"); h(this, "$color"); h(this, "$pointer"); h(this, "hue", 0); h(this, "saturation", 0); h(this, "value", 0); this.attachShadow({ mode: "open" }), this.onMouseDown = this.onMouseDown.bind(this), this.onMouseUp = this.onMouseUp.bind(this), this.onChange = this.onChange.bind(this), this.onPointerKeyDown = this.onPointerKeyDown.bind(this), this.hsvChanged = this.hsvChanged.bind(this), this.hueChanged = this.hueChanged.bind(this) } static get observedAttributes() { return ["color"] } render(t = !0) { this.$pointer && (this.$pointer.style.left = X(this.saturation), this.$pointer.style.top = W(this.value)), this.$color && this.$color.setAttribute("style", `background: ${q(this.hue)}`), t && b(this.cid, this.hue, this.saturation, this.value) } onChange(t) { if (!this.$saturation) return; let { width: i, height: r, left: n, top: s } = this.$saturation.getBoundingClientRect(); if (i === 0 || r === 0) return; let a = typeof t.clientX == "number" ? t.clientX : t.touches[0].clientX, d = typeof t.clientY == "number" ? t.clientY : t.touches[0].clientY, w = Math.min(Math.max(0, a - n), i), x = Math.min(Math.max(0, d - s), r); this.saturation = w / i, this.value = 1 - x / r, this.render() } onPointerKeyDown(t) { switch (t.key) { case "ArrowLeft": { this.saturation = Math.max(0, this.saturation - H), this.render(); break } case "ArrowRight": { this.saturation = Math.min(1, this.saturation + H), this.render(); break } case "ArrowUp": { this.value = Math.min(1, this.value + H), this.render(); break } case "ArrowDown": { t.preventDefault(), this.value = Math.max(0, this.value - H), this.render(); break } } } onMouseDown(t) { t.preventDefault && t.preventDefault(), this.onChange(t), window.addEventListener("mousemove", this.onChange), window.addEventListener("mouseup", this.onMouseUp), window.setTimeout(() => { var i; (i = this.$pointer) == null || i.focus() }, 0) } onMouseUp() { window.removeEventListener("mousemove", this.onChange), window.removeEventListener("mouseup", this.onChange) } hsvChanged(t) { if (!t || !t.detail || !t.detail.cid || t.detail.cid !== this.cid) return; let i = !1; this.hue !== t.detail.h && (this.hue = t.detail.h, i = !0), this.saturation !== t.detail.s && (this.saturation = t.detail.s, i = !0), this.value !== t.detail.v && (this.value = t.detail.v, i = !0), i && this.render(!1) } hueChanged(t) { !t || !t.detail || !t.detail.cid || t.detail.cid === this.cid && (this.hue = t.detail.h, this.render()) } connectedCallback() { + var s, a, d, w, x; if (!this.shadowRoot) return; this.cid = this.getAttribute("cid") || ""; let i = c(this.getAttribute("color")).toHsv(); this.hue = i.h, this.saturation = i.s, this.value = i.v; let r = W(this.value), n = X(this.saturation); this.shadowRoot.innerHTML = ` + +
+
+
+
+ +
+
+
+
+
+
+ `, this.$saturation = this.shadowRoot.querySelector(".saturation"), this.$color = this.shadowRoot.querySelector(".box"), this.$pointer = this.shadowRoot.querySelector(".pointer"), (s = this.$pointer) == null || s.addEventListener("keydown", this.onPointerKeyDown), (a = this.$saturation) == null || a.addEventListener("mousedown", this.onMouseDown), (d = this.$saturation) == null || d.addEventListener("mouseup", this.onMouseUp), (w = this.$saturation) == null || w.addEventListener("touchmove", this.onChange), (x = this.$saturation) == null || x.addEventListener("touchstart", this.onChange), document.addEventListener(p, this.hsvChanged), document.addEventListener(f, this.hueChanged) + } disconnectedCallback() { var t, i, r, n, s; (t = this.$saturation) == null || t.removeEventListener("mousedown", this.onMouseDown), (i = this.$saturation) == null || i.removeEventListener("mouseup", this.onMouseUp), (r = this.$saturation) == null || r.removeEventListener("touchmove", this.onChange), (n = this.$saturation) == null || n.removeEventListener("touchstart", this.onChange), (s = this.$pointer) == null || s.removeEventListener("keydown", this.onPointerKeyDown), document.removeEventListener(p, this.hsvChanged), document.removeEventListener(f, this.hueChanged) } attributeChangedCallback(t, i, r) { let s = c(r).toHsv(); this.hue = s.h, this.saturation = s.s, this.value = s.v, this.render(!1) } + }, bt = j; var vt = ".hue{overflow:hidden;height:.625rem;margin-bottom:.25rem;margin-top:.25rem;position:relative}.box{width:100%;height:100%;position:absolute}.hue-v{background:linear-gradient(0,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.hue-h{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);width:100%;height:100%;position:relative}.pointer-box{left:87%;position:absolute;outline:0}.handler{background:#fff;box-shadow:0 0 2px rgb(0 0 0 / 60%);box-sizing:border-box;border:1px solid hsla(0,0%,88%,.5);height:8px;margin-top:1px;-webkit-transform:translateX(-4px);transform:translateX(-4px);width:8px;cursor:pointer;outline:0}.pointer-box:focus .handler{border:2px solid hsla(0,0%,88%,1)}"; var Y = class extends HTMLElement { + constructor() { super(); h(this, "cid"); h(this, "$hue"); h(this, "$pointer"); h(this, "hue", 0); this.attachShadow({ mode: "open" }), this.onMouseDown = this.onMouseDown.bind(this), this.onMouseUp = this.onMouseUp.bind(this), this.onChange = this.onChange.bind(this), this.onKeyDown = this.onKeyDown.bind(this), this.hsvChanged = this.hsvChanged.bind(this) } static get observedAttributes() { return ["color"] } render() { this.$pointer && (this.$pointer.style.left = `${T(this.hue)}%`), st(this.cid, this.hue) } hsvChanged(t) { !t || !t.detail || !t.detail.cid || t.detail.cid === this.cid && this.hue !== t.detail.h && (this.hue = t.detail.h, this.render()) } onChange(t) { if (!this.$hue) return; t.preventDefault && t.preventDefault(); let { width: i, left: r } = this.$hue.getBoundingClientRect(); if (i === 0) return; let n = typeof t.clientX == "number" ? t.clientX : t.touches[0].clientX, s = Math.min(Math.max(0, n - r), i), a = Math.min(Math.max(0, Math.round(s * 100 / i)), 100); this.hue = B(a), this.render() } onKeyDown(t) { var i; switch ((i = this.$pointer) == null || i.focus(), t.key) { case "ArrowLeft": { let r = T(this.hue); r = Math.max(0, r - 1), this.hue = B(r), this.render(); break } case "ArrowRight": { let r = T(this.hue); r = Math.min(100, r + 1), this.hue = B(r), this.render(); break } } } onMouseDown(t) { t.preventDefault && t.preventDefault(), this.onChange(t), window.addEventListener("mousemove", this.onChange), window.addEventListener("mouseup", this.onMouseUp), window.setTimeout(() => { var i; (i = this.$pointer) == null || i.focus() }, 0) } onMouseUp() { window.removeEventListener("mousemove", this.onChange), window.removeEventListener("mouseup", this.onChange) } connectedCallback() { + var i, r, n, s, a; if (!this.shadowRoot) return; this.cid = this.getAttribute("cid") || ""; let t = c(this.getAttribute("color")); this.hue = t.toHsv().h, this.shadowRoot.innerHTML = ` + +
+
+
+
+
+ +
+
+
+
+
+
+
+ `, this.$hue = this.shadowRoot.querySelector(".hue"), this.$pointer = this.shadowRoot.querySelector(".pointer-box"), (i = this.$hue) == null || i.addEventListener("mousedown", this.onMouseDown), (r = this.$hue) == null || r.addEventListener("mouseup", this.onMouseUp), (n = this.$hue) == null || n.addEventListener("touchmove", this.onChange), (s = this.$hue) == null || s.addEventListener("touchstart", this.onChange), (a = this.$pointer) == null || a.addEventListener("keydown", this.onKeyDown), document.addEventListener(p, this.hsvChanged) + } disconnectedCallback() { var t, i, r, n, s; (t = this.$hue) == null || t.removeEventListener("mousedown", this.onMouseDown), (i = this.$hue) == null || i.removeEventListener("mouseup", this.onMouseUp), (r = this.$hue) == null || r.removeEventListener("touchmove", this.onChange), (n = this.$hue) == null || n.removeEventListener("touchstart", this.onChange), (s = this.$pointer) == null || s.removeEventListener("keydown", this.onKeyDown), document.removeEventListener(p, this.hsvChanged) } attributeChangedCallback(t, i, r) { let s = c(r).toHsv(); this.hue = s.h, this.render() } + }, mt = Y; var wt = ".alpha{overflow:hidden;height:.625rem;position:relative;background:#fff}.box{width:100%;height:100%;position:absolute}.transparent-bg{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=);overflow:hidden}.pointer-box{left:100%;position:absolute;outline:0}.handler{background:#fff;box-shadow:0 0 2px rgb(0 0 0 / 60%);box-sizing:border-box;border:1px solid hsla(0,0%,88%,.5);height:8px;margin-top:1px;-webkit-transform:translateX(-4px);transform:translateX(-4px);width:8px;cursor:pointer;outline:0}.alpha-pointer-box:focus .alpha-pointer-handler{border:2px solid hsla(0,0%,88%,1)}"; var Q = class extends HTMLElement { + constructor() { super(); h(this, "cid"); h(this, "$alpha"); h(this, "$color"); h(this, "$pointer"); h(this, "alpha", 1); h(this, "hue", 0); h(this, "saturation", 0); h(this, "value", 0); this.attachShadow({ mode: "open" }), this.onMouseDown = this.onMouseDown.bind(this), this.onMouseUp = this.onMouseUp.bind(this), this.onChange = this.onChange.bind(this), this.onKeyDown = this.onKeyDown.bind(this), this.hsvChanged = this.hsvChanged.bind(this), this.hueChanged = this.hueChanged.bind(this), this.alphaChanged = this.alphaChanged.bind(this) } static get observedAttributes() { return ["color"] } render(t = !0) { if (this.$pointer && (this.$pointer.style.left = `${this.alpha * 100}%`), this.$color) { let i = new l({ h: this.hue, s: this.saturation, v: this.value, a: this.alpha }); this.$color.style.background = z(i) } t && M(this.cid, this.alpha) } onChange(t) { if (!this.$alpha) return; t.preventDefault && t.preventDefault(); let { width: i, left: r } = this.$alpha.getBoundingClientRect(); if (i === 0) return; let n = typeof t.clientX == "number" ? t.clientX : t.touches[0].clientX, s = Math.min(Math.max(0, n - r), i), a = Math.min(Math.max(0, s * 100 / i), 100); this.alpha = a / 100, this.render() } onKeyDown(t) { var i; switch ((i = this.$pointer) == null || i.focus(), t.key) { case "ArrowLeft": { let r = this.alpha * 100; r = Math.max(0, r - 1), this.alpha = r / 100, this.render(); break } case "ArrowRight": { let r = this.alpha * 100; r = Math.min(100, r + 1), this.alpha = r / 100, this.render(); break } } } hsvChanged(t) { !t || !t.detail || !t.detail.cid || t.detail.cid === this.cid && (this.saturation = t.detail.h, this.hue = t.detail.s, this.value = t.detail.v, this.render(!1)) } hueChanged(t) { !t || !t.detail || !t.detail.cid || t.detail.cid === this.cid && (this.hue = t.detail.h, this.render(!1)) } alphaChanged(t) { !t || !t.detail || !t.detail.cid || t.detail.cid === this.cid && this.alpha !== t.detail.a && (this.alpha = t.detail.a, this.render()) } onMouseDown(t) { t.preventDefault && t.preventDefault(), this.onChange(t), window.addEventListener("mousemove", this.onChange), window.addEventListener("mouseup", this.onMouseUp), window.setTimeout(() => { var i; (i = this.$pointer) == null || i.focus() }, 0) } onMouseUp() { window.removeEventListener("mousemove", this.onChange), window.removeEventListener("mouseup", this.onChange) } connectedCallback() { + var r, n, s, a, d; if (!this.shadowRoot) return; this.cid = this.getAttribute("cid") || ""; let t = c(this.getAttribute("color")), i = t.toHsv(); this.alpha = i.a, this.hue = i.h, this.saturation = i.s, this.value = i.v, this.shadowRoot.innerHTML = ` + +
+
+
+
+ +
+
+
+
+
+
+
+ `, this.$alpha = this.shadowRoot.querySelector(".alpha"), this.$color = this.shadowRoot.querySelector(".color-bg"), this.$pointer = this.shadowRoot.querySelector(".pointer-box"), (r = this.$alpha) == null || r.addEventListener("mousedown", this.onMouseDown), (n = this.$alpha) == null || n.addEventListener("mouseup", this.onMouseUp), (s = this.$alpha) == null || s.addEventListener("touchmove", this.onChange), (a = this.$alpha) == null || a.addEventListener("touchstart", this.onChange), (d = this.$pointer) == null || d.addEventListener("keydown", this.onKeyDown), document.addEventListener(p, this.hsvChanged), document.addEventListener(f, this.hueChanged), document.addEventListener(m, this.alphaChanged) + } disconnectedCallback() { var t, i, r, n, s; (t = this.$alpha) == null || t.removeEventListener("mousedown", this.onMouseDown), (i = this.$alpha) == null || i.removeEventListener("mouseup", this.onMouseUp), (r = this.$alpha) == null || r.removeEventListener("touchmove", this.onChange), (n = this.$alpha) == null || n.removeEventListener("touchstart", this.onChange), (s = this.$pointer) == null || s.removeEventListener("keydown", this.onKeyDown), document.removeEventListener(p, this.hsvChanged), document.removeEventListener(f, this.hueChanged), document.removeEventListener(m, this.alphaChanged) } attributeChangedCallback(t, i, r) { let s = c(r).toHsv(); this.alpha = s.a, this.hue = s.h, this.saturation = s.s, this.value = s.v, this.render() } + }, xt = Q; var Et = ":root{--tool-cool-color-picker-field-border-color:#cecece;--tool-cool-color-picker-field-label-color:#000}.fields{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:11px;grid-template-columns:60px 35px 35px 35px 34px;text-align:center;display:grid;gap:.25rem;margin-top:.25rem;color:var(--tool-cool-color-picker-field-label-color,#000)}.fields input{background:#fff;border-width:1px;border-style:solid;border-color:var(--tool-cool-color-picker-field-border-color,#cecece);padding:1px 3px;border-radius:2px;color:#000;font-family:inherit;font-size:100%;line-height:inherit;margin:0;box-sizing:border-box}"; var J = class extends HTMLElement { + constructor() { super(); h(this, "cid"); h(this, "color", new l("#000")); h(this, "$hex"); h(this, "$r"); h(this, "$g"); h(this, "$b"); h(this, "$a"); h(this, "hex", ""); h(this, "r", 0); h(this, "g", 0); h(this, "b", 0); h(this, "a", 1); this.attachShadow({ mode: "open" }), this.hsvChanged = this.hsvChanged.bind(this), this.hueChanged = this.hueChanged.bind(this), this.alphaChanged = this.alphaChanged.bind(this), this.onHexChange = this.onHexChange.bind(this), this.render = this.render.bind(this), this.onRedChange = this.onRedChange.bind(this), this.onGreenChange = this.onGreenChange.bind(this), this.onBlueChange = this.onBlueChange.bind(this), this.onAlphaChange = this.onAlphaChange.bind(this), this.onRedKeyDown = this.onRedKeyDown.bind(this), this.onBlueKeyDown = this.onBlueKeyDown.bind(this), this.onGreenKeyDown = this.onGreenKeyDown.bind(this), this.onAlphaKeyDown = this.onAlphaKeyDown.bind(this) } static get observedAttributes() { return ["color"] } hueChanged(t) { if (!t || !t.detail || !t.detail.cid || t.detail.cid !== this.cid) return; let i = this.color.toHsv(); this.color = new l({ h: Number(t.detail.h), s: i.s, v: i.v, a: i.a }), this.render() } alphaChanged(t) { if (!t || !t.detail || !t.detail.cid || t.detail.cid !== this.cid) return; let i = this.color.toRgb(); i.a = t.detail.a, this.color = new l(i), this.render() } hsvChanged(t) { !t || !t.detail || !t.detail.cid || t.detail.cid === this.cid && (this.color = new l({ h: t.detail.h, s: t.detail.s, v: t.detail.v, a: this.color.toHsv().a }), this.render()) } render() { var i, r, n, s, a; let t = this.color.toRgb(); this.r = t.r, this.g = t.g, this.b = t.b, this.a = t.a, this.hex = this.color.toHex(), this.$hex && ((i = this.shadowRoot) == null ? void 0 : i.activeElement) !== this.$hex && (this.$hex.value = this.hex.toUpperCase()), this.$r && ((r = this.shadowRoot) == null ? void 0 : r.activeElement) !== this.$r && (this.$r.value = this.r.toString()), this.$g && ((n = this.shadowRoot) == null ? void 0 : n.activeElement) !== this.$g && (this.$g.value = this.g.toString()), this.$b && ((s = this.shadowRoot) == null ? void 0 : s.activeElement) !== this.$b && (this.$b.value = this.b.toString()), this.$a && ((a = this.shadowRoot) == null ? void 0 : a.activeElement) !== this.$a && (this.$a.value = Math.round(this.a * 100).toString()) } onFieldKeyDown(t, i) { var n, s; let r = this.color.toRgb(); switch (t.key) { case "ArrowUp": { if (i === "r") { this.r = Math.min(255, r.r + 1), r.r = this.r; let a = new l(r).toHsv(); b(this.cid, a.h, a.s, a.v), this.$r.value = this.r.toString(), this.render() } if (i === "g") { this.g = Math.min(255, r.g + 1), r.g = this.g; let a = new l(r).toHsv(); b(this.cid, a.h, a.s, a.v), this.$g.value = this.g.toString(), this.render() } if (i === "b") { this.b = Math.min(255, r.b + 1), r.b = this.b; let a = new l(r).toHsv(); b(this.cid, a.h, a.s, a.v), this.$b.value = this.b.toString(), this.render() } if (i === "a") { this.a = Math.min(100, this.a + .01), this.$a.value = Math.round(this.a * 100).toString(); let a = this.color.toRgb(); a.a = this.a, this.color = new l(a), this.render(), M(this.cid, this.a) } break } case "ArrowDown": { if (i === "r") { this.r = Math.max(0, r.r - 1), r.r = this.r; let a = new l(r).toHsv(); b(this.cid, a.h, a.s, a.v), this.$r.value = this.r.toString(), this.render() } if (i === "g") { this.g = Math.max(0, r.g - 1), r.g = this.g; let a = new l(r).toHsv(); b(this.cid, a.h, a.s, a.v), this.$g.value = this.g.toString(), this.render() } if (i === "b") { this.b = Math.max(0, r.b - 1), r.b = this.b; let a = new l(r).toHsv(); b(this.cid, a.h, a.s, a.v), this.$b.value = this.b.toString(), this.render() } if (i === "a") { this.a = Math.max(0, this.a - .01), this.$a.value = Math.round(this.a * 100).toString(); let a = this.color.toRgb(); a.a = this.a, this.color = new l(a), this.render(), M(this.cid, this.a) } break } case "Escape": { (n = this.shadowRoot) != null && n.activeElement && this.shadowRoot.activeElement.blur(), this.render(); break } case "Enter": { (s = this.shadowRoot) != null && s.activeElement && this.shadowRoot.activeElement.blur(), this.render(); break } } } onRedKeyDown(t) { this.onFieldKeyDown(t, "r") } onGreenKeyDown(t) { this.onFieldKeyDown(t, "g") } onBlueKeyDown(t) { this.onFieldKeyDown(t, "b") } onAlphaKeyDown(t) { this.onFieldKeyDown(t, "a") } onHexChange(t) { let i = t.target; if (i.value.length !== 6) return; let r = new l(`#${i.value}`); if (r.isValid) { this.color = r; let n = this.color.toHsv(); b(this.cid, n.h, n.s, n.v) } } onRedChange(t) { let i = t.target, r = I(i.value); if (r.toString() === i.value) { let n = this.color.toRgb(); n.r = r; let s = new l(n).toHsv(); b(this.cid, s.h, s.s, s.v) } } onGreenChange(t) { let i = t.target, r = I(i.value); if (r.toString() === i.value) { let n = this.color.toRgb(); n.g = r; let s = new l(n).toHsv(); b(this.cid, s.h, s.s, s.v) } } onBlueChange(t) { let i = t.target, r = I(i.value); if (r.toString() === i.value) { let n = this.color.toRgb(); n.b = r; let s = new l(n).toHsv(); b(this.cid, s.h, s.s, s.v) } } onAlphaChange(t) { let i = t.target, r = ft(i.value); r.toString() === i.value && M(this.cid, r / 100) } connectedCallback() { + if (!this.shadowRoot) return; this.cid = this.getAttribute("cid") || "", this.color = c(this.getAttribute("color")); let t = this.color.toRgb(); this.r = t.r, this.g = t.g, this.b = t.b, this.a = t.a, this.hex = this.color.toHex(); let i = $(), r = $(), n = $(), s = $(), a = $(); this.shadowRoot.innerHTML = ` + +
+ + + + + + + + + + + +
+ `, this.$hex = this.shadowRoot.getElementById(`hex-${i}`), this.$r = this.shadowRoot.getElementById(`r-${r}`), this.$g = this.shadowRoot.getElementById(`g-${n}`), this.$b = this.shadowRoot.getElementById(`b-${s}`), this.$a = this.shadowRoot.getElementById(`a-${a}`), document.addEventListener(p, this.hsvChanged), document.addEventListener(f, this.hueChanged), document.addEventListener(m, this.alphaChanged), this.$hex.addEventListener("input", this.onHexChange), this.$r.addEventListener("input", this.onRedChange), this.$g.addEventListener("input", this.onGreenChange), this.$b.addEventListener("input", this.onBlueChange), this.$a.addEventListener("input", this.onAlphaChange), this.$hex.addEventListener("blur", this.render), this.$r.addEventListener("blur", this.render), this.$g.addEventListener("blur", this.render), this.$b.addEventListener("blur", this.render), this.$a.addEventListener("blur", this.render), this.$r.addEventListener("keydown", this.onRedKeyDown), this.$g.addEventListener("keydown", this.onGreenKeyDown), this.$b.addEventListener("keydown", this.onBlueKeyDown), this.$a.addEventListener("keydown", this.onAlphaKeyDown) + } disconnectedCallback() { document.removeEventListener(p, this.hsvChanged), document.removeEventListener(f, this.hueChanged), document.removeEventListener(m, this.alphaChanged), this.$hex.removeEventListener("input", this.onHexChange), this.$r.removeEventListener("input", this.onRedChange), this.$g.removeEventListener("input", this.onGreenChange), this.$b.removeEventListener("input", this.onBlueChange), this.$a.removeEventListener("input", this.onAlphaChange), this.$hex.removeEventListener("blur", this.render), this.$r.removeEventListener("blur", this.render), this.$g.removeEventListener("blur", this.render), this.$b.removeEventListener("blur", this.render), this.$a.removeEventListener("blur", this.render), this.$r.removeEventListener("keydown", this.onRedKeyDown), this.$g.removeEventListener("keydown", this.onGreenKeyDown), this.$b.removeEventListener("keydown", this.onBlueKeyDown), this.$a.removeEventListener("keydown", this.onAlphaKeyDown) } attributeChangedCallback(t, i, r) { this.color = c(r), this.render() } + }, Ct = J; var Z = class extends HTMLElement { + constructor() { super(); h(this, "cid"); h(this, "popupPosition", "left"); h(this, "$popup"); h(this, "color", "#000"); customElements.get("toolcool-color-picker-saturation") || customElements.define("toolcool-color-picker-saturation", bt), customElements.get("toolcool-color-picker-hue") || customElements.define("toolcool-color-picker-hue", mt), customElements.get("toolcool-color-picker-alpha") || customElements.define("toolcool-color-picker-alpha", xt), customElements.get("toolcool-color-picker-fields") || customElements.define("toolcool-color-picker-fields", Ct), this.cid = this.getAttribute("cid") || "", this.prevent = this.prevent.bind(this), this.attachShadow({ mode: "open" }) } static get observedAttributes() { return ["color", "popup-position"] } prevent(t) { t.stopPropagation() } connectedCallback() { + var t, i; !this.shadowRoot || (this.color = this.getAttribute("color") || "#000", this.popupPosition = this.getAttribute("popup-position") || "left", this.shadowRoot.innerHTML = ` + + + `, this.$popup = this.shadowRoot.querySelector(".popup"), (t = this.$popup) == null || t.addEventListener("mousedown", this.prevent), (i = this.$popup) == null || i.classList.toggle("right", this.popupPosition === "right")) + } disconnectedCallback() { var t; (t = this.$popup) == null || t.removeEventListener("mousedown", this.prevent) } attributeChangedCallback(t, i, r) { var n, s, a, d; if (t === "popup-position" && (this.popupPosition = r, this.$popup && this.$popup.classList.toggle("right", this.popupPosition === "right")), t === "color") { this.color = r; let w = (n = this.shadowRoot) == null ? void 0 : n.querySelector("toolcool-color-picker-saturation"), x = (s = this.shadowRoot) == null ? void 0 : s.querySelector("toolcool-color-picker-hue"), R = (a = this.shadowRoot) == null ? void 0 : a.querySelector("toolcool-color-picker-alpha"), et = (d = this.shadowRoot) == null ? void 0 : d.querySelector("toolcool-color-picker-fields"); w && w.setAttribute("color", this.color), x && x.setAttribute("color", this.color), R && R.setAttribute("color", this.color), et && et.setAttribute("color", this.color) } } + }, yt = Z; var Ut = { sm: "0.875rem", md: "1.2rem", lg: "1.5rem", xl: "2.25rem", "2xl": "3rem", "3xl": "3.75rem", "4xl": "4.5rem" }, tt = class extends HTMLElement { + constructor() { super(); h(this, "cid"); h(this, "$button"); h(this, "$buttonColor"); h(this, "$popupBox"); h(this, "stateDefaults", { isPopupVisible: !1, popupPosition: "left", initialColor: new l("#000"), color: new l("#000"), buttonWidth: null, buttonHeight: null, buttonPadding: null }); h(this, "state"); this.cid = $(), customElements.get("toolcool-color-picker-popup") || customElements.define("toolcool-color-picker-popup", yt), this.attachShadow({ mode: "open" }), this.toggle = this.toggle.bind(this), this.onKeyDown = this.onKeyDown.bind(this), this.clickedOutside = this.clickedOutside.bind(this), this.stopPropagation = this.stopPropagation.bind(this), this.hsvChanged = this.hsvChanged.bind(this), this.hueChanged = this.hueChanged.bind(this), this.alphaChanged = this.alphaChanged.bind(this), this.buttonClicked = this.buttonClicked.bind(this), this.formatButtonSize = this.formatButtonSize.bind(this), this.initState() } static get observedAttributes() { return ["color", "popup-position", "button-width", "button-height", "button-padding"] } set color(t) { this.state.color = new l(t) } get color() { return this.state.color } get hex() { return this.state.color.toHexString().toUpperCase() } get hex8() { return this.state.color.toHex8String().toUpperCase() } get rgb() { return this.state.color.toRgbString() } get rgba() { return S(this.state.color) } get hsl() { return this.state.color.toHslString() } get hsla() { return pt(this.state.color) } get hsv() { return this.state.color.toHsvString() } get hsva() { return gt(this.state.color) } get opened() { return this.state.isPopupVisible } set opened(t) { this.state.isPopupVisible = t } initState() { let t = this; this.state = new Proxy(t.stateDefaults, { set(i, r, n, s) { return i[r] = n, r === "isPopupVisible" && t.onPopupVisibilityChange(), r === "popupPosition" && t.onPopupPosChange(), r === "initialColor" && t.onInitialColorChange(), r === "color" && t.onColorChange(), (r === "buttonWidth" || r === "buttonHeight" || r === "buttonPadding") && t.setButtonSize(), !0 } }) } onPopupVisibilityChange() { !this.$popupBox || (this.$popupBox.innerHTML = this.state.isPopupVisible ? `` : "") } onPopupPosChange() { if (!this.$popupBox) return; let t = this.$popupBox.querySelector("toolcool-color-picker-popup"); !t || t.setAttribute("popup-position", this.state.popupPosition) } onInitialColorChange() { var r; let t = S(this.state.color); this.$buttonColor && (this.$buttonColor.style.backgroundColor = t); let i = (r = this.shadowRoot) == null ? void 0 : r.querySelector("toolcool-color-picker-popup"); i && i.setAttribute("color", t) } setButtonSize() { !this.$button || (this.state.buttonWidth && (this.$button.style.width = this.formatButtonSize(this.state.buttonWidth)), this.state.buttonHeight && (this.$button.style.height = this.formatButtonSize(this.state.buttonHeight)), this.state.buttonPadding && (this.$button.style.padding = this.state.buttonPadding)) } onColorChange() { this.$buttonColor && (this.$buttonColor.style.backgroundColor = S(this.state.color)), this.dispatchEvent(new CustomEvent("change", { detail: { hex: this.hex, hex8: this.hex8, rgb: this.rgb, rgba: this.rgba, hsl: this.hsl, hsla: this.hsla, hsv: this.hsv, hsva: this.hsva, color: this.color } })) } hsvChanged(t) { !t || !t.detail || !t.detail.cid || t.detail.cid === this.cid && (this.state.color = new l({ h: t.detail.h, s: t.detail.s, v: t.detail.v, a: this.state.color.toHsv().a })) } hueChanged(t) { if (!t || !t.detail || !t.detail.cid || t.detail.cid !== this.cid) return; let i = this.state.color.toHsv(); this.state.color = new l({ h: t.detail.h, s: i.s, v: i.v, a: i.a }) } alphaChanged(t) { if (!t || !t.detail || !t.detail.cid || t.detail.cid !== this.cid) return; let i = this.state.color.toRgb(); i.a = t.detail.a, this.state.color = new l(i) } buttonClicked(t) { !t || !t.detail || !t.detail.cid || t.detail.cid !== this.cid && (this.state.isPopupVisible = !1) } clickedOutside() { this.state.isPopupVisible = !1 } toggle() { let t = this.state.isPopupVisible; window.setTimeout(() => { this.state.isPopupVisible = !t, nt(this.cid) }, 0) } onKeyDown(t) { t.key === "Escape" && (this.state.isPopupVisible = !1) } stopPropagation(t) { t.stopPropagation() } formatButtonSize(t) { var i; return (i = Ut[t]) != null ? i : t } connectedCallback() { + var t, i, r; !this.shadowRoot || (this.state.initialColor = c(this.getAttribute("color")), this.state.color = c(this.getAttribute("color")), this.state.popupPosition = this.getAttribute("popup-position") || "left", this.state.buttonWidth = this.getAttribute("button-width"), this.state.buttonHeight = this.getAttribute("button-height"), this.state.buttonPadding = this.getAttribute("button-padding"), this.shadowRoot.innerHTML = ` + +
+ +
+
+ `, this.$button = this.shadowRoot.querySelector(".button"), this.$buttonColor = this.shadowRoot.querySelector(".button-color"), (t = this.$button) == null || t.addEventListener("click", this.toggle), (i = this.$button) == null || i.addEventListener("keydown", this.onKeyDown), (r = this.$button) == null || r.addEventListener("mousedown", this.stopPropagation), this.$popupBox = this.shadowRoot.querySelector("[data-popup-box]"), this.setButtonSize(), document.addEventListener("mousedown", this.clickedOutside), document.addEventListener(p, this.hsvChanged), document.addEventListener(f, this.hueChanged), document.addEventListener(m, this.alphaChanged), document.addEventListener(D, this.buttonClicked)) + } disconnectedCallback() { var t, i, r; (t = this.$button) == null || t.removeEventListener("click", this.toggle), (i = this.$button) == null || i.removeEventListener("keydown", this.onKeyDown), (r = this.$button) == null || r.removeEventListener("mousedown", this.stopPropagation), document.removeEventListener("mousedown", this.clickedOutside), document.removeEventListener(p, this.hsvChanged), document.removeEventListener(f, this.hueChanged), document.removeEventListener(m, this.alphaChanged), document.removeEventListener(D, this.buttonClicked) } attributeChangedCallback(t) { switch (t) { case "color": { this.state.initialColor = c(this.getAttribute("color")), this.state.color = c(this.getAttribute("color")), this.onInitialColorChange(); break } case "popup-position": { this.state.popupPosition = this.getAttribute("popup-position") || "left", this.onPopupPosChange(); break } case "button-width": { this.state.buttonWidth = this.getAttribute("button-width"), this.setButtonSize(); break } case "button-height": { this.state.buttonHeight = this.getAttribute("button-height"), this.setButtonSize(); break } case "button-padding": { this.state.buttonPadding = this.getAttribute("button-padding"), this.setButtonSize(); break } } } + }, $t = tt; customElements.get("toolcool-color-picker") || customElements.define("toolcool-color-picker", $t); +})(); diff --git a/public/style.css b/public/style.css index 4adcd5724..6a5fa2337 100644 --- a/public/style.css +++ b/public/style.css @@ -35,6 +35,13 @@ --greyCAIbg: rgb(36, 36, 37); --ivory: rgb(220, 220, 210); + + /*Default Theme, will be changed by ToolCool Color Picker*/ + --SmartThemeBodyColor: rgb(220, 220, 210); + --SmartThemeEmColor: rgb(175, 175, 175); + --SmartThemeFastUIBGColor: rgba(0, 0, 0, 0.9); + --SmartThemeBlurTintColor: rgba(255, 255, 255, 0.5); + --sheldWidth: 800px; /*base variable calculated in rems*/ --fontScale: 1; @@ -42,8 +49,6 @@ } - - * { box-sizing: border-box; -webkit-font-smoothing: antialiased; @@ -70,7 +75,7 @@ body { background-size: cover; font-family: "Noto Sans", "Noto Color Emoji", sans-serif; font-size: var(--mainFontSize); - color: var(--ivory); + color: var(--SmartThemeBodyColor); } ::-webkit-scrollbar { @@ -94,7 +99,6 @@ body { .mes_text li tt { min-width: 80px; display: inline-block; - color: var(--grey50) !important; text-align: right; } @@ -111,7 +115,7 @@ body { .mes_text i, .mes_text em { - color: var(--white60a); + color: var(--SmartThemeEmColor); font-weight: 500; } @@ -173,7 +177,7 @@ code { border-bottom: 1px solid var(--black70a); box-shadow: 0 2px 20px 0 var(--black70a); backdrop-filter: blur(10px); - background-color: var(--black70a); + background-color: var(--SmartThemeBlurTintColor); /* border-radius: 0 0 20px 20px; */ -webkit-backdrop-filter: blur(10px); z-index: 3000; @@ -205,7 +209,7 @@ code { border-left: 1px solid var(--grey30a); border-right: 1px solid var(--grey30a); backdrop-filter: blur(10px); - background-color: var(--black60a); + background-color: var(--SmartThemeBlurTintColor); -webkit-backdrop-filter: blur(10px); text-shadow: #000 0 0 3px; scrollbar-width: thin; @@ -377,7 +381,7 @@ code { padding: 20px 10px 0 10px; margin-top: 0; width: 100%; - color: var(--ivory, white); + color: var(--SmartThemeBodyColor); } .last_mes { @@ -558,7 +562,6 @@ select { font-size: var(--mainFontSize); } - #send_textarea { /* font-size: 1rem; line-height: 1.5rem; @@ -1888,8 +1891,6 @@ input[type="range"]::-webkit-slider-thumb { #anchor_order { margin-bottom: 15px; - color: var(--white70a); - background-color: var(--black50a); } #anchor_checkbox, @@ -2039,7 +2040,7 @@ input[type="range"]::-webkit-slider-thumb { /* margin-top: 40px; */ box-shadow: 0px 0px 20px black; padding: 10px; - background-color: var(--black50a); + background-color: var(--SmartThemeBlurTintColor); border-radius: 20px; overflow-y: auto; border: 1px solid var(--grey30); @@ -2686,7 +2687,7 @@ a { padding: 0; margin-bottom: 5px; backdrop-filter: blur(10px); - background-color: var(--black50a); + background-color: var(--SmartThemeBlurTintColor); -webkit-backdrop-filter: blur(10px); z-index: 3000; border: 0; @@ -2942,7 +2943,7 @@ label[for="extensions_autoconnect"] { .drawer-content { - background-color: var(--black50a); + background-color: var(--SmartThemeBlurTintColor); color: white; border-radius: 20px; padding: 10px; @@ -3004,7 +3005,7 @@ label[for="extensions_autoconnect"] { } .wide50p { - width: 50%; + width: 50% !important; } @@ -3106,7 +3107,7 @@ label[for="extensions_autoconnect"] { .world_entry_thin_controls { flex-direction: column; } - + .world_entry_form_control.world_entry_form_horizontal { flex-direction: column; align-items: flex-start; @@ -3268,7 +3269,7 @@ label[for="extensions_autoconnect"] { body.bubblechat .mes { padding: 10px; border-radius: 20px; - background-color: var(--black30a); + background-color: var(--SmartThemeBlurTintColor); margin-bottom: 5px; border: 1px solid var(--white30a); } @@ -3284,7 +3285,7 @@ body.no-blur * { } #send_form.no-blur-sendtextarea { - background-color: var(--black90a); + background-color: var(--SmartThemeFastUIBGColor); } #send_form.no-connection { @@ -3310,7 +3311,7 @@ body.no-blur #character_popup, body.no-blur #world_popup, body.no-blur #dialogue_popup, body.no-blur #select_chat_popup { - background-color: var(--black90a) !important; + background-color: var(--SmartThemeFastUIBGColor) !important; } /*this part only only applies to iOS devices*/ From c32690579f303982dad8f0c9484c0a1ae4fa3a03 Mon Sep 17 00:00:00 2001 From: RossAscends <124905043+RossAscends@users.noreply.github.com> Date: Wed, 12 Apr 2023 05:45:10 +0900 Subject: [PATCH 019/187] fixed root default for blur tint --- public/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/style.css b/public/style.css index 6a5fa2337..38abdccfe 100644 --- a/public/style.css +++ b/public/style.css @@ -40,7 +40,7 @@ --SmartThemeBodyColor: rgb(220, 220, 210); --SmartThemeEmColor: rgb(175, 175, 175); --SmartThemeFastUIBGColor: rgba(0, 0, 0, 0.9); - --SmartThemeBlurTintColor: rgba(255, 255, 255, 0.5); + --SmartThemeBlurTintColor: rgba(0, 0, 0, 0.5); --sheldWidth: 800px; /*base variable calculated in rems*/ From 2b9e04a32536d98b0b7e45a9cba31a526e68edae Mon Sep 17 00:00:00 2001 From: SillyLossy Date: Tue, 11 Apr 2023 23:59:39 +0300 Subject: [PATCH 020/187] Optimized color pickers --- public/scripts/power-user.js | 28 ++++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js index 6069edcb0..b595faaad 100644 --- a/public/scripts/power-user.js +++ b/public/scripts/power-user.js @@ -1,5 +1,5 @@ import { saveSettingsDebounced, characters } from "../script.js"; -import { delay } from "./utils.js"; +import { delay, debounce } from "./utils.js"; export { @@ -127,38 +127,44 @@ function applySheldWidth() { } } -function applyThemeColor(type) { +async function applyThemeColor(type) { const $MainTextColorPicker = document.getElementById('main-text-color-picker'); const $ItalicsTextColorPicker = document.getElementById('italics-color-picker'); const $FastUIBGColorPicker = document.getElementById('fastui-bg-color-picker'); const $BlurTintColorPicker = document.getElementById('blur-tint-color-picker'); + // temporarily unset transition from chat to not make the browser calculate the animation + chat.style.transition = 'unset'; + if (type === 'main') { $MainTextColorPicker.color = `${power_user.main_text_color}`; document.documentElement.style.setProperty('--SmartThemeBodyColor', power_user.main_text_color); console.log($MainTextColorPicker.color); - return } if (type === 'italics') { $ItalicsTextColorPicker.color = `${power_user.italics_text_color}`; document.documentElement.style.setProperty('--SmartThemeEmColor', power_user.italics_text_color); console.log($ItalicsTextColorPicker.color); - return } + if (type === 'fastUIBG') { $FastUIBGColorPicker.color = `${power_user.fastui_bg_color}`; document.documentElement.style.setProperty('--SmartThemeFastUIBGColor', power_user.fastui_bg_color); console.log($FastUIBGColorPicker.color); - return } + if (type === 'blurTint') { $BlurTintColorPicker.color = `${power_user.blur_tint_color}`; document.documentElement.style.setProperty('--SmartThemeBlurTintColor', power_user.blur_tint_color); console.log($BlurTintColorPicker.color); - return } + + // a small delay to let the browser do the layout redraw + await delay(1); + // set transition back to chat + chat.style.transition = chatTransition; } async function applyFontScale() { @@ -184,6 +190,8 @@ applySheldWidth(); applyFontScale(); applyThemeColor(); +const applyColorDebounced = debounce((type) => applyThemeColor(type), 100); + // TODO delete in next release function loadFromLocalStorage() { power_user.collapse_newlines = localStorage.getItem(storage_keys.collapse_newlines) == "true"; @@ -340,25 +348,25 @@ $(document).ready(() => { $("#main-text-color-picker").on('change', (evt) => { power_user.main_text_color = evt.detail.rgba; - applyThemeColor('main'); + applyColorDebounced('main'); saveSettingsDebounced(); }); $("#italics-color-picker").on('change', (evt) => { power_user.italics_text_color = evt.detail.rgba; - applyThemeColor('italics'); + applyColorDebounced('italics'); saveSettingsDebounced(); }); $("#fastui-bg-color-picker").on('change', (evt) => { power_user.fastui_bg_color = evt.detail.rgba; - applyThemeColor('fastUIBG'); + applyColorDebounced('fastUIBG'); saveSettingsDebounced(); }); $("#blur-tint-color-picker").on('change', (evt) => { power_user.blur_tint_color = evt.detail.rgba; - applyThemeColor('blurTint'); + applyColorDebounced('blurTint'); saveSettingsDebounced(); }); From 6f362a638737cea0af38321129c45d6a25e8944c Mon Sep 17 00:00:00 2001 From: SillyLossy Date: Wed, 12 Apr 2023 00:15:35 +0300 Subject: [PATCH 021/187] Fix loading saving colors --- public/scripts/power-user.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js index b595faaad..a4ed2a1b9 100644 --- a/public/scripts/power-user.js +++ b/public/scripts/power-user.js @@ -348,25 +348,25 @@ $(document).ready(() => { $("#main-text-color-picker").on('change', (evt) => { power_user.main_text_color = evt.detail.rgba; - applyColorDebounced('main'); + applyThemeColor('main'); saveSettingsDebounced(); }); $("#italics-color-picker").on('change', (evt) => { power_user.italics_text_color = evt.detail.rgba; - applyColorDebounced('italics'); + applyThemeColor('italics'); saveSettingsDebounced(); }); $("#fastui-bg-color-picker").on('change', (evt) => { power_user.fastui_bg_color = evt.detail.rgba; - applyColorDebounced('fastUIBG'); + applyThemeColor('fastUIBG'); saveSettingsDebounced(); }); $("#blur-tint-color-picker").on('change', (evt) => { power_user.blur_tint_color = evt.detail.rgba; - applyColorDebounced('blurTint'); + applyThemeColor('blurTint'); saveSettingsDebounced(); }); From a8c31c723b74b451d783cc0fa1aea8cc6ae56e5c Mon Sep 17 00:00:00 2001 From: SillyLossy Date: Wed, 12 Apr 2023 00:49:07 +0300 Subject: [PATCH 022/187] Fix colors overflowing the stack --- public/scripts/power-user.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js index a4ed2a1b9..6420612dd 100644 --- a/public/scripts/power-user.js +++ b/public/scripts/power-user.js @@ -128,7 +128,6 @@ function applySheldWidth() { } async function applyThemeColor(type) { - const $MainTextColorPicker = document.getElementById('main-text-color-picker'); const $ItalicsTextColorPicker = document.getElementById('italics-color-picker'); const $FastUIBGColorPicker = document.getElementById('fastui-bg-color-picker'); @@ -138,25 +137,21 @@ async function applyThemeColor(type) { chat.style.transition = 'unset'; if (type === 'main') { - $MainTextColorPicker.color = `${power_user.main_text_color}`; document.documentElement.style.setProperty('--SmartThemeBodyColor', power_user.main_text_color); console.log($MainTextColorPicker.color); } if (type === 'italics') { - $ItalicsTextColorPicker.color = `${power_user.italics_text_color}`; document.documentElement.style.setProperty('--SmartThemeEmColor', power_user.italics_text_color); console.log($ItalicsTextColorPicker.color); } if (type === 'fastUIBG') { - $FastUIBGColorPicker.color = `${power_user.fastui_bg_color}`; document.documentElement.style.setProperty('--SmartThemeFastUIBGColor', power_user.fastui_bg_color); console.log($FastUIBGColorPicker.color); } if (type === 'blurTint') { - $BlurTintColorPicker.color = `${power_user.blur_tint_color}`; document.documentElement.style.setProperty('--SmartThemeBlurTintColor', power_user.blur_tint_color); console.log($BlurTintColorPicker.color); } @@ -190,8 +185,6 @@ applySheldWidth(); applyFontScale(); applyThemeColor(); -const applyColorDebounced = debounce((type) => applyThemeColor(type), 100); - // TODO delete in next release function loadFromLocalStorage() { power_user.collapse_newlines = localStorage.getItem(storage_keys.collapse_newlines) == "true"; From 2040b8d3ffd3a734fc5cfc26462e32c47cd9996a Mon Sep 17 00:00:00 2001 From: SillyLossy Date: Wed, 12 Apr 2023 01:33:33 +0300 Subject: [PATCH 023/187] OAI streaming --- public/index.html | 3 +- public/script.js | 46 ++++++++++++++++++++------ public/scripts/openai.js | 71 +++++++++++++++++++++------------------- 3 files changed, 74 insertions(+), 46 deletions(-) diff --git a/public/index.html b/public/index.html index 3217e404d..849d1f817 100644 --- a/public/index.html +++ b/public/index.html @@ -607,8 +607,7 @@
- -
+
+ +
+ Displays the message text as soon as it is generated +
+
-

Text generation web UI presets

+

Text Gen WebUI (ooba) presets

Poe.com API Settings

-
- Amount generation + Response Length (tokens) +
+
+ +
+
+ select
- select -
- Context Size + Context Size (tokens) +
+
+ +
+
+ select
- select -
@@ -150,34 +156,34 @@
Temperature
-
- select -
+
+ select +
- Repetition Penalty -
-
- select + Rep. Pen.
+
+ select +
- Repetition Penalty Range -
-
- select + Rep. Pen. Range
+
+ select +
@@ -187,64 +193,62 @@
Temperature
-
- select -
+
+ select +
- Repetition Penalty -
-
- select + Rep. Pen.
+
+ select +
- Encoder Repetition Penalty -
-
- select + Encoder Rep. Pen.
+
+ select +
No Repeat Ngram Size
-
- select -
+
+ select +
Min Length
-
- select -
+
+ select +
-
-
-
+
- OpenAI Context Size -
-
- select + Context Size (tokens)
+
+ select +
-
- OpenAI max response length (in tokens) + Max Response Length (tokens)
-
+
-
Temperature
-
- select -
+
+
+ select +
-
Frequency Penalty
-
- select -
+
+
+ select +
-
Presence Penalty
-
- select -
+
+ select +
-
-
- Top P Sampling -
-
- select + Top P
+
+ select +
- Top A Sampling -
-
- select + Top A
+
+ select +
- Top K Sampling -
-
- select + Top K
+
+ select +
Typical Sampling
-
- select -
+
+ select +
Tail Free Sampling
-
- select -
+
+ select +
- Repetition Penalty Slope -
-
- select + Rep. Pen. Slope
+
+ select +