2023年3月16日

JavaScriptとOpenAI の事前学習済みモデルでAIチャットボットを作る

チャットボットはますます人気が高まっており、顧客サービス、リードジェネレーション、販売など、さまざまな目的で使用できます。人工知能 (AI) の進歩により、チャットボットはかつてないほどインテリジェントになり、より複雑なタスクを実行できるようになりました。 AI 分野のリーディングカンパニーの 1 つ、OpenAIは、最先端の AI ツールとモデルを開発者と企業に提供しています。

OpenAI によって開発された最も印象的なモデルの 1 つは、人間のようなテキストを生成できる機械学習モデルである GPT (Generative Pre-trained Transformer) です。 GPT は大量のテキストデータで事前にトレーニングされており、幅広いプロンプトに対して一貫性のあるコンテキストに適した応答を生成できます。 OpenAI は、GPT-2 や GPT-3 など、いくつかの事前トレーニング済みの GPT バージョンもリリースしており、これまでに最も印象的なチャットボットのいくつかを作成するために使用されてきました。

OpenAI は、開発者や企業がチャットボットを Web サイトやアプリケーションに簡単に統合できるようにするチャットサービスも提供します。このサービスは、事前トレーニング済みの GPT モデルへのアクセスと、チャットボットの動作のカスタマイズと制御を可能にする強力な API を提供します。

このチュートリアルでは、GPT-3 を含む OpenAI の事前トレーニング済みモデルを使用して、チャットボット Web/モバイルアプリケーションを作成します。 OpenAI の自然言語処理機能を活用することで、自然で人間のように感じられる方法でユーザー入力に応答できるインテリジェントなチャットボット (iChatGPT と呼びます) を作成できます。それでは始めましょう！

ステップ 1: HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <!-- monaca resources -->
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <!-- css -->
    <link rel="stylesheet" href="css/style.css">
 <title>iChatGPT</title>
</head>
<body>
 <div class="container messages">
  <!-- Chat messages will be added here -->
 </div>

 <form class="chat-form" id="chat-form">
  <input type="text" class="chat-input" id="chat-input" placeholder="Ask me...">
  <button type="submit" class="chat-send" id="chat-send">
   <img src="send-icon.png" width="20px" height="20px" alt="Send" id="send-img">
  </button>
  <div class="loader"></div>
 </form>

    <!-- javascript -->
    <script src="main.js"></script>
</body>
</html>

コードの各部分が何をするか見てみましょう。

"container messages" クラスを持つ div 要素は、チャットメッセージを保持します。ユーザーからのメッセージとボットからの応答

"chat-form" ID を持つフォーム要素は、ユーザーのチャットメッセージを送信するために使用されます。後で css を適用して修正し、ページの下部に配置します。

"chat-input" の ID を持つ input 要素は、ユーザーがチャットメッセージを入力する場所です。

"loader" クラスを持つ div 要素は、チャットメッセージが送信されているときに読み込みアニメーションを表示するために使用されます。

最後に、script タグには、チャットインターフェースのコードを含む main.js という JavaScript ファイルが含まれています。

HTML コードは以上です。それでは、CSSコードに移りましょう

ステップ 2: CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #f2f2f2;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    flex: 1;
    padding: 20px;
    padding-bottom: 70px !important;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

