Add support for more LLM service providers (#2348)

jcglqmoyx · jcglqmoyx · web-flow · commit 8c005bd68d67 · 2025-09-14T09:01:18.000+08:00
Co-authored-by: jcglqmoyx &lt;jcglqmoyx@gmail.com&gt;
diff --git a/.gitignore b/.gitignore
@@ -7,3 +7,4 @@ package-lock.json
 jsconfig.json
 src/content_scripts/safari.js
 *~
+.idea
diff --git a/README.md b/README.md
@@ -611,28 +611,34 @@ There are several LLM providers integrated into Surfingkeys now, use `A` to call
 * Bedrock
 * DeepSeek
 * Gemini
+* Custom LLM provider (e.g.: SiliconFlow and OpenRouter; other OpenAI API compatible services should also work)
 
 To use the feature, you need set up your credentials/API keys first, like
 
-        settings.defaultLLMProvider = "bedrock";
-        settings.llm = {
-            bedrock: {
-                accessKeyId: '********************',
-                secretAccessKey: '****************************************',
-                // model: 'anthropic.claude-3-5-sonnet-20241022-v2:0',
-                model: 'us.anthropic.claude-3-7-sonnet-20250219-v1:0',
-            },
-            gemini: {
-                apiKey: '***************************************',
-            },
-            ollama: {
-                model: 'qwen2.5-coder:32b',
-            },
-            deepseek: {
-                apiKey: '***********************************',
-                model: 'deepseek-chat',
-            }
-        };
+    settings.defaultLLMProvider = "bedrock";
+    settings.llm = {
+        bedrock: {
+            accessKeyId: '********************',
+            secretAccessKey: '****************************************',
+            // model: 'anthropic.claude-3-5-sonnet-20241022-v2:0',
+            model: 'us.anthropic.claude-3-7-sonnet-20250219-v1:0',
+        },
+        gemini: {
+            apiKey: '***************************************',
+        },
+        ollama: {
+            model: 'qwen2.5-coder:32b',
+        },
+        deepseek: {
+            apiKey: '***********************************',
+            model: 'deepseek-chat',
+        },
+        custom: {
+            serviceUrl: 'https://api.siliconflow.cn/v1/chat/completions',
+            apiKey: '***********************************',
+            model: 'deepseek-ai/DeepSeek-V3.1',
+        }
+    };
 
 You can also use `A` in visual mode. Press `v` or `V` to enter visual mode, then `v` again to select the text you'd like to chat with AI about, then `A` to call out the LLM chat box. Now start to chat with AI about the selected text.
 
diff --git a/README_CN.md b/README_CN.md
@@ -595,28 +595,34 @@ Surfingkeys默认使用[这个markdown分析器](https://github.com/chjj/marked)
 * Bedrock
 * DeepSeek
 * Gemini
+* 自定义模型(例如：SiliconFlow 和 OpenRouter, 其他和OpenAI API兼容的服务应该也可以)
 
 使用之前，必须设置相应的密钥或者API key，比如
 
-        settings.defaultLLMProvider = "bedrock";
-        settings.llm = {
-            bedrock: {
-                accessKeyId: '********************',
-                secretAccessKey: '****************************************',
-                // model: 'anthropic.claude-3-5-sonnet-20241022-v2:0',
-                model: 'us.anthropic.claude-3-7-sonnet-20250219-v1:0',
-            },
-            gemini: {
-                apiKey: '***************************************',
-            },
-            ollama: {
-                model: 'qwen2.5-coder:32b',
-            },
-            deepseek: {
-                apiKey: '***********************************',
-                model: 'deepseek-chat',
-            }
-        };
+    settings.defaultLLMProvider = "bedrock";
+    settings.llm = {
+        bedrock: {
+            accessKeyId: '********************',
+            secretAccessKey: '****************************************',
+            // model: 'anthropic.claude-3-5-sonnet-20241022-v2:0',
+            model: 'us.anthropic.claude-3-7-sonnet-20250219-v1:0',
+        },
+        gemini: {
+            apiKey: '***************************************',
+        },
+        ollama: {
+            model: 'qwen2.5-coder:32b',
+        },
+        deepseek: {
+            apiKey: '***********************************',
+            model: 'deepseek-chat',
+        },
+        custom: {
+            serviceUrl: 'https://api.siliconflow.cn/v1/chat/completions',
+            apiKey: '***********************************',
+            model: 'deepseek-ai/DeepSeek-V3.1',
+        }
+    };
 
 你也可以在Visual mode下使用大语言模型对话。按`v`或`V`进入Visual mode，再按`v`选中你关注的文本，最后`A`按调出对话窗口，开始和AI就选中文本进行探讨。
 另一个方式是使用Regional Hints mode选择需要与AI进行探讨的内容。按`L`选择一个区域，再按`l`调出对话窗口。
diff --git a/package.json b/package.json
@@ -38,13 +38,13 @@
     "@types/offscreencanvas": "^2019.6.4",
     "babel-plugin-module-resolver": "^4.1.0",
     "copy-webpack-plugin": "^9.0.1",
-    "documentation": "^13.2.5",
+    "documentation": "^14.0.3",
     "file-loader": "^6.2.0",
     "filemanager-webpack-plugin": "^8.0.0",
     "jest": "^27.3.1",
     "jest-image-snapshot": "^4.5.1",
     "npm-run-all": "^4.1.5",
-    "puppeteer": "^10.2.0",
+    "puppeteer": "^24.20.0",
     "strict-event-emitter-types": "^2.0.0",
     "string-replace-loader": "^3.0.3",
     "style-loader": "^3.2.1",
@@ -60,6 +60,7 @@
     "@pixi/constants": "^7.4.0",
     "@pixi/core": "^7.4.0",
     "@pixi/display": "^7.4.0",
+    "@pixi/extensions": "^7.4.0",
     "@pixi/graphics": "^7.4.0",
     "@pixi/math": "^7.4.0",
     "@pixi/runner": "^7.4.0",
@@ -68,7 +69,6 @@
     "@pixi/ticker": "^7.4.0",
     "@pixi/unsafe-eval": "^7.4.0",
     "@pixi/utils": "^7.4.0",
-    "@pixi/extensions": "^7.4.0",
     "ace-builds": "^1.4.12",
     "aws4fetch": "^1.0.20",
     "dompurify": "^3.2.4",
diff --git a/src/background/llm.js b/src/background/llm.js
@@ -498,9 +498,101 @@ function gemini(req, opts) {
     }).catch(error => console.error('Error:', error));
 }
 
