Open router provider filter (#5208) * Added filter for OpenRouter models provider selection Now if a model is selected, only available providers for that model will show. Wanted to do the same for the quants, but I think the API is not returning the quants available for each model at the moment. Used existing API that for some reason was not consumed. * Added filter for OpenRouter providers Now if a model is selected, only the providers available show. Wanted to do the same with the quants but it seems the OpenRouter API is not giving the available quants list at the moment for each model. * gua * Now it also works on chat completion and only disables options * detail * Warning added * eslint * Move inline styles to CSS --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

8f5c8f0a8edce57ae3fa9458e379784b07311e06

GERNOMA <54479238+GERNOMA@users.noreply.github.com>

Signed

Parents: 334635ce7487142699e31107201763557772f560

public/css/toggle-dependent.css+6 -0 Viewed

 #adaptive_p_block:has([data-tg-samplers="adaptive_target"][style*="display: none"]):has([data-tg-samplers="adaptive_decay"][style*="display: none"]) {
     display: none;
+}
++
 +#openrouter_provider_warning_text,
 +#openrouter_provider_warning_chat {
 +    color: var(--warning);
 +    margin-left: 5px;
 +}

public/index.html+8 -2 Viewed

                                     </select>
                                 </div>
                                 <div>
 -                                    <h4 data-i18n="Model Providers">Model Providers</h4>
 +                                    <h4>
 +                                        <span data-i18n="Model Providers">Model Providers</span>
 +                                        <i id="openrouter_provider_warning_text" class="fa-solid fa-circle-exclamation displayNone" title="Deselect inapplicable provider(s) or select an applicable provider to avoid a 404 error."></i>
 +                                    </h4>
                                     <select id="openrouter_providers_text" class="openrouter_providers" multiple>
                                     </select>
                                     <label class="checkbox_label" data-i18n="[title]Automatically chooses an alternative provider if chosen providers can't serve your request." for="openrouter_allow_fallbacks_textgenerationwebui" title="Automatically chooses an alternative provider if chosen providers can't serve your request.">

                                 </div>
                             </div>
                             <div>
 -                                <h4 data-i18n="Model Providers">Model Providers</h4>
 +                                <h4>
 +                                    <span data-i18n="Model Providers">Model Providers</span>
 +                                    <i id="openrouter_provider_warning_chat" class="fa-solid fa-circle-exclamation displayNone" title="Deselect inapplicable provider(s) or select an applicable provider to avoid a 404 error."></i>
 +                                </h4>
                                 <select id="openrouter_providers_chat" class="openrouter_providers" multiple>
                                 </select>
                                 <label class="checkbox_label marginTopBot5" for="openrouter_allow_fallbacks" data-i18n="[title]Automatically chooses an alternative provider if chosen providers can't serve your request." title="Automatically chooses an alternative provider if chosen providers can't serve your request.">

public/scripts/openai.js+4 -0 Viewed

 import { ToolManager } from './tool-calling.js';
 import { accountStorage } from './util/AccountStorage.js';
 import { COMETAPI_IGNORE_PATTERNS, IGNORE_SYMBOL, MEDIA_DISPLAY, MEDIA_TYPE } from './constants.js';
 +import { syncOpenRouterProvidersForModel, updateOpenRouterProvidersWarning } from './textgen-models.js';
 export {
     openai_messages_count,

         console.log('OpenRouter model changed to', value);
         oai_settings.openrouter_model = value;
 +        syncOpenRouterProvidersForModel(value, '#openrouter_providers_chat');
+    }
     if ($(this).is('#model_ai21_select')) {

     $('#openrouter_allow_fallbacks').on('input', function () {
         oai_settings.openrouter_allow_fallbacks = !!$(this).prop('checked');
 +        updateOpenRouterProvidersWarning('#openrouter_providers_chat');
         saveSettingsDebounced();
     });

         oai_settings.openrouter_providers = selectedProviders;
 +        updateOpenRouterProvidersWarning('#openrouter_providers_chat');
         saveSettingsDebounced();
     });

public/scripts/textgen-models.js+81 -0 Viewed

     'Z.AI',
 ];
 +const OPENROUTER_PROVIDER_WARNING_SELECTORS = {
 +    '#openrouter_providers_text': {
 +        fallbackSelector: '#openrouter_allow_fallbacks_textgenerationwebui',
 +        warningSelector: '#openrouter_provider_warning_text',
 +    },
 +    '#openrouter_providers_chat': {
 +        fallbackSelector: '#openrouter_allow_fallbacks',
 +        warningSelector: '#openrouter_provider_warning_chat',
 +    },
 +};
