Preset settings for OAI #23

public/img/clock-rotate-left-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M75 75L41 41C25.9 25.9 0 36.6 0 57.9V168c0 13.3 10.7 24 24 24H134.1c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24V256c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65V152c0-13.3-10.7-24-24-24z"/></svg>

public/index.html

@@ -816,8 +816,11 @@
                                 <br>
 
                                 <div class="range-block">
-                                    <div class="range-block-title">
+                                    <div class="range-block-title openai_restorable">
-                                        Main prompt
+                                        <span>Main prompt</span>
+                                        <div id="main_prompt_restore" title="Restore default prompt" class="right_menu_button">
+                                            <img alt="" class="svg_icon" src="img/clock-rotate-left-solid.svg" />
+                                        </div>
                                     </div>
                                     <div class="range-block-counter">
                                         The main prompt used to set the model behavior
@@ -828,8 +831,11 @@
                                 </div>
 
                                 <div class="range-block">
-                                    <div class="range-block-title">
+                                    <div class="range-block-title openai_restorable">
-                                        NSFW prompt
+                                        <span>NSFW prompt</span>
+                                        <div id="nsfw_prompt_restore" title="Restore default prompt" class="right_menu_button">
+                                            <img alt="" class="svg_icon" src="img/clock-rotate-left-solid.svg" />
+                                        </div>
                                     </div>
                                     <div class="range-block-counter">
                                         Prompt that is used when the NSFW toggle is on
@@ -840,8 +846,11 @@
                                 </div>
 
                                 <div class="range-block">
-                                    <div class="range-block-title">
+                                    <div class="range-block-title openai_restorable">
-                                        Jailbreak prompt
+                                        <span>Jailbreak prompt</span>
+                                        <div id="jailbreak_prompt_restore" title="Restore default prompt" class="right_menu_button">
+                                            <img alt="" class="svg_icon" src="img/clock-rotate-left-solid.svg" />
+                                        </div>
                                     </div>
                                     <div class="range-block-counter">
                                         Prompt that is used when the Jailbreak toggle is on
@@ -851,9 +860,9 @@
                                     </div>
                                 </div>
 
-                                <div class="range-block">
+                                <div class="range-block openai_preset_buttons">
-                                    <input id="save_prompts" class="menu_button" type="button" value="Save prompt settings">
+                                    <input id="update_preset" class="menu_button" type="button" value="Update current preset">
-                                    <input id="save_preset" class="menu_button" type="button" value="Save preset">
+                                    <input id="new_preset" class="menu_button" type="button" value="Create new preset">
                                 </div>
                             </div>
 

public/scripts/openai.js

@@ -60,6 +60,26 @@ const gpt4_max = 8191;
 
 const tokenCache = {};
 
