Merge pull request #50 from Cohee1207/dev

Dev

public/index.html

@@ -245,6 +245,18 @@
                             </div>
                         </div>
                         <div id="range_block_openai">
+                            <div class="range-block">
+                                <div class="range-block-title">
+                                    OpenAI Reverse Proxy
+                                </div>
+                                <div class="range-block-counter">
+                                    Alternative server URL (leave empty to use the default value).<br>
+                                    <b class="failure">Don't expose your real API keys to reverse proxies!</b>
+                                </div>
+                                <div class="range-block-range">
+                                    <input id="openai_reverse_proxy" type="text" class="text_pole" placeholder="https://api.openai.com/v1" />
+                                </div>
+                            </div>
                             <div class="range-block">
                                 <div class="range-block-title">
                                     OpenAI Context Size
@@ -694,7 +706,7 @@
                                     Text to be send as a character nudge
                                 </div>
                                 <div class="range-block-range">
-                                    <input id="poe_nudge_text" class="text_pole" type="text" />
+                                    <textarea id="poe_nudge_text" class="text_pole" rows="3"></textarea>
                                 </div>
                             </div>
                         </div>
@@ -1100,6 +1112,11 @@
                             </span>
                         </label>
 
+                        <label for="play_sound_unfocused" class="checkbox_label">
+                            <input id="play_sound_unfocused" type="checkbox" />
+                            Sound only for unfocused window
+                        </label>
+
                         <label for="fast_ui_mode" class="checkbox_label" title="Blur can cause browser lag, especially in Bubble Chat mode. To fix: Turn on your browser's Hardware Acceleration, and restart your browser or simply disable the blur effect with this toggle.">
                             <input id="fast_ui_mode" type="checkbox" />
                             No Blur Effect
@@ -1357,6 +1374,15 @@
                     </div>
                     <form id="form_character_search_form" action="javascript:void(null);">
                         <input id="character_search_bar" class="text_pole" type="search" placeholder="Character search..." />
+                        <select id="character_sort_order" title="Characters sorting order">
+                            <option data-field="name" data-order="asc">Name, A-Z</option>
+                            <option data-field="name" data-order="desc">Name, Z-A</option>
+                            <option data-field="date_added" data-order="desc">Date added, newer first</option>
+                            <option data-field="date_added" data-order="asc">Date added, older first</option>
+                            <option data-field="date_last_chat" data-order="desc">Recently chatted</option>
+                            <option data-field="chat_size" data-order="desc">Most chatted</option>
+                            <option data-field="chat_size" data-order="asc">Least chatted</option>
+                        </select>
                     </form>
                     <div id="rm_print_characters_block"></div>
                 </div>
@@ -1410,7 +1436,7 @@
             <hr>
             <h4>Personality summary</h4>
             <h5>A brief description of the personality <a href="/notes/2" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
-            <input id="personality_textarea" name="personality" placeholder="" form="form_create" class="text_pole" autocomplete="off">
+            <textarea id="personality_textarea" name="personality" placeholder="" form="form_create" class="text_pole" autocomplete="off" rows="3"></textarea>
         </div>
 
         <div id="scenario_div">
@@ -1420,7 +1446,7 @@
                     <span class="note-link-span">?</span>
                 </a>
             </h5>
-            <input id="scenario_pole" name="scenario" class="text_pole" maxlength="9999" value="" autocomplete="off" form="form_create">
+            <textarea id="scenario_pole" name="scenario" class="text_pole" maxlength="9999" value="" autocomplete="off" form="form_create" rows="3"></textarea>
         </div>
 
         <div id="talkativeness_div">

public/notes/message_sound.html

@@ -21,7 +21,10 @@
                 public/sounds/message.mp3
             </code>
             <p>
-                Plays at 80% volume and only if TavernAI window is <b>unfocused</b>.
+                Plays at 80% volume.
+            </p>
+            <p>
+                If "Sound only for unfocused window" option is enabled, the sound plays only if TavernAI window is <b>unfocused</b>.
             </p>
         </div>
     </div>

public/script.js

