JavaScriptとOpenAI の事前学習済みモデルでAIチャットボットを作る
yong_asial
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配列に保存された以前のメッセージが含まれています。
モデルがコンテキストと以前の会話を理解できるように、ユーザーとボットからのすべてのメッセージを保存します。
下のスクリーンショットでわかるように、「日本語では? (how about in Japanese?)」、「中国語で (Chinese?)」と言うだけで、ボットは以前の会話に基づいて何をすべきかを正確に認識しています。
リクエストが成功すると、関数はローダーを非表示にし、API レスポンスからレスポンス メッセージを取得し、addMessage 関数を使用してメッセージ コンテナにメッセージを追加し、レスポンス メッセージをメッセージ配列にプッシュします。
showLoader および hideLoader 関数は、それぞれローダー アイコンを表示および非表示にするように定義されています。 この関数は、ローダーの表示 CSS プロパティを変更し、送信ボタンを無効または有効にします。
checkAPIKey 関数は、OpenAI API キーがまだ定義されていない場合に入力するようにユーザーに促すように定義されています。 ユーザーが API キーを入力しない場合、関数は警告メッセージを表示します。
これですべて完了です。
これらを組み合わせると、これをブラウザ上で実行できるようになります。
すべてのソース コードは、https://github.com/monaca-samples/iChatGPT から入手できます。
モバイルアプリとして作りたい場合は、Monaca の無料アカウントにサインアップして、このプロジェクトをインポートできます。 その後、Android デバイスと iPhone デバイスの両方ですぐに実行できます。
まとめ
この記事では、OpenAI を使用して単純なチャットボット Web/モバイル アプリケーションを開発する方法を学びました。これは簡単な紹介であり、OpenAI が提供できるもののほんの一部です。サービスの詳細は、ここから読むことができます。
ハッピーコーディング。
