Hugging Face's logo

Spaces:
agnixcode
/
rag_agent
Sleeping

App Files Community
agnixcode commited on
Commit
d3ed3b3
·
verified ·
1 Parent(s): 66bea2d

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +187 -194
app.py CHANGED
@@ -8,222 +8,215 @@ from pypdf import PdfReader
8
  from sentence_transformers import SentenceTransformer
9
 
10
  css = """
11
- @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
12
-
13
- *,*::before,*::after{box-sizing:border-box}
14
-
15
- :root{
16
- --M:#E20074;--MD:#B5005C;
17
- --BG:#080008;
18
- --glass:rgba(255,255,255,0.04);
19
- --glass-b:rgba(255,255,255,0.09);
20
- --text:#F2F2F2;--muted:#888;--dim:#444;
21
- --ok:#00C896;
22
- --f:'Plus Jakarta Sans',sans-serif;
23
- --mono:'JetBrains Mono',monospace;
24
- --r-sm:8px;--r-md:14px;--r-lg:20px;--r-xl:28px;
25
- }
26
-
27
- body{
28
- font-family:var(--f)!important;
29
- background:var(--BG)!important;
30
- color:var(--text)!important;
31
- position:relative;overflow-x:hidden;
32
- }
33
-
34
- body::before{
35
- content:'';position:fixed;inset:0;
36
- background:
37
- radial-gradient(ellipse 55% 40% at 10% 5%,rgba(226,0,116,0.18) 0%,transparent 60%),
38
- radial-gradient(ellipse 40% 35% at 88% 85%,rgba(226,0,116,0.12) 0%,transparent 55%),
39
- radial-gradient(ellipse 35% 30% at 70% 15%,rgba(100,0,50,0.14) 0%,transparent 50%);
40
- animation:meshDrift 10s ease-in-out infinite alternate;
41
- pointer-events:none;z-index:0;
42
- }
43
- @keyframes meshDrift{
44
- 0%{opacity:1;transform:scale(1)}
45
- 100%{opacity:.8;transform:scale(1.04) translate(1%,1%)}
46
- }
47
-
48
- body::after{
49
- content:'';position:fixed;inset:0;
50
- background-image:
51
- linear-gradient(rgba(226,0,116,0.034) 1px,transparent 1px),
52
- linear-gradient(90deg,rgba(226,0,116,0.034) 1px,transparent 1px);
53
- background-size:44px 44px;
54
- pointer-events:none;z-index:0;
55
- }
56
-
57
- .gradio-container{
58
- max-width:1080px!important;margin:0 auto!important;
59
- padding:0 24px 48px!important;
60
- background:transparent!important;box-shadow:none!important;
61
- position:relative;z-index:1;
62
  }
63
-
64
- /* HEADER */
65
- .app-header{
66
- background:linear-gradient(145deg,rgba(40,0,20,.92) 0%,rgba(15,0,8,.96) 70%);
67
- backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
68
- border:1px solid rgba(226,0,116,0.25);border-top:3px solid var(--M);
69
- border-radius:0 0 var(--r-xl) var(--r-xl);
70
- padding:28px 40px 26px;margin-bottom:24px;
71
- display:flex;align-items:center;justify-content:space-between;
72
- position:relative;overflow:hidden;
73
  }
74
- .app-header::after{
75
- content:'T';position:absolute;right:24px;bottom:-32px;
76
- font-family:var(--f);font-size:160px;font-weight:800;
77
- color:rgba(226,0,116,0.06);line-height:1;
78
- pointer-events:none;user-select:none;
 
 
79
  }
80
- .header-brand{display:flex;align-items:center;gap:16px}
81
- .t-logo{
82
- width:52px;height:52px;border-radius:14px;
83
- background:linear-gradient(145deg,#E20074,#800040);
84
- display:flex;align-items:center;justify-content:center;
85
- font-size:26px;font-weight:800;color:#fff;
86
- box-shadow:0 0 28px rgba(226,0,116,0.45),0 4px 12px rgba(0,0,0,.4);
87
- flex-shrink:0;font-family:var(--f);
 
 
 
 
88
  }
89
- .header-title{font-size:1.35rem;font-weight:800;letter-spacing:-.035em;color:#fff;line-height:1.2}
90
- .header-title em{
91
- font-style:normal;
92
- background:linear-gradient(135deg,#E20074,#FF6BB5);
93
- -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
 
 
 
 
94
  }
95
- .header-sub{font-size:.65rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px}
96
- .status-pill{
97
- display:flex;align-items:center;gap:8px;
98
- background:rgba(0,200,150,.08);border:1px solid rgba(0,200,150,.22);
99
- border-radius:99px;padding:8px 16px;flex-shrink:0;
100
  }
101
- .pulse-dot{
102
- width:8px;height:8px;border-radius:50%;background:var(--ok);
103
- animation:pDot 2.2s ease-in-out infinite;
 
 
 
 
 
 
 
 
 
104
  }
105
- @keyframes pDot{
106
- 0%,100%{box-shadow:0 0 0 0 rgba(0,200,150,.5)}
107
- 50%{box-shadow:0 0 0 7px rgba(0,200,150,0)}
108
  }
109
- .status-label{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ok)}
110
-
111
- /* CHIPS */
112
- .info-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
113
- .chip{
114
- display:flex;align-items:center;gap:7px;
115
- background:var(--glass);border:1px solid var(--glass-b);
116
- border-radius:99px;padding:6px 14px;
117
- font-size:.65rem;font-weight:600;letter-spacing:.06em;color:var(--muted);
118
- transition:border-color .2s;
119
  }
120
- .chip:hover{border-color:rgba(226,0,116,.35)}
121
- .chip-dot{width:6px;height:6px;border-radius:50%;background:var(--M);flex-shrink:0}
122
-
123
- /* SECTION LABEL */
124
- .section-label{
125
- font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
126
- color:var(--muted);margin-bottom:10px;
127
- display:flex;align-items:center;gap:8px;
 
 
 
 
128
  }
129
- .section-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(226,0,116,.3),transparent)}
130
-
131
- /* GLASS CARDS */
132
- .gr-box,.gr-panel,.gr-group,.gr-form,[class*="panel"],[class*="block"]{
133
- background:var(--glass)!important;
134
- border:1px solid var(--glass-b)!important;
135
- border-radius:var(--r-md)!important;
136
- backdrop-filter:blur(12px)!important;
137
- -webkit-backdrop-filter:blur(12px)!important;
138
- transition:border-color .2s!important;
139
  }
140
- .gr-box:hover,.gr-panel:hover{border-color:rgba(226,0,116,.28)!important}
141
-
142
- /* LABELS */
143
- label,.gr-label,.label-wrap span{
144
- font-family:var(--f)!important;font-size:.62rem!important;font-weight:700!important;
145
- letter-spacing:.10em!important;text-transform:uppercase!important;color:var(--muted)!important;
146
  }
147
-
148
- /* INPUTS */
149
- textarea,input[type="text"]{
150
- font-family:var(--f)!important;background:var(--glass)!important;
151
- color:var(--text)!important;border:1px solid var(--glass-b)!important;
152
- border-radius:var(--r-sm)!important;padding:12px 15px!important;
153
- font-size:.86rem!important;line-height:1.55!important;
154
- transition:border-color .2s,box-shadow .2s!important;
155
  }
156
- textarea:focus,input[type="text"]:focus{
157
- border-color:var(--M)!important;
158
- box-shadow:0 0 0 3px rgba(226,0,116,.14)!important;outline:none!important;
 
 
 
 
 
 
 
 
 
 
159
  }
160
- textarea::placeholder,input[type="text"]::placeholder{color:var(--dim)!important;font-style:italic!important}
161
- textarea[readonly]{
162
- font-family:var(--mono)!important;font-size:.75rem!important;
163
- color:var(--ok)!important;background:rgba(0,200,150,.05)!important;
164
- border-color:rgba(0,200,150,.18)!important;
 
165
  }
166
-
167
- /* BUTTONS */
168
- button,.gr-button{
169
- font-family:var(--f)!important;font-weight:700!important;font-size:.74rem!important;
170
- letter-spacing:.09em!important;text-transform:uppercase!important;
171
- border-radius:var(--r-sm)!important;padding:12px 24px!important;
172
- border:none!important;cursor:pointer!important;transition:all .2s ease!important;
173
- }
174
- button.primary,.gr-button-primary,button[variant="primary"]{
175
- background:linear-gradient(135deg,#E20074 0%,#B5005C 100%)!important;
176
- color:#fff!important;box-shadow:0 4px 22px rgba(226,0,116,.35)!important;
177
  }
178
- button.primary:hover,.gr-button-primary:hover{
179
- box-shadow:0 6px 32px rgba(226,0,116,.55)!important;transform:translateY(-2px)!important;
180
  }
181
- button.secondary,.gr-button-secondary{
182
- background:transparent!important;color:var(--M)!important;
183
- border:1px solid rgba(226,0,116,.4)!important;
 
 
 
 
184
  }
185
- button.secondary:hover{background:rgba(226,0,116,.08)!important}
186
-
187
- /* CHATBOT */
188
- .gr-chatbot,[data-testid="chatbot"]{
189
- background:rgba(255,255,255,.03)!important;
190
- border:1px solid rgba(255,255,255,.08)!important;
191
- border-radius:var(--r-md)!important;backdrop-filter:blur(12px)!important;
 
 
 
 
 
 
192
  }
193
- .message.user,[data-testid="user"] .message{
194
- background:linear-gradient(135deg,#E20074 0%,#B5005C 100%)!important;
195
- color:#fff!important;border-radius:12px 12px 3px 12px!important;
196
- padding:11px 15px!important;font-size:.84rem!important;line-height:1.65!important;
197
- max-width:74%!important;margin-left:auto!important;
198
- box-shadow:0 4px 18px rgba(226,0,116,.28)!important;
199
- animation:slideInR .24s ease!important;
 
 
 
 
 
 
 
200
  }
201
- .message.bot,[data-testid="bot"] .message{
202
- background:rgba(255,255,255,.05)!important;
203
- border:1px solid rgba(255,255,255,.09)!important;
204
- border-left:3px solid var(--M)!important;
205
- color:var(--text)!important;border-radius:3px 12px 12px 12px!important;
206
- padding:11px 15px!important;font-size:.84rem!important;line-height:1.65!important;
207
- max-width:80%!important;animation:slideInL .24s ease!important;
208
  }
209
- @keyframes slideInR{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
210
- @keyframes slideInL{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
211
-
212
- /* SCROLLBAR */
213
- ::-webkit-scrollbar{width:4px;height:4px}
214
- ::-webkit-scrollbar-track{background:rgba(255,255,255,.02)}
215
- ::-webkit-scrollbar-thumb{background:rgba(226,0,116,.3);border-radius:2px}
216
- ::-webkit-scrollbar-thumb:hover{background:var(--M)}
217
-
218
- /* FOOTER */
219
- .app-footer{
220
- display:flex;align-items:center;justify-content:space-between;
221
- padding:16px 0 0;border-top:1px solid rgba(255,255,255,.06);margin-top:8px;
222
  }
223
- .f-text{font-size:.62rem;color:var(--dim)}
224
- .f-text span{color:var(--M);font-weight:600}
225
- footer{display:none!important}
226
- .gap{gap:16px!important}
 
 
 
 
 
 
227
  """
