基于Vue、MarkMap、OpenAi开发的思维导图生成器

本项目是一个结合了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

前端代码

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

下载地址：