+function custom(req, opts) {
+    const decoder = new TextDecoder();
+    const abortCtrl = new AbortController();
+
+    if (!custom.serviceUrl) {
+        opts.onChunk('Please set service URL correctly.');
+        opts.onComplete({});
+        return;
+    }
+    if (!custom.apiKey) {
+        opts.onChunk('Please set API key correctly.');
+        opts.onComplete({});
+        return;
+    }
+    if (!custom.model) {
+        opts.onChunk('Please set model correctly.');
+        opts.onComplete({});
+        return;
+    }
+
+    const transformMessages = msgs => msgs.map(m =>
+        typeof m.content === 'string' ? m : { role: m.role, content: m.content[0].text }
+    );
+
+    fetch(custom.serviceUrl, {
+        method: 'POST',
+        headers: {
+            Authorization: `Bearer ${custom.apiKey}`,
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            model: custom.model,
+            stream: true,
+            messages: transformMessages(req.messages),
+        }),
+        signal: abortCtrl.signal,
+    })
+        .then(resp => {
+            const reader = resp.body.getReader();
+            let contentBlock = { type: 'text', text: '' };
+
+            const readStream = () => {
+                reader.read()
+                    .then(({ done, value }) => {
+                        if (done) {
+                            return;
+                        }
+                        const chunk = decoder.decode(value);
+                        try {
+                            const lines = chunk.trim().split('\n\n');
+                            const dataPat = /^data: /;
+                            for (const line of lines) {
+                                if (!dataPat.test(line)) {
+                                    continue;
+                                }
+                                const data = line.replace(dataPat, '');
+                                if (data === '[DONE]') {
+                                    opts.onComplete({ role: 'assistant', content: [contentBlock] });
+                                    return;
+                                }
+                                const o = JSON.parse(data);
+                                if (o.choices?.[0]?.delta?.content) {
+                                    const txt = o.choices[0].delta.content;
+                                    opts.onChunk(txt);
+                                    contentBlock.text += txt;
+                                }
+                            }
+                        } catch (e) {
+                            console.error('Error parsing chunk:', e);
+                        }
+
+                        readStream();
+                    })
+                    .catch(err => {
+                        if (err.name !== 'AbortError') {
+                            console.error('Stream error:', err);
+                        }
+                    });
+            };
+
+            readStream();
+        })
+        .catch(err => {
+            if (err.name !== 'AbortError') {
+                console.error('Fetch error:', err);
+            }
+        });
+
+    return () => abortCtrl.abort();
+}
+
 export default {
     bedrock,
     deepseek,
     gemini,
     ollama,
+    custom,
 }
diff --git a/src/background/start.js b/src/background/start.js
@@ -1324,6 +1324,12 @@ function start(browser) {
                 llmClients.bedrock.init(llmConf.bedrock);
                 delete message.settings.llm.bedrock;
             }
+            if (llmConf.custom && llmConf.custom.serviceUrl && llmConf.custom.apiKey && llmConf.custom.model) {
+                llmClients.custom.serviceUrl = llmConf.custom.serviceUrl;
+                llmClients.custom.apiKey = llmConf.custom.apiKey;
+                llmClients.custom.model = llmConf.custom.model;
+                delete message.settings.llm.custom;
+            }
         } else {
             if (message.settings.showAdvanced && isMV3) {
                 if (isUserScriptsAvailable()) {
