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

前端增加图片识别功能，阉掉语音识别功能

Browse Source
master
linlnf 2 months ago
parent 411a8d42b2
commit 8f29601051
2 changed files with 126 additions and 10 deletions
Show Stats Download Patch File Download Diff File

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

@ -251,7 +251,7 @@ class RefineDoc extends Plugin {
init() {
// console.log('Translation initialized!');
this.editor.ui.componentFactory.add('translate', (locale) => {
this.editor.ui.componentFactory.add('RefineDoc', (locale) => {
const dropdownView = createDropdown(locale);
dropdownView.buttonView.set({
label: '智能助手',
@ -435,6 +435,91 @@ class AiFormat extends Plugin {
});
}
}
// 智能识别发送消息
function sendRecMsg(type) {
const selection = window.getSelection();
const formData = new FormData();
var src = '';
if (type === 'pic_recognition') {
const range = selection.getRangeAt(0);
const imageElements = range.commonAncestorContainer.parentNode.querySelectorAll('img');
if (imageElements.length > 0) {
const selectedImage = imageElements[0];
src = selectedImage.getAttribute('src');
const prefix = "data:image/png;base64,";
if (src.startsWith(prefix)) {
src = src.substring(prefix.length);
}
}
if (src.trim() === '') return;
formData.append('pic', src);
}
else if (type === 'voc_recognition') {
return;
}
else{
return;
}
const requestOptions= {
method: 'POST',
body: formData
};
const store = window.store;
const res = {oldContent:'', newContent:'...'};
store.commit('setCurrentTag', type);
store.commit('addContentToTag', {tag:type, newContent:res});
const index = store.getters.getCurrentindex;
emitter.emit('show-ai-recg-sidebar', type);
fetch('/web_api/admin/ai_recognition/' + type, requestOptions)
.then(response => {
if (!response.ok) {
throw new Error("请求出错");
}
// 根据返回的数据格式进行相应处理，这里假设返回的数据是JSON格式，所以使用response.json()解析
return response.json();
})
.then(data => {
// console.log("useStore", store);
const newRes = {oldContent:'', newContent:data.data.words};
store.commit('changeContentForTag', {tag:type, index:index, newContent:newRes});
emitter.emit('show-ai-recg-sidebar', type);
})
.catch(error => {
console.error("POST请求出错：", error);
});
}
class PicRecog extends Plugin {
init() {
// console.log('Translation initialized!');
this.editor.ui.componentFactory.add('PicRecog', () => {
const button = new ButtonView();
button.set({
label: '图片识别',
withText: true
});
// Execute a callback function when the button is clicked
button.on('execute', () => {
sendRecMsg('pic_recognition');
});
return button;
});
}
}
// 配置CKEditor5
function setConfig() {
// 获取用户的样式配置
@ -469,7 +554,7 @@ function setConfig() {
'numberedList',
'outdent',
'indent',
'|', 'ExportToWord', 'ExportToPDF', 'translate', 'SideBar', 'SaveButton','AiFormat'
'|', 'ExportToWord', 'ExportToPDF', 'RefineDoc', 'SideBar', 'SaveButton','AiFormat'
],
shouldNotGroupWhenFull: true
},
@ -543,7 +628,7 @@ function setConfig() {
TodoList,
Underline,
Undo,
Export2Word, RefineDoc, Export2PDF, ToggleSideBar, SaveButton, AiFormat
Export2Word, RefineDoc, Export2PDF, ToggleSideBar, SaveButton, AiFormat, PicRecog
],
balloonToolbar: ['bold', 'italic', '|', 'link', 'insertImage', '|', 'bulletedList', 'numberedList','|','AiFormat'],
//自定义设置字体
@ -622,7 +707,9 @@ function setConfig() {
'imageStyle:wrapText',
'imageStyle:breakText',
'|',
'resizeImage'
'resizeImage',
'|',
'PicRecog'
]
},
initialData:
@ -681,4 +768,4 @@ function setConfig() {
}
const emitter = new mitt();
export default emitter;
export {Export2Word, Export2PDF, RefineDoc, ToggleSideBar, setConfig};
export {Export2Word, Export2PDF, RefineDoc, ToggleSideBar, PicRecog, setConfig};

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

@ -28,9 +28,9 @@
<el-menu-item index="1-5" @click="showRefineDOCContent('translation')">翻译</el-menu-item>
</el-sub-menu>
<el-sub-menu index="2" class="horizontal-sub-menu">
<template #title>图文转换</template>
<el-menu-item index="2-1" @click="showContent('ocr')">OCR</el-menu-item>
<el-menu-item index="2-2" @click="showContent('mindmap')">脑图生成</el-menu-item>
<template #title>智能识别</template>
<el-menu-item index="2-1" @click="showAiRecgContent('pic_recognition')">图片识别</el-menu-item>
<!-- <el-menu-item index="2-2" @click="showAiRecgContent('voc_recognition')">语音识别</el-menu-item>-->
</el-sub-menu>
<el-sub-menu index="3" class="horizontal-sub-menu">
<template #title>样式生成</template>
@ -54,8 +54,16 @@
</div>
</div>
</div>
<div v-if="currentContent === 'ocr'">OCR内容</div>
<div v-if="currentContent === 'mindmap'">脑图生成内容</div>
<div v-if="currentContent === 'ai_recg'">
<div class="ai_recgs" id="ai_recgs">
<el-button style="margin-left: 10px; width: 40px; height: 40px;" @click="clearAiRecgContent()"><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></el-button>
<div v-for="(item, index) in currentAiRecgContent" :key="index" class="messages">
<div class="message-answer">
<pre>{{ item.newContent }}</pre>
</div>
</div>
</div>
</div>
<div v-if="currentContent === 'manual'">
<!-- 手动输入表单 -->
<el-form @submit.prevent="submitForm">
@ -320,6 +328,7 @@ export default {
isNavbarOpen: false,// 侧边栏是否打开
currentContent: '', // 当前侧边栏显示的表单
currentRefineDocContent: [], //当前侧边栏显示的文档优化的内容
currentAiRecgContent: [], //当前侧边栏显示的智能识别的内容
formData: {
fontFamily: '',
color: '',
@ -368,12 +377,25 @@ export default {
this.currentRefineDocContent = this.store.getters.getCurrentContent.reduce((acc, current) => [current,...acc], []);
}
},
showAiRecgContent(tag){
this.currentContent = 'ai_recg';
this.store.commit('setCurrentTag', tag);
if (this.store.getters.getCurrentContent){
this.currentAiRecgContent = this.store.getters.getCurrentContent.reduce((acc, current) => [current,...acc], []);
}
},
clearRefineDOCContent(){
this.store.commit('clearContentsForTag', this.store.getters.getCurrentTag);
if (this.store.getters.getCurrentContent){
this.currentRefineDocContent = this.store.getters.getCurrentContent.reduce((acc, current)=> [current,...acc], []);
}
},
clearAiRecgContent(){
this.store.commit('clearContentsForTag', this.store.getters.getCurrentTag);
if (this.store.getters.getCurrentContent){
this.currentAiRecgContent = this.store.getters.getCurrentContent.reduce((acc, current)=> [current,...acc], []);
}
},
// 保存用户定义样式
submitForm() {
const selectedStyles = {};
@ -640,6 +662,12 @@ export default {
this.showRefineDOCContent(id);
console.log(this.currentContent)
});
emitter.on('show-ai-recg-sidebar', (id) => {
this.isSidebarOpen = true;
this.isNavbarOpen = true;
this.showAiRecgContent(id);
console.log(this.currentContent)
});
},
components: {
// 导入组件
@ -652,6 +680,7 @@ export default {
},
beforeUnmount() {
emitter.off('show-refine-doc-sidebar');
emitter.off('show-ai-recg-sidebar');
}
};
</script>

Write Preview
Loading…
Cancel
Save