実装
ChatGPTチェック画面の作成
画面
ChatGPTにチェックしてもらう画面を作成します。
以下のファイルを作成します。
\wp-gpt-support
└─\pages\page_check.php
HTMLを以下のようにコーディングします。
<?php
if (!defined('ABSPATH')) exit;
/**
* ページ: チェック画面
*/
function page_wp_gpt_support_check()
{
// 指示文
$direction = '以下の文章に、誤字・脱字があれば教えて';
?>
<div class="wrap">
<h1>WP GPT Support</h1>
<form action="#" method="post" id="form_gpt_support">
<?php wp_nonce_field('wp_gpt_support_check', 'wp_gpt_support_check_nonce'); ?>
<table class="form-table">
<tr valign="top">
<th scope="row"><label for="">記事ID</label></th>
<td><input type="number" name="post_id" value="" /></td>
</tr>
<tr valign="top">
<th scope="row">指示文</th>
<td><textarea name="direction" rows="5" cols="50"><?php echo esc_textarea($direction); ?></textarea></td>
</tr>
</table>
<input type="submit" id="gpt_support_submit" class="button-primary" value="GPTチェック" />
</form>
<table class='gpt-table'>
<thead>
<tr>
<th>記事</th>
<th>ChatGPT</th>
</tr>
</thead>
<tbody>
<tr>
<td id="post_contents"></td>
<td id="gpt_message"></td>
</tr>
</tbody>
</table>
</div>
<?php
}
wp_nonce_fieldについては、CSRFの対策のために記述しています。
Tableタグについては、ChatGPTの回答結果を表示するために用意しました。
JavaScript
ChatGPTのAPIを呼び出し応答が返るまでの時間がかかりますので、ボタンをクリックした後は非同期通信にします。
以下のファイルを作成します。
\wp-gpt-support
└─\js\js_check.php
以下のようにコーディングします。
<?php
if (!defined('ABSPATH')) exit;
/**
* JS: チェック画面
*/
add_action(
'admin_footer-gpt-support_page_wp_gpt_support_check',
function () {
?>
<script>
jQuery(document).ready(function($) {
$('#form_gpt_support').submit(function(event) {
event.preventDefault();
const postData = this;
$('#post_contents').text('');
$('#gpt_message').text('');
// 非同期で処理を呼び出し
const fd = new FormData(postData);
fd.append('action', 'wp_gpt_support_check');
$.ajax({
type: "POST",
url: "<?php echo admin_url('admin-ajax.php'); ?>",
dataType: 'json',
data: fd,
processData: false,
contentType: false,
}).done(function(data, textStatus, jqXHR) {
// 結果を反映
$('#post_contents').text(data['post_contents']);
$('#gpt_message').text(data['gpt_message']);
}).fail(function(data, status, error) {
alert(error);
});
return false;
});
});
</script>
<?php
}
);
以下の関数と引数を指定することにより、特定の画面にのみJavaScriptを埋め込むことができます。
add_action(
'admin_footer-gpt-support_page_wp_gpt_support_check',この引数については、メニューの追加処理で確認することができます。
// チェック画面
$menu = add_submenu_page(
'wp_gpt_support',
'チェック',
'チェック',
'manage_options',
'wp_gpt_support_check',
'page_wp_gpt_support_check'
);
echo $menu;非同期通信処理
JavaScriptでは、Ajaxを利用して非同期通信を行う処理にしました。
次に、呼び出されるサーバーサイドの処理を実装します。
JavaScriptでは以下のようにActionを指定しました。
fd.append('action', 'wp_gpt_support_check');以下のファイルを作成します。
\wp-gpt-support
└─\ajax\gpt_support_check.php
指定したActionに対する処理を作成します。
処理の先頭では、権限とCSRFに対するチェックを行っています。
<?php
if (!defined('ABSPATH')) exit;
/**
* Ajax: ChatGPT チェック
*/
add_action('wp_ajax_wp_gpt_support_check', 'ajax_wp_gpt_support_check');
function ajax_wp_gpt_support_check()
{
// 権限
if (!current_user_can('manage_options')) {
return;
}
// CSRF
check_ajax_referer('wp_gpt_support_check', 'wp_gpt_support_check_nonce');
$post_id = $_POST['post_id'];
$direction = $_POST['direction'];
// 記事取得
$page = get_post($post_id);
$contents = strip_tags($page->post_content);
$contents = preg_replace('/(\n)+/us', '$1', $contents);
if (empty($contents)) {
echo wp_json_encode([
'post_contents' => 'コンテンツがありません',
]);
wp_die();
}
try {
// ChatGPTに問い合わせ
$gpt_role = 'あなたはブログの編集者です。';
$to_send = $direction . '\n\n' . $contents;
$response = chat_gpt($gpt_role, $to_send);
if (isset($response->error)) {
echo wp_json_encode([
'post_contents' => $contents,
'gpt_message' => $response->error->message
]);
die();
}
$message = $response->choices[0]->message->content;
echo wp_json_encode([
'post_contents' => $contents,
'gpt_message' => $message,
]);
die();
} catch (Exception $e) {
echo wp_json_encode([
'post_contents' => $contents,
'gpt_message' => $e->getMessage()
]);
die();
}
}記事IDを受け取り、記事本文を取得します。
記事本文と指示文をChatGPTに問い合わせする処理をコーディングしています。
次に、ChatGPTを呼び出すための関数を作成します。
直接APIを呼び出します。
/**
* ChatGPT API
*/
function chat_gpt($system, $user)
{
// ChatGPT APIのエンドポイントURL
$url = "https://api.openai.com/v1/chat/completions";
// APIキー
$api_key = get_api_key();
if (empty($api_key)) {
throw new Exception('No API key');
}
// ヘッダー
$headers = array(
"Content-Type: application/json",
"Authorization: Bearer $api_key"
);
// パラメータ
$data = array(
"model" => "gpt-3.5-turbo",
"messages" => [
[
"role" => "system",
"content" => $system
],
[
"role" => "user",
"content" => $user
]
]
);
// cURLセッションの初期化
$ch = curl_init();
// cURLオプションの設定
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
// タイムアウトを設定
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 120);
curl_setopt($ch, CURLOPT_TIMEOUT, 120);
// リクエストの送信
$response = curl_exec($ch);
// エラーを取得
$error_no = curl_errno($ch);
$errors = curl_error($ch);
// cURLセッションの終了
curl_close($ch);
if ($error_no !== 0) {
throw new Exception($errors);
}
return json_decode($response);
}
CSS
チェック画面のCSSを適用します。
以下のファイルを作成します。
\wp-gpt-support
└─\css\styles.css
結果を表示するためのTableタグのスタイルを定義します。
table.gpt-table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin-top: 20px;
}
.gpt-table th {
padding: 10px;
background: #d1d1d1;
border: solid 1px #778ca3;
}
.gpt-table td {
padding: 10px;
background: #fff;
border: solid 1px #778ca3;
width: 50%;
white-space: pre-wrap;
vertical-align: top;
}各処理の呼び出し
wp-gpt-support.phpに以下を追記します。
...
// チェック画面
require_once(plugin_dir_path(__FILE__) . 'pages/page_check.php');
require_once(plugin_dir_path(__FILE__) . 'js/js_check.php');
require_once(plugin_dir_path(__FILE__) . 'ajax/gpt_support_check.php');
// 設定画面
require_once(plugin_dir_path(__FILE__) . 'pages/page_settings.php');
/**
* CSSの読み込み
*/
function wp_gpt_support_styles()
{
wp_enqueue_style(
'wp_gpt_support_styles',
plugin_dir_url(__FILE__) . 'css/styles.css',
array(),
GPT_SUPPORT_VERSION
);
}
add_action('admin_enqueue_scripts', 'wp_gpt_support_styles');さらに実装
本記事では、最低限の実装を行いました。
ちなみに私はさらに以下の機能を実装しました。
他サービス
他にもAIの便利なサービスがあります。
ChatPDFについては、以下の記事を参考にしてください。
AIにアプリを作ってもらえる、GPTAppです。
WebChatGPTでWebの情報を回答してもらうことができます。
さいごに
今回はChatGPTのAPIを利用し、連携するWordPressのプラグインを開発しました。
ぜひ試してみてくださいね。
他にも私のブログで、AIについて解説している記事がありますのでご覧ください。
＼オススメ／
リンク
リンク
リンク
コメント