先看效果吧：
<iframe allowfullscreen="true" data-mediaembed="bilibili" frameborder="0" id="wVE57iJD-1725604964261" src="https://player.bilibili.com/player.html?aid=113087931747637"></iframe>小红书，流程图也都可以做了
我们先讲解最简单的，比如小红书，直接网上找来提示词用就行了，唯一的缺点是换行不正常，为什么家家的都正常，到我们手里就不正常，我是非正常人类吗？当然不是，主流都是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/