├── requirements.txt
├── Sample.png
├── .gitignore
├── LEARN.md
├── Code
    ├── ChatBot.py
    ├── GuiChatBot.py
    ├── BotDefinition.py
    └── templates
    │   └── index.html
├── CONTRIBUTING.md
├── LICENSE
└── README.md


/requirements.txt:
--------------------------------------------------------------------------------
1 | openai
2 | flask


--------------------------------------------------------------------------------
/Sample.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iSiddharth20/Chatbot-Using-OpenAI-API/HEAD/Sample.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_store
2 | venv/
3 | __pycache__/
4 | .vscode/
5 | .ipynb_checkpoints
6 | Icon?
7 | Venv


--------------------------------------------------------------------------------
/LEARN.md:
--------------------------------------------------------------------------------
1 | All details provided in README.md on the Homepage and Comments are Available in the Codebase.
2 | 


--------------------------------------------------------------------------------
/Code/ChatBot.py:
--------------------------------------------------------------------------------
 1 | # Importing Bot Defination
 2 | from BotDefinition import OpenAIBot
 3 | 
 4 | '''Choose whichever model you want to use'''
 5 | # engine = "gpt-3.5-turbo"
 6 | # engine = "gpt-3.5-turbo-16k"
 7 | engine = "gpt-4"
 8 | 
 9 | '''
10 | Creating the ChatBot
11 | Each Object of "OpenAIBot(engine)" will retain the conversation history and context unless the session is terminated
12 | '''
13 | chatbot = OpenAIBot(engine)
14 | 
15 | while True:
16 |     # Get Prompt from User
17 |     prompt = input()
18 | 
19 |     # User can stop the chat by sending 'End Chat' as a Prompt
20 |     if prompt.upper() == 'END CHAT':
21 |         break
22 | 
23 |     # Generate and Print the Response from ChatBot
24 |     response = chatbot.generate_response(prompt)
25 |     print(response)


--------------------------------------------------------------------------------
/Code/GuiChatBot.py:
--------------------------------------------------------------------------------
 1 | # This is a web version of ChatBot.py, which uses Flask to create a web app.
 2 | 
 3 | # Importing Libraries
 4 | from flask import Flask, render_template, request
 5 | from BotDefinition import OpenAIBot
 6 | 
 7 | # Creating the Flask App
 8 | app = Flask(__name__)
 9 | 