228
 
229
  # ── GLOBALS ────────────────────────────────────────────────────────────────────
 
8
  from sentence_transformers import SentenceTransformer
9
 
10
  css = """
11
+ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
12
+
13
+ *, *::before, *::after { box-sizing: border-box; }
14
+
15
+ :root {
16
+ --M: #E20074;
17
+ --MD: #B5005C;
18
+ --MBG: rgba(226,0,116,0.07);
19
+ --bg: #F6F3F8;
20
+ --white: #FFFFFF;
21
+ --surf2: #F2EEF5;
22
+ --border: #E6DEED;
23
+ --border2: #D0C4DC;
24
+ --text: #1A1525;
25
+ --sub: #5A5272;
26
+ --muted: #9990AA;
27
+ --ok: #00A878;
28
+ --okbg: #E8F8F3;
29
+ --okborder: #AADFC8;
30
+ --f: 'Plus Jakarta Sans', sans-serif;
31
+ --mono: 'JetBrains Mono', monospace;
32
+ --sh-sm: 0 1px 4px rgba(0,0,0,0.06);
33
+ --sh-md: 0 3px 14px rgba(0,0,0,0.08);
34
+ --sh-mg: 0 4px 20px rgba(226,0,116,0.18);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35
  }
36
+
37
+ /* ── BASE ── */
38
+ body {
39
+ font-family: var(--f) !important;
40
+ background: var(--bg) !important;
41
+ color: var(--text) !important;
 
 
 
 
42
  }
43
+
44
+ .gradio-container {
45
+ max-width: 1060px !important;
46
+ margin: 0 auto !important;
47
+ padding: 0 20px 48px !important;
48
+ background: transparent !important;
49
+ box-shadow: none !important;
50
  }
51
+
52
+ /* ── HEADING (gr.Markdown title) ── */
53
+ h1 {
54
+ font-family: var(--f) !important;
55
+ font-size: 1.6rem !important;
56
+ font-weight: 800 !important;
57
+ letter-spacing: -0.03em !important;
58
+ color: var(--text) !important;
59
+ padding: 28px 0 4px !important;
60
+ border-bottom: 3px solid var(--M) !important;
61
+ margin-bottom: 24px !important;
62
+ position: relative;
63
  }
64
+
65
+ /* animated stripe under title */
66
+ h1::after {
67
+ content: '';
68
+ position: absolute;
69
+ bottom: -3px; left: 0;
70
+ width: 80px; height: 3px;
71
+ background: #FF6BB5;
72
+ animation: titleSlide 2s ease-in-out infinite alternate;
73
  }
74
+ @keyframes titleSlide {
75
+ 0% { width: 60px; opacity: 0.6; }
76
+ 100% { width: 160px; opacity: 1; }
 
 
77
  }
78
+
79
+ /* emoji in title stays natural */
80
+ h1 .emoji { color: inherit !important; }
81
+
82
+ /* ── ALL CARDS / PANELS ── */
83
+ .gr-box, .gr-panel, .gr-group, .gr-form,
84
+ [class*="panel"], [class*="block"] {
85
+ background: var(--white) !important;
86
+ border: 1px solid var(--border) !important;
87
+ border-radius: 12px !important;
88
+ box-shadow: var(--sh-sm) !important;
89
+ transition: box-shadow 0.2s, border-color 0.2s !important;
90
  }
91
+ .gr-box:hover, .gr-panel:hover {
92
+ box-shadow: 0 4px 20px rgba(226,0,116,0.10) !important;
93
+ border-color: rgba(226,0,116,0.22) !important;
94
  }
95
+
96
+ /* ── LABELS ── */
97
+ label, .gr-label, .label-wrap span {
98
+ font-family: var(--f) !important;
99
+ font-size: 0.63rem !important;
100
+ font-weight: 700 !important;
101
+ letter-spacing: 0.10em !important;
102
+ text-transform: uppercase !important;
103
+ color: var(--muted) !important;
 
104
  }
105
+
106
+ /* ── INPUTS (link box + question box) ── */
107
+ textarea, input[type="text"] {
108
+ font-family: var(--f) !important;
109
+ background: var(--surf2) !important;
110
+ color: var(--text) !important;
111
+ border: 1px solid var(--border2) !important;
112
+ border-radius: 8px !important;
113
+ padding: 12px 15px !important;
114
+ font-size: 0.88rem !important;
115
+ line-height: 1.55 !important;
116
+ transition: border-color 0.2s, box-shadow 0.2s !important;
117
  }
118
+ textarea:focus, input[type="text"]:focus {
119
+ border-color: var(--M) !important;
120
+ box-shadow: 0 0 0 3px rgba(226,0,116,0.12) !important;
121
+ outline: none !important;
122
+ background: var(--white) !important;
 
 
 
 
 
123
  }
124
+ textarea::placeholder, input[type="text"]::placeholder {
125
+ color: var(--muted) !important;
 
 
 
 
126
  }
127
+
128
+ /* Status textbox (readonly) gets green monospace style */
129
+ textarea[readonly] {
130
+ font-family: var(--mono) !important;
131
+ font-size: 0.76rem !important;
132
+ color: var(--ok) !important;
133
+ background: var(--okbg) !important;
134
+ border-color: var(--okborder) !important;
135
  }
136
+
137
+ /* ── BUTTONS ── */
138
+ button, .gr-button {
139
+ font-family: var(--f) !important;
140
+ font-weight: 700 !important;
141
+ font-size: 0.75rem !important;
142
+ letter-spacing: 0.08em !important;
143
+ text-transform: uppercase !important;
144
+ border-radius: 8px !important;
145
+ padding: 12px 24px !important;
146
+ border: none !important;
147
+ cursor: pointer !important;
148
+ transition: all 0.2s ease !important;
149
  }
150
+
151
+ /* Primary = magenta gradient */
152
+ button.primary, .gr-button-primary, button[variant="primary"] {
153
+ background: linear-gradient(135deg, #E20074 0%, #B5005C 100%) !important;
154
+ color: #fff !important;
155
+ box-shadow: var(--sh-mg) !important;
156
  }
157
+ button.primary:hover, .gr-button-primary:hover {
158
+ box-shadow: 0 6px 28px rgba(226,0,116,0.40) !important;
159
+ transform: translateY(-1px) !important;
 
 
 
 
 
 
 
 
160
  }
161
+ button.primary:active, .gr-button-primary:active {
162
+ transform: translateY(0) !important;
163
  }
164
+
165
+ /* ── CHATBOT CONTAINER ── */
166
+ .gr-chatbot, [data-testid="chatbot"] {
167
+ background: #FAFAFA !important;
168
+ border: 1px solid var(--border) !important;
169
+ border-radius: 12px !important;
170
+ box-shadow: var(--sh-sm) !important;
171
  }
172
+
173
+ /* User bubble — right, magenta */
174
+ .message.user, [data-testid="user"] .message {
175
+ background: linear-gradient(135deg, #E20074, #B5005C) !important;
176
+ color: #fff !important;
177
+ border-radius: 12px 12px 3px 12px !important;
178
+ padding: 11px 15px !important;
179
+ font-size: 0.86rem !important;
180
+ line-height: 1.65 !important;
181
+ max-width: 72% !important;
182
+ margin-left: auto !important;
183
+ box-shadow: 0 3px 14px rgba(226,0,116,0.22) !important;
184
+ animation: slideR 0.22s ease !important;
185
  }
186
+
187
+ /* Bot bubble — left, white with magenta stripe */
188
+ .message.bot, [data-testid="bot"] .message {
189
+ background: var(--white) !important;
190
+ border: 1px solid var(--border) !important;
191
+ border-left: 3px solid var(--M) !important;
192
+ color: var(--text) !important;
193
+ border-radius: 2px 12px 12px 12px !important;
194
+ padding: 11px 15px !important;
195
+ font-size: 0.86rem !important;
196
+ line-height: 1.65 !important;
197
+ max-width: 80% !important;
198
+ box-shadow: var(--sh-sm) !important;
199
+ animation: slideL 0.22s ease !important;
200
  }
201
+
202
+ @keyframes slideR {
203
+ from { opacity: 0; transform: translateX(10px); }
204
+ to { opacity: 1; transform: translateX(0); }
 
 
 
205
  }
206
+ @keyframes slideL {
207
+ from { opacity: 0; transform: translateX(-10px); }
208
+ to { opacity: 1; transform: translateX(0); }
 
 
 
 
 
 
 
 
 
 
209
  }
210
+
211
+ /* ── SCROLLBAR ── */
212
+ ::-webkit-scrollbar { width: 5px; height: 5px; }
213
+ ::-webkit-scrollbar-track { background: var(--surf2); border-radius: 3px; }
214
+ ::-webkit-scrollbar-thumb { background: rgba(226,0,116,0.28); border-radius: 3px; }
215
+ ::-webkit-scrollbar-thumb:hover { background: var(--M); }
216
+
217
+ /* ── HIDE GRADIO FOOTER ── */
218
+ footer { display: none !important; }
219
+ .gap { gap: 14px !important; }
220
  """
221
 
222
  # ── GLOBALS ────────────────────────────────────────────────────────────────────