[Request] markdown输出的svg图片实时渲染功能的支持

[Helium-327]

🥰 需求描述

可以通过提示词引导AI输出SVG代码，并通过markdown进行渲染，这样，AI将具备更多可视化的玩法。想法来源于@李继刚的”汉语新解“prompt

🧐 解决方案

不太懂这方面的技术，只知道typora支持实时渲染。可以参考typora的实现方式

📝 补充信息

No response

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

🥰 Description of requirements

AI can be guided to output SVG code through prompt words and rendered through markdown. In this way, AI will have more visual gameplay. The idea comes from the "New Interpretation of Chinese Language" prompt by @李杰强

🧐 Solution

I don’t know much about this technology, but I just saw that Typora supports real-time rendering. You can refer to the implementation of typora

📝 Supplementary information

No response

[lobehubbot]

👀 @Helium-327

Thank you for raising an issue. We will investigate into the matter and get back to you as soon as possible.
Please make sure you have given us as much context as possible.
非常感谢您提交 issue。我们会尽快调查此事，并尽快回复您。 请确保您已经提供了尽可能多的背景信息。

[dosubot]

@Helium-327 你好，我是一个可以帮助你解决 bug、回答问题并成为贡献者的机器人。如果你有任何疑问，我会很乐意帮助你。

要在markdown中支持SVG图片的实时渲染，可以使用remark-sanitize插件来确保SVG内容安全地包含在HTML输出中。以下是如何修改你的parseMarkdown函数以支持此功能的示例代码：

import { remark } from 'remark';
import remarkGfm from 'remark-gfm';
import remarkHtml from 'remark-html';
import remarkSanitize from 'remark-sanitize';

export const parseMarkdown = async (content: string) => {
  const file = await remark()
    .use(remarkGfm)
    .use(remarkHtml)
    .use(remarkSanitize, {
      tagNames: ['svg', 'path', 'circle', 'rect', 'line', 'polyline', 'polygon', 'text', 'g', 'defs', 'marker', 'use', 'symbol'],
      attributes: {
        '*': ['className', 'style', 'id', 'width', 'height', 'x', 'y', 'viewBox', 'xmlns', 'd', 'fill', 'stroke', 'stroke-width', 'transform', 'xlink:href']
      }
    })
    .process(content.trim());

  return String(file);
};

这段代码添加了remark-sanitize插件，并配置了允许的SVG标签和属性，从而实现了在markdown内容中安全渲染SVG图片的功能^[1].

To continue talking to Dosu, mention @dosu.

[dosubot]

要在markdown中支持SVG图片的实时渲染，可以使用remark-sanitize插件来确保SVG内容安全地包含在HTML输出中。以下是如何修改你的parseMarkdown函数以支持此功能：

import { remark } from 'remark';
import remarkGfm from 'remark-gfm';
import remarkHtml from 'remark-html';
import remarkSanitize from 'remark-sanitize';

export const parseMarkdown = async (content: string) => {
  const file = await remark()
    .use(remarkGfm)
    .use(remarkHtml)
    .use(remarkSanitize, {
      tagNames: ['svg', 'path', 'circle', 'rect', 'line', 'polyline', 'polygon', 'text', 'g', 'defs', 'marker', 'use', 'symbol'],
      attributes: {
        '*': ['className', 'style', 'id', 'width', 'height', 'x', 'y', 'viewBox', 'xmlns', 'd', 'fill', 'stroke', 'stroke-width', 'transform', 'xlink:href']
      }
    })
    .process(content.trim());

  return String(file);
};

这段代码添加了remark-sanitize插件，并配置了允许的SVG标签和属性，从而实现了在markdown内容中安全渲染SVG图片的功能^[1].

To continue talking to Dosu, mention @dosu.

[Helium-327]

我希望lobe-chat输出能支持SVG

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

I hope the lobe-chat output supports SVG

[Helium-327]

good job

[lobehubbot]

✅ @Helium-327

This issue is closed, If you have any questions, you can comment and reply.
此问题已经关闭。如果您有任何问题，可以留言并回复。

[lobehubbot]

🎉 This issue has been resolved in version 1.19.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[fliaping]

有些模型不支持Function Call, lobe不支持使用Artifacts，但也能生成正确的svg，可是却没法渲染，看看大佬怎么解决下

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

Some models do not support Function Call, lobe does not support using Artifacts, but can also generate correct svg, but cannot render. See how the big guy solves it.