px7sihb6k
/
coeditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
master
joefalmko 2 weeks ago
parent 8241bb72f7
commit c4f131f291
5 changed files with 175 additions and 125 deletions
Show Stats Download Patch File Download Diff File

48
GinSkeleton/app/service/ai_model_cli/layout_cli.go
Unescape View File

@ -15,7 +15,7 @@ import (
func RequestStyle(c *gin.Context) (interface{}, error) {
// userMsg := c.PostForm("user_input")
userMsg:=c.GetString(consts.ValidatorPrefix+"user_input")
userMsg := c.GetString(consts.ValidatorPrefix + "user_input")
qianfan.GetConfig().AccessKey = variable.ConfigYml.GetString("BaiduCE.QianFanAccessKey")
qianfan.GetConfig().SecretKey = variable.ConfigYml.GetString("BaiduCE.QianFanSecretKey")
@ -29,35 +29,57 @@ func RequestStyle(c *gin.Context) (interface{}, error) {
// 读取prompt文件
systemMsgPath := variable.ConfigYml.GetString("BaiduCE.StyleGeneratePromptPath")
// 读取文件内容
prompt, err := os.ReadFile(variable.BasePath+systemMsgPath)
prompt, err := os.ReadFile(variable.BasePath + systemMsgPath)
if err != nil || len(prompt) == 0 {
variable.ZapLog.Error(fmt.Sprintf("读取提示词文件失败: %v", err))
return nil, err
}
// 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}
userHistory := userHistory.([]struct{Role string;Content string})
if len(userHistory)%2!=0{
userHistory, exist := c.Get(consts.ValidatorPrefix + "chat_history")
if exist && userHistory != nil {
// check if userHistory is of type []struct{Role string;Content string}
historySlice, ok := userHistory.([]interface{})
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...)
}
}
// add user input to chat history
chatHistory = append(chatHistory, qianfan.ChatCompletionUserMessage(userMsg))
// define a stream chat client
response,err:=chat.Do(context.TODO(),&qianfan.ChatCompletionRequest{System: string(prompt),Messages: chatHistory})
response, err := chat.Do(context.TODO(), &qianfan.ChatCompletionRequest{System: string(prompt), Messages: chatHistory})
if err != nil {
variable.ZapLog.Error(fmt.Sprintf("对话失败: %v", err))
return nil, err
}
return response.Result, nil
}

23
GinSkeleton/storage/app/prompt/style_generate.prompt
Unescape View File

@ -1,7 +1,7 @@
### 角色
你是一个设计和 CSS 专家，能够根据用户需求生成精确的 CSS 样式。 如果用户提出与生成CSS样式无关的问题，请回答“对不起，我无法回答该问题”
### 任务
为以下元素生成 CSS 样式类：
你是一个设计和 CSS 专家，能够根据用户需求生成精确的 CSS 样式。只能使用css来生成对应的样式，不能修改页面的html代码和使用js代码。 如果用户提出与生成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';
@ -88,4 +97,4 @@
text-align: right;
color: #555;
}
```
```

4
ckeditor5/src/main.js
Unescape View File

@ -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');

2
coeditor_frontend/src/public/sidebar.css
Unescape View File

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

223
coeditor_frontend/src/views/CkeditorView.vue
Unescape View File

