feat: add NVIDIA NIM and Baidu CoBoom multi-provider support

README.md

@@ -10,30 +10,53 @@ pinned: false
 
 # 🦀 Hermès Agent
 
-基于 **Claude** 的 AI 对话助手 · 纯前端实现 · 零服务器成本
+基于 **Claude** 的 AI 对话助手 · 多模型支持 · 纯前端实现 · 零服务器成本
 
-## 特点
+## 支持的模型
 
-- 🌐 **纯前端** - 无服务器，部署在 Hugging Face Pages（免费）
-- 🔒 **隐私安全** - API Key 仅存储在你的浏览器中
-- ⚡ **实时响应** - 直连 Anthropic API，无中间层
-- 📱 **响应式设计** - 适配桌面和移动端
-- 💾 **上下文记忆** - 支持多轮对话
+### 🤖 Anthropic (Claude)
+| 模型 | 规模 | 特点 |
+|------|------|------|
+| Claude Sonnet 4 | ~120B | 最新旗舰模型 |
+| Claude 3.5 Sonnet | ~70B | 平衡性能与速度 |
+| Claude 3.5 Haiku | ~20B | 快速响应 |
 
-## 使用方法
+**API Key:** [console.anthropic.com](https://console.anthropic.com/) · 有免费额度
+
+### 🔋 NVIDIA NIM (免费 GPU 推理)
+| 模型 | 规模 | 特点 |
+|------|------|------|
+| Nemotron 70B | 70B | NVIDIA 优化 Llama |
+| Llama 3.1 405B | 405B | 超大参数模型 |
+| Llama 3.1 70B | 70B | 高性能开源 |
+| Mixtral 8x22B | 8x22B | MOE 架构 |
+| Gemma 2 27B | 27B | Google 开源 |
+
+**API Key:** [build.nvidia.com](https://build.nvidia.com/) · 部分模型免费
 
-1. 在上方设置中粘贴你的 **Anthropic API Key**
-2. 选择模型
-3. 开始对话！
+### 🌐 百度 CoBoom
+| 模型 | 特点 |
+|------|------|
+| ERNIE 4.5 Turbo | 文心一言 4.5 |
+| ERNIE Speed-Pro | 高速响应 |
+| ERNIE Lite-Pro | 轻量高性能 |
+| CoBuddy 代码模型 | 百度代码专用 |
 
-## 获取 API Key
+**API Key:** [cloud.baidu.com](https://cloud.baidu.com/)
+
+## 使用方法
 
-访问 [Anthropic Console](https://console.anthropic.com/) 创建免费 API Key
+1. 选择模型提供商（Anthropic / NVIDIA NIM / 百度）
+2. 选择具体模型
+3. 输入对应的 API Key
+4. 开始对话！
 
-## 技术实现
+## 技术特点
 
-- **前端**: 原生 HTML/CSS/JavaScript（零依赖）
-- **API**: Anthropic Messages API（直连）
-- **部署**: Hugging Face Spaces (Static)
+- 🌐 **纯前端** - 无服务器，部署在 Hugging Face Pages
+- 🔒 **隐私安全** - API Key 仅存储在浏览器本地
+- ⚡ **多模型** - 一个界面切换多个提供商
+- 💾 **上下文** - 支持多轮对话
+- 📱 **响应式** - 适配桌面和移动端
 
-> 💡 这是 Hermès Agent 的 Web 界面版本。核心 Agent 代码托管于 [cntalk/hermes-agent](https://github.com/cntalk/hermes-agent)
+> 💡 直连各大 API 提供商，无中间层，零服务器成本

index.html

@@ -20,33 +20,50 @@
     header h1 { font-size: 20px; font-weight: 700; }
     header .badge { background: rgba(255,255,255,0.2); padding: 4px 12px; border-radius: 20px; font-size: 12px; }
     
-    .container { max-width: 860px; margin: 0 auto; padding: 24px; width: 100%; flex: 1; display: flex; flex-direction: column; gap: 16px; }
+    .container { max-width: 900px; margin: 0 auto; padding: 24px; width: 100%; flex: 1; display: flex; flex-direction: column; gap: 16px; }
     
     .settings { background: var(--surface); border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
-    .settings h3 { font-size: 14px; color: #6b7280; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
+    .settings h3 { font-size: 13px; color: #9ca3af; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.5px; }
     .settings-grid { display: grid; grid-template-columns: 1fr 180px; gap: 12px; }
-    @media (max-width: 600px) { .settings-grid { grid-template-columns: 1fr; } }
+    .settings-row { display: flex; gap: 12px; flex-wrap: wrap; }
+    .settings-row > * { flex: 1; min-width: 200px; }
+    @media (max-width: 640px) { 
+      .settings-grid { grid-template-columns: 1fr; }
+      .settings-row > * { min-width: 100%; }
+    }
     
-    input[type="text"], input[type="password"], select, textarea {
-      width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; outline: none; transition: border-color 0.2s;
+    input, select, textarea {
+      width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; background: var(--surface);
     }
     input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(139,92,246,0.1); }
     select { cursor: pointer; }
+    .field-hint { font-size: 11px; color: #9ca3af; margin-top: 5px; }
+    .field-hint code { background: #f3f4f6; padding: 1px 5px; border-radius: 3px; font-size: 11px; }
+    
+    .provider-tabs { display: flex; gap: 4px; margin-bottom: 14px; background: #f3f4f6; padding: 4px; border-radius: 10px; }
+    .provider-tab { flex: 1; padding: 8px 12px; text-align: center; border-radius: 7px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; color: #6b7280; border: none; background: transparent; }
+    .provider-tab.active { background: var(--surface); color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+    .provider-tab:hover:not(.active) { color: var(--text); }
+    
+    .api-key-section { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
+    .api-key-section label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
     
     .chat-container { background: var(--surface); border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); flex: 1; display: flex; flex-direction: column; min-height: 480px; }
-    .chat-header { padding: 14px 20px; border-bottom: 1px solid var(--border); font-size: 14px; color: #6b7280; display: flex; align-items: center; gap: 8px; }
+    .chat-header { padding: 14px 20px; border-bottom: 1px solid var(--border); font-size: 13px; color: #6b7280; display: flex; align-items: center; gap: 8px; }
     .chat-header .dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; }
-    .chat-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
-    .msg { max-width: 80%; padding: 12px 16px; border-radius: 14px; line-height: 1.6; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
+    .chat-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
+    .msg { max-width: 82%; padding: 11px 15px; border-radius: 14px; line-height: 1.65; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
     .msg.user { align-self: flex-end; background: var(--primary); color: white; border-bottom-right-radius: 4px; }
     .msg.assistant { align-self: flex-start; background: #f3f4f6; border-bottom-left-radius: 4px; }
     .msg.error { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
-    .msg.system { align-self: center; background: transparent; color: #9ca3af; font-size: 13px; text-align: center; }
+    .msg.system { align-self: center; background: transparent; color: #9ca3af; font-size: 13px; text-align: center; max-width: 100%; }
+    .msg .model-tag { display: inline-block; font-size: 10px; background: rgba(0,0,0,0.06); padding: 1px 6px; border-radius: 4px; margin-bottom: 6px; color: #9ca3af; }
+    .msg.user .model-tag { background: rgba(255,255,255,0.2); color: rgba(255,255,255,0.8); }
     
-    .chat-input-area { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; }
+    .chat-input-area { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; }
     .chat-input-area textarea { resize: none; flex: 1; height: 48px; }
     .send-btn { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; border: none; padding: 0 24px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px; transition: opacity 0.2s; white-space: nowrap; }
-    .send-btn:hover { opacity: 0.9; }
+    .send-btn:hover { opacity: 0.88; }
     .send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
     
     .loading { display: none; align-items: center; gap: 8px; color: #6b7280; font-size: 13px; padding: 8px 0; }
@@ -55,9 +72,15 @@
     @keyframes spin { to { transform: rotate(360deg); } }
     
     .examples { display: flex; flex-wrap: wrap; gap: 8px; }
-    .example-chip { background: #f3f4f6; border: 1px solid var(--border); padding: 6px 14px; border-radius: 20px; font-size: 13px; cursor: pointer; transition: all 0.2s; }
+    .example-chip { background: #f3f4f6; border: 1px solid var(--border); padding: 6px 14px; border-radius: 20px; font-size: 13px; cursor: pointer; transition: all 0.15s; }
     .example-chip:hover { background: var(--primary); color: white; border-color: var(--primary); }
     
+    .model-info { font-size: 12px; color: #6b7280; margin-top: 4px; }
+    .model-info .tag { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; margin-right: 6px; }
+    .tag.nvidia { background: #76b90020; color: #76b900; }
+    .tag.baidu { background: #2932e120; color: #2932e1; }
+    .tag.anthropic { background: #d4a57420; color: #c47a43; }
+    
     .info-bar { font-size: 12px; color: #9ca3af; text-align: center; }
   </style>
 </head>
@@ -65,46 +88,46 @@
 
 <header>
   <h1>🦀 Hermès Agent</h1>
-  <span class="badge">Claude · HF Free Tier</span>
+  <span class="badge">HF Free · 多模型</span>
 </header>
 
 <div class="container">
+  
   <div class="settings">
-    <h3>⚙️ 设置</h3>
-    <div class="settings-grid">
-      <div>
-        <input type="password" id="apiKey" placeholder="sk-ant-... (粘贴你的 Anthropic API Key)" oninput="saveSettings()">
-        <div style="font-size:12px;color:#9ca3af;margin-top:6px;">Key 仅存储在本地浏览器中，不会发送给任何第三方</div>
-      </div>
+    <h3>⚙️ 模型与 API 设置</h3>
+    
+    <div class="provider-tabs">
+      <button class="provider-tab active" data-provider="anthropic" onclick="switchProvider('anthropic')">🤖 Anthropic</button>
+      <button class="provider-tab" data-provider="nvidia" onclick="switchProvider('nvidia')">🔋 NVIDIA NIM</button>
+      <button class="provider-tab" data-provider="baidu" onclick="switchProvider('baidu')">🌐 百度 CoBoom</button>
+    </div>
+    
+    <div class="settings-row">
       <div>
-        <select id="model" onchange="saveSettings()">
-          <option value="claude-sonnet-4-7-2027">Claude Sonnet 4</option>
-          <option value="claude-3-5-sonnet-2027-06-20">Claude 3.5 Sonnet</option>
-          <option value="claude-3-5-haiku-2027-03-07">Claude 3.5 Haiku</option>
-        </select>
+        <label for="model">模型</label>
+        <select id="model" onchange="updateModelInfo()"></select>
+        <div class="model-info" id="modelInfo"></div>
       </div>
     </div>
-    <div style="margin-top:12px;">
-      <div style="font-size:12px;color:#6b7280;margin-bottom:8px;">💡 示例问题</div>
-      <div class="examples">
-        <span class="example-chip" onclick="askExample(this.textContent)">你好，你叫什么名字？</span>
-        <span class="example-chip" onclick="askExample(this.textContent)">帮我写一个 Python Hello World</span>
-        <span class="example-chip" onclick="askExample(this.textContent)">解释什么是大语言模型</span>
-      </div>
+    
+    <div class="api-key-section">
+      <label for="apiKey">API Key <span id="keyHint"></span></label>
+      <input type="password" id="apiKey" placeholder="输入 API Key..." oninput="saveSettings()">
+      <div class="field-hint" id="keyHelp"></div>
     </div>
   </div>
 
   <div class="chat-container">
     <div class="chat-header">
       <span class="dot"></span>
-      <span id="statusText">基于 Claude 的 AI 对话助手</span>
+      <span id="statusText">选择模型并输入 API Key 后开始对话</span>
     </div>
     <div class="chat-messages" id="messages">
-      <div class="msg system">🦀 Hermès Agent 已就绪，请输入你的问题</div>
+      <div class="msg system">🦀 Hermès Agent · 多模型 AI 助手<br><span style="font-size:12px;opacity:0.7">支持 Anthropic / NVIDIA NIM / 百度 CoBoom</span></div>
     </div>
     <div class="loading" id="loading">
       <div class="spinner"></div>
-      <span>Hermès 思考中...</span>
+      <span id="loadingText">Hermès 思考中...</span>
     </div>
     <div class="chat-input-area">
       <textarea id="input" rows="1" placeholder="输入消息，按 Enter 发送..." onkeydown="handleKeydown(event)"></textarea>
@@ -112,33 +135,165 @@
     </div>
   </div>
 
+  <div style="background:var(--surface);border-radius:12px;padding:16px 20px;box-shadow:0 1px 3px rgba(0,0,0,0.08);">
+    <div style="font-size:12px;color:#9ca3af;margin-bottom:10px;text-transform:uppercase;letter-spacing:0.5px">💡 示例问题</div>
+    <div class="examples">
+      <span class="example-chip" onclick="askExample(this.textContent)">你好，你叫什么名字？</span>
+      <span class="example-chip" onclick="askExample(this.textContent)">帮我写一个 Python Hello World</span>
+      <span class="example-chip" onclick="askExample(this.textContent)">解释什么是大语言模型</span>
+      <span class="example-chip" onclick="askExample(this.textContent)">用 Python 实现快速排序</span>
+      <span class="example-chip" onclick="askExample(this.textContent)">解释什么是 REST API</span>
+    </div>
+  </div>
+
   <div class="info-bar">
-    由 <strong>Hermès Agent</strong> 驱动 · 运行在 Hugging Face Pages · 数据留存在你的浏览器
+    API Key 仅存储在浏览器本地 · 直连各大 API 提供商
   </div>
 </div>
 
 <script>
-const SYSTEM_PROMPT = `你是一个友好的 AI 助手，名叫 Hermès 🦀。核心原则：1. 简洁直接 - 结论先行 2. 行动导向 3. 中文优先。专长：信息查询、代码编写、写作翻译、逻辑推理。不确定时诚实说明，不编造。`;
+// ============================================================================
+// Model Configurations
+// ============================================================================
+
+const PROVIDERS = {
+  anthropic: {
+    name: 'Anthropic',
+    baseUrl: 'https://api.anthropic.com/v1/messages',
+    keyPlaceholder: 'sk-ant-...',
+    keyHelp: '访问 <a href="https://console.anthropic.com/" target="_blank" style="color:var(--primary)">console.anthropic.com</a> 创建免费 API Key',
+    models: [
+      { id: 'claude-sonnet-4-7-2027', name: 'Claude Sonnet 4', size: '~120B', tag: 'anthropic', hint: '最新旗舰模型' },
+      { id: 'claude-3-5-sonnet-2027-06-20', name: 'Claude 3.5 Sonnet', size: '~70B', tag: 'anthropic', hint: '平衡性能与速度' },
+      { id: 'claude-3-5-haiku-2027-03-07', name: 'Claude 3.5 Haiku', size: '~20B', tag: 'anthropic', hint: '快速响应' },
+    ]
+  },
+  nvidia: {
+    name: 'NVIDIA NIM',
+    baseUrl: 'https://integrate.api.nvidia.com/v1/chat/completions',
+    keyPlaceholder: 'nvapi-...',
+    keyHelp: '访问 <a href="https://build.nvidia.com/" target="_blank" style="color:var(--primary)">build.nvidia.com</a> 获取免费 API Key',
+    models: [
+      { id: 'nvidia/llama-3.1-nemotron-70b-instruct', name: 'Nemotron 70B', size: '70B', tag: 'nvidia', hint: 'NVIDIA 优化 Llama' },
+      { id: 'meta/llama-3.1-405b-instruct', name: 'Llama 3.1 405B', size: '405B', tag: 'nvidia', hint: '超大参数模型' },
+      { id: 'meta/llama-3.1-70b-instruct', name: 'Llama 3.1 70B', size: '70B', tag: 'nvidia', hint: '高性能开源' },
+      { id: 'mistralai/mixtral-8x22b-instruct-v0.1', name: 'Mixtral 8x22B', size: '8x22B', tag: 'nvidia', hint: 'MOE 架构' },
+      { id: 'google/gemma-2-27b-it', name: 'Gemma 2 27B', size: '27B', tag: 'nvidia', hint: 'Google 开源' },
+    ]
+  },
+  baidu: {
+    name: '百度 CoBoom',
+    baseUrl: '', // user needs to provide their own endpoint
+    keyPlaceholder: '输入 CoBoom API Key...',
+    keyHelp: '访问 <a href="https://cloud.baidu.com/" target="_blank" style="color:var(--primary)">cloud.baidu.com</a> 获取 CoBoom API Key',
+    models: [
+      { id: 'ernie-4.5-turbo', name: 'ERNIE 4.5 Turbo', size: '?', tag: 'baidu', hint: '文心一言 4.5 Turbo' },
+      { id: 'ernie-speed-pro', name: 'ERNIE Speed-Pro', size: '?', tag: 'baidu', hint: '高速响应版本' },
+      { id: 'ernie-lite-pro', name: 'ERNIE Lite-Pro', size: '?', tag: 'baidu', hint: '轻量高性能' },
+      { id: 'coboodle-code', name: 'CoBuddy 代码模型', size: '?', tag: 'baidu', hint: '百度代码专用模型' },
+    ]
+  }
+};
 
+// ============================================================================
+// State
+// ============================================================================
+
+let currentProvider = 'anthropic';
 let messages = [];
 
+const SYSTEM_PROMPT = `你是一个友好的 AI 助手，名叫 Hermès 🦀。
+
+核心原则：
+1. 简洁直接 - 结论先行，不需要废话
+2. 行动导向 - 有想法就执行
+3. 中文优先 - 用中文回答，除非用户用英文
+
+你的专长：
+- 信息查询与分析
+- 代码编写与调试
+- 写作与翻译
+- 逻辑推理
+
+遇到不确定的问题，诚实说明，不要编造。`;
+
+// ============================================================================
+// UI Functions
+// ============================================================================
+
+function switchProvider(provider) {
+  currentProvider = provider;
+  
+  // Update tabs
+  document.querySelectorAll('.provider-tab').forEach(tab => {
+    tab.classList.toggle('active', tab.dataset.provider === provider);
+  });
+  
+  // Update model dropdown
+  const select = document.getElementById('model');
+  const config = PROVIDERS[provider];
+  select.innerHTML = config.models.map(m => 
+    `<option value="${m.id}">${m.name} (${m.size})</option>`
+  ).join('');
+  
+  // Update key fields
+  document.getElementById('keyHint').textContent = `（${config.name}）`;
+  document.getElementById('keyHelp').innerHTML = config.keyHelp;
+  
+  updateModelInfo();
+  saveSettings();
+}
+
+function updateModelInfo() {
+  const modelId = document.getElementById('model').value;
+  const config = PROVIDERS[currentProvider];
+  const model = config.models.find(m => m.id === modelId);
+  if (model) {
+    document.getElementById('modelInfo').innerHTML = 
+      `<span class="tag ${model.tag}">${model.tag.toUpperCase()}</span>${model.hint}`;
+  }
+}
+
 function saveSettings() {
-  localStorage.setItem('hermes_apiKey', document.getElementById('apiKey').value);
-  localStorage.setItem('hermes_model', document.getElementById('model').value);
+  localStorage.setItem('hermes_provider', currentProvider);
+  localStorage.setItem('hermes_apiKey_' + currentProvider, document.getElementById('apiKey').value);
+  localStorage.setItem('hermes_model_' + currentProvider, document.getElementById('model').value);
 }
 
 function loadSettings() {
-  const savedKey = localStorage.getItem('hermes_apiKey') || '';
-  const savedModel = localStorage.getItem('hermes_model') || 'claude-sonnet-4-7-2027';
+  const savedProvider = localStorage.getItem('hermes_provider') || 'anthropic';
+  currentProvider = savedProvider;
+  
+  // Update tabs
+  document.querySelectorAll('.provider-tab').forEach(tab => {
+    tab.classList.toggle('active', tab.dataset.provider === savedProvider);
+  });
+  
+  // Fill provider config
+  const config = PROVIDERS[savedProvider];
+  document.getElementById('keyHint').textContent = `（${config.name}）`;
+  document.getElementById('keyHelp').innerHTML = config.keyHelp;
+  document.getElementById('model').innerHTML = config.models.map(m => 
+    `<option value="${m.id}">${m.name} (${m.size})</option>`
+  ).join('');
+  
+  // Restore saved values
+  const savedKey = localStorage.getItem('hermes_apiKey_' + savedProvider) || '';
+  const savedModel = localStorage.getItem('hermes_model_' + savedProvider) || config.models[0].id;
   document.getElementById('apiKey').value = savedKey;
   document.getElementById('model').value = savedModel;
+  updateModelInfo();
 }
 loadSettings();
 
+// ============================================================================
+// Chat Functions
+// ============================================================================
+
 function askExample(text) {
-  const apiKey = document.getElementById('apiKey').value;
+  const apiKey = document.getElementById('apiKey').value.trim();
   if (!apiKey) {
-    addMessage('system', '⚠️ 请先在设置中输入 Anthropic API Key');
+    addMsg('system', '⚠️ 请先选择模型并输入对应的 API Key');
     return;
   }
   document.getElementById('input').value = text;
@@ -152,18 +307,28 @@ function handleKeydown(e) {
   }
 }
 
-function addMessage(role, content) {
+function addMsg(role, content, modelTag) {
   const container = document.getElementById('messages');
   const div = document.createElement('div');
   div.className = `msg ${role}`;
-  div.textContent = content;
+  if (modelTag && role === 'assistant') {
+    div.innerHTML = `<div class="model-tag">${modelTag}</div>${escapeHtml(content)}`;
+  } else {
+    div.textContent = content;
+  }
   container.appendChild(div);
   container.scrollTop = container.scrollHeight;
-  return div;
 }
 
-function setLoading(on) {
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+function setLoading(on, text) {
   document.getElementById('loading').className = on ? 'loading show' : 'loading';
+  if (text) document.getElementById('loadingText').textContent = text;
   document.getElementById('sendBtn').disabled = on;
   document.getElementById('input').disabled = on;
 }
@@ -172,6 +337,99 @@ function setStatus(text) {
   document.getElementById('statusText').textContent = text;
 }
 
+// ============================================================================
+// API Calls
+// ============================================================================
+
+async function callAnthropic(apiKey, model, msgs) {
+  const resp = await fetch('https://api.anthropic.com/v1/messages', {
+    method: 'POST',
+    headers: {
+      'x-api-key': apiKey,
+      'anthropic-version': '2023-06-01',
+      'content-type': 'application/json',
+    },
+    body: JSON.stringify({
+      model: model,
+      max_tokens: 4096,
+      system: SYSTEM_PROMPT,
+      messages: msgs,
+    }),
+  });
+  if (!resp.ok) {
+    const err = await resp.json().catch(() => ({}));
+    throw new Error(err.error?.message || `API 错误 ${resp.status}`);
+  }
+  const data = await resp.json();
+  return data.content[0].text;
+}
+
+async function callNvidia(apiKey, model, msgs) {
+  // Convert messages to openai-compatible format
+  const openaiMsgs = [{ role: 'system', content: SYSTEM_PROMPT }];
+  for (const m of msgs) {
+    openaiMsgs.push({ role: m.role, content: m.content });
+  }
+  
+  const resp = await fetch('https://integrate.api.nvidia.com/v1/chat/completions', {
+    method: 'POST',
+    headers: {
+      'Authorization': 'Bearer ' + apiKey,
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      model: model,
+      messages: openaiMsgs,
+      max_tokens: 4096,
+      temperature: 0.7,
+      stream: false,
+    }),
+  });
+  if (!resp.ok) {
+    const err = await resp.json().catch(() => ({}));
+    throw new Error(err.error?.message || `API 错误 ${resp.status}`);
+  }
+  const data = await resp.json();
+  return data.choices[0].message.content;
+}
+
+async function callBaidu(apiKey, model, msgs) {
+  // Baidu ERNIE uses different API - show guidance for user to configure
+  const baseUrls = {
+    'ernie-4.5-turbo': 'https://qianfan.baidubce.com/v2/app/conversation/v2/chat',
+    'ernie-speed-pro': 'https://qianfan.baidubce.com/v2/app/conversation/v2/chat',
+    'ernie-lite-pro': 'https://qianfan.baidubce.com/v2/app/conversation/v2/chat',
+  };
+  
+  // For CoBoom code model, use Wenxin API format
+  const systemMsg = { role: 'system', content: SYSTEM_PROMPT };
+  const openaiMsgs = [systemMsg, ...msgs.map(m => ({ role: m.role, content: m.content }))];
+  
+  // Try standard ERNIE API endpoint
+  const endpoint = baseUrls[model] || 'https://qianfan.baidubce.com/v2/app/conversation/v2/chat';
+  
+  const resp = await fetch(endpoint, {
+    method: 'POST',
+    headers: {
+      'Authorization': 'Bearer ' + apiKey,
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      model: model,
+      messages: openaiMsgs,
+      max_tokens: 4096,
+    }),
+  });
+  
+  if (!resp.ok) {
+    const text = await resp.text();
+    throw new Error(`百度 API 错误 ${resp.status}: ${text}`);
+  }
+  
+  const data = await resp.json();
+  return data.result || JSON.stringify(data);
+}
+
 async function sendMessage() {
   const input = document.getElementById('input');
   const text = input.value.trim();
@@ -180,47 +438,41 @@ async function sendMessage() {
 
   if (!text) return;
   if (!apiKey) {
-    addMessage('system', '⚠️ 请先在设置中输入 Anthropic API Key');
+    addMsg('system', '⚠️ 请先输入 API Key');
     return;
   }
 
-  addMessage('user', text);
+  addMsg('user', text);
   input.value = '';
-  setLoading(true);
-  setStatus('正在连接 Claude...');
-
-  const payload = {
-    model: model,
-    max_tokens: 4096,
-    system: SYSTEM_PROMPT,
-    messages: [...messages, { role: 'user', content: text }]
-  };
+  setLoading(true, 'Hermès 思考中...');
+  setStatus(`正在调用 ${PROVIDERS[currentProvider].name}...`);
+
+  const userMsg = { role: 'user', content: text };
+  let reply;
+  let modelLabel = model;
 
   try {
-    const resp = await fetch('https://api.anthropic.com/v1/messages', {
-      method: 'POST',
-      headers: {
-        'x-api-key': apiKey,
-        'anthropic-version': '2023-06-01',
-        'content-type': 'application/json',
-      },
-      body: JSON.stringify(payload),
-    });
-
-    if (!resp.ok) {
-      const err = await resp.json().catch(() => ({}));
-      throw new Error(err.error?.message || `API 错误 ${resp.status}`);
+    switch (currentProvider) {
+      case 'anthropic':
+        reply = await callAnthropic(apiKey, model, messages.concat(userMsg));
+        break;
+      case 'nvidia':
+        reply = await callNvidia(apiKey, model, messages.concat(userMsg));
+        break;
+      case 'baidu':
+        reply = await callBaidu(apiKey, model, messages.concat(userMsg));
+        break;
     }
-
-    const data = await resp.json();
-    const reply = data.content[0].text;
-    messages.push({ role: 'user', content: text });
-    messages.push({ role: 'assistant', content: reply });
-    addMessage('assistant', reply);
-    setStatus('基于 Claude 的 AI 对话助手');
+    
+    messages.push(userMsg, { role: 'assistant', content: reply });
+    const config = PROVIDERS[currentProvider];
+    const modelObj = config.models.find(m => m.id === model);
+    modelLabel = modelObj ? modelObj.name : model;
+    addMsg('assistant', reply, modelLabel);
+    setStatus(`已就绪 · ${modelLabel}`);
   } catch (err) {
-    addMessage('error', `❌ ${err.message}`);
-    setStatus('连接出错');
+    addMsg('error', `❌ ${err.message}`);
+    setStatus('请求失败');
   } finally {
     setLoading(false);
   }