Sandaruth commited on
Commit
3630a6a
1 Parent(s): b52ddd3
Files changed (2) hide show
  1. app.py +13 -3
  2. htmlTemplates.py +51 -0
app.py CHANGED
@@ -2,6 +2,12 @@ import streamlit as st
2
  from model import Web_qa
3
  import time
4
 
 
 
 
 
 
 
5
  def main():
6
  # Set up the layout --------------------------------------------------------------
7
  st.sidebar.title("Guideline")
@@ -15,7 +21,7 @@ def main():
15
  # Button to connect to Google link ------------------------------------------------
16
 
17
  st.sidebar.markdown('<a href="https://drive.google.com/drive/folders/13v6LsaYH9wEwvqVtlLG1U4OiUHgZ7hY4?usp=sharing" target="_blank" style="display: inline-block;'
18
- 'background-color: none; color: white; padding: 10px 20px; text-align: center;border: 1px solid white;'
19
  'text-decoration: none; cursor: pointer; border-radius: 5px;">Sources</a>',
20
  unsafe_allow_html=True)
21
 
@@ -35,10 +41,14 @@ def main():
35
  st.markdown(f'<script>{js_submit}</script>', unsafe_allow_html=True)
36
  if st.button("Send"):
37
  if user_input:
38
- st.markdown(f'<div style="padding: 10px; margin-bottom: 10px; background-color: #475063; border-radius: 10px;">Question - {user_input}</div>', unsafe_allow_html=True)
39
  # Add bot response here (you can replace this with your bot logic)
40
  response, metadata, source_documents = generate_bot_response(user_input)
41
- st.markdown(f'<div style="padding: 10px; margin-bottom: 10px; background-color: #475063; border-radius: 10px;">{response}</div>', unsafe_allow_html=True)
 
 
 
 
42
  # Source documents
43
  print("metadata", metadata)
44
  st.sidebar.title("Source Documents")
 
2
  from model import Web_qa
3
  import time
4
 
5
+ from htmlTemplates import css, bot_template, user_template, source_template
6
+
7
+ st.set_page_config(page_title="Chat with papers",
8
+ page_icon=":books:")
9
+ st.write(css, unsafe_allow_html=True)
10
+
11
  def main():
12
  # Set up the layout --------------------------------------------------------------
13
  st.sidebar.title("Guideline")
 
21
  # Button to connect to Google link ------------------------------------------------
22
 
23
  st.sidebar.markdown('<a href="https://drive.google.com/drive/folders/13v6LsaYH9wEwvqVtlLG1U4OiUHgZ7hY4?usp=sharing" target="_blank" style="display: inline-block;'
24
+ 'background-color: #475063; color: white; padding: 10px 20px; text-align: center;border: 1px solid white;'
25
  'text-decoration: none; cursor: pointer; border-radius: 5px;">Sources</a>',
26
  unsafe_allow_html=True)
27
 
 
41
  st.markdown(f'<script>{js_submit}</script>', unsafe_allow_html=True)
42
  if st.button("Send"):
43
  if user_input:
44
+
45
  # Add bot response here (you can replace this with your bot logic)
46
  response, metadata, source_documents = generate_bot_response(user_input)
47
+ st.write(user_template.replace(
48
+ "{{MSG}}", user_input), unsafe_allow_html=True)
49
+ st.write(bot_template.replace(
50
+ "{{MSG}}", response ), unsafe_allow_html=True)
51
+
52
  # Source documents
53
  print("metadata", metadata)
54
  st.sidebar.title("Source Documents")
htmlTemplates.py ADDED
@@ -0,0 +1,51 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ css = '''
2
+ <style>
3
+ .chat-message {
4
+ padding: 1.5rem; border-radius: 0.5rem; margin-bottom: 1rem; display: flex
5
+ }
6
+ .chat-message.user {
7
+ background-color: #2b313e
8
+ }
9
+ .chat-message.bot {
10
+ background-color: #475063
11
+ }
12
+ .chat-message .avatar {
13
+ width: 20%;
14
+ }
15
+ .chat-message .avatar img {
16
+ max-width: 78px;
17
+ max-height: 78px;
18
+ border-radius: 50%;
19
+ object-fit: cover;
20
+ }
21
+ .chat-message .message {
22
+ width: 80%;
23
+ padding: 0 1.5rem;
24
+ color: #fff;
25
+ }
26
+ '''
27
+
28
+ bot_template = '''
29
+ <div class="chat-message bot">
30
+ <div class="avatar">
31
+ <img src="https://cdn-icons-png.flaticon.com/128/4712/4712038.png">
32
+ </div>
33
+ <div class="message">{{MSG}}</div>
34
+ </div>
35
+ '''
36
+ user_template = '''
37
+ <div class="chat-message user">
38
+ <div class="avatar">
39
+ # <img src="https://cdn-icons-png.flaticon.com/512/1177/1177568.png">
40
+ </div>
41
+ <div class="message">{{MSG}}</div>
42
+ </div>
43
+ '''
44
+ source_template = '''
45
+ <div class="chat-message bot">
46
+ <div class="avatar">
47
+ <img src="https://st.depositphotos.com/1427101/4468/v/950/depositphotos_44680417-stock-illustration-pdf-paper-sheet-icons.jpg">
48
+ </div>
49
+ <div class="message">{{MSG}}</div>
50
+ </div>
51
+ '''