[a-blog cms]ChatGPTがエントリーのタイトルを考えてくれる！

前書き

今回は「a-blog cms LIVE Vol.14」で発表させていただきました、ChatGPTにa-blog cmsのタイトルを考えてもらうシステムの解説をしようと思います。

本題

POSTモジュールの作成

a-blog cmsのPOSTモジュールを使って開発を行います。 POSTモジュールは、PHPによる動作を拡張できるようなモジュールになっています。

POSTモジュールの基本と雛形

アプリケーションのルートパスから、以下のディレクトリにファイルを作成して利用していきます。

/extension/acms/POST/

ただa-blog cms には、デフォルトでPOSTモジュールが使えるようにSample.phpがあるので、それを参考に進めていきます。

まず、ファイル名を「Gpt.php」に変更します。 このファイル名はなんでもいいのですが、POSTモジュールにアクセスする際に必要な名前になりますので、わかりやすい名前にしておきましょう。

以下には、サンプルコードを載せておきます。

function post()
    {
        $API_URL = "https://api.openai.com/v1/chat/completions";
        $APP_MODEL = "gpt-3.5-turbo";
        $API_KEY = "sample-key";

        $question = $this->Post->get("question");
        $sentence = $this->Post->get("sentence");
        $messages = $this->getPostData($question, $sentence);

        $headers = [
            "Content-Type: application/json",
            "Authorization: Bearer {$API_KEY}"
        ];

        $postData = [
            "model" => $APP_MODEL,
            "messages" => $messages
        ];

        $json = json_encode($postData);

        $res = null;
        try {
            $ch = curl_init();
            $options = [
                CURLOPT_URL => $API_URL,
                CURLOPT_RETURNTRANSFER => true,
                CURLOPT_HTTPHEADER => $headers,
                CURLOPT_POSTFIELDS => $json
            ];
            curl_setopt_array($ch, $options);
            $res = curl_exec($ch);
        }
        catch (Exception $e) {
            echo $e->getMessage() . "\n";
        }

        $parse = json_decode($res);
        $content = $parse->choices[0]->message->content;
        $arr = $this->getMold($content);

        return Common::responseJson($arr);
    }


    public function getPostData(string $question, string $sentence) {
        $messages = [
            [
                "role" => "system",
                "content" => "あなたには優秀なブロガーです。"
            ],
            [
                "role" => "assistant",
                "content" => $sentence
            ],
            [
                "role" => "user",
                "content" => "この文章の" . $question . "を、マークダウンのリスト形式で5つ考えてください。"
            ]
        ];
        return $messages;
    }

    public function getMold(string $content) {
        $exArr = explode("\n", $content);

        $moldArr = [];
        foreach($exArr as $text) {
            $preg = preg_replace("/(^[0-9]{1,}. |^- )/", "", $text);
            $moldArr[] = trim($preg);
        }

        return $moldArr;
    }

ChatGPTとの通信

サンプルコードの説明をしていきます。 流れとしてはまず、get()関数を利用してformからデータを受け取ります。

$this->Post->get()

そして、ChatGPTに送信するためのデータを作成していきます。 サンプルコードでは自作したgetPostData()を使って、ChatGPTに送信したい内容を配列に格納しています。

ここからはChatGPTの使い方になるのですが、ChatGPTには役割(role)があり、その役割はsystem/assistant/userの三つがあります。 サンプルを例として説明していきます。

• systemには役を与えることができ、より正確な回答を求めることができます。 今回はタイトルを考えてもらうものですので、ブロガーを与えています。 試していないですが、記者とかでもいいかもしれませんね。

• assistantはChatGPTの回答が含まれます。ただ、以前の会話を保存する際にも扱われますので、今回の場合はタイトルを考えて欲しいとお願いをするので、その前に文章を送っておく必要があります。ですので、　assistantを利用して文章を格納します。

• userはChatGPTに会話したい内容を入れます。ここで一つポイントになるのが、「タイトルを考えてください」だけだと回答の仕方にバラつきがあり、返ってきたデータから必要な情報を切り取ことが難しくなってきます、ですので「マークダウンのリスト形式でタイトルを考えてください」とお願いすることにします。

あとはPHPの話になるので端折りますが、簡単にゆうと以下の手順になっています。

1. curlでChatGPTと通信
2. 返ってきたデータはマークダウンのリスト形式になっているので「-」を切り取り配列にする
3. JSON形式でreturnする。

JavascriptでPOSTモジュールを利用する

ここでは、先ほど作成したPOSTモジュールをJavscriptで利用するための注意点を一つ説明します。

POSTモジュールを利用するためには、formのsubmitで[name="ACMS_POST_*"]が必要になります。

「*」には初めに説明した、ファイルの名前を利用する部分になります。POSTモジュールのファイル名を入れてください

しかし、このままでは画面が遷移するただのformのPOSTになって検索するたびに画面のリロードが起き、使いづらいものになっていしまいます。 ですので、非同期処理を行うためのfetch関数やライブラリを使って、[name="ACMS_POST_*"]をjavascriptで送ってあげてください。 値はなんでも大丈夫です。 あとはPOSTモジュールから返ってきたデータがJSON形式で返ってくるので画面表示してあげればいいです。

後書き

最近は技術の進歩が早く、ChatGPTを利用したサービスや、競合サービスのGoogle Bardも出てきています。技術者も、AIを利用して開発速度を上げるためのツールとして使っていくことも必須になってくるのかなと思います。

---