diff --git a/bizyui/js/model_apply.js b/bizyui/js/model_apply.js index dcfa85ef..56862f76 100644 --- a/bizyui/js/model_apply.js +++ b/bizyui/js/model_apply.js @@ -149,6 +149,9 @@ const NodeInfoLogger = (function() { // 使用装饰器模式扩展节点的onMouseDown方法 node.onMouseDown = function(e, pos, canvas) { + if (this._isServerMode && this.type === 'LoadImage') { + return; + } // 对于小部件点击或右键点击，直接使用原始方法处理 if (e.widgetClick || e.button !== 0) { return this._originalOnMouseDown?.apply(this, arguments); diff --git a/src/components/assistant/Sidebar.vue b/src/components/assistant/Sidebar.vue index 07465b70..34762a5d 100644 --- a/src/components/assistant/Sidebar.vue +++ b/src/components/assistant/Sidebar.vue @@ -23,152 +23,143 @@ - -
-
-
-
-
-
- {{ message.role === 'user' ? '👤' : '🤖' }} -
+
+
+
+
+
+ {{ message.role === 'user' ? '👤' : '🤖' }} +
+
+
+
+ {{ + message.role === 'user' ? 'You' : $t('sidebar.assistant.title') + }} + {{ message.time }}
-
-
- {{ - message.role === 'user' ? 'You' : $t('sidebar.assistant.title') - }} - {{ message.time }} -
- -
- 用户上传图片 - -
+
+ 用户上传图片 +
+ -
+ {{ getNodeActionText(sidebarStore.nodeInfo) }} +
- - -
-
- -
-
{{ processingStatus }}
-
-
-
-
-
+ +
- - -
-
-
- {{ $t('sidebar.assistant.nodeName') }}: - {{ sidebarStore.nodeInfo.title }} -
-
- {{ $t('sidebar.assistant.nodeType') }}: - {{ sidebarStore.nodeInfo.type }} -
+
+
{{ processingStatus }}
+
+
+
+
-
-
- 图片预览 - -
+
+
+ +
+
+
+ {{ $t('sidebar.assistant.nodeName') }}: + {{ sidebarStore.nodeInfo.title }} +
+
+ {{ $t('sidebar.assistant.nodeType') }}: + {{ sidebarStore.nodeInfo.type }}
+
+
+
+ 图片预览 + +
+
-
- - + +
+ -
- - - - - - + >
- + + + + +
+ +
@@ -182,7 +173,7 @@ sendStreamChatRequest, createImageUserMessage, formatOutputTextLight, - generateImage + handleImageWithKontextPro } from './util' import { useI18n } from 'vue-i18n' import { useToaster } from '@/components/modules/toats/index' @@ -190,7 +181,7 @@ const { t } = useI18n() const sidebarStore = useSidebarStore() - // 拖拽调整大小---------------------------------------' + // 侧边栏宽度相关变量 const sidebarWidth = ref(550) // 默认宽度 const minWidth = 50 // 最小宽度 @@ -321,6 +312,9 @@ // 清空对话历史 const clearHistory = () => { + if (isGenerating.value) { + abortGeneration() + } // 创建一个新的欢迎消息 const welcomeMessage = { role: 'assistant' as const, @@ -328,10 +322,10 @@ time: getCurrentTime() } - // 更新UI显示 - chatMessages.value = [welcomeMessage] - console.log('历史记录已清空，并添加了欢迎消息') - generateNewPromptId() + setTimeout(() => { + chatMessages.value = [welcomeMessage] + generateNewPromptId() + }, 10) } // 中止生成 @@ -341,31 +335,13 @@ abortController.value = null isLoading.value = false isGenerating.value = false - console.log('已手动中止生成') + processingStatus.value = '' } } // 服务端模式 const serverMode = ref(false) - // 生图功能 - const isGeneratingImage = ref(false) - - const generateImageAction = async () => { - if (isLoading.value) return - - // 在输入框中添加生成图片前缀 - userInput.value = `生成图片: ${userInput.value.trim()}` - // 聚焦到输入框最后一个字 - setTimeout(() => { - textareaRef.value?.focus() - if (textareaRef.value) { - const position = '生成图片:'.length + 1 - textareaRef.value.setSelectionRange(position, position) - } - }, 0) - } - const sendMessage = async () => { if (!canSendMessage.value || isLoading.value) return generateNewRequestId() @@ -383,7 +359,7 @@ // 创建用户消息并添加到聊天记录 const userMessage = { role: 'user' as const, - content: messageText, + content: messageText || '', time: currentTime, hasImage: hasImage, image: previewImage.value @@ -399,68 +375,59 @@ }, 0) try { - // 判断是否是图片生成请求 - if (isImageGeneration) { - isGeneratingImage.value = true - processingStatus.value = '正在生成图片...' - - // 提取提示词 - const prompt = messageText.replace('生成图片:', '').trim() || '一张漂亮的图片' - - // 调用图像生成API - const imageUrl = await generateImage({ - prompt, - model: 'Kwai-Kolors/Kolors', - loading_callback: loading => { - // 加载状态更新 - if (!loading) { - processingStatus.value = '' - } else { - processingStatus.value = '正在生成图片...' - } - }, - error_callback: error => { - useToaster({ - type: 'error', - message: '生成图片失败: ' + (error.message || '未知错误') - }) + if (hasImage && !isImageGeneration) { + processingStatus.value = '正在编辑图片...' + try { + // 创建AbortController用于中止图片编辑请求 + abortController.value = new AbortController() + const imageUrl = await handleImageWithKontextPro( + messageText || '请编辑这张图片', + previewImage.value, + abortController.value.signal + ) + + if (abortController.value?.signal.aborted) { + isLoading.value = false + isGenerating.value = false + processingStatus.value = '' + return } - }) + // Image预加载 + const img = new Image() + await new Promise((resolve, reject) => { + img.onload = () => resolve(true) + img.onerror = () => reject(new Error('图片加载失败')) + img.src = imageUrl + }) + // 图片加载成功后，添加带图片的消息 + const assistantMessage = { + role: 'assistant' as const, + content: serverMode.value + ? '已为您编辑图片' + : '已为您编辑图片，点击LoadImage节点可以直接应用。', + time: getCurrentTime(), + hasImage: true, + image: imageUrl + } + chatMessages.value.push(assistantMessage) + // 更新状态 + isLoading.value = false + isGenerating.value = false + processingStatus.value = '' + removeImage() // 清除已处理的图片 + // 滚动到底部 + setTimeout(() => { + scrollToBottom() + }, 0) - // 生成成功后，添加带图片的助手消息 - const assistantMessage = { - role: 'assistant' as const, - // 服务端模式下只展示"已为您生成图片" - content: serverMode.value - ? '已为您生成图片' - : '已为您生成图片（点击LoadImage节点可以应用）', - time: getCurrentTime(), - hasImage: true, - image: imageUrl + return + } catch (error: any) { + isLoading.value = false + isGenerating.value = false + processingStatus.value = '' + return } - - chatMessages.value.push(assistantMessage) - - // 成功提示 - useToaster({ - type: 'success', - message: '图片生成成功' - }) - - // 更新状态 - isGeneratingImage.value = false - isLoading.value = false - isGenerating.value = false - processingStatus.value = '' - - // 滚动到底部 - setTimeout(() => { - scrollToBottom() - }, 0) - - return } - // 创建AbortController用于中止请求 abortController.value = new AbortController() @@ -571,20 +538,17 @@ } }, { - model: 'Qwen/Qwen2.5-VL-72B-Instruct', + model: 'Pro/deepseek-ai/DeepSeek-V3', prompt_id: promptId.value, request_id: requestId.value } ) } catch (error) { - console.error('请求过程出错:', error) - const errorMsgTime = getCurrentTime() - // 添加错误消息 chatMessages.value.push({ role: 'assistant', - content: t('sidebar.assistant.errorMessage'), + content: String(error), time: errorMsgTime }) @@ -710,58 +674,47 @@ console.error('没有图片URL') return } + let base64Data = imageUrl - try { - // 获取图片的base64数据 - let base64Data = imageUrl - - // 如果图片URL不是base64格式，需要获取并转换 - if (!imageUrl.startsWith('data:')) { - try { - const response = await fetch(imageUrl) - const blob = await response.blob() - base64Data = await new Promise(resolve => { - const reader = new FileReader() - reader.onloadend = () => resolve(reader.result as string) - reader.readAsDataURL(blob) - }) - } catch (error) { - console.error('获取图片数据失败:', error) - useToaster({ - type: 'error', - message: '获取图片数据失败，无法应用到节点' - }) - return - } - } - - // 创建要发送到节点的图片数据对象 - const imageData = { - nodeId: sidebarStore.nodeInfo.id, - imageBase64: base64Data, - nodeType: sidebarStore.nodeInfo.type - } - console.log(window.bizyAirLib, 'window.bizyAirLib-----') - - // 如果window.bizyAirLib存在并有updateNodeImage方法，调用它 - if ( - typeof window.bizyAirLib !== 'undefined' && - typeof window.bizyAirLib.updateNodeImage === 'function' - ) { - window.bizyAirLib.updateNodeImage(imageData) - useToaster({ - type: 'success', - message: '图片已应用到节点: ' + sidebarStore.nodeInfo.title + if (!imageUrl.startsWith('data:')) { + try { + const response = await fetch(imageUrl) + const blob = await response.blob() + base64Data = await new Promise(resolve => { + const reader = new FileReader() + reader.onloadend = () => resolve(reader.result as string) + reader.readAsDataURL(blob) }) - } else { - console.error('bizyAirLib.updateNodeImage未定义') + } catch (error) { + console.error('获取图片数据失败:', error) useToaster({ type: 'error', - message: '系统功能未就绪，无法应用图片到节点' + message: '获取图片数据失败，无法应用到节点' }) + return } - } catch (error) { - console.error('应用图片到节点失败:', error) + } + + // 创建要发送到节点的图片数据对象 + const imageData = { + nodeId: sidebarStore.nodeInfo.id, + imageBase64: base64Data, + nodeType: sidebarStore.nodeInfo.type + } + console.log(window.bizyAirLib, 'window.bizyAirLib-----') + + // 如果window.bizyAirLib存在并有updateNodeImage方法，调用它 + if ( + typeof window.bizyAirLib !== 'undefined' && + typeof window.bizyAirLib.updateNodeImage === 'function' + ) { + window.bizyAirLib.updateNodeImage(imageData) + useToaster({ + type: 'success', + message: '图片已应用到节点: ' + sidebarStore.nodeInfo.title + }) + } else { + console.error('bizyAirLib.updateNodeImage未定义') useToaster({ type: 'error', message: '应用图片到节点失败' @@ -779,6 +732,57 @@ sendMessage() } + // 选择现有图片 + const selectExistingImage = (imageUrl: string) => { + if (!imageUrl) return + previewImage.value = imageUrl + // 如果图片URL以data:开头，则为base64格式 + if (previewImage.value.includes('data:')) { + try { + // 提取base64部分 + const base64Part = previewImage.value.split('base64,')[1] + if (base64Part) { + uploadedImageBase64.value = base64Part + console.log('已设置base64数据，长度:', uploadedImageBase64.value.length) + } else { + console.error('无法从图片URL提取base64数据') + } + } catch (error) { + console.error('解析base64数据出错:', error) + } + } else if (imageUrl.startsWith('http')) { + // 否则尝试将图片转换为base64 + console.log('正在获取远程图片:', imageUrl.substring(0, 50) + '...') + fetch(imageUrl) + .then(response => { + if (!response.ok) { + throw new Error(`无法获取图片: ${response.status} ${response.statusText}`) + } + return response.blob() + }) + .then(blob => { + const reader = new FileReader() + reader.onloadend = () => { + if (typeof reader.result === 'string') { + previewImage.value = reader.result + const base64data = reader.result.split('base64,')[1] + if (base64data) { + uploadedImageBase64.value = base64data + console.log('已转换远程图片为base64，长度:', uploadedImageBase64.value.length) + } + } + } + reader.readAsDataURL(blob) + }) + .catch(error => console.error('获取图片出错:', error)) + } + + // 聚焦到输入框 + setTimeout(() => { + textareaRef.value?.focus() + }, 0) + } + onMounted(() => { // 从本地存储加载宽度设置 const savedWidth = localStorage.getItem('bizyair-sidebar-width') @@ -1367,4 +1371,59 @@ color: #fff; background-color: rgba(255, 255, 255, 0.1); } + + /* 添加标签页样式 */ + .tab-navigation { + display: flex; + border-bottom: 1px solid #e0e0e0; + margin-bottom: 10px; + } + + .tab-btn { + padding: 8px 16px; + background: none; + border: none; + border-bottom: 2px solid transparent; + cursor: pointer; + font-weight: 500; + color: #666; + transition: all 0.2s; + } + + .flux-kontext-container { + height: calc(100% - 50px); + overflow-y: auto; + } + + /* 可点击图片样式 */ + .clickable-image { + cursor: pointer; + transition: + transform 0.2s, + box-shadow 0.2s; + } + + .clickable-image:hover { + transform: scale(1.02); + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); + } + + .clickable-image::after { + content: '点击复用此图片'; + position: absolute; + bottom: 8px; + left: 50%; + transform: translateX(-50%); + background-color: rgba(0, 0, 0, 0.7); + color: white; + padding: 4px 8px; + border-radius: 4px; + font-size: 12px; + opacity: 0; + transition: opacity 0.2s; + pointer-events: none; + } + .clickable-image:hover::after { + opacity: 1; + } diff --git a/src/components/assistant/util.ts b/src/components/assistant/util.ts index fa9afd0f..48af687a 100644 --- a/src/components/assistant/util.ts +++ b/src/components/assistant/util.ts @@ -11,16 +11,6 @@ export interface ChatApiOptions { request_id?: string } -// 图像生成选项接口 -export interface ImageGenerationOptions { - prompt: string - n?: number - model?: string - size?: string - loading_callback?: (loading: boolean) => void - error_callback?: (error: any) => void -} - // 消息接口 export interface ChatMessage { role: 'user' | 'assistant' | 'system' @@ -70,7 +60,6 @@ export function buildChatRequestBody( const mergedOptions = { ...defaultApiOptions, ...options } return { model: mergedOptions.model, - stream: true, max_tokens: mergedOptions.max_tokens, temperature: mergedOptions.temperature, top_p: mergedOptions.top_p, @@ -133,7 +122,6 @@ export function createTextUserMessage(text: string): ChatMessage { export async function prepareMessagesWithHistory( currentMessage: ChatMessage ): Promise { - // 由于不再使用数据库，直接返回包含当前消息的数组 return [currentMessage] } @@ -243,9 +231,23 @@ export async function sendStreamChatRequest( messagesArray = messages } - const requestBody = buildChatRequestBody(messagesArray, options) + const filteredMessages = messagesArray.map(message => { + const filteredMessage = { ...message } + if (Array.isArray(filteredMessage.content)) { + const textContents = filteredMessage.content.filter(item => item.type === 'text') + if (textContents.length > 0 && textContents[0].text) { + filteredMessage.content = textContents[0].text + } else { + filteredMessage.content = '' + } + } + + return filteredMessage + }) + const requestBody = buildChatRequestBody(filteredMessages, options) + + requestBody.stream = true - // 创建AbortController用于中止请求 const abortController = new AbortController() try { @@ -334,13 +336,19 @@ export function formatOutputText(text: string): string { console.log('格式化前的原始文本:', text) // 替换井号标记（如 "###"，"####"等） - text = text.replace(/^(#{1,6})\s*(.+)$/gm, (hashes, content) => { - // 根据井号数量决定标题级别或者样式 + text = text.replace(/^(#{1,6})\s+(.+)$/gm, (hashes, content) => { const level = Math.min(hashes.length, 6) - // 对于标题内容，应用颜色样式而不是使用h标签 + return `
${content}
` }) + text = text.replace(/#(\S+?)(?=#|\s|$)/g, (match, tagContent) => { + if (tagContent.includes('<') && !tagContent.includes('>')) { + return match + } + return `#${tagContent}` + }) + // 替换加粗文本 text = text.replace(/\*\*([^*]+)\*\*/g, '$1') @@ -367,6 +375,20 @@ export function formatOutputTextLight(text: string): string { // 基本的Markdown格式转换 let formatted = text + // 处理标题格式 + formatted = formatted.replace(/^(#{1,6})\s+(.+)$/gm, (hashes, content) => { + const level = Math.min(hashes.length, 6) + return `
${content}
` + }) + + // 处理中文标签格式 + formatted = formatted.replace(/#(\S+?)(?=#|\s|$)/g, (match, tagContent) => { + if (tagContent.includes('<') && !tagContent.includes('>')) { + return match + } + return `#${tagContent}` + }) + // 替换加粗文本 formatted = formatted.replace(/\*\*([^*]+)\*\*/g, '$1') @@ -430,3 +452,69 @@ export async function generateImage(options: { loading_callback?.(false) } } + +/** + * 编辑图片 + * @param prompt 提示词 + * @param imageBase64 图片base64数据 + * @param signal 可选的AbortSignal，用于取消请求 + * @returns Promise 返回生成的图片URL + */ +export async function handleImageWithKontextPro( + prompt: string, + imageBase64: string, + options: Record = {} +) { + try { + if (!imageBase64 || typeof imageBase64 !== 'string') { + throw new Error('图片数据无效') + } + let imageData = imageBase64 + if (!imageBase64.startsWith('data:')) { + imageData = `data:image/webp;base64,${imageBase64}` + } + const requestBody = { + model: 'flux-kontext-dev', + prompt: prompt || '', + image: imageData, + stream: false + } + + const response = await fetch('/bizyair/model/image-edit', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: Cookies.get('bizy_token') || '', + ...(options as any)?.headers + }, + body: JSON.stringify(requestBody) + }) + const responseData = await response.json() + + if (responseData.code === 20000 && responseData.data) { + const data = responseData.data + + if (data.result && typeof data.result === 'string') { + try { + const resultJson = JSON.parse(data.result) + if (resultJson.outputs) { + const outputs = resultJson.outputs + const outputKeys = Object.keys(outputs) + const firstKey = outputKeys[0] + const outputArray = outputs[firstKey] + const imageUrl = outputArray.outputs[0] + return imageUrl + } + } catch (error) { + console.error('解析result字段失败:', error) + } + } + } else { + console.error('API响应格式不符合预期:', responseData) + throw new Error(`API响应错误: ${responseData.message || '未知错误'}`) + } + } catch (error: any) { + console.error('图片编辑处理失败:', error) + throw error + } +} diff --git a/src/locales/en.json b/src/locales/en.json index 827a74d2..0a6b780f 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -40,13 +40,13 @@ "close": "Close", "nodeName": "Node Name", "nodeType": "Node Type", - "inputPlaceholder": "Type your message...", + "inputPlaceholder": "Enter a question or upload a picture...", "uploadImage": "Upload Image", "generateImage": "Generate Image", "removeImage": "Remove Image", "sendMessage": "Send Message", "abortGeneration": "Abort Generation", - "welcomeMessage": "Hello! I'm BizyBot. Click on images in nodes to upload them directly.", + "welcomeMessage": "Hello! I'm BizyBot. I can answer questions or edit pictures. I support local upload and click node upload (please use English prompt words to edit pictures).", "errorMessage": "Sorry, an error occurred. Please try again later.", "imageUploadError": "Please upload an image file" } diff --git a/src/locales/zh.json b/src/locales/zh.json index 64b0d407..cf2b1b95 100644 --- a/src/locales/zh.json +++ b/src/locales/zh.json @@ -40,13 +40,13 @@ "close": "关闭", "nodeName": "节点名称", "nodeType": "节点类型", - "inputPlaceholder": "输入问题...", + "inputPlaceholder": "输入问题或上传图片...", "uploadImage": "上传图片", "generateImage": "生成图片", "removeImage": "移除图片", "sendMessage": "发送消息", "abortGeneration": "中止生成", - "welcomeMessage": "你好！我是BizyBot，点击节点中的图片可以直接上传", + "welcomeMessage": "你好！我是BizyBot，我可以回答问题或编辑图片，支持本地上传和点击节点上传（编辑图片请使用英文提示词）", "errorMessage": "抱歉，发生了错误。请刷新页面重试。", "imageUploadError": "请上传图片文件" } diff --git a/src/views/btnAssistant/index.vue b/src/views/btnAssistant/index.vue index 1fb9f86b..604c5dd0 100644 --- a/src/views/btnAssistant/index.vue +++ b/src/views/btnAssistant/index.vue @@ -1,70 +1,34 @@ diff --git a/version.txt b/version.txt index f69752ab..b66183a6 100644 --- a/version.txt +++ b/version.txt @@ -1 +1 @@ -1.2.16 +1.2.17