Hugging Face's logo

Spaces:
agnixcode
/
rag_agent
Sleeping

App Files Community
agnixcode commited on
Commit
06fe8f5
·
verified ·
1 Parent(s): f173d1b

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +238 -54
app.py CHANGED
@@ -9,83 +9,267 @@ from sentence_transformers import SentenceTransformer
9
 
10
  css = """
11
 
12
- /* =========================
13
- TELEKOM CORPORATE THEME (Clean & Professional)
14
- ========================= */
 
 
 
15
 
16
  :root {
17
- --telekom-magenta: #E20074;
18
- --bg-color: #F4F4F6;
19
- --text-color: #333333;
20
- --surface: #FFFFFF;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
21
  }
22
 
23
- /* Background */
 
 
24
  body {
25
- background-color: var(--bg-color);
26
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
27
- color: var(--text-color);
 
 
 
 
28
  }
29
 
30
- /* Main Container */
31
  .gradio-container {
32
- max-width: 1000px !important;
33
- background: var(--surface);
34
- border-radius: 8px;
35
- box-shadow: 0 4px 12px rgba(0,0,0,0.08);
36
- padding: 40px !important;
37
- margin-top: 20px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
38
  }
39
 
40
- /* Typography */
41
- h1, h2, h3 {
42
- color: var(--text-color);
43
- font-weight: 600;
 
 
 
 
 
 
 
44
  }
45
 
46
- /* Primary Action Colors */
47
- h1 span { color: var(--telekom-magenta); }
 
 
48
 
49
- /* Chatbot Area */
50
- .gradio-chatbot {
51
- border: 1px solid #E0E0E0 !important;
52
- background: transparent !important;
53
- border-radius: 4px !important;
 
 
54
  }
55
 
56
- /* Message Bubbles */
57
- .message.user {
58
- background: var(--telekom-magenta) !important;
59
- color: white !important;
60
- border-radius: 4px !important;
 
 
 
 
61
  }
62
 
63
- .message.bot {
64
- background: #EEEEEE !important;
65
- color: #333333 !important;
66
- border-radius: 4px !important;
67
- border-left: 4px solid var(--telekom-magenta) !important;
 
 
 
 
 
 
68
  }
69
 
70
- /* Input Box */
71
- textarea {
72
- border: 1px solid #CCCCCC !important;
73
- border-radius: 4px !important;
74
- padding: 10px !important;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
75
  }
76
 
77
- /* Buttons */
78
- button {
79
- background: var(--telekom-magenta) !important;
80
- color: white !important;
81
- border-radius: 4px !important;
82
- font-weight: 600 !important;
83
- border: none !important;
84
- transition: background 0.3s ease;
85
  }
86
 
87
- button:hover {
88
- background: #c20063 !important;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
89
  }
90
  """
91
 
 
9
 
