vibe-ai-c 2.1.0

package/LLM.txt

@@ -0,0 +1,71 @@
+# VibeAI
+
+VibeAI 是一个极简的、面向浏览器的多供应商 AI SDK 与 UI 管理工具。它允许开发者通过几行代码集成 OpenAI 兼容的 API，并提供内置的供应商管理、模型资产池选择以及自动连通性校验功能。
+
+## 核心特性
+
+- **多供应商管理**：支持 OpenAI, DeepSeek, Gemini, Qwen 等所有兼容 OpenAI 协议的供应商。
+- **模型资产池 (Model Assets)**：用户可从数百个模型中多选常用模型，构建专属资产池。
+- **自动校验**：后台静默进行连通性检查（✅/❌ 状态实时反馈）。
+- **零依赖 ESM**：纯 JavaScript 实现，无任何外部库依赖。
+- **持久化**：所有配置自动存储于浏览器的 `localStorage` 中。
+
+## 快速开始
+
+### 1. 引入与初始化
+```javascript
+import { vibeAI } from './vibe-ai.js';
+
+// 初始化并绑定 UI 元素
+vibeAI.init({
+  setupBtnId: 'settings-btn',   // 点击此按钮打开管理弹窗
+  modelSelectId: 'model-select' // 自动填充选中的模型资产池
+});
+```
+
+### 2. 发起对话请求
+```javascript
+// 支持流式传输 (Streaming)
+const stream = await vibeAI.chat({
+  messages: [{ role: 'user', content: 'Hello!' }],
+  stream: true
+});
+
+for await (const chunk of stream) {
+  console.log(chunk); // 逐字输出
+}
+
+// 也支持普通请求
+const response = await vibeAI.chat({
+  messages: [{ role: 'user', content: 'Hello!' }]
+});
+console.log(response.choices[0].message.content);
+```
+
+## API 参考
+
+### `vibeAI.init(config)`
+- `setupBtnId`: (可选) 触发设置界面的 DOM ID。
+- `modelSelectId`: (可选) 用于切换当前激活模型的 `<select>` 元素 ID。
+
+### `vibeAI.chat(payload)`
+- `payload`: 符合 OpenAI Chat Completion 格式的对象。
+- `payload.stream`: 布尔值，为 true 时返回 `AsyncGenerator`。
+- **注意**：如果未配置 API Key，调用时会自动弹出设置窗口。
+
+### `vibeAI.openSettings()`
+- 手动打开供应商管理界面。
+
+## 配置规范
+
+- **Base URL**: 通常需要包含版本号，例如 `https://api.deepseek.com/v1`。
+- **Presets**: 提供了常用的 Base URL 快速填充（Badges）。
+- **连通性标识**:
+  - `⏳`: 正在测试连通性
+  - `✅`: 校验通过
+  - `❌`: 请求失败或 Key 无效
+
+## 开发建议
+
+- 建议在 HTML 中预留一个空的 `<select id="model-select"></select>` 以获得最佳体验。
+- 所有的配置都通过 `vibe_ai_v2_config` 键名存储在 `localStorage` 中。

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "vibe-ai-c",
+  "version": "2.1.0",
+  "description": "一个极简的、面向浏览器的多供应商 AI SDK 与 UI 管理工具。支持 OpenAI 兼容协议。",
+  "main": "vibe-ai.js",
+  "type": "module",
+  "scripts": {
+    "dev": "npx servor . demo.html 8080",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "ai",
+    "openai",
+    "deepseek",
+    "llm",
+    "sdk",
+    "ui-component",
+    "browser-only"
+  ],
+  "author": "Your Name",
+  "license": "MIT",
+  "dependencies": {},
+  "devDependencies": {},
+  "files": [
+    "vibe-ai.js",
+    "llm.txt",
+    "README.md"
+  ]
+}

package/vibe-ai.js

