CSS tweaks:

- resized addbg3.png from 1600x1600 to 160x90
- added trans grey border to right nav, to match chat and send_form
- reduced opacity of chat/sendform >> 70% to 50%
- reduced blur on chat/sendform >> 20px to 10px
- added 1px gap between chat and right nav to match chat/sendform
- fixed add_bg button being too tall and skewing top bg row on mobile
- 2 new utility classes no-border and no-shadow
- made drawer heights match chat+sendform height on mobile

/img cleanup:
- removed unused files from /img
- resized large UI-only PNG files to 100px x 100px
- replaced fluffy.png with a custom PNG 'ai4.png'
- total /img footprint is now 615kb  (compared to 3.5MB in main tai 1.3)
-- /default-expressions 509kb
-- everything else 106kb

public/index.html

@@ -71,10 +71,10 @@
             <div class="drawer-content closedDrawer">
                 <div class="flex-container">
                     <div id="bg_menu_content">
-                        <form id="form_bg_download" action="javascript:void(null);" method="post" enctype="multipart/form-data">
+                        <form id="form_bg_download" class="bg_example no-border no-shadow" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                             <label class="input-file">
                                 <input type="file" id="add_bg_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
-                                <span class="bg_example_but_load"><img src='img/addbg3.png'></span>
+                                <div class="bg_example no-border no-shadow add_bg_but" style="background-image: url('/img/addbg3.png');"></div>
                             </label>
                         </form>
                     </div>
@@ -828,7 +828,7 @@
                             </div>
                             <div id="avatar_div" class="avatar_div">
                                 <div id="avatar_div_div" class="avatar">
-                                    <img id="avatar_load_preview" src="img/fluffy.png" alt="avatar">
+                                    <img id="avatar_load_preview" src="img/ai4.png" alt="avatar">
                                 </div>
                                 <label for="add_avatar_button" class="menu_button" title="Click to select a new avatar for this character">
                                     <input type="file" id="add_avatar_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">

public/script.js

@@ -148,7 +148,7 @@ let characters = [];
 let this_chid;
 let active_character;
 let backgrounds = [];
-const default_avatar = "img/fluffy.png";
+const default_avatar = "img/ai4.png";
 const system_avatar = "img/five.png";
 let is_colab = false;
 let is_checked_colab = false;
