Convertir les réponses AI de Markdown en HTML

Les assistants de chat dotés d’IA sont devenus un outil essentiel pour des millions d’utilisateurs : étudiants, créateurs de contenu, équipes d’assistance à la clientèle, chercheurs, etc. Par conséquent, de nombreux développeurs créent des applications qui utilisent des réponses générées par l’IA pour fournir un contenu dynamique et interactif. Dans la plupart des cas, l’API de l’assistant d’IA renvoie une réponse textuelle au format JSON, MD ou texte brut, mais dans tous les cas, la réponse doit être convertie pour être présentée sur une page web.

Convertir Markdown en HTML – De la réponse AI à la page Web

Les assistants de chat de l’IA fournissent souvent des réponses formatées en Markdown. Bien que Markdown soit un format léger et lisible, il ne peut pas être utilisé directement pour l’affichage sur le web. Pour présenter les réponses générées par l’IA sous la forme d’une page web bien conçue, nous pouvons convertir Markdown en HTML à l’aide d’Aspose.HTML for .NET.

Dans cet article, nous allons montrer comment développer une application qui prend les réponses Markdown générées par l’IA et les convertit en une page web HTML correctement stylisée.

Pourquoi les assistants d’IA utilisent-ils Markdown pour les réponses ?

Les assistants d’IA utilisent Markdown en raison de sa lisibilité, de son formatage structuré et de sa compatibilité multiplateforme. Markdown prend en charge les titres, le texte en gras, les extraits de code et les liens, ce qui facilite l’organisation du contenu généré par l’IA. Il est léger, facile à convertir dans des formats tels que HTML ou PDF, et idéal pour l’automatisation dans les API. Ces avantages font de Markdown un choix idéal pour préserver la structure et le formatage du texte dans les réponses générées par l’IA.

Toutefois, les navigateurs web ne prennent pas en charge le format Markdown de manière native, de sorte que les réponses générées par l’IA doivent être converties en HTML. Le HTML permet de personnaliser le style et le formatage CSS, ce qui améliore la présentation générale des réponses de l’IA, rendant le contenu plus accessible et visuellement attrayant.

Étapes de la création d’un convertisseur de réponse d’IA

Pour convertir une réponse Markdown générée par l’IA en une page HTML, procédez comme suit :

Saisir la réponse de l’IA au format Markdown.
Utilisez Aspose.HTML for .NET pour analyser et convertir la chaîne Markdown en un document HTML.
Appliquer des styles CSS pour améliorer la présentation visuelle.
Enregistrer ou afficher le contenu HTML dans une application web.

L’exemple C# suivant montre comment convertir une réponse Markdown générée par l’IA en une page HTML :

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

Example-ConvertMarkdownSringToHtml.cs hosted with ❤ by GitHub

Fonctionnement du code

Examinons de plus près comment convertir une réponse Markdown générée par l’IA en une page web HTML :

Saisir la réponse de l’IA au format Markdown. Une chaîne Markdown peut contenir du texte structuré, tel que des titres, du texte en gras, des extraits de code et des liens. Dans l’exemple, le contenu comprend une réponse générée par l’IA avec des éléments de mise en forme.
Convertit la chaîne Markdown en un HTMLDocument en passant un MemoryStream contenant les données Markdown. Utilisez la méthode ConvertMarkdown(stream, baseUri) de l’espace de noms Aspose.Html.Converters.
Récupérez l’élément <head> en utilisant la méthode QuerySelector("head"). Si l’élément <head> est manquant, créez-le en utilisant CreateElement("head") et insérez-le avant le <body> en utilisant la méthode AppendChild(node).
Créez un élément <style> en utilisant CreateElement("style"). Définissez des styles CSS pour le corps du texte, les titres, les listes et les blocs de code. Ajoutez l’élément <style> à l’élément <head> du document HTML.
Utilisez la méthode Save(path) pour enregistrer le fichier HTML généré. Utilisez la propriété OuterHTML pour imprimer la structure HTML résultante sur la console pour vérification.

La figure illustre le résultat de la conversion de la réponse AI Markdown en une page web HTML.

Texte “Réponse AI Markdown convertie en page web HTML”

Conclusion

Les assistants de chat de l’IA fournissent souvent des réponses au format Markdown. Cependant, ce format n’est pas adapté à un affichage direct sur les sites web. Il est donc nécessaire de convertir le format Markdown en HTML.
L’application de CSS améliore la structure en améliorant la lisibilité des polices, en ajoutant un contraste de couleurs et en formatant correctement les blocs de code. Les réponses générées par l’IA sont ainsi plus conviviales et plus professionnelles lorsqu’elles sont affichées sur une page web.
Aspose.HTML for .NET offre une solution puissante et flexible pour gérer la conversion Markdown. Grâce à la méthode Converter.ConvertMarkdown, vous pouvez facilement convertir les réponses Markdown générées par l’IA en HTML bien structuré. En outre, l’intégration de CSS directement dans le document permet de personnaliser le résultat pour qu’il corresponde au design de n’importe quel site web.

Dans l’article Convertir Markdown en HTML, vous découvrirez les scénarios de conversion Markdown en HTML pris en charge et des exemples C# pour les illustrer. Vous pouvez également essayer un convertisseur Markdown en ligne pour tester la fonctionnalité de l’API Aspose.HTML et convertir Markdown à la volée.
Téléchargez la bibliothèque Aspose.HTML for .NET, qui vous permet de convertir avec succès, rapidement et facilement vos documents HTML, MHTML, EPUB, SVG et Markdown vers les formats les plus populaires.
Vous pouvez vérifier la qualité de la conversion Markdown vers HTML avec notre Convertisseur Markdown vers HTML en ligne. Téléchargez, convertissez vos fichiers et obtenez des résultats en quelques secondes. Essayez gratuitement notre convertisseur Markdown vers HTML !

Comment aplatir un PDF Extraction des données