jillian64 commited on
Commit
e7b4200
·
verified ·
1 Parent(s): da669e4

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +20 -10
app.py CHANGED
@@ -376,6 +376,7 @@ toggle_css = """
376
  border-radius: 8px;
377
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
378
  }
 
379
  /* Toggle label styling */
380
  .toggle-label {
381
  font-size: 16px;
@@ -383,6 +384,7 @@ toggle_css = """
383
  margin-right: 10px;
384
  color: #2a633d;
385
  }
 
386
  /* Custom styling for the language toggle buttons */
387
  .language-switcher .gr-form {
388
  display: flex !important;
@@ -393,6 +395,7 @@ toggle_css = """
393
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
394
  border: 1px solid #dbeadf;
395
  }
 
396
  .language-switcher .gr-radio {
397
  display: inline-flex !important;
398
  gap: 0 !important;
@@ -400,10 +403,12 @@ toggle_css = """
400
  border: none !important;
401
  box-shadow: none !important;
402
  }
 
403
  .language-switcher .gr-radio-row {
404
  display: flex !important;
405
  flex-direction: row !important;
406
  }
 
407
  .language-switcher .gr-radio label {
408
  border-radius: 20px !important;
409
  padding: 8px 16px !important;
@@ -416,14 +421,17 @@ toggle_css = """
416
  align-items: center !important;
417
  justify-content: center !important;
418
  }
 
419
  .language-switcher .gr-radio input:checked + label {
420
  background-color: #2a633d !important;
421
  color: white !important;
422
  box-shadow: 0 2px 4px rgba(42, 99, 61, 0.3) !important;
423
  }
 
424
  .language-switcher .gr-radio input:not(:checked) + label:hover {
425
  background-color: rgba(42, 99, 61, 0.1) !important;
426
  }
 
427
  /* Flag icons for visual enhancement */
428
  .flag-icon {
429
  display: inline-block;
@@ -433,16 +441,18 @@ toggle_css = """
433
  vertical-align: middle;
434
  border-radius: 2px;
435
  }
 
436
  /* Add animation for language transition */
437
  .language-transition {
438
  transition: all 0.3s ease-in-out;
439
  }
 
440
  /* Responsive adjustments */
