ai生成样式加入聊天历史，优化提示词

GinSkeleton/app/service/ai_model_cli/layout_cli.go

@@ -38,14 +38,36 @@ func RequestStyle(c *gin.Context) (interface{}, error) {
 	// add user history to chat history
 	userHistory, exist := c.Get(consts.ValidatorPrefix + "chat_history")
 	if exist && userHistory != nil {
-		// TODO: check if userHistory is of type []struct{Role string;Content string}
+		// check if userHistory is of type []struct{Role string;Content string}
-		userHistory := userHistory.([]struct{Role string;Content string})
+		historySlice, ok := userHistory.([]interface{})
-		if len(userHistory)%2!=0{
+		if !ok || len(historySlice)%2 != 0 {
 			variable.ZapLog.Error(fmt.Sprintf("用户历史对话格式错误: %v", userHistory))
 			return nil, fmt.Errorf("用户历史对话格式错误")
 		}
-		for _,msg := range userHistory{
+
-			chatHistory = append(chatHistory, qianfan.ChatCompletionMessage{Role:msg.Role,Content:msg.Content})
+		// convert userHistory to []qianfan.ChatCompletionMessage
+		var chatHistoryConverted []qianfan.ChatCompletionMessage
+		for _, item := range historySlice {
+			if itemMap, ok := item.(map[string]interface{}); ok {
+				role, roleOk := itemMap["role"].(string)
+				content, contentOk := itemMap["content"].(string)
+				if roleOk && contentOk {
+					chatHistoryConverted = append(chatHistoryConverted, qianfan.ChatCompletionMessage{
+						Role:    role,
+						Content: content,
+					})
+				} else {
+					variable.ZapLog.Error(fmt.Sprintf("用户历史对话格式错误: %v\nrole 或 content 类型断言失败", userHistory))
+					return nil, fmt.Errorf("用户历史对话格式错误")
+				}
+			} else {
+				variable.ZapLog.Error(fmt.Sprintf("用户历史对话格式错误: %v\n无法将 item 转换为 map[string]interface{}", userHistory))
+				return nil, fmt.Errorf("用户历史对话格式错误")
+			}
+		}
+
+		if len(chatHistoryConverted) > 0 && len(chatHistoryConverted)%2 == 0 {
+			chatHistory = append(chatHistory, chatHistoryConverted...)
 		}
 	}
 

GinSkeleton/storage/app/prompt/style_generate.prompt

@@ -1,7 +1,7 @@
 ### 角色
-你是一个设计和 CSS 专家，能够根据用户需求生成精确的 CSS 样式。 如果用户提出与生成CSS样式无关的问题，请回答“对不起，我无法回答该问题”
+你是一个设计和 CSS 专家，能够根据用户需求生成精确的 CSS 样式。只能使用css来生成对应的样式，不能修改页面的html代码和使用js代码。 如果用户提出与生成CSS样式无关的问题，请回答“对不起，我无法回答该问题”
-### 任务
+### 知识
-为以下元素生成 CSS 样式类：
+不同的样式对应的element如下：
 标题：<hi>（i为标题级别，如 h1, h2 等）
 文本块：<p>
 块引用：<blockquote>
@@ -14,8 +14,11 @@
 [element为不同样式类对应的元素名，如文本框对应的element为p]
 ### 输出
 仅输出你编写的 CSS 内容，不要对其进行解释和输出其他内容。!important
+只需要精确输出用户需要生成的样式，不要生成用户未指定的样式。
 ### 示例
-生成一个文本块样式，生成的样式如下所示。 
+#### 示例一
+用户输入：生成一个文本块样式
+输出：
 ``` css
 .ck-content p.info-box { 
     --background-size: 30px; 
@@ -28,7 +31,10 @@
     box-shadow: 5px 5px 0 #ffe6ef; 
 }
 ```
-生成一个代码框样式，生成的样式如下所示：
+
+#### 示例二
+用户输入：生成一个代码框样式
+输出：
 ```css
 .ck-content pre.fancy-code {
         border: 0;
@@ -52,7 +58,10 @@
         box-shadow: 5px 5px 0 #0000001f;
 }
 ```
-生成一个块引用样式，生成的样式如下所示
+
+#### 示例三
+用户输入：生成一个块引用样式
+输出：
 ```css
 .ck-content blockquote.side-quote {
         font-family: 'Oswald';

ckeditor5/src/main.js

@@ -2,11 +2,7 @@ import { createApp } from 'vue';
 import '../public/style.css';
 import App from './App.vue';
 import { CkeditorPlugin } from '@ckeditor/ckeditor5-vue';
-import mitt from 'mitt';
 
 const app = createApp(App);
-const emitter = mitt();
-
-app.config.globalProperties.emitter = emitter;
 app.use(CkeditorPlugin);
 app.mount('#app');

coeditor_frontend/src/public/sidebar.css

@@ -3,7 +3,7 @@
 	position: fixed;
 	top: 0;
 	left: 0;
-	width: 350px;
+	width: 450px;
 	height: 100%;
 	overflow-y: hidden;
 	transition: transform 0.3s ease;

coeditor_frontend/src/views/CkeditorView.vue

@@ -327,7 +327,6 @@ export default {
 				wordSpacing: ''
 			},
 			previewStyle: {},
-			messages: [], // 聊天记录
 		};
 	},
 	mounted() {
@@ -395,10 +394,6 @@ export default {
 		displayMessage(text, sender) {
 			const messagesDiv = document.getElementById('messages');
 
-			// 移除 messages 中的按钮
-			const previousButtonsMessage = messagesDiv.querySelectorAll('.preview-buttons');
-			previousButtonsMessage.forEach(buttons => buttons.remove());
-
 			const messageDiv = document.createElement('div');
 			messageDiv.className = 'message';
 			// 使用 pre 元素来格式化显示 text
@@ -412,28 +407,84 @@ export default {
 				// TODO 从返回文本中提取出css部分
 				preElement.textContent = `文心一言：\n` + preElement.textContent;
 				messageDiv.style.backgroundColor = '#bdc3c7';
+				// 预览生成的样式
+				this.previewStyleAtMessages(text);
+			}
+			// messagesDiv.scrollTop = messagesDiv.scrollHeight;
+		},
+		// 发送消息
+		sendMessage() {
+			const userInput = document.getElementById('userInput');
+			const messageText = userInput.value;
+			if (messageText.trim() === '') return;
+
+			// 构造聊天历史
+			let chatHistory = [];
+			const messages = document.getElementById('messages').children;
+			for (let i = 0; i < messages.length; i++) {
+				if (i%4==0){
+					chatHistory.push({ Role: 'user', Content: messages[i].textContent });
+				}else if (i%4==1){
+					const assistantResponse = messages[i].textContent.replaceAll('文心一言：\n', '');
+					chatHistory.push({ Role: 'assistant', Content: assistantResponse });
+				}
+			}
+			console.log(chatHistory);
+
+			// Display user's message
+			this.displayMessage(messageText, 'user');
+
+			// 向后端调用API并接受response
+			// 根据messages的内容构造聊天历史列表
+			// TODO
+			// const chat_history = []
 
+			axios({
+				url: 'http://localhost:14514/admin/ai_layout/style_generate',
+				method: 'POST',
+				data: {
+					user_input: userInput.value,
+					...(chatHistory.length > 0 && { chat_history: chatHistory }),
+				}
+			})
+				.then(response => {
+					console.log(response);
+					this.displayMessage(response.data.data, 'ai')
+				})
+				.catch(error => {
+					console.error('Error:', error);
+				});
+			userInput.value = '';
+		},
+		// 预览生成的样式
+		previewStyleAtMessages(style) {
+			const messagesDiv = document.getElementById('messages');
 			// preview区域
 			const previewWrapper = document.createElement('div');
 			previewWrapper.style.border = '1px solid #ccc';
 			previewWrapper.style.display = 'flow-root';
+			messagesDiv.appendChild(previewWrapper);
+
 			// 添加一个标识 'preview' 的元素
 			const previewLabel = document.createElement('div');
 			previewLabel.textContent = 'preview';
 			previewWrapper.appendChild(previewLabel);
+
 			// 应用生成的样式到预览内容
 			const previewStyle = document.createElement('style');
 			// 对返回文本进行处理
 			// 提取其中css代码，以css开头,但不需要’css‘,最后一个}结尾
-				const cssRegex = /css([\s\S]*)\}/;
+			const cssRegex = /```css\n([\s\S]*?)```/;
-				const cssMatch = cssRegex.exec(text);
+			const cssMatch = cssRegex.exec(style);
+			let cssText; // 提取的出的原始css代码，用于保存到后端或进一步处理
+			// 如果有多个css代码，只提取第一个
 			if (cssMatch) {
-					previewStyle.textContent = cssMatch[0].replace('css', '');
+				cssText = cssMatch[0].replace('css', '').replaceAll('```', '');
 			} else {
-					previewStyle.textContent = text;
+				cssText = style;
 			}
-				previewStyle.textContent = previewStyle.textContent.replace(/\.ck-content/g, '');
+			previewStyle.textContent = cssText.replace(/\.ck-content/g, '');
-				document.head.appendChild(previewStyle);
+			previewWrapper.appendChild(previewStyle);
 
 			// 预览的内容
 			let previewElement;
@@ -441,18 +492,25 @@ export default {
 			const styleRegex = /\.ck-content\s+([a-z]+)\.([a-z-]+)\s*\{/g;
 			let match;
 			const classNames = [];
-				while ((match = styleRegex.exec(text)) !== null) {
+			while ((match = styleRegex.exec(cssText)) !== null) {
 				if (!previewElement) {
 					previewElement = document.createElement(match[1]);
-						previewElement.textContent = 'AaBbCcDdEeFf';
+					// previewElement.textContent = 'AaBbCcDdEeFf';
+					const previewText = document.createElement('p');
+					previewText.textContent = 'AaBbCcDd';
+					previewElement.appendChild(previewText);
 					previewWrapper.appendChild(previewElement);
 				}
-					classNames.push(match[2]);
+
+				// className后加一个随机数表明是新的class
+				const newClassName = match[2]+"_"+Math.floor(Math.random()*1000);
+				previewStyle.textContent = previewStyle.textContent.replaceAll(match[2], newClassName);
+				classNames.push(newClassName);
 			}
+
 			if (previewElement) {
 				previewElement.className = classNames.join(' ');
 			}
-				messagesDiv.appendChild(previewWrapper);
 
 			// 创建按钮容器
 			const buttonsMessageDiv = document.createElement('div');
@@ -479,6 +537,7 @@ export default {
 					classes: classNames
 				};
 				console.log(styleDefinition);
+				console.log(cssText);// 保存的css代码
 			};
 			// 创建 clear 按钮
 			const clearButton = document.createElement('el-button');
@@ -492,48 +551,12 @@ export default {
 				while (messagesDiv.firstChild) {
 					messagesDiv.removeChild(messagesDiv.firstChild);
 				}
-					// 清除添加的style
-					document.head.removeChild(previewStyle);
 			};
 			// 显示按钮
 			buttonsMessageDiv.appendChild(saveButton);
 			buttonsMessageDiv.appendChild(clearButton);
 			messagesDiv.appendChild(buttonsMessageDiv);
 		}
-			// messagesDiv.scrollTop = messagesDiv.scrollHeight;
-		},
-		sendMessage() {
-			const userInput = document.getElementById('userInput');
-			const messageText = userInput.value;
-			if (messageText.trim() === '') return;
-
-			// Display user's message
-			this.displayMessage(messageText, 'user');
-
-			// 向后端调用API并接受response
-			// 根据messages的内容构造聊天历史列表
-			// TODO
-			chat_history = []
-
-			axios({
-				url:'http://localhost:14514/admin/ai_layout/style_generate', 
-				method: 'POST',
-				data:{
-					user_input: userInput.value
-				}
-			})
-				.then(response => {
-					// let formatedResponse = response.data.response;
-					// this.displayMessage(formatedResponse, 'ai');
-					console.log(response);
-					this.displayMessage(response.data.data,'ai')
-				})
-				.catch(error => {
-					console.error('Error:', error);
-				});
-
-			userInput.value = '';
-		},
 	},
 	components: {
 		// 导入组件