Skip to content

ChatGPT風UIで履歴付き対話ができるPython製チャットアプリ(Flask + OpenAI API対応)

Notifications You must be signed in to change notification settings

abej7/chatbot-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

履歴画面自動

🤖 ChatGPT風 履歴付きチャットボット (Flaskアプリ)

🔹 アプリ概要

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 自動スクロール制御

🚀 起動方法

1. 必要なライブラリをインストール

pip install flask python-dotenv openai

2. OpenAI API Key を .env に保存

OPENAI_API_KEY=sk-xxxxxxx

3. アプリを起動

python chatgpt_flask_chatbot.py

4. ブラウザでアクセス

http://127.0.0.1:5000


📂 ファイル構成

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を設定して動作します

About

ChatGPT風UIで履歴付き対話ができるPython製チャットアプリ(Flask + OpenAI API対応)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published