はじめに

openaiAPIって、いいですよね。

今回は、ChatGPT.comからの応答読み込みとGoogle検索機能を持つChrome拡張機能のチャットボットを作成した際の、出力をMarkdown形式に整える過程についてまとめました。実装を進める中で直面した問題や工夫した点を以下に記載します。

Chrome拡張機能の作成の部分についてはまた別の記事で紹介します。

概要

今回は下の写真の様な、Markdown形式ののAPIからのレスポンスについて、HTMLに反映させる方法をまとめます。

環境

言語 : HTML/CSS/JS
ブラウザ：chromeで動作を確認済み

marked.jsの使用

入力されたmarkdown形式のテキストを、HTML形式に変換し、出力してくれるハイパー便利なライブラリがあります。

ライセンスはMITです。

拡張機能の開発にCDNは非推奨らしい

ということでCDNのリンクからアクセスした先のコードをローカルにダウンロードして使うことにしました。

調べた限りではこの方法で大丈夫かとは思いますが、もしNGだった場合はコメントにて指摘していただけると幸いです

参考
https://qiita.com/sey323/items/2c68214f81be7b6d5cc9
https://note.com/churin_1116/n/n9155190204b3

実装手順

1.marked.jsをダウンロード

先ほどのリンク先に飛んだあと、右クリック→名前を付けて保存でmarked.min.jsファイルをダウンロードします。

min.js形式のJSファイルはサイズを小さくし、読み込み速度を向上させたものです。

そのままの形式で正常に使うことができます。

※コードを空のJSファイルにコピペしてもOK

2. プロジェクトへの読み込み

今回はhtmlで拡張機能を作ったため、default_popupであるpopup.htmlに次のコードを追加します。

別の言語だったり、フレームワークを使う場合は適宜読み込んでください。

popup.html

<script src="marked.min.js"></script>

3. 変換

marked.parse()でmarkdownからHTMLを出力することができます。

下のコードではmarked.jsで変換したHTML形式のものを新しく作成した要素に挿入しています。

popup.js

const messageDiv = document.createElement('div');
messageDiv.className = 'message assistant';
messageDiv.innerHTML = marked.parse(message) //大事な部分
chatMessages.appendChild(messageDiv);

👇こういう形式の出力を

以下のコードを使用して、Pythonで「Hello, World!」と出力できます。

```python
print("Hello, World!")
```

このコードを実行すると、コンソールに「Hello, World!」が表示されます。

👇こうしてくれます！！

<p>以下のコードを使用して、Pythonで「Hello, World!」と出力できます。</p>
<pre><code class="language-python">print("Hello, World!")
</code></pre>
<p>このコードを実行すると、コンソールに「Hello, World!」が表示されます。</p>

結果

見た目もすっきりした、使い心地の良いチャットボットが出来ました！

まとめ

以上になります。ライブラリって本当にすごいんだなとおもいました。

技術や倫理、セキュリティの観点から問題がある部分がありましたらコメントで指摘していただけると幸いです！😿