Hugging Face's logo

Spaces:
CosmickVisions
/
Data-Vision
Running

App Files Community
CosmickVisions commited on
Commit
eb07713
·
verified ·
1 Parent(s): d092d3c

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +168 -147
app.py CHANGED
@@ -29,153 +29,174 @@ embeddings = HuggingFaceEmbeddings(model_name="sentence-transformers/all-MiniLM-
29
 
30
  # Custom CSS with improved spacing, sizing, and UI/UX
31
  st.markdown("""
32
- <style>
33
- :root {
34
- --silver: #D8D8D8;
35
- --blue: #5C89BC;
36
- --gold: #A87E01;
37
- --text-color: #333333;
38
- --spacing-unit: 1.5rem;
39
- }
40
- .stApp {
41
- background-color: var(--silver);
42
- font-family: 'Inter', sans-serif;
43
- padding: var(--spacing-unit);
44
- height: 100vh;
45
- overflow-y: auto;
46
- display: flex;
47
- flex-direction: column;
48
- }
49
- .header {
50
- background-color: var(--blue);
51
- color: white;
52
- padding: var(--spacing-unit);
53
- border-radius: 8px;
54
- text-align: center;
55
- margin-bottom: var(--spacing-unit);
56
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
57
- }
58
- .header-title {
59
- font-size: 2rem;
60
- font-weight: 700;
61
- margin: 0;
62
- }
63
- .header-subtitle {
64
- font-size: 1rem;
65
- margin-top: 0.5rem;
66
- opacity: 0.9;
67
- }
68
- .nav-bar {
69
- background-color: white;
70
- border-radius: 8px;
71
- padding: 1rem;
72
- display: flex;
73
- gap: 1rem;
74
- align-items: center;
75
- flex-wrap: wrap;
76
- margin-bottom: var(--spacing-unit);
77
- box-shadow: 0 2px 5px rgba(0,0,0,0.05);
78
- }
79
- .nav-item {
80
- color: var(--blue);
81
- font-weight: 500;
82
- padding: 0.75rem 1.5rem;
83
- border-radius: 5px;
84
- text-align: center;
85
- transition: all 0.2s ease;
86
- flex: 1;
87
- }
88
- .nav-item:hover {
89
- background-color: var(--gold);
90
- color: white;
91
- }
92
- .main-container {
93
- background-color: white;
94
- border-radius: 8px;
95
- padding: var(--spacing-unit);
96
- flex-grow: 1;
97
- margin-bottom: var(--spacing-unit);
98
- box-shadow: 0 2px 5px rgba(0,0,0,0.05);
99
- }
100
- .chat-container {
101
- background-color: white;
102
- border-radius: 8px 8px 0 0;
103
- padding: 1rem;
104
- position: fixed;
105
- bottom: 0;
106
- left: var(--spacing-unit);
107
- right: var(--spacing-unit);
108
- max-height: 40vh;
109
- overflow-y: auto;
110
- box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
111
- z-index: 1000;
112
- }
113
- .chat-message-container {
114
- margin-bottom: 0.5rem;
115
- }
116
- .user-message, .bot-message {
117
- padding: 0.75rem 1rem;
118
- border-radius: 12px;
119
- margin-bottom: 0.5rem;
120
- max-width: 70%;
121
- word-wrap: break-word;
122
- }
123
- .user-message {
124
- background-color: var(--blue);
125
- color: white;
126
- margin-left: auto;
127
- box-shadow: 0 1px 3px rgba(0,0,0,0.1);
128
- }
129
- .bot-message {
130
- background-color: #F0F0F0;
131
- color: var(--text-color);
132
- margin-right: auto;
133
- box-shadow: 0 1px 3px rgba(0,0,0,0.05);
134
- }
135
- .footer {
136
- text-align: center;
137
- color: var(--text-color);
138
- font-size: 0.9rem;
139
- padding: 1rem 0;
140
- margin-top: auto;
141
- }
142
- h2 {
143
- color: var(--blue);
144
- border-bottom: 2px solid var(--gold);
145
- padding-bottom: 0.5rem;
146
- font-size: 1.5rem;
147
- margin-bottom: 1rem;
148
- }
149
- .stButton > button {
150
- background-color: var(--gold);
151
- color: white;
152
- border-radius: 5px;
153
- padding: 0.75rem 1.5rem;
154
- font-weight: 500;
155
- transition: background-color 0.2s ease;
156
- }
157
- .stButton > button:hover {
158
- background-color: #8C6B01;
159
- }
160
- .stTextInput > div > div > input {
161
- border-radius: 5px;
162
- padding: 0.75rem;
163
- }
164
- @media (max-width: 768px) {
165
- .header-title { font-size: 1.5rem; }
166
- .header-subtitle { font-size: 0.9rem; }
167
- .nav-bar { flex-direction: column; padding: 0.75rem; gap: 0.5rem; }
168
- .nav-item { padding: 0.5rem; }
169
- .main-container { padding: 1rem; }
170
- .chat-container { padding: 0.75rem; max-height: 50vh; }
171
- h2 { font-size: 1.2rem; }
172
- }
173
- @media (max-width: 480px) {
174
- .header-title { font-size: 1.2rem; }
175
- .stApp { padding: 0.75rem; }
176
- .chat-container { left: 0.75rem; right: 0.75rem; }
177
- }
178
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
179
  """, unsafe_allow_html=True)
180
 
181
  # Helper Functions (fully implemented from original intent)
 
29
 
30
  # Custom CSS with improved spacing, sizing, and UI/UX
31
  st.markdown("""
32
+ <style>
33
+ /* Define CSS variables for reusability */
34
+ :root {
35
+ --primary-blue: #003366; /* Deep blue for headers and accents */
36
+ --light-gray: #F5F5F5; /* Light gray for backgrounds */
37
+ --dark-gray: #333333; /* Dark gray for text */
38
+ --accent-gold: #B8860B; /* Muted gold for highlights */
39
+ --spacing-unit: 1.5rem; /* Standard spacing unit */
40
+ }
41
+
42
+ /* Main app container */
43
+ .stApp {
44
+ background-color: var(--light-gray);
45
+ font-family: 'Inter', sans-serif;
46
+ padding: var(--spacing-unit);
47
+ height: 100vh;
48
+ overflow-y: auto;
49
+ display: flex;
50
+ flex-direction: column;
51
+ }
52
+
53
+ /* Header styling */
54
+ .header {
55
+ background-color: var(--primary-blue);
56
+ color: white;
57
+ padding: var(--spacing-unit);
58
+ border-radius: 8px;
59
+ text-align: center;
60
+ margin-bottom: var(--spacing-unit);
61
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
62
+ }
63
+ .header-title {
64
+ font-size: 2rem;
65
+ font-weight: 700;
66
+ margin: 0;
67
+ }
68
+ .header-subtitle {
69
+ font-size: 1rem;
70
+ margin-top: 0.5rem;
71
+ opacity: 0.9;
72
+ }
73
+
74
+ /* Navigation bar */
75
+ .nav-bar {
76
+ background-color: white;
77
+ border-radius: 8px;
78
+ padding: 1rem;
79
+ display: flex;
80
+ gap: 1rem;
81
+ align-items: center;
82
+ flex-wrap: wrap;
83
+ margin-bottom: var(--spacing-unit);
84
+ box-shadow: 0 2px 5px rgba(0,0,0,0.05);
85
+ }
86
+ .nav-item {
87
+ color: var(--primary-blue);
88
+ font-weight: 500;
89
+ padding: 0.75rem 1.5rem;
90
+ border-radius: 5px;
91
+ text-align: center;
92
+ transition: all 0.2s ease;
93
+ flex: 1;
94
+ }
95
+ .nav-item:hover {
96
+ background-color: var(--accent-gold);
97
+ color: white;
98
+ }
99
+
100
+ /* Main content area */
101
+ .main-container {
102
+ background-color: white;
103
+ border-radius: 8px;
104
+ padding: 2rem; /* Increased padding for spacing */
105
+ flex-grow: 1;
106
+ margin-bottom: var(--spacing-unit);
107
+ box-shadow: 0 2px 5px rgba(0,0,0,0.05);
108
+ }
109
+
110
+ /* Chatbot container */
111
+ .chat-container {
112
+ background-color: white;
113
+ border-radius: 8px 8px 0 0;
114
+ padding: 1rem;
115
+ position: fixed;
116
+ bottom: 0;
117
+ left: var(--spacing-unit);
118
+ right: var(--spacing-unit);
119
+ max-height: 40vh;
120
+ overflow-y: auto;
121
+ box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
122
+ z-index: 1000;
123
+ }
124
+ .chat-message-container {
125
+ margin-bottom: 0.5rem;
126
+ }
127
+ .user-message, .bot-message {
128
+ padding: 0.75rem 1rem;
129
+ border-radius: 12px;
130
+ margin-bottom: 0.5rem;
131
+ max-width: 70%;
132
+ word-wrap: break-word;
133
+ }
134
+ .user-message {
135
+ background-color: var(--primary-blue);
136
+ color: white;
137
+ margin-left: auto;
138
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
139
+ }
140
+ .bot-message {
141
+ background-color: #F0F0F0;
142
+ color: var(--dark-gray);
143
+ margin-right: auto;
144
+ box-shadow: 0 1px 3px rgba(0,0,0,0.05);
145
+ }
146
+
147
+ /* Footer */
148
+ .footer {
149
+ text-align: center;
150
+ color: var(--dark-gray);
151
+ font-size: 0.9rem;
152
+ padding: 1rem 0;
153
+ margin-top: auto;
154
+ }
155
+
156
+ /* Headings */
157
+ h2 {
158
+ color: var(--primary-blue);
159
+ border-bottom: 2px solid var(--accent-gold);
160
+ padding-bottom: 0.5rem;
161
+ font-size: 1.5rem;
162
+ margin-bottom: 1rem;
163
+ }
164
+
165
+ /* Streamlit button styling */
166
+ .stButton > button {
167
+ background-color: var(--accent-gold);
168
+ color: white;
169
+ border-radius: 5px;
170
+ padding: 0.75rem 1.5rem;
171
+ font-weight: 500;
172
+ transition: background-color 0.2s ease;
173
+ }
174
+ .stButton > button:hover {
175
+ background-color: #8C6B01; /* Darker gold on hover */
176
+ }
177
+
178
+ /* Streamlit text input styling */
179
+ .stTextInput > div > div > input {
180
+ border-radius: 5px;
181
+ padding: 0.75rem;
182
+ }
183
+
184
+ /* Responsive design for smaller screens */
185
+ @media (max-width: 768px) {
186
+ .header-title { font-size: 1.5rem; }
187
+ .header-subtitle { font-size: 0.9rem; }
188
+ .nav-bar { flex-direction: column; padding: 0.75rem; gap: 0.5rem; }
189
+ .nav-item { padding: 0.5rem; }
190
+ .main-container { padding: 1.5rem; }
191
+ .chat-container { padding: 0.75rem; max-height: 50vh; }
192
+ h2 { font-size: 1.2rem; }
193
+ }
194
+ @media (max-width: 480px) {
195
+ .header-title { font-size: 1.2rem; }
196
+ .stApp { padding: 0.75rem; }
197
+ .chat-container { left: 0.75rem; right: 0.75rem; }
198
+ }
199
+ </style>
200
  """, unsafe_allow_html=True)
201
 
202
  # Helper Functions (fully implemented from original intent)