Hugging Face's logo

Spaces:
Ultimatedeveloper1011
/
Tenant-Rights-Bot
Running

App Files Community
Nischal Subedi commited on
Commit
229d1b2
·
1 Parent(s): 7c7cb71

adding footnote

Browse files
Files changed (1) hide show
  1. app.py +76 -62
app.py CHANGED
@@ -262,151 +262,161 @@ Answer:"""
262
  .gr-form {
263
  max-width: 900px;
264
  margin: 0 auto;
265
- padding: 20px;
266
- background-color: #ffffff;
267
- border-radius: 15px;
268
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
269
  }
270
  .gr-title {
271
- font-size: 3em;
272
- font-weight: bold;
273
- color: #2c3e50;
274
  text-align: center;
275
  margin-bottom: 10px;
 
276
  }
277
  .gr-description {
278
  font-size: 1.1em;
279
- color: #7f8c8d;
280
  text-align: center;
281
  margin-bottom: 30px;
 
282
  }
283
  .footnote {
284
- font-size: 1.1em;
285
- color: #34495e;
286
  text-align: center;
287
- margin-top: 20px;
288
- padding-top: 10px;
289
- border-top: 1px solid #e0e0e0;
290
  }
291
  .footnote a {
292
- color: #3498db;
293
  text-decoration: none;
 
294
  transition: color 0.3s ease;
295
  }
296
  .footnote a:hover {
297
- color: #2980b9;
298
  text-decoration: underline;
299
  }
300
  .gr-textbox, .gr-dropdown {
301
- border: 1px solid #dcdcdc !important;
302
- border-radius: 8px !important;
303
  padding: 12px !important;
304
  font-size: 1em !important;
305
- transition: border-color 0.3s ease;
 
306
  }
307
  .gr-textbox:focus, .gr-dropdown:focus {
308
- border-color: #3498db !important;
309
- box-shadow: 0 0 5px rgba(52, 152, 219, 0.3) !important;
 
310
  }
311
  .gr-textbox label, .gr-dropdown label {
312
  font-weight: 600;
313
- color: #34495e;
314
  margin-bottom: 8px;
315
  }
316
  .gr-button-primary {
317
- background-color: #3498db !important;
318
  border: none !important;
319
  padding: 12px 30px !important;
320
- font-weight: bold !important;
321
  font-size: 1em !important;
322
- border-radius: 8px !important;
323
- transition: background-color 0.3s ease, transform 0.1s ease;
 
324
  }
325
  .gr-button-primary:hover {
326
- background-color: #2980b9 !important;
327
- transform: translateY(-2px);
328
  }
329
  .gr-button-secondary {
330
- background-color: #95a5a6 !important;
331
  border: none !important;
332
  padding: 12px 30px !important;
333
- font-weight: bold !important;
334
  font-size: 1em !important;
335
- border-radius: 8px !important;
336
- transition: background-color 0.3s ease;
 
337
  }
338
  .gr-button-secondary:hover {
339
- background-color: #7f8c8d !important;
 
340
  }
341
  .output-markdown {
342
- background-color: #f9f9f9 !important;
343
- color: #2c3e50 !important;
344
  padding: 25px !important;
345
- border-radius: 10px !important;
346
- border: 1px solid #e0e0e0 !important;
347
  font-size: 1.1em !important;
348
  line-height: 1.8 !important;
349
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
350
  }
351
  .gr-examples {
352
- background-color: #ecf0f1;
353
- padding: 15px;
354
- border-radius: 10px;
355
- margin-top: 20px;
 
356
  }
357
  .gr-examples table {
358
  background-color: transparent !important;
359
  }
360
  @media (prefers-color-scheme: dark) {
361
  .gr-form {
362
- background-color: #2c3e50;
363
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
364
  }
365
  .gr-title {
366
- color: #ecf0f1;
367
  }
368
  .gr-description {
369
- color: #bdc3c7;
370
  }
371
  .footnote {
372
- color: #bdc3c7;
373
- border-top: 1px solid #7f8c8d;
374
  }
375
  .footnote a {
376
- color: #66b0ff;
377
  }
378
  .footnote a:hover {
379
- color: #4a90e2;
380
  }
381
  .gr-textbox, .gr-dropdown {
382
- background-color: #34495e !important;
383
- color: #ecf0f1 !important;
384
- border-color: #7f8c8d !important;
385
  }
386
  .gr-textbox label, .gr-dropdown label {
387
- color: #ecf0f1;
388
  }
389
  .output-markdown {
390
- background-color: #34495e !important;
391
- color: #ecf0f1 !important;
392
- border-color: #7f8c8d !important;
393
  }
394
  .gr-examples {
395
- background-color: #3e5367;
 
396
  }
397
  }
398
  @media (max-width: 600px) {
399
  .gr-form {
400
- padding: 15px;
401
  }
402
  .gr-title {
403
- font-size: 2.2em;
404
  }
405
  .gr-description {
406
  font-size: 1em;
407
  }
408
  .footnote {
409
- font-size: 1em;
410
  }
411
  .gr-textbox, .gr-dropdown {
412
  font-size: 0.9em !important;
@@ -427,8 +437,6 @@ Answer:"""
427
  """
428
  # 🏠 Landlord-Tenant Rights Bot
429
  Ask questions about tenant rights and landlord-tenant laws based on state-specific legal documents. Provide your OpenAI API key, select a state, and enter your question below. You can get an API key from [OpenAI](https://platform.openai.com/api-keys).
430
-
431
- # <div class='footnote'>Developed by Nischal Subedi. Follow me on <a href='https://www.linkedin.com/in/nischal1/' target='_blank'>LinkedIn</a> or read my insights on <a href='https://datascientistinsights.substack.com/' target='_blank'>Substack</a>.</div>
432
  """