++
 +export function updateOpenRouterProvidersWarning(providersSelector) {
 +    const $providers = $(providersSelector);
++
 +    const warningSelectors = OPENROUTER_PROVIDER_WARNING_SELECTORS[providersSelector];
++
 +    if ($providers.length === 0 || !warningSelectors) {
 +        return;
 +    }
++
 +    const $fallback = $(warningSelectors.fallbackSelector);
 +    const $warning = $(warningSelectors.warningSelector);
++
 +    const allowFallback = !!$fallback.prop('checked');
 +    const selectedCount = $providers.find('option:selected').length;
 +    const applicableSelectedCount = $providers.find('option:selected:not(:disabled)').length;
 +    const showWarning = !allowFallback && selectedCount > 0 && applicableSelectedCount === 0;
++
 +    $warning.toggleClass('displayNone', !showWarning);
 +}
++
 +export async function syncOpenRouterProvidersForModel(modelId, providersSelector) {
 +    const $providers = $(providersSelector);
++
 +    const refreshWarningState = () => {
 +        updateOpenRouterProvidersWarning(providersSelector);
 +    };
++
 +    if (!modelId || !modelId.includes('/')) {
 +        $providers.find('option').prop('disabled', false);
 +        $providers.trigger('change.select2');
 +        refreshWarningState();
 +        return;
 +    }
++
 +    try {
 +        const response = await fetch('/api/openrouter/models/providers', {
 +            method: 'POST',
 +            headers: getRequestHeaders(),
 +            body: JSON.stringify({ model: modelId }),
 +        });
++
 +        if (!response.ok) {
 +            refreshWarningState();
 +            return;
 +        }
++
 +        const providerNames = await response.json();
++
 +        if (!Array.isArray(providerNames) || providerNames.length === 0) {
 +            $providers.find('option').prop('disabled', false);
 +            $providers.trigger('change.select2');
 +            refreshWarningState();
 +            return;
 +        }
++
 +        $providers.find('option').each(function () {
 +            const isAvailable = providerNames.includes($(this).val());
 +            $(this).prop('disabled', !isAvailable);
 +        });
++
 +        $providers.trigger('change.select2');
 +        refreshWarningState();
 +    } catch (error) {
 +        console.error('Failed to fetch OpenRouter providers for model', error);
 +        refreshWarningState();
 +    }
 +}
++
 export async function loadOllamaModels(data) {
     if (!Array.isArray(data)) {
         console.error('Invalid Ollama models data', data);

     // Calculate the cost of the selected model + update on settings change
     calculateOpenRouterCost();
 +    syncOpenRouterProvidersForModel(textgen_settings.openrouter_model, '#openrouter_providers_text');
+}
 export async function loadVllmModels(data) {

     textgen_settings.openrouter_model = modelId;
     $('#api_button_textgenerationwebui').trigger('click');
     const model = openRouterModels.find(x => x.id === modelId);
 +    syncOpenRouterProvidersForModel(modelId, '#openrouter_providers_text');
     setGenerationParamsFromPreset({ max_length: model.context_length });
+}

public/scripts/textgen-settings.js+6 -1 Viewed

 import { getActiveManualApiSamplers, loadApiSelectedSamplers, isSamplerManualPriorityEnabled } from './samplerSelect.js';
 import { SECRET_KEYS, writeSecret } from './secrets.js';
 import { getEventSourceStream } from './sse-stream.js';
 import { getCurrentDreamGenModelTokenizer, getCurrentOpenRouterModelTokenizer, loadAphroditeModels, loadDreamGenModels, loadFeatherlessModels, loadGenericModels, loadInfermaticAIModels, loadLlamaCppModels, loadMancerModels, loadOllamaModels, loadOpenRouterModels, loadTabbyModels, loadTogetherAIModels, loadVllmModels, updateOpenRouterProvidersWarning } from './textgen-models.js';
 import { ENCODE_TOKENIZERS, TEXTGEN_TOKENIZERS, TOKENIZER_SUPPORTED_KEY, getTextTokens, getTokenizerBestMatch, tokenizers } from './tokenizers.js';
 import { AbortReason } from './util/AbortReason.js';
 import { getSortableDelay, onlyUnique, arraysEqual, isObject } from './utils.js';

         textgenerationwebui_settings.openrouter_providers = selectedProviders;
 +        updateOpenRouterProvidersWarning('#openrouter_providers_text');
         saveSettingsDebounced();
     });
 +    $('#openrouter_allow_fallbacks_textgenerationwebui').on('input', function () {
 +        updateOpenRouterProvidersWarning('#openrouter_providers_text');
 +    });
++
     $('#openrouter_quantizations_text').on('change', function () {
         const selectedQuantizations = $(this).val();