@@ -42,6 +42,7 @@ import {
     collapseNewlines,
     loadPowerUserSettings,
     playMessageSound,
+    sortCharactersList,
     power_user,
 } from "./scripts/power-user.js";
 
@@ -238,7 +239,9 @@ const system_messages = {
             '<li>Connect to one of the supported generation APIs</li>',
             '<li>Create or pick a character from the list</li>',
             '</ul>',
-            'Still have questions left?\n',
+            "<h4>Running on Colab and can't get an answer from the AI or getting Out of Memory errors?</h4>",
+            'Set a lower Context Size in AI generation settings.<br>Values in range of 1400-1600 Tokens would be the safest choice.',
+            '<h4>Still have questions left?</h4>',
             'Check out built-in help or type <tt>/?</tt> in any chat.'
         ].join('')
     },
@@ -607,7 +610,7 @@ function printCharacters() {
         //console.log('printcharacters() -- printing -- ChID '+i+' ('+item.name+')');
     });
     printGroups();
-    sortCharactersList('name', 'asc');
+    sortCharactersList();
 }
 
 async function getCharacters() {
@@ -3064,14 +3067,6 @@ function setGenerationProgress(progress) {
     }
 }
 
-function sortCharactersList(field, order) {
-    let orderedList = characters.slice().sort((a, b) => order == 'asc' ? a[field].localeCompare(b[field]) : b[field].localeCompare(a[field]));
-
-    for (let i = 0; i < characters.length; i++) {
-        $(`.character_select[chid="${i}"]`).css({ 'order': orderedList.indexOf(characters[i]) });
-    }
-}
-
 function isHordeGenerationNotAllowed() {
     if (main_api == "kobold" && horde_settings.use_horde && preset_settings == "gui") {
         callPopup('GUI Settings preset is not supported for Horde. Please select another preset.', 'text');

public/scripts/openai.js

@@ -78,6 +78,7 @@ const default_settings = {
     jailbreak_prompt: default_jailbreak_prompt,
     openai_model: 'gpt-3.5-turbo-0301',
     jailbreak_system: false,
+    reverse_proxy: '',
 };
 
 const oai_settings = {
@@ -98,11 +99,28 @@ const oai_settings = {
     jailbreak_prompt: default_jailbreak_prompt,
     openai_model: 'gpt-3.5-turbo-0301',
     jailbreak_system: false,
+    reverse_proxy: '',
 };
 
 let openai_setting_names;
 let openai_settings;
 
+function validateReverseProxy() {
+    if (!oai_settings.reverse_proxy) {
+        return;
+    }
+
+    try {
+        new URL(oai_settings.reverse_proxy);
+    }
+    catch (err) {
+        callPopup('Entered reverse proxy address is not a valid URL', 'text');
+        setOnlineStatus('no_connection');
+        resultCheckStatusOpen();
+        throw err;
+    }
+}
+
 function setOpenAIOnlineStatus(value) {
     is_get_status_openai = value;
 }
@@ -396,6 +414,10 @@ async function prepareOpenAIMessages(name2, storyString, worldInfoBefore, worldI
 }
 
 async function sendOpenAIRequest(openai_msgs_tosend) {
+    if (oai_settings.reverse_proxy) {
+        validateReverseProxy();
+    }
+
     const generate_data = {
         "messages": openai_msgs_tosend,
         "model": oai_settings.openai_model,
@@ -404,6 +426,7 @@ async function sendOpenAIRequest(openai_msgs_tosend) {
         "presence_penalty": parseFloat(oai_settings.pres_pen_openai),
         "max_tokens": oai_settings.openai_max_tokens,
         "stream": false, //oai_settings.stream_openai,
+        "reverse_proxy": oai_settings.reverse_proxy,
     };
 
     const generate_url = '/generate_openai';
@@ -589,17 +612,28 @@ function loadOpenAISettings(data, settings) {
 
     $('#pres_pen_openai').val(oai_settings.pres_pen_openai);
     $('#pres_pen_counter_openai').text(Number(oai_settings.pres_pen_openai).toFixed(2));
+
+    if (settings.reverse_proxy !== undefined) oai_settings.reverse_proxy = settings.reverse_proxy;
+    $('#openai_reverse_proxy').val(oai_settings.reverse_proxy);
 }
 
 async function getStatusOpen() {
     if (is_get_status_openai) {
-        let data = { key: oai_settings.api_key_openai };
+
+        let data = {
+            key: oai_settings.api_key_openai,
+            reverse_proxy: oai_settings.reverse_proxy,
+        };
 
         jQuery.ajax({
             type: 'POST', // 
             url: '/getstatus_openai', // 
             data: JSON.stringify(data),
-            beforeSend: function () { },
+            beforeSend: function () {
+                if (oai_settings.reverse_proxy) {
+                    validateReverseProxy();
+                }
+            },
             cache: false,
             dataType: "json",
             contentType: "application/json",
@@ -902,4 +936,9 @@ $(document).ready(function () {
         $('#jailbreak_prompt_textarea').val(oai_settings.jailbreak_prompt);
         saveSettingsDebounced();
     });
+
+    $("#openai_reverse_proxy").on('input', function () {
+        oai_settings.reverse_proxy = $(this).val();
+        saveSettingsDebounced();
+    });
 });

public/scripts/power-user.js

@@ -1,9 +1,10 @@
-import { saveSettingsDebounced } from "../script.js";
+import { saveSettingsDebounced, characters } from "../script.js";
 
 export {
     loadPowerUserSettings,
     collapseNewlines,
     playMessageSound,
+    sortCharactersList,
     power_user,
 };
 
@@ -37,6 +38,9 @@ let power_user = {
     chat_display: chat_styles.DEFAULT,
     sheld_width: sheld_width.DEFAULT,
     play_message_sound: false,
+    play_sound_unfocused: true,
+    sort_field: 'name',
+    sort_order: 'asc',
 };
 
 const storage_keys = {
@@ -59,7 +63,11 @@ const storage_keys = {
 let browser_has_focus = true;
 
 function playMessageSound() {
-    if (!power_user.play_message_sound || browser_has_focus) {
+    if (!power_user.play_message_sound) {
+        return;
+    }
+
+    if (power_user.play_sound_unfocused && browser_has_focus) {
         return;
     }
 
@@ -147,9 +155,29 @@ function loadPowerUserSettings(settings) {
     $("#fast_ui_mode").prop("checked", power_user.fast_ui_mode);
     $("#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);
     $(`input[name="avatar_style"][value="${power_user.avatar_style}"]`).prop("checked", true);
     $(`input[name="chat_display"][value="${power_user.chat_display}"]`).prop("checked", true);
     $(`input[name="sheld_width"][value="${power_user.sheld_width}"]`).prop("checked", true);
+    $(`#character_sort_order option[data-order="${power_user.sort_order}"][data-field="${power_user.sort_field}"]`).prop("selected", true);
+    sortCharactersList();
+}
+
+function sortCharactersList() {
+    const sortFunc = (a, b) => power_user.sort_order == 'asc' ? compareFunc(a, b) : compareFunc(b, a);
+    const compareFunc = (first, second) => typeof first[power_user.sort_field] == "string"
+        ? first[power_user.sort_field].localeCompare(second[power_user.sort_field])
+        : first[power_user.sort_field] - second[power_user.sort_field];
+
+    if (power_user.sort_field == undefined || characters.length === 0) {
+        return;
+    }
+
+    let orderedList = characters.slice().sort(sortFunc);
+
+    for (let i = 0; i < characters.length; i++) {
+        $(`.character_select[chid="${i}"]`).css({ 'order': orderedList.indexOf(characters[i]) });
+    }
 }
 
 $(document).ready(() => {
@@ -230,9 +258,22 @@ $(document).ready(() => {
         saveSettingsDebounced();
     });
 
+    $("#play_sound_unfocused").on('input', function () {
+        power_user.play_sound_unfocused = !!$(this).prop('checked');
+        saveSettingsDebounced();
+    });
+
+    $("#character_sort_order").on('change', function () {
+        power_user.sort_field = $(this).find(":selected").data('field');
+        power_user.sort_order = $(this).find(":selected").data('order');
+        sortCharactersList();
+        saveSettingsDebounced();
+    });
+
     $(window).on('focus', function() {
         browser_has_focus = true;
     });
+
     $(window).on('blur', function() {
         browser_has_focus = false;
     });

public/style.css

@@ -859,17 +859,20 @@ img[src="img/load.svg"] {
     display: flex;
     flex-direction: row;
     align-items: center;
-    margin-bottom: 10px;
+    margin: 10px 5px;
-    padding-left: 5px;
+    column-gap: 10px;
+}
+
+#character_sort_order {
+    margin: 0;
+    flex: 1;
 }
 
 #character_search_bar {
     flex: 1;
     font-size: 1em;
     padding-left: 0.75em;
-    margin-left: 0;
+    margin: 0;
-    margin-right: 0.5rem;
-    margin-bottom: 0;
 }
 
 input[type=search]::-webkit-search-cancel-button {
@@ -1946,7 +1949,7 @@ input[type="range"]::-webkit-slider-thumb {
     background-color: var(--black30a);
     backdrop-filter: blur(50px);
     -webkit-backdrop-filter: blur(30px);
-    grid-template-rows: 50px 100px 100px 100px auto;
+    grid-template-rows: 50px 1fr 1fr 1fr 5fr;
     grid-gap: 10px;
     max-width: var(--sheldWidth);
     height: calc(100svh - 40px);

server.js

@@ -739,6 +739,36 @@ app.post("/getcharacters", jsonParser, function (request, response) {
                 //console.log(jsonObject);
                 characters[i] = {};
                 characters[i] = jsonObject;
+
+                try {
+                    const charStat = fs.statSync(path.join(charactersPath, item));
+                    characters[i]['date_added'] = charStat.birthtimeMs;
+                    const char_dir = path.join(chatsPath, item.replace('.png', ''));
+    
+                    let chat_size = 0;
+                    let date_last_chat = 0;
+    
+                    if (fs.existsSync(char_dir)) { 
+                        const chats = fs.readdirSync(char_dir);
+    
+                        if (Array.isArray(chats) && chats.length) {
+                            for (const chat of chats) {
+                                const chatStat = fs.statSync(path.join(char_dir, chat));
+                                chat_size += chatStat.size;
+                                date_last_chat = Math.max(date_last_chat, chatStat.mtimeMs);
+                            }
+                        }
+                    }
+    
+                    characters[i]['date_last_chat'] = date_last_chat;
+                    characters[i]['chat_size'] = chat_size;
+                }
+                catch {
+                    characters[i]['date_added'] = 0;
+                    characters[i]['date_last_chat'] = 0;
+                    characters[i]['chat_size'] = 0;
+                }
+                
                 i++;
             } catch (error) {
                 console.log(`Could not read character: ${item}`);
@@ -1893,10 +1923,11 @@ app.get('/thumbnail', jsonParser, async function (request, response) {
 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 api_url = new URL(request.body.reverse_proxy || api_openai).toString();
     const args = {
         headers: { "Authorization": "Bearer " + api_key_openai }
     };
-    client.get(api_openai + "/models", args, function (data, response) {
+    client.get(api_url + "/models", args, function (data, response) {
         if (response.statusCode == 200) {
             console.log(data);
             response_getstatus_openai.send(data);//data);
@@ -1905,6 +1936,10 @@ app.post("/getstatus_openai", jsonParser, function (request, response_getstatus_
             console.log('Access Token is incorrect.');
             response_getstatus_openai.send({ error: true });
         }
+        if (response.statusCode == 404) {
+            console.log('Endpoint not found.');
+            response_getstatus_openai.send({ error: true });
+        }
         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 });
@@ -1916,11 +1951,12 @@ app.post("/getstatus_openai", jsonParser, function (request, response_getstatus_
 
 app.post("/generate_openai", jsonParser, function (request, response_generate_openai) {
     if (!request.body) return response_generate_openai.sendStatus(400);
+    const api_url = new URL(request.body.reverse_proxy || api_openai).toString();
 
     console.log(request.body);
     const config = {
         method: 'post',
-        url: api_openai + '/chat/completions',
+        url: api_url + '/chat/completions',
         headers: {
             'Content-Type': 'application/json',
             'Authorization': 'Bearer ' + api_key_openai