流行りからは少し落ち着きを見せたところ？かと思いますが、世間では賛否両論が巻き起こっています。
そんな人生の一時を味わうことが出来て、これまた光栄という感じでしょうか。
ChatGPTをWordPressへ
話題に挙がっていた OpenAIへの出資ニュースからはや3ヶ月が経とうとしています。
が、しかし世の中が早いのか、我がのんびり屋なのか、既に出遅れ感が漂っている感じすらしています。
AIビジネス。これからどうなるかは誰もが予測しか出来ないわけですが、私の個人的な意見も一先ずは差し控えて、ここは前向きに捉えて取り組んでみることにしてみます。
お気付きの方はいらっしゃるかと思いますが、ページにChatGPTからの応答を組み込んでみました。
結論的なことを先に書いてしまいますが、下記に今回自作したプラグインからの返答の「セールストーク」を受けるようにしています。
この様な感じで、ブログ文中にも、問い合わせに対するブロック定義さえ準備しておけばあっさりと組み込めます。
実際の挙動をみてみると、やはりスゴイと感じます。
これまで、この様な文言をローテーションで表示したければ作文のテンプレートを予め用意しておいて順番に表示する等の対応が必要だったでしょう。
しかし、ChatGPTへ問い合わせると、文脈もそこそこにまるで人間が考えて書いてくれたような返答が得られます。
現時点では、API応答に多少の時間がかかる事は大目に見ても、これはスゴイ時代になってしまったなと言わざるを得ません。
ある意味恐怖すら感じます。
あの映画「ター○ネー○ー」の様な世界に突き進んでしまうキッカケかと思うと、それは夜も眠れなくなってきます。
ウィジェットかプラグインか
WordPressへの組み込み方法は色々ありますが、既にChatGPT系のプラグインがマーケットに出てきてますね。
こういった話題へ追従する労力を惜しまないエンジニアの方々には頭が下がります。
ChatGPTは初版 2022年11月30日からすると、わずか5ヶ月程度しか経過していないにも関わらず、昨今では一番の注目株でしょうね。
WordPressのプラグインでは、AI Engine というのが人気が有るようです。私はまだ触ってはいませんが、この初版は2022/12/27 にリリースされ、モリモリにバージョンアップされている様子です。評価も高いですね。
といったことをチラリと横目に、自作してしまいたいのが私の悪い癖です。
おそらく既成プラグインを使った方が懸命に物事を成し遂げられるのは承知の上なのですが、ChatGPTのAPI仕様がどんな感じなのかを知りたいことも有り、今回は自作を試みてみました。
まず最初に行ったことは、Web U/I のChatGPTを使って問い合わせることです。
これは、いとも簡単に答えが引き出せます。
「ChatGPTをWordPressで使うには？」って感じでしょうか。
そうするとアレヤコレヤと、ChatGPTは回答をしてくれます。
基本的にはこの戦法で物事を組み立てられます。
“あー、「先輩」には聞くことはありません！” という会話がどこからか聞こえてきそうです。（笑）
ウィジェット
得意なところで、JavaScriptにてフロントエンドで済ませようと、ウィジェットに fetch 関数、呼び出しロジックを実装し、ChatGPTへの接続応答を得る形を取りました。
ここでは、全てをJavaScriptで済ませているため、これではAPI key が実質的には露出してしまいます。
言ってみれば、公開状態となってしまっているわけです。
注意書きには、この事に触れられていて、プラグイン化した方が良さそうなため、順を追って換装しました。
| Do not share your API key with others, or expose it in the browser or other client-side code. In order to protect the security of your account, OpenAI may also automatically rotate any API key that we’ve found has leaked publicly. |
Google API のように、呼び出し元制限がかけられる機能が有るといいんですが、次第に出来てくるんですかね。
プラグイン
ということで、自作のプラグインを作成する事にしたわけですが、そもそもこのChatGPTのAPIは無料の状態では応答が遅い感じがします。
※ 定かでは有りませんが低速だった原因は、問い合わせ時のpromptが多かったのが原因かもしれません。無料（Payment methods で決済情報を登録しない状態）でも速度は変わらない可能性も有ります。
非同期実行は必須要件ですが、PHP側へ API key を含めたコアを実装し、フロントエンドからはJavaScriptでアクセスする仕様としました。
最初の頃に試した限りでは、10秒〜20秒程度もレスポンスが返ってこなかったため、これでは遅すぎると思い、有料化したところ、かなりの速度アップが行われた様子です。
この応答速度は、prompt と tokens に依存しているものの実用的に使うには有料化した方が良さそうです。
公式サイトの価格表では、1,000 tokens で $0.002 となっています。
| Model | Usage |
| gpt-3.5-turbo | $0.002 / 1K tokens |
サービスが混み合っているせいか、私の場合は直ぐに GPT-4 が使えず申し込み制になっていました。
幸いにも現時点では、gpt-3.5-turbo を実装したわけですが、GPT-4 はもっと高額なようです。
文章量やレスポンス量に依存するため、一概には言えませんが、当サイトの場合はアクセス数がそれほどないこともあり、プラグイン作成のためにバンバン検証していても、一日 $1.0 〜 $2.0 程度の課金でした。
Usageページから、リクエスト数に応じたtokensがどの様な積み上げになっているのかが全て開示されているため、この辺りは安心便利ですね。
Usage limits という機能もあり、不意のアクセス過多による課金上限も設定できます。
ということで、プラグイン化して表示している箇所は下記ですが、それぞれの画像に表示されてキャッチフレーズ等は、リアルタイムにChatGPTが返答してきているものです。
- ブログページ (各ブログ記事は共通パーツ）
ページ最後辺りの実装です。セールストークを組み込んでいて、恥ずかしいのであえてキャプチャは取りません。。。
元にしている文章は同じだとしても、続けて2つと同じ返答を得ることはなさそうです。
※ temperature の値に依存しています。
ChatGPTへの問い合わせ内容
主には、3つの種類のブロックを対象にレスポンスを受けたかったため、下記のような問い合わせをしています。
- キャッチフレーズ
- 概略
- セールストーク
これらを元に、下記の様に問い合わせています。
1.（TOPページ、ブログの上段ブロック）
| “write the tagline for the following sentence using Japanese.” +（ページ内容） |
2.（ブログの下段ブロック）
| “explain the outline for the following sentences using Japanese.” +（ページ内容） |
3.（写真撮影サービスの下段ブロック、About k.works）
| “suggest a sales pitch based for the following sentences using japanese.” +（ページ内容） |
上記の3つのパターンをコアに実装し、受け取り対象の要素（id）がページ内に有る場合にはChatGPTへ問い合わせして返答を受けるようにしました。
ページ内容はそれぞれ異なるため、返答の元になる素材としてChatGPT側へ提供します。
この問い合わせは、特に英文にする必要もなく日本語でも良いのですが、なんとなく日本語での指示は不明瞭に受け止められている様子があったので、英文にして指示しています。（ページ内容、はもちろん日本語です）
※ その後、これらの問い合わせ文章は日本語化いたしました。
ChatGPTは多言語化対応がされているため、変更がしやすく学習してくれるため、やはり日本語での問い合わせが良いかと思います。
APIへ引き渡す時に、これらのtokensが最大限度を超えるとエラーとなり、正常返答が得られないため、ページ内容のテキストは下記のように切り捨てています。
text.substring(0,2000);
また、要求する際の max_tokens パラメータ（数値）と合わせて、4,096を超えられない仕様のため、この辺りを制御を考えて問い合わせする必要が有るようです。
マニュアルには下記の様に記載があり、gpt-3.5-turbo では 4,096 tokensまで対応しています。
https://platform.openai.com/docs/api-reference/completions/create
| The token count of your prompt plus max_tokens cannot exceed the model’s context length. Most models have a context length of 2048 tokens (except for the newest models, which support 4096). |
テキスト切り捨ての影響なのかは定かでは有りませんが、稀に文脈がおかしかったりすることが有りました。この辺りはまだ改善中なんですかね。
また、temperature というパラメータを 0-2 の範囲で設定するのですが、この設定値により得られる返答にバリエーションを持たせることが出来ます。
スゴイとしか言いようが有りませんが。。。
| What sampling temperature to use, between 0 and 2. Higher values like 0.8 will make the output more random, while lower values like 0.2 will make it more focused and deterministic. |
あとは、ChatGPT の U/I 風にキャレット点滅を実装してありますが、これはあくまでもフロントエンド側での見せ方の対応です。
AIロボットが書いている風？を醸し出していますが、内部的にはAPI返答時には文章は瞬時に全文受けています。
ChatGPTの実力はいかに？
いつも新しいものを触るときは寝る間も惜しんで追求してしまう性分ですが、これは確かにヤバい感じがしますね。
世界の天才たちは私のような凡人には考えもつかないことを考えていそうです。
言い換えれば、凡人にも触りやすいサービスであるからこそ、実力はスゴイということにもなるんでしょうね。
下記の記事を書いた時に試した ChatGPTですが、その時は単なるチャットボットだという感覚から抜けておらず、今回、APIを使ってみて仰天という感じですね。
実はChatGPTとは別に、画像生成サービスもチャレンジしているのですが、これはこれでもう時代が大きく変わってしまう予感さえします。
カメラマン必要？的な。。。🫢
良い意味か悪い意味かは置いておきまして、潮目が変わるとき、そんな感じでしょうか。
ChatGPTネタはまだ出てくるとは思いますが、これらに関する内容はまた追って綴っていきたいと思います。
WordPressにChatGPTを組み込みたい方へ
独自のカスタムプラグインの組み込みも行えます。
お気軽にお問い合わせください。
記事の内容が古くなっているものもあり、適宜アップデートされる場合がございます。