基于Vue、MarkMap、OpenAi开发的思维导图生成器
本帖最后由 PastYiHJ 于 2024-6-11 19:19 编辑# GPT 思维导图生成器
> 本项目完全开源
> 如果觉得不错麻烦帮忙点一次`Star⭐️`
## 项目简介
本项目是一个结合了Vue、Markmap和OpenAI ChatGPT的思维导图生成工具。用户可以输入标题和内容，通过调用ChatGPT生成思维导图，并支持放大、缩小、适应屏幕和下载功能。
## 效果演示
## 技术栈
- **前端框架**：Vue
- **UI组件库**：Element Ui
- **思维导图库**：Markmap
- **图像生成库**：html-to-image
- **文件保存库**：file-saver
- **AI模型**：OpenAI ChatGPT
## 教程
找到项目目录下的`.env`文件，并修改以下内容：
```
VUE_APP_API_BASE_URL=https://api.openai.com
VUE_APP_API_KEY=your_openai_api_key
```
## 项目结构
```
├── public
│ └── index.html
├── src
│ ├── assets
│ ├── components
│ │ └── MarkdownRenderer.vue
│ ├── views
│ │ └── Home.vue
│ │ └── About.vue
│ ├── App.vue
│ └── main.js
├── .env
├── .gitignore
├── package.json
├── README.md
└── vue.config.js
```
## 部分代码
```
<template>
<el-row :gutter="20" class="mind-container">
<el-col :span="8" class="left-panel">
<el-row :gutter="20">
<el-col :span="24">
<el-input v-model="title" placeholder="输入标题"></el-input>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 10px;">
<el-col :span="24">
<el-button type="primary" @click="generateMindMap">生成</el-button>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 20px;">
<el-col :span="24">
<el-input v-model="editorContent" type="textarea" rows="10" placeholder="编辑内容"></el-input>
</el-col>
</el-row>
</el-col>
<el-col :span="16" class="right-panel">
<div class="svg-container">
<svg ref="svgRef" class="markmap-svg"></svg>
</div>
<el-row :gutter="10" class="controls">
<el-col :span="6">
<el-button @click="zoomIn">放大</el-button>
</el-col>
<el-col :span="6">
<el-button @click="zoomOut">缩小</el-button>
</el-col>
<el-col :span="6">
<el-button @click="fitToScreen">适应屏幕</el-button>
</el-col>
<el-col :span="6">
<el-button @click="onSave">下载</el-button>
</el-col>
</el-row>
</el-col>
</el-row>
</template>
<script>
/* 省略 */
const generateMindMap = async () => {
try {
const response = await fetch(
`${process.env.VUE_APP_API_BASE_URL}/v1/chat/completions`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${process.env.VUE_APP_API_KEY}`
},
body: JSON.stringify({
messages: [
{
role: 'system',
content: ``
},
{
role: 'user',
content: `${title.value}`
}
],
stream: true,
model: `gpt-3.5-turbo`,
temperature: 0.5,
presence_penalty: 2
})
}
)
const reader = response.body.getReader()
const decoder = new TextDecoder('utf-8')
let result = ''
while (true) {
const { done, value } = await reader.read()
if (done) break
const chunk = decoder.decode(value, { stream: true })
const lines = chunk.split('\n').filter(line => line.trim())
for (const line of lines) {
if (line === 'data: ') return
if (line.startsWith('data: ')) {
const data = JSON.parse(line.slice(6))
if (data.choices.delta && data.choices.delta.content) {
result += data.choices.delta.content
editorContent.value = result // Update the editor content
}
}
}
}
editorContent.value = result.trim()
update()
} catch (error) {
console.error('Error generating mind map:', error)
}
}
/* 省略 */
}
</script>
</style>
```
## 下载
源码(GitHub)：
https://github.com/PastKing/MarkMap-OpenAi-ChatGpt
源码(Gitee)：
https://gitee.com/past-dust/mindmap-generator 一、本版块仅限分享编程技术和源码相关内容，发布帖子必须带上关键代码和具体功能介绍
请在帖子中贴上部分核心代码 图片显示不正常吗？ 显示正常 PastYiHJ 发表于 2024-6-5 14:06
图片显示不正常吗？
显示®️，收藏了 这个厉害了 真的省事了 这个显示正常，非常不错 这个功能真强大，非常好 感觉有点酷，下载个看看 看着还不错，下次试一试