HTMLとJavaScriptでChatGPT APIを使いたい人が参考にする記事はこちら #JavaScript

注意(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コード

sample.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コード

sample.js

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を使いたいすべての人が救われますように