feat: add drag-and-drop functionality for logit bias lists

1ebaf18210216bd5a2258212811ccc0bcb2b034e

Cohee <18619528+Cohee1207@users.noreply.github.com>

3 files changed, +49 -3Ignore whitespace
public/index.html+2 -0
@@ -6010,6 +6010,7 @@
60106010 </div>
60116011 <div id="openai_logit_bias_template" class="template_element">
60126012 <div class="openai_logit_bias_form">
6013+ <span class="drag-handle">☰</span>
60136014 <input class="openai_logit_bias_text text_pole" data-i18n="[placeholder]Text or token ids" placeholder="Text or [token ids]" />
60146015 <input class="openai_logit_bias_value text_pole" type="number" min="-100" value="0" max="100" />
60156016 <i class="menu_button fa-solid fa-xmark openai_logit_bias_remove"></i>
@@ -6017,6 +6018,7 @@
60176018 </div>
60186019 <div id="logit_bias_template" class="template_element">
60196020 <div class="logit_bias_form">
6021+ <span class="drag-handle">☰</span>
60206022 <input class="logit_bias_text text_pole" data-i18n="[placeholder]Type here..." placeholder="type here..." />
60216023 <input class="logit_bias_value text_pole" type="number" min="-100" value="0" max="100" step="0.01" />
60226024 <i class="menu_button fa-solid fa-xmark logit_bias_remove"></i>
public/scripts/logit-bias.js+24 -2
@@ -1,6 +1,6 @@
11import { saveSettingsDebounced } from '../script.js';
22import { getTextTokens } from './tokenizers.js';
33import { getSortableDelay, uuidv4 } from './utils.js';
44
55export const BIAS_CACHE = new Map();
66
@@ -16,7 +16,8 @@ export function displayLogitBias(logitBias, containerSelector) {
1616 return;
1717 }
1818
1919 const list = $(containerSelector).find('.logit_bias_list').empty();
20+ list.empty();
2021
2122 for (const entry of logitBias) {
2223 if (entry) {
@@ -24,6 +25,27 @@ export function displayLogitBias(logitBias, containerSelector) {
2425 }
2526 }
2627
28+ // Check if a sortable instance exists
29+ if (list.sortable('instance') !== undefined) {
30+ // Destroy the instance
31+ list.sortable('destroy');
32+ }
33+
34+ // Make the list sortable
35+ list.sortable({
36+ delay: getSortableDelay(),
37+ handle: '.drag-handle',
38+ stop: function () {
39+ const order = [];
40+ list.children().each(function () {
41+ order.unshift($(this).data('id'));
42+ });
43+ logitBias.sort((a, b) => order.indexOf(a.id) - order.indexOf(b.id));
44+ console.log('Logit bias reordered:', logitBias);
45+ saveSettingsDebounced();
46+ },
47+ });
48+
2749 BIAS_CACHE.delete(containerSelector);
2850}
2951
public/scripts/openai.js+23 -1
@@ -3465,7 +3465,8 @@ function onLogitBiasPresetChange() {
34653465 }
34663466
34673467 oai_settings.bias_preset_selected = value;
34683468 const list = $('.openai_logit_bias_list').empty();
3469+ list.empty();
34693470
34703471 for (const entry of preset) {
34713472 if (entry) {
@@ -3473,6 +3474,27 @@ function onLogitBiasPresetChange() {
34733474 }
34743475 }
34753476
3477+ // Check if a sortable instance exists
3478+ if (list.sortable('instance') !== undefined) {
3479+ // Destroy the instance
3480+ list.sortable('destroy');
3481+ }
3482+
3483+ // Make the list sortable
3484+ list.sortable({
3485+ delay: getSortableDelay(),
3486+ handle: '.drag-handle',
3487+ stop: function () {
3488+ const order = [];
3489+ list.children().each(function () {
3490+ order.unshift(parseInt($(this).data('id')));
3491+ });
3492+ preset.sort((a, b) => order.indexOf(preset.indexOf(a)) - order.indexOf(preset.indexOf(b)));
3493+ console.log('Logit bias reordered:', preset);
3494+ saveSettingsDebounced();
3495+ },
3496+ });
3497+
34763498 biasCache = undefined;
34773499 saveSettingsDebounced();
34783500}