{% extends "base.html" %} {% block title %}模型预设管理 - Amrita Dashboard{%
endblock %} {% block topbar_title %}模型预设管理{% endblock %} {% block
extra_css %}
<style>
  .expand-row { display: none; }
  .expand-row.open { display: table-row; }
  .expand-toggle { cursor: pointer; transition: transform 0.2s; }
  .expand-toggle.open { transform: rotate(90deg); }
  .config-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 16px; }
  @media (max-width: 768px) { .config-grid { grid-template-columns: 1fr; } }
  .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
  .modal.active { display: block; }
  .modal-content { background: rgba(255,255,255,0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); margin: 3% auto; padding: 20px; border: 1px solid rgba(0,0,0,0.1); border-radius: 10px; width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: 0 5px 15px rgba(0,0,0,0.3); position: relative; z-index: 1001; }
  .dark .modal-content { background: rgba(37,37,37,0.85); border: 1px solid rgba(68,68,68,0.3); }
  .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; line-height: 1; position: absolute; right: 15px; top: 10px; }
  .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; }
  .dark .close:hover, .dark .close:focus { color: #fff; }
  .config-container { transition: filter 0.3s ease; }
  .config-container.blurred { filter: blur(5px); }
</style>
{% endblock %} {% block content %}
<div class="config-container">
  <div class="p-3 rounded mb-4 bg-green-100 border border-green-300 text-green-800 dark:bg-green-900/20 dark:border-green-800/30 dark:text-green-400 hidden" id="success-alert">操作成功！</div>
  <div class="p-3 rounded mb-4 bg-red-100 border border-red-300 text-red-800 dark:bg-red-900/20 dark:border-red-800/30 dark:text-red-400 hidden" id="error-alert">操作失败，请重试。</div>
  <div class="flex justify-between items-center mb-5 pb-4 border-b border-black/5 dark:border-white/5">
    <h1 class="text-2xl font-semibold text-primary">模型预设管理</h1>
    <div class="flex gap-2">
      <button class="px-4 py-2 rounded text-sm font-medium bg-primary text-white hover:bg-primary-hover" onclick="openCreateModal()"><i class="fas fa-plus"></i> 创建预设</button>
      <button class="px-4 py-2 rounded text-sm font-medium bg-gray-500 text-white hover:bg-gray-600" onclick="refreshModels()"><i class="fas fa-sync-alt"></i> 刷新</button>
    </div>
  </div>
  <div class="relative max-w-[300px] mb-4">
    <i class="fas fa-search absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500"></i>
    <input type="text" class="input-glass pl-9" id="model-search" placeholder="搜索模型预设..." onkeyup="filterModels()" />
  </div>
  <div class="overflow-x-auto">
    <table class="table-glass w-full" id="models-container">
      <thead><tr><th class="w-8"></th><th>预设名称</th><th>模型</th><th>协议</th><th>默认</th><th>操作</th></tr></thead>
      <tbody>
        {% for model in models %}
        {% set tc = model.thinking_config or {} %}
        <tr data-name="{{ model.name|lower }}">
          <td class="text-center"><i class="fas fa-chevron-right expand-toggle text-xs text-gray-400 dark:text-gray-500" onclick="this.classList.toggle('open'); this.closest('tr').nextElementSibling?.classList.toggle('open')"></i></td>
          <td class="font-medium dark:text-gray-100">{{ model.name }}</td>
          <td class="font-mono text-sm dark:text-gray-300">{{ model.model }}</td>
          <td class="text-sm text-gray-500 dark:text-gray-400">{{ model.protocol }}</td>
          <td>{% if model.name == current_default %}<span class="inline-block px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">默认</span>{% else %}<span class="text-gray-300 dark:text-gray-600">—</span>{% endif %}</td>
          <td><div class="flex gap-1.5"><button class="px-3 py-1.5 rounded text-xs font-medium bg-primary text-white hover:bg-primary-hover" onclick="openEditModal('{{ model.name }}')"><i class="fas fa-edit"></i> 编辑</button><button class="px-3 py-1.5 rounded text-xs font-medium bg-danger text-white hover:bg-red-700" onclick="deleteModel('{{ model.name }}')"><i class="fas fa-trash"></i></button></div></td>
        </tr>
        <tr class="expand-row bg-gray-50/50 dark:bg-white/[0.02]">
          <td></td>
          <td colspan="5" class="p-4">
            <div class="config-grid">
              <div><span class="text-xs text-gray-500 dark:text-gray-400">API 密钥</span><div class="text-sm font-mono text-gray-800 dark:text-gray-200 break-all">{{ model.api_key[:20] ~ '…' if model.api_key and model.api_key|length > 20 else (model.api_key or '未设置') }}</div></div>
              <div><span class="text-xs text-gray-500 dark:text-gray-400">Base URL</span><div class="text-sm font-mono text-gray-800 dark:text-gray-200 break-all">{{ model.base_url or '默认' }}</div></div>
              <div><span class="text-xs text-gray-500 dark:text-gray-400">Top K</span><div class="text-sm text-gray-800 dark:text-gray-200">{{ model.config.top_k if model.config else 50 }}</div></div>
              <div><span class="text-xs text-gray-500 dark:text-gray-400">Top P</span><div class="text-sm text-gray-800 dark:text-gray-200">{{ model.config.top_p if model.config else 0.8 }}</div></div>
              <div><span class="text-xs text-gray-500 dark:text-gray-400">Temperature</span><div class="text-sm text-gray-800 dark:text-gray-200">{{ model.config.temperature if model.config else 0.6 }}</div></div>
              <div><span class="text-xs text-gray-500 dark:text-gray-400">流式响应</span><div class="text-sm text-gray-800 dark:text-gray-200">{{ '✓' if model.config and model.config.stream else '✗' }}</div></div>
              <div><span class="text-xs text-gray-500 dark:text-gray-400">多模态</span><div class="text-sm text-gray-800 dark:text-gray-200">{{ '✓' if model.config and model.config.multimodal else '✗' }}</div></div>
              <div><span class="text-xs text-gray-500 dark:text-gray-400">思考类型</span><div class="text-sm text-gray-800 dark:text-gray-200">{{ tc.thinking_type or '—' }}</div></div>
              <div><span class="text-xs text-gray-500 dark:text-gray-400">enable_thinking</span><div class="text-sm text-gray-800 dark:text-gray-200">{{ tc.enable_thinking if tc.enable_thinking is not none else '—' }}</div></div>
              <div><span class="text-xs text-gray-500 dark:text-gray-400">thinking_effort</span><div class="text-sm text-gray-800 dark:text-gray-200">{{ tc.thinking_effort or '—' }}</div></div>
              <div><span class="text-xs text-gray-500 dark:text-gray-400">content_mode</span><div class="text-sm text-gray-800 dark:text-gray-200">{{ tc.content_mode or 'optional' }}</div></div>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<!-- 创建/编辑模型预设的模态框 -->
<div id="modelModal" class="modal">
  <div class="modal-content">
    <span class="close" onclick="closeModal()">&times;</span>
    <h2 id="modalTitle">创建模型预设</h2>
    <form id="modelForm">
      <input type="hidden" id="modelId" name="id" />
      <div class="mb-4">
        <label
          class="block mb-1 font-medium text-gray-600 dark:text-gray-400 text-sm"
          for="modelName"
          >预设名称</label
        >
        <input
          type="text"
          class="input-glass"
          id="modelName"
          name="name"
          placeholder="例如：my-gpt4"
          required
        />
      </div>
      <div class="mb-4">
        <label
          class="block mb-1 font-medium text-gray-600 dark:text-gray-400 text-sm"
          for="modelModel"
          >模型名称</label
        >
        <input
          type="text"
          class="input-glass"
          id="modelModel"
          name="model"
          placeholder="例如：gpt-4o"
          required
        />
      </div>
      <div class="mb-4">
        <label
          class="block mb-1 font-medium text-gray-600 dark:text-gray-400 text-sm"
          for="modelBaseUrl"
          >API基础地址</label
        >
        <input
          type="text"
          class="input-glass"
          id="modelBaseUrl"
          name="base_url"
          value="https://api.openai.com/v1"
        />
      </div>
      <div class="mb-4">
        <label
          class="block mb-1 font-medium text-gray-600 dark:text-gray-400 text-sm"
          for="modelApiKey"
          >API密钥</label
        >
        <input
          type="password"
          class="input-glass"
          id="modelApiKey"
          name="api_key"
        />
      </div>
      <div class="mb-4">
        <label
          class="block mb-1 font-medium text-gray-600 dark:text-gray-400 text-sm"
          for="modelProtocol"
          >协议</label
        >
        <input
          type="text"
          class="input-glass"
          id="modelProtocol"
          name="protocol"
          value="__main__"
        />
      </div>
      <div class="mb-4">
        <label
          class="block mb-1 font-medium text-gray-600 dark:text-gray-400 text-sm"
          for="modelTopK"
          >Top K</label
        >
        <input
          type="number"
          class="input-glass"
          id="modelTopK"
          name="top_k"
          min="1"
          max="100"
          value="50"
        />
      </div>

      <div class="mb-4">
        <label
          class="block mb-1 font-medium text-gray-600 dark:text-gray-400 text-sm"
          for="modelTopP"
          >Top P</label
        >
        <input
          type="number"
          class="input-glass"
          id="modelTopP"
          name="top_p"
          min="0"
          max="1"
          step="0.01"
          value="0.8"
        />
      </div>

      <div class="mb-4">
        <label
          class="block mb-1 font-medium text-gray-600 dark:text-gray-400 text-sm"
          for="modelTemperature"
          >Temperature</label
        >
        <input
          type="number"
          class="input-glass"
          id="modelTemperature"
          name="temperature"
          min="0"
          max="2"
          step="0.01"
          value="0.6"
        />
      </div>

      <div class="mb-4">
        <label
          class="block mb-1 font-medium text-gray-600 dark:text-gray-400 text-sm"
        >
          <input type="checkbox" id="modelStream" name="stream" />
          流式响应
        </label>
      </div>

      <div class="mb-4">
        <label
          class="block mb-1 font-medium text-gray-600 dark:text-gray-400 text-sm"
        >
          <input
            type="checkbox"
            id="modelConfigMultimodal"
            name="config_multimodal"
          />
          配置多模态支持
        </label>
      </div>

      <div
        style="margin-top: 15px; padding-top: 10px; border-top: 1px dashed #ddd"
      >
        <h4 style="margin-bottom: 10px; color: #555">🧠 推理/思考配置</h4>
        <div class="mb-4">
          <label
            class="block mb-1 font-medium text-gray-600 dark:text-gray-400 text-sm"
            for="modelThinkingType"
            >thinking_type</label
          >
          <select
            class="input-glass"
            id="modelThinkingType"
            name="thinking_type"
          >
            <option value="">不启用</option>
            <option value="enabled">enabled</option>
            <option value="disabled">disabled</option>
          </select>
        </div>
        <div class="mb-4">
          <label
            class="block mb-1 font-medium text-gray-600 dark:text-gray-400 text-sm"
            for="modelEnableThinking"
            >enable_thinking</label
          >
          <select
            class="input-glass"
            id="modelEnableThinking"
            name="enable_thinking"
          >
            <option value="">不设置</option>
            <option value="true">true</option>
            <option value="false">false</option>
          </select>
        </div>
        <div class="mb-4">
          <label
            class="block mb-1 font-medium text-gray-600 dark:text-gray-400 text-sm"
            for="modelThinkingEffort"
            >thinking_effort</label
          >
          <input
            type="text"
            class="input-glass"
            id="modelThinkingEffort"
            name="thinking_effort"
            placeholder="minimal/low/medium/high/xhigh/max"
          />
        </div>
        <div class="mb-4">
          <label
            class="block mb-1 font-medium text-gray-600 dark:text-gray-400 text-sm"
            for="modelContentMode"
            >content_mode</label
          >
          <select class="input-glass" id="modelContentMode" name="content_mode">
            <option value="optional">optional（默认）</option>
            <option value="never">never</option>
            <option value="by-tool">by-tool</option>
          </select>
        </div>
      </div>

      <div class="form-actions">
        <button type="button" class="btn btn-secondary" onclick="closeModal()">
          取消
        </button>
        <button type="submit" class="btn btn-primary">保存</button>
      </div>
    </form>
  </div>
</div>
{% endblock %} {% block scripts %}
<script>
  let editingModel = null;
  const configContainer = document.querySelector(".config-container");

  function openCreateModal() {
    document.getElementById("modalTitle").textContent = "创建模型预设";
    document.getElementById("modelForm").reset();
    document.getElementById("modelId").value = "";

    document.getElementById("modelTopK").value = 50;
    document.getElementById("modelTopP").value = 0.8;
    document.getElementById("modelTemperature").value = 0.6;
    document.getElementById("modelStream").checked = false;
    document.getElementById("modelConfigMultimodal").checked = false;

    document.getElementById("modelApiKey").value = "";
    document.getElementById("modelApiKey").placeholder = "";

    document.getElementById("modelBaseUrl").value = "https://api.openai.com/v1";

    document.getElementById("modelThinkingType").value = "";
    document.getElementById("modelEnableThinking").value = "";
    document.getElementById("modelThinkingEffort").value = "";
    document.getElementById("modelContentMode").value = "optional";

    editingModel = null;

    configContainer.classList.add("blurred");

    document.getElementById("modelModal").style.display = "block";
    document.getElementById("modelModal").classList.add("active");
  }

  function openEditModal(modelName) {
    fetch(`/api/chat/models`)
      .then((response) => response.json())
      .then((data) => {
        if (data.success) {
          const model = data.models.find((m) => m.name === modelName);
          if (model) {
            document.getElementById("modalTitle").textContent = "编辑模型预设";
            document.getElementById("modelId").value = model.name;
            document.getElementById("modelName").value = model.name;
            document.getElementById("modelModel").value = model.model;
            document.getElementById("modelBaseUrl").value =
              model.base_url !== "默认" ? model.base_url : "";

            document.getElementById("modelApiKey").value = "";
            document.getElementById("modelApiKey").placeholder = "(未修改)";
            document.getElementById("modelProtocol").value = model.protocol;
            if (model.config) {
              document.getElementById("modelTopK").value = model.config.top_k;
              document.getElementById("modelTopP").value = model.config.top_p;
              document.getElementById("modelTemperature").value =
                model.config.temperature;
              document.getElementById("modelStream").checked =
                model.config.stream;
              document.getElementById("modelConfigMultimodal").checked =
                model.config.multimodal;
            } else {
              document.getElementById("modelTopK").value = 50;
              document.getElementById("modelTopP").value = 0.8;
              document.getElementById("modelTemperature").value = 0.6;
              document.getElementById("modelStream").checked = false;
              document.getElementById("modelConfigMultimodal").checked = false;
            }

            // 填充 thinking_config
            const tc = model.thinking_config || {};
            document.getElementById("modelThinkingType").value =
              tc.thinking_type || "";
            document.getElementById("modelEnableThinking").value =
              tc.enable_thinking === true
                ? "true"
                : tc.enable_thinking === false
                  ? "false"
                  : "";
            document.getElementById("modelThinkingEffort").value =
              tc.thinking_effort || "";
            document.getElementById("modelContentMode").value =
              tc.content_mode || "optional";

            editingModel = model.name;

            configContainer.classList.add("blurred");

            document.getElementById("modelModal").style.display = "block";
            document.getElementById("modelModal").classList.add("active");
          } else {
            showAlert("danger", "未找到模型预设");
          }
        } else {
          showAlert("danger", "获取模型预设列表失败");
        }
      })
      .catch((error) => {
        console.error("获取模型预设详情失败:", error);
        showAlert("danger", "获取模型预设详情失败: " + error.message);
      });
  }

  function closeModal() {
    document.getElementById("modelModal").style.display = "none";
    document.getElementById("modelModal").classList.remove("active");

    configContainer.classList.remove("blurred");
  }

  document
    .getElementById("modelForm")
    .addEventListener("submit", async function (e) {
      e.preventDefault();

      const formData = new FormData(this);
      const modelData = Object.fromEntries(formData.entries());

      modelData.stream = document.getElementById("modelStream").checked;
      modelData.config_multimodal = document.getElementById(
        "modelConfigMultimodal",
      ).checked;

      const config = {
        top_k: parseInt(document.getElementById("modelTopK").value),
        top_p: parseFloat(document.getElementById("modelTopP").value),
        temperature: parseFloat(
          document.getElementById("modelTemperature").value,
        ),
        stream: document.getElementById("modelStream").checked,
        multimodal: document.getElementById("modelConfigMultimodal").checked,
      };

      modelData.config = config;

      // 收集 thinking_config
      const thinkingType = document.getElementById("modelThinkingType").value;
      const enableThinking = document.getElementById(
        "modelEnableThinking",
      ).value;
      const thinkingEffort = document.getElementById(
        "modelThinkingEffort",
      ).value;
      const contentMode = document.getElementById("modelContentMode").value;

      if (
        thinkingType ||
        enableThinking ||
        thinkingEffort ||
        contentMode !== "optional"
      ) {
        modelData.thinking_config = {
          thinking_type: thinkingType || null,
          enable_thinking:
            enableThinking === "true"
              ? true
              : enableThinking === "false"
                ? false
                : null,
          thinking_effort: thinkingEffort || null,
          content_mode: contentMode || "optional",
        };
      } else {
        modelData.thinking_config = null;
      }

      // 清理表单里的 thinking 裸字段
      delete modelData.thinking_type;
      delete modelData.enable_thinking;
      delete modelData.thinking_effort;
      delete modelData.content_mode;

      const apiKeyInput = document.getElementById("modelApiKey");
      if (editingModel) {
        if (apiKeyInput.value !== "" && apiKeyInput.value !== "(未修改)") {
          modelData.api_key = apiKeyInput.value;
        } else {
          delete modelData.api_key;
        }
      } else {
        modelData.api_key = apiKeyInput.value;
      }

      try {
        const method = editingModel ? "PUT" : "POST";
        const url = editingModel
          ? `/api/chat/models/${encodeURIComponent(editingModel)}`
          : "/api/chat/models";

        const response = await fetch(url, {
          method: method,
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(modelData),
        });

        const result = await response.json();

        if (result.success) {
          showAlert(
            "success",
            result.message ||
              (editingModel ? "模型预设已更新" : "模型预设已创建"),
          );
          location.reload();
        } else {
          showAlert("danger", result.message || "操作失败");
        }
      } catch (error) {
        console.error("保存模型预设失败:", error);
        showAlert("danger", "保存失败: " + error.message);
      }
    });

  async function deleteModel(modelName) {
    if (!confirm(`确定要删除模型预设 "${modelName}" 吗？此操作不可撤销。`)) {
      return;
    }

    try {
      const response = await fetch(
        `/api/chat/models/${encodeURIComponent(modelName)}`,
        {
          method: "DELETE",
        },
      );

      const result = await response.json();

      if (result.success) {
        showAlert("success", result.message || "模型预设已删除");
        location.reload();
      } else {
        showAlert("danger", result.message || "删除失败");
      }
    } catch (error) {
      console.error("删除模型预设失败:", error);
      showAlert("danger", "删除失败: " + error.message);
    }
  }

  async function toggleModelField(checkbox) {
    const modelName = checkbox.getAttribute("data-model");
    const fieldName = checkbox.getAttribute("data-field");
    const value = checkbox.checked;

    try {
      const response = await fetch("/api/chat/models");
      const modelListResponse = await response.json();

      if (!modelListResponse.success) {
        throw new Error("无法获取模型列表");
      }

      const model = modelListResponse.models.find((m) => m.name === modelName);
      if (!model) {
        throw new Error(`模型 ${modelName} 不存在`);
      }

      if (
        ["top_k", "top_p", "temperature", "stream", "multimodal"].includes(
          fieldName,
        )
      ) {
        const configData = { ...model.config, [fieldName]: value };

        const updateResponse = await fetch(
          `/api/chat/models/${encodeURIComponent(modelName)}`,
          {
            method: "PUT",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              name: modelName,
              config: configData,
            }),
          },
        );

        const result = await updateResponse.json();

        if (result.success) {
          showAlert("success", `模型 ${modelName} 的配置已更新`);
        } else {
          throw new Error(result.message);
        }
      } else {
        const updateResponse = await fetch(
          `/api/chat/models/${encodeURIComponent(modelName)}`,
          {
            method: "PUT",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              name: modelName,
              [fieldName]: value,
            }),
          },
        );

        const result = await updateResponse.json();

        if (result.success) {
          showAlert(
            "success",
            `模型预设 "${modelName}" 的 "${fieldName}" 已更新`,
          );
        } else {
          throw new Error(result.message);
        }
      }
    } catch (error) {
      console.error("更新模型预设失败:", error);
      checkbox.checked = !value;
      showAlert("danger", "更新失败: " + error.message);
    }
  }

  function filterModels() {
    const searchQuery = document
      .getElementById("model-search")
      .value.toLowerCase();
    const modelCards = document.querySelectorAll(".model-card");

    modelCards.forEach((card) => {
      const modelName = card.getAttribute("data-name");

      const searchMatch =
        modelName.includes(searchQuery) ||
        card
          .querySelector(".field-value")
          .textContent.toLowerCase()
          .includes(searchQuery);

      if (searchMatch) {
        card.style.display = "block";
      } else {
        card.style.display = "none";
      }
    });
  }

  async function refreshModels() {
    try {
      location.reload();
    } catch (error) {
      console.error("刷新模型列表失败:", error);
      showAlert("danger", "刷新失败: " + error.message);
    }
  }

  function showAlert(type, message) {
    const successAlert = document.getElementById("success-alert");
    const errorAlert = document.getElementById("error-alert");

    successAlert.style.display = "none";
    errorAlert.style.display = "none";

    if (type === "success") {
      successAlert.textContent = message;
      successAlert.style.display = "block";
    } else {
      errorAlert.textContent = message;
      errorAlert.style.display = "block";
    }

    setTimeout(() => {
      successAlert.style.display = "none";
      errorAlert.style.display = "none";
    }, 3000);
  }

  function toggleConfigDetails(button) {
    const configDetails = button.parentElement.nextElementSibling;
    const icon = button.querySelector("i");

    if (configDetails.style.display === "none") {
      configDetails.style.display = "block";
      icon.className = "fas fa-chevron-up";
    } else {
      configDetails.style.display = "none";
      icon.className = "fas fa-chevron-down";
    }
  }

  async function saveConfigField(modelName, field, value) {
    try {
      const response = await fetch("/api/chat/models");
      const modelListResponse = await response.json();

      if (!modelListResponse.success) {
        throw new Error("无法获取模型列表");
      }

      const model = modelListResponse.models.find((m) => m.name === modelName);
      if (!model) {
        throw new Error(`模型 ${modelName} 不存在`);
      }

      const configData = { ...model.config, [field]: value };

      const updateResponse = await fetch(
        `/api/chat/models/${encodeURIComponent(modelName)}`,
        {
          method: "PUT",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            name: modelName,
            config: configData,
          }),
        },
      );

      const result = await updateResponse.json();

      if (result.success) {
        showAlert("success", `模型 ${modelName} 的配置已更新`);
      } else {
        throw new Error(result.message);
      }
    } catch (error) {
      console.error("更新配置失败:", error);
      showAlert("danger", "更新配置失败: " + error.message);
    }
  }

  async function saveThinkingField(modelName, field, value) {
    try {
      const response = await fetch("/api/chat/models");
      const modelListResponse = await response.json();

      if (!modelListResponse.success) {
        throw new Error("无法获取模型列表");
      }

      const model = modelListResponse.models.find((m) => m.name === modelName);
      if (!model) {
        throw new Error(`模型 ${modelName} 不存在`);
      }

      const tc = { ...(model.thinking_config || {}) };
      if (field === "enable_thinking") {
        tc[field] = value === "true" ? true : value === "false" ? false : null;
      } else {
        tc[field] = value || null;
      }

      const updateResponse = await fetch(
        `/api/chat/models/${encodeURIComponent(modelName)}`,
        {
          method: "PUT",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            name: modelName,
            thinking_config: tc,
          }),
        },
      );

      const result = await updateResponse.json();

      if (result.success) {
        showAlert("success", `模型 ${modelName} 的思考配置已更新`);
      } else {
        throw new Error(result.message);
      }
    } catch (error) {
      console.error("更新思考配置失败:", error);
      showAlert("danger", "更新思考配置失败: " + error.message);
    }
  }

  document.addEventListener("change", function (e) {
    if (e.target.classList.contains("config-field")) {
      const modelName = e.target.getAttribute("data-model");
      const field = e.target.getAttribute("data-config-field");
      const section = e.target.getAttribute("data-section");
      let value = e.target.value;

      if (e.target.type === "checkbox") {
        value = e.target.checked;
      } else if (e.target.type === "number") {
        if (field === "top_p" || field === "temperature") {
          value = parseFloat(value);
        } else {
          value = parseInt(value);
        }
      }

      if (section === "thinking") {
        saveThinkingField(modelName, field, value);
      } else {
        saveConfigField(modelName, field, value);
      }
    }
  });

  window.onclick = function (event) {
    const modal = document.getElementById("modelModal");
    if (event.target === modal) {
      closeModal();
    }
  };

  document.addEventListener("keydown", function (event) {
    if (event.key === "Escape") {
      closeModal();
    }
  });
</script>
{% endblock %}