+const default_settings = {
+    preset_settings_openai: 'Default',
+    api_key_openai: '',
+    temp_openai: 1.0,
+    freq_pen_openai: 0,
+    pres_pen_openai: 0,
+    stream_openai: false,
+    openai_max_context: gpt3_max,
+    openai_max_tokens: 300,
+    nsfw_toggle: true,
+    enhance_definitions: false,
+    wrap_in_quotes: false,
+    nsfw_first: false,
+    main_prompt: default_main_prompt,
+    nsfw_prompt: default_nsfw_prompt,
+    jailbreak_prompt: default_jailbreak_prompt,
+    openai_model: 'gpt-3.5-turbo-0301',
+    jailbreak_system: false,
+};
+
 const oai_settings = {
     preset_settings_openai: 'Default',
     api_key_openai: '',
@@ -524,12 +544,12 @@ function loadOpenAISettings(data, settings) {
     oai_settings.preset_settings_openai = settings.preset_settings_openai;
     $(`#settings_perset_openai option[value=${openai_setting_names[oai_settings.preset_settings_openai]}]`).attr('selected', true);
 
-    oai_settings.temp_openai = settings.temp_openai ?? 0.9;
+    oai_settings.temp_openai = settings.temp_openai ?? default_settings.temp_openai;
-    oai_settings.freq_pen_openai = settings.freq_pen_openai ?? 0.7;
+    oai_settings.freq_pen_openai = settings.freq_pen_openai ?? default_settings.freq_pen_openai;
-    oai_settings.pres_pen_openai = settings.pres_pen_openai ?? 0.7;
+    oai_settings.pres_pen_openai = settings.pres_pen_openai ?? default_settings.pres_pen_openai;
-    oai_settings.stream_openai = settings.stream_openai ?? true;
+    oai_settings.stream_openai = settings.stream_openai ?? default_settings.stream_openai;
-    oai_settings.openai_max_context = settings.openai_max_context ?? 4095;
+    oai_settings.openai_max_context = settings.openai_max_context ?? default_settings.openai_max_context;
-    oai_settings.openai_max_tokens = settings.openai_max_tokens ?? 300;
+    oai_settings.openai_max_tokens = settings.openai_max_tokens ?? default_settings.openai_max_tokens;
 
     if (settings.nsfw_toggle !== undefined) oai_settings.nsfw_toggle = !!settings.nsfw_toggle;
     if (settings.keep_example_dialogue !== undefined) oai_settings.keep_example_dialogue = !!settings.keep_example_dialogue;
@@ -612,6 +632,7 @@ function trySelectPresetByName(name) {
     for (const key in openai_setting_names) {
         if (name.trim() == key.trim()) {
             preset_found = key;
+            break;
         }
     }
 
@@ -619,7 +640,56 @@ function trySelectPresetByName(name) {
         oai_settings.preset_settings_openai = preset_found;
         const value = openai_setting_names[preset_found]
         $(`#settings_perset_openai option[value="${value}"]`).attr('selected', true);
-        $('#settings_perset_openai').trigger('change');
+        $('#settings_perset_openai').val(value).trigger('change');
+    }
+}
+
+async function saveOpenAIPreset(name, settings) {
+    const presetBody = {
+        openai_model: settings.openai_model,
+        temperature: settings.temp_openai,
+        frequency_penalty: settings.freq_pen_openai,
+        presence_penalty: settings.pres_pen_openai,
+        openai_max_context: settings.openai_max_context,
+        openai_max_tokens: settings.openai_max_tokens,
+        nsfw_toggle: settings.nsfw_toggle,
+        enhance_definitions: settings.enhance_definitions,
+        wrap_in_quotes: settings.wrap_in_quotes,
+        nsfw_first: settings.nsfw_first,
+        main_prompt: settings.main_prompt,
+        nsfw_prompt: settings.nsfw_prompt,
+        jailbreak_prompt: settings.jailbreak_prompt,
+        jailbreak_system: settings.jailbreak_system,
+    };
+
+    const savePresetSettings = await fetch(`/savepreset_openai?name=${name}`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-Token': token,
+        },
+        body: JSON.stringify(presetBody),
+    });
+
+    if (savePresetSettings.ok) {
+        const data = await savePresetSettings.json();
+
+        if (Object.keys(openai_setting_names).includes(data.name)) {
+            oai_settings.preset_settings_openai = data.name;
+            const value = openai_setting_names[data.name];
+            Object.assign(openai_settings[value], presetBody);
+            $(`#settings_perset_openai option[value="${value}"]`).attr('selected', true);
+            $('#settings_perset_openai').trigger('change');
+        }
+        else {
+            openai_settings.push(presetBody);
+            openai_setting_names[data.name] = openai_settings.length - 1;
+            const option = document.createElement('option');
+            option.selected = true;
+            option.value = openai_settings.length - 1;
+            option.innerText = data.name;
+            $('#settings_perset_openai').append(option).trigger('change');
+        }
     }
 }
 
@@ -727,6 +797,12 @@ $(document).ready(function () {
                     updateInput(selector, preset[key]);
                 }
                 oai_settings[setting] = preset[key];
+
+                if (key == 'openai_model') {
+                    $(`#model_openai_select option[value="${preset[key]}"`)
+                        .attr('selected', true)
+                        .trigger('change');
+                }
             }
         }
 
@@ -746,12 +822,20 @@ $(document).ready(function () {
         }
     });
 
