Spaces:
Running
Running
dineshabeysinghe
commited on
Commit
β’
2d42455
1
Parent(s):
8a09ccf
design updated
Browse files- README.md +1 -1
- app.py +42 -48
- style/style.css +15 -13
README.md
CHANGED
@@ -1,6 +1,6 @@
|
|
1 |
---
|
2 |
title: AI Chat
|
3 |
-
emoji:
|
4 |
colorFrom: indigo
|
5 |
colorTo: green
|
6 |
sdk: streamlit
|
|
|
1 |
---
|
2 |
title: AI Chat
|
3 |
+
emoji: π¬π£οΈ
|
4 |
colorFrom: indigo
|
5 |
colorTo: green
|
6 |
sdk: streamlit
|
app.py
CHANGED
@@ -1,10 +1,6 @@
|
|
1 |
-
# app.py
|
2 |
-
|
3 |
from transformers import pipeline
|
4 |
import streamlit as st
|
5 |
|
6 |
-
|
7 |
-
|
8 |
# Set up Streamlit app title and page width
|
9 |
st.set_page_config(page_title='Simple Chatbot with Streamlit', layout='wide')
|
10 |
|
@@ -15,51 +11,49 @@ chatbot = pipeline("text2text-generation", model="facebook/blenderbot-400M-disti
|
|
15 |
if 'chat_history' not in st.session_state:
|
16 |
st.session_state['chat_history'] = []
|
17 |
|
18 |
-
# Read the CSS file
|
19 |
-
with open("./style/style.css") as f:
|
20 |
-
css = f.read()
|
21 |
-
|
22 |
-
# Inject CSS into the Streamlit app
|
23 |
-
st.markdown(f"<style>{css}</style>", unsafe_allow_html=True)
|
24 |
-
|
25 |
# Define Streamlit app layout
|
26 |
-
st.markdown("<h1 style='color: orange;'
|
27 |
-
st.caption("π Chat bot
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
28 |
|
29 |
-
# Create text area for user input
|
30 |
-
user_input = st.text_input("", placeholder="Your message")
|
31 |
|
32 |
-
#
|
33 |
-
|
34 |
-
|
35 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
36 |
else:
|
37 |
-
|
38 |
-
|
39 |
-
|
40 |
-
with st.spinner(text='Thinking ...'):
|
41 |
-
conversation_bot_result = chatbot(user_input)
|
42 |
-
|
43 |
-
bot_response = conversation_bot_result[0]["generated_text"]
|
44 |
-
chat_history.append({"role": "bot", "message": bot_response})
|
45 |
-
|
46 |
-
# Update chat history in session state
|
47 |
-
st.session_state['chat_history'] = chat_history
|
48 |
-
|
49 |
-
# Create text area for chat history
|
50 |
-
chat_area = st.empty()
|
51 |
-
|
52 |
-
# Display the chat history with alternating user and bot messages
|
53 |
-
chat_text = ""
|
54 |
-
user_messages = [chat for chat in st.session_state['chat_history'] if chat['role'] == 'user']
|
55 |
-
bot_messages = [chat for chat in st.session_state['chat_history'] if chat['role'] == 'bot']
|
56 |
-
|
57 |
-
for user_chat, bot_chat in zip(reversed(user_messages), reversed(bot_messages)):
|
58 |
-
chat_text += f"<div class='user-message'>{user_chat['message']}</div>\n"
|
59 |
-
chat_text += f"<div class='bot-message'>{bot_chat['message']}</div>\n"
|
60 |
-
|
61 |
-
# Add any remaining user messages if there are more user messages than bot messages
|
62 |
-
for user_chat in reversed(user_messages[len(bot_messages):]):
|
63 |
-
chat_text += f"<div class='user-message'>{user_chat['message']}</div>\n"
|
64 |
-
|
65 |
-
chat_area.markdown(f"<div class='chat-container'>{chat_text}</div>", unsafe_allow_html=True)
|
|
|
|
|
|
|
1 |
from transformers import pipeline
|
2 |
import streamlit as st
|
3 |
|
|
|
|
|
4 |
# Set up Streamlit app title and page width
|
5 |
st.set_page_config(page_title='Simple Chatbot with Streamlit', layout='wide')
|
6 |
|
|
|
11 |
if 'chat_history' not in st.session_state:
|
12 |
st.session_state['chat_history'] = []
|
13 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
14 |
# Define Streamlit app layout
|
15 |
+
st.markdown("<h1 style='color: orange;'>π¬π£οΈ AI Type Talk Chat</h1>", unsafe_allow_html=True)
|
16 |
+
st.caption("π Chat bot developed By :- [Dinesh Abeysinghe](https://www.linkedin.com/in/dinesh-abeysinghe-bb773293) | [GitHub Source Code](https://github.com/dineshabey/AI-TypeTalkChat.git) | [About model](https://arxiv.org/abs/2004.13637) ")
|
17 |
+
st.markdown('''
|
18 |
+
<button class='relative flex items-center overflow-hidden from-red-50 to-transparent dark:from-red-900 px-1.5 py-1 hover:bg-gradient-to-t focus:outline-none' title='Unlike'>
|
19 |
+
<svg class='left-1.5 absolute' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' focusable='false' role='img' width='1em' height='1em' preserveAspectRatio='xMidYMid meet' viewBox='0 0 32 32' fill='currentColor'>
|
20 |
+
<path d='M22.45,6a5.47,5.47,0,0,1,3.91,1.64,5.7,5.7,0,0,1,0,8L16,26.13,5.64,15.64a5.7,5.7,0,0,1,0-8,5.48,5.48,0,0,1,7.82,0L16,10.24l2.53-2.58A5.44,5.44,0,0,1,22.45,6m0-2a7.47,7.47,0,0,0-5.34,2.24L16,7.36,14.89,6.24a7.49,7.49,0,0,0-10.68,0,7.72,7.72,0,0,0,0,10.82L16,29,27.79,17.06a7.72,7.72,0,0,0,0-10.82A7.49,7.49,0,0,0,22.45,4Z'></path>
|
21 |
+
</svg>
|
22 |
+
<svg class='absolute text-red-500 origin-center transform transition-transform ease-in left-1.5' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' focusable='false' role='img' width='1em' height='1em' preserveAspectRatio='xMidYMid meet' viewBox='0 0 32 32' fill='currentColor'>
|
23 |
+
<path d='M22.5,4c-2,0-3.9,0.8-5.3,2.2L16,7.4l-1.1-1.1C12,3.3,7.2,3.3,4.3,6.2c0,0-0.1,0.1-0.1,0.1c-3,3-3,7.8,0,10.8L16,29l11.8-11.9c3-3,3-7.8,0-10.8C26.4,4.8,24.5,4,22.5,4z'></path>
|
24 |
+
</svg>
|
25 |
+
<span class='ml-4 pl-0.5'>like</span>
|
26 |
+
</button>
|
27 |
+
''', unsafe_allow_html=True)
|
28 |
|
|
|
|
|
29 |
|
30 |
+
# Create text area for user input
|
31 |
+
with st.form(key='user_input_form'):
|
32 |
+
st.markdown("<div style= 'text-align: center;'>The chatbot demonstrates engaging conversation, active listening, knowledge sharing, empathy, and consistent personality traits. <span style='color: orange;'>Please click like button</span>β€οΈ and support me and enjoy it.</div>", unsafe_allow_html=True)
|
33 |
+
user_input = st.text_input("", placeholder="Your message")
|
34 |
+
submitted = st.form_submit_button("Send")
|
35 |
+
|
36 |
+
if submitted:
|
37 |
+
if not user_input.strip(): # Check if input is empty or whitespace
|
38 |
+
st.error('Please enter a chat')
|
39 |
+
else:
|
40 |
+
chat_history = st.session_state['chat_history']
|
41 |
+
with st.spinner(text='Thinking ...'):
|
42 |
+
conversation_bot_result = chatbot(user_input)
|
43 |
+
|
44 |
+
bot_response = conversation_bot_result[0]["generated_text"]
|
45 |
+
chat_history.append({"role": "user", "message": user_input})
|
46 |
+
chat_history.append({"role": "bot", "message": bot_response})
|
47 |
+
|
48 |
+
# Update chat history in session state
|
49 |
+
st.session_state['chat_history'] = chat_history
|
50 |
+
|
51 |
+
# Display the chat history in LIFO order with user messages first
|
52 |
+
for chat in reversed(st.session_state['chat_history']):
|
53 |
+
if chat['role'] == 'user':
|
54 |
+
with st.chat_message("user"):
|
55 |
+
st.write(chat['message'])
|
56 |
else:
|
57 |
+
with st.chat_message("assistant"):
|
58 |
+
st.write(chat['message'])
|
59 |
+
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
style/style.css
CHANGED
@@ -5,8 +5,7 @@ body {
|
|
5 |
}
|
6 |
|
7 |
.stApp {
|
8 |
-
max-width:
|
9 |
-
margin: auto;
|
10 |
padding-top: 50px;
|
11 |
}
|
12 |
|
@@ -15,7 +14,7 @@ body {
|
|
15 |
}
|
16 |
|
17 |
.stButton button {
|
18 |
-
background-color: #4CAF50;
|
19 |
border: none;
|
20 |
color: white;
|
21 |
padding: 15px 32px;
|
@@ -29,33 +28,36 @@ body {
|
|
29 |
}
|
30 |
|
31 |
.stButton button:hover {
|
32 |
-
background-color: #7EC0EE;
|
33 |
}
|
34 |
|
35 |
.chat-container {
|
|
|
36 |
padding: 6px;
|
37 |
border-radius: 5px;
|
38 |
overflow: hidden;
|
39 |
-
box-shadow: 0 4px 8px rgba(
|
40 |
-
overflow: hidden;
|
41 |
}
|
42 |
|
43 |
.user-message {
|
44 |
-
background-color:
|
45 |
-
color:
|
46 |
padding: 10px 20px;
|
47 |
margin: 5px;
|
48 |
-
border-radius:
|
49 |
clear: both;
|
50 |
-
float:
|
|
|
|
|
51 |
}
|
52 |
|
53 |
.bot-message {
|
54 |
-
background-color:
|
55 |
color: black;
|
56 |
padding: 10px 20px;
|
57 |
margin: 5px;
|
58 |
-
border-radius:
|
59 |
clear: both;
|
60 |
-
float:
|
|
|
61 |
}
|
|
|
5 |
}
|
6 |
|
7 |
.stApp {
|
8 |
+
max-width: 100%;
|
|
|
9 |
padding-top: 50px;
|
10 |
}
|
11 |
|
|
|
14 |
}
|
15 |
|
16 |
.stButton button {
|
17 |
+
background-color: #4CAF50;
|
18 |
border: none;
|
19 |
color: white;
|
20 |
padding: 15px 32px;
|
|
|
28 |
}
|
29 |
|
30 |
.stButton button:hover {
|
31 |
+
background-color: #7EC0EE;
|
32 |
}
|
33 |
|
34 |
.chat-container {
|
35 |
+
background-color: white;
|
36 |
padding: 6px;
|
37 |
border-radius: 5px;
|
38 |
overflow: hidden;
|
39 |
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
|
40 |
}
|
41 |
|
42 |
.user-message {
|
43 |
+
background-color: rgba(0, 0, 255, 0.2); /* Transparent blue color */
|
44 |
+
color: black;
|
45 |
padding: 10px 20px;
|
46 |
margin: 5px;
|
47 |
+
border-radius: 15px; /* Round border */
|
48 |
clear: both;
|
49 |
+
float: right;
|
50 |
+
border: 1px solid black; /* Black border */
|
51 |
+
text-align: center;
|
52 |
}
|
53 |
|
54 |
.bot-message {
|
55 |
+
background-color: rgba(0, 0, 255, 0.2); /* Transparent blue color */
|
56 |
color: black;
|
57 |
padding: 10px 20px;
|
58 |
margin: 5px;
|
59 |
+
border-radius: 15px; /* Round border */
|
60 |
clear: both;
|
61 |
+
float: left;
|
62 |
+
border: 1px solid black; /* Black border */
|
63 |
}
|