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

添加自动排版功能（未完成）

Browse Source
master
joefalmko 3 months ago
parent 81bd2da001
commit 4e20d93f98
9 changed files with 203 additions and 93 deletions
Show Stats Download Patch File Download Diff File

2
GinSkeleton/app/global/consts/consts.go
Unescape View File

@ -87,4 +87,6 @@ const (
DocRefineFailCode int = -400452
StyleGenerateFailMsg string = "样式生成失败"
StyleGenerateFailCode int = -400453
LayoutGenerateFailMsg string = "排版生成失败"
LayoutGenerateFailCode int = -400454
)

14
GinSkeleton/app/http/controller/web/ai_layout_controller.go
Unescape View File

@ -9,6 +9,8 @@ import (
type StyleGenerate struct {
}
type LayoutGenerate struct {
}
// ai生成样式
func (s *StyleGenerate) StyleGenerate(c *gin.Context) {
@ -29,3 +31,15 @@ func (s *StyleGenerate) StyleGenerate(c *gin.Context) {
}
}
// ai排版
func (l *LayoutGenerate) LayoutGenerate(c *gin.Context) {
// 流式传输
// 设置 HTTP 头部为 SSE
c.Writer.Header().Set("Content-Type", "text/event-stream")
c.Writer.Header().Set("Cache-Control", "no-cache")
c.Writer.Header().Set("Connection", "keep-alive")
if err := ai_model_cli.RequestLayout(c); err != nil {
response.Fail(c, consts.LayoutGenerateFailCode, consts.LayoutGenerateFailMsg, err)
}
}

21
GinSkeleton/app/http/validator/web/ai_layout/layout_generate.go
Unescape View File

@ -1,12 +1,23 @@
package ai_layout
import(
"github.com/gin-gonic/gin"
// "goskeleton/app/utils/response"
// "goskeleton/app/http/controller/web"
// "goskeleton/app/http/validator/core/data_transfer"
// "goskeleton/app/global/consts"
"goskeleton/app/utils/response"
"goskeleton/app/http/controller/web"
"goskeleton/app/http/validator/core/data_transfer"
"goskeleton/app/global/consts"
)
type LayoutGenerate struct {
DocContent string `form:"doc_content" json:"doc_content" binging:"required"`
}
func (s LayoutGenerate) CheckParams(context *gin.Context) {
func (l LayoutGenerate) CheckParams(context *gin.Context) {
if err:=context.ShouldBind(&l);err!=nil{
response.ValidatorError(context,err)
return
}
extraAddBindDataContext := data_transfer.DataAddContext(l, consts.ValidatorPrefix, context)
if extraAddBindDataContext == nil {
response.ErrorSystem(context, "LayoutGenerate表单参数验证器json化失败", "")
return
}
(&web.LayoutGenerate{}).LayoutGenerate(extraAddBindDataContext)
}

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

@ -5,6 +5,7 @@ import (
"fmt"
"goskeleton/app/global/variable"
"os"
"strings"
"goskeleton/app/global/consts"
@ -86,13 +87,6 @@ func RequestStyle(c *gin.Context) (interface{}, error) {
func RequestStyleStream(c *gin.Context) error {
userMsg := c.GetString(consts.ValidatorPrefix + "user_input")
qianfan.GetConfig().AccessKey = variable.ConfigYml.GetString("BaiduCE.QianFanAccessKey")
qianfan.GetConfig().SecretKey = variable.ConfigYml.GetString("BaiduCE.QianFanSecretKey")
chat := qianfan.NewChatCompletion(
qianfan.WithModel("ERNIE-4.0-8K"),
)
chatHistory := []qianfan.ChatCompletionMessage{}
systemMsgPath := variable.ConfigYml.GetString("BaiduCE.StyleGeneratePromptPath")
@ -136,6 +130,33 @@ func RequestStyleStream(c *gin.Context) error {
}
chatHistory = append(chatHistory, qianfan.ChatCompletionUserMessage(userMsg))
return ChatByStream(c, string(prompt), chatHistory)
}
func RequestLayout(c *gin.Context) error {
doc_content := c.GetString(consts.ValidatorPrefix + "doc_content")
chatHistory := []qianfan.ChatCompletionMessage{}
systemMsgPath := variable.ConfigYml.GetString("BaiduCE.LayoutGeneratePromptPath")
prompt, err := os.ReadFile(variable.BasePath + systemMsgPath)
if err != nil || len(prompt) == 0 {
variable.ZapLog.Error(fmt.Sprintf("读取提示词文件失败: %v", err))
return err
}
chatHistory = append(chatHistory, qianfan.ChatCompletionUserMessage("待排版内容\n"+doc_content))
return ChatByStream(c, string(prompt), chatHistory)
}
func ChatByStream(c *gin.Context, prompt string, chatHistory []qianfan.ChatCompletionMessage) error{
qianfan.GetConfig().AccessKey = variable.ConfigYml.GetString("BaiduCE.QianFanAccessKey")
qianfan.GetConfig().SecretKey = variable.ConfigYml.GetString("BaiduCE.QianFanSecretKey")
chat := qianfan.NewChatCompletion(
qianfan.WithModel("ERNIE-4.0-8K"),
)
stream, err := chat.Stream(context.TODO(), &qianfan.ChatCompletionRequest{System: string(prompt), Messages: chatHistory})
if err != nil {
@ -146,6 +167,7 @@ func RequestStyleStream(c *gin.Context) error {
c.Writer.Flush()
defer c.Writer.Flush()
outputMsg:=strings.Builder{}
for {
response, err := stream.Recv()
if response.IsEnd {
@ -156,6 +178,7 @@ func RequestStyleStream(c *gin.Context) error {
return err
}
// 将结果写入到响应体
outputMsg.WriteString(response.Result)
if _, err := fmt.Fprintf(c.Writer, "%s", response.Result); err != nil {
variable.ZapLog.Error(fmt.Sprintf("写入流失败: %v", err))
return err

1
GinSkeleton/config/config.yml
Unescape View File

@ -154,3 +154,4 @@ BaiduCE:
# QianFanSecretKey: "1edf17c358574e75b9913ebff7d95b61" # 访问千帆sdk 时用的 SecretKey
QianFanSecretKey: "cb812e1b6e56420ea858d160e1351869"
StyleGeneratePromptPath: "/storage/app/prompt/style_generate.prompt" # 生成样式的提示词保存路径
LayoutGeneratePromptPath: "/storage/app/prompt/layout_generate.prompt" # 生成布局的提示词保存路径

4
GinSkeleton/storage/app/prompt/layout_generate.prompt
Unescape View File

@ -0,0 +1,4 @@
请将以下文章进行重新排版，使其格式更加美观且井然有序，同时保留文章的所有原始内容和文字，不要对内容进行任何修改。
请你调整标题样式，将所有标题改为清晰的分级结构。文章标题使用#，一级标题使用##，以此类推。
正文部分的段落需适当分段，避免过长或过短。 请确保整体排版整洁、易于阅读。
不要对文章的原始内容进行修改。只返回重新排版后的内容，不要返回其他的额外内容。

61
coeditor_frontend/src/components/plugins.js
Unescape View File

@ -83,7 +83,8 @@ import {
getPageContent,
getUserConfigFromBackend,
saveData,
// markdown2html
// markdown2html,
html2markdown
} from './utils';
// 导出为docx插件
@ -340,7 +341,58 @@ class SaveButton extends Plugin {
});
}
}
// AI 自动排版
function aiformat(){
console.log("ai formatting")
const editor = window.editor;
const doc_content = editor.getData()
console.log(doc_content);
// TODO 处理html文件
// step 1 - split images and insert text tag
const markdown_content = html2markdown(doc_content)
console.log(markdown_content)
// TODO 请求大模型
// step 2 - convert markdown response to html text and setData
// step 3 - recover original images
// step 4 - fetch users config
// step 5 - apply title styles of user
// step 6 - apply others styles of user
}
class AiFormat extends Plugin {
init() {
const editor = this.editor;
editor.ui.componentFactory.add('AiFormat', () => {
// The button will be an instance of ButtonView.
const button = new ButtonView();
button.set({
label: '自动排版',
// withText: true
tooltip: true,
// 图标 直接插入svg文件
icon: '<svg t="1733151966769" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3854" width="200" height="200"><path d="M85.312 938.688V85.312h59.776v853.376h-59.712z m174.976-118.4a64 64 0 0 1-64-64v-128a64 64 0 0 1 64-64h614.4a64 64 0 0 1 64 64v128a64 64 0 0 1-64 64h-614.4z m0-357.376a64 64 0 0 1-64-64v-128a64 64 0 0 1 64-64h384a64 64 0 0 1 64 64v128a64 64 0 0 1-64 64h-384z" p-id="3855" fill="#2c2c2c"></path></svg>',
keystroke: 'Shift+F'
});
// Execute a callback function when the button is clicked
button.on('execute', () => {
aiformat();
});
return button;
});
// 添加快捷键 Shift+F 保存
editor.keystrokes.set('Shift+F', (event, cancel) => {
aiformat();
cancel();
});
}
}
// 配置CKEditor5
function setConfig() {
// 获取用户的样式配置
@ -375,7 +427,7 @@ function setConfig() {
'numberedList',
'outdent',
'indent',
'|', 'ExportToWord', 'ExportToPDF', 'translate', 'SideBar', 'SaveButton'
'|', 'ExportToWord', 'ExportToPDF', 'translate', 'SideBar', 'SaveButton','AiFormat'
],
shouldNotGroupWhenFull: true
},
@ -449,9 +501,9 @@ function setConfig() {
TodoList,
Underline,
Undo,
Export2Word, Translation, Export2PDF, ToggleSideBar, SaveButton
Export2Word, Translation, Export2PDF, ToggleSideBar, SaveButton, AiFormat
],
balloonToolbar: ['bold', 'italic', '|', 'link', 'insertImage', '|', 'bulletedList', 'numberedList'],
balloonToolbar: ['bold', 'italic', '|', 'link', 'insertImage', '|', 'bulletedList', 'numberedList','|','AiFormat'],
//自定义设置字体
fontFamily: {
// 自定义字体
@ -579,7 +631,6 @@ function setConfig() {
autosave: {
waitingTime: 180000, // (in ms) 3minutes
save() {
// TODO save
return saveData(getPageContent());
}
},

16
coeditor_frontend/src/components/utils.js
Unescape View File

@ -1,11 +1,11 @@
// utils.js
import { MarkdownToHtml } from '@ckeditor/ckeditor5-markdown-gfm/src/markdown2html/markdown2html.js';
import { HtmlToMarkdown } from '@ckeditor/ckeditor5-markdown-gfm/src/html2markdown/html2markdown.js';
// 获取用户配置
export function getUserConfigFromBackend() {
// TODO 请求用户配置
const options = {};
// 字体、字号、样式
// TODO
const {
fontFamilyOptions = [
'default',
@ -92,7 +92,7 @@ export function getUserConfigFromBackend() {
};
}
// 实现自动保存saveData方法，将编辑内容发送至后端
// TODO 实现自动保存saveData方法，将编辑内容发送至后端
export function saveData(data) {
// return new Promise( resolve => {
// setTimeout( () => {
@ -128,7 +128,7 @@ export function getPageContent() {
// return pageContent.outerHTML;
}
// 获取并应用用户定义的样式
// TODO 获取并应用用户定义的样式css
export function getAndApplyUserStyles() {
// 模拟从后端获取用户定义的样式
const response = fetch('/api/user-styles');
@ -140,10 +140,18 @@ export function getAndApplyUserStyles() {
}
// markdown转html 便于将大语言模型的输出（一般为markdown格式）转换为ckeditor的html格式
// 利用ckeditor markdown插件，但不能在CkeditorView.vue中使用
// 利用ckeditor markdown插件的功能子类，但不能在CkeditorView.vue中直接使用markdown插件
// 否则会改变编辑器数据处理器为markdown，即getData()需要传入markdown string，setData()返回markdown string
export function markdown2html(markdownString){
const markdownToHtml = new MarkdownToHtml();
const htmlString = markdownToHtml.parse(markdownString);
return htmlString;
}
// html转markdown 便于将文件内容发送给大语言模型来进行排版
// 再利用 @markdown2html 将大语言模型的返回内容重新转换为文件内容并展示 或做进一步处理
export function html2markdown(htmlString){
const htmltomarkdown = new HtmlToMarkdown();
const markdownString = htmltomarkdown.parse(htmlString);
return markdownString
}

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

@ -341,10 +341,8 @@ export default {
this.$refs.editorMenuBarElement.appendChild(editor.ui.view.menuBarView.element);
// 这里向后端获取要打开文件地内容
const pageContent = this.store.state.user.filecontent;
// const pageContent = '<h2>Congratulations on setting up CKEditor 5! 🎉</h2>\n<p>\n You\'ve successfully created a CKEditor 5 project. This powerful text editor will enhance your application, enabling rich text editing\n capabilities that are customizable and easy to use.\n</p>\n<h3>What\'s next?</h3>\n<ol>\n <li>\n <strong>Integrate into your app</strong>: time to bring the editing into your application. Take the code you created and add to your\n application.\n </li>\n <li>\n <strong>Explore features:</strong> Experiment with different plugins and toolbar options to discover what works best for your needs.\n </li>\n <li>\n <strong>Customize your editor:</strong> Tailor the editor\'s configuration to match your application\'s style and requirements. Or even\n write your plugin!\n </li>\n</ol>\n<p>\n Keep experimenting, and don\'t hesitate to push the boundaries of what you can achieve with CKEditor 5. Your feedback is invaluable to us\n as we strive to improve and evolve. Happy editing!\n</p>\n<h3>Helpful resources</h3>\n<ul>\n <li>📝 <a href="https://orders.ckeditor.com/trial/premium-features">Trial sign up</a>,</li>\n <li>📕 <a href="https://ckeditor.com/docs/ckeditor5/latest/installation/index.html">Documentation</a>,</li>\n <li>⭐️ <a href="https://github.com/ckeditor/ckeditor5">GitHub</a> (star us if you can!),</li>\n <li>🏠 <a href="https://ckeditor.com">CKEditor Homepage</a>,</li>\n <li>🧑‍💻 <a href="https://ckeditor.com/ckeditor-5/demo/">CKEditor 5 Demos</a>,</li>\n</ul>\n<h3>Need help?</h3>\n<p>\n See this text, but the editor is not starting up? Check the browser\'s console for clues and guidance. It may be related to an incorrect\n license key if you use premium features or another feature-related requirement. If you cannot make it work, file a GitHub issue, and we\n will help as soon as possible!\n</p>\n';
// 打开已有文本就将pageContent替换
// TODO
editor.setData(pageContent);
// 将editor保存到window中，便于别的地方使用|官方推荐做法
window.editor = editor;
},
// sidebar
@ -404,7 +402,6 @@ export default {
messagesDiv.appendChild(messageDiv);
if (sender === 'ai') {
// TODO 从返回文本中提取出css部分
preElement.textContent = `文心一言：\n` + preElement.textContent;
messageDiv.style.backgroundColor = '#bdc3c7';
}
@ -421,6 +418,7 @@ export default {
// 构造聊天历史
let chatHistory = [];
const messages = document.getElementById('messages').children;
// TODO 如果最后一个消息是error 清空messages
for (let i = 0; i < messages.length; i++) {
if (i % 4 == 0) {
chatHistory.push({ Role: 'user', Content: messages[i].textContent });
@ -428,6 +426,8 @@ export default {
const assistantResponse = messages[i].textContent.replaceAll('文心一言：\n', '');
chatHistory.push({ Role: 'assistant', Content: assistantResponse });
}
// i %4 == 2 preview
// i %4 == 3 button
}
console.log(chatHistory);
@ -435,9 +435,6 @@ export default {
this.displayMessage(messageText, 'user');
// 向后端调用API并接受response
// 根据messages的内容构造聊天历史列表
// TODO
// const chat_history = []
try {
const response = await fetch('http://localhost:14514/admin/ai_layout/style_generate', {
method: 'POST',
@ -451,7 +448,6 @@ export default {
});
if (!response.body) {
// TODO
throw new Error('No response body');
}

Write Preview
Loading…
Cancel
Save