はじめに
最近巷でChatGPTが話題になっていますが、ChatGPT APIはご存知でしょうか。
簡単に言うと、ChatGPTの機能が自分で作成したサーバーで利用できるAPIです。
今回は、ChatGPT APIとAWSのEC2を利用して簡易的なChatBotアプリを作っていきます。
用語解説
・AWS：Amazonが提供するクラウドサービス
・EC2：AWS上に立てる仮想マシン
・APIキー：ChatGPTを利用するためのコード
必要なもの
以下に必要なものを列挙します。
・AWSのアカウント
・ChatGPTのアカウント
・ChatGPTのAPIキー
・作業用のPC
AWSアカウントとChatGPT APIキーについては、利用するためにクレジットカードの登録が必要です。
AWSでEC2を作成する
作成したAWSアカウントでAWSにログインします。
ログインURLはこちら
EC2サービスに移動し、EC2を作成します。
EC2の名前を決め、OSイメージをAmazon Linuxを選びます。
インスタンスタイプを「t2micro」を選択します。
キーペアを作成し、Desktopに保存します。
「インターネットからのHTTPSトラフィックを許可」と「インターネットからのHTTPトラフィックを許可」にチェックを入れます。
内容を確認し、画面右下の「インスタンスを起動」をクリックします。
しばらくするとEC2が起動します。
パブリックIPv4「52.73.181.216」のアドレスをメモします。
AWSでの操作は以上です。
EC2に接続する
作成したEC2に接続します。
本手順ではMac端末を利用するので、ターミナルアプリから接続します。
Windows端末の場合はTeraterm等のターミナルアプリをインストールし接続してください。
ターミナルを立ち上げます。(下のアイコン)
「cd Desktop」コマンドでデスクトップに移動します。
dokata@dokatanoAir ~ % cd Desktop「ls」コマンドでAWS上で作成した「dokata.pem」が存在することを確認します。
dokata@dokatanoAir Desktop % ls
dokata.pem 「chmod」コマンドで「dokata.pem」の権限を変更します。
dokata@dokatanoAir Desktop % chmod 600 dokata.pem「dokata.pem」を利用してEC2に接続します。
「dokata.pem」と「52.73.181.216」はAWS上で作成したものを入力します。
dokata@dokatanoAir Desktop % ssh -i dokata.pem ec2-user@52.73.181.216以下の質問をされるので、「yes」を入力します。
Warning: Identity file dokata.pem not accessible: No such file or directory.
The authenticity of host '52.73.181.216 (52.73.181.216)' can't be established.
ECDSA key fingerprint is SHA256:2hKsFfMaW3iBTAHrcqFtvPYeowIuvtFYrSPFeOYFfbY.
Are you sure you want to continue connecting (yes/no/[fingerprint])? yesEC2にログインすることができました。
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
Warning: Permanently added '52.73.181.216' (ECDSA) to the list of known hosts.
, #_
~\_ ####_ Amazon Linux 2023
~~ \_#####\
~~ \###|
~~ \#/ ___ https://aws.amazon.com/linux/amazon-linux-2023
~~ V~' '->
~~~ /
~~._. _/
_/ _/
_/m/'
[ec2-user@ip-172-31-29-19 ~]$ ChatGPT APIキーを取得する
こちらにアクセスし、APIキーを取得します。
右上のアイコンを押し、「View API Keys」を押します。
左の項目の「API Keys」を押し、「Create new secret key」を押します。
※クレジットカードを登録していないと使えないので「Billing」から登録をしてからKeyを取得します。
チャットボットを構築する
今回は、html・CSS・Pythonを利用してチャットbotを構築します。
構築に必要なPythonモジュールをインストールします。
[ec2-user@ip-172-31-29-19 ~]$ sudo curl -O https://bootstrap.pypa.io/get-pip.py
[ec2-user@ip-172-31-29-19 ~]$ sudo python3 get-pip.py
[ec2-user@ip-172-31-29-19 ~]$ sudo pip3 install Flask
[ec2-user@ip-172-31-29-19 ~]$ sudo pip3 install openaiまずは作業ディレクトリを作成します。
[ec2-user@ip-172-31-29-19 ~]$ mkdir /home/ec2-user/chatbotchatbotディレクトリに移動します。
[ec2-user@ip-172-31-29-19 ~]$ cd chatbot/Pythonファイル「app.py」を作成します。
[ec2-user@ip-172-31-29-19 ~]$ vi app.py「i」ボタンを押し、入力モードにします。
app.pyに記述する内容は以下の通り。
「esc」ボタンを押し、「:wq!」を入力しエンターを押します。
from flask import Flask, render_template, request, jsonify
import openai
app = Flask(__name__)
openai.api_key = "作成したAPIキー"
@app.route('/')
def index():
return render_template('index.html')
@app.route("/send-message", methods=["POST"])
def send_message():
user_input = request.json.get("user_input")
# ユーザーのメッセージをChatGPTに送信
prompt = f"ユーザー: {user_input}\nボット:"
response = openai.Completion.create(
model="text-davinci-003",
prompt=prompt,
temperature=0.7,
max_tokens=150
)
# ChatGPTの応答を取得
bot_response = response.choices[0].text.strip()
return jsonify({"bot_response": bot_response})
if __name__ == '__main__':
app.run(host='0.0.0.0', port=80)CSSファイルとHTMLファイルを配置するディレクトリを作成します。
[ec2-user@ip-172-31-29-19 chatbot]$ mkdir templates
[ec2-user@ip-172-31-29-19 chatbot]$ mkdir static
[ec2-user@ip-172-31-29-19 chatbot]$ cd templatesPythonファイル「app.py」を作成します。
[ec2-user@ip-172-31-29-19 templates]$ vi index.html「i」ボタンを押し、入力モードにします。
index.htmlに記述する内容は以下の通り。
「esc」ボタンを押し、「:wq!」を入力しエンターを押します。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ChatGPT Chatbot</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<div id="chat-container">
<div id="chat-log"></div>
<input type="text" id="user-input" placeholder="メッセージを入力してください...">
<button onclick="sendMessage()">送信</button>
</div>
<script>
function sendMessage() {
var user_input = document.getElementById('user-input').value;
var chat_log = document.getElementById('chat-log');
// ユーザーのメッセージを表示
chat_log.innerHTML += '<div class="user-message">麦わらのルフィ: ' + user_input + '</div>';
// ChatGPT APIにメッセージを送信してボットの応答を取得
fetch('/send-message', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
user_input: user_input,
}),
})
.then(response => response.json())
.then(data => {
// ボットの応答を表示
chat_log.innerHTML += '<div class="bot-message">うずまきナルト: ' + data.bot_response + '</div>';
})
.catch(error => console.error('Error:', error));
// 入力欄をクリア
document.getElementById('user-input').value = '';
}
</script>
</body>
</html>staticディレクトリに移動し、
CSSファイル「style.css」を作成します。
[ec2-user@ip-172-31-29-19 templates]$ cd ../static
[ec2-user@ip-172-31-29-19 static]$ vi style.css「i」ボタンを押し、入力モードにします。
style.cssに記述する内容は以下の通り。
「esc」ボタンを押し、「:wq!」を入力しエンターを押します。
/* static/style.css */
#chat-container {
max-width: 600px;
margin: auto;
}
.user-message {
background-color: #e0f7fa;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
}
.bot-message {
background-color: #c8e6c9;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
}これで構築は完了です。
チャットボットアプリを起動する
chatbotディレクトリに移動し、アプリを起動します。
[ec2-user@ip-172-31-29-19 chatbot]$ /home/ec2-user/chatbotアプリを起動します。
[ec2-user@ip-172-31-29-19 chatbot]$ sudo python3 app.py &ブラウザで「http://52.73.181.216」を検索します。
チャットボットアプリに接続できました。
質問をしてみましょう。
おれ、海賊王になれたのかぁ？？
質問がちゃんと返ってきましたね。
まとめ
今回はChatGPT APIを利用した簡単なチャットボットを構築してみました。
ChatGPTの機能を利用すれば色々なアプリが作れそうですよね。
皆様もぜひ構築してみてください。
コメント