@i12posted at 2024-12-10

AIをwebページに組み込む方法について

Q&A

Python HTML AI

解決したいこと

素人質問ですがご容赦ください。

webページ上でAIにチャットを送信し、AIからの返答を表示する仕組みを作りたいです。
webページ自体はVScodeを使ってhtmlとcss、JavaScriptを使って作りました。

しかしAIの組み込み方が分かりません。
chat GPTかGeminiを使おうと思い、APIキーを取得したのですがそれをどう使えばいいのか、いくら調べてもわからず...
今はGemini APIでの組み込み方を知りたいです。

環境はVScodeで、公式リファレンスを見ながらやろうとしても最初の一行に何を書けばいいのかすら分かりません。
また、Pythonで応答を取得できたとしてそれをhtmlの方に反映できるのかもわかりません。

どうかご教示賜れませんか？お願いいたします。

自分で試したこと

1Answer

@YottyPG posted at 2024-12-10

JavaScriptでChatGPTの応答を取得して画面に表示できればOKということであれば、以下の記事が大変参考になると思います。

まずは、こちらの記事などを参考に実装してみてください！

1Like

Comments

@i12
Questioner
回答ありがとうございます。
せっかく回答いただいて申し訳ないのですが、今はGPT APIが使えないのでGemini APIで使えるコードが知りたいです...
説明不足ですみません。
@YottyPG
さきほどの記事内でpostする内容を、
Gemini APIリファレンスのRESTの説明にある内容に書き換えてうまくいかないでしょうか？

axios.post()の引数、curlのオプションはそれぞれ以下の意味だそうです。

axios.post(url, data, [config])
url：リクエストのエンドポイントのURL
data：サーバーに送信したいデータ
config：設定項目で、リクエストの他のパラメータ（ヘッダー、タイムアウト時間など）を指定可能

curl オプション
-X：メソッドの指定（GET, POST, PUT）などなど
-H：記述したヘッダー情報を送信する
-d：記述したデータを送信する

参考：

@YottyPG

こちらのコードで実際に動くことが確認できました。
参考になれば幸いです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset=utf-8>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
</head>

<body>
    <h3>適当なフォーム</h3>

    <p> <textarea rows=5 cols=50 id="txt1"></textarea> </p>
    <p> <button id="btn">送信</button> </p>
    <p> <textarea rows=5 cols=50 id="txt2"></textarea> </p>

    <script>
        const API_KEY = 'API_KEY';
        const URL = "https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=" + API_KEY;

        async function getResponse() {
            try {
                const response = await axios.post(
                    URL,
                    {
                        "contents": [{
                            "parts": [{ "text": $('#txt1').val() }]
                        }]
                    },
                    {
                        headers: {
                            "Content-Type": "application/json"
                        },
                    }
                );
                var chatgpt_response = response.data.candidates[0].content.parts[0].text;
                $("#txt2").val(chatgpt_response);
            } catch (error) {
                console.log(error);
            }
        }

        $('#btn').click(function () {
            getResponse();
        })
    </script>
</body>
</html>

Are you sure you want to delete the question?