思维导图

package.json

@@ -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",
@@ -139,4 +141,4 @@
     "vue-tsc": "^1.8.25",
     "windicss": "^3.5.6"
   }
-}
+}

src/renderer/src/components/file-image/index.vue

@@ -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]

src/renderer/src/layout/index.vue

@@ -24,7 +24,7 @@
         </el-main>
       </el-container>
       <Uploader v-if="uploaderStore.uploadList && uploaderStore.uploadList.length > 0" />
-      <AiChart/>
+<!--      <AiChart/>-->
     </el-container>
   </div>
 </template>
@@ -114,8 +114,8 @@ const onBack = () =>{
       margin-top: -3px;
       margin-right: 3px;
     }
-    
+
   }
-  
+
 }
 </style>

src/renderer/src/views/mindMap/index.vue

@@ -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-button v-else type="primary" class="mr-3" @click="isEdit = true">编辑</el-button>-->
-          <el-select v-model="curMode" class="mr-3 w-30">
+<!--          <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="mindmap-main flex flex-1" style="overflow: auto;">
-      <div class="w-1/2 h-full p-3 main-left flex flex-col">
+      <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">
+        <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(`**设置情境**：
+const resMarkdown = ref(``)
-
-同学们，今天我们将要穿越时空，回到古代，感受一段浪漫的爱情故事。想象一下，你是一位古代的文人墨客，正在参加一场盛大的宴会。宴会上，一位美丽的女子引起了你的注意，她不仅外貌出众，更有着独特的韵味和气质。你决定上前与她相识，但如何才能让她对你产生好感并留下深刻印象呢？这就需要我们运用智慧和才华，通过一首动人的情诗来表达你的心意。
-
-**引导学习**：
-
-1. **了解背景**：首先，我们需要了解古代的爱情文化和诗歌创作背景。通过查阅资料，我们可以知道在古代，文人墨客常常通过诗歌来表达爱意和思念之情。同时，也可以了解到一些著名的爱情故事和诗人，如《静女》的作者杜牧。
-
-2. **赏析诗歌**：接下来，我们将一起赏析《静女》这首诗歌。通过朗读和讨论，我们可以感受到诗人对女子的深深爱意和对美好生活的向往。同时，也可以学习到诗歌中运用的修辞手法和表达技巧，如比喻、象征和夸张等。
-
-3. **创作实践**：在了解了背景和赏析了诗歌之后，我们将进行创作实践。你可以根据自己的经历和感受，写一首表达爱意的诗歌或者一段动人的情话。在创作过程中，你可以尝试运用所学到的表达技巧和修辞手法，使自己的作品更加生动和感人。
-
-4. **分享与交流**：最后，我们将进行作品分享和交流环节。你可以将自己的作品读给同学们听，并听取他们的意见和建议。通过交流和学习，你可以不断提高自己的诗歌创作能力和表达能力。
-
-通过这样的情境设置和学习引导，我们可以更加深入地了解古代的爱情文化和诗歌创作技巧，同时也可以提高自己的表达能力和审美能力。希望大家能够积极参与并享受这次穿越时空的文学之旅！`)
 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内容设计，只需要涉及到设置情境、引导学习的内容即可，不需要封面、结尾和其它内容。'
+  // let str =  '针对高中语文必修上册-人教版《静女》这一课根据设置情境、引导学习进行课件教学PPT内容设计，只需要涉及到设置情境、引导学习的内容即可，不需要封面、结尾和其它内容。'
-  messages.value[0].content = str
+  // messages.value[0].content = str
-  params.prompt = 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})
+    let data =  {
-
+      "messages": [
-    resMarkdown.value = res.data.answer
+        {
+          "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 rootData = ref(null)
-const curNode = reactive({})
 
+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>

src/renderer/src/views/model/index.vue

@@ -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: '',