目次

    アプリの概要

    今回はAIが読みやすい位置で文章を改行してくれるアプリを作ろうと思います。
    私は普段フロントエンドエンジニアとして働いているのですが、WEBページに載せる文章というのはとても厄介です。
    WEBサイトでは文章を改行するとき文末に<br>というタグを挿入しなければならないのですが、
    提供される文章が長いと、「文末を探して改行するのが大変」「画面内に収まりかつ、ユーザーが読みやすい文章になるように改行するのが大変」という問題が出てきます。
    そこで今回は元となる文章をAIに丸投げして、読みやすくなる位置で<br>タグを挿入してもらおうと思います。



    ChatGPTに書いてもらう

    今回はVue3というJavaScriptのフレームワークを使用してアプリを作るのですが、私自身JavaScriptに慣れていないのでChatGPTにアプリの概要を入力し、コードを書いてもらいました。
    また、Open AIのAPIは有料でテストが難しいため、リクルートが提供しているチャットAIのA3RT Talk APIを使用してAPIキーでアプリとやりとりする仕組みをテストしました。
    Talk APIでチャットボットを作る方法は下記の記事を参考にしました。

    https://info.picaca.jp/12331

    ChatGPTにあれこれと質問を重ね、Vue3の教科書を片手にし、実際に作ったものがこちらです。



    上の部分に文章を入力し、変換を押すと下のボックスに出力されます。
    左揃え・中央揃え・右揃えで文章の見た目を確認することができます。
    出力されるとコピーすることができます。コピーした文章はHTMLに貼り付けると<br>タグがついた状態で貼り付けることができます。



    ……となる想定だったのですが、ここで想定外の問題が起きました。
    Talk APIとデータのやり取りをするコードをVue3の中に書いていたのですが、Vue3を静的に開発している状態ではCORSの制約にかかってしまい、APIキーでやり取りをすることができませんでした。
    そこでまたChatGPTに解決策を質問をし、返ってきた案の中からPythonを使ってサーバーを立てる案を採用することにしました。



    Pythonでサーバーを立てる

    ChatGPTにあれこれ聞いて書いたコードがこちらです。



    正直自分の知識不足や理解が及ばないところがありよくわかってない節があります。
    が、原理としてはVue3で入力した文章をPythonを通してOpenAIのAPIに送り、返ってきた文章をVue3に送り表示しているというものです。



    実際に使ってみる

    見事ChatGPTのおかげでTalk APIにデータを送り、返すことができたのでOpen AI仕様に書き換えました。
    今回使うAPIのモデルは「text-davinci-edit-001」と呼ばれるモデルで、文章校正などが得意なモデルだそうです。

    OpenAIのAPIには以下のような命令文を送ります。


    "Format the text with readable line breaks prioritizing the line breaks at sentence boundaries, such as punctuation marks and periods."
    「句読点やピリオドなどの文の境界での改行を優先して、読みやすい改行を使用してテキストをフォーマットします。」

    "Return the response in the same language as the input."
    「入力された言語と同じ言語で応答を返します。」

    "You are only allowed to insert line breaks. Do not modify the original content."
    「改行のみを挿入できます。 元の文章の内容を変更しないでください。」

    "Remove any HTML elements."
    「HTML 要素をすべて削除します。」


    こうすることで、理論上は文章を書き換えることなく読みやすい位置で<br>タグを挿入してくれるはずです。
    ですが、実際には望む結果が返ってくるかどうかは運次第なところがありました。(実際のキャプチャーが撮れませんでした...)
    文章によっては改行せずに返ってきてしまったり、または細かすぎる改行をしてきたりと回答に統一性がなく、APIに送る命令文をさらに工夫しないとアプリとしては使えませんでした。



    まとめ

    今回はOpenAIのAPIを使って改行してくれるwebアプリを作ってみました。
    実際にアプリとして生かすにはまだまだ改善点がありますが、ChatGPTを使用することで簡易的なアプリなら知識が無くても作ることが出来ました。
    趣旨は少し変わってしまいましたが、AIの可能性の片鱗を見ることは出来たと思います。
    AI産業はまだまだ可能性にあふれているので、AIの可能性をどんどん探していきたいと思います。



    最後までお読みいただきありがとうございました。
    また来月のLabでお会いしましょう。
    それではまた。
    PREV
    2023.07.10
    Webサイトのアイコン: UXを向上させるデザイン要素とツール
    NEXT
    2023.08.07
    フロントエンドの強力サポーター Bootstrapの魅力 その2