From 78c599a413820a9d6264dbea131f4b8bf013134f Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Thu, 10 Aug 2023 12:34:22 +0300
Subject: [PATCH] #903 Load koboldcpp samplers order + show sampler ids

---
 public/index.html              | 42 ++++++++++++++++++++++++++--------
 public/scripts/kai-settings.js |  9 +++++++-
 public/style.css               |  3 +++
 3 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/public/index.html b/public/index.html
index 06626b74e..58f8d72f2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -787,21 +787,45 @@
                                         </label>
                                     </div>
                                     <div class="range-block flexFlowColumn">
-                                        <div class="range-block-title" data-i18n="Samplers Order">
-                                            Samplers Order
+                                        <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="kobold_order">
-                                            <div data-id="0" data-i18n="Top K">Top K</div>
-                                            <div data-id="1" data-i18n="Top A">Top A</div>
-                                            <div data-id="2" data-i18n="Top P">Top P</div>
-                                            <div data-id="3" data-i18n="Tail Free Sampling">Tail Free Sampling</div>
-                                            <div data-id="4" data-i18n="Typical Sampling">Typical Sampling</div>
-                                            <div data-id="5" data-i18n="Temperature">Temperature</div>
-                                            <div data-id="6" data-i18n="Repetition Penalty">Repetition Penalty</div>
+                                            <div data-id="0">
+                                                <span data-i18n="Top K">Top K</span>
+                                                <small>0</small>
+                                            </div>
+                                            <div data-id="1">
+                                                <span data-i18n="Top A">Top A</span>
+                                                <small>1</small>
+                                            </div>
+                                            <div data-id="2">
+                                                <span data-i18n="Top P">Top P</span>
+                                                <small>2</small>
+                                            </div>
+                                            <div data-id="3">
+                                                <span data-i18n="Tail Free Sampling">Tail Free Sampling</span>
+                                                <small>3</small>
+                                            </div>
+                                            <div data-id="4">
+                                                <span data-i18n="Typical Sampling">Typical Sampling</span>
+                                                <small>4</small>
+                                            </div>
+                                            <div data-id="5">
+                                                <span data-i18n="Temperature">Temperature</span>
+                                                <small>5</small>
+                                            </div>
+                                            <div data-id="6">
+                                                <span data-i18n="Repetition Penalty">Repetition Penalty</span>
+                                                <small>6</small>
+                                            </div>
+                                        </div>
+                                        <div id="samplers_order_recommended" class="menu_button menu_button_icon">
+                                            <span data-i18n="Load koboldcpp order">Load koboldcpp order</span>
                                         </div>
                                     </div>
                                 </div>
diff --git a/public/scripts/kai-settings.js b/public/scripts/kai-settings.js
index 07bb1b0d1..302e45d5d 100644
--- a/public/scripts/kai-settings.js
+++ b/public/scripts/kai-settings.js
@@ -35,6 +35,7 @@ const kai_settings = {
 
 const MIN_STOP_SEQUENCE_VERSION = '1.2.2';
 const MIN_STREAMING_KCPPVERSION = '1.30';
+const KOBOLDCPP_ORDER = [6, 0, 1, 3, 4, 2, 5];
 
 function formatKoboldUrl(value) {
     try {
@@ -143,7 +144,7 @@ export async function generateKoboldWithStreaming(generate_data, signal) {
 
             if (done) {
                 return;
-           }
+            }
         }
     }
 }
@@ -276,4 +277,10 @@ $(document).ready(function () {
             saveSettingsDebounced();
         },
     });
+
+    $('#samplers_order_recommended').on('click', function () {
+        kai_settings.sampler_order = KOBOLDCPP_ORDER;
+        sortItemsByOrder(kai_settings.sampler_order);
+        saveSettingsDebounced();
+    });
 });
diff --git a/public/style.css b/public/style.css
index 696973518..9fa03bd64 100644
--- a/public/style.css
+++ b/public/style.css
@@ -2164,6 +2164,9 @@ grammarly-extension {
     transition: background-color 200ms ease-in-out;
     position: relative;
     user-select: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 
 #kobold_order>div:hover {