10
  css = """
11
 
12
+ /* ================================================================
13
+ DEUTSCHE TELEKOM — FINANCE RAG SYSTEM
14
+ Corporate Magenta · Clean · Professional · Premium
15
+ ================================================================ */
16
+
17
+ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700;800&family=DM+Mono:wght@400;500&display=swap');
18
 
19
  :root {
20
+ --magenta: #E20074;
21
+ --magenta-dark: #B5005C;
22
+ --magenta-light: #FF3399;
23
+ --magenta-pale: #FFE6F2;
24
+ --black: #0A0A0A;
25
+ --dark: #111111;
26
+ --grey-900: #1A1A1A;
27
+ --grey-800: #242424;
28
+ --grey-700: #3A3A3A;
29
+ --grey-400: #888888;
30
+ --grey-200: #EBEBEB;
31
+ --grey-100: #F5F5F5;
32
+ --white: #FFFFFF;
33
+ --success: #00C896;
34
+ --warning: #FFB700;
35
+
36
+ --font-main: 'Sora', sans-serif;
37
+ --font-mono: 'DM Mono', monospace;
38
+
39
+ --radius-sm: 4px;
40
+ --radius-md: 8px;
41
+ --radius-lg: 16px;
42
+ --radius-xl: 24px;
43
+
44
+ --shadow-sm: 0 1px 4px rgba(0,0,0,0.12);
45
+ --shadow-md: 0 4px 20px rgba(0,0,0,0.15);
46
+ --shadow-lg: 0 8px 40px rgba(0,0,0,0.20);
47
+ --shadow-magenta: 0 4px 24px rgba(226,0,116,0.25);
48
  }
49
 
50
+ /* ---- RESET & BASE ---- */
51
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
52
+
53
  body {
54
+ font-family: var(--font-main) !important;
55
+ background: #0D0D0D !important;
56
+ color: var(--white) !important;
57
+ min-height: 100vh;
58
+ background-image:
59
+ radial-gradient(ellipse 80% 60% at 10% -10%, rgba(226,0,116,0.12) 0%, transparent 60%),
60
+ radial-gradient(ellipse 60% 40% at 90% 110%, rgba(226,0,116,0.08) 0%, transparent 50%);
61
  }
62
 
63
+ /* ---- MAIN CONTAINER ---- */
64
  .gradio-container {
65
+ max-width: 1100px !important;
66
+ margin: 0 auto !important;
67
+ padding: 0 !important;
68
+ background: transparent !important;
69
+ box-shadow: none !important;
70
+ }
71
+
72
+ /* ---- HEADER BAND ---- */
73
+ .gr-markdown:first-of-type {
74
+ background: linear-gradient(135deg, var(--magenta) 0%, #B5005C 100%) !important;
75
+ border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
76
+ padding: 36px 48px 32px !important;
77
+ margin-bottom: 32px !important;
78
+ box-shadow: var(--shadow-magenta) !important;
79
+ position: relative;
80
+ overflow: hidden;
81
+ }
82
+
83
+ .gr-markdown:first-of-type::before {
84
+ content: '';
85
+ position: absolute;
86
+ top: -60px; right: -60px;
87
+ width: 220px; height: 220px;
88
+ border-radius: 50%;
89
+ background: rgba(255,255,255,0.08);
90
  }
91
 
92
+ .gr-markdown:first-of-type::after {
93
+ content: 'T';
94
+ position: absolute;
95
+ right: 40px; bottom: -20px;
96
+ font-family: var(--font-main);
97
+ font-size: 140px;
98
+ font-weight: 800;
99
+ color: rgba(255,255,255,0.07);
100
+ line-height: 1;
101
+ pointer-events: none;
102
+ user-select: none;
103
  }
104
 
105
+ /* ---- MARKDOWN HEADINGS ---- */
106
+ h1 { font-size: 2rem !important; font-weight: 800 !important; letter-spacing: -0.5px !important; }
107
+ h2 { font-size: 1.4rem !important; font-weight: 700 !important; }
108
+ h3 { font-size: 1.1rem !important; font-weight: 600 !important; }
109
 
110
+ /* ---- CARD PANELS ---- */
111
+ .gr-box, .gr-panel, .gr-group, .gr-form,
112
+ [class*="panel"], [class*="block"], .gap {
113
+ background: var(--grey-900) !important;
114
+ border: 1px solid var(--grey-800) !important;
115
+ border-radius: var(--radius-lg) !important;
116
+ box-shadow: var(--shadow-sm) !important;
117
  }
118
 
119
+ /* ---- LABELS ---- */
120
+ label, .gr-label, .label-wrap span {
121
+ font-family: var(--font-main) !important;
122
+ font-size: 0.72rem !important;
123
+ font-weight: 600 !important;
124
+ letter-spacing: 0.08em !important;
125
+ text-transform: uppercase !important;
126
+ color: var(--grey-400) !important;
127
+ margin-bottom: 6px !important;
128
  }
129
 
130
+ /* ---- TEXTBOXES / INPUTS ---- */
131
+ textarea, input[type="text"] {
132
+ font-family: var(--font-main) !important;
133
+ background: var(--grey-800) !important;
134
+ color: var(--white) !important;
135
+ border: 1px solid var(--grey-700) !important;
136
+ border-radius: var(--radius-md) !important;
137
+ padding: 12px 16px !important;
138
+ font-size: 0.9rem !important;
139
+ transition: border-color 0.2s, box-shadow 0.2s !important;
140
+ outline: none !important;
141
  }
142
 
143
+ textarea:focus, input[type="text"]:focus {
144
+ border-color: var(--magenta) !important;
145
+ box-shadow: 0 0 0 3px rgba(226,0,116,0.15) !important;
146
+ }
147
+
148
+ textarea::placeholder, input[type="text"]::placeholder {
149
+ color: var(--grey-400) !important;
150
+ font-style: italic;
151
+ }
152
+
153
+ /* ---- BUTTONS ---- */
154
+ button, .gr-button {
155
+ font-family: var(--font-main) !important;
156
+ font-weight: 700 !important;
157
+ font-size: 0.85rem !important;
158
+ letter-spacing: 0.04em !important;
159
+ text-transform: uppercase !important;
160
+ padding: 12px 28px !important;
161
+ border-radius: var(--radius-md) !important;
162
+ border: none !important;
163
+ cursor: pointer !important;
164
+ transition: all 0.2s ease !important;
165
+ position: relative;
166
+ overflow: hidden;
167
+ }
168
+
169
+ button::after {
170
+ content: '';
171
+ position: absolute;
172
+ inset: 0;
173
+ background: rgba(255,255,255,0);
174
+ transition: background 0.2s;
175
+ }
176
+
177
+ button:hover::after { background: rgba(255,255,255,0.08) !important; }
178
+
179
+ /* Primary */
180
+ button.primary, .gr-button-primary, button[variant="primary"] {
181
+ background: var(--magenta) !important;
182
+ color: var(--white) !important;
183
+ box-shadow: var(--shadow-magenta) !important;
184
  }
185
 
186
+ button.primary:hover, .gr-button-primary:hover {
187
+ background: var(--magenta-dark) !important;
188
+ box-shadow: 0 6px 28px rgba(226,0,116,0.40) !important;
189
+ transform: translateY(-1px) !important;
 
 
 
 
190
  }
191
 
192
+ /* Secondary / Ghost */
193
+ button.secondary, .gr-button-secondary {
194
+ background: transparent !important;
195
+ color: var(--magenta) !important;
196
+ border: 1.5px solid var(--magenta) !important;
197
+ }
198
+
199
+ /* ---- CHATBOT ---- */
200
+ .gr-chatbot, [data-testid="chatbot"], .chatbot {
201
+ background: var(--grey-900) !important;
202
+ border: 1px solid var(--grey-800) !important;
203
+ border-radius: var(--radius-lg) !important;
204
+ box-shadow: var(--shadow-md) !important;
205
+ font-family: var(--font-main) !important;
206
+ }
207
+
208
+ /* User message bubble */
209
+ .message.user, [data-testid="user"] .message,
210
+ .gr-chatbot .user .message, div[class*="user"] {
211
+ background: linear-gradient(135deg, var(--magenta) 0%, #B5005C 100%) !important;
212
+ color: var(--white) !important;
213
+ border-radius: var(--radius-md) var(--radius-md) var(--radius-sm) var(--radius-md) !important;
214
+ padding: 12px 16px !important;
215
+ font-size: 0.88rem !important;
216
+ line-height: 1.6 !important;
217
+ box-shadow: 0 2px 12px rgba(226,0,116,0.25) !important;
218
+ max-width: 75% !important;
219
+ margin-left: auto !important;
220
+ }
221
+
222
+ /* Bot / assistant message bubble */
223
+ .message.bot, [data-testid="bot"] .message,
224
+ .gr-chatbot .bot .message, div[class*="bot"] {
225
+ background: var(--grey-800) !important;
226
+ color: var(--grey-100) !important;
227
+ border-radius: var(--radius-md) var(--radius-md) var(--radius-md) var(--radius-sm) !important;
228
+ border-left: 3px solid var(--magenta) !important;
229
+ padding: 12px 16px !important;
230
+ font-size: 0.88rem !important;
231
+ line-height: 1.6 !important;
232
+ max-width: 80% !important;
233
+ }
234
+
235
+ /* Avatar / icons */
236
+ .avatar-container img { border-radius: 50% !important; }
237
+
238
+ /* ---- STATUS BOX ---- */
239
+ .gr-textbox[readonly] textarea,
240
+ textarea[readonly] {
241
+ background: var(--grey-800) !important;
242
+ border-color: var(--grey-700) !important;
243
+ color: var(--success) !important;
244
+ font-family: var(--font-mono) !important;
245
+ font-size: 0.82rem !important;
246
+ }
247
+
248
+ /* ---- DIVIDERS ---- */
249
+ .gr-padded { padding: 20px !important; }
250
+ .gap { gap: 16px !important; }
251
+
252
+ /* ---- SCROLLBAR ---- */
253
+ ::-webkit-scrollbar { width: 6px; height: 6px; }
254
+ ::-webkit-scrollbar-track { background: var(--grey-900); border-radius: 3px; }
255
+ ::-webkit-scrollbar-thumb { background: var(--grey-700); border-radius: 3px; }
256
+ ::-webkit-scrollbar-thumb:hover { background: var(--magenta); }
257
+
258
+ /* ---- FOOTER ---- */
259
+ footer { display: none !important; }
260
+
261
+ /* ---- ANIMATIONS ---- */
262
+ @keyframes fadeUp {
263
+ from { opacity: 0; transform: translateY(12px); }
264
+ to { opacity: 1; transform: translateY(0); }
265
+ }
266
+
267
+ .gr-chatbot .message { animation: fadeUp 0.25s ease both; }
268
+
269
+ /* ---- RESPONSIVE ---- */
270
+ @media (max-width: 768px) {
271
+ .gradio-container { padding: 0 8px !important; }
272
+ h1 { font-size: 1.5rem !important; }
273
  }
274
  """
275