Преобразование ответов ИИ из формата Markdown в HTML

Чат-ассистенты на базе искусственного интеллекта стали незаменимым инструментом для миллионов пользователей: студентов, создателей контента, сотрудников служб поддержки, исследователей и т. д. В результате многие разработчики создают приложения, использующие генерируемые ИИ ответы для предоставления динамичного и интерактивного контента. В большинстве случаев API AI возвращает текстовый ответ в формате JSON, MD или простого текста, но в любом случае ответ требует преобразования для представления на веб-странице.

Преобразование Markdown в HTML – из ответа ИИ в веб-страницу

ИИ-помощники часто предоставляют ответы в формате Markdown. Хотя Markdown – легкий и удобный для чтения формат, его нельзя напрямую использовать для отображения в Интернете. Чтобы представить ответы ИИ в виде хорошо оформленной веб-страницы, мы можем преобразовать Markdown в HTML с помощью Aspose.HTML for .NET.

В этой статье мы покажем, как разработать приложение, которое принимает генерируемые ИИ ответы в формате Markdown и преобразует их в правильно оформленную веб-страницу HTML.

Почему ИИ-помощники используют Markdown для ответов?

ИИ-помощники используют Markdown из-за его удобочитаемости, структурированного форматирования и кроссплатформенной совместимости. Markdown поддерживает заголовки, жирный текст, фрагменты кода и ссылки, что упрощает организацию контента, созданного ИИ. Он простой, легко конвертируется в такие форматы, как HTML или PDF, и идеально подходит для автоматизации в API. Эти преимущества делают Markdown идеальным выбором для сохранения структуры и форматирования текста в ответах, созданных ИИ.

Однако веб-браузеры не поддерживают Markdown, поэтому ответы, генерируемые ИИ, необходимо преобразовывать в HTML. HTML позволяет использовать пользовательские стили и форматирование CSS, что улучшает общее представление ответов ИИ, делая контент более доступным и визуально привлекательным.

Шаги по созданию конвертера ответов ИИ

Чтобы преобразовать сгенерированный ИИ ответ в формате Markdown в HTML-страницу, выполните следующие действия:

Захватите ответ ИИ в формате Markdown.
Используйте Aspose.HTML for .NET, чтобы проанализировать и конвертировать строку Markdown в HTML-документ.
Примените стили CSS для улучшения визуального представления.
Сохраните или отобразите HTML-содержимое в веб-приложении.

В следующем примере C# показано, как преобразовать сгенерированный ИИ ответ в формате Markdown в HTML-страницу:

 1// AI response in Markdown format with the text, code example and link
 2string markdownContent = "# How to Convert a Markdown File to HTML\n" +
 3                     "Markdown is a lightweight markup language used for formatting text. If you need to convert a Markdown file to an HTML document, you can use **Aspose.HTML for .NET**.\n\n" +
 4                     "## Steps to Convert\n" +
 5                     "1. Load the Markdown file.\n" +
 6                     "2. Convert it to an HTML document.\n" +
 7                     "3. Save the output file.\n\n" +
 8                     "## Example Code\n" +
 9                     "```csharp\n" +
