許可頂いたので、AIの活用依頼としてDIREC社さんのデジタルARポスターのホームページに「白鳥さちこAI」を追加のやり方を公開する。

デジタルARで有権者へ熱い想いを!!新感覚政治選挙ポスター!! | 株式会社ディレック (direc.co.jp)
選挙活動している時に、ポスター見るだけだとあまり覚えていないし、忙しいから立ち止まれない。

そんなときに、ポスターにVRのQRコードを設定しておくと、スマホで登録なしでAR(拡張現実)の動画や解説が見れる！　という仕組みである。

ポケモンGoとかモンハンnowみたいなもの、と言えばわかりやすいかな。

質問内容を入れて、下のボタンを押すと数秒後に回答が出る。

これ、openAIのAPIで「system」というシステム情報を設定してあげるとできる仕組みだ。
実例としては「関西弁で語って」とか「敬語を使わないで男性口調で」のようにAIに回答の指示ができる。

wordpressでopenAIのAPIを活用する場合は、index.phpとfunctions.phpの2つを修正する。
※実際のコードではなく、すきづきんAIとして変更しているので注意

①functions.php (openAIのAPIを呼び出す)

function my_wp_ajax_val() {
	if (wp_verify_nonce($_POST['nonce'],'my-ajax-nonce-val')) {
		if (isset($_POST['action']) && $_POST['action'] == 'my_ajax_val') {
			$question = sanitize_text_field($_POST['aiQuestion']);
			$apikey = constant('OPENAI_API_KEY');
			$url = "https://api.openai.com/v1/chat/completions";

			$headers = array(
				'Content-Type: application/json',
				'Authorization: Bearer ' . $apikey
			);

			$data = array(
				'model' => 'gpt-3.5-turbo-0125', 
				'messages' => [
					['role' => 'system', 'content' => 'AIは、すきづきんとしてタメ語で回答すること。39歳男性、Youtuber、婚活中でopenAIが大好き'],
					['role' => 'user', 'content' => $question],
				],
				'max_tokens' => 500,
			);

			$ch = curl_init();
			curl_setopt($ch, CURLOPT_URL, $url);
			curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
			curl_setopt($ch, CURLOPT_POST, true);
			curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
			curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);

			$response = curl_exec($ch);
			curl_close($ch);

			$result = json_decode($response, true);
			echo $result['choices'][0]['message']['content'];
		}
	}
	wp_die();
}
add_action('wp_ajax_my_ajax_val','my_wp_ajax_val');
add_action('wp_ajax_nopriv_my_ajax_val','my_wp_ajax_val');

②index.php (ホームページの実装部に入力、出力、送信ボタンを追加

<section class="ai-qa-section">
<h2>すきづきんAIに聞いてみよう</h2>
<form>
<textarea id="aiQuestion" rows="4" placeholder="ここに質問を入力してください"></textarea>
<button id="aiAnswer" style="width:200px">質問する</button>
</form>
<textarea id="result_answer" rows="4" placeholder="" readonly></textarea>
</section>

<script>
const btn = document.getElementById('aiAnswer');
btn.addEventListener('click',function(event) {
	event.preventDefault();
	const input_q = document.getElementById("aiQuestion").value;

	if (input_q) {
		document.querySelector('#aiAnswer').textContent = '数秒お待ちください';
		$.ajax({
			type: 'POST',
			url: '<?php echo esc_url(admin_url('admin-ajax.php',__FILE__)); ?>',
			data: {
				'action' : 'my_ajax_val',
				'aiQuestion' : input_q,
				'nonce': '<?php echo wp_create_nonce('my-ajax-nonce-val'); ?>'
			}
		})
		.then (
			function (data) {
				document.getElementById('result_answer').value = data;
				document.querySelector('#aiAnswer').textContent = '質問する';
			},
			function () {
				alert("読み込めませんでした");
		});
	}
});
</script>

wordpressの場合は、openAIのAPIキーはサーバー変数で追加して、「OPENAI_API_KEY」で取得するのが良い。（そのまま記載するとソース抜かれて色々面倒。

WPでOPENAIを使用する方法 | felicia-ai
wordpressのルートディレクトリにある「wp-config.php」に1行追加する。
define('OPENAI_API_KEY', 'sk-ごにょごにょ');

openAIのキーは以下のURLから、新規でkey作って、そのsk-ごにょごにょを↑で貼り付ければOK。
API keys - OpenAI API

AIを使う上で大事な所はココ！

			'model' => 'gpt-3.5-turbo-0125', 
			'messages' => [
				['role' => 'system', 'content' => 'AIは、すきづきんとしてタメ語で回答すること。39歳男性、Youtuber、婚活中でopenAIが大好き'],
				['role' => 'user', 'content' => $question],
			],
			'max_tokens' => 500,

modelは3.5だけど、4だと高性能な代わりに返答が遅くコストがかかる。
systemの所にAIの人格や設定を記載すればするほど、1回のAPI呼び出しの入力コストが増えるので、多く入れればよいというものではない。
必要最低限の情報かつシンプルに入れておこう。
あとmax_tokenは返答の上限なので、多く回答して欲しくない場合は、「200文字以内で回答する」という感じでsystem側で制限かけても良い。

今回の依頼でwordpressの2つのphpでぐ時動くようになったのだが、APIのように非同期でデータが戻って来て、動的に反映させる仕組みが大変だった。

ajaxの非同期通信を使うのだけど、ズル防止のセキュリティが色々ある。「wp_create_nonce」で一度だけ呼び出しをして、function側の入り口の「wp_verify_nonce」で同じかどうかチェックしている。
送信ボタンを押した時に、質問欄(aiQuestion)が入っていたらwp_create_nonceを呼び出し、戻ってきたときにdata情報を下のテキストに格納する流れだ。

openAIのAPI処理はfunctions.php側で管理していて基本外からは見えない。sanitize_text_fieldでpostに入っているaiQuestionを取得し、OPENAI_API_KEYのサーバー変数を取得する。
あとは必要な情報をセットして、curl_execで呼び出してひたすら待つ。
APIから返答が来たタイミングで ['choices'][0]['message']['content'] をechoしてwp_dieすると、function (data) の部分に結果が入るのでそれをresult_answerのインプットフォームに出力して終わり。
ajaxの非同期通信が自力では動かなかったから、今回はココナラでphpのプロの方に手伝ってもらった。（プロンプトの設定周りは問題なかった）

今回作ったwordpressのAPI連携をコピペすれば、ある程度動くと思うからやってみてほしい。

wordpressでopenAIのAPIを呼び出すには？　まとめ
①function.php にopenAIのAPI設定をして、「system」で性格を設定する
②index.phpに入力出力エリアとボタンを追加して、ajaxで非同期呼び出しをする
③wp-config.phpに「OPENAI_API_KEY」をキーを設定する