Add OpenRouter as a text completion source

public/scripts/textgen-models.js

@@ -1,10 +1,12 @@
 import { callPopup, getRequestHeaders, setGenerationParamsFromPreset } from '../script.js';
 import { isMobile } from './RossAscends-mods.js';
 import { textgenerationwebui_settings as textgen_settings, textgen_types } from './textgen-settings.js';
+import { tokenizers } from './tokenizers.js';
 
 let mancerModels = [];
 let togetherModels = [];
 let infermaticAIModels = [];
+export let openRouterModels = [];
 
 export async function loadOllamaModels(data) {
     if (!Array.isArray(data)) {
@@ -101,6 +103,28 @@ export async function loadMancerModels(data) {
     }
 }
 
+export async function loadOpenRouterModels(data) {
+    if (!Array.isArray(data)) {
+        console.error('Invalid OpenRouter models data', data);
+        return;
+    }
+
+    openRouterModels = data;
+
+    if (!data.find(x => x.id === textgen_settings.openrouter_model)) {
+        textgen_settings.openrouter_model = data[0]?.id || '';
+    }
+
+    $('#openrouter_model').empty();
+    for (const model of data) {
+        const option = document.createElement('option');
+        option.value = model.id;
+        option.text = model.id;
+        option.selected = model.id === textgen_settings.openrouter_model;
+        $('#openrouter_model').append(option);
+    }
+}
+
 function onMancerModelSelect() {
     const modelId = String($('#mancer_model').val());
     textgen_settings.mancer_model = modelId;
@@ -132,6 +156,14 @@ function onOllamaModelSelect() {
     $('#api_button_textgenerationwebui').trigger('click');
 }
 
+function onOpenRouterModelSelect() {
+    const modelId = String($('#openrouter_model').val());
+    textgen_settings.openrouter_model = modelId;
+    $('#api_button_textgenerationwebui').trigger('click');
+    const model = openRouterModels.find(x => x.id === modelId);
+    setGenerationParamsFromPreset({ max_length: model.context_length });
+}
+
 function getMancerModelTemplate(option) {
     const model = mancerModels.find(x => x.id === option?.element?.value);
 
@@ -179,6 +211,25 @@ function getInfermaticAIModelTemplate(option) {
     `));
 }
 
+function getOpenRouterModelTemplate(option) {
+    const model = openRouterModels.find(x => x.id === option?.element?.value);
+
+    if (!option.id || !model) {
+        return option.text;
+    }
+
+    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/$ `;
+
+    return $((`
+        <div class="flex-container flexFlowColumn" title="${DOMPurify.sanitize(model.id)}">
+            <div><strong>${DOMPurify.sanitize(model.name)}</strong> | ${model.context_length} ctx | <small>${price}</small></div>
+        </div>
+    `));
+}
+
 async function downloadOllamaModel() {
     try {
         const serverUrl = textgen_settings.server_urls[textgen_types.OLLAMA];
@@ -220,11 +271,25 @@ async function downloadOllamaModel() {
     }
 }
 
+export function getCurrentOpenRouterModelTokenizer() {
+    const modelId = textgen_settings.openrouter_model;
+    const model = openRouterModels.find(x => x.id === modelId);
+    switch (model?.architecture?.tokenizer) {
+        case 'Llama2':
+            return tokenizers.LLAMA;
+        case 'Mistral':
+            return tokenizers.MISTRAL;
+        default:
+            return tokenizers.OPENAI;
+    }
+}
+
 jQuery(function () {
     $('#mancer_model').on('change', onMancerModelSelect);
     $('#model_togetherai_select').on('change', onTogetherModelSelect);
     $('#model_infermaticai_select').on('change', onInfermaticAIModelSelect);
     $('#ollama_model').on('change', onOllamaModelSelect);
+    $('#openrouter_model').on('change', onOpenRouterModelSelect);
     $('#ollama_download_model').on('click', downloadOllamaModel);
 
     if (!isMobile()) {
@@ -255,5 +320,12 @@ jQuery(function () {
             width: '100%',
             templateResult: getInfermaticAIModelTemplate,
         });
+        $('#openrouter_model').select2({
+            placeholder: 'Select a model',
+            searchInputPlaceholder: 'Search models...',
+            searchInputCssClass: 'text_pole',
+            width: '100%',
+            templateResult: getOpenRouterModelTemplate,
+        });
     }
 });