【05】从0到1构建AI生成思维导图应用 -- 前端交互实现

最新推荐文章于 2025-05-30 15:39:29 发布

正宗咸豆花

最新推荐文章于 2025-05-30 15:39:29 发布

阅读量680

点赞数 6

分类专栏： AI应用开发文章标签：前端交互 ai AIGC

本文链接：https://blog.youkuaiyun.com/m0_56699208/article/details/140071054

版权

【05】从0到1构建AI生成思维导图应用 – 前端交互实现

大家好！最近自己做了一个完全免费的AI生成思维导图的网站，支持下载，编辑和对接微信公众号，可以在这里体验：https://lt2mind.zeabur.app/
上一章：https://blog.youkuaiyun.com/m0_56699208/article/details/140061215?spm=1001.2014.3001.5502

上一章中，我们已经构建了完整的生成思维导图的 AI 功能，并将其暴露为 API。接下来，我们要编写一套交互逻辑，供用户输入文字或链接，点击按钮，即可生成思维导图，并提供下载和编辑按钮。

import axios from "axios";
export const toMind = async (query: string) => {
   
    const url = 'https://api.coze.cn/open_api/v2/chat';
    const headers = {
   
    'Content-Type': 'application/json',
      'Authorization': "Bearer your api key"
    };
    const body = {
   
      "conversation_id": "1",
      "bot_id": "your bot id",
      "user": "29032201862555",
      "query": query,
      "stream": false
    };
  
    try {
   
      const response = await axios.post(url, body, {
    headers });
      console.log('Response:', response.data.messages[2].content);
      const urlPattern = /https:\/\/[^\s]+/g;
      let urls = response.data.messages[2].content.match(urlPattern);
      let imgUrl = urls[0]
      let editUrl = urls[1]
      return {
   imgUrl, editUrl}
    } catch (error) {
   
      console.error('Error:', error);
    }
  };

这段代码使用正则表达式/https://[^\s]+/g来匹配响应内容中的URL，包含两个属性imgUrl和editUrl，分别对应匹配到的第一个和第二个URL。这两个URL分别是图片的下载地址和对应在treemind里面的编辑地址。我们只需要在前端把链接给到对应的按钮上，即可实现交互逻辑：
完整代码：