feat(gemini): add model discovery via /v1beta/models

2026-06-16 21:03:58 +08:00 · 2026-02-21 23:50:25 +08:00
parent 988a979bea
commit d3be0fddcf
5 changed files with 405 additions and 4 deletions
@@ -205,6 +205,19 @@
    "gemini_models_label": "Custom Models (Optional):",
    "gemini_models_hint": "Leave empty to allow all models, or add name[, alias] entries to limit/alias them for this key.",
    "gemini_models_add_btn": "Add Model",
+    "gemini_models_fetch_button": "Fetch via /v1beta/models",
+    "gemini_models_fetch_title": "Pick Models from Gemini /v1beta/models",
+    "gemini_models_fetch_hint": "Call GET /v1beta/models per the Gemini API. By default, it sends x-goog-api-key from the API Key field, merged with your custom headers.",
+    "gemini_models_fetch_url_label": "Request URL",
+    "gemini_models_fetch_refresh": "Refresh",
+    "gemini_models_fetch_loading": "Fetching models from Gemini /v1beta/models...",
+    "gemini_models_fetch_empty": "No models returned. Please check Base URL, API key, or headers.",
+    "gemini_models_fetch_error": "Failed to fetch Gemini models",
+    "gemini_models_fetch_apply": "Add selected models",
+    "gemini_models_search_label": "Search models",
+    "gemini_models_search_placeholder": "Filter by name, alias, or description",
+    "gemini_models_search_empty": "No models match your search. Try a different keyword.",
+    "gemini_models_fetch_added": "{{count}} new models added",
    "gemini_models_count": "Models Count",
    "gemini_edit_modal_title": "Edit Gemini API Key",
    "gemini_edit_modal_key_label": "API Key:",
@@ -205,6 +205,19 @@
    "gemini_models_label": "Пользовательские модели (необязательно):",
    "gemini_models_hint": "Оставьте пустым, чтобы разрешить все модели, или добавьте записи name[, alias], чтобы ограничить/переименовать их для этого ключа.",
    "gemini_models_add_btn": "Добавить модель",
+    "gemini_models_fetch_button": "Получить через /v1beta/models",
+    "gemini_models_fetch_title": "Выбор моделей из Gemini /v1beta/models",
+    "gemini_models_fetch_hint": "Вызывает GET /v1beta/models по спецификации Gemini API. По умолчанию отправляется x-goog-api-key из поля API-ключа, объединённый с вашими пользовательскими заголовками.",
+    "gemini_models_fetch_url_label": "URL запроса",
+    "gemini_models_fetch_refresh": "Обновить",
+    "gemini_models_fetch_loading": "Получение моделей из Gemini /v1beta/models...",
+    "gemini_models_fetch_empty": "Модели не получены. Проверьте Base URL, API-ключ или заголовки.",
+    "gemini_models_fetch_error": "Не удалось получить модели Gemini",
+    "gemini_models_fetch_apply": "Добавить выбранные модели",
+    "gemini_models_search_label": "Поиск моделей",
+    "gemini_models_search_placeholder": "Фильтр по имени, псевдониму или описанию",
+    "gemini_models_search_empty": "Нет подходящих моделей. Попробуйте другой запрос.",
+    "gemini_models_fetch_added": "Добавлено новых моделей: {{count}}",
    "gemini_models_count": "Количество моделей",
    "gemini_edit_modal_title": "Редактирование API-ключа Gemini",
    "gemini_edit_modal_key_label": "API-ключ:",
@@ -205,6 +205,19 @@
    "gemini_models_label": "自定义模型 (可选):",
    "gemini_models_hint": "为空表示使用全部模型；可填写 name[, alias] 以限制或重命名模型。",
    "gemini_models_add_btn": "添加模型",
