diff --git a/public/index.html b/public/index.html
index 3c04f4e6b..1f1557c03 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1094,6 +1094,10 @@
+
+
diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js
index cd4d6baa3..285785e6c 100644
--- a/public/scripts/power-user.js
+++ b/public/scripts/power-user.js
@@ -50,6 +50,8 @@ let power_user = {
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()}`,
+
+ waifuMode: false,
};
const storage_keys = {
@@ -73,6 +75,8 @@ const storage_keys = {
fastui_bg_color: "TavernAI_fastui_bg_color",
blur_tint_color: "TavernAI_blur_tint_color",
blur_strength: "TavernAI_blur_strength",
+
+ waifuMode: "TavernAI_waifuMode",
};
const chat = document.getElementById('chat');
@@ -108,6 +112,12 @@ function switchUiMode() {
$("#send_form").toggleClass("no-blur-sendtextarea", power_user.fast_ui_mode);
}
+function switchWaifuMode() {
+ const waifuMode = localStorage.getItem(storage_keys.waifuMode);
+ power_user.waifuMode = waifuMode === null ? true : waifuMode == "true";
+ $("body").toggleClass("waifuMode", power_user.waifuMode);
+}
+
function applyAvatarStyle() {
power_user.avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? avatar_styles.ROUND);
$("body").toggleClass("big-avatars", power_user.avatar_style === avatar_styles.RECTANGULAR);
@@ -204,6 +214,7 @@ applySheldWidth();
applyFontScale();
applyBlurStrength();
applyThemeColor();
+switchWaifuMode()
// TODO delete in next release
function loadFromLocalStorage() {
@@ -229,7 +240,9 @@ function loadPowerUserSettings(settings) {
// These are still local storage
const fastUi = localStorage.getItem(storage_keys.fast_ui_mode);
+ const waifuMode = localStorage.getItem(storage_keys.waifuMode);
power_user.fast_ui_mode = fastUi === null ? true : fastUi == "true";
+ power_user.waifuMode = waifuMode === null ? true : waifuMode == "true";
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);
@@ -245,6 +258,7 @@ function loadPowerUserSettings(settings) {
$("#always-force-name2-checkbox").prop("checked", power_user.always_force_name2);
$("#custom_chat_separator").val(power_user.custom_chat_separator);
$("#fast_ui_mode").prop("checked", power_user.fast_ui_mode);
+ $("#waifuMode").prop("checked", power_user.waifuMode);
$("#multigen").prop("checked", power_user.multigen);
$("#play_message_sound").prop("checked", power_user.play_message_sound);
$("#play_sound_unfocused").prop("checked", power_user.play_sound_unfocused);
@@ -338,6 +352,12 @@ $(document).ready(() => {
switchUiMode();
});
+ $("#waifuMode").change(function () {
+ power_user.waifuMode = $(this).prop("checked");
+ localStorage.setItem(storage_keys.waifuMode, power_user.waifuMode);
+ switchWaifuMode();
+ });
+
$(`input[name="avatar_style"]`).on('input', function (e) {
power_user.avatar_style = Number(e.target.value);
localStorage.setItem(storage_keys.avatar_style, power_user.avatar_style);
diff --git a/public/style.css b/public/style.css
index deded3e39..a6b6bc35c 100644
--- a/public/style.css
+++ b/public/style.css
@@ -3224,6 +3224,7 @@ toolcool-color-picker {
#world_popup,
#send_form {
border: 1px solid var(--grey30);
+ backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
}
#chat {
@@ -3255,6 +3256,7 @@ toolcool-color-picker {
border-bottom: 1px solid var(--grey30);
border-radius: 0 0 20px 20px;
top: 40px;
+ backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
}
#right-nav-panel h4 {
@@ -3365,6 +3367,51 @@ body.no-blur #select_chat_popup {
background-color: var(--SmartThemeFastUIBGColor) !important;
}
+/* wAIfu mode*/
+
+body.waifuMode .expression-holder {
+ max-height: 90vh;
+ max-width: unset;
+ width: 100%;
+ position: fixed;
+ left: 0;
+ right: 0;
+ bottom: 100px;
+ padding-left: 10px;
+ padding-right: 10px;
+ text-align: center;
+ filter: drop-shadow(2px 2px 2px #51515199);
+ transition: 500ms;
+ z-index: 1;
+}
+
+body.waifuMode img.expression {
+ height: 70vh;
+ max-width: 100%;
+ max-height: 90vh;
+ vertical-align: bottom;
+}
+
+body.waifuMode #sheld {
+ display: grid;
+ grid-template-rows: 30vh min-content;
+ height: calc(100svh - 42px);
+ overflow-x: hidden;
+ max-width: 800px;
+ position: absolute;
+ left: 0;
+ right: 0;
+ /* bottom: 0; */
+ top: 41px;
+ margin: 0 auto;
+ z-index: 2;
+ align-content: end;
+}
+
+body.waifuMode #chat {
+ flex-direction: column-reverse;
+}
+
/*this part only only applies to iOS devices*/
@supports (-webkit-touch-callout: none) {
body {
@@ -3403,7 +3450,7 @@ body.no-blur #select_chat_popup {
max-width: unset;
min-height: unset;
max-height: unset;
-
+ backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
left: 0;
right: 0;
top: 0;