OpenAIのAPIを使ってChatGPT風のHTMLを作成する
ChatGPTは使いやすいものの、利用には時間で制限があるため、OpenAIが提供しているAPIを使ってChatGPTのような機能を持ったものを作成した。これは、OpenAIのPlaygroundのようなものだが、最もシンプルな状態になっており、カスタマイズして使用したい人向けになっている。
OpenAIのAPIとChatGPTとの違い
OpenAIは人工知能に関する研究・開発を行うベンチャー企業であり、複数の人工知能モデルやプラットフォームを提供している。その中でも一つのモデルがChatGPTである。
ChatGPTは、自然言語処理に特化した人工知能モデルで、非常に高い精度と豊富な知識を持ち、自然言語の文章を生成したり、質問に答えたり、要求に応じたタスクを実行することができる。
今回のChatGPT風HTMLで利用するのはOpenAIのAPIのうち、text-davinci-003をデフォルトに設定している。
text-davinci-003は、高い精度と豊富な知識を持ち、自然言語の文章を生成したり、質問に答えたり、要求に応じたタスクを実行することができるようになっている。
ChatGPTと比べると不自然な回答が出てくる率が高いので、自然な言い回しをするためにはパラメータの調整が必要だろう。パラメータを変えながら色々と遊んで試してみるのは良いアイデアだと思う。
ChatGPT風のHTMLのソースコード
下記のPHP、HTML、JavaScriptを組み合わせることで、入力フォームからの入力内容をAjaxを使ってjson形式で送信し、OpenAIで処理された結果を受信し、その結果を表示することができる。
PHPプログラムでHTMLから受け取ったjsonデータをOpenAI APIに送信し、結果をjson形式で表示する処理：
<?php
require_once('./vendor/autoload.php');
$authKeyOpenAI = "XXXXXXXXXXXXXXXXXXX";
try {
$client = OpenAI::client($authKeyOpenAI);
$response = $client->completions()->create([
'model'=> isset($_POST['model']) ? $_POST['model'] : 'text-davinci-003',
'prompt'=> isset($_POST['prompt']) ? $_POST['prompt'] : '',
'temperature'=>isset($_POST['temperature']) ? floatval($_POST['temperature']) : 0.7,
'max_tokens'=> isset($_POST['max_tokens']) ? intval($_POST['max_tokens']) : 1024,
'stop'=>isset($_POST['stop']) ? $_POST['stop'] : 'None',
'top_p'=>isset($_POST['top_p']) ? floatval($_POST['top_p']) : 1,
'frequency_penalty'=>isset($_POST['frequency_penalty']) ? floatval($_POST['frequency_penalty']) : 0,
'presence_penalty'=>isset($_POST['presence_penalty']) ? floatval($_POST['presence_penalty']) : 0,
]);
$json = null;
$json[] = array(
'text'=> $response->choices[0]->text
);
if (isset($json['text'])) {
$json['text'] = '応答がありません。しばらくしてからもう一度試してみてください。';
}
echo json_encode($json);
exit;
} catch (PDOException $e) {
$json = null;
$json[] = array(
'text'=> 'Error:' . $e->getMessage();
);
echo json_encode($json);
exit;
}
?>入力フォーム・結果を表示する部分のHTML:
<form id="openai-form">
<label for="prompt">Prompt:</label>
<textarea id="prompt" name="prompt"></textarea>
<br>
<label for="model">Model:</label>
<input type="text" id="model" name="model" value="text-davinci-003">
<br>
<label for="temperature">Temperature:</label>
<input type="number" id="temperature" name="temperature" value="0.7">
<br>
<label for="max_tokens">Max Tokens:</label>
<input type="number" id="max_tokens" name="max_tokens" value="1024">
<br>
<label for="stop">Stop:</label>
<input type="text" id="stop" name="stop" value="None">
<br>
<label for="top_p">Top P:</label>
<input type="number" id="top_p" name="top_p" value="1">
<br>
<label for="frequency_penalty">Frequency Penalty:</label>
<input type="number" id="frequency_penalty" name="frequency_penalty" value="0">
<br>
<label for="presence_penalty">Presence Penalty:</label>
<input type="number" id="presence_penalty" name="presence_penalty" value="0">
<br><br>
<button type="submit">Submit</button>
</form>
<div id="response"></div>Ajaxで送信・受信を行うJavaScript側の処理:
<script>
document.querySelector("#openai-form").addEventListener("submit", function(event) {
event.preventDefault();
var formData = new FormData(event.target);
var xhr = new XMLHttpRequest();
xhr.open("POST", "json.php", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var json = JSON.parse(xhr.responseText);
document.querySelector("#response").innerHTML = json[0].text;
}
}
xhr.send(formData);
});
</script>最後に
今回、私が作成したのはPHPの部分だけで、HTMLやAjaxに関する部分はすべてChatGPTが自動生成したものである。これが人工知能の恐るべき時代の成果であると言えるだろう。
関連記事
" data-srcset="'https://ubun2m.com/wp-content/uploads/2023/01/Screenshot-2023-01-22-at-22.18.14-400x378.jpg 150w, https://ubun2m.com/wp-content/uploads/2023/01/Screenshot-2023-01-22-at-22.18.14-400x378.jpg 720w" sizes="(max-width: 360px) 100vw, 360px"/>
" data-srcset="'https://ubun2m.com/wp-content/uploads/2022/06/Screenshot-2022-06-25-at-19.20.05.png 150w, https://ubun2m.com/wp-content/uploads/2022/06/Screenshot-2022-06-25-at-19.20.05.png 720w" sizes="(max-width: 360px) 100vw, 360px"/>
" data-srcset="'https://ubun2m.com/wp-content/uploads/2022/06/4101C908-9D83-4337-ABAB-6054846839C6_1_105_c-400x312.webp 150w, https://ubun2m.com/wp-content/uploads/2022/06/4101C908-9D83-4337-ABAB-6054846839C6_1_105_c-400x312.webp 720w" sizes="(max-width: 360px) 100vw, 360px"/>