本帖最后由 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: [DONE]') return
if (line.startsWith('data: ')) {
const data = JSON.parse(line.slice(6))
if (data.choices[0].delta && data.choices[0].delta.content) {
result += data.choices[0].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 | 
发表于 2024-6-5 14:05
发表于 2024-6-11 13:30
|
发表于 2024-6-5 14:06
