注意(2023年5月2日追記)
この記事のやり方で公開Webアプリを作ってしまうと、本来秘匿すべきAPIキーが公開されてしまいます！
あくまで手元の環境で使用する公開しないWebアプリを作るときのみ参考にしてください
OpenAI platformの記載
Do not share your API key with others, or expose it in the browser or other client-side code.
APIキーを他者に共有したり、ブラウザやクライアントサイドコードで公開しないでください。
今のところHTMLを利用して安全にChatGPT APIを使う方法は見つかっていないのですが、もし良い方法をご存じの方がいらっしゃればぜひ教えてください
よくぞこの記事まで辿り着きました
あなたはHTMLとJavaScriptを使ってChatGPT APIにリクエストを投げたいのにうまくいかず、途方に暮れていらっしゃるのですね。
もう大丈夫
この記事を参考にすれば、あなたのやりたいことがすぐに実現できます！
あなたがChatGPT APIにリクエストを投げることができない理由
きっとこのような記事を参考にされていないでしょうか。
ChatGPT API（gpt-3.5-turbo）を Node.js から使ってみる（公式リファレンスで参照した情報も記載）
それが原因です！！！
HTMLを利用しているあなたは、JavaScriptをフロントエンド（ブラウザ側）で動かそうとしています。一方、Node.jsはJavaScriptをバックエンド（サーバ側）で動かすための実行環境です。
したがって、HTMLを使う場合とNode.jsを使う場合とでは、ChatGPT APIの呼び出し方が異なるのです！！！
HTMLを使うChatGPT APIの呼び出し方はこれ！！！
ユーザーが入力した言葉をChatGPTが受け取り、回答をブラウザに表示するだけの簡単なWebアプリです。
以下のコードをお好みの形に変更してご利用ください！
HTMLコード
<html>
<head>
<meta charset="UTF-8" />
<title>sample</title>
</head>
<body>
<textarea id="request_text" cols="100" rows="10">
</textarea>
<br />
<input type="button" onClick="reply()" value="話しかける" />
<br /><br />
<textarea id="response_text" cols="100" rows="10" disabled>
</textarea>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
<script src="sample.js"></script>
</body>
</html>
JavaScriptコード
const API_KEY = 'ご自身で取得したAPIキーを記載する';
const URL = "https://api.openai.com/v1/chat/completions";
function reply() {
var text = document.getElementById("request_text").value;
async function getResponse() {
try {
const response = await axios.post(
URL,
{
"model": "gpt-3.5-turbo",
"messages": [
{ "role": "user", "content": text }
]
},
{
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${API_KEY}`,
},
}
);
var chatgpt_response = response.data.choices[0].message.content;
$("#response_text").val(chatgpt_response);
} catch (error) {
console.log(error);
}
}
getResponse();
}
※ChatGPT APIの料金体系が気になる方はこちらの記事をご参照あれ！
【ChatGPT API × ラズパイ × LINEbot】ChatGPT君、きょう何着て行く？
さあ、あなたが書いたコードに組み込んでみましょう！
動くようになりましたか？
動くようになった！
参考になった！
という方はいいね・ストック・コメントや、あなたのQiita記事にリンクをつけてください
この世のHTMLとJavaScriptでChatGPT APIを使いたいすべての人が救われますように