@ -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,128 +407,156 @@ export default {
// TODO 从返回文本中提取出css部分
preElement.textContent = `文心一言：\n` + preElement.textContent;
messageDiv.style.backgroundColor = '#bdc3c7';
// preview区域
const previewWrapper = document.createElement('div');
previewWrapper.style.border = '1px solid #ccc';
previewWrapper.style.display = 'flow-root';
// 添加一个标识 '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 cssMatch = cssRegex.exec(text);
if (cssMatch) {
previewStyle.textContent = cssMatch[0].replace('css', '');
} else {
previewStyle.textContent = text;
}
previewStyle.textContent = previewStyle.textContent.replace(/\.ck-content/g, '');
document.head.appendChild(previewStyle);
// 预览的内容
let previewElement;
// 提取element tag 和 class name
const styleRegex = /\.ck-content\s+([a-z]+)\.([a-z-]+)\s*\{/g;
let match;
const classNames = [];
while ((match = styleRegex.exec(text)) !== null) {
if (!previewElement) {
previewElement = document.createElement(match[1]);
previewElement.textContent = 'AaBbCcDdEeFf';
previewWrapper.appendChild(previewElement);
}
classNames.push(match[2]);
}
if (previewElement) {
previewElement.className = classNames.join(' ');
}
messagesDiv.appendChild(previewWrapper);
// 创建按钮容器
const buttonsMessageDiv = document.createElement('div');
buttonsMessageDiv.className = 'preview-buttons';
buttonsMessageDiv.style.display = 'flex';
buttonsMessageDiv.style.justifyContent = 'flex-end';
buttonsMessageDiv.style.marginTop = '10px';
// 创建 save 按钮
const saveButton = document.createElement('el-button');
saveButton.innerHTML = '<svg t="1731509644125" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6346" width="20" height="20"><path d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m0-938.666667C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333z m-3.413333 611.541334a34.944 34.944 0 0 1-9.386667 16.682666 38.058667 38.058667 0 0 1-30.72 11.050667 38.954667 38.954667 0 0 1-40.106667-27.946667L308.053333 576.426667a38.4 38.4 0 0 1 54.186667-54.229334l93.013333 93.184 190.293334-337.365333a42.666667 42.666667 0 0 1 58.88-16.426667c20.608 12.714667 27.392 39.466667 15.36 60.458667l-211.2 374.826667z" fill="#000000" p-id="6347"></path></svg>';
saveButton.style.marginLeft = '10px';
saveButton.style.width = '40px';
saveButton.style.height = '40px';
saveButton.onclick = () => {
// save
// TODO 将生成的样式保存到后端
// 确认样式的名称 这是用户选择使用style时看到的
// styleDefinition:[name: 'styleName',element: 'element',classes: [className]]
const styleName = prompt("请输入样式名称：");
// 构造styleDefiniton发送到后端
const styleDefinition = {
name: styleName,
element: previewElement.tagName,
classes: classNames
};
console.log(styleDefinition);
};
// 创建 clear 按钮
const clearButton = document.createElement('el-button');
clearButton.innerHTML = '<svg t="1731509926355" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8154" width="20" height="20"><path d="M1011.43552 981.92384l-68.4032-394.40384h23.10144c18.5856 0 33.54624-14.97088 33.54624-33.55648V306.16576c0-18.5856-14.97088-33.55648-33.54624-33.55648H648.6528V37.71392c0-18.5856-14.97088-33.55648-33.55648-33.55648H408.59648c-18.5856 0-33.55648 14.97088-33.55648 33.55648v234.88512H57.5488c-18.5856 0-33.54624 14.97088-33.54624 33.55648v247.79776c0 18.5856 14.97088 33.55648 33.54624 33.55648h23.10144L12.24704 981.9136c-0.38912 1.9456-0.512 3.87072-0.512 5.6832 0 18.5856 14.97088 33.54624 33.55648 33.54624h933.10976c1.93536 0 3.88096-0.12288 5.6832-0.512 18.31936-3.08224 30.57664-20.51072 27.35104-38.7072zM114.33984 362.94656h351.03744V94.50496h92.928v268.4416h351.03744v134.22592H114.33984V362.94656zM718.336 930.816V729.48736c0-5.6832-4.64896-10.33216-10.32192-10.33216h-61.952c-5.67296 0-10.32192 4.64896-10.32192 10.33216V930.816H387.9424V729.48736c0-5.6832-4.64896-10.33216-10.32192-10.33216h-61.952c-5.67296 0-10.32192 4.64896-10.32192 10.33216V930.816H112.78336l58.20416-335.55456h681.5744L910.76608 930.816H718.336z m0 0" fill="#2C2C2C" p-id="8155"></path></svg>';
clearButton.style.marginLeft = '10px';
clearButton.style.width = '40px';
clearButton.style.height = '40px';
clearButton.onclick = () => {
// clear 清楚当前所有的message和按钮
const messagesDiv = document.getElementById('messages');
while (messagesDiv.firstChild) {
messagesDiv.removeChild(messagesDiv.firstChild);
}
// 清除添加的style
document.head.removeChild(previewStyle);
};
// 显示按钮
buttonsMessageDiv.appendChild(saveButton);
buttonsMessageDiv.appendChild(clearButton);
messagesDiv.appendChild(buttonsMessageDiv);
// 预览生成的样式
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
chat_history = []
// const chat_history = []
axios({
url:'http://localhost:14514/admin/ai_layout/style_generate',
url: 'http://localhost:14514/admin/ai_layout/style_generate',
method: 'POST',
data:{
user_input: userInput.value
data: {
user_input: userInput.value,
...(chatHistory.length > 0 && { chat_history: chatHistory }),
}
})
.then(response => {
// let formatedResponse = response.data.response;
// this.displayMessage(formatedResponse, 'ai');
console.log(response);
this.displayMessage(response.data.data,'ai')
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\n([\s\S]*?)```/;
const cssMatch = cssRegex.exec(style);
let cssText; // 提取的出的原始css代码，用于保存到后端或进一步处理
// 如果有多个css代码，只提取第一个
if (cssMatch) {
cssText = cssMatch[0].replace('css', '').replaceAll('```', '');
} else {
cssText = style;
}
previewStyle.textContent = cssText.replace(/\.ck-content/g, '');
previewWrapper.appendChild(previewStyle);
// 预览的内容
let previewElement;
// 提取element tag 和 class name
const styleRegex = /\.ck-content\s+([a-z]+)\.([a-z-]+)\s*\{/g;
let match;
const classNames = [];
while ((match = styleRegex.exec(cssText)) !== null) {
if (!previewElement) {
previewElement = document.createElement(match[1]);
// previewElement.textContent = 'AaBbCcDdEeFf';
const previewText = document.createElement('p');
previewText.textContent = 'AaBbCcDd';
previewElement.appendChild(previewText);
previewWrapper.appendChild(previewElement);
}
// 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(' ');
}
// 创建按钮容器
const buttonsMessageDiv = document.createElement('div');
buttonsMessageDiv.className = 'preview-buttons';
buttonsMessageDiv.style.display = 'flex';
buttonsMessageDiv.style.justifyContent = 'flex-end';
buttonsMessageDiv.style.marginTop = '10px';
// 创建 save 按钮
const saveButton = document.createElement('el-button');
saveButton.innerHTML = '<svg t="1731509644125" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6346" width="20" height="20"><path d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m0-938.666667C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333z m-3.413333 611.541334a34.944 34.944 0 0 1-9.386667 16.682666 38.058667 38.058667 0 0 1-30.72 11.050667 38.954667 38.954667 0 0 1-40.106667-27.946667L308.053333 576.426667a38.4 38.4 0 0 1 54.186667-54.229334l93.013333 93.184 190.293334-337.365333a42.666667 42.666667 0 0 1 58.88-16.426667c20.608 12.714667 27.392 39.466667 15.36 60.458667l-211.2 374.826667z" fill="#000000" p-id="6347"></path></svg>';
saveButton.style.marginLeft = '10px';
saveButton.style.width = '40px';
saveButton.style.height = '40px';
saveButton.onclick = () => {
// save
// TODO 将生成的样式保存到后端
// 确认样式的名称 这是用户选择使用style时看到的
// styleDefinition:[name: 'styleName',element: 'element',classes: [className]]
const styleName = prompt("请输入样式名称：");
// 构造styleDefiniton发送到后端
const styleDefinition = {
name: styleName,
element: previewElement.tagName,
classes: classNames
};
console.log(styleDefinition);
console.log(cssText);// 保存的css代码
};
// 创建 clear 按钮
const clearButton = document.createElement('el-button');
clearButton.innerHTML = '<svg t="1731509926355" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8154" width="20" height="20"><path d="M1011.43552 981.92384l-68.4032-394.40384h23.10144c18.5856 0 33.54624-14.97088 33.54624-33.55648V306.16576c0-18.5856-14.97088-33.55648-33.54624-33.55648H648.6528V37.71392c0-18.5856-14.97088-33.55648-33.55648-33.55648H408.59648c-18.5856 0-33.55648 14.97088-33.55648 33.55648v234.88512H57.5488c-18.5856 0-33.54624 14.97088-33.54624 33.55648v247.79776c0 18.5856 14.97088 33.55648 33.54624 33.55648h23.10144L12.24704 981.9136c-0.38912 1.9456-0.512 3.87072-0.512 5.6832 0 18.5856 14.97088 33.54624 33.55648 33.54624h933.10976c1.93536 0 3.88096-0.12288 5.6832-0.512 18.31936-3.08224 30.57664-20.51072 27.35104-38.7072zM114.33984 362.94656h351.03744V94.50496h92.928v268.4416h351.03744v134.22592H114.33984V362.94656zM718.336 930.816V729.48736c0-5.6832-4.64896-10.33216-10.32192-10.33216h-61.952c-5.67296 0-10.32192 4.64896-10.32192 10.33216V930.816H387.9424V729.48736c0-5.6832-4.64896-10.33216-10.32192-10.33216h-61.952c-5.67296 0-10.32192 4.64896-10.32192 10.33216V930.816H112.78336l58.20416-335.55456h681.5744L910.76608 930.816H718.336z m0 0" fill="#2C2C2C" p-id="8155"></path></svg>';
clearButton.style.marginLeft = '10px';
clearButton.style.width = '40px';
clearButton.style.height = '40px';
clearButton.onclick = () => {
// clear 清楚当前所有的message和按钮
const messagesDiv = document.getElementById('messages');
while (messagesDiv.firstChild) {
messagesDiv.removeChild(messagesDiv.firstChild);
}
};
// 显示按钮
buttonsMessageDiv.appendChild(saveButton);
buttonsMessageDiv.appendChild(clearButton);
messagesDiv.appendChild(buttonsMessageDiv);
}
},
components: {
// 导入组件

Write Preview
Loading…
Cancel
Save