@@ -1606,7 +1606,7 @@ async function Generate(type, automatic_trigger, force_name2) {//encode("dsfs").
 
                             if (selected_group) {
                                 console.log('entering chat update for groups');
-                                let avatarImg = 'img/fluffy.png';
+                                let avatarImg = 'img/ai4.png';
                                 if (characters[this_chid].avatar != 'none') {
                                     avatarImg = `characters/${characters[this_chid].avatar}?${Date.now()}`;
                                 }

public/scripts/RossAscends-mods.js

@@ -191,14 +191,14 @@ function RestoreNavTab() {
 function RA_checkOnlineStatus() {
 	if (online_status == "no_connection") {
 		$("#send_textarea").attr("placeholder", "Not connected to API!"); //Input bar placeholder tells users they are not connected
-		$("#send_form").css("background-color", "rgba(100,0,0,0.7)"); //entire input form area is red when not connected
+		$("#send_form").css("background-color", "rgba(100,0,0,0.5)"); //entire input form area is red when not connected
 		$("#send_but").css("display", "none"); //send button is hidden when not connected;
 		$("#API-status-top").addClass("redOverlayGlow");
 		connection_made = false;
 	} else {
 		if (online_status !== undefined && online_status !== "no_connection") {
 			$("#send_textarea").attr("placeholder", "Type a message..."); //on connect, placeholder tells user to type message
-			$("#send_form").css("background-color", "rgba(0,0,0,0.7)"); //on connect, form BG changes to transprent black
+			$("#send_form").css("background-color", "rgba(0,0,0,0.5)"); //on connect, form BG changes to transprent black
 			$("#API-status-top").removeClass("redOverlayGlow");
 			connection_made = true;
 			retry_delay = 100;

public/style.css

@@ -196,8 +196,8 @@ margin-top:5px;
     border-bottom: 1px solid var(--grey30a);
     border-left: 1px solid var(--grey30a);
     border-right: 1px solid var(--grey30a);
-    backdrop-filter: blur(20px);
-    background-color: var(--black70a);
+    backdrop-filter: blur(10px);
+    background-color: var(--black50a);
     -webkit-backdrop-filter: blur(10px);
     text-shadow: #000 0 0 3px;
     scrollbar-width: thin;
@@ -238,7 +238,7 @@ margin-top:5px;
 
     border-radius: 0 0 20px 20px;
     background-color: var(--crimson70a);
-    backdrop-filter: blur(20px);
+    backdrop-filter: blur(10px);
 }
 
 #send_but_sheld {
@@ -949,28 +949,21 @@ input[type=search]:focus::-webkit-search-cancel-button {
     box-shadow: 0 0 0 2pt black;
 }
 
-#form_bg_download {
-    width: 23%;
-    margin: 5px;
-}
+.no-border {border:none !important;}
+.no-shadow {box-shadow: none !important;}
 
-.bg_example_but_load {
-}
-
-.bg_example_but_load img {
+.add_bg_but {
     cursor: pointer;
-    height: 100px;
-    object-fit: contain;
-    margin: auto auto;
-    border-radius: 10px;
     opacity: 0.1;
+    height: 100%;
+    width: 100%;
 }
 
-#add_bg_button {
-}
 .input-file {
     display: flex;
     justify-content: center;
+    align-items: center;
+    height: 100%;
 }
 
 
@@ -2514,7 +2507,7 @@ a {
 /* ############################################################# */
 
 #right-nav-panel {
-    width: calc((100vw - 800px) /2);
+    width: calc((100vw - 802px) / 2);
     min-width: 450px;
     height: calc(100vh - 55px);
     position: fixed;
@@ -2524,12 +2517,13 @@ a {
     left: auto;
     padding: 0 10px;
     backdrop-filter: blur(10px);
-    background-color: var(--black70a);
+    background-color: var(--black50a);
     -webkit-backdrop-filter: blur(10px);
     z-index: 3000;
     white-space: nowrap;
     border: 0;
-    border-left: 1px solid var(--black30a);
+    border-left: 1px solid var(--grey30a);
+    border-bottom: 1px solid var(--grey30a);
     max-height: 100vh;
     box-shadow: none;
     border-radius: 0 0 0 20px;
@@ -2794,11 +2788,11 @@ filter: invert(20%) sepia(100%) saturate(2518%) hue-rotate(353deg) brightness(93
     color: white;
     border-radius: 20px;
     padding: 10px;
-    border: 1px solid grey;
+    border: 1px solid var(--grey30a);
     box-shadow: 0 0 20px black;
     /* min-width:400px; */
     overflow-y: scroll;
-    max-height: 90vh;
+    max-height: calc(100vh - 70px);
     display: none;
     position: absolute;
     left:0;
@@ -2855,14 +2849,15 @@ filter: invert(20%) sepia(100%) saturate(2518%) hue-rotate(353deg) brightness(93
     .mes-text {padding-right: 25px;}
 
     #right-nav-panel {        
-        height: calc(100vh - 55px);
-        width: calc(100vw - 5px);
+        height: calc(100vh - 70px);
         min-width: 0px;
-        width: calc(100vw - 15px);
-        min-height: calc(100vh - 40px);
-        min-height: calc(100vh - 40px);
+        width: calc(100vw - 10px);
         left: 5px !important;
         overflow-y: hidden;
+        border-left: 1px solid var(--grey30a);
+        border-right: 1px solid var(--grey30a);
+        border-bottom: 1px solid var(--grey30a);
+        border-radius: 0 0 20px 20px;
         /* border: 0;*/
     }
 

server.js

@@ -572,7 +572,7 @@ app.post("/createcharacter", urlencodedParser, function (request, response) {
         var char = charaFormatData(request.body);//{"name": request.body.ch_name, "description": request.body.description, "personality": request.body.personality, "first_mes": request.body.first_mes, "avatar": 'none', "chat": Date.now(), "last_mes": '', "mes_example": ''};
         char = JSON.stringify(char);
         if (!filedata) {
-            charaWrite('./public/img/fluffy.png', char, request.body.ch_name, response);
+            charaWrite('./public/img/ai4.png', char, request.body.ch_name, response);
         } else {
 
             img_path = "./uploads/";
@@ -924,23 +924,23 @@ app.post('/getsettings', jsonParser, (request, response) => { //Wintermute's cod
 
     //OpenAI
     const files3 = fs
-    .readdirSync('public/OpenAI Settings')
-    .sort(
-      (a, b) =>
-        new Date(fs.statSync(`public/OpenAI Settings/${b}`).mtime) -
-        new Date(fs.statSync(`public/OpenAI Settings/${a}`).mtime)
-    );
-    
-    files3.forEach(item => {
-    const file3 = fs.readFileSync(
-        `public/OpenAI Settings/${item}`,
-        'utf8',
-        (err, data) => {
-            if (err) return response.sendStatus(500);
+        .readdirSync('public/OpenAI Settings')
+        .sort(
+            (a, b) =>
+                new Date(fs.statSync(`public/OpenAI Settings/${b}`).mtime) -
+                new Date(fs.statSync(`public/OpenAI Settings/${a}`).mtime)
+        );
 
-            return data;
-        }
-    );
+    files3.forEach(item => {
+        const file3 = fs.readFileSync(
+            `public/OpenAI Settings/${item}`,
+            'utf8',
+            (err, data) => {
+                if (err) return response.sendStatus(500);
+
+                return data;
+            }
+        );
 
         openai_settings.push(file3);
         openai_setting_names.push(item.replace(/\.[^/.]+$/, ''));
@@ -1244,14 +1244,14 @@ app.post("/importcharacter", urlencodedParser, async function (request, response
                     png_name = getPngName(jsonData.name);
                     let char = { "name": jsonData.name, "description": jsonData.description ?? '', "personality": jsonData.personality ?? '', "first_mes": jsonData.first_mes ?? '', "avatar": 'none', "chat": humanizedISO8601DateTime(), "mes_example": jsonData.mes_example ?? '', "scenario": jsonData.scenario ?? '', "create_date": humanizedISO8601DateTime(), "talkativeness": jsonData.talkativeness ?? 0.5 };
                     char = JSON.stringify(char);
-                    charaWrite('./public/img/fluffy.png', char, png_name, response, { file_name: png_name });
+                    charaWrite('./public/img/ai4.png', char, png_name, response, { file_name: png_name });
                 } else if (jsonData.char_name !== undefined) {//json Pygmalion notepad
                     jsonData.char_name = sanitize(jsonData.char_name);
 
                     png_name = getPngName(jsonData.char_name);
                     let char = { "name": jsonData.char_name, "description": jsonData.char_persona ?? '', "personality": '', "first_mes": jsonData.char_greeting ?? '', "avatar": 'none', "chat": humanizedISO8601DateTime(), "mes_example": jsonData.example_dialogue ?? '', "scenario": jsonData.world_scenario ?? '', "create_date": humanizedISO8601DateTime(), "talkativeness": jsonData.talkativeness ?? 0.5 };
                     char = JSON.stringify(char);
-                    charaWrite('./public/img/fluffy.png', char, png_name, response, { file_name: png_name });
+                    charaWrite('./public/img/ai4.png', char, png_name, response, { file_name: png_name });
                 } else {
                     console.log('Incorrect character format .json');
                     response.send({ error: true });
@@ -1638,7 +1638,7 @@ app.get('/thumbnail', jsonParser, async function (request, response) {
     const pathToCachedFile = path.join(getThumbnailFolder(type), file);
 
     if (fs.existsSync(pathToCachedFile)) {
-        return response.sendFile(pathToCachedFile, { root : __dirname});
+        return response.sendFile(pathToCachedFile, { root: __dirname });
     }
 
     const pathToOriginalFile = path.join(getOriginalFolder(type), file);
@@ -1653,36 +1653,36 @@ app.get('/thumbnail', jsonParser, async function (request, response) {
     const image = await jimp.read(pathToOriginalFile);
     await image.cover(mySize[0], mySize[1]).quality(60).writeAsync(pathToCachedFile);
 
-    return response.sendFile(pathToCachedFile, { root : __dirname});
+    return response.sendFile(pathToCachedFile, { root: __dirname });
 });
 
 /* OpenAI */
-app.post("/getstatus_openai", jsonParser, function(request, response_getstatus_openai = response){
-    if(!request.body) return response_getstatus_openai.sendStatus(400);
+app.post("/getstatus_openai", jsonParser, function (request, response_getstatus_openai = response) {
+    if (!request.body) return response_getstatus_openai.sendStatus(400);
     api_key_openai = request.body.key;
     const args = {
-        headers: { "Authorization": "Bearer "+api_key_openai}
+        headers: { "Authorization": "Bearer " + api_key_openai }
     };
-    client.get(api_openai+"/models",args, function (data, response) {
-        if(response.statusCode == 200){
+    client.get(api_openai + "/models", args, function (data, response) {
+        if (response.statusCode == 200) {
             console.log(data);
             response_getstatus_openai.send(data);//data);
         }
-        if(response.statusCode == 401){
+        if (response.statusCode == 401) {
             console.log('Access Token is incorrect.');
-            response_getstatus_openai.send({error: true});
+            response_getstatus_openai.send({ error: true });
         }
-        if(response.statusCode == 500 || response.statusCode == 501 || response.statusCode == 501 || response.statusCode == 503 || response.statusCode == 507){
+        if (response.statusCode == 500 || response.statusCode == 501 || response.statusCode == 501 || response.statusCode == 503 || response.statusCode == 507) {
             console.log(data);
-            response_getstatus_openai.send({error: true});
+            response_getstatus_openai.send({ error: true });
         }
     }).on('error', function (err) {
-        response_getstatus_openai.send({error: true});
+        response_getstatus_openai.send({ error: true });
     });
 });
 
-app.post("/generate_openai", jsonParser, function(request, response_generate_openai){
-    if(!request.body) return response_generate_openai.sendStatus(400);
+app.post("/generate_openai", jsonParser, function (request, response_generate_openai) {
+    if (!request.body) return response_generate_openai.sendStatus(400);
 
     console.log(request.body);
     const config = {
@@ -1735,7 +1735,7 @@ app.post("/generate_openai", jsonParser, function(request, response_generate_ope
                 if (request.body.stream) {
                     response.data.on('data', chunk => {
                         console.log(chunk.toString());
-                    });                  
+                    });
                 } else {
                     console.log(response.data);
                 }
@@ -1743,11 +1743,11 @@ app.post("/generate_openai", jsonParser, function(request, response_generate_ope
             }
         })
         .catch(function (error) {
-            if(error.response){
+            if (error.response) {
                 if (request.body.stream) {
                     error.response.data.on('data', chunk => {
                         console.log(chunk.toString());
-                    });                  
+                    });
                 } else {
                     console.log(error.response.data);
                 }
@@ -1771,8 +1771,8 @@ function getTokenizer(model) {
     return tokenizer;
 }
 
-app.post("/tokenize_openai", jsonParser, function(request, response_tokenize_openai = response){
-    if(!request.body) return response_tokenize_openai.sendStatus(400);
+app.post("/tokenize_openai", jsonParser, function (request, response_tokenize_openai = response) {
+    if (!request.body) return response_tokenize_openai.sendStatus(400);
 
     const tokenizer = getTokenizer(request.query.model);
 
@@ -1787,8 +1787,8 @@ app.post("/tokenize_openai", jsonParser, function(request, response_tokenize_ope
         }
     }
     num_tokens += 2;
-    
-    response_tokenize_openai.send({"token_count": num_tokens});
+
+    response_tokenize_openai.send({ "token_count": num_tokens });
 });
 
 // ** REST CLIENT ASYNC WRAPPERS **
@@ -1892,7 +1892,7 @@ function convertStage2() {
         var char = JSON.parse(charactersB[key]);
         char.create_date = humanizedISO8601DateTime();
         charactersB[key] = JSON.stringify(char);
-        var avatar = 'public/img/fluffy.png';
+        var avatar = 'public/img/ai4.png';
         if (char.avatar !== 'none') {
             avatar = 'public/characters/' + char.name + '/avatars/' + char.avatar;
         }