433
  )
434
 
@@ -470,6 +478,12 @@ Answer:"""
470
  examples_per_page=5
471
  )
472
 
 
 
 
 
 
 
473
  submit_button.click(
474
  fn=query_interface,
475
  inputs=[api_key_input, query_input, state_input],
 
262
  .gr-form {
263
  max-width: 900px;
264
  margin: 0 auto;
265
+ padding: 30px;
266
+ background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
267
+ border-radius: 20px;
268
+ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
269
  }
270
  .gr-title {
271
+ font-size: 2.8em;
272
+ font-weight: 700;
273
+ color: #1a3c34;
274
  text-align: center;
275
  margin-bottom: 10px;
276
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
277
  }
278
  .gr-description {
279
  font-size: 1.1em;
280
+ color: #4a5e57;
281
  text-align: center;
282
  margin-bottom: 30px;
283
+ line-height: 1.6;
284
  }
285
  .footnote {
286
+ font-size: 0.9em;
287
+ color: #6b7280;
288
  text-align: center;
289
+ margin-top: 40px;
290
+ padding-top: 15px;
291
+ border-top: 1px solid #e5e7eb;
292
  }
293
  .footnote a {
294
+ color: #2563eb;
295
  text-decoration: none;
296
+ font-weight: 500;
297
  transition: color 0.3s ease;
298
  }
299
  .footnote a:hover {
300
+ color: #1d4ed8;
301
  text-decoration: underline;
302
  }
303
  .gr-textbox, .gr-dropdown {
304
+ border: 1px solid #d1d5db !important;
305
+ border-radius: 10px !important;
306
  padding: 12px !important;
307
  font-size: 1em !important;
308
+ background-color: #fff !important;
309
+ transition: border-color 0.3s ease, box-shadow 0.3s ease;
310
  }
311
  .gr-textbox:focus, .gr-dropdown:focus {
312
+ border-color: #2563eb !important;
313
+ box-shadow: 0 0 8px rgba(37, 99, 235, 0.2) !important;
314
+ outline: none !important;
315
  }
316
  .gr-textbox label, .gr-dropdown label {
317
  font-weight: 600;
318
+ color: #1a3c34;
319
  margin-bottom: 8px;
320
  }
321
  .gr-button-primary {
322
+ background: linear-gradient(90deg, #f97316 0%, #ea580c 100%) !important;
323
  border: none !important;
324
  padding: 12px 30px !important;
325
+ font-weight: 600 !important;
326
  font-size: 1em !important;
327
+ border-radius: 10px !important;
328
+ color: #fff !important;
329
+ transition: transform 0.2s ease, box-shadow 0.3s ease;
330
  }
331
  .gr-button-primary:hover {
332
+ transform: translateY(-3px);
333
+ box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3) !important;
334
  }
335
  .gr-button-secondary {
336
+ background: linear-gradient(90deg, #6b7280 0%, #4b5563 100%) !important;
337
  border: none !important;
338
  padding: 12px 30px !important;
339
+ font-weight: 600 !important;
340
  font-size: 1em !important;
341
+ border-radius: 10px !important;
342
+ color: #fff !important;
343
+ transition: transform 0.2s ease, box-shadow 0.3s ease;
344
  }
345
  .gr-button-secondary:hover {
346
+ transform: translateY(-3px);
347
+ box-shadow: 0 4px 15px rgba(107, 114, 128, 0.3) !important;
348
  }
349
  .output-markdown {
350
+ background: #f9fafb !important;
351
+ color: #1f2937 !important;
352
  padding: 25px !important;
353
+ border-radius: 12px !important;
354
+ border: 1px solid #e5e7eb !important;
355
  font-size: 1.1em !important;
356
  line-height: 1.8 !important;
357
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
358
  }
359
  .gr-examples {
360
+ background: #f1f5f9;
361
+ padding: 20px;
362
+ border-radius: 12px;
363
+ margin-top: 25px;
364
+ border: 1px solid #e5e7eb;
365
  }
366
  .gr-examples table {
367
  background-color: transparent !important;
368
  }
369
  @media (prefers-color-scheme: dark) {
370
  .gr-form {
371
+ background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
372
+ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
373
  }
374
  .gr-title {
375
+ color: #f3f4f6;
376
  }
377
  .gr-description {
378
+ color: #d1d5db;
379
  }
380
  .footnote {
381
+ color: #9ca3af;
382
+ border-top: 1px solid #4b5563;
383
  }
384
  .footnote a {
385
+ color: #60a5fa;
386
  }
387
  .footnote a:hover {
388
+ color: #3b82f6;
389
  }
390
  .gr-textbox, .gr-dropdown {
391
+ background-color: #374151 !important;
392
+ color: #f3f4f6 !important;
393
+ border-color: #4b5563 !important;
394
  }
395
  .gr-textbox label, .gr-dropdown label {
396
+ color: #f3f4f6;
397
  }
398
  .output-markdown {
399
+ background: #374151 !important;
400
+ color: #f3f4f6 !important;
401
+ border-color: #4b5563 !important;
402
  }
403
  .gr-examples {
404
+ background: #4b5563;
405
+ border-color: #6b7280;
406
  }
407
  }
408
  @media (max-width: 600px) {
409
  .gr-form {
410
+ padding: 20px;
411
  }
412
  .gr-title {
413
+ font-size: 2em;
414
  }
415
  .gr-description {
416
  font-size: 1em;
417
  }
418
  .footnote {
419
+ font-size: 0.85em;
420
  }
421
  .gr-textbox, .gr-dropdown {
422
  font-size: 0.9em !important;
 
437
  """
438
  # 🏠 Landlord-Tenant Rights Bot
439
  Ask questions about tenant rights and landlord-tenant laws based on state-specific legal documents. Provide your OpenAI API key, select a state, and enter your question below. You can get an API key from [OpenAI](https://platform.openai.com/api-keys).
 
 
440
  """
441
  )
442
 
 
478
  examples_per_page=5
479
  )
480
 
481
+ gr.Markdown(
482
+ """
483
+ <div class='footnote'>Developed by Nischal Subedi. Follow me on <a href='https://www.linkedin.com/in/nischal1/' target='_blank'>LinkedIn</a> or read my insights on <a href='https://datascientistinsights.substack.com/' target='_blank'>Substack</a>.</div>
484
+ """
485
+ )
486
+
487
  submit_button.click(
488
  fn=query_interface,
489
  inputs=[api_key_input, query_input, state_input],