Hugging Face's logo

Spaces:
Anshini
/
DataSciene_ChatBot
Sleeping

App Files Community
Anshini commited on
Commit
0afb4fe
·
verified ·
1 Parent(s): 6a3a5a2

Update pages/Deep_Learning.py

Browse files
Files changed (1) hide show
  1. pages/Deep_Learning.py +37 -18
pages/Deep_Learning.py CHANGED
@@ -11,41 +11,60 @@ os.environ['HF_TOKEN'] = hf
11
  # Page config
12
  st.set_page_config(page_title="Deep Learning Mentor Chat", layout="centered")
13
 
14
- # Custom CSS for modern chat UI
15
  st.markdown("""
16
  <style>
17
  .main {
18
- background: linear-gradient(135deg, #430089 0%, #82ffa1 100%);
19
  padding: 2rem;
20
  font-family: 'Segoe UI', sans-serif;
21
  }
22
  .stButton>button {
23
- background: #ffffff10;
24
- border: 2px solid #ffffff50;
25
  color: white;
26
- font-size: 18px;
27
  font-weight: 600;
28
- padding: 0.8em 1.2em;
29
- border-radius: 12px;
30
- width: 100%;
31
- transition: 0.3s ease;
32
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
33
  }
34
  .stButton>button:hover {
35
- background: #ffffff30;
 
36
  border-color: #fff;
37
- color: #ffffff;
38
  }
39
  h1, h3, p, label {
40
- color: #ffffff;
41
  text-align: center;
42
  }
43
- hr {
44
- border: 1px solid #ffffff50;
45
- margin: 2em 0;
 
 
 
 
 
 
 
 
46
  }
47
- .css-1aumxhk {
48
- color: white;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
49
  }
50
  </style>
51
  """, unsafe_allow_html=True)
 
11
  # Page config
12
  st.set_page_config(page_title="Deep Learning Mentor Chat", layout="centered")
13
 
14
+ # Improved custom CSS
15
  st.markdown("""
16
  <style>
17
  .main {
18
+ background: linear-gradient(to right, #1f4037, #99f2c8);
19
  padding: 2rem;
20
  font-family: 'Segoe UI', sans-serif;
21
  }
22
  .stButton>button {
23
+ background-color: #ffffff10;
 
24
  color: white;
 
25
  font-weight: 600;
26
+ border-radius: 10px;
27
+ padding: 0.6rem 1rem;
28
+ transition: all 0.3s ease;
29
+ border: 1px solid white;
 
30
  }
31
  .stButton>button:hover {
32
+ background-color: #ffffff30;
33
+ color: white;
34
  border-color: #fff;
 
35
  }
36
  h1, h3, p, label {
37
+ color: white;
38
  text-align: center;
39
  }
40
+ .chat-bubble-user {
41
+ background-color: #ffffff25;
42
+ padding: 0.75rem 1rem;
43
+ border-radius: 1rem;
44
+ margin-bottom: 0.5rem;
45
+ color: #fff;
46
+ font-weight: 500;
47
+ text-align: left;
48
+ width: fit-content;
49
+ max-width: 90%;
50
+ align-self: flex-end;
51
  }
52
+ .chat-bubble-bot {
53
+ background-color: #ffffff15;
54
+ padding: 0.75rem 1rem;
55
+ border-radius: 1rem;
56
+ margin-bottom: 0.5rem;
57
+ color: #fff;
58
+ text-align: left;
59
+ width: fit-content;
60
+ max-width: 90%;
61
+ align-self: flex-start;
62
+ }
63
+ .chat-container {
64
+ display: flex;
65
+ flex-direction: column;
66
+ gap: 0.5rem;
67
+ margin-top: 2rem;
68
  }
69
  </style>
70
  """, unsafe_allow_html=True)