simple AI-powered chatbot integrated into a website using HTML, JavaScript, and Flask (Python): ML and AI

Navigation

Member Polls

simple AI-powered chatbot integrated into a website using HTML, JavaScript, and Flask (Python)

Last updated on 14 days ago

apitechJunior Member

Posted 14 days ago

Here's a simple AI-powered chatbot integrated into a website using HTML, JavaScript, and Flask (Python).

### Steps:
1. Install Flask and OpenAI's library:

bash

 pip install flask openai

2. **Create the backend** (app.py):

python

from flask import Flask, request, jsonify

import openai



app = Flask(__name__)



# Replace with your OpenAI API key

API_KEY = "your-api-key"



def chat_with_ai(prompt):

 response = openai.ChatCompletion.create(

 model="gpt-3.5-turbo",

 messages=[{"role": "system", "content": "You are a helpful chatbot."},

 {"role": "user", "content": prompt}]

 )

 return response["choices"][0]["message"]["content"]



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

def chat():

 data = request.json

 user_message = data.get("message", "")

 response = chat_with_ai(user_message)

 return jsonify({"response": response})



if __name__ == "__main__":

 app.run(debug=True)

apitechJunior Member

Posted 14 days ago

3. **Create the frontend** (index.html):

html

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>AI Chatbot</title>

 <style>

 body { font-family: Arial, sans-serif; margin: 20px; }

 #chatbox { width: 400px; height: 300px; overflow-y: scroll; border: 1px solid #ccc; padding: 10px; }

 #user-input { width: 80%; padding: 10px; }

 button { padding: 10px; }

 </style>

</head>

<body>

 <h2>AI Chatbot</h2>

 <div id="chatbox"></div>

 <input type="text" id="user-input" placeholder="Type a message...">

 <button onclick="sendMessage()">Send</button>



 <script>

 function sendMessage() {

 let inputField = document.getElementById("user-input");

 let message = inputField.value;

 if (!message) return;

 

 let chatbox = document.getElementById("chatbox");

 chatbox.innerHTML += "<p><strong>You:</strong> " + message + "</p>";

 inputField.value = "";



 fetch("/chat", {

 method: "POST",

 headers: { "Content-Type": "application/json" },

 body: JSON.stringify({ message: message })

 })

 .then(response => response.json())

 .then(data => {

 chatbox.innerHTML += "<p><strong>Bot:</strong> " + data.response + "</p>";

 chatbox.scrollTop = chatbox.scrollHeight;

 });

 }

 </script>

</body>

</html>

### How to Run:
1. Start the Flask server:

bash

 python app.py

2. Open index.html in your browser.

This creates a simple chatbot UI where users can type messages, and the AI responds using OpenAI’s GPT model.

You can view all discussion threads in this forum.
You cannot start a new discussion thread in this forum.
You cannot reply in this discussion thread.
You cannot start on a poll in this forum.
You cannot upload attachments in this forum.
You cannot download attachments in this forum.

Users Online Now

Guests Online 3
Members Online 0

Total Members: 17
Newest Member: apitech