CODEWITHSUNDEEP
pythonhtmlopenai-apihtml-helper
Mike4082
Mike4082

Reputation: 1

Trying to implement a chatgpt using openai API into an HTML webpage

I'm trying to use a Python script that calls the OpenAI API to get a response from ChatGPT as it currently stands the Python script works and displays the conversation in the terminal but the assignment requires it to be displayed on my HTML webpage. Is there a way to send the output of the Python script to the HTML page while also sending inputs from the HTML page back to the Python script which then calls the API? This is what I got so far.

Python:

import openai

openai.api_key = "apikey"

def chat_with_gpt(prompt):
    response = openai.chat.completions.create(
        model="gpt-3.5-turbo",
        messages=[{"role": "user", "content": prompt}]
        )

    return response.choices[0].message.content.strip()

if __name__ == "__main__":
    while True:
        user_input = input("You: ")
        if user_input.lower() in ["quit", "exit", "bye"]:
            break

        response = chat_with_gpt(user_input)
        print("Chatbot: ", response)

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Chatbot</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #fff; /* Set the background color */
        }

        #chatbot-content {
            text-align: center;
            width: 300px;
        }

        #chat-area {
            width: 100%;
            height: 200px;
            padding: 10px;
            border: 1px solid #333;
            background-color: #f0f0f0;
            margin-bottom: 10px;
            overflow-y: scroll;
        }

        #user-input {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            margin-bottom: 10px;
        }

        #send-btn {
            padding: 10px 20px;
            background-color: #007bff; /* Bootstrap's Primary Color */
            color: #fff;
            text-decoration: none;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <div id="chatbot-content">
        <h1>Text Chatbot</h1>

        <!-- Chat Area -->
        <div id="chat-area"></div>

        <!-- User Input -->
        <input type="text" id="user-input" placeholder="Type your message here">

        <!-- Send Button -->
        <button id="send-btn">Send</button>
    </div>

    <script>
        function displayMessage(message) {
            // Get the chat area
            const chatArea = document.getElementById("chat-area");

            // Create a new message element
            const messageElement = document.createElement("div");
            messageElement.textContent = message;

            // Append the message element to the chat area
            chatArea.appendChild(messageElement);

            // Scroll to the bottom of the chat area to show the latest message
            chatArea.scrollTop = chatArea.scrollHeight;
        }

        function getBotReply(userInput) {
            // Convert user input to lowercase for case-insensitive matching
            const lowerCaseInput = userInput.toLowerCase();

            // Define responses based on keywords
            if (lowerCaseInput.includes("hi") || lowerCaseInput.includes("hello")) {
                return "Hello!";
            } else if (lowerCaseInput.includes("how are you")) {
                return "I'm doing well, thank you!";
            } else {
                return "I'm here to chat! Ask me anything.";
            }
        }

        document.getElementById("send-btn").addEventListener("click", function () {
            // Get the user's input
            const userInput = document.getElementById("user-input").value;

            // Display the user's message in the chat area
            displayMessage("You: " + userInput);

            // Get the bot's reply based on user input
            const botReply = getBotReply(userInput);
            displayMessage("Bot: " + botReply);

            // Clear the user input
            document.getElementById("user-input").value = "";
        });
    </script>

</body>
</html>

I've got the website up and running on a Google Cloud VM currently but outside of it displaying the HTML code it doesn't seem to do anything with the Python script.

Upvotes: -1

Views: 958

Answers (1)

solaina
solaina

Reputation: 1

Maybe, I think python-to-json is also a good choice. You can use js or php to recall python code and get the current json response which is added by python code.

Upvotes: 0

Related Questions