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

1ebaf18210216bd5a2258212811ccc0bcb2b034e

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

3 files changed, +49 -3Showing whitespace changes
public/index.html+2 -0
@@ -6010,6 +6010,7 @@
6010 </div>6010 </div>
6011 <div id="openai_logit_bias_template" class="template_element">6011 <div id="openai_logit_bias_template" class="template_element">
6012 <div class="openai_logit_bias_form">6012 <div class="openai_logit_bias_form">
6013 <span class="drag-handle">☰</span>
6013 <input class="openai_logit_bias_text text_pole" data-i18n="[placeholder]Text or token ids" placeholder="Text or [token ids]" />6014 <input class="openai_logit_bias_text text_pole" data-i18n="[placeholder]Text or token ids" placeholder="Text or [token ids]" />
6014 <input class="openai_logit_bias_value text_pole" type="number" min="-100" value="0" max="100" />6015 <input class="openai_logit_bias_value text_pole" type="number" min="-100" value="0" max="100" />
6015 <i class="menu_button fa-solid fa-xmark openai_logit_bias_remove"></i>6016 <i class="menu_button fa-solid fa-xmark openai_logit_bias_remove"></i>
@@ -6017,6 +6018,7 @@
6017 </div>6018 </div>
6018 <div id="logit_bias_template" class="template_element">6019 <div id="logit_bias_template" class="template_element">
6019 <div class="logit_bias_form">6020 <div class="logit_bias_form">
6021 <span class="drag-handle">☰</span>
6020 <input class="logit_bias_text text_pole" data-i18n="[placeholder]Type here..." placeholder="type here..." />6022 <input class="logit_bias_text text_pole" data-i18n="[placeholder]Type here..." placeholder="type here..." />
6021 <input class="logit_bias_value text_pole" type="number" min="-100" value="0" max="100" step="0.01" />6023 <input class="logit_bias_value text_pole" type="number" min="-100" value="0" max="100" step="0.01" />
6022 <i class="menu_button fa-solid fa-xmark logit_bias_remove"></i>6024 <i class="menu_button fa-solid fa-xmark logit_bias_remove"></i>
public/scripts/logit-bias.js+24 -2
@@ -1,6 +1,6 @@
1import { saveSettingsDebounced } from '../script.js';1import { saveSettingsDebounced } from '../script.js';
2import { getTextTokens } from './tokenizers.js';2import { getTextTokens } from './tokenizers.js';
3import { uuidv4 } from './utils.js';3import { getSortableDelay, uuidv4 } from './utils.js';
44
5export const BIAS_CACHE = new Map();5export const BIAS_CACHE = new Map();
66
@@ -16,7 +16,8 @@ export function displayLogitBias(logitBias, containerSelector) {
16 return;16 return;
17 }17 }
1818
19 $(containerSelector).find('.logit_bias_list').empty();19 const list = $(containerSelector).find('.logit_bias_list');
20 list.empty();
2021
21 for (const entry of logitBias) {22 for (const entry of logitBias) {
22 if (entry) {23 if (entry) {
@@ -24,6 +25,27 @@ export function displayLogitBias(logitBias, containerSelector) {
24 }25 }
25 }26 }
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
27 BIAS_CACHE.delete(containerSelector);49 BIAS_CACHE.delete(containerSelector);
28}50}
2951
public/scripts/openai.js+23 -1
@@ -3465,7 +3465,8 @@ function onLogitBiasPresetChange() {
3465 }3465 }
34663466
3467 oai_settings.bias_preset_selected = value;3467 oai_settings.bias_preset_selected = value;
3468 $('.openai_logit_bias_list').empty();3468 const list = $('.openai_logit_bias_list');
3469 list.empty();
34693470
3470 for (const entry of preset) {3471 for (const entry of preset) {
3471 if (entry) {3472 if (entry) {
@@ -3473,6 +3474,27 @@ function onLogitBiasPresetChange() {
3473 }3474 }
3474 }3475 }
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
3476 biasCache = undefined;3498 biasCache = undefined;
3477 saveSettingsDebounced();3499 saveSettingsDebounced();
3478}3500}