From a16e34bcef721775b365e4093eba0ca0234641e0 Mon Sep 17 00:00:00 2001
From: artisticMink <christian.pahren@googlemail.com>
Date: Sun, 12 Nov 2023 15:15:30 +0100
Subject: [PATCH] Add optional toggle for grouping openrouter models

By vendor
---
 public/index.html        |  6 ++++
 public/scripts/openai.js | 69 +++++++++++++++++++++++++++++++++-------
 2 files changed, 64 insertions(+), 11 deletions(-)

diff --git a/public/index.html b/public/index.html
index d89ed730e..a50b3d0a3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1831,6 +1831,12 @@
                                     <option data-i18n="Connect to the API">-- Connect to the API --</option>
                                 </select>
                             </div>
+                            <div class="marginTopBot5">
+                                <label for="openrouter_group_options" class="checkbox_label">
+                                    <input id="openrouter_group_options" type="checkbox" onchange="document.getElementById('chat_completion_source').dispatchEvent(new Event('change'))"/>
+                                    <span data-i18n="Group by vendor names">Group by vendor names</span>
+                                </label>
+                            </div>
                             <div class="marginTopBot5">
                                 <label for="openrouter_use_fallback" class="checkbox_label">
                                     <input id="openrouter_use_fallback" type="checkbox" />
diff --git a/public/scripts/openai.js b/public/scripts/openai.js
index 7c1ed178b..1975aafae 100644
--- a/public/scripts/openai.js
+++ b/public/scripts/openai.js
@@ -1242,17 +1242,14 @@ function saveModelList(data) {
 
     if (oai_settings.chat_completion_source == chat_completion_sources.OPENROUTER) {
         $('#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,
-                }));
-        });
+
+        const groupModels = document.getElementById('openrouter_group_options')?.checked ?? false;
+        if (groupModels) {
+            appendOpenRouterOptions(groupByVendor(model_list), groupModels);
+        } else {
+            appendOpenRouterOptions(model_list);
+        }
+
         $('#model_openrouter_select').val(oai_settings.openrouter_model).trigger('change');
     }
 
@@ -1273,6 +1270,53 @@ 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);
+        let model_description = `${model.id} | ${tokens_rounded}k t/$ | ${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);
+        });
+    }
+}
+
+function groupByVendor(array) {
+    const unsorted = 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());
+
+    return new Map([...unsorted.entries()].sort());
+}
+
 async function sendAltScaleRequest(openai_msgs_tosend, logit_bias, signal, type) {
     const generate_url = '/generate_altscale';
 
@@ -2202,6 +2246,7 @@ 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_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 +2291,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_group_models').val(oai_settings.openrouter_group_models);
 
     $('#openai_max_tokens').val(oai_settings.openai_max_tokens);
 
@@ -2786,6 +2832,7 @@ 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],
         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],