garyd1 commited on
Commit
89357cf
·
verified ·
1 Parent(s): f38e2a5

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +32 -20
app.py CHANGED
@@ -37,37 +37,42 @@ if not st.session_state.cleanup_done:
37
  if not os.path.exists(UPLOAD_DIR):
38
  os.makedirs(UPLOAD_DIR, exist_ok=True)
39
 
40
- # Custom CSS for Wattpad-like theme with background and header
41
  st.markdown(
42
  """
43
  <style>
44
  body {
45
- background-color: #FFF7F0;
46
- color: #333333;
47
- font-family: 'Helvetica Neue', sans-serif;
48
- background-image: url('https://drive.google.com/uc?export=view&id=17Vg5hM0-X7fUy2BdYCFqSAQtJVDqYErU');
49
  background-size: cover;
50
- background-position: top center;
51
  }
52
  .stButton button {
53
- background-color: #FF5000;
54
  color: white;
55
- border-radius: 12px;
56
  border: none;
57
  padding: 10px 20px;
58
  font-weight: bold;
 
59
  }
60
  .stButton button:hover {
61
- background-color: #E64500;
62
  }
63
  .stTextInput > div > input {
64
- border: 1px solid #FF5000;
65
- border-radius: 10px;
 
 
66
  padding: 10px;
67
  }
68
  .stFileUploader > div {
69
- border: 2px dashed #FF5000;
70
- border-radius: 10px;
 
 
71
  padding: 10px;
72
  }
73
  .header {
@@ -75,17 +80,25 @@ st.markdown(
75
  align-items: center;
76
  gap: 10px;
77
  padding-top: 50px;
 
 
 
 
 
 
 
 
78
  }
79
  </style>
80
  """,
81
  unsafe_allow_html=True
82
  )
83
 
84
- # Wattpad-like header without logo
85
  st.markdown(
86
  """
87
  <div class="header" style="display: flex; align-items: center; gap: 10px;">
88
- <h1 style="color: #FF5000; font-weight: bold;">Hi, we're here to help you.</h1>
89
  </div>
90
  """,
91
  unsafe_allow_html=True
@@ -122,10 +135,9 @@ if uploaded_file is not None:
122
  embedding
123
  )
124
 
125
- template = '''You are Xailor.AI's friendly chatbot assistant. Your role is to assist users with insightful answers about their pdf, creative writing, and using Xailor.AI . Answer the {question} based only on the provided {context}. After answering the question, recommend Xailor.AI services that may interest the user based on the content of the PDF or the question. Be friendly, creative, and concise. Use a maximum of three sentences for the answer, and add one or two relevant story recommendations with a brief description and a link. If you're unsure about the answer, respond with "I'm not sure about that, but feel free to explore more on Wattpad!"'''
126
 
127
 
128
-
129
  prompt = ChatPromptTemplate.from_template(template)
130
  retriever = vector_base.as_retriever()
131
 
@@ -153,9 +165,9 @@ if uploaded_file is not None:
153
  for idx, entry in enumerate(st.session_state.history):
154
  st.markdown(
155
  f"""
156
- <div style="background-color: #FFFAF5; padding: 10px; border-radius: 10px; margin-bottom: 10px;">
157
- <p style="font-weight: bold; color: #FF5000;">Q{idx + 1}: {entry['question']}</p>
158
- <p style="color: black;">A{idx + 1}: {entry['answer']}</p>
159
  </div>
160
  """,
161
  unsafe_allow_html=True
 
37
  if not os.path.exists(UPLOAD_DIR):
38
  os.makedirs(UPLOAD_DIR, exist_ok=True)
39
 
40
+ # Custom CSS for Xailor.ai-like theme with background and header
41
  st.markdown(
42
  """
43
  <style>
44
  body {
45
+ background-color: #0D1117;
46
+ color: #C9D1D9;
47
+ font-family: 'Arial', sans-serif;
48
+ background-image: url('https://www.xailor.ai/assets/background.svg');
49
  background-size: cover;
50
+ background-position: center;
51
  }
52
  .stButton button {
53
+ background-color: #1F6FEB;
54
  color: white;
55
+ border-radius: 8px;
56
  border: none;
57
  padding: 10px 20px;
58
  font-weight: bold;
59
+ font-size: 14px;
60
  }
61
  .stButton button:hover {
62
+ background-color: #1A4FC5;
63
  }
64
  .stTextInput > div > input {
65
+ border: 1px solid #30363D;
66
+ background-color: #161B22;
67
+ color: #C9D1D9;
68
+ border-radius: 6px;
69
  padding: 10px;
70
  }
71
  .stFileUploader > div {
72
+ border: 2px dashed #30363D;
73
+ background-color: #161B22;
74
+ color: #C9D1D9;
75
+ border-radius: 6px;
76
  padding: 10px;
77
  }
78
  .header {
 
80
  align-items: center;
81
  gap: 10px;
82
  padding-top: 50px;
83
+ color: #58A6FF;
84
+ }
85
+ .response-box {
86
+ background-color: #161B22;
87
+ padding: 10px;
88
+ border-radius: 6px;
89
+ margin-bottom: 10px;
90
+ color: #FFFFFF;
91
  }
92
  </style>
93
  """,
94
  unsafe_allow_html=True
95
  )
96
 
97
+ # Xailor.ai-like header without logo
98
  st.markdown(
99
  """
100
  <div class="header" style="display: flex; align-items: center; gap: 10px;">
101
+ <h1 style="font-weight: bold;">Welcome to Xailor AI Chat!</h1>
102
  </div>
103
  """,
104
  unsafe_allow_html=True
 
135
  embedding
136
  )
137
 
138
+ template = '''You are Xailor.AI's friendly chatbot assistant. Your role is to assist users with insightful answers about their pdf, creative writing, and using Xailor.AI . Answer the {question} based only on the provided {context}. After answering the question, recommend Xailor.AI services that may interest the user based on the content of the PDF or the question. Be friendly, creative, and concise. Use a maximum of three sentences for the answer, and add one or two relevant story recommendations with a brief description and a link. If you're unsure about the answer, respond with "I'm not sure about that, but feel free to explore more on Xailor.AI!"'''
139
 
140
 
 
141
  prompt = ChatPromptTemplate.from_template(template)
142
  retriever = vector_base.as_retriever()
143
 
 
165
  for idx, entry in enumerate(st.session_state.history):
166
  st.markdown(
167
  f"""
168
+ <div class="response-box">
169
+ <p style="font-weight: bold; color: #58A6FF;">Q{idx + 1}: {entry['question']}</p>
170
+ <p style="color: #FFFFFF;">A{idx + 1}: {entry['answer']}</p>
171
  </div>
172
  """,
173
  unsafe_allow_html=True