make zensliders ctx respect unlock state

public/scripts/power-user.js

@@ -491,14 +491,17 @@ async function switchZenSliders() {
         $(`#textgenerationwebui_api-settings :input[type='number']:not([id^='seed']),
             #kobold_api-settings :input[type='number']:not([id^='seed'])`).hide()
         //hide original sliders
+        //exclude max context because its creation is handled by switchMaxContext()
         $(`#textgenerationwebui_api-settings input[type='range'],
             #kobold_api-settings input[type='range'],
-            #pro-settings-block input[type='range']`)
+            #pro-settings-block input[type='range']:not(#max_context)`)
             .hide()
             .each(function () {
                 //make a zen slider for each original slider
                 CreateZenSliders($(this))
             })
+        //this is for when zensliders is toggled after pageload
+        switchMaxContextSize()
     } else {
         $("#clickSlidersTips").show()
         revertOriginalSliders();
@@ -516,6 +519,7 @@ async function switchZenSliders() {
         $('div[id$="_zenslider"]').remove();
     }
 
+}
 async function CreateZenSliders(elmnt) {
     //await delay(100)
     var originalSlider = elmnt;
@@ -527,7 +531,6 @@ async function switchZenSliders() {
     var numSteps = 10
     var decimals = 2
     var offVal
-
     if (sliderID == 'amount_gen') {
         decimals = 0
         var steps = [16, 50, 100, 150, 200, 256, 300, 400, 512, 1024];
@@ -556,7 +559,6 @@ async function switchZenSliders() {
         numSteps = 50
         decimals = 1
     }
-
     //customize steps
     if (sliderID == 'mirostat_mode_textgenerationwebui' ||
         sliderID == 'mirostat_mode_kobold') {
@@ -587,7 +589,6 @@ async function switchZenSliders() {
         sliderID == 'length_penalty_textgenerationwebui') {
         numSteps = 50
     }
-
     //customize off values
     if (sliderID == 'presence_pen_textgenerationwebui' ||
         sliderID == 'freq_pen_textgenerationwebui' ||
@@ -614,7 +615,6 @@ async function switchZenSliders() {
         sliderID == 'min_length_textgenerationwebui') {
         offVal = 0
     }
-
     if (sliderID == 'rep_pen_textgenerationwebui' ||
         sliderID == 'rep_pen' ||
         sliderID == 'tfs_textgenerationwebui' ||
@@ -631,23 +631,17 @@ async function switchZenSliders() {
         sliderID == 'guidance_scale') {
         offVal = 1
     }
-
-
-
     if (sliderID == 'guidance_scale_textgenerationwebui') {
         numSteps = 78
     }
-
     //customize amt gen steps
     if (sliderID !== 'amount_gen') {
         var stepScale = sliderRange / numSteps
     }
-
     var newSlider = $("<div>")
         .attr('id', `${sliderID}_zenslider`)
         .css("width", "100%")
         .insertBefore(originalSlider);
-
     newSlider.slider({
         value: sliderValue,
         step: stepScale,
@@ -662,12 +656,12 @@ async function switchZenSliders() {
                 var leftMargin = ((stepNumber) / numSteps) * 50 * -1
                 handle.text(handleText)
                     .css('margin-left', `${leftMargin}px`)
-                    console.log(`initial value:${handleText}, stepNum:${stepNumber}, numSteps:${numSteps}, left-margin:${leftMargin}`)
+                //console.log(`initial value:${handleText}, stepNum:${stepNumber}, numSteps:${numSteps}, left-margin:${leftMargin}`)
             } else {
                 //handling creation for all other sliders
                 var numVal = Number(sliderValue).toFixed(decimals)
                 offVal = Number(offVal).toFixed(decimals)
-                    console.log(`${sliderID} ON LOAD OFFVAL ${offVal}`)
+                //console.log(`${sliderID}: offVal ${offVal}`)
                 if (numVal === offVal) {
                     handle.text('Off').css('color', 'rgba(128,128,128,0.5');
                 } else {
@@ -721,29 +715,39 @@ async function switchZenSliders() {
         },
         slide: handleSlideEvent
     });
-
     function handleSlideEvent(event, ui, type) {
         var handle = $(this).find(".ui-slider-handle");
         var numVal = Number(ui.value).toFixed(decimals);
         offVal = Number(offVal).toFixed(decimals);
-            var stepNumber = ((ui.value - sliderMin) / stepScale);
+        //console.log(numVal, sliderMin, sliderMax, numVal > sliderMax, numVal < sliderMin)
+        if (numVal > sliderMax) {
+            console.log('clamping numVal to sliderMax')
+            numVal = sliderMax
+        }
+        if (numVal < sliderMin) {
+            console.log('clamping numVal to sliderMin')
+            numVal = sliderMin
+        }
+        var sliderValRange = sliderMax - sliderMin
+        var stepNumber = ((ui.value - sliderMin) / stepScale).toFixed(0);
         var handleText = (ui.value);
         var leftMargin = (stepNumber / numSteps) * 50 * -1;
         var percentOfMax = Number((ui.value / sliderMax)) //what % our value is of the max
         var perStepPercent = 1 / numSteps //how far in % each step should be on the slider
         var leftPos = newSlider.width() * (stepNumber * perStepPercent) //how big of a left margin to give the slider for manual inputs
-
+        /* console.log(`
-            console.log(`
         numVal: ${numVal},
-            offVal: ${offVal},
+        sliderMax: ${sliderMax}
-            initial value: ${handleText},
+        sliderMin: ${sliderMin}
-            stepNum: ${stepNumber},
+        sliderValRange: ${sliderValRange}
-            numSteps: ${numSteps},
+        stepScale: ${stepScale}
-            left-margin: ${leftMargin},
+        Step: ${stepNumber} of ${numSteps}
+        offVal: ${offVal}
+        initial value: ${handleText}
+        left-margin: ${leftMargin}
         width: ${newSlider.width()}
         percent of max: ${percentOfMax}
-            left: ${leftPos}`)
+        left: ${leftPos}`) */
-
         //special handling for response length slider, pulls text aliases for step values from an array
         if (newSlider.attr('id') == 'amount_gen_zenslider') {
             handleText = steps[stepNumber]
@@ -758,10 +762,11 @@ async function switchZenSliders() {
             newSlider.val(handleText)
         }
         //for manually typed-in values we must adjust left position because JQUI doesn't do it for us
-            if (type === 'manual') { handle.css('left', leftPos) }
+        //if (type === 'manual') {
+        handle.css('left', leftPos)
+        //}
         //adjust a negative left margin to avoid overflowing right side of slider body
         handle.css('margin-left', `${leftMargin}px`);
-
         originalSlider.val(handleText);
         originalSlider.trigger('input');
         originalSlider.trigger('change');
@@ -770,9 +775,6 @@ async function switchZenSliders() {
     await delay(1)
     originalSlider.hide();
 };
-
-}
-
 function switchUiMode() {
     const fastUi = localStorage.getItem(storage_keys.fast_ui_mode);
     power_user.fast_ui_mode = fastUi === null ? true : fastUi == "true";
@@ -1489,6 +1491,10 @@ function switchMaxContextSize() {
             element.val(maxValue).trigger('input');
         }
     }
+    if (power_user.enableZenSliders) {
+        $("#max_context_zenslider").remove()
+        CreateZenSliders($("#max_context"))
+    }
 }
 
 // Fetch a compiled object of all preset settings