Initial vLLM support

public/scripts/textgen-models.js

@@ -7,6 +7,7 @@ let mancerModels = [];
 let togetherModels = [];
 let infermaticAIModels = [];
 let dreamGenModels = [];
+let vllmModels = [];
 let aphroditeModels = [];
 export let openRouterModels = [];
 
@@ -156,6 +157,28 @@ export async function loadOpenRouterModels(data) {
     calculateOpenRouterCost();
 }
 
+export async function loadVllmModels(data) {
+    if (!Array.isArray(data)) {
+        console.error('Invalid vLLM models data', data);
+        return;
+    }
+
+    vllmModels = data;
+
+    if (!data.find(x => x.id === textgen_settings.vllm_model)) {
+        textgen_settings.vllm_model = data[0]?.id || '';
+    }
+
+    $('#vllm_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.vllm_model;
+        $('#vllm_model').append(option);
+    }
+}
+
 export async function loadAphroditeModels(data) {
     if (!Array.isArray(data)) {
         console.error('Invalid Aphrodite models data', data);
@@ -224,6 +247,12 @@ function onOpenRouterModelSelect() {
     setGenerationParamsFromPreset({ max_length: model.context_length });
 }
 
+function onVllmModelSelect() {
+    const modelId = String($('#vllm_model').val());
+    textgen_settings.vllm_model = modelId;
+    $('#api_button_textgenerationwebui').trigger('click');
+}
+
 function onAphroditeModelSelect() {
     const modelId = String($('#aphrodite_model').val());
     textgen_settings.aphrodite_model = modelId;
@@ -310,6 +339,20 @@ function getOpenRouterModelTemplate(option) {
     `));
 }
 
+function getVllmModelTemplate(option) {
+    const model = vllmModels.find(x => x.id === option?.element?.value);
+
+    if (!option.id || !model) {
+        return option.text;
+    }
+
+    return $((`
+        <div class="flex-container flexFlowColumn">
+            <div><strong>${DOMPurify.sanitize(model.id)}</strong></div>
+        </div>
+    `));
+}
+
 function getAphroditeModelTemplate(option) {
     const model = aphroditeModels.find(x => x.id === option?.element?.value);
 
@@ -426,6 +469,7 @@ jQuery(function () {
     $('#ollama_model').on('change', onOllamaModelSelect);
     $('#openrouter_model').on('change', onOpenRouterModelSelect);
     $('#ollama_download_model').on('click', downloadOllamaModel);
+    $('#vllm_model').on('change', onVllmModelSelect);
     $('#aphrodite_model').on('change', onAphroditeModelSelect);
 
     if (!isMobile()) {
@@ -470,6 +514,13 @@ jQuery(function () {
             width: '100%',
             templateResult: getOpenRouterModelTemplate,
         });
+        $('#vllm_model').select2({
+            placeholder: 'Select a model',
+            searchInputPlaceholder: 'Search models...',
+            searchInputCssClass: 'text_pole',
+            width: '100%',
+            templateResult: getVllmModelTemplate,
+        });
         $('#aphrodite_model').select2({
             placeholder: 'Select a model',
             searchInputPlaceholder: 'Search models...',