Big avatars style

public/index.html

@@ -194,9 +194,10 @@
                     <input id="your_name" name="your_name" class="text_pole" maxlength="35" value="" autocomplete="off"><br>
                     <input id="your_name_button" class="menu_button" type="submit" title="Click to set a new User Name (reloads page)" value="Change Name">
                 </form>
+                <div class="ui-settings">
                     <div class="range-block">
                         <div class="range-block-title">
-                        <h4>Fast UI Mode (no background blur)</h4>
+                            <h4>Fast UI Mode<br>(no background blur)</h4>
                         </div>
                         <div class="range-block-range">
                             <label for="fast_ui_mode" class="checkbox_label">
@@ -205,6 +206,22 @@
                             </label>
                         </div>
                     </div>
+                    <div id="avatars-style" class="range-block">
+                        <div class="range-block-title">
+                            <h4>Avatars Style</h4>
+                        </div>
+                        <div class="range-block-range">
+                            <label>
+                                <input name="avatar_style" type="radio" value="0" />
+                                Round
+                            </label>
+                            <label>
+                                <input name="avatar_style" type="radio" value="1" />
+                                Rectangular
+                            </label>
+                        </div>
+                    </div>
+                </div>
                 <div id="power-user-options-block">
                     <h3>Power User Options</h3>
                     <div id="power-user-option-checkboxes">

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();
+    });
 });

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 {

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);