@@ -0,0 +1,279 @@
+/**
+ * VibeAI v2.1 - 完整修正版
+ */
+
+const STORAGE_KEY = 'vibe_ai_v2_config';
+
+class VibeAI {
+  constructor() {
+    this.data = this._load();
+    this._injectStyles();
+    this.presets = {
+      'OpenAI': 'https://api.openai.com/v1',
+      'DeepSeek': 'https://api.deepseek.com',
+      'Gemini': 'https://generativelanguage.googleapis.com/v1beta/openai',
+      'Qwen': 'https://dashscope.aliyuncs.com/compatible-mode/v1',
+    };
+    this._createModal();
+    this.modelSelectElement = null;
+  }
+
+  // --- 初始化 ---
+  init({ setupBtnId, modelSelectId } = {}) {
+    if (setupBtnId) document.getElementById(setupBtnId).onclick = () => this.openSettings();
+    if (modelSelectId) {
+      this.modelSelectElement = document.getElementById(modelSelectId);
+      this.modelSelectElement.onchange = (e) => {
+        this.data.activeModel = e.target.value;
+        this._save();
+      };
+      this._refreshExternalSelect();
+    }
+    return this;
+  }
+
+  // --- 核心对话 API ---
+  async chat(payload) {
+    const profile = this._getActiveProfile();
+    if (!profile) { this.openSettings(); throw new Error('请先配置 AI 供应商'); }
+    
+    const response = await fetch(`${profile.baseUrl}/chat/completions`, {
+      method: 'POST',
+      headers: { 
+        'Content-Type': 'application/json', 
+        'Authorization': `Bearer ${profile.apiKey}` 
+      },
+      body: JSON.stringify({ 
+        model: this.data.activeModel || profile.selectedModels[0].id, 
+        ...payload 
+      })
+    });
+    
+    if (!response.ok) {
+      const errData = await response.json().catch(() => ({}));
+      throw new Error(errData.error?.message || `请求失败: ${response.status}`);
+    }
+
+    return payload.stream ? this._handleStream(response) : await response.json();
+  }
+
+  // --- 流式处理生成器 ---
+  async* _handleStream(response) {
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      const lines = decoder.decode(value).split('\n');
+      for (const line of lines) {
+        const trimmed = line.trim();
+        if (!trimmed || !trimmed.startsWith('data: ')) continue;
+        if (trimmed.includes('[DONE]')) break;
+        try {
+          const data = JSON.parse(trimmed.slice(6));
+          const content = data.choices[0]?.delta?.content;
+          if (content) yield content;
+        } catch (e) {}
+      }
+    }
+  }
+
+  // --- 连通性校验 ---
+  async _testConnectivity(profile, model) {
+    try {
+      const resp = await fetch(`${profile.baseUrl}/chat/completions`, {
+        method: 'POST',
+        headers: { 
+          'Content-Type': 'application/json', 
+          'Authorization': `Bearer ${profile.apiKey}` 
+        },
+        body: JSON.stringify({ 
+          model, 
+          messages: [{ role: 'user', content: 'hi' }], 
+          max_tokens: 5 
+        })
+      });
+      return resp.ok;
+    } catch { return false; }
+  }
+
+  // --- 内部逻辑与持久化 ---
+  _load() { 
+    const raw = localStorage.getItem(STORAGE_KEY);
+    return raw ? JSON.parse(raw) : { profiles: [], activeProfileId: null, activeModel: null }; 
+  }
+  
+  _save() { 
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(this.data)); 
+    this._refreshExternalSelect();
+  }
+
+  _getActiveProfile() { 
+    return this.data.profiles.find(p => p.id === this.data.activeProfileId); 
+  }
+
+  // --- UI 构建 ---
+  _createModal() {
+    this.modal = document.createElement('div');
+    this.modal.className = 'vaic-overlay';
+    const presetsHTML = Object.keys(this.presets)
+      .map(name => `<span class="vaic-badge" data-url="${this.presets[name]}">${name}</span>`)
+      .join('');
+
+    this.modal.innerHTML = `
+      <div class="vaic-card">
+        <div class="vaic-header">
+          <h3>AI 资产管理</h3>
+          <button class="vaic-close-x" id="vaic-close">✕</button>
+        </div>
+        <div class="vaic-body">
+          <div id="vaic-profile-list" class="vaic-list"></div>
+          <hr>
+          <div class="vaic-form">
+            <div class="vaic-presets">${presetsHTML}</div>
+            <input type="text" id="vaic-name" placeholder="供应商名称 (如: DeepSeek)">
+            <input type="text" id="vaic-base" placeholder="Base URL (包含 /v1)">
+            <p class="vaic-tip">提示：通常需以 /v1 结尾（如：https://api.deepseek.com/v1）</p>
+            <input type="password" id="vaic-key" placeholder="API Key">
+            <div class="vaic-model-picker">
+              <select id="vaic-all-models" multiple title="按住 Ctrl/Cmd 可多选"></select>
+              <button id="vaic-fetch-btn">获取模型</button>
+            </div>
+            <p class="vaic-tip">* 必须先点击“获取模型”，然后按住 Ctrl/Cmd 多选</p>
+          </div>
+        </div>
+        <div class="vaic-footer">
+          <button class="vaic-btn vaic-btn-primary" id="vaic-save">保存并使用</button>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(this.modal);
+
+    // 绑定事件
+    this.modal.querySelectorAll('.vaic-badge').forEach(el => {
+      el.onclick = () => {
+        this.modal.querySelector('#vaic-base').value = el.dataset.url;
+        this.modal.querySelector('#vaic-name').value = el.innerText;
+      };
+    });
+    this.modal.querySelector('#vaic-close').onclick = () => this.closeSettings();
+    this.modal.querySelector('#vaic-fetch-btn').onclick = () => this._handleFetchModels();
+    this.modal.querySelector('#vaic-save').onclick = () => this._handleSave();
+  }
+
+  async _handleFetchModels() {
+    const btn = this.modal.querySelector('#vaic-fetch-btn');
+    const url = this.modal.querySelector('#vaic-base').value;
+    const key = this.modal.querySelector('#vaic-key').value;
+    if (!url || !key) return alert('请先填写 URL 和 Key');
+    btn.innerText = '加载中...';
+    try {
+      const resp = await fetch(`${url}/models`, { headers: { 'Authorization': `Bearer ${key}` } });
+      const json = await resp.json();
+      const models = json.data.map(m => m.id).sort((a, b) => a.localeCompare(b));
+      this.modal.querySelector('#vaic-all-models').innerHTML = models.map(m => `<option value="${m}">${m}</option>`).join('');
+    } catch (e) { alert('获取失败，请检查 Base URL 是否支持跨域或 URL 格式'); }
+    btn.innerText = '获取模型';
+  }
+
+  async _handleSave() {
+    const name = this.modal.querySelector('#vaic-name').value;
+    const baseUrl = this.modal.querySelector('#vaic-base').value;
+    const apiKey = this.modal.querySelector('#vaic-key').value;
+    const selectedOptions = Array.from(this.modal.querySelector('#vaic-all-models').selectedOptions);
+    
+    if (!name || !apiKey || selectedOptions.length === 0) return alert('请完整填写并选择模型');
+
+    const modelPool = selectedOptions.map(opt => ({ id: opt.value, status: 'testing' }));
+    const profile = { id: Date.now().toString(), name, baseUrl, apiKey, selectedModels: modelPool };
+    
+    this.data.profiles.push(profile);
+    this.data.activeProfileId = profile.id;
+    this.data.activeModel = modelPool[0].id;
+    this._save();
+    this._renderProfiles();
+    this.closeSettings();
+
+    // 异步校验所有选中的模型
+    for (let mObj of modelPool) {
+      this._testConnectivity(profile, mObj.id).then(ok => {
+        mObj.status = ok ? 'pass' : 'fail';
+        this._save();
+      });
+    }
+  }
+
+  _switchProfile(id) {
+    this.data.activeProfileId = id;
+    const profile = this._getActiveProfile();
+    if (profile && profile.selectedModels.length > 0) {
+      this.data.activeModel = profile.selectedModels[0].id;
+    }
+    this._save();
+    this._renderProfiles();
+  }
+
+  _deleteProfile(id) {
+    this.data.profiles = this.data.profiles.filter(p => p.id !== id);
+    if (this.data.activeProfileId === id) this.data.activeProfileId = null;
+    this._save();
+    this._renderProfiles();
+  }
+
+  _refreshExternalSelect() {
+    if (!this.modelSelectElement) return;
+    const profile = this._getActiveProfile();
+    if (!profile) {
+      this.modelSelectElement.innerHTML = '<option>未配置</option>';
+      return;
+    }
+    this.modelSelectElement.innerHTML = profile.selectedModels.map(m => 
+      `<option value="${m.id}" ${m.id === this.data.activeModel ? 'selected' : ''}>
+        ${m.status === 'pass' ? '✅' : m.status === 'fail' ? '❌' : '⏳'} ${m.id}
+      </option>`
+    ).join('');
+  }
+
+  _renderProfiles() {
+    const list = this.modal.querySelector('#vaic-profile-list');
+    list.innerHTML = this.data.profiles.map(p => `
+      <div class="vaic-item ${p.id === this.data.activeProfileId ? 'active' : ''}">
+        <span onclick="vibeAI._switchProfile('${p.id}')" style="cursor:pointer; flex:1;">
+          <b>${p.name}</b> <small>(${p.selectedModels.length} models)</small>
+        </span>
+        <button onclick="vibeAI._deleteProfile('${p.id}')">删除</button>
+      </div>
+    `).join('');
+  }
+
+  openSettings() { this.modal.style.display = 'flex'; this._renderProfiles(); }
+  closeSettings() { this.modal.style.display = 'none'; }
+
+  _injectStyles() {
+    const style = document.createElement('style');
+    style.textContent = `
+      .vaic-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center; z-index: 10000; font-family: -apple-system, system-ui, sans-serif; }
+      .vaic-card { background: #fff; width: 420px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); overflow: hidden; display: flex; flex-direction: column; }
+      .vaic-header { padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f0f0f0; }
+      .vaic-body { padding: 20px; overflow-y: auto; max-height: 70vh; }
+      .vaic-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
+      .vaic-badge { padding: 4px 10px; background: #f0f0f0; border-radius: 6px; font-size: 11px; cursor: pointer; border: 1px solid #eee; }
+      .vaic-badge:hover { background: #000; color: #fff; }
+      .vaic-form input { width: 100%; padding: 10px; margin-bottom: 8px; border: 1px solid #ddd; border-radius: 8px; box-sizing: border-box; font-size: 13px; }
+      .vaic-tip { font-size: 10px; color: #999; margin: -4px 0 12px 2px; }
+      .vaic-model-picker { display: flex; gap: 8px; }
+      .vaic-model-picker select { flex: 1; height: 100px; border-radius: 8px; border: 1px solid #ddd; padding: 5px; font-size: 12px; }
+      .vaic-model-picker button { width: 80px; border-radius: 8px; border: 1px solid #ddd; cursor: pointer; font-size: 11px; background: #f9f9f9; }
+      .vaic-item { display: flex; justify-content: space-between; padding: 10px; background: #f8f8f8; border-radius: 10px; margin-bottom: 8px; font-size: 13px; border: 1px solid transparent; }
+      .vaic-item.active { border-color: #000; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
+      .vaic-btn { width: 100%; padding: 14px; border-radius: 12px; border: none; cursor: pointer; font-weight: bold; background: #000; color: #fff; }
+      .vaic-item button { background: none; border: none; color: #ff4444; cursor: pointer; font-size: 11px; }
+      .vaic-close-x { background: none; border: none; font-size: 20px; cursor: pointer; color: #ccc; }
+      hr { border: 0; border-top: 1px solid #eee; margin: 15px 0; }
+    `;
+    document.head.appendChild(style);
+  }
+}
+
+export const vibeAI = new VibeAI();
+window.vibeAI = vibeAI;