-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
1abeea5
commit dc72ed6
Showing
13 changed files
with
394 additions
and
112 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,110 +1,32 @@ | ||
import tkinter as tk | ||
from tkinter import scrolledtext, messagebox | ||
from flask import Flask, render_template, request, jsonify | ||
import random | ||
|
||
class chat_gui: | ||
def __init__(self, chatbot_function, speak_function=None): | ||
self.chatbot_function = chatbot_function | ||
self.speak_function = speak_function | ||
|
||
# Create the main window | ||
self.root = tk.Tk() | ||
self.root.title("Botiverse Chat") | ||
self.root.geometry("600x500") | ||
self.root.configure(bg='#222222') | ||
# disable vertical resizing | ||
self.root.resizable(True, False) | ||
|
||
# Create the chat display area | ||
self.chat_display = scrolledtext.ScrolledText(self.root, width=40, height=25, state='disabled', bg='#1d1d1d', fg='#1d1d1d') | ||
self.chat_display.configure(state='disabled', borderwidth=0) | ||
self.chat_display.configure(highlightthickness=0, relief='flat') | ||
|
||
# reduce chat display font | ||
# self.chat_display.configure(font=("Avenir", 12)) | ||
|
||
# Create the input area | ||
self.input_entry = tk.Entry(self.root, width=30, bg='#505050', fg='#ffffff') | ||
self.input_entry.bind('<Return>', self.process_input) | ||
# remove border form input | ||
self.input_entry.configure(highlightthickness=0, relief='flat') | ||
# increase height of input area | ||
# self.input_entry.configure(font=("Avenir", 12)) | ||
|
||
# Create the send button | ||
self.send_button = tk.Button(self.root, text="Send", command=self.process_input, width=10) | ||
# make button grey | ||
self.send_button.configure(bg='#505050', fg='#ffffff', activebackground='#1d1d1d', activeforeground='#ffffff', background='#1d1d1d', foreground='#ffffff') | ||
# remove border from button | ||
#self.send_button.configure(highlightthickness=0, relief='flat') | ||
# set font | ||
# self.send_button.configure(font=("Avenir", 15)) | ||
# remove send button | ||
self.send_button.pack_forget() | ||
class chat_gui(): | ||
chat_func = None | ||
bot_type = None | ||
# one of ['Whiz Bot', 'Basic Bot', 'Task Bot', 'Converse Bot', 'Voice Bot', 'Theorizer'] | ||
def __init__(self, bot_type, chat_func): | ||
chat_gui.bot_type = bot_type | ||
chat_gui.chat_func = chat_func | ||
app.run(port=5000, debug=False) | ||
|
||
# Position the widgets in the window | ||
self.chat_display.pack(fill="both", padx=10, pady=10) | ||
self.input_entry.pack(fill="x", padx=10, pady=5) | ||
self.send_button.pack(fill="x", pady=5) | ||
app = Flask(__name__) | ||
|
||
def process_input(self, event=None): | ||
# Get the user input | ||
user_input = self.input_entry.get() | ||
self.input_entry.delete(0, 'end') | ||
@app.route("/") | ||
def index(): | ||
return render_template('chat.html', bot=chat_gui.bot_type) | ||
|
||
# Display user input in the chat area | ||
self.display_message(user_input, user=True) | ||
|
||
# Pass the user input to the chatbot function and get the response | ||
bot_response = self.chatbot_function(user_input) | ||
# Display bot response in the chat area | ||
self.display_message(bot_response, user=False) | ||
@app.route("/get", methods=["GET", "POST"]) | ||
def chat(): | ||
msg = request.form["msg"] | ||
input = msg | ||
return get_Chat_response(input) | ||
|
||
|
||
def display_message(self, message, user=True): | ||
# Enable the chat display area to insert text | ||
self.chat_display.configure(state='normal') | ||
def get_Chat_response(text): | ||
return chat_gui.chat_func(text) | ||
|
||
# Insert the message into the chat display area with a chat bubble | ||
if user: | ||
self.chat_display.insert('end', message + '\n', 'user') | ||
else: | ||
self.chat_display.insert('end', message + '\n', 'bot') | ||
if self.speak_function is not None: | ||
self.speak_function(message) | ||
|
||
# Disable the chat display area to prevent editing | ||
self.chat_display.configure(state='disabled') | ||
|
||
# Scroll to the bottom of the chat display area | ||
self.chat_display.see('end') | ||
|
||
|
||
|
||
def run(self): | ||
# Configure the chat bubble styles | ||
self.chat_display.tag_configure('user', foreground='white', justify='left', font=('Avenir', 15, 'bold'), | ||
background='#505050', borderwidth=2, relief='solid', | ||
wrap='word', spacing3=10, spacing1=10, lmargin1=10, spacing2=5) | ||
|
||
self.chat_display.tag_configure('bot', foreground='white', justify='right', font=('Avenir', 15, 'bold'), | ||
background='#303030', borderwidth=2, relief='solid', | ||
wrap='word', spacing3=10, spacing1=10, rmargin=10, spacing2=5) | ||
|
||
|
||
|
||
# Start the main GUI loop | ||
self.root.mainloop() | ||
|
||
|
||
# Example usage: | ||
''' | ||
def chatbot_function(input): | ||
# Your chatbot logic goes here | ||
# Process the input and generate a response | ||
response = "Hello! You said: " + input | ||
return response | ||
chat_gui = ChatGUI(chatbot_function) | ||
chat_gui.run() | ||
''' |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,246 @@ | ||
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap'); | ||
body,html{ | ||
height: 100%; | ||
margin: 0; | ||
background: rgb(44, 47, 59); | ||
background: -webkit-linear-gradient(to bottom, rgb(40, 29, 34), rgb(54, 60, 70), rgb(2, 32, 53)); | ||
background: linear-gradient(to bottom, rgb(8, 21, 31), rgb(30, 55, 65), rgb(13, 53, 78)); | ||
font-family: 'Poppins', sans-serif; | ||
overflow: hidden; | ||
} | ||
|
||
/* width */ | ||
::-webkit-scrollbar { | ||
width: 5px; | ||
} | ||
|
||
/* Track */ | ||
::-webkit-scrollbar-track { | ||
background: rgba(0, 0, 0, 0.2); | ||
} | ||
|
||
/* Handle */ | ||
::-webkit-scrollbar-thumb { | ||
background: rgb(67, 150, 150) | ||
} | ||
|
||
/* Handle on hover */ | ||
::-webkit-scrollbar-thumb:hover { | ||
background: #555; | ||
} | ||
|
||
.chat{ | ||
margin-top: 100; | ||
margin-bottom: 0; | ||
} | ||
.card{ | ||
height: 500px; | ||
border-radius: 30px !important; | ||
background-color: rgba(0,0,0,0.4) !important; | ||
} | ||
.contacts_body{ | ||
padding: 0.75rem 0 !important; | ||
overflow-y: auto; | ||
white-space: nowrap; | ||
} | ||
.msg_card_body{ | ||
overflow-y: auto; | ||
} | ||
.card-header{ | ||
border-radius: 15px 15px 0 0 !important; | ||
border-bottom: 0 !important; | ||
} | ||
.card-footer{ | ||
border-radius: 0 0 15px 15px !important; | ||
border-top: 0 !important; | ||
} | ||
.container{ | ||
align-content: center; | ||
} | ||
.search{ | ||
border-radius: 15px 0 0 15px !important; | ||
background-color: rgba(0,0,0,0.3) !important; | ||
border:0 !important; | ||
color:white !important; | ||
} | ||
.search:focus{ | ||
box-shadow:none !important; | ||
outline:0px !important; | ||
} | ||
.type_msg{ | ||
background-color: rgba(0,0,0,0.3) !important; | ||
border:0 !important; | ||
color:white !important; | ||
height: 60px !important; | ||
overflow-y: auto; | ||
} | ||
.type_msg:focus{ | ||
box-shadow:none !important; | ||
outline:0px !important; | ||
} | ||
.attach_btn{ | ||
border-radius: 15px 0 0 15px !important; | ||
background-color: rgba(0,0,0,0.3) !important; | ||
border:0 !important; | ||
color: white !important; | ||
cursor: pointer; | ||
} | ||
.send_btn{ | ||
border-radius: 0 15px 15px 0 !important; | ||
background-color: rgba(0,0,0,0.3) !important; | ||
border:0 !important; | ||
color: white !important; | ||
cursor: pointer; | ||
} | ||
.search_btn{ | ||
border-radius: 0 15px 15px 0 !important; | ||
background-color: rgba(0,0,0,0.3) !important; | ||
border:0 !important; | ||
color: white !important; | ||
cursor: pointer; | ||
} | ||
.contacts{ | ||
list-style: none; | ||
padding: 0; | ||
} | ||
.contacts li{ | ||
width: 100% !important; | ||
padding: 5px 10px; | ||
margin-bottom: 15px !important; | ||
} | ||
.active{ | ||
background-color: rgba(0,0,0,0.3); | ||
} | ||
.user_img{ | ||
height: 70px; | ||
width: 70px; | ||
border:1.5px solid #f5f6fa; | ||
|
||
} | ||
.user_img_msg{ | ||
height: 40px; | ||
width: 40px; | ||
border:1.5px solid #f5f6fa; | ||
|
||
} | ||
.img_cont{ | ||
position: relative; | ||
height: 70px; | ||
width: 70px; | ||
} | ||
.img_cont_msg{ | ||
height: 40px; | ||
width: 40px; | ||
} | ||
.online_icon{ | ||
position: absolute; | ||
height: 15px; | ||
width:15px; | ||
background-color: #4cd137; | ||
border-radius: 50%; | ||
bottom: 0.2em; | ||
right: 0.4em; | ||
border:1.5px solid white; | ||
} | ||
.offline{ | ||
background-color: #c23616 !important; | ||
} | ||
.user_info{ | ||
margin-top: auto; | ||
margin-bottom: auto; | ||
margin-left: 15px; | ||
} | ||
.user_info span{ | ||
font-size: 20px; | ||
color: white; | ||
} | ||
.user_info p{ | ||
font-size: 10px; | ||
color: rgba(255,255,255,0.6); | ||
} | ||
.video_cam{ | ||
margin-left: 50px; | ||
margin-top: 5px; | ||
} | ||
.video_cam span{ | ||
color: white; | ||
font-size: 20px; | ||
cursor: pointer; | ||
margin-right: 20px; | ||
} | ||
.msg_cotainer{ | ||
margin-top: auto; | ||
margin-bottom: auto; | ||
margin-left: 10px; | ||
border-radius: 25px; | ||
background-color: rgb(100, 240, 240); | ||
padding: 10px; | ||
position: relative; | ||
} | ||
.msg_cotainer_send{ | ||
margin-top: auto; | ||
margin-bottom: auto; | ||
margin-right: 10px; | ||
border-radius: 25px; | ||
background-color: rgb(7, 190, 190); | ||
padding: 10px; | ||
position: relative; | ||
} | ||
.msg_time{ | ||
position: absolute; | ||
left: 0; | ||
bottom: -15px; | ||
color: rgba(255,255,255,0.5); | ||
font-size: 10px; | ||
} | ||
.msg_time_send{ | ||
position: absolute; | ||
right:0; | ||
bottom: -15px; | ||
color: rgba(255,255,255,0.5); | ||
font-size: 10px; | ||
} | ||
.msg_head{ | ||
position: relative; | ||
} | ||
#action_menu_btn{ | ||
position: absolute; | ||
right: 10px; | ||
top: 10px; | ||
color: white; | ||
cursor: pointer; | ||
font-size: 20px; | ||
} | ||
.action_menu{ | ||
z-index: 1; | ||
position: absolute; | ||
padding: 15px 0; | ||
background-color: rgba(0,0,0,0.5); | ||
color: white; | ||
border-radius: 15px; | ||
top: 30px; | ||
right: 15px; | ||
display: none; | ||
} | ||
.action_menu ul{ | ||
list-style: none; | ||
padding: 0; | ||
margin: 0; | ||
} | ||
.action_menu ul li{ | ||
width: 100%; | ||
padding: 10px 15px; | ||
margin-bottom: 5px; | ||
} | ||
.action_menu ul li i{ | ||
padding-right: 10px; | ||
} | ||
.action_menu ul li:hover{ | ||
cursor: pointer; | ||
background-color: rgba(0,0,0,0.2); | ||
} | ||
@media(max-width: 576px){ | ||
.contacts_card{ | ||
margin-bottom: 15px !important; | ||
} | ||
} |
Oops, something went wrong.