Reorderable samplers for Novel

default/settings.json

@@ -348,7 +348,8 @@
         "min_length": 1,
         "model_novel": "clio-v1",
         "preset_settings_novel": "Talker-Chat-Clio",
-        "streaming_novel": false
+        "streaming_novel": true,
+        "order":  [1, 5, 0, 2, 3, 4]
     },
     "kai_settings": {
         "temp": 1,

public/index.html

@@ -832,7 +832,7 @@
                                             Samplers will be applied in a top-down order.
                                             Use with caution.
                                         </div>
-                                        <div id="kobold_order">
+                                        <div id="kobold_order" class="prompt_order">
                                             <div data-id="0">
                                                 <span data-i18n="Top K">Top K</span>
                                                 <small>0</small>
@@ -1027,6 +1027,57 @@
                                         </div>
                                     </div>
                                 </div>
+                                <div class="range-block flexFlowColumn">
+                                    <div class="range-block-title">
+                                        <span data-i18n="Samplers Order">Samplers Order</span>
+                                    </div>
+                                    <div class="toggle-description" data-i18n="Samplers will be applied in a top-down order. Use with caution.">
+                                        Samplers will be applied in a top-down order. Use with caution.
+                                    </div>
+                                    <div id="novel_order" class="prompt_order">
+                                        <div data-id="0">
+                                            <span data-i18n="Temperature">Temperature</span>
+                                            <small>0</small>
+                                            <div class="toggle_button right_menu_button"></div>
+                                        </div>
+                                        <div data-id="1">
+                                            <span data-i18n="Top K Sampling">Top K Sampling</span>
+                                            <small>1</small>
+                                            <div class="toggle_button right_menu_button"></div>
+                                        </div>
+                                        <div data-id="2">
+                                            <span data-i18n="Nucleus Sampling">Nucleus Sampling</span>
+                                            <small>2</small>
+                                            <div class="toggle_button right_menu_button"></div>
+                                        </div>
+                                        <div data-id="3">
+                                            <span data-i18n="Tail Free Sampling">Tail Free Sampling</span>
+                                            <small>3</small>
+                                            <div class="toggle_button right_menu_button"></div>
+                                        </div>
+                                        <div data-id="4">
+                                            <span data-i18n="Top A Sampling">Top A Sampling</span>
+                                            <small>4</small>
+                                            <div class="toggle_button right_menu_button"></div>
+                                        </div>
+                                        <div data-id="5">
+                                            <span data-i18n="Typical Sampling">Typical Sampling</span>
+                                            <small>5</small>
+                                            <div class="toggle_button right_menu_button"></div>
+                                        </div>
+                                        <div data-id="6">
+                                            <span data-i18n="CFG">CFG</span>
+                                            <small>6</small>
+                                            <div class="toggle_button right_menu_button"></div>
+                                        </div>
+                                        <!-- Yes, there is no 7. It was a removed Top G sampling. RIP. -->
+                                        <div data-id="8">
+                                            <span data-i18n="Mirostat">Mirostat</span>
+                                            <small>8</small>
+                                            <div class="toggle_button right_menu_button"></div>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
                             <div id="textgenerationwebui_api-settings">
                                 <div class="range-block">

public/scripts/nai-settings.js

@@ -17,6 +17,7 @@ export {
 };
 
 const default_preamble = "[ Style: chat, complex, sensory, visceral ]";
+const default_order = [1, 5, 0, 2, 3, 4];
 const maximum_output_length = 150;
 const default_presets = {
     "euterpe-v2": "Classic-Euterpe",
@@ -45,6 +46,7 @@ const nai_settings = {
     prefix: '',
     cfg_uc: '',
     banned_tokens: '',
+    order: default_order,
 };
 
 const nai_tiers = {
@@ -108,6 +110,7 @@ function loadNovelPreset(preset) {
     nai_settings.prefix = preset.prefix;
     nai_settings.cfg_uc = preset.cfg_uc || '';
     nai_settings.banned_tokens = preset.banned_tokens || '';
+    nai_settings.order = preset.order || default_order;
     loadNovelSettingsUi(nai_settings);
 }
 
@@ -140,6 +143,7 @@ function loadNovelSettings(settings) {
     nai_settings.prefix = settings.prefix;
     nai_settings.cfg_uc = settings.cfg_uc || '';
     nai_settings.banned_tokens = settings.banned_tokens || '';
+    nai_settings.order = settings.order || default_order;
     loadNovelSettingsUi(nai_settings);
 }
 
@@ -181,6 +185,7 @@ function loadNovelSettingsUi(ui_settings) {
     $('#nai_banned_tokens').val(ui_settings.banned_tokens || "");
 
     $("#streaming_novel").prop('checked', ui_settings.streaming_novel);
+    sortItemsByOrder(ui_settings.order);
 }
 
 const sliders = [
@@ -419,7 +424,7 @@ export function getNovelGenerationData(finalPrompt, this_settings, this_amount_g
         "use_string": true,
         "return_full_text": false,
         "prefix": prefix,
-        "order": this_settings.order,
+        "order": nai_settings.order || this_settings.order || default_order,
         "streaming": nai_settings.streaming_novel,
     };
 }
@@ -441,6 +446,44 @@ function selectPrefix(selected_prefix, finalPromt) {
     return "vanilla";
 }
 
+// Sort the samplers by the order array
+function sortItemsByOrder(orderArray) {
+    console.debug('Preset samplers order: ' + orderArray);
+    const $draggableItems = $("#novel_order");
+
+    // Sort the items by the order array
+    for (let i = 0; i < orderArray.length; i++) {
+        const index = orderArray[i];
+        const $item = $draggableItems.find(`[data-id="${index}"]`).detach();
+        $draggableItems.append($item);
+    }
+
+    // Update the disabled class for each sampler
+    $draggableItems.children().each(function () {
+        const isEnabled = orderArray.includes(parseInt($(this).data('id')));
+        $(this).toggleClass('disabled', !isEnabled);
+
+        // If the sampler is disabled, move it to the bottom of the list
+        if (!isEnabled) {
+            const item = $(this).detach();
+            $draggableItems.append(item);
+        }
+    });
+}
+
+function saveSamplingOrder() {
+    const order = [];
+    $('#novel_order').children().each(function () {
+        const isEnabled = !$(this).hasClass('disabled');
+        if (isEnabled) {
+            order.push($(this).data('id'));
+        }
+    });
+    nai_settings.order = order;
+    console.log('Samplers reordered:', nai_settings.order);
+    saveSettingsDebounced();
+}
+
 export async function generateNovelWithStreaming(generate_data, signal) {
     const response = await fetch('/generate_novelai', {
         headers: getRequestHeaders(),
@@ -532,4 +575,16 @@ $(document).ready(function () {
         nai_settings.phrase_rep_pen = $("#phrase_rep_pen_novel").find(":selected").val();
         saveSettingsDebounced();
     });
+
+    $('#novel_order').sortable({
+        stop: saveSamplingOrder,
+    });
+
+    $('#novel_order .toggle_button').on('click', function () {
+        const $item = $(this).closest('[data-id]');
+        const isEnabled = !$item.hasClass('disabled');
+        $item.toggleClass('disabled', isEnabled);
+        console.log('Sampler toggled:', $item.data('id'), !isEnabled);
+        saveSamplingOrder();
+    });
 });

public/style.css

@@ -2216,7 +2216,7 @@ grammarly-extension {
     background-color: red;
 }
 
-#kobold_order {
+.prompt_order {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -2226,7 +2226,7 @@ grammarly-extension {
     padding: 5px;
 }
 
-#kobold_order>div {
+.prompt_order>div {
     padding: 5px;
     padding-left: 30px;
     width: 100%;
@@ -2241,18 +2241,40 @@ grammarly-extension {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    column-gap: 10px;
 }
 
-#kobold_order>div:hover {
+.prompt_order>div>span:first-child {
+    flex-grow: 1;
+}
+
+.prompt_order>div:hover {
     background-color: var(--grey30a);
 }
 
-#kobold_order>div::after {
+.prompt_order>div::after {
     content: "☰";
     left: 8px;
     position: absolute;
 }
 
+.prompt_order .disabled {
+    opacity: 0.5;
+    filter: grayscale(0.5);
+}
+
+.prompt_order .toggle_button {
+    padding-right: 0;
+}
+
+.prompt_order .toggle_button::after {
+    content: '☑';
+}
+
+.prompt_order .disabled .toggle_button::after {
+    content: '☐';
+}
+
 /* ------ online status indicators and texts. 2 = kobold AI, 3 = Novel AI  ----------*/
 #online_status2,
 #online_status_horde,