astrololo/services/presentation/app/static/models.js

// Podpowiedzi modeli zależne od wybranego dostawcy.
//
// Pole modelu jest CELOWO tekstowe (input + datalist), a nie zamkniętym <select>:
// katalog to tylko wygoda, a konto może mieć dostęp do modeli, o których kod nie
// wie. Puste pole = model domyślny dostawcy.
document.addEventListener('DOMContentLoaded', function () {
  const providerEl = document.getElementById('llmProvider');
  const modelEl = document.getElementById('llmModel');
  const listEl = document.getElementById('llmModelList');
  const hintEl = document.getElementById('llmModelHint');
  const dataEl = document.getElementById('llmCatalog');
  if (!providerEl || !modelEl || !listEl || !dataEl) return;

  let catalog = {};
  let defaults = {};
  try {
    const parsed = JSON.parse(dataEl.textContent || '{}');
    catalog = parsed.providers || {};
    defaults = parsed.defaults || {};
  } catch (e) {
    return;                       // brak katalogu — pole nadal działa jako wolny tekst
  }

  const fmt = n =>
    n >= 1000000 ? (n / 1000000) + 'M' : (n >= 1000 ? Math.round(n / 1000) + 'k' : String(n));

  function refresh(resetValue) {
    const provider = providerEl.value;
    const models = catalog[provider] || [];

    listEl.innerHTML = '';
    models.forEach(m => {
      const opt = document.createElement('option');
      opt.value = m.id;
      opt.label = m.label + '  ·  kontekst ' + fmt(m.context_window);
      listEl.appendChild(opt);
    });

    const fallback = defaults[provider] || '';
    modelEl.placeholder = fallback ? 'domyślny: ' + fallback : 'domyślny dostawcy';

    // po zmianie dostawcy stary model nie ma sensu (np. gpt-4o u Anthropica)
    if (resetValue) modelEl.value = '';

    if (hintEl) {
      const chosen = models.find(m => m.id === modelEl.value.trim());
      hintEl.textContent = chosen
        ? chosen.label + ' — okno kontekstu ' + fmt(chosen.context_window) +
          ' tokenów, maksymalna odpowiedź ' + fmt(chosen.max_output) + '.'
        : 'Zostaw puste, by użyć modelu domyślnego. Możesz też wpisać dowolny ' +
          'identyfikator modelu, do którego Twoje konto ma dostęp.';
    }
  }

  providerEl.addEventListener('change', () => refresh(true));
  modelEl.addEventListener('input', () => refresh(false));
  refresh(false);
});