+    "gemini_models_fetch_button": "从 /v1beta/models 获取",
+    "gemini_models_fetch_title": "从 Gemini /v1beta/models 选择模型",
+    "gemini_models_fetch_hint": "按 Gemini API 规范请求 GET /v1beta/models；默认附带 x-goog-api-key（来自 API Key 字段）并合并你配置的自定义请求头。",
+    "gemini_models_fetch_url_label": "请求地址",
+    "gemini_models_fetch_refresh": "重新获取",
+    "gemini_models_fetch_loading": "正在从 Gemini /v1beta/models 获取模型列表...",
+    "gemini_models_fetch_empty": "未获取到模型，请检查 Base URL、API Key 或请求头。",
+    "gemini_models_fetch_error": "获取 Gemini 模型失败",
+    "gemini_models_fetch_apply": "添加所选模型",
+    "gemini_models_search_label": "搜索模型",
+    "gemini_models_search_placeholder": "按名称、别名或描述筛选",
+    "gemini_models_search_empty": "没有匹配的模型，请更换关键字试试。",
+    "gemini_models_fetch_added": "已添加 {{count}} 个新模型",
    "gemini_models_count": "模型数量",
    "gemini_edit_modal_title": "编辑Gemini API密钥",
    "gemini_edit_modal_key_label": "API密钥:",
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Card } from '@/components/ui/Card';
@@ -6,12 +6,14 @@ import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { HeaderInputList } from '@/components/ui/HeaderInputList';
 import { ModelInputList } from '@/components/ui/ModelInputList';
+import { Modal } from '@/components/ui/Modal';
 import { useEdgeSwipeBack } from '@/hooks/useEdgeSwipeBack';
 import { SecondaryScreenShell } from '@/components/common/SecondaryScreenShell';
-import { providersApi } from '@/services/api';
+import { modelsApi, providersApi } from '@/services/api';
 import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores';
 import type { GeminiKeyConfig } from '@/types';
 import { buildHeaderObject, headersToEntries } from '@/utils/headers';
+import type { ModelInfo } from '@/utils/models';
 import { entriesToModels, modelsToEntries } from '@/components/ui/modelInputListUtils';
 import { excludedModelsToText, parseExcludedModels } from '@/components/providers/utils';
 import type { GeminiFormState } from '@/components/providers';
@@ -38,6 +40,10 @@ const parseIndexParam = (value: string | undefined) => {
  return Number.isFinite(parsed) ? parsed : null;
 };

