OpenAI API (モデル: gpt-3.5-turbo
) を利用した、チャット履歴を保持しながら対話する Flask アプリです。
ユーザーからの入力をもとに OpenAI API とやりとりし、履歴付きで描画するWebチャットを実現します。
- ✅ FlaskアプリとHTMLフォームでシンプルなチャットUI
- ✅ OpenAI APIと連携 (
gpt-3.5-turbo
) - ✅ チャット履歴保持 (ページ内の持続のみ)
- ✅ 現在日付の情報を与えて正しい日付を応答
- ✅ JavaScriptでチャット表示後に自動スクロール
チャット画面 | 内容 |
---|---|
→ 入力フォーム | ユーザーからのメッセージ |
→ 履歴表示 | OpenAI APIとの履歴 |
→ 自動スクロール | 最新メッセージまで移動 |
技術 | 説明 |
---|---|
Python | バックエンド言語 |
Flask | 軽量なWebフレームワーク |
HTML / CSS | UIのマークアップ・スタイル |
OpenAI | gpt-3.5-turbo を使用 |
dotenv | API Keyの暗号化ロード |
JavaScript | 自動スクロール制御 |
pip install flask python-dotenv openai
OPENAI_API_KEY=sk-xxxxxxx
python chatgpt_flask_chatbot.py
chatbot-app/
├── chatgpt_flask_chatbot.py
├── .env
├── templates/
│ └── index.html
├── static/
│ ├── style.css
│ └── script.js ← 自動スクロール用JS
- 使用API: OpenAI Chat API
- 実行日付を正しく返したい場合は
datetime.today()
を使用 - チャット画面では JavaScript により、送信後に自動スクロール
// static/script.js
window.onload = function () {
const chatArea = document.getElementById("chat-history");
if (chatArea) {
chatArea.scrollTop = chatArea.scrollHeight;
}
};
※自動スクロール機能は、チャット表示領域に適切なIDを設定して動作します