update ocr

renderer/public/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4870215 */
-  src: url('iconfont.woff2?t=1745654620708') format('woff2'),
+  src: url('iconfont.woff2?t=1745735110196') format('woff2'),
-       url('iconfont.woff?t=1745654620708') format('woff'),
+       url('iconfont.woff?t=1745735110196') format('woff'),
-       url('iconfont.ttf?t=1745654620708') format('truetype');
+       url('iconfont.ttf?t=1745735110196') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-error:before {
+  content: "\e6c6";
+}
+
+.icon-warning:before {
+  content: "\e681";
+}
+
 .icon-copy:before {
   content: "\e77c";
 }

renderer/public/index.html

@@ -5,6 +5,7 @@
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width,initial-scale=1.0">
+	<meta name="referrer" content="no-referrer">
 	<link rel="icon" href="<%= BASE_URL %>favicon.svg">
 	<link rel="stylesheet" href="default-dark.css">
 	<link rel="stylesheet" href="vscode.css">

renderer/src/App.vue

@@ -29,9 +29,9 @@ bridge.addCommandListener('hello', data => {
 
 
 function initDebug() {
-	// connectionArgs.commandString = 'node /Users/bytedance/projects/mcp/servers/src/puppeteer/dist/index.js';
+	connectionArgs.commandString = 'node /Users/bytedance/projects/mcp/servers/src/puppeteer/dist/index.js';
 	// connectionArgs.commandString = 'node C:/Users/K/code/servers/src/puppeteer/dist/index.js';
-	connectionArgs.commandString = 'uv run mcp run bing-picture.py';
+	// connectionArgs.commandString = 'uv run mcp run bing-picture.py';
 	connectionArgs.cwd = '../servers';
 	connectionMethods.current = 'STDIO';
 
@@ -104,7 +104,7 @@ onMounted(() => {
 }
 
 .message-text img {
-    max-width: 98%;
+    max-width: 300px;
 }
 
 </style>

renderer/src/components/main-panel/chat/index.vue

@@ -331,7 +331,7 @@ onUnmounted(() => {
 
 .message-avatar {
     margin-right: 12px;
-    margin-top: 7px;
+    margin-top: 1px;
 }
 
 .message-content {

renderer/src/components/main-panel/chat/message/toolcall.vue

@@ -6,7 +6,7 @@
             </span>
         </span>
     </div>
-    <div class="message-text tool_calls" :class="{ 'fail': props.message.toolResult && props.message.extraInfo.state != MessageState.Success }">
+    <div class="message-text tool_calls" :class="[currentMessageLevel]">
         <div v-if="props.message.content" v-html="markdownToHtml(props.message.content)"></div>
 
         <el-collapse v-model="activeNames" v-if="props.message.tool_calls">
@@ -37,9 +37,9 @@
                     <!-- 工具调用结果 -->
                     <div v-if="props.message.toolResult">
                         <div class="tool-call-header result">
-                            <span class="tool-name" :class="{ 'error': !isValid }">
+                            <span class="tool-name">
+                                <span :class="`iconfont icon-${currentMessageLevel}`"></span>
                                 {{ isValid ? '响应': '错误' }}
-
                                 <el-button v-if="!isValid" size="small"
                                     @click="gotoIssue()"
                                 >
@@ -76,7 +76,7 @@
                                 </div>
                             </span>
                         </div>
-                        <div v-else class="tool-result" :class="{ 'error': !isValid }">
+                        <div v-else class="tool-result">
                             <div class="tool-result-content"
                                 v-for="(error, index) of collectErrors"
                                 :key="index"
@@ -162,6 +162,16 @@ const isValid = computed(() => {
     }
 });
 
+const currentMessageLevel = computed(() => {
+    if (!isValid.value) {
+        return 'error';
+    }
+    if (props.message.extraInfo.state != MessageState.Success) {
+        return 'warning';
+    }
+    return 'info';
+})
+
 const collectErrors = computed(() => {
     const errorMessages = [];
     try {
@@ -186,14 +196,31 @@ const collectErrors = computed(() => {
     padding: 3px 10px;
 }
 
-.message-text.tool_calls.fail {
+.message-text.tool_calls.warning {
+    border: 1px solid var(--el-color-warning);
+}
+
+.message-text.tool_calls.warning .tool-name {
+    color: var(--el-color-warning);
+}
+
+.message-text.tool_calls.warning .tool-result {
+	background-color: rgba(230, 162, 60, 0.5);
+}
+
+.message-text.tool_calls.error {
     border: 1px solid var(--el-color-error);
 }
 
-.message-text.tool_calls.fail .tool-name {
+.message-text.tool_calls.error .tool-name {
     color: var(--el-color-error);
 }
 
+.message-text.tool_calls.error .tool-result {
+	background-color: rgba(245, 108, 108, 0.5);
+}
+
+
 .message-text .el-collapse-item__header {
     display: flex;
     align-items: center;
@@ -265,10 +292,6 @@ const collectErrors = computed(() => {
     border-radius: 4px;
 }
 
-.tool-result.error {
-	background-color: rgba(245, 108, 108, 0.5);
-}
-
 .tool-text {
     white-space: pre-wrap;
     line-height: 1.6;

service/src/hook/mcp-server.ts

@@ -3,6 +3,7 @@ import * as path from 'path';
 import * as fs from 'fs';
 import { v4 as uuidv4 } from 'uuid';
 import { diskStorage } from './db';
+import { PostMessageble } from './adapter';
 
 export function saveBase64ImageData(
     base64String: string,
@@ -51,27 +52,51 @@ interface ToolCallResponse {
     toolResult?: any;
 }
 
-export function postProcessToolcallResponse(response: ToolCallResponse): ToolCallResponse {
+async function handleImage(
+    content: ToolCallContent,
+    webview: PostMessageble
+) {
+    if (content.data && content.mimeType) {
+        const fileName = saveBase64ImageData(content.data, content.mimeType);
+        content.data = fileName;
+        content._meta = {
+            ocr: true,
+            status: 'pending'
+        };
+
+        // 加入工作线程
+        
+    }
+}
+
+
+/**
+ * @description 对 mcp server 返回的结果进行预处理
+ * 对于特殊结果构造工作线程解析成文本或者其他格式的数据（比如 image url）
+ * 0.x.x 受限于技术，暂时将所有结果转化成文本
+ * @param response 
+ * @returns 
+ */
+export function postProcessMcpToolcallResponse(
+    response: ToolCallResponse,
+    webview: PostMessageble
+): ToolCallResponse {
     if (response.isError) {
         // 如果是错误响应，将其转换为错误信息
         return response;
     }
 
     // 将 content 中的图像 base64 提取出来，并保存到本地
-    if (response.content) {
+    for (const content of response.content || []) {
-        response.content.forEach((content) => {
+        switch (content.type) {
-            if (content.type === 'image') {
+            case 'image':
-                // TODO: check here
+                handleImage(content, webview);
-                if (content.data && content.mimeType) {
+                break;
-                    const fileName = saveBase64ImageData(content.data, content.mimeType);
+        
-                    content.data = fileName;
+            default:
-                    content._meta = {
+                break;
-                        ocr: true
-                    };
         }
     }
-        })
-    }
 
     return response;
 }

service/src/hook/ocr.ts

@@ -1,5 +1,7 @@
 import Tesseract from 'tesseract.js';
 
+
+
 export async function tesseractOCR(
     imagePath: string,
     logger: (message: Tesseract.LoggerMessage) => void,

service/tabs.image_crawler.json

@@ -17,7 +17,10 @@
       "componentIndex": 2,
       "storage": {
         "currentToolName": "image_crawler",
-        "formData": {}
+        "formData": {
+          "key_word": "",
+          "image_num": 0
+        }
       }
     },
     {
@@ -29,11 +32,11 @@
         "messages": [
           {
             "role": "user",
-            "content": "帮我找几张 明日方舟 m3 的图片",
+            "content": "帮我找几张 明日方舟 m3 的图片，渲染出来",
             "extraInfo": {
-              "created": 1745687338279,
+              "created": 1745730609368,
               "state": "success",
-              "serverName": "deepseek"
+              "serverName": "Huoshan DeepSeek"
             }
           },
           {
@@ -41,7 +44,7 @@
             "content": "",
             "tool_calls": [
               {
-                "id": "call_0_ccaf0a55-06d5-4db0-82ac-62ca44cfa812",
+                "id": "call_660r5ehyhh86cjtqnako0mnt",
                 "index": 0,
                 "type": "function",
                 "function": {
@@ -51,58 +54,109 @@
               }
             ],
             "extraInfo": {
-              "created": 1745687343346,
+              "created": 1745730610263,
               "state": "success",
-              "serverName": "deepseek"
+              "serverName": "Huoshan DeepSeek"
             }
           },
           {
             "role": "tool",
-            "tool_call_id": "call_0_ccaf0a55-06d5-4db0-82ac-62ca44cfa812",
+            "tool_call_id": "call_660r5ehyhh86cjtqnako0mnt",
             "content": [
               {
                 "type": "text",
-                "text": "[ImageResult(url='https://c-img.18183.com/images/2023/06/14/beedbfb9dc8312034e008d31cef057aa.png@!te5', title='', source='bing'), ImageResult(url='https://c-img.18183.com/images/2023/06/14/dbd58facae1dc77dcc15f3099b312e19.png@!te5', title='', source='bing'), ImageResult(url='https://media.9game.cn/gamebase/2021/6/2/227331281.jpg', title='', source='bing'), ImageResult(url='https://media.9game.cn/gamebase/ieu-gdc-pre-process/images/20231208/13/29/b0765f37ad86ebe8d09a2274ab590fa0.jpg', title='', source='bing'), ImageResult(url='https://i0.hdslb.com/bfs/article/847d632ae30d6ef39498e17fa390d6bb064bf6fc.jpg', title='', source='bing')]"
+                "text": "[ImageResult(url='https://gd-hbimg.huaban.com/0c97d53a94f333fad66ca70f32601d8c34c2d4db8f53e0-netl2f_fw658', title='', source='bing'), ImageResult(url='https://ts1.tc.mm.bing.net/th/id/R-C.db1a4364345d8b082d4de48cae32ae05?rik=rhE9iKxzhvwzDg', title='', source='bing'), ImageResult(url='https://gd-hbimg.huaban.com/a4b669d3e68da3ee91a12afe7a0bd689038bdc262aece-yasxcI_fw658', title='', source='bing'), ImageResult(url='https://ts1.tc.mm.bing.net/th/id/R-C.d9dc5fcd4b628e805d4b6a0edb0f9a48?rik=RiUbfVRpViaT%2fw', title='', source='bing'), ImageResult(url='https://gd-hbimg.huaban.com/205d12dbf22aec83ff34bd533616575f0939b561136c6-jwF7XH_fw658', title='', source='bing')]"
               }
             ],
             "extraInfo": {
-              "created": 1745687344413,
+              "created": 1745730610855,
               "state": "success",
-              "serverName": "deepseek",
+              "serverName": "Huoshan DeepSeek"
-              "usage": {
-                "prompt_tokens": 169,
-                "completion_tokens": 32,
-                "total_tokens": 201,
-                "prompt_tokens_details": {
-                  "cached_tokens": 128
-                },
-                "prompt_cache_hit_tokens": 128,
-                "prompt_cache_miss_tokens": 41
-              }
             }
           },
           {
             "role": "assistant",
-            "content": "我找到了几张关于“明日方舟 M3”的图片，以下是它们的链接：\n\n1. [图片链接](https://c-img.18183.com/images/2023/06/14/beedbfb9dc8312034e008d31cef057aa.png@!te5)\n2. [图片链接](https://c-img.18183.com/images/2023/06/14/dbd58facae1dc77dcc15f3099b312e19.png@!te5)\n3. [图片链接](https://media.9game.cn/gamebase/2021/6/2/227331281.jpg)\n4. [图片链接](https://media.9game.cn/gamebase/ieu-gdc-pre-process/images/20231208/13/29/b0765f37ad86ebe8d09a2274ab590fa0.jpg)\n5. [图片链接](https://i0.hdslb.com/bfs/article/847d632ae30d6ef39498e17fa390d6bb064bf6fc.jpg)\n\n你可以点击链接查看或下载这些图片。如果需要更多图片或其他帮助，请告诉我！",
+            "content": "以下是根据关键词“明日方舟 m3”找到的图片：\n\n1. ![Image 1](https://gd-hbimg.huaban.com/0c97d53a94f333fad66ca70f32601d8c34c2d4db8f53e0-netl2f_fw658)\n2. ![Image 2](https://ts1.tc.mm.bing.net/th/id/R-C.db1a4364345d8b082d4de48cae32ae05?rik=rhE9iKxzhvwzDg)\n3. ![Image 3](https://gd-hbimg.huaban.com/a4b669d3e68da3ee91a12afe7a0bd689038bdc262aece-yasxcI_fw658)\n4. ![Image 4](https://ts1.tc.mm.bing.net/th/id/R-C.d9dc5fcd4b628e805d4b6a0edb0f9a48?rik=RiUbfVRpViaT%2fw)\n5. ![Image 5](https://gd-hbimg.huaban.com/205d12dbf22aec83ff34bd533616575f0939b561136c6-jwF7XH_fw658)\n\n你可以点击链接查看这些图片。",
             "extraInfo": {
-              "created": 1745687357235,
+              "created": 1745730615968,
               "state": "success",
-              "serverName": "deepseek",
+              "serverName": "Huoshan DeepSeek"
-              "usage": {
-                "prompt_tokens": 454,
-                "completion_tokens": 250,
-                "total_tokens": 704,
-                "prompt_tokens_details": {
-                  "cached_tokens": 128
-                },
-                "prompt_cache_hit_tokens": 128,
-                "prompt_cache_miss_tokens": 326
             }
+          },
+          {
+            "role": "user",
+            "content": "图源是哪里",
+            "extraInfo": {
+              "created": 1745730806510,
+              "state": "success",
+              "serverName": "Huoshan DeepSeek"
+            }
+          },
+          {
+            "role": "assistant",
+            "content": "这些图片的来源是Bing搜索引擎和Huaban网站。具体来源如下：\n\n1. **Bing**:\n   - [Image 2](https://ts1.tc.mm.bing.net/th/id/R-C.db1a4364345d8b082d4de48cae32ae05?rik=rhE9iKxzhvwzDg)\n   - [Image 4](https://ts1.tc.mm.bing.net/th/id/R-C.d9dc5fcd4b628e805d4b6a0edb0f9a48?rik=RiUbfVRpViaT%2fw)\n\n2. **Huaban**:\n   - [Image 1](https://gd-hbimg.huaban.com/0c97d53a94f333fad66ca70f32601d8c34c2d4db8f53e0-netl2f_fw658)\n   - [Image 3](https://gd-hbimg.huaban.com/a4b669d3e68da3ee91a12afe7a0bd689038bdc262aece-yasxcI_fw658)\n   - [Image 5](https://gd-hbimg.huaban.com/205d12dbf22aec83ff34bd533616575f0939b561136c6-jwF7XH_fw658)\n\n你可以通过点击链接查看图片的详细信息。",
+            "extraInfo": {
+              "created": 1745730812395,
+              "state": "success",
+              "serverName": "Huoshan DeepSeek"
+            }
+          },
+          {
+            "role": "user",
+            "content": "帮我找几张 明日方舟 白面鸮 的图片，渲染出来",
+            "extraInfo": {
+              "created": 1745730909927,
+              "state": "success",
+              "serverName": "Huoshan DeepSeek"
+            }
+          },
+          {
+            "role": "assistant",
+            "content": "",
+            "tool_calls": [
+              {
+                "id": "call_ho74cop478w5gbfc0jnuo12f",
+                "index": 0,
+                "type": "function",
+                "function": {
+                  "name": "image_crawler",
+                  "arguments": "{\"key_word\":\"明日方舟 白面鸮\",\"image_num\":5}"
+                }
+              }
+            ],
+            "extraInfo": {
+              "created": 1745730910906,
+              "state": "success",
+              "serverName": "Huoshan DeepSeek"
+            }
+          },
+          {
+            "role": "tool",
+            "tool_call_id": "call_ho74cop478w5gbfc0jnuo12f",
+            "content": [
+              {
+                "type": "text",
+                "text": "[ImageResult(url='https://c-ssl.duitang.com/uploads/item/201910/22/20191022190241_dixsc.thumb.1000_0.jpg', title='', source='bing'), ImageResult(url='https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/live/e06866505212ddcce0dabf9afebce225.mp4.jpg', title='', source='bing'), ImageResult(url='https://c-ssl.dtstatic.com/uploads/item/202007/15/20200715183732_iomsj.thumb.1000_0.jpg', title='', source='bing'), ImageResult(url='https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/live/710b67dfa125248f816d63617f551452_preview.jpg', title='', source='bing'), ImageResult(url='https://n.sinaimg.cn/sinacn10122/670/w400h270/20200104/db75-imrkkfx7540303.jpg', title='', source='bing')]"
+              }
+            ],
+            "extraInfo": {
+              "created": 1745730911376,
+              "state": "success",
+              "serverName": "Huoshan DeepSeek"
+            }
+          },
+          {
+            "role": "assistant",
+            "content": "以下是根据关键词“明日方舟 白面鸮”找到的图片：\n\n1. ![Image 1](https://c-ssl.duitang.com/uploads/item/201910/22/20191022190241_dixsc.thumb.1000_0.jpg)\n2. ![Image 2](https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/live/e06866505212ddcce0dabf9afebce225.mp4.jpg)\n3. ![Image 3](https://c-ssl.dtstatic.com/uploads/item/202007/15/20200715183732_iomsj.thumb.1000_0.jpg)\n4. ![Image 4](https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/live/710b67dfa125248f816d63617f551452_preview.jpg)\n5. ![Image 5](https://n.sinaimg.cn/sinacn10122/670/w400h270/20200104/db75-imrkkfx7540303.jpg)\n\n你可以点击链接查看这些图片。",
+            "extraInfo": {
+              "created": 1745730916072,
+              "state": "success",
+              "serverName": "Huoshan DeepSeek"
             }
           }
         ],
         "settings": {
-          "modelIndex": 0,
+          "modelIndex": 8,
           "enableTools": [
             {
               "name": "image_crawler",