OpenAIのレスをHTML表示

Sat, 14 Oct 2023 02:31:28 +0900

前回で作成したOpenAIチャットのデモはいろいろと改善点が盛りだくさんです。その１つは、OpenAIからのレスはテキストなのですがMarkdownの形式で来ます。今回はこの表示をHTMLに変換します。

OpenAIからのレス

OpenAIからのレスは以下のようなテキストできます。

 2023年10月4日以降の日本の祝日は以下の通りです：

- 体育の日（スポーツの日）：10月9日
- 文化の日：11月3日
- 勤労感謝の日：11月23日

12月から年末までの祭日はありません。

MarkdownのWikiを参照すると、上で使用されているハイフン（‐）は、順序無しリストのアイテム、HTMLでは

の使用ということになります。しかし、これを無視すると以下のような表示（前回）となります。無視しないでHTMLに変換して、のように表示したいです。

ソースコード
今回の機能を追加したソースコードは、前回のOpenAIチャットをもとにして違うgitブランチ（chat-openai-markdown）としました。レポジトリはこちらですが、すでにデモのソースコードをインストールしているなら、以下でスイッチできます。
```
$ git fetch
$ git checkout chat-openai-markdown
```
を実行してブランチをゲットできます。前回のブランチのchat-openaiとの差分は以下です。
```
$ git diff chat-openai --name-status
M       package-lock.json
M       package.json
M       resources/js/components/ChatMessages.vue
```
MarkdownのテキストからHTMLの変換のために、今回はmarkdown-itのパッケージが必要です。それゆえに以下の実行が必要です。
```
$ npm install
```
最後に、前回と同様に以下のコマンドを実行すると、ブラウザでテストが可能です。
```
$ npm run build
$ php artisan serve
```
markdown-itをChatMessages.vueに取り込む
差分で見たように、今回コードの変更はChatmessages.vueのみです。サーバー側ではなくフロントエンドでHTML変換です。以下のコードで変更の部分にコメントしました。非常に簡単です。
ChatMessages.vue
```js // 以下は変換後のスタイル設定
```
以下は、コードのMarkdownをHTML変換した例です。

<a href="markdown2.png"><img src="markdown2.png" alt="" width="932" height="458" class="alignnone size-full wp-image-8814" /></a>
```

Markdown on ララジャパン

OpenAIのレスをHTML表示

OpenAIからのレス

ソースコード

markdown-itをChatMessages.vueに取り込む