-    $("#save_prompts").click(function () {
+    $("#jailbreak_prompt_textarea").on('input', function () {
-        oai_settings.main_prompt = $('#main_prompt_textarea').val();
-        oai_settings.nsfw_prompt = $('#nsfw_prompt_textarea').val();
         oai_settings.jailbreak_prompt = $('#jailbreak_prompt_textarea').val();
         saveSettingsDebounced();
     });
+    
+    $("#main_prompt_textarea").on('input', function () {
+        oai_settings.main_prompt = $('#main_prompt_textarea').val();
+        saveSettingsDebounced();
+    });
+
+    $("#nsfw_prompt_textarea").on('input', function () {
+        oai_settings.nsfw_prompt = $('#nsfw_prompt_textarea').val();
+        saveSettingsDebounced();
+    });
 
     $("#jailbreak_system").change(function () {
         oai_settings.jailbreak_system = !!$(this).prop("checked");
@@ -781,7 +865,13 @@ $(document).ready(function () {
         trySelectPresetByName(name);
     });
 
-    $("#save_preset").click(async function () {
+    $("#update_preset").click(async function () {
+        const name = oai_settings.preset_settings_openai;
+        await saveOpenAIPreset(name, oai_settings);
+        callPopup('Preset updated', 'text');
+    });
+
+    $("#new_preset").click(async function () {
         const popupText = `
             <h3>Preset name:</h3>
             <h4>Hint: Use a character/group name to bind preset to a specific chat.</h4>`;
@@ -792,51 +882,24 @@ $(document).ready(function () {
             return;
         }
 
-        const presetBody = {
+        await saveOpenAIPreset(name, default_settings);
-            openai_model: oai_settings.openai_model,
+    });
-            temperature: oai_settings.temp_openai,
-            frequency_penalty: oai_settings.freq_pen_openai,
-            presence_penalty: oai_settings.pres_pen_openai,
-            openai_max_context: oai_settings.openai_max_context,
-            openai_max_tokens: oai_settings.openai_max_tokens,
-            nsfw_toggle: oai_settings.nsfw_toggle,
-            enhance_definitions: oai_settings.enhance_definitions,
-            wrap_in_quotes: oai_settings.wrap_in_quotes,
-            nsfw_first: oai_settings.nsfw_first,
-            main_prompt: oai_settings.main_prompt,
-            nsfw_prompt: oai_settings.nsfw_prompt,
-            jailbreak_prompt: oai_settings.jailbreak_prompt,
-            jailbreak_system: oai_settings.jailbreak_system,
-        };
 
-        const savePresetSettings = await fetch(`/savepreset_openai?name=${name}`, {
+    $("#main_prompt_restore").click(function () {
-            method: 'POST',
+        oai_settings.main_prompt = default_main_prompt;
-            headers: {
+        $('#main_prompt_textarea').val(oai_settings.main_prompt);
-                'Content-Type': 'application/json',
+        saveSettingsDebounced();
-                'X-CSRF-Token': token,
+    });
-            },
-            body: JSON.stringify(presetBody),
-        });
 
-        if (savePresetSettings.ok) {
+    $("#nsfw_prompt_restore").click(function () {
-            const data = await savePresetSettings.json();
+        oai_settings.nsfw_prompt = default_nsfw_prompt;
+        $('#nsfw_prompt_textarea').val(oai_settings.nsfw_prompt);
+        saveSettingsDebounced();
+    });
 
-            if (Object.keys(openai_setting_names).includes(data.name)) {
+    $("#jailbreak_prompt_restore").click(function () {
-                oai_settings.preset_settings_openai = data.name;
+        oai_settings.jailbreak_prompt = default_jailbreak_prompt;
-                const value = openai_setting_names[data.name];
+        $('#jailbreak_prompt_textarea').val(oai_settings.jailbreak_prompt);
-                Object.assign(openai_settings[value], presetBody);
+        saveSettingsDebounced();
-                $(`#settings_perset_openai option[value="${value}"]`).attr('selected', true);
-                $('#settings_perset_openai').trigger('change');
-            }
-            else {
-                openai_settings.push(presetBody);
-                openai_setting_names[data.name] = openai_settings.length - 1;
-                const option = document.createElement('option');
-                option.selected = true;
-                option.value = openai_settings.length - 1;
-                option.innerText = data.name;
-                $('#settings_perset_openai').append(option).trigger('change');
-            }
-        }
     });
 });

public/style.css

@@ -2958,6 +2958,22 @@ filter: invert(20%) sepia(100%) saturate(2518%) hue-rotate(353deg) brightness(93
     padding: 3px 5px;
 }
 
+.openai_restorable {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.openai_restorable .right_menu_button img {
+    height: 20px;
+}
+
+.openai_preset_buttons {
+    display: flex;
+    justify-content: space-evenly;
+    flex-direction: row;
+}
 
 /* ---------- @media queries must always go at the bottom ------------*/