441
  @media (max-width: 768px) {
442
  .language-toggle-container {
443
  justify-content: center;
444
  }
445
-
446
  .language-switcher .gr-radio label {
447
  padding: 6px 12px !important;
448
  font-size: 13px !important;
@@ -502,12 +512,12 @@ with gr.Blocks(theme=gr.themes.Soft(), css=toggle_css) as app:
502
  # Add improved language toggle at the top
503
  with gr.Row(elem_classes="language-toggle-container"):
504
  toggle_label = gr.Markdown(text_dict["swahili"]["toggle_label"], elem_classes="toggle-label language-transition")
505
-
506
  with gr.Column(elem_classes="language-switcher", scale=1):
507
  language_toggle = gr.Radio(
508
- ["Swahili", "English"],
509
- value="Swahili",
510
- label="",
511
  interactive=True,
512
  elem_id="language-toggle"
513
  )
@@ -546,14 +556,14 @@ with gr.Blocks(theme=gr.themes.Soft(), css=toggle_css) as app:
546
  def switch_language(selected_language, current_lang):
547
  # Map the radio value to our language code
548
  new_lang = "swahili" if selected_language == "Swahili" else "english"
549
-
550
  # If language hasn't changed, don't update anything
551
  if new_lang == current_lang:
552
  return [current_lang] + [gr.update() for _ in range(11)]
553
-
554
  # Debug message to verify the language switch
555
  print(f"Switching language from {current_lang} to {new_lang}")
556
-
557
  # Add custom JavaScript for smooth transition animation
558
  js = """
559
  document.querySelectorAll('.language-transition').forEach(el => {
@@ -561,7 +571,7 @@ with gr.Blocks(theme=gr.themes.Soft(), css=toggle_css) as app:
561
  setTimeout(() => { el.style.opacity = 1; }, 300);
562
  });
563
  """
564
-
565
  # Return updated values
566
  return (
567
  new_lang,
@@ -586,7 +596,7 @@ with gr.Blocks(theme=gr.themes.Soft(), css=toggle_css) as app:
586
  try:
587
  # Print debug message to verify language
588
  print(f"Processing image with language: {lang}")
589
-
590
  pred_results, info, clean_disease_name = predict_and_get_info(img, lang)
591
  return pred_results, info, clean_disease_name, ""
592
  except Exception as e:
 
376
  border-radius: 8px;
377
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
378
  }
379
+
380
  /* Toggle label styling */
381
  .toggle-label {
382
  font-size: 16px;
 
384
  margin-right: 10px;
385
  color: #2a633d;
386
  }
387
+
388
  /* Custom styling for the language toggle buttons */
389
  .language-switcher .gr-form {
390
  display: flex !important;
 
395
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
396
  border: 1px solid #dbeadf;
397
  }
398
+
399
  .language-switcher .gr-radio {
400
  display: inline-flex !important;
401
  gap: 0 !important;
 
403
  border: none !important;
404
  box-shadow: none !important;
405
  }
406
+
407
  .language-switcher .gr-radio-row {
408
  display: flex !important;
409
  flex-direction: row !important;
410
  }
411
+
412
  .language-switcher .gr-radio label {
413
  border-radius: 20px !important;
414
  padding: 8px 16px !important;
 
421
  align-items: center !important;
422
  justify-content: center !important;
423
  }
424
+
425
  .language-switcher .gr-radio input:checked + label {
426
  background-color: #2a633d !important;
427
  color: white !important;
428
  box-shadow: 0 2px 4px rgba(42, 99, 61, 0.3) !important;
429
  }
430
+
431
  .language-switcher .gr-radio input:not(:checked) + label:hover {
432
  background-color: rgba(42, 99, 61, 0.1) !important;
433
  }
434
+
435
  /* Flag icons for visual enhancement */
436
  .flag-icon {
437
  display: inline-block;
 
441
  vertical-align: middle;
442
  border-radius: 2px;
443
  }
444
+
445
  /* Add animation for language transition */
446
  .language-transition {
447
  transition: all 0.3s ease-in-out;
448
  }
449
+
450
  /* Responsive adjustments */
451
  @media (max-width: 768px) {
452
  .language-toggle-container {
453
  justify-content: center;
454
  }
455
+
456
  .language-switcher .gr-radio label {
457
  padding: 6px 12px !important;
458
  font-size: 13px !important;
 
512
  # Add improved language toggle at the top
513
  with gr.Row(elem_classes="language-toggle-container"):
514
  toggle_label = gr.Markdown(text_dict["swahili"]["toggle_label"], elem_classes="toggle-label language-transition")
515
+
516
  with gr.Column(elem_classes="language-switcher", scale=1):
517
  language_toggle = gr.Radio(
518
+ ["Swahili", "English"],
519
+ value="Swahili",
520
+ label="",
521
  interactive=True,
522
  elem_id="language-toggle"
523
  )
 
556
  def switch_language(selected_language, current_lang):
557
  # Map the radio value to our language code
558
  new_lang = "swahili" if selected_language == "Swahili" else "english"
559
+
560
  # If language hasn't changed, don't update anything
561
  if new_lang == current_lang:
562
  return [current_lang] + [gr.update() for _ in range(11)]
563
+
564
  # Debug message to verify the language switch
565
  print(f"Switching language from {current_lang} to {new_lang}")
566
+
567
  # Add custom JavaScript for smooth transition animation
568
  js = """
569
  document.querySelectorAll('.language-transition').forEach(el => {
 
571
  setTimeout(() => { el.style.opacity = 1; }, 300);
572
  });
573
  """
574
+
575
  # Return updated values
576
  return (
577
  new_lang,
 
596
  try:
597
  # Print debug message to verify language
598
  print(f"Processing image with language: {lang}")
599
+
600
  pred_results, info, clean_disease_name = predict_and_get_info(img, lang)
601
  return pred_results, info, clean_disease_name, ""
602
  except Exception as e: