+
+
+
Fast UI Mode
(no background blur)
+
+
+
+
-
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);