Internet Explorer
Internet Explorer is not supported. Please upgrade to a more modern browser.
Open4Discuss
Technology
Code for simple AI
Started by Hemanth
This only for web page
<!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>
<link rel="stylesheet" href="style.css">
</head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.chat-container {
width: 400px;
background: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: flex;
flex-direction: column;
}
.chat-header {
background: #007bff;
color: white;
padding: 15px;
text-align: center;
}
.chat-messages {
flex: 1;
padding: 10px;
overflow-y: auto;
border-bottom: 1px solid #ddd;
}
.chat-messages .message {
margin-bottom: 10px;
}
.chat-messages .user {
text-align: right;
color: blue;
}
.chat-messages .bot {
text-align: left;
color: green;
}
.chat-input {
display: flex;
padding: 10px;
}
.chat-input input {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
margin-right: 10px;
}
.chat-input button {
padding: 10px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.chat-input button:hover {
background: #0056b3;
}
</style>
<body>
<div class="chat-container">
<div class="chat-header">
<h2>AI Chatbot</h2>
</div>
<div class="chat-messages" id="chatMessages"></div>
<div class="chat-input">
<input type="text" id="userInput" placeholder="Type your message..." />
<button id="sendButton">Send</button>
</div>
</div>
<script src="script.js"></script>
<p>This made by Hemanth </p>
</body>
</html>Javascript for AI
const apiKey = "YOUR API KEY ";
const chatMessages = document.getElementById("chatMessages");
const userInput = document.getElementById("userInput");
const sendButton = document.getElementById("sendButton");
async function sendMessage(message) {
// Display user message
addMessage(message, "user");
// Fetch response from OpenAI
const response = await fetch("https://api.openai.com/v1/chat/completions", {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: Bearer ${apiKey},
},
body: JSON.stringify({
model: "gpt-3.5-turbo",
messages: [{ role: "user", content: message }],
}),
});
const data = await response.json();
const botMessage = data.choices[0].message.content;
// Display bot response
addMessage(botMessage, "bot");
}
function addMessage(message, sender) {
const messageElement = document.createElement("div");
messageElement.classList.add("message", sender);
messageElement.textContent = message;
chatMessages.appendChild(messageElement);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
sendButton.addEventListener("click", () => {
const message = userInput.value.trim();
if (message) {
sendMessage(message);
userInput.value = "";
}
});
userInput.addEventListener("keypress", (event) => {
if (event.key === "Enter") {
sendButton.click();
}
});Python for AI
Using openai api key
from flask import Flask, render_template, request
import openai
app = Flask(__name__)
# Set up OpenAI API credentials
openai.api_key = ' YOUR API KEY '
# Define the default route to return the index.html file
@app.route("/")
def index():
return render_template("index.html")
# Define the /api route to handle POST requests
@app.route("/api", methods=["POST"])
def api():
# Get the message from the POST request
message = request.json.get("message")
# Send the message to OpenAI's API and receive the response
completion = openai.ChatCompletion.create(
model="gpt-3.5-turbo",
messages=[
{"role": "user", "content": message}
]
)
if completion.choices[0].message!=None:
return completion.choices[0].message
else :
return 'Failed to Generate response!'
if __name__=='__main__':
app.run()