rixty
/
SillyTavern
mirror of https://github.com/SillyTavern/SillyTavern.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1350 from artisticMink/feature/openrouter-grouping-and-sorting 

Feature/openrouter grouping and sorting
This commit is contained in:
Cohee 2023-11-12 22:13:40 +02:00 committed by GitHub
parent 2092f849f7 5bcd49b7ca
commit cd440f6539
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 168 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
public/index.html
View File

@ -1831,6 +1831,36 @@
<option data-i18n="Connect to the API">-- Connect to the API --</option>
</select>
</div>
<div class="marginTopBot5">
<div class="inline-drawer wide100p">
<div class="inline-drawer-toggle inline-drawer-header">
<b data-i18n="Model Order">OpenRouter Model Sorting</b>
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div>
<div class="inline-drawer-content m-b-1">
<div class="marginTopBot5">
<label for="openrouter_sort_models" class="checkbox_label">
<select id="openrouter_sort_models">
<option data-i18n="Alphabetically" value="alphabetically">Alphabetically</option>
<option data-i18n="Price" value="pricing.prompt">Price (cheapest)</option>
<option data-i18n="Context Size" value="context_length">Context Size</option>
</select>
</label>
</div>
<div class="marginTopBot5">
<label for="openrouter_group_models" class="checkbox_label">
<input id="openrouter_group_models" type="checkbox"/>
<span data-i18n="Group by vendors">Group by vendors</span>
</label>
<div class="toggle-description justifyLeft wide100p">
<span data-i18n="Group by vendors Description">
Put OpenAI models in one group, Anthropic models in other group, etc. Can be combined with sorting.
</span>
</div>
</div>
</div>
</div>
</div>
<div class="marginTopBot5">
<label for="openrouter_use_fallback" class="checkbox_label">
<input id="openrouter_use_fallback" type="checkbox" />
@ -1932,7 +1962,7 @@
<select id="model_palm_select" class="displayNone"></select>
</form>
<div class="flex-container flex">
<div id="api_button_openai" class="menu_button menu_button_icon" type="submit" data-i18n="Connect">Connect</div>
<div id="api_button_openai" class="api_button menu_button menu_button_icon" type="submit" data-i18n="Connect">Connect</div>
<div class="api_loading menu_button" data-i18n="Cancel">Cancel</div>
<div data-source="openrouter" id="openrouter_authorize" class="menu_button menu_button_icon" title="Get your OpenRouter API token using OAuth flow. You will be redirected to openrouter.ai" data-i18n="[title]Get your OpenRouter API token using OAuth flow. You will be redirected to openrouter.ai">Authorize</div>
<div id="test_api_button" class="menu_button menu_button_icon" title="Verifies your API connection by sending a short test message. Be aware that you'll be credited for it!" data-i18n="[title]Verifies your API connection by sending a short test message. Be aware that you'll be credited for it!">Test Message</div>

4
public/script.js
View File

