0% found this document useful (0 votes)
17 views2 pages

المستند (3) h

This document provides a guide to creating a simple chatbot using OpenAI's GPT API with Flask. It outlines the features, requirements, and includes Python code for the backend and HTML for the frontend. The chatbot accepts user input, sends it to the OpenAI API, and displays the responses dynamically on a web interface.

Uploaded by

hsgstgas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
17 views2 pages

المستند (3) h

This document provides a guide to creating a simple chatbot using OpenAI's GPT API with Flask. It outlines the features, requirements, and includes Python code for the backend and HTML for the frontend. The chatbot accepts user input, sends it to the OpenAI API, and displays the responses dynamically on a web interface.

Uploaded by

hsgstgas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Here's a Simple Chatbot using OpenAI's GPT API with Flask.

Features

✅ Accepts user input via a web interface


✅ Sends queries to OpenAI's API and receives responses
✅ Displays chatbot responses dynamically

Requirements

Install Flask and requests:

pip install flask requests

You’ll also need an OpenAI API key (get one from OpenAI).

Python Code (app.py)


import os
import requests
from flask import Flask, request, render_template, jsonify

app = Flask(__name__)

# OpenAI API Key (Replace with your key)


OPENAI_API_KEY = "your-api-key-here"

# OpenAI API Endpoint


OPENAI_URL = "https://api.openai.com/v1/chat/completions"

def get_gpt_response(user_input):
headers = {"Authorization": f"Bearer {OPENAI_API_KEY}", "Content-
Type": "application/json"}
data = {
"model": "gpt-3.5-turbo",
"messages": [{"role": "user", "content": user_input}],
"temperature": 0.7
}
response = requests.post(OPENAI_URL, headers=headers, json=data)
return response.json().get("choices", [{}])[0].get("message",
{}).get("content", "Error: No response")

@app.route("/", methods=["GET", "POST"])


def chat():
if request.method == "POST":
user_input = request.form["message"]
bot_response = get_gpt_response(user_input)
return jsonify({"response": bot_response})
return render_template("index.html")
if __name__ == "__main__":
app.run(debug=True)

HTML (templates/index.html)

Create a templates/ folder and save this as index.html:

<!DOCTYPE html>
<html>
<head>
<title>Chatbot</title>
<script>
function sendMessage() {
var message = document.getElementById("message").value;
fetch("/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-
urlencoded" },
body: "message=" + encodeURIComponent(message)
})
.then(response => response.json())
.then(data => {
document.getElementById("chat").innerHTML +=
"<p><b>You:</b> " + message + "</p>";
document.getElementById("chat").innerHTML +=
"<p><b>Bot:</b> " + data.response + "</p>";
document.getElementById("message").value = "";
});
}
</script>
</head>
<body>
<h1>Simple Chatbot</h1>
<div id="chat"></div>
<input type="text" id="message" placeholder="Type a message">
<button onclick="sendMessage()">Send</button>
</body>
</html>

How It Works

1. Users type a message into the input box.


2. The message is sent to OpenAI’s GPT API.
3. The bot responds, and the reply appears in the chat window.

Run the app using:

python app.py

Let me know if you need modifications!

You might also like