diff --git a/public/index.html b/public/index.html index d0685fa93..008094644 100644 --- a/public/index.html +++ b/public/index.html @@ -194,15 +194,32 @@
-
-
-

Fast UI Mode (no background blur)

+
+
+
+

Fast UI Mode
(no background blur)

+
+
+ +
-
- +
+
+

Avatars Style

+
+
+ + +
diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js index d896b212c..226688a3c 100644 --- a/public/scripts/power-user.js +++ b/public/scripts/power-user.js @@ -21,6 +21,7 @@ let disable_personality_formatting = false; let always_force_name2 = false; let fast_ui_mode = false; let multigen = false; +let avatar_style = 0; let custom_chat_separator = ''; const storage_keys = { @@ -34,6 +35,7 @@ const storage_keys = { custom_chat_separator: "TavernAI_custom_chat_separator", fast_ui_mode: "TavernAI_fast_ui_mode", multigen: "TavernAI_multigen", + avatar_style: "TavernAI_avatar_style", }; function collapseNewlines(x) { @@ -50,6 +52,19 @@ function switchUiMode() { } } +function applyAvatarStyle() { + avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? 0); + switch (avatar_style) { + case 0: + $("body").removeClass("big-avatars"); + break; + case 1: + $("body").addClass("big-avatars"); + break; + } +} + +applyAvatarStyle(); switchUiMode(); function loadPowerUserSettings() { @@ -63,6 +78,7 @@ function loadPowerUserSettings() { custom_chat_separator = localStorage.getItem(storage_keys.custom_chat_separator); fast_ui_mode = localStorage.getItem(storage_keys.fast_ui_mode) == "true"; multigen = localStorage.getItem(storage_keys.multigen) == "true"; + avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? 0); $("#force-pygmalion-formatting-checkbox").prop("checked", force_pygmalion_formatting); $("#collapse-newlines-checkbox").prop("checked", collapse_newlines); @@ -74,6 +90,7 @@ function loadPowerUserSettings() { $("#custom_chat_separator").val(custom_chat_separator); $("#fast_ui_mode").prop("checked", fast_ui_mode); $("#multigen").prop("checked", multigen); + $(`input[name="avatar_style"][value="${avatar_style}"]`).prop("checked", true); } $(document).ready(() => { @@ -130,4 +147,10 @@ $(document).ready(() => { multigen = $(this).prop("checked"); localStorage.setItem(storage_keys.multigen, multigen); }); + + $(`input[name="avatar_style"]`).on('input', function (e) { + avatar_style = Number(e.target.value); + localStorage.setItem(storage_keys.avatar_style, avatar_style); + applyAvatarStyle(); + }); }); \ No newline at end of file diff --git a/public/style.css b/public/style.css index bdb827b43..c99216358 100644 --- a/public/style.css +++ b/public/style.css @@ -402,6 +402,22 @@ margin-top:5px; align-items: flex-end; } +.ui-settings { + display: flex; + flex-direction: row; + align-items: flex-end; + column-gap: 10px; +} + +.ui-settings > div { + flex: 1; +} + +#avatars-style .range-block-range { + display: flex; + flex-direction: column; +} + .avatar { width: 50px; height: 50px; @@ -418,6 +434,43 @@ margin-top:5px; box-shadow: 0 0 5px var(--black50a); } +body.big-avatars .avatar { + width: 60px; + height: 90px; + border-style: none; + display: flex; + justify-content: center; + align-items: center; + overflow: visible; + border-radius: 5px; + box-shadow: 0 0 5px var(--black50a); +} + +body.big-avatars #user_avatar_block .avatar { + height: 90px; + width: 60px; + border-radius: 5px; +} + +body.big-avatars #user_avatar_block .avatar img { + height: 90px; + width: 60px; +} + +body.big-avatars .last_mes { + grid-template-rows: [avatar-NameMesText-edit] 80px [swipes] auto; + grid-template-columns: [checkbox] fit-content(60px) [avatar-leftswipe] fit-content(60px) [name-mestext] auto [edit-rightswipe] 30px !important; +} + +body.big-avatars .avatar img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + border: 1px solid var(--black30a); + border-radius: 10px; +} + .mes_block { padding-top: 0; padding-left: 10px; @@ -1552,12 +1605,12 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):checked::after cursor: pointer; width: 64px; height: 64px; - border: 2px solid rgba(255,255,255,0.7); + outline: 2px solid rgba(255,255,255,0.7); border-radius: 50%; } #user_avatar_block .avatar:not(.selected) { - border: 2px solid transparent; + outline: 2px solid transparent; } #user_avatar_block .avatar img { diff --git a/server.js b/server.js index 61ec140aa..c214374a6 100644 --- a/server.js +++ b/server.js @@ -1702,7 +1702,7 @@ async function generateThumbnail(type, file) { return null; } - const imageSizes = { 'bg': [160, 90], 'avatar': [96, 96] }; + const imageSizes = { 'bg': [160, 90], 'avatar': [96, 144] }; const mySize = imageSizes[type]; const image = await jimp.read(pathToOriginalFile);