@ -927,12 +927,12 @@ async function getStatus() {
export function startStatusLoading() {
$(".api_loading").show();
$(".api_button").attr("disabled", "disabled").addClass("disabled");
$(".api_button").addClass("disabled");
}
export function stopStatusLoading() {
$(".api_loading").hide();
$(".api_button").removeAttr("disabled").removeClass("disabled");
$(".api_button").removeClass("disabled");
}
export function resultCheckStatus() {

180
public/scripts/openai.js
View File

@ -5,64 +5,63 @@
*/
import {
saveSettingsDebounced,
setOnlineStatus,
abortStatusCheck,
callPopup,
characters,
event_types,
eventSource,
extension_prompt_types,
Generate,
getExtensionPrompt,
getNextMessageId,
getRequestHeaders,
getStoppingStrings,
is_send_press,
main_api,
MAX_INJECTION_DEPTH,
name1,
name2,
extension_prompt_types,
characters,
this_chid,
callPopup,
getRequestHeaders,
system_message_types,
replaceBiasMarkup,
is_send_press,
Generate,
main_api,
eventSource,
event_types,
substituteParams,
MAX_INJECTION_DEPTH,
getStoppingStrings,
getNextMessageId,
replaceItemizedPromptText,
startStatusLoading,
resultCheckStatus,
abortStatusCheck,
saveSettingsDebounced,
setOnlineStatus,
startStatusLoading,
substituteParams,
system_message_types,
this_chid,
} from "../script.js";
import { groups, selected_group } from "./group-chats.js";
import {groups, selected_group} from "./group-chats.js";
import {
promptManagerDefaultPromptOrders,
chatCompletionDefaultPrompts, Prompt,
PromptManagerModule as PromptManager,
chatCompletionDefaultPrompts,
INJECTION_POSITION,
Prompt,
promptManagerDefaultPromptOrders,
PromptManagerModule as PromptManager,
} from "./PromptManager.js";
import {
getCustomStoppingStrings,
persona_description_positions,
power_user,
} from "./power-user.js";
import {
SECRET_KEYS,
secret_state,
writeSecret,
} from "./secrets.js";
import {getCustomStoppingStrings, persona_description_positions, power_user,} from "./power-user.js";
import {SECRET_KEYS, secret_state, writeSecret,} from "./secrets.js";
import {
delay,
download,
getBase64Async,
getFileText, getSortableDelay,
getFileText,
getSortableDelay,
isDataURL,
parseJsonFile,
resetScrollHeight,
stringFormat,
} from "./utils.js";
import { countTokensOpenAI, getTokenizerModel } from "./tokenizers.js";
import { formatInstructModeChat, formatInstructModeExamples, formatInstructModePrompt, formatInstructModeSystemPrompt } from "./instruct-mode.js";
import {countTokensOpenAI, getTokenizerModel} from "./tokenizers.js";
import {
formatInstructModeChat,
formatInstructModeExamples,
formatInstructModePrompt,
formatInstructModeSystemPrompt
} from "./instruct-mode.js";
export {
openai_msgs,
@ -209,6 +208,8 @@ const default_settings = {
openrouter_model: openrouter_website_model,
openrouter_use_fallback: false,
openrouter_force_instruct: false,
openrouter_group_models: false,
openrouter_sort_models: 'alphabetically',
jailbreak_system: false,
reverse_proxy: '',
legacy_streaming: false,
@ -257,6 +258,8 @@ const oai_settings = {
openrouter_model: openrouter_website_model,
openrouter_use_fallback: false,
openrouter_force_instruct: false,
openrouter_group_models: false,
openrouter_sort_models: 'alphabetically',
jailbreak_system: false,
reverse_proxy: '',
legacy_streaming: false,
@ -1241,18 +1244,16 @@ function saveModelList(data) {
model_list.sort((a, b) => a?.id && b?.id && a.id.localeCompare(b.id));
if (oai_settings.chat_completion_source == chat_completion_sources.OPENROUTER) {
model_list = openRouterSortBy(model_list, oai_settings.openrouter_sort_models);
$('#model_openrouter_select').empty();
$('#model_openrouter_select').append($('<option>', { value: openrouter_website_model, text: 'Use OpenRouter website setting' }));
model_list.forEach((model) => {
let tokens_dollar = Number(1 / (1000 * model.pricing?.prompt));
let tokens_rounded = (Math.round(tokens_dollar * 1000) / 1000).toFixed(0);
let model_description = `${model.id} | ${tokens_rounded}k t/$ | ${model.context_length} ctx`;
$('#model_openrouter_select').append(
$('<option>', {
value: model.id,
text: model_description,
}));
});
if (true === oai_settings.openrouter_group_models) {
appendOpenRouterOptions(openRouterGroupByVendor(model_list), oai_settings.openrouter_group_models);
} else {
appendOpenRouterOptions(model_list);
}
$('#model_openrouter_select').val(oai_settings.openrouter_model).trigger('change');
}
@ -1273,6 +1274,67 @@ function saveModelList(data) {
}
}
function appendOpenRouterOptions(model_list, groupModels = false, sort = false) {
$('#model_openrouter_select').append($('<option>', { value: openrouter_website_model, text: 'Use OpenRouter website setting' }));
const appendOption = (model, parent = null) => {
let tokens_dollar = Number(1 / (1000 * model.pricing?.prompt));
let tokens_rounded = (Math.round(tokens_dollar * 1000) / 1000).toFixed(0);
const price = 0 === Number(model.pricing?.prompt) ? 'Free' : `${tokens_rounded}k t/$ `;
let model_description = `${model.id} | ${price} | ${model.context_length} ctx`;
(parent || $('#model_openrouter_select')).append(
$('<option>', {
value: model.id,
text: model_description,
}));
};
if (groupModels) {
model_list.forEach((models, vendor) => {
const optgroup = $(`<optgroup label="${vendor}">`);
models.forEach((model) => {
appendOption(model, optgroup);
});
$('#model_openrouter_select').append(optgroup);
});
} else {
model_list.forEach((model) => {
appendOption(model);
});
}
}
const openRouterSortBy = (data, property = 'alphabetically') => {
return data.sort((a, b) => {
if (property === 'context_length') {
return b.context_length - a.context_length;
} else if (property === 'pricing.prompt') {
return parseFloat(a.pricing.prompt) - parseFloat(b.pricing.prompt);
} else {
// Alphabetically
return a?.id && b?.id && a.id.localeCompare(b.id);
}
});
};
function openRouterGroupByVendor(array) {
return array.reduce((acc, curr) => {
const vendor = curr.id.split('/')[0];
if (!acc.has(vendor)) {
acc.set(vendor, []);
}
acc.get(vendor).push(curr);
return acc;
}, new Map());
}
async function sendAltScaleRequest(openai_msgs_tosend, logit_bias, signal, type) {
const generate_url = '/generate_altscale';
@ -2202,6 +2264,8 @@ function loadOpenAISettings(data, settings) {
oai_settings.claude_model = settings.claude_model ?? default_settings.claude_model;
oai_settings.windowai_model = settings.windowai_model ?? default_settings.windowai_model;
oai_settings.openrouter_model = settings.openrouter_model ?? default_settings.openrouter_model;
oai_settings.openrouter_group_models = settings.openrouter_group_models ?? default_settings.openrouter_group_models;
oai_settings.openrouter_sort_models = settings.openrouter_sort_models ?? default_settings.openrouter_sort_models;
oai_settings.openrouter_use_fallback = settings.openrouter_use_fallback ?? default_settings.openrouter_use_fallback;
oai_settings.openrouter_force_instruct = settings.openrouter_force_instruct ?? default_settings.openrouter_force_instruct;
oai_settings.ai21_model = settings.ai21_model ?? default_settings.ai21_model;
@ -2246,6 +2310,7 @@ function loadOpenAISettings(data, settings) {
$('#openai_max_context').val(oai_settings.openai_max_context);
$('#openai_max_context_counter').val(`${oai_settings.openai_max_context}`);
$('#model_openrouter_select').val(oai_settings.openrouter_model);
$('#openrouter_sort_models').val(oai_settings.openrouter_sort_models);
$('#openai_max_tokens').val(oai_settings.openai_max_tokens);
@ -2260,6 +2325,7 @@ function loadOpenAISettings(data, settings) {
$('#scale-alt').prop('checked', oai_settings.use_alt_scale);
$('#openrouter_use_fallback').prop('checked', oai_settings.openrouter_use_fallback);
$('#openrouter_force_instruct').prop('checked', oai_settings.openrouter_force_instruct);
$('#openrouter_group_models').prop('checked', oai_settings.openrouter_group_models);
$('#squash_system_messages').prop('checked', oai_settings.squash_system_messages);
if (settings.impersonation_prompt !== undefined) oai_settings.impersonation_prompt = settings.impersonation_prompt;
@ -2423,6 +2489,8 @@ async function saveOpenAIPreset(name, settings, triggerUi = true) {
openrouter_model: settings.openrouter_model,
openrouter_use_fallback: settings.openrouter_use_fallback,
openrouter_force_instruct: settings.openrouter_force_instruct,
openrouter_group_models: settings.openrouter_group_models,
openrouter_sort_models: settings.openrouter_sort_models,
ai21_model: settings.ai21_model,
temperature: settings.temp_openai,
frequency_penalty: settings.freq_pen_openai,
@ -2786,6 +2854,8 @@ function onSettingsPresetChange() {
openrouter_model: ['#model_openrouter_select', 'openrouter_model', false],
openrouter_use_fallback: ['#openrouter_use_fallback', 'openrouter_use_fallback', true],
openrouter_force_instruct: ['#openrouter_force_instruct', 'openrouter_force_instruct', true],
openrouter_group_models: ['#openrouter_group_models', 'openrouter_group_models', false],
openrouter_sort_models: ['#openrouter_sort_models', 'openrouter_sort_models', false],
ai21_model: ['#model_ai21_select', 'ai21_model', false],
openai_max_context: ['#openai_max_context', 'openai_max_context', false],
openai_max_tokens: ['#openai_max_tokens', 'openai_max_tokens', false],
@ -3094,6 +3164,10 @@ async function onModelChange() {
eventSource.emit(event_types.CHATCOMPLETION_MODEL_CHANGED, value);
}
async function onOpenrouterModelSortChange() {
await getStatusOpen();
}
async function onNewPresetClick() {
const popupText = `
<h3>Preset name:</h3>
@ -3566,6 +3640,16 @@ $(document).ready(async function () {
saveSettingsDebounced();
});
$('#openrouter_group_models').on('input', function () {
oai_settings.openrouter_group_models = !!$(this).prop('checked');
saveSettingsDebounced();
});
$('#openrouter_sort_models').on('input', function () {
oai_settings.openrouter_sort_models = String($(this).val());
saveSettingsDebounced();
});
$('#squash_system_messages').on('input', function () {
oai_settings.squash_system_messages = !!$(this).prop('checked');
saveSettingsDebounced();
@ -3588,6 +3672,8 @@ $(document).ready(async function () {
$("#model_scale_select").on("change", onModelChange);
$("#model_palm_select").on("change", onModelChange);
$("#model_openrouter_select").on("change", onModelChange);
$("#openrouter_group_models").on("change", onOpenrouterModelSortChange);
$("#openrouter_sort_models").on("change", onOpenrouterModelSortChange);
$("#model_ai21_select").on("change", onModelChange);
$("#settings_preset_openai").on("change", onSettingsPresetChange);
$("#new_oai_preset").on("click", onNewPresetClick);

3
public/style.css
View File

@ -1383,7 +1383,8 @@ select option:not(:checked) {
.menu_button.disabled {
filter: brightness(75%) grayscale(1);
cursor: not-allowed;
opacity: 0.5;
pointer-events: none;
}
.fav_on {