Customizable samplers order for KoboldAI

public/index.html

@@ -795,6 +795,24 @@
                                                 Single-line mode</span>
                                         </label>
                                     </div>
+                                    <div class="range-block flexFlowColumn">
+                                        <div class="range-block-title" data-i18n="Samplers Order">
+                                            Samplers Order
+                                        </div>
+                                        <div class="toggle-description">
+                                            Samplers will be applied in a top-down order.
+                                            Use with caution.
+                                        </div>
+                                        <div id="kobold_order">
+                                            <div data-id="0">Top K</div>
+                                            <div data-id="1">Top A</div>
+                                            <div data-id="2">Top P</div>
+                                            <div data-id="3">Tail Free Sampling</div>
+                                            <div data-id="4">Typical Sampling</div>
+                                            <div data-id="5">Temperature</div>
+                                            <div data-id="6">Repetition Penalty</div>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                             <div id="novel_api-settings">

public/script.js

@@ -7171,6 +7171,7 @@ $(document).ready(function () {
             $("#amount_gen_block").find('input').prop("disabled", false);
 
             $("#amount_gen_block").css("opacity", 1.0);
+            $("#kobold_order").sortable("enable");
         } else {
             //$('.button').disableSelection();
             preset_settings = "gui";
@@ -7182,6 +7183,7 @@ $(document).ready(function () {
             $("#amount_gen_block").find('input').prop("disabled", true);
 
             $("#amount_gen_block").css("opacity", 0.45);
+            $("#kobold_order").sortable("disable");
         }
         saveSettingsDebounced();
     });

public/scripts/kai-settings.js

@@ -26,6 +26,7 @@ const kai_settings = {
     single_line: false,
     use_stop_sequence: false,
     streaming_kobold: false,
+    sampler_order: [0, 1, 2, 3, 4, 5, 6],
 };
 
 const MIN_STOP_SEQUENCE_VERSION = '1.2.2';
@@ -69,10 +70,11 @@ function loadKoboldSettings(preset) {
 }
 
 function getKoboldGenerationData(finalPromt, this_settings, this_amount_gen, this_max_context, isImpersonate, type) {
+    const sampler_order = kai_settings.sampler_order || this_settings.sampler_order;
     let generate_data = {
         prompt: finalPromt,
         gui_settings: false,
-        sampler_order: this_settings.sampler_order,
+        sampler_order: sampler_order,
         max_context_length: parseInt(this_max_context),
         max_length: this_amount_gen,
         rep_pen: parseFloat(kai_settings.rep_pen),
@@ -84,13 +86,13 @@ function getKoboldGenerationData(finalPromt, this_settings, this_amount_gen, thi
         top_k: kai_settings.top_k,
         top_p: kai_settings.top_p,
         typical: kai_settings.typical,
-        s1: this_settings.sampler_order[0],
+        s1: sampler_order[0],
-        s2: this_settings.sampler_order[1],
+        s2: sampler_order[1],
-        s3: this_settings.sampler_order[2],
+        s3: sampler_order[2],
-        s4: this_settings.sampler_order[3],
+        s4: sampler_order[3],
-        s5: this_settings.sampler_order[4],
+        s5: sampler_order[4],
-        s6: this_settings.sampler_order[5],
+        s6: sampler_order[5],
-        s7: this_settings.sampler_order[6],
+        s7: sampler_order[6],
         use_world_info: false,
         singleline: kai_settings.single_line,
         stop_sequence: kai_settings.use_stop_sequence ? getStoppingStrings(isImpersonate, false) : undefined,
@@ -206,6 +208,13 @@ const sliders = [
         format: (val) => val,
         setValue: (val) => { kai_settings.rep_pen_slope = Number(val); },
     },
+    {
+        name: "sampler_order",
+        sliderId: "#no_op_selector",
+        counterId: "#no_op_selector",
+        format: (val) => val,
+        setValue: (val) => { sortItemsByOrder(val); },
+    }
 ];
 
 function canUseKoboldStopSequence(version) {
@@ -218,6 +227,17 @@ function canUseKoboldStreaming(koboldVersion) {
     } else return false;
 }
 
+function sortItemsByOrder(orderArray) {
+    console.debug('Preset samplers order: ' + orderArray);
+    const $draggableItems = $("#kobold_order");
+
+    for (let i = 0; i < orderArray.length; i++) {
+        const index = orderArray[i];
+        const $item = $draggableItems.find(`[data-id="${index}"]`).detach();
+        $draggableItems.append($item);
+    }
+}
+
 $(document).ready(function () {
     sliders.forEach(slider => {
         $(document).on("input", slider.sliderId, function () {
@@ -240,4 +260,16 @@ $(document).ready(function () {
         kai_settings.streaming_kobold = value;
         saveSettingsDebounced();
     });
+
+    $('#kobold_order').sortable({
+        stop: function () {
+            const order = [];
+            $('#kobold_order').children().each(function () {
+                order.push($(this).data('id'));
+            });
+            kai_settings.sampler_order = order;
+            console.log('Samplers reordered:', kai_settings.sampler_order);
+            saveSettingsDebounced();
+        },
+    });
 });

public/style.css

@@ -1913,6 +1913,40 @@ grammarly-extension {
     background-color: red;
 }
 
+#kobold_order {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    width: 100%;
+    padding: 5px;
+}
+
+#kobold_order > div {
+    padding: 5px;
+    padding-left: 25px;
+    width: 100%;
+    border-radius: 5px;
+    color: var(--SmartThemeBodyColor);
+    background-color: var(--black30a);
+    border: 1px solid var(--white30a);
+    cursor: grab;
+    transition: background-color 200ms ease-in-out;
+    position: relative;
+    user-select: none;
+}
+
+#kobold_order > div:hover {
+    background-color: var(--grey30a);
+}
+
+#kobold_order > div::after {
+    content: "☰";
+    left: 5px;
+    position: absolute;
+}
+
 /* ------ online status indicators and texts. 2 = kobold AI, 3 = Novel AI  ----------*/
 #online_status2,
 #online_status_horde,