10                     "// Convert a Markdown file to HTML\n" +
11                     "Converter.ConvertMarkdown(\"input.md\", \"output.html\");\n" +
12                     "```\n\n" +
13                     "For more details, refer to the [official documentation](https://docs.aspose.com/html/net/convert-markdown-to-html/).\n";
14
15// Create a memory stream from the Markdown string
16using (MemoryStream stream = new MemoryStream(System.Text.Encoding.UTF8.GetBytes(markdownContent)))
17{
18    // Convert Markdown to HTML
19    HTMLDocument document = Converter.ConvertMarkdown(stream, "");
20
21    // Ensure the document has a <head> element
22    HTMLHeadElement head = document.QuerySelector("head") as HTMLHeadElement;
23    if (head == null)
24    {
25        head = document.CreateElement("head") as HTMLHeadElement;
26        document.DocumentElement.InsertBefore(head, document.Body);
27    }
28
29    // Create a <style> element with CSS styles
30    string cssStyles = "body { font-family: Open Sans, sans-serif; max-width: 800px; margin: auto; padding: 20px; background-color: #f9f9f9; }\n" +
31                   "h1, h2 { color: #333; }\n" +
32                   "p, li { font-size: 14px; }\n" +
33                   "code, pre { font-family: Consolas, monospace; color: #f8f8f2; background-color: #272822; padding: 10px; border-radius: 5px; display: block; }\n";
34
35    HTMLStyleElement styleElement = document.CreateElement("style") as HTMLStyleElement;
36    styleElement.TextContent = cssStyles;
37
38    // Append the <style> element to the <head>
39    head.AppendChild(styleElement);
40
41    // Save the resulting HTML file
42    string outputPath = Path.Combine(OutputDir, "chartAnswer.html");
43    document.Save(outputPath);
44
45    // Print the HTML content to the console
46    Console.WriteLine(document.DocumentElement.OuterHTML);
47
48    Console.WriteLine("Conversion completed. HTML saved at " + outputPath);
49}

Example-ConvertMarkdownSringToHTML hosted with ❤ by GitHub

Как работает код

Давайте подробнее рассмотрим, как преобразовать сгенерированный ИИ ответ в формате Markdown в веб-страницу HTML:

Захватите ответ ИИ в формате Markdown. Строка Markdown может содержать структурированный текст, например заголовки, полужирный текст, фрагменты кода и ссылки. В примере содержимое включает сгенерированный ИИ ответ с элементами форматирования.
Преобразуйте строку Markdown в HTMLDocument, передав MemoryStream, содержащий данные Markdown. Используйте метод ConvertMarkdown(stream, baseUri) из пространства имен Aspose.Html.Converters.
Получите элемент <head> с помощью метода QuerySelector("head"). Если элемент <head> отсутствует, создайте его с помощью метода CreateElement("head") и вставьте его перед <body> с помощью метода AppendChild(node).
Создайте элемент <style> с помощью CreateElement("style"). Определите стили CSS для основного текста, заголовков, списков и блоков кода. Добавьте элемент <style> в <head> HTML-документа.
Используйте метод Save(путь) для сохранения созданного HTML-файла. Используйте свойство OuterHTML, чтобы вывести полученную HTML-структуру на консоль для проверки.

На рисунке показан результат преобразования ответа ИИ Markdown в веб-страницу HTML.

Текст “Преобразование ответа ИИ Markdown в веб-страницу HTML”

Заключение

ИИ-помощники часто предоставляют ответы в формате Markdown. Однако он не подходит для отображения непосредственно на веб-сайтах. Поэтому необходимо преобразовать Markdown в HTML.
Применение CSS улучшает структуру, повышая читабельность шрифтов, добавляя цветовой контраст и правильно форматируя блоки кода. Это делает ответы, сгенерированные ИИ, более удобными для пользователя и профессиональными при отображении на веб-странице.
Aspose.HTML for .NET предлагает мощное и гибкое решение для преобразования Markdown. С помощью метода Converter.ConvertMarkdown вы можете легко преобразовывать генерируемые ИИ ответы в формате Markdown в хорошо структурированный HTML. Кроме того, интегрируя CSS непосредственно в документ, можно настроить его так, чтобы он соответствовал дизайну любого веб-сайта.

В статье Конвертировать Markdown в HTML вы узнаете о поддерживаемых сценариях преобразования Markdown в HTML и рассмотрите примеры на C#, иллюстрирующие их. Кроме того, вы можете попробовать онлайн-конвертер Markdown, чтобы проверить функциональность Aspose.HTML API и конвертировать Markdown “на лету”.
Скачайте библиотеку Aspose.HTML for .NET, которая позволяет успешно, быстро и легко конвертировать документы HTML, MHTML, EPUB, SVG и Markdown в самые популярные форматы.
Вы можете проверить качество преобразования Markdown в HTML с помощью нашего онлайн Конвертера MD в HTML. Загрузите, конвертируйте свои файлы и получите результат через несколько секунд. Попробуйте Конвертер Markdown в HTML бесплатно прямо сейчас!

Как сгладить PDF Data Extraction