https://simplread.com/js/providers-ui.js

1export const PROVIDER_META = {
2  openai: {
3    label: "OpenAI",
4    keyHint: "sk-…",
5    keyUrl: "https://platform.openai.com/api-keys",
6    models: ["gpt-4o-mini", "gpt-4o", "gpt-4.1-mini", "gpt-4.1"],
7  },
8  anthropic: {
9    label: "Anthropic",
10    keyHint: "sk-ant-…",
11    keyUrl: "https://console.anthropic.com/settings/keys",
12    models: ["claude-haiku-4-5-20251001", "claude-sonnet-4-6", "claude-opus-4-6"],
13  },
14  google: {
15    label: "Google Gemini",
16    keyHint: "AIza…",
17    keyUrl: "https://aistudio.google.com/apikey",
18    models: ["gemini-2.0-flash", "gemini-1.5-pro", "gemini-1.5-flash"],
19  },
20  grok: {
21    label: "xAI Grok",
22    keyHint: "xai-…",
23    keyUrl: "https://console.x.ai/",
24    models: ["grok-2", "grok-2-mini"],
25  },
26  mistral: {
27    label: "Mistral",
28    keyHint: "API key",
29    keyUrl: "https://console.mistral.ai/api-keys/",
30    models: ["mistral-small-latest", "mistral-large-latest", "open-mistral-nemo"],
31  },
32  groq: {
33    label: "Groq",
34    keyHint: "gsk_…",
35    keyUrl: "https://console.groq.com/keys",
36    models: ["llama-3.3-70b-versatile", "llama-3.1-8b-instant", "mixtral-8x7b-32768"],
37  },
38  cohere: {
39    label: "Cohere",
40    keyHint: "API key",
41    keyUrl: "https://dashboard.cohere.com/api-keys",
42    models: ["command-r-plus-08-2024", "command-r-08-2024"],
43  },
44  together: {
45    label: "Together AI",
46    keyHint: "API key",
47    keyUrl: "https://api.together.xyz/settings/api-keys",
48    models: [
49      "meta-llama/Llama-3.3-70B-Instruct-Turbo",
50      "Qwen/Qwen2.5-72B-Instruct-Turbo",
51    ],
52  },
53};
54
55export function getProviderOrder(meta = PROVIDER_META) {
56  return Object.keys(meta);
57}
58
59export function populateProviderSelect(select, meta, selected) {
60  select.innerHTML = "";
61  for (const id of getProviderOrder(meta)) {
62    const option = document.createElement("option");
63    option.value = id;
64    option.textContent = meta[id].label;
65    select.appendChild(option);
66  }
67  if (meta[selected]) select.value = selected;
68}
69
70export function populateModelSelect(select, provider, meta, models, selectedModel) {
71  const info = meta[provider];
72  select.innerHTML = "";
73  if (!info) return;
74  for (const model of info.models) {
75    const option = document.createElement("option");
76    option.value = model;
77    option.textContent = model;
78    select.appendChild(option);
79  }
80  const current = selectedModel || models?.[provider] || info.models[0];
81  if ([...select.options].some((o) => o.value === current)) {
82    select.value = current;
83  }
84}
85
86export function updateProviderHelp(helpEl, provider, meta) {
87  const info = meta[provider];
88  if (!info || !helpEl) return;
89  helpEl.innerHTML = `Get your key from <a href="${info.keyUrl}" target="_blank" rel="noopener noreferrer">${info.label}</a>. Typical format: ${info.keyHint}.`;
90}