10 | # Importing Bot Defination
11 | chatbot = OpenAIBot("gpt-4")
12 | 
13 | @app.route('/')
14 | def index():
15 |     return render_template('index.html')
16 | 
17 | @app.route('/chat', methods=['POST'])
18 | def chat():
19 |     # Get Prompt from User
20 |     prompt = request.form['prompt']
21 | 
22 |     # User can stop the chat by sending 'End Chat' as a Prompt
23 |     if prompt.upper() == 'END CHAT':
24 |         return 'END CHAT'
25 | 
26 |     # Generate and Print the Response from ChatBot
27 |     response = chatbot.generate_response(prompt)
28 |     return response
29 | 
30 | if __name__ == '__main__':
31 |     app.run(debug=True)


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing to [Chatbot-Using-OpenAI-API](https://github.com/iSiddharth20/Chatbot-Using-OpenAI-API)
 2 | 
 3 | Thank you for considering contributing to [Chatbot-Using-OpenAI-API](https://github.com/iSiddharth20/Chatbot-Using-OpenAI-API)! Your Effort and Contributions are crucial for the success of this project and greatly appreciated. Below you'll find the process and guidelines for contributing.
 4 | 
 5 | ### Pull Requests
 6 | - Fork the repository.
 7 | - Include descriptive comments in code.
 8 | - Include descriptive commit messages.
 9 |   - Use present tense ("Add feature" not "Added feature")
10 | 
11 | ### Code Styleguide
12 | - Follow the coding style present in the existing codebase (indentation, comments style, etc.).
13 | - Include comments explaining why certain pieces of code were implemented.
14 | - Write tests for the new code you're submitting.
15 | 
16 | ## Acknowledgments
17 | Thanks to all the contributors who have helped this project grow!
18 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Siddharth Kekre
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ChatBot using OpenAI (ChatGPT) API (with GUI)
 2 | Ready to Use Code to have your own ChatBot using OpenAI API.
 3 | <br>Also added WebApp Template for Reference! Thanks to [Lyubomir](https://github.com/LyubomirT)
 4 | 
 5 | ### Steps to Use the ChatBot:
 6 | - This Codebase requires [OpenAI API Key](https://openai.com/blog/openai-api), kindly make sure you get one.
 7 | - Install Necessary Dependencies from 'requirements.txt'. 
 8 |     - Run : pip install -r requirements.txt
 9 | - Open and Store your API Key in "Code/BotDefinition.py".
10 | - Run "Code/ChatBot.py" for Terminal Based ChatBot.
11 | - Run "Code/GuiChatBot.py" for WebApp Based ChatBot.
12 | - That's it! Just enter your prompts and get the responses.
13 | - If you want to terminate the chat, just enter 'End Chat'.
14 | 
15 | ### How to get the Best out of this Piece of Code:
16 | - Use it in Terminal/CMD for quick response.
17 | - Use it in Jupyter Notebook / Google Colab for more interactive and complex prompts.
18 | - Use it in the BackEnd of any WebApp for enhanced functionality.
19 | - Whatever and However you wish to use it!
20 | 
21 | ### Here is a Sample of How it Works in the Terminal:
22 | ![Sample in Terminal](./Sample.png)
23 | 


--------------------------------------------------------------------------------
/Code/BotDefinition.py:
--------------------------------------------------------------------------------
 1 | import openai
 2 | 
 3 | openai.api_key = "Enter Your API Key Here"
 4 | 
 5 | class OpenAIBot:
 6 |     def __init__(self,engine):
 7 |         # Initialize conversation with a system message
 8 |         self.conversation = [{"role": "system", "content": "You are a helpful assistant."}]
 9 |         self.engine = engine
10 |     def add_message(self, role, content):
11 |         # Adds a message to the conversation.
12 |         self.conversation.append({"role": role, "content": content})
13 |     def generate_response(self, prompt):
14 |         # Add user prompt to conversation
15 |         self.add_message("user", prompt)
16 |         try:
17 |             # Make a request to the API using the chat-based endpoint with conversation context
18 |             response = openai.ChatCompletion.create( model=self.engine, messages=self.conversation)
19 |             # Extract the response
20 |             assistant_response = response['choices'][0]['message']['content'].strip()
21 |             # Add assistant response to conversation
22 |             self.add_message("assistant", assistant_response)
23 |             # Return the response
24 |             return assistant_response
25 |         except:
26 |             print('Error Generating Response!')


--------------------------------------------------------------------------------
/Code/templates/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <title>OpenAI Chatbot</title>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="description" content="OpenAI Chatbot">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 |     <style>
  9 |         body {
 10 |             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 11 |             margin: 0;
 12 |             padding: 0; /* Remove default padding */
 13 |         }
 14 | 
 15 |         .header {
 16 |             padding: 80px;
 17 |             text-align: center;
 18 |             background: #1abc9c;
 19 |             color: white;
 20 |             font-size: 30px;
 21 |         }
 22 | 
 23 |         .content {
 24 |             padding: 16px;
 25 |         }
 26 | 
 27 |         .sticky {
 28 |             position: fixed;
 29 |             top: 0;
 30 |             width: 100%;
 31 |         }
 32 | 
 33 |         .sticky + .content {
 34 |             padding-top: 102px;
 35 |         }
 36 | 
 37 |         .input {
 38 |             display: flex;
 39 |             justify-content: center; /* Align items horizontally */
 40 |             align-items: center;
 41 |             padding: 16px;
 42 |             text-align: center;
 43 |             background: #1abc9c;
 44 |             color: rgb(0, 0, 0);
 45 |             font-size: 30px;
 46 |         }
 47 | 
 48 |         /* Updated CSS styles for the textarea */
 49 |         .input textarea {
 50 |             flex: 1; /* Grow to take available space */
 51 |             padding: 10px;
 52 |             font-size: 16px;
 53 |             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 54 |             border: none;
 55 |             background: white;
 56 |             resize: none;
 57 |             border-radius: 10px;
 58 |             width: 900px;
 59 |             height: auto; /* Set initial height to auto */
 60 |             max-height: 100px; /* Set maximum height to 200px */
 61 |             overflow-y: auto; /* Add a vertical scrollbar if content overflows */
 62 |         }
 63 | 
 64 |         .input input[type=submit] {
 65 |             flex: 0; /* Don't grow, fixed width */
 66 |             padding: 10px;
 67 |             font-size: 17px;
 68 |             border: none;
 69 |             background: #1abc9c;
 70 |             color: white;
 71 |             cursor: pointer;
 72 |             width: auto; /* Allow the button to adjust its width based on content */
 73 |             transform: translateY(-23px);
 74 |         }
 75 | 
 76 |         .input input[type=submit]:hover {
 77 |             background: #45a049;
 78 |         }
 79 | 
 80 |         /* Updated styles for the .messages container */
 81 |         .messages {
 82 |             height: 50vh; /* Set a maximum height for the container */
 83 |             overflow-y: scroll; /* Add a vertical scrollbar if content overflows */
 84 |             padding: 16px;
 85 |             background-color: #f1f1f1;
 86 |             justify-content: top;
 87 |             align-items: center;
 88 |             display: flex;
 89 |             flex-direction: column;
 90 |             top: 0;
 91 |         }
 92 | 
 93 |         .message {
 94 |             display: flex;
 95 |             justify-content: space-between;
 96 |             align-items: center;
 97 |             padding: 16px;
 98 |             padding-top: 2px;
 99 |             padding-bottom: 2px;
100 |             padding-left: 50px;
101 |             background: rgba(255, 255, 255, 0);
102 |             border: none;
103 |             width: 80%;
104 |             margin-bottom: 10px; /* Add margin between messages */
105 |         }
106 | 
107 |         .message .bot {
108 |             padding: 10px;
109 |             font-size: 17px;
110 |             border: none;
111 |             width: 80%;
112 |             background: #43da75;
113 |             color: white;
114 |             cursor: pointer;
115 |             border-radius: 10px;
116 |         }
117 | 
118 |         .message .bot:hover {
119 |             background: #209426;
120 |         }
121 | 
122 |         .message .user {
123 |             padding: 10px;
124 |             font-size: 17px;
125 |             border: none;
126 |             width: 80%;
127 |             background: #1abc9c;
128 |             color: white;
129 |             cursor: pointer;
130 |             border-radius: 10px;
131 |         }
132 | 
133 |         .message .user:hover {
134 |             background: #45a049;
135 |         }
136 |     </style>
137 | </head>
138 | <body>
139 |     <div class="header">
140 |         <h1>OpenAI Chatbot</h1>
141 |     </div>
142 |     <div class="messages">
143 |         <!-- Messages will be displayed here -->
144 |     </div>
145 |     <div class="input">
146 |         <form action="" method="post" onsubmit="return false;">
147 |             <textarea name="message" placeholder="Type your message here" autocomplete="off" autofocus></textarea>
148 |             <input type="submit" value="Send">
149 |         </form>
150 |     </div>
151 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
152 |     <script>
153 |         // Function to enable or disable input elements
154 |         function toggleInputElements(disabled) {
155 |             $('textarea[name=message]').prop('disabled', disabled);
156 |             $('#send-button').prop('disabled', disabled);
157 |         }
158 | 
159 |         // Function to adjust textarea height based on content
160 |         function adjustTextareaHeight() {
161 |             var textarea = $('textarea[name=message]')[0];
162 |             textarea.style.height = 'auto'; // Reset height to auto
163 |             textarea.style.height = (Math.min(textarea.scrollHeight, 100)) + 'px'; // Set height up to 200px
164 |             // Scroll the page to the bottom
165 |             document.body.scrollTop = document.body.scrollHeight;
166 |         }
167 | 
168 |     // When the form is submitted, send the message to the server
169 |     $('form').submit(function (e) {
170 |         e.preventDefault();
171 |         var userMessage = $('textarea[name=message]').val();
172 | 
173 |         if (userMessage === '') {
174 |             return;
175 |         }
176 | 
177 |         // Disable input elements while processing
178 |         toggleInputElements(true);
179 | 
180 |         // Add the user message to the messages container with proper line breaks
181 |         $('.messages').append('<div class="message"><div class="user">' + userMessage.replace(/\n/g, '<br>') + '</div></div>');
182 | 
183 |         // Clear the input box
184 |         $('textarea[name=message]').val('');
185 | 
186 |         // Reset the textarea's height
187 |         adjustTextareaHeight();
188 | 
189 |         // Scroll to the bottom of the container when a new message is added
190 |         $('.messages').scrollTop($('.messages')[0].scrollHeight);
191 | 
192 |         // Send the user message to the server
193 |         $.post("/chat", {
194 |             prompt: userMessage
195 |         }, function(response) {
196 |             // Check if the response is an error message
197 |             if (response.startsWith("Error:")) {
198 |                 // Display "Something went wrong" for error responses
199 |                 $('.messages').append('<div class="message"><div class="bot">Something went wrong</div></div>');
200 |             } else {
201 |                 // Display the bot's response for successful responses with proper line breaks
202 |                 $('.messages').append('<div class="message"><div class="bot">' + response.replace(/\n/g, '<br>') + '</div></div>');
203 |             }
204 | 
205 |             // Scroll to the bottom of the container after adding the response
206 |             $('.messages').scrollTop($('.messages')[0].scrollHeight);
207 | 
208 |             // Re-enable input elements after processing
209 |             toggleInputElements(false);
210 |         }).fail(function() {
211 |             // Handle AJAX request failure (e.g., server not responding)
212 |             $('.messages').append('<div class="message"><div class="bot">Something went wrong</div></div>');
213 |             $('.messages').scrollTop($('.messages')[0].scrollHeight);
214 | 
215 |             // Re-enable input elements after processing
216 |             toggleInputElements(false);
217 |         });
218 |     });
219 | 
220 |         // Add event listener to textarea to handle Enter and Shift+Enter
221 |         $('textarea[name=message]').on('keydown', function(e) {
222 |             if (e.key === 'Enter' && !e.shiftKey) {
223 |                 // Prevent default Enter behavior (submitting the form)
224 |                 e.preventDefault();
225 |                 // Submit the form
226 |                 $('form').submit();
227 |             } else if (e.key === 'Enter' && e.shiftKey) {
228 |                 // Add a newline character when Shift+Enter is pressed
229 |                 document.execCommand('insertText', false, '\n');
230 |                 // Adjust the textarea's height
231 |                 adjustTextareaHeight();
232 |                 e.preventDefault(); // Prevent default behavior (newline insertion)
233 |             }
234 |         });
235 | 
236 |         // Adjust textarea height initially
237 |         adjustTextareaHeight();
238 |     </script>
239 | </body>
240 | </html>
241 | 


--------------------------------------------------------------------------------