+const stripGeminiModelResourceName = (value: string) => {
+  return String(value ?? '').trim().replace(/^\/?models\//i, '');
+};
+
 export function AiProvidersGeminiEditPage() {
  const { t } = useTranslation();
  const navigate = useNavigate();
@@ -58,6 +64,15 @@ export function AiProvidersGeminiEditPage() {
  const [error, setError] = useState('');
  const [form, setForm] = useState<GeminiFormState>(() => buildEmptyForm());

+  const [modelDiscoveryOpen, setModelDiscoveryOpen] = useState(false);
+  const [modelDiscoveryEndpoint, setModelDiscoveryEndpoint] = useState('');
+  const [discoveredModels, setDiscoveredModels] = useState<ModelInfo[]>([]);
+  const [modelDiscoveryFetching, setModelDiscoveryFetching] = useState(false);
+  const [modelDiscoveryError, setModelDiscoveryError] = useState('');
+  const [modelDiscoverySearch, setModelDiscoverySearch] = useState('');
+  const [modelDiscoverySelected, setModelDiscoverySelected] = useState<Set<string>>(new Set());
+  const autoFetchSignatureRef = useRef<string>('');
+
  const hasIndexParam = typeof params.index === 'string';
  const editIndex = useMemo(() => parseIndexParam(params.index), [params.index]);
  const invalidIndexParam = hasIndexParam && editIndex === null;
@@ -126,7 +141,10 @@ export function AiProvidersGeminiEditPage() {
      setForm({
        ...rest,
        headers: headersToEntries(headers),
-        modelEntries: modelsToEntries(models),
+        modelEntries: modelsToEntries(models).map((entry) => ({
+          ...entry,
+          name: stripGeminiModelResourceName(entry.name),
+        })),
        excludedText: excludedModelsToText(initialData.excludedModels),
      });
      return;
@@ -136,12 +154,150 @@ export function AiProvidersGeminiEditPage() {

  const canSave = !disableControls && !saving && !loading && !invalidIndexParam && !invalidIndex;

+  const discoveredModelsFiltered = useMemo(() => {
+    const filter = modelDiscoverySearch.trim().toLowerCase();
+    if (!filter) return discoveredModels;
+    return discoveredModels.filter((model) => {
+      const name = (model.name || '').toLowerCase();
+      const alias = (model.alias || '').toLowerCase();
+      const description = (model.description || '').toLowerCase();
+      return name.includes(filter) || alias.includes(filter) || description.includes(filter);
+    });
+  }, [discoveredModels, modelDiscoverySearch]);
+
+  const mergeDiscoveredModels = useCallback(
+    (selectedModels: ModelInfo[]) => {
+      if (!selectedModels.length) return;
+
+      let addedCount = 0;
+      setForm((prev) => {
+        const mergedMap = new Map<string, { name: string; alias: string }>();
+        prev.modelEntries.forEach((entry) => {
+          const name = stripGeminiModelResourceName(entry.name);
+          if (!name) return;
+          mergedMap.set(name, { name, alias: entry.alias?.trim() || '' });
+        });
+
+        selectedModels.forEach((model) => {
+          const name = stripGeminiModelResourceName(model.name);
+          if (!name || mergedMap.has(name)) return;
+          mergedMap.set(name, { name, alias: model.alias ?? '' });
+          addedCount += 1;
+        });
+
+        const mergedEntries = Array.from(mergedMap.values());
+        return {
+          ...prev,
+          modelEntries: mergedEntries.length ? mergedEntries : [{ name: '', alias: '' }],
+        };
+      });
+
+      if (addedCount > 0) {
+        showNotification(t('ai_providers.gemini_models_fetch_added', { count: addedCount }), 'success');
+      }
+    },
+    [setForm, showNotification, t]
+  );
+
+  const fetchGeminiModelDiscovery = useCallback(async () => {
+    setModelDiscoveryFetching(true);
+    setModelDiscoveryError('');
+    const headerObject = buildHeaderObject(form.headers);
+    try {
+      const list = await modelsApi.fetchGeminiModelsViaApiCall(
+        form.baseUrl ?? '',
+        form.apiKey.trim() || undefined,
+        headerObject
+      );
+      setDiscoveredModels(list);
+    } catch (err: unknown) {
+      setDiscoveredModels([]);
+      const message = err instanceof Error ? err.message : typeof err === 'string' ? err : '';
+      const hasCustomXGoogApiKey = Object.keys(headerObject).some(
+        (key) => key.toLowerCase() === 'x-goog-api-key'
+      );
+      const hasAuthorization = Object.keys(headerObject).some(
+        (key) => key.toLowerCase() === 'authorization'
+      );
+      const shouldAttachDiag = message.toLowerCase().includes('api key') || message.includes('401');
+      const diag = shouldAttachDiag
+        ? ` [diag: apiKeyField=${form.apiKey.trim() ? 'yes' : 'no'}, customXGoogApiKey=${
+            hasCustomXGoogApiKey ? 'yes' : 'no'
+          }, customAuthorization=${hasAuthorization ? 'yes' : 'no'}]`
+        : '';
+      setModelDiscoveryError(`${t('ai_providers.gemini_models_fetch_error')}: ${message}${diag}`);
+    } finally {
+      setModelDiscoveryFetching(false);
+    }
+  }, [form.apiKey, form.baseUrl, form.headers, t]);
+
+  useEffect(() => {
+    if (!modelDiscoveryOpen) {
+      autoFetchSignatureRef.current = '';
+      return;
+    }
+
+    const nextEndpoint = modelsApi.buildGeminiModelsEndpoint(form.baseUrl ?? '');
+    setModelDiscoveryEndpoint(nextEndpoint);
+    setDiscoveredModels([]);
+    setModelDiscoverySearch('');
+    setModelDiscoverySelected(new Set());
+    setModelDiscoveryError('');
+
+    const headerObject = buildHeaderObject(form.headers);
+    const hasCustomXGoogApiKey = Object.keys(headerObject).some(
+      (key) => key.toLowerCase() === 'x-goog-api-key'
+    );
+    const hasAuthorization = Object.keys(headerObject).some(
+      (key) => key.toLowerCase() === 'authorization'
+    );
+    const hasApiKeyField = Boolean(form.apiKey.trim());
+    const canAutoFetch = hasApiKeyField || hasCustomXGoogApiKey || hasAuthorization;
+
+    if (!canAutoFetch) return;
+
+    const headerSignature = Object.entries(headerObject)
+      .sort(([a], [b]) => a.toLowerCase().localeCompare(b.toLowerCase()))
+      .map(([key, value]) => `${key}:${value}`)
+      .join('|');
+    const signature = `${nextEndpoint}||${form.apiKey.trim()}||${headerSignature}`;
+    if (autoFetchSignatureRef.current === signature) return;
+    autoFetchSignatureRef.current = signature;
+
+    void fetchGeminiModelDiscovery();
+  }, [fetchGeminiModelDiscovery, form.apiKey, form.baseUrl, form.headers, modelDiscoveryOpen]);
+
+  const toggleModelDiscoverySelection = (name: string) => {
+    setModelDiscoverySelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(name)) {
+        next.delete(name);
+      } else {
+        next.add(name);
+      }
+      return next;
+    });
+  };
+
+  const handleApplyDiscoveredModels = () => {
+    const selectedModels = discoveredModels.filter((model) => modelDiscoverySelected.has(model.name));
+    if (selectedModels.length) {
+      mergeDiscoveredModels(selectedModels);
+    }
+    setModelDiscoveryOpen(false);
+  };
+
  const handleSave = useCallback(async () => {
    if (!canSave) return;

    setSaving(true);
    setError('');
    try {
+      const normalizedModelEntries = form.modelEntries.map((entry) => ({
+        ...entry,
+        name: stripGeminiModelResourceName(entry.name),
+      }));
+
      const payload: GeminiKeyConfig = {
        apiKey: form.apiKey.trim(),
        priority: form.priority !== undefined ? Math.trunc(form.priority) : undefined,
@@ -149,7 +305,7 @@ export function AiProvidersGeminiEditPage() {
        baseUrl: form.baseUrl?.trim() || undefined,
        proxyUrl: form.proxyUrl?.trim() || undefined,
        headers: buildHeaderObject(form.headers),
-        models: entriesToModels(form.modelEntries),
+        models: entriesToModels(normalizedModelEntries),
        excludedModels: parseExcludedModels(form.excludedText),
      };

@@ -185,6 +341,9 @@ export function AiProvidersGeminiEditPage() {
    updateConfigValue,
  ]);

+  const canOpenModelDiscovery = !disableControls && !saving && !loading && !invalidIndexParam && !invalidIndex;
+  const canApplyModelDiscovery = !disableControls && !saving && !modelDiscoveryFetching;
+
  return (
    <SecondaryScreenShell
      ref={swipeRef}
@@ -280,6 +439,14 @@ export function AiProvidersGeminiEditPage() {
                  >
                    {t('ai_providers.gemini_models_add_btn')}
                  </Button>
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    onClick={() => setModelDiscoveryOpen(true)}
+                    disabled={!canOpenModelDiscovery}
+                  >
+                    {t('ai_providers.gemini_models_fetch_button')}
+                  </Button>
                </div>
              </div>
              <div className={styles.sectionHint}>{t('ai_providers.gemini_models_hint')}</div>
@@ -312,6 +479,99 @@ export function AiProvidersGeminiEditPage() {
              />
              <div className="hint">{t('ai_providers.excluded_models_hint')}</div>
            </div>
+
+            <Modal
+              open={modelDiscoveryOpen}
+              title={t('ai_providers.gemini_models_fetch_title')}
+              onClose={() => setModelDiscoveryOpen(false)}
+              width={720}
+              footer={
+                <>
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    onClick={() => setModelDiscoveryOpen(false)}
+                    disabled={modelDiscoveryFetching}
+                  >
+                    {t('common.cancel')}
+                  </Button>
+                  <Button size="sm" onClick={handleApplyDiscoveredModels} disabled={!canApplyModelDiscovery}>
+                    {t('ai_providers.gemini_models_fetch_apply')}
+                  </Button>
+                </>
+              }
+            >
+              <div className={styles.openaiModelsContent}>
+                <div className={styles.sectionHint}>{t('ai_providers.gemini_models_fetch_hint')}</div>
+                <div className={styles.openaiModelsEndpointSection}>
+                  <label className={styles.openaiModelsEndpointLabel}>
+                    {t('ai_providers.gemini_models_fetch_url_label')}
+                  </label>
+                  <div className={styles.openaiModelsEndpointControls}>
+                    <input
+                      className={`input ${styles.openaiModelsEndpointInput}`}
+                      readOnly
+                      value={modelDiscoveryEndpoint}
+                    />
+                    <Button
+                      variant="secondary"
+                      size="sm"
+                      onClick={() => void fetchGeminiModelDiscovery()}
+                      loading={modelDiscoveryFetching}
+                      disabled={disableControls || saving}
+                    >
+                      {t('ai_providers.gemini_models_fetch_refresh')}
+                    </Button>
+                  </div>
+                </div>
+                <Input
+                  label={t('ai_providers.gemini_models_search_label')}
+                  placeholder={t('ai_providers.gemini_models_search_placeholder')}
+                  value={modelDiscoverySearch}
+                  onChange={(e) => setModelDiscoverySearch(e.target.value)}
+                  disabled={modelDiscoveryFetching}
+                />
+                {modelDiscoveryError && <div className="error-box">{modelDiscoveryError}</div>}
+                {modelDiscoveryFetching ? (
+                  <div className={styles.sectionHint}>{t('ai_providers.gemini_models_fetch_loading')}</div>
+                ) : discoveredModels.length === 0 ? (
+                  <div className={styles.sectionHint}>{t('ai_providers.gemini_models_fetch_empty')}</div>
+                ) : discoveredModelsFiltered.length === 0 ? (
+                  <div className={styles.sectionHint}>{t('ai_providers.gemini_models_search_empty')}</div>
+                ) : (
+                  <div className={styles.modelDiscoveryList}>
+                    {discoveredModelsFiltered.map((model) => {
+                      const checked = modelDiscoverySelected.has(model.name);
+                      return (
+                        <label
+                          key={model.name}
+                          className={`${styles.modelDiscoveryRow} ${
+                            checked ? styles.modelDiscoveryRowSelected : ''
+                          }`}
+                        >
+                          <input
+                            type="checkbox"
+                            checked={checked}
+                            onChange={() => toggleModelDiscoverySelection(model.name)}
+                          />
+                          <div className={styles.modelDiscoveryMeta}>
+                            <div className={styles.modelDiscoveryName}>
+                              {model.name}
+                              {model.alias && (
+                                <span className={styles.modelDiscoveryAlias}>{model.alias}</span>
+                              )}
+                            </div>
+                            {model.description && (
+                              <div className={styles.modelDiscoveryDesc}>{model.description}</div>
+                            )}
+                          </div>
+                        </label>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            </Modal>
          </>
        )}
      </Card>
@@ -8,8 +8,13 @@ import { normalizeApiBase } from '@/utils/connection';
 import { apiCallApi, getApiCallErrorMessage } from './apiCall';

 const DEFAULT_CLAUDE_BASE_URL = 'https://api.anthropic.com';
+const DEFAULT_GEMINI_BASE_URL = 'https://generativelanguage.googleapis.com';
 const DEFAULT_ANTHROPIC_VERSION = '2023-06-01';
 const CLAUDE_MODELS_IN_FLIGHT = new Map<string, Promise<ReturnType<typeof normalizeModelList>>>();
+const GEMINI_MODELS_IN_FLIGHT = new Map<string, Promise<ReturnType<typeof normalizeModelList>>>();
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  value !== null && typeof value === 'object' && !Array.isArray(value);

 const buildRequestSignature = (url: string, headers: Record<string, string>) => {
  const headerSignature = Object.entries(headers)
@@ -45,6 +50,21 @@ const buildClaudeModelsEndpoint = (baseUrl: string): string => {
  return `${trimmed}/v1/models`;
 };

+const buildGeminiModelsEndpoint = (baseUrl: string): string => {
+  const normalized = normalizeApiBase(baseUrl);
+  const fallback = normalized || DEFAULT_GEMINI_BASE_URL;
+  let trimmed = fallback.replace(/\/+$/g, '');
+  trimmed = trimmed.replace(/\/v1beta\/models$/i, '');
+  trimmed = trimmed.replace(/\/v1beta(?:\/.*)?$/i, '');
+  return `${trimmed}/v1beta/models`;
+};
+
+const stripGeminiModelResourceName = (value: string): string => {
+  const trimmed = String(value ?? '').trim();
+  if (!trimmed) return '';
+  return trimmed.replace(/^\/?models\//i, '');
+};
+
 const hasHeader = (headers: Record<string, string>, name: string) => {
  const target = name.toLowerCase();
  return Object.keys(headers).some((key) => key.toLowerCase() === target);
@@ -118,6 +138,10 @@ export const modelsApi = {
    return buildClaudeModelsEndpoint(baseUrl);
  },

+  buildGeminiModelsEndpoint(baseUrl: string) {
+    return buildGeminiModelsEndpoint(baseUrl);
+  },
+
  /**
   * Fetch Claude models from /v1/models via api-call.
   * Anthropic requires `x-api-key` and `anthropic-version` headers.
@@ -171,4 +195,82 @@ export const modelsApi = {
      CLAUDE_MODELS_IN_FLIGHT.delete(signature);
    }
  },
+
+  /**
+   * Fetch Gemini models from /v1beta/models via api-call.
+   * Gemini API accepts API key via query param or `x-goog-api-key` header.
+   */
+  async fetchGeminiModelsViaApiCall(
+    baseUrl: string,
+    apiKey?: string,
+    headers: Record<string, string> = {}
+  ) {
+    const endpoint = buildGeminiModelsEndpoint(baseUrl);
+    if (!endpoint) {
+      throw new Error('Invalid base url');
+    }
+
+    const resolvedHeaders = { ...headers };
+    const resolvedApiKey = String(apiKey ?? '').trim();
+    if (resolvedApiKey && !hasHeader(resolvedHeaders, 'x-goog-api-key')) {
+      resolvedHeaders['x-goog-api-key'] = resolvedApiKey;
+    }
+
+    const signature = buildRequestSignature(endpoint, resolvedHeaders);
+    const existing = GEMINI_MODELS_IN_FLIGHT.get(signature);
+    if (existing) return existing;
+
+    const request = (async () => {
+      const seen = new Set<string>();
+      const collected: ReturnType<typeof normalizeModelList> = [];
+      let pageToken = '';
+
+      for (let page = 0; page < 20; page += 1) {
+        const url = new URL(endpoint);
+        if (pageToken) {
+          url.searchParams.set('pageToken', pageToken);
+        }
+
+        const result = await apiCallApi.request({
+          method: 'GET',
+          url: url.toString(),
+          header: Object.keys(resolvedHeaders).length ? resolvedHeaders : undefined
+        });
+
+        if (result.statusCode < 200 || result.statusCode >= 300) {
+          throw new Error(getApiCallErrorMessage(result));
+        }
+
+        const payload = result.body ?? result.bodyText;
+        const normalized = normalizeModelList(payload, { dedupe: false });
+        normalized.forEach((model) => {
+          const name = stripGeminiModelResourceName(model.name);
+          const key = (name || '').toLowerCase();
+          if (!key || seen.has(key)) return;
+          seen.add(key);
+          const resolved = { ...model, name };
+          if (resolved.alias && resolved.alias.trim() === name) {
+            resolved.alias = undefined;
+          }
+          collected.push(resolved);
+        });
+
+        const nextToken =
+          isRecord(payload) && typeof payload.nextPageToken === 'string' ? payload.nextPageToken : '';
+        if (!nextToken) {
+          break;
+        }
+        pageToken = nextToken;
+      }
+
+      return collected;
+    })();
+
+    GEMINI_MODELS_IN_FLIGHT.set(signature, request);
+    try {
+      return await request;
+    } finally {
+      GEMINI_MODELS_IN_FLIGHT.delete(signature);
+    }
+  },
 };