.message {
    max-width: 80%;
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.user-message {
    align-self: flex-end;
    background-color: #2D81D8;
    color: white;
}

.bot-message {
    align-self: flex-start;
    background-color: #f2f2f2;
}

.chat-form {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background-color: white;
    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.chat-input {
    flex: 1;
    border: none;
    border-radius: 5px;
    padding: 10px;
    margin-right: 10px;
    font-size: 16px;
}

.chat-send {
    background-color: #2D81D8;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 16px;
}

.loader {
    display: none;
    margin-left: 10px;
    margin-top: 10px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #2D81D8;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.container クラスは、チャットメッセージを含む div 要素のスタイルを設定するために使用されます。

.chat-form クラスは、メッセージの送信に使用されるフォーム要素のスタイルを設定するために使用されます。 position プロパティを使用してページの下部に固定位置が指定しています。

最後に、.loader クラスを使用して、bot が考えているときに表示される読み込みアニメーションのスタイルを設定します。

@keyframes spin ルールは、.loader 要素を回転させて回転するアニメーションを作成するために使用されるアニメーションシーケンスを定義します。 spin アニメーションは、animation-iteration-count プロパティのinfiniteを使用して継続して実行されるように設定されています。

@keyframes ルールは、時間の経過とともに要素に適用される一連の CSS スタイルを定義するために使用されます。この場合、2 つのキーフレームを定義します。1 つは 0% で、もう 1 つは 100% です。

transform プロパティは、.loader 要素を回転させるために使用され、アニメーションシーケンスの最後で 0 度から 360 度で終了します。これにより、回転効果が作成されます。

.loader 要素が表示されると、display プロパティが block に設定され、表示されます。非表示の場合、displayプロパティは none に設定され、非表示になります。

それでは、javascript を追加しましょう。

ステップ 3: Javascript

// DOM
const chatForm = document.querySelector('#chat-form');
const chatInput = document.querySelector('#chat-input');
const chatSend = document.querySelector('#chat-send');
const messageContainer = document.querySelector('.messages');
const sendImg = document.querySelector('#send-img');
const loader = document.querySelector('.loader');

// OpenAI API
const OPENAI_MODEL = 'gpt-3.5-turbo'; // gpt-3.5-turbo, gpt-3.5-turbo-0301
const OPENAI_URL = 'https://api.openai.com/v1/chat/completions';
// Input Your OpenAI API Key Here. 
// You can sign up and get API Key from here 
// https://platform.openai.com/account/api-keys
let apiKey = '';
const messages = []; // store previous messages to remember whole conversation

// Function to add a chat message to the container
function addMessage(message, isUser) {
    const messageDiv = document.createElement('div');
    messageDiv.classList.add('message');
    messageDiv.classList.add(isUser ? 'user-message' : 'bot-message');
    messageDiv.textContent = message;
    messageContainer.appendChild(messageDiv);

    // Scroll to the bottom of the chat container
    messageContainer.scrollTop = messageContainer.scrollHeight;
}


// Function to handle user input
function handleUserInput(event) {
    event.preventDefault();
    const message = chatInput.value.trim();
    if (message !== '') {
        messages.push({
            'role': 'user',
            'content': message
        });
        addMessage(message, true);
        chatInput.value = '';
        showLoader();
        // Other request body from here https://platform.openai.com/docs/api-reference/chat/create
        fetch(OPENAI_URL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + apiKey
            },
            body: JSON.stringify({ 
                'model': OPENAI_MODEL,
                'messages': messages
            })
        })
        .then(response => response.json())
        .then(data => {
            hideLoader();
            const responseMessage = data.choices[0].message;
            addMessage(responseMessage.content, false);
            messages.push(responseMessage);
        })
        .catch(() => {
            hideLoader();
            addMessage('Oops! Something went wrong. Please try again later.', false);
        });
    }
}


// Function to show the loader icon
function showLoader() {
    loader.style.display = 'inline-block';
    chatSend.disabled = true;
}

// Function to hide the loader icon
function hideLoader() {
    loader.style.display = 'none';
    chatSend.disabled = false;
}

// Ask user to input his/her API Key
function checkAPIKey() {
    if (!apiKey) apiKey = prompt('Please input OpenAI API Key.');
    if (!apiKey) alert('You have not entered the API Key. The application will not work.');
}

// Add an event listener to the form
chatForm.addEventListener('submit', handleUserInput);

// check
checkAPIKey();

このコードでは、OpenAI APIの定数、モデル名やAPIエンドポイントURLを定義しています。また、APIキーの変数や会話全体を記憶するために以前のメッセージを格納する配列も設定しています。

なお、無料のAPIキーは https://platform.openai.com/account/api-keys から取得できます。

addMessage 関数は、メッセージコンテナにユーザーやボットからの新しいメッセージを追加するように設定されています。この関数では、新しいメッセージ用のdiv要素を作成し、送信者に応じて適切なCSSクラスを追加し、メッセージをメッセージコンテナに追加します。さらに、メッセージコンテナを一番下までスクロールさせて最新のメッセージが表示されるようにしています。

handleUserInput 関数は、ユーザーがメッセージを送信する際に、ユーザー入力を処理するために設定されています。この関数では、まずフォーム送信のデフォルト動作を無効にします。入力が空でない場合、関数はメッセージをメッセージ配列に追加し、addMessage関数を使ってメッセージコンテナにメッセージを追加し、入力フィールドをクリアし、ローダーを表示します。その後、OpenAI APIにリクエストを送信し、応答を受け取ります。リクエストの内容には、モデル名やmessages配列に保存された以前のメッセージが含まれています。