コハム

Webクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。

トップ > Javascript > 【初心者向け】驚くほど簡単！ChatGPTをJavaScriptで動かすファーストステップ

【初心者向け】驚くほど簡単！ChatGPTをJavaScriptで動かすファーストステップ

Javascript ChatGpt API

How to Connect JavaScript to ChatGPT: A Beginner’s Guide

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

はじめに

人工知能を統合することで、ユーザー体験を大幅に向上させることができます。この記事では、JavaScriptをOpenAIのChatGPT APIと接続する方法を学び、ユーザーがチャットのようなインターフェースでモデルと対話できるようにします。このシンプルなアプリケーションにより、ユーザーはリアルタイムでメッセージを送信し、応答を受け取ることができます。

前提条件

実装に入る前に、以下のものが必要です：

  • HTMLとJavaScriptの基本的な理解
  • ChatGPTモデルにアクセスするためのOpenAI APIキー

ステップ1：APIキーの取得

  1. サインアップ/ログイン：OpenAIのウェブサイトにアクセスし、アカウントがない場合は作成します。
  2. APIキーの取得：OpenAIアカウントのAPIセクションに移動し、APIキーを生成します。このキーは機密情報として保管してください。

ステップ2：プロジェクトのセットアップ

プロジェクト用の新しいディレクトリを作成し、その中にindex.htmlとapp.jsの2つのファイルを作成します。

ステップ3：HTML構造の作成

基本的なHTML構造をセットアップしましょう。index.htmlファイルには、ユーザー入力用のテキストエリア、送信ボタン、応答表示エリアを含むユーザーインターフェースを作成します。

HTML コード（index.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChatGPT Integration</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #chat-container {
            margin-top: 20px;
        }
        #response {
            margin-top: 10px;
            border: 1px solid #ccc;
            padding: 10px;
            min-height: 50px;
        }
    </style>
</head>
<body>

    <h1>Chat with ChatGPT</h1>
    <textarea id="user-input" rows="4" cols="50" placeholder="Type your message here..."></textarea>
    <br>
    <button id="send-button">Send</button>

    <div id="chat-container">
        <h3>Response:</h3>
        <div id="response"></div>
    </div>

    <script src="app.js"></script>
</body>
</html>

ステップ4：JavaScript機能の実装

次に、ユーザー入力を処理しChatGPT APIと対話するためのJavaScriptコードを実装します。以下のコードでapp.jsファイルを作成します：

JavaScript コード（app.js）

const apiKey = 'YOUR_API_KEY'; // 実際のAPIキーに置き換えてください
const sendButton = document.getElementById('send-button');
const userInput = document.getElementById('user-input');
const responseDiv = document.getElementById('response');

sendButton.addEventListener('click', async () => {
    const userMessage = userInput.value;
    if (!userMessage) return;

    responseDiv.innerHTML = "読み込み中..."; // ローディングメッセージを表示

    try {
        const response = await fetch('https://api.openai.com/v1/chat/completions', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${apiKey}`
            },
            body: JSON.stringify({
                model: "gpt-3.5-turbo",
                messages: [{ role: "user", content: userMessage }]
            })
        });

        const data = await response.json();
        const botReply = data.choices[0].message.content;
        responseDiv.innerHTML = botReply; // ボットの応答を表示
    } catch (error) {
        console.error('Error:', error);
        responseDiv.innerHTML = "応答の取得中にエラーが発生しました。";
    }
});

ステップ5：アプリケーションの実行

  1. APIキーの挿入：app.jsを開き、YOUR_API_KEYを実際のOpenAI APIキーに置き換えます。
  2. index.htmlを開く：ウェブブラウザでindex.htmlファイルを起動します。
  3. ChatGPTと対話：テキストエリアにメッセージを入力し、"Send"ボタンをクリックします。ChatGPTからの応答が下に表示されます。

ステップ6：コードの解説

  • HTML構造：テキストエリア、ボタン、応答表示エリアを含むシンプルなユーザーインターフェースを設定しています。
  • JavaScript機能：Fetch APIを使用してChatGPT APIにPOSTリクエストを送信します。
    • リクエストにはユーザーのメッセージが含まれ、ボットの返信を含む応答を受け取ります。
    • ボットの応答は、ページの指定された領域に表示されます。

セキュリティに関する注意

フロントエンドコードでAPIキーを公開することはリスクがあることを言及しておく必要があります。本番アプリケーションでは、APIリクエストを処理しAPIキーを安全に保つためのバックエンドサーバーの実装を検討してください。Node.jsやPython Flaskなどの技術を使用して、OpenAIのAPIと通信する中間サーバーを作成することができます。

結論

OpenAIのChatGPT APIとJavaScriptを正常に統合し、ユーザーがリアルタイムでモデルとチャットできるようになりました。

©コハム