Streamdown: Ein Markdown-Renderer, der für KI-Streaming-Reaktionsfähigkeit entwickelt wurde

Streamdown ist eine von Vercel entwickelte Anwendung. Reagieren Sie Komponente, die als bekannte Bibliothek verwendet werden kann react-markdown Dieses Tool ist ein direkter Ersatz für das Markdown-Rendering von durch KI-Modelle erzeugtem Streaming-Text. Das Hauptziel dieses Tools ist es, Markdown-Rendering-Probleme zu lösen, die bei der Verarbeitung von durch KI-Modelle generiertem Streaming-Text auftreten. In Anwendungen wie dem KI-Chat wird der Text wortwörtlich oder Stück für Stück generiert, was oft dazu führt, dass die Markdown-Syntax unterwegs unvollständig ist (z. B. eine fettgedruckte Markup ** Streamdown verarbeitet diese unvollständigen oder nicht abgeschlossenen Teile der Markdown-Syntax und rendert sie on-the-fly korrekt. Dies verbessert die Benutzererfahrung erheblich, da die Benutzer den formatierten Text in Echtzeit sehen können, anstatt darauf zu warten, dass die gesamte Antwort generiert wird. Die Software unterstützt GitHub-style Markdown (GFM), mathematische Formeln, Code-Hervorhebung und Diagramme, wobei der Schwerpunkt auf Leistung und Sicherheit liegt.

Funktionsliste

• Optimiert für StreamingDer Hauptvorteil ist die Fähigkeit, einen kontinuierlich eingehenden, unvollständigen Strom von Markdown-Text reibungslos zu verarbeiten und darzustellen.
• Kompatibilität react-markdown: Verfügbar als react-markdown ist ein direkter Ersatz für die
• Ungeschlossene Grammatik Erläuterung:: Fähigkeit zur korrekten Analyse und Formatierung der Syntax von Fett- und Kursivdruck, Code, Links und Überschriften ohne Klammern.
• GFM unterstützenIntegrierte Unterstützung für Markdown im GitHub-Stil, einschließlich Tabellen, Aufgabenlisten und Durchstreichen.
• Darstellung von mathematischen FormelnUnterstützung für das Rendern von mathematischen LaTeX-Gleichungen durch KaTeX.
• Nixen-KarteMermaid: Kann die Mermaid-Syntax in einem Code-Block in ein Diagramm übertragen und eine Schaltfläche zum Umschalten der Darstellung bereitstellen.
• Code-Syntax-HervorhebungShiki: Verwenden Sie die Shiki-Bibliothek, um eine ästhetisch ansprechende Syntaxhervorhebung für Codeblöcke bereitzustellen.
• Sicherheit geht vor: Basierend auf harden-react-markdown Konstruiert, um die Sicherheit der gerenderten Inhalte zu gewährleisten.
• LeistungsoptimierungMemoised Rendering: Verwendet Memoised Rendering, um die Aktualisierungseffizienz zu verbessern und unnötiges Re-Rendering zu reduzieren.

Hilfe verwenden

Streamdown ist ein NPM-Paket, das hauptsächlich in React-Projekten verwendet wird. Es hat einen sehr einfachen Installations- und Nutzungsprozess, der es Entwicklern ermöglicht, es schnell zu integrieren.

1. der Einbau

Als erstes müssen Sie die streamdown. Es ist möglich, Folgendes zu verwenden npmundyarn vielleicht pnpm etc. für die Installation.

ausnutzen npm Einbau:

npm i streamdown

ausnutzen pnpm Einbau:

pnpm add streamdown

2. die Konfigurationsstile

Damit die gerenderten HTML-Elemente das richtige Styling haben (z.B. die Hintergrundfarbe des Code-Blocks, die Ränder des Referenz-Blocks, etc.), muss Streamdown seine CSS-Datei einbringen. Sie müssen den folgenden Code in die globale CSS-Datei Ihres Projekts einfügen, typischerweise globals.css oder ein ähnliches Dokument.

@import "../node_modules/streamdown/dist/index.css";

Bitte stellen Sie sicher, dass @import in Ihrer Projektstruktur, um korrekt auf den node_modules Mappe.

3. grundlegende Verwendung

Importieren Sie in Ihrer React-Komponente die Streamdown Komponente, und übergeben Sie dann die Markdown-Zeichenkette, die als untergeordnetes Element gerendert werden soll.

Dies ist eines der einfachsten Beispiele:

import { Streamdown } from 'streamdown';
export default function MyPage() {
const markdownContent = "# 你好，世界！\n\n这是一个 **流式传输** 的 *Markdown* 文本。";
return (
<article>
<Streamdown>{markdownContent}</Streamdown>
</article>
);
}

Im obigen Beispiel ist diemarkdownContent Die Zeichenkette wird von Streamdown geparst und in das entsprechende HTML-Tag umgewandelt.

4. verwendet in Verbindung mit dem Vercel AI SDK

Der größte Wert von Streamdown liegt in der Verarbeitung von in Echtzeit generierten Textströmen. Das folgende Beispiel zeigt, wie es mit den Vercel AI SDK's verwendet werden kann useChat Hooks werden in Kombination verwendet, um die Chat-Antworten der KI in Echtzeit darzustellen.

'use client';
import { useChat } from '@ai-sdk/react';
import { useState } from 'react';
import { Streamdown } from 'streamdown';
export default function ChatComponent() {
// useChat 钩子管理聊天状态和消息
const { messages, sendMessage, status } = useChat();
const [input, setInput] = useState('');
// 处理表单提交
const handleSubmit = (e) => {
e.preventDefault();
if (input.trim()) {
sendMessage({ role: 'user', content: input });
setInput('');
}
};
return (
<div>
{/* 遍历并显示所有消息 */}
<div>
{messages.map(message => (
<div key={message.id}>
<strong>{message.role === 'user' ? 'You: ' : 'AI: '}</strong>
{/* AI 的回复内容会通过 Streamdown 实时渲染 */}
<Streamdown>{message.content}</Streamdown>
</div>
))}
</div>
{/* 用户输入表单 */}
<form onSubmit={handleSubmit}>
<input
value={input}
onChange={e => setInput(e.target.value)}
disabled={status !== 'idle'}
placeholder="说点什么..."
/>
<button type="submit" disabled={status !== 'idle'}>
发送
</button>
</form>
</div>
);
}

In diesem Beispiel ist dieuseChat zurückgegeben messages Das Array wird in Echtzeit aktualisiert, wenn die KI Antworten erzeugt.Streamdown Komponente verpackt message.contentWenn also ein neues Inhaltsfragment (Token) eintrifft, wird es sofort in formatiertes HTML umgewandelt, und der Benutzer sieht, dass Text und Formatierung gleichzeitig erscheinen.

5. komponenteneigenschaften (Requisiten)

Streamdown-Unterstützung react-markdown und fügte einige Optionen speziell für das Streaming hinzu:

• children (string): Die zu rendernde Markdown-Zeichenkette.
• parseIncompleteMarkdown (boolescher Wert, Standardwert. true): Ob nicht geschlossene Markdown-Syntax geparst und wiedergegeben werden soll. Dies ist eine Kernfunktion von Streamdown und es wird empfohlen, sie eingeschaltet zu lassen.
• components (Objekt): Wird verwendet, um den Standard-HTML-Element-Renderer außer Kraft zu setzen. Zum Beispiel können Sie einen benutzerdefinierten <a> Tag-Komponente zur Behandlung von Links.
• remarkPlugins (Array). remark Eine Reihe von Plugins zur Erweiterung der Markdown-Syntax. Die standardmäßige Integration der remarkGfm (für unterstützende Formulare, Aufgabenlisten usw.) und remarkMath.
• rehypePlugins (Array). rehype Eine Reihe von Plug-ins für die Verarbeitung von HTML, mit der Standardintegration des rehypeKatex (für die Darstellung von mathematischen Gleichungen).
• shikiTheme (String, Standardwert. github-light): Shiki-Themenname für die Syntaxhervorhebung von Codeblöcken.

Anwendungsszenario

1. AI Chatbots
   Bei der Interaktion mit großen Sprachmodellen wie GPT werden die Antworten des Modells wortwörtlich oder Wort für Wort generiert. Mit Streamdown können diese fragmentierten Textströme in Echtzeit in vollständig formatierte Absätze wie Codeblöcke, Listen und Zitate umgewandelt werden, was die Unmittelbarkeit und das Erlebnis der Benutzerinteraktion erheblich verbessert.
2. Markdown-Editor für die Zusammenarbeit in Echtzeit
   In Anwendungen, die mehreren Benutzern die gleichzeitige Bearbeitung desselben Markdown-Dokuments ermöglichen, kann Streamdown verwendet werden, um für jeden Benutzer eine Echtzeit-Vorschau zu erzeugen. Selbst wenn die vom Benutzer eingegebene Markdown-Syntax unvollständig ist, zeigt der Vorschaubereich den Stil so korrekt wie möglich an.
3. Live-Vorschau von Online-Dokumenten und Notizanwendungen
   Für jede Anwendung, die ein Markdown-Eingabefeld enthält, wie z. B. ein Blog-Publishing-System, eine Wissensdatenbank oder eine Software für persönliche Notizen, bietet Streamdown ein WYSIWYG-Vorschaufenster in Echtzeit, in dem die Benutzer das endgültige Rendering während der Eingabe sehen können.

QA

1. F: Wie ist Streamdown im Vergleich zu react-markdown Was ist der Hauptunterschied zwischen der
   A: Der Hauptunterschied liegt in der Fähigkeit, "Streams" zu verarbeiten.react-markdown ist darauf ausgelegt, ein vollständiges Markdown-Dokument in einem einzigen Durchgang zu rendern. Streamdown hingegen ist für den Umgang mit unvollständigen, fortlaufend getippten Textströmen optimiert und parst und rendert vorzeitig nicht geschlossene Syntax (wie die **文本), das ist react-markdown Ich kann es nicht tun.
2. F: Warum ist Streaming-Rendering für KI-Anwendungen wichtig?
   A: Bei KI-Anwendungen kann das Warten auf ein Modell, das eine Antwort in voller Länge generiert, Sekunden oder länger dauern. Das Streaming-Rendering ermöglicht es den Nutzern, mit dem Lesen zu beginnen, sobald das erste Wort generiert wird, und die Formatierung in Echtzeit zu sehen, während der Text produziert wird, was ein natürlicheres und unmittelbares Dialogerlebnis schafft, das die Unsicherheit des Wartens vermeidet.
3. F: Welche Markdown-Erweiterungen werden unterstützt?
   A: Es unterstützt von Haus aus GitHub Style Markdown (GFM), einschließlich Tabellen, Aufgabenlisten und Durchstreichen. Es bietet auch Unterstützung für mathematische LaTeX-Formeln (mit KaTeX) und Mermaid-Diagramme über Plugins.
4. F: Was sind die Systemanforderungen für die Nutzung von Streamdown?
   A: Das Projekt erfordert Node.js 18 oder höher und React 19.1.1 oder höher. Um sicherzustellen, dass die Stile korrekt angezeigt werden, müssen Sie außerdem das Stylesheet von Streamdown in Ihre globale CSS-Datei einfügen.