制作小红书和流程图

最新推荐文章于 2025-05-14 08:41:40 发布

alphy_qt

最新推荐文章于 2025-05-14 08:41:40 发布

阅读量1k

点赞数 13

文章标签：流程图

本文链接：https://blog.csdn.net/weixin_40506752/article/details/141959499

版权

先看效果吧：

小红书，流程图也都可以做了

我们先讲解最简单的，比如小红书，直接网上找来提示词用就行了，唯一的缺点是换行不正常，为什么家家的都正常，到我们手里就不正常，我是非正常人类吗？当然不是，主流都是stream,gradiio在做这些人工智能，默认就支持markdown,写起来和空气一样自热，到了js+html古代程序，就得做转换了，还好，古代的土壤里什么都兼容，不就是个转换，cdn上找来转换工具

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

text.innerHTML = marked.parse(msg.text);

这样就把客户端获取到的markdown内容转换成了html,显示就完全正常了。这么简单完成了，我们看下一项吧。

流程难不难，分好多种，我们拿个软的柿子，比如mermaid，非常简单，好多前端框架都支持，我们选择 https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs

看起来一个语句就完成了，如下是个案例：

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>
<div class="mermaid">
graph TD;
  A[开始] --> B{感知环境};
  B --> C[分析数据];
  C --> D{决策};
  D -- 执行行动 --> E[执行];
  D -- 更新知识库 --> F[学习];
  E --> G{是否完成任务？};
  F --> G;
  G -- 是 --> H[结束];
  G -- 否 --> I[调整策略];
  I --> B;
</div>


运行就看到图了，非常漂亮，就它。实际上我们使用时候才发现，这东西好多问题，首先，这一段js用的方式是module的方式，和我用的恰好不是同一类方式，直接调用存在点麻烦，反正我看着就不太理解，不管了，直接扔html,总该运行吧，事实和我想的不一样，class="mermaid"的div里动态加的内容，它就懒得渲染，我还查了好几次是不是某个地方把其中的符合转义了，确实有地方没处理好，但处理好也没用。想再次调用mermaid.initialize({ startOnLoad: true });看看有没效果，需要做一下封装，做成全局函数方便我调用测试，但是也还是没效果，最后来个下策，直接拼接一个页面做成iframe展示，这下你总该和我的案例没区别了吧，确实这次可以用了，正如视频中看到的。完美，想优化那是以后的事情。

如下两个方法完成了拼接：

function createIframeWithContent(content, apendTo, width = '600', height = '400', id = 'dynamicIframe') {
    // 创建一个新的 iframe 元素
    var iframe = document.createElement('iframe');

    // 使用 Blob 对象创建动态内容
    var blob = new Blob([content], { type: 'text/html' });
    var url = URL.createObjectURL(blob);

    // 设置 iframe 的属性
    iframe.src = url;  // 设置 iframe 的源 URL
    iframe.width = width;  // 设置 iframe 的宽度
    iframe.height = height;  // 设置 iframe 的高度
    iframe.id = id;  // 设置 iframe 的 ID（可选）
    iframe.style.border = 'none';  // 设置样式，去掉边框（可选）

    // 将 iframe 添加到文档中
    apendTo.appendChild(iframe);  // 或者将其添加到特定的容器中

    // 释放 Blob URL（可选，但推荐在 iframe 不再需要时调用）
    iframe.onload = function() {
        URL.revokeObjectURL(url);
    };
}

function makeMerPage(mermaid){
return `
<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Content</title>
</head>
<body>
    <script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>
<div class="mermaid">
${mermaid}
</div>
</body>
</html>
`;
}

体验地址：https://ai.gitee.com/events/iluvatar-ai-app-contest/detail?app=22 ,进入页面后点击体验就进入应用了，同时也是投票地址，参加比赛中，希望得到投票支持。图片理解在这里是正常使用的，这里是gpu的服务器。
代码地址：https://gitee.com/qingtinggit/talks
最新体验地址：https://ai.xypf.top/