思维导图
This commit is contained in:
parent
fabffc2363
commit
681b5f7923
|
|
@ -68,6 +68,7 @@
|
|||
"less": "^4.2.0",
|
||||
"less-loader": "^7.3.0",
|
||||
"lodash": "^4.17.21",
|
||||
"markmap-lib": "^0.18.8",
|
||||
"mitt": "^3.0.1",
|
||||
"nanoid": "^5.0.7",
|
||||
"node-addon-api": "^8.1.0",
|
||||
|
|
@ -102,6 +103,7 @@
|
|||
"vue-cropper": "1.0.3",
|
||||
"vue-qr": "^4.0.9",
|
||||
"vue-router": "^4.4.0",
|
||||
"vue3-mindmap": "^0.5.12",
|
||||
"vuedraggable": "^4.1.0",
|
||||
"whiteboard_lyc": "^0.1.3",
|
||||
"xgplayer": "^3.0.19",
|
||||
|
|
|
|||
|
|
@ -42,7 +42,8 @@ const getFileTypeIcon = () => {
|
|||
airobot: 'icon-jiqirenfushi', // 数字人生成
|
||||
aiimg: 'icon-xiangmuicon_maobishufa', // 文生图片
|
||||
aidraw: 'icon-meishu-F', // 文生连环画
|
||||
aiyinyue: 'icon-yinle' //文生音乐
|
||||
aiyinyue: 'icon-yinle', //文生音乐
|
||||
aiswdt: 'icon-siweidaotu' //思维导图
|
||||
}
|
||||
if (iconObj[name]) {
|
||||
return '#' + iconObj[name]
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
</el-main>
|
||||
</el-container>
|
||||
<Uploader v-if="uploaderStore.uploadList && uploaderStore.uploadList.length > 0" />
|
||||
<AiChart/>
|
||||
<!-- <AiChart/>-->
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -10,43 +10,79 @@
|
|||
<el-button class="mr-3" @click="isEdit = false">取消</el-button>
|
||||
<el-button type="success" class="mr-3" @click="isEdit = false">保存</el-button>
|
||||
</template>
|
||||
<el-button v-else type="primary" class="mr-3" @click="isEdit = true">编辑</el-button>
|
||||
<el-select v-model="curMode" class="mr-3 w-30">
|
||||
<!-- <el-button v-else type="primary" class="mr-3" @click="isEdit = true">编辑</el-button>-->
|
||||
<!-- <el-select v-model="curMode" class="mr-3 w-30">
|
||||
<el-option
|
||||
v-for="item in modeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-select>-->
|
||||
</div>
|
||||
</div>
|
||||
<el-button type="primary">导出图片</el-button>
|
||||
<div>
|
||||
导出清晰度：<el-input-number v-model="scale" :min="1" :max="10" />数字越大越清晰，但图片大小会越大
|
||||
<el-button @click="outputImg" type="primary">导出图片</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mindmap-main flex flex-1">
|
||||
<div class="w-1/2 h-full p-3 main-left flex flex-col">
|
||||
<div class="flex flex-1">
|
||||
<div class="mindmap-main flex flex-1" style="overflow: auto;">
|
||||
<div class="w-1/3 h-full p-3 main-left flex flex-col" v-loading="loadingAnswer" style="overflow: auto;">
|
||||
<div class="flex flex-1" style="overflow: auto;">
|
||||
<v-md-editor v-model="resMarkdown" :mode="isEdit ? 'edit' : 'preview'" />
|
||||
</div>
|
||||
<div class="main-left-ipt">
|
||||
<el-input v-model="textVal" size="large" placeholder="请输入信息对内容进一步调整" />
|
||||
<el-input
|
||||
v-model="textVal"
|
||||
style="max-width: 600px"
|
||||
placeholder="请输入信息对内容进一步调整"
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-icon size="20" style="cursor: pointer;" @click="sendMessage"><Position /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<!-- <el-input style="float: left;" v-model="textVal" size="large" placeholder="请输入信息对内容进一步调整" /><el-button>发送</el-button>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/2 h-full main-right"></div>
|
||||
<div class="w-2/3 h-full main-right">
|
||||
<mindmap v-if="rootData" :timetravel="true" :drag="true" :zoom="true" :edit="true"
|
||||
:center-btn="true" :fit-btn="true" :ctm="true" :add-node-btn="true"
|
||||
v-model="rootData"></mindmap>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ref, reactive, onMounted, computed, watch } from 'vue'
|
||||
import { Position } from "@element-plus/icons-vue"
|
||||
import { sessionStore } from '@/utils/store'
|
||||
import { modelList, completion, modelChat } from '@/api/mode/index.js'
|
||||
import { createChart, sendChart } from '@/api/ai/index'
|
||||
import { Transformer } from 'markmap-lib'
|
||||
import mindmap from 'vue3-mindmap'
|
||||
import html2canvas from 'html2canvas'
|
||||
import 'vue3-mindmap/dist/style.css'
|
||||
import {exportImg64File} from "@/utils/talkFile";
|
||||
import axios from 'axios'
|
||||
|
||||
const transformer = new Transformer()
|
||||
|
||||
const textVal = ref('')
|
||||
// 当前节点
|
||||
const curNode = reactive({})
|
||||
|
||||
const curMode = ref(1)
|
||||
const textVal = ref(``)
|
||||
|
||||
const loadingAnswer = ref(false)
|
||||
|
||||
const scale = ref(5)
|
||||
|
||||
// const textVal = computed(() => {
|
||||
// return `生成${curNode.itemtitle}的教学思维导图，按照markdown的格式编写，只返回markdown的部分`
|
||||
// })
|
||||
|
||||
const curMode = ref(2)
|
||||
const modeOptions = ref([
|
||||
{
|
||||
label: '教学大模型',
|
||||
|
|
@ -61,21 +97,7 @@ const modeOptions = ref([
|
|||
const isEdit = ref(false)
|
||||
|
||||
// AI 对话
|
||||
const resMarkdown = ref(`**设置情境**：
|
||||
|
||||
同学们，今天我们将要穿越时空，回到古代，感受一段浪漫的爱情故事。想象一下，你是一位古代的文人墨客，正在参加一场盛大的宴会。宴会上，一位美丽的女子引起了你的注意，她不仅外貌出众，更有着独特的韵味和气质。你决定上前与她相识，但如何才能让她对你产生好感并留下深刻印象呢？这就需要我们运用智慧和才华，通过一首动人的情诗来表达你的心意。
|
||||
|
||||
**引导学习**：
|
||||
|
||||
1. **了解背景**：首先，我们需要了解古代的爱情文化和诗歌创作背景。通过查阅资料，我们可以知道在古代，文人墨客常常通过诗歌来表达爱意和思念之情。同时，也可以了解到一些著名的爱情故事和诗人，如《静女》的作者杜牧。
|
||||
|
||||
2. **赏析诗歌**：接下来，我们将一起赏析《静女》这首诗歌。通过朗读和讨论，我们可以感受到诗人对女子的深深爱意和对美好生活的向往。同时，也可以学习到诗歌中运用的修辞手法和表达技巧，如比喻、象征和夸张等。
|
||||
|
||||
3. **创作实践**：在了解了背景和赏析了诗歌之后，我们将进行创作实践。你可以根据自己的经历和感受，写一首表达爱意的诗歌或者一段动人的情话。在创作过程中，你可以尝试运用所学到的表达技巧和修辞手法，使自己的作品更加生动和感人。
|
||||
|
||||
4. **分享与交流**：最后，我们将进行作品分享和交流环节。你可以将自己的作品读给同学们听，并听取他们的意见和建议。通过交流和学习，你可以不断提高自己的诗歌创作能力和表达能力。
|
||||
|
||||
通过这样的情境设置和学习引导，我们可以更加深入地了解古代的爱情文化和诗歌创作技巧，同时也可以提高自己的表达能力和审美能力。希望大家能够积极参与并享受这次穿越时空的文学之旅！`)
|
||||
const resMarkdown = ref(``)
|
||||
const params = reactive({
|
||||
prompt: '',
|
||||
dataset_id: '',
|
||||
|
|
@ -88,29 +110,74 @@ const messages = ref([
|
|||
}
|
||||
])
|
||||
const aiConversation = async () => {
|
||||
console.log(prompt.value)
|
||||
// return
|
||||
// params.prompt = prompt.value.replace(/{模板名称}/g, '')
|
||||
// 暂时用死数据
|
||||
let str = '针对高中语文必修上册-人教版《静女》这一课根据设置情境、引导学习进行课件教学PPT内容设计，只需要涉及到设置情境、引导学习的内容即可，不需要封面、结尾和其它内容。'
|
||||
messages.value[0].content = str
|
||||
params.prompt = str
|
||||
// let str = '针对高中语文必修上册-人教版《静女》这一课根据设置情境、引导学习进行课件教学PPT内容设计，只需要涉及到设置情境、引导学习的内容即可，不需要封面、结尾和其它内容。'
|
||||
// messages.value[0].content = str
|
||||
params.prompt = prompt.value
|
||||
// 教学大模型
|
||||
|
||||
loadingAnswer.value = true
|
||||
if (curMode.value == 1) {
|
||||
const res = await sendChart({
|
||||
content: params.prompt,
|
||||
conversationId: conversation_id.value,
|
||||
stream: false
|
||||
})
|
||||
resMarkdown.value = res.data.answer
|
||||
resMarkdown.value = res.data.answer.replaceAll('```markdown','').replaceAll('```', '')
|
||||
}
|
||||
// 知识库模型
|
||||
else {
|
||||
const res = await modelChat({messages: messages.value})
|
||||
|
||||
resMarkdown.value = res.data.answer
|
||||
let data = {
|
||||
"messages": [
|
||||
{
|
||||
"role": "user",
|
||||
"content": params.prompt
|
||||
}
|
||||
]
|
||||
}
|
||||
const res = await text2mindmap(data).finally(() => {
|
||||
loadingAnswer.value = false
|
||||
})
|
||||
console.log(res)
|
||||
resMarkdown.value = res.data.answer.content.replaceAll('```markdown','').replaceAll('```', '')
|
||||
}
|
||||
}
|
||||
|
||||
const sendMessage = async () => {
|
||||
loadingAnswer.value = true
|
||||
rootData.value = null
|
||||
let data = {
|
||||
"messages": [
|
||||
{
|
||||
"role":"assiatant",
|
||||
"content": resMarkdown.value
|
||||
},
|
||||
{
|
||||
"role": "user",
|
||||
"content": `${textVal.value}，按照markdown的格式编写，只返回markdown的部分`
|
||||
}
|
||||
]
|
||||
}
|
||||
let res = await text2mindmap(data).finally(() => {
|
||||
loadingAnswer.value = false
|
||||
})
|
||||
resMarkdown.value = res.data.answer.content.replaceAll('```markdown','').replaceAll('```', '')
|
||||
}
|
||||
|
||||
const text2mindmap =(data)=> {
|
||||
return axios({
|
||||
url: "https://ai.ysaix.com:7865/chat",
|
||||
method: "post",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "*/*",
|
||||
},
|
||||
data:data
|
||||
});
|
||||
}
|
||||
|
||||
// 查询prompt 替换
|
||||
const prompt = ref('')
|
||||
const getPrompt = async () => {
|
||||
|
|
@ -123,7 +190,6 @@ const getPrompt = async () => {
|
|||
str = str.replace('{教材版本}', bookV)
|
||||
str = str.replace('{课程名称}', `《${curNode.itemtitle}》`)
|
||||
prompt.value = str
|
||||
|
||||
}
|
||||
|
||||
// 千帆创建对话
|
||||
|
|
@ -135,21 +201,46 @@ const getChartId = async () => {
|
|||
aiConversation()
|
||||
}
|
||||
|
||||
// 当前节点
|
||||
const curNode = reactive({})
|
||||
const rootData = ref(null)
|
||||
|
||||
const degure = (item) => {
|
||||
item.name = item.content.replace(/<[^>]*>/g, '');;
|
||||
if (item.children && item.children.length) {
|
||||
item.children.forEach(item2 => {
|
||||
degure(item2)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const outputImg = () => {
|
||||
let svg = window.document.getElementById('Mindmap_svg-wrapper_fgvb6')
|
||||
// let das = svg.querySelectorAll('.Mindmap_root_fgvb6')[0]
|
||||
html2canvas(svg,{
|
||||
scale: scale.value
|
||||
}).then((canvas) => {
|
||||
const dataUrl = canvas.toDataURL()
|
||||
exportImg64File(dataUrl, `${curNode.itemtitle}思维导图`)
|
||||
})
|
||||
// mm.value.fit()
|
||||
}
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
let data = sessionStore.get('subject.curNode')
|
||||
Object.assign(curNode, data)
|
||||
|
||||
|
||||
// 获取百度千帆会话ID
|
||||
// getChartId()
|
||||
// 获取提示词
|
||||
getPrompt()
|
||||
// 获取百度千帆会话ID
|
||||
getChartId()
|
||||
|
||||
})
|
||||
// 监听 initValue 的变化
|
||||
watch(() => resMarkdown.value, () => {
|
||||
const { root } = transformer.transform(resMarkdown.value)
|
||||
degure(root)
|
||||
rootData.value = [root]
|
||||
console.log(rootData.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -166,4 +257,11 @@ onMounted(() => {
|
|||
height: 40px;
|
||||
}
|
||||
}
|
||||
.main-right{
|
||||
border: 1px solid #ccc;
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -68,7 +68,6 @@
|
|||
</div>
|
||||
<div class="content-body-right-item-text">{{item.name}}</div>
|
||||
</div>
|
||||
<el-button type="primary" @click="router.push('/model/mindmap')">AI思维导图</el-button>
|
||||
</div>
|
||||
<!-- <Eos></Eos>-->
|
||||
</div>
|
||||
|
|
@ -162,6 +161,10 @@ const tools = reactive([{
|
|||
name: '文生图片',
|
||||
path: '/model/aiKolors',
|
||||
img: 'aiimg'
|
||||
},{
|
||||
name: 'AI思维导图',
|
||||
path: '/model/mindmap',
|
||||
img: 'aiswdt'
|
||||
},{
|
||||
name: '文生连环画',
|
||||
path: '',
|
||||
|
|
|
|||
Loading…
Reference in New Issue