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

Feature/openrouter grouping and sorting

public/index.html

@@ -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>

public/script.js

@@ -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() {

public/scripts/openai.js

@@ -5,64 +5,63 @@
 */
 
 import {
-    saveSettingsDebounced,
+    abortStatusCheck,
-    setOnlineStatus,
+    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,
-    chatCompletionDefaultPrompts, Prompt,
-    PromptManagerModule as PromptManager,
     INJECTION_POSITION,
+    Prompt,
+    promptManagerDefaultPromptOrders,
+    PromptManagerModule as PromptManager,
 } from "./PromptManager.js";
 
-import {
+import {getCustomStoppingStrings, persona_description_positions, power_user,} from "./power-user.js";
-    getCustomStoppingStrings,
+import {SECRET_KEYS, secret_state, writeSecret,} from "./secrets.js";
-    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 {countTokensOpenAI, getTokenizerModel} from "./tokenizers.js";
-import { formatInstructModeChat, formatInstructModeExamples, formatInstructModePrompt, formatInstructModeSystemPrompt } from "./instruct-mode.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) => {
+        if (true === oai_settings.openrouter_group_models) {
-            let tokens_dollar = Number(1 / (1000 * model.pricing?.prompt));
+            appendOpenRouterOptions(openRouterGroupByVendor(model_list), oai_settings.openrouter_group_models);
-            let tokens_rounded = (Math.round(tokens_dollar * 1000) / 1000).toFixed(0);
+        } else {
-            let model_description = `${model.id} | ${tokens_rounded}k t/$ | ${model.context_length} ctx`;
+            appendOpenRouterOptions(model_list);
-            $('#model_openrouter_select').append(
+        }
-                $('<option>', {
+
-                    value: model.id,
-                    text: model_description,
-                }));
-        });
         $('#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);

public/style.css

@@ -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 {