Hugging Face's logo

Spaces:
NimaKL
/
LetsTalk
Runtime error

App Files Community
NimaKL commited on
Commit
ff81734
·
verified ·
1 Parent(s): 5412d71

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +128 -32
app.py CHANGED
@@ -841,6 +841,24 @@ custom_css = """
841
  color: #333333;
842
  }
843
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
844
  .question-card {
845
  background: #ffffff;
846
  padding: 20px;
@@ -855,48 +873,100 @@ custom_css = """
855
  transform: translateY(-2px);
856
  }
857
 
858
- .question-card h3 {
859
- color: #023047;
860
- margin-top: 0;
861
- margin-bottom: 10px;
862
- font-size: 1.25rem;
863
  }
864
 
865
- .question-meta {
866
- font-size: 0.9em;
867
- color: #333333;
868
- margin-bottom: 10px;
869
  }
870
 
871
- .author {
872
- color: #219ebc;
873
- font-weight: 500;
 
874
  }
875
 
876
- .date {
877
- color: #333333;
 
 
 
 
 
 
 
 
878
  }
879
 
880
- .interests {
 
881
  margin: 10px 0;
882
- font-size: 0.9em;
883
- color: #333333;
884
  }
885
 
886
- .interest-tags {
887
- color: #219ebc;
888
- font-weight: 500;
889
  }
890
 
891
- .question-body {
 
892
  line-height: 1.6;
893
- color: #333333;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
894
  margin-top: 15px;
895
- white-space: pre-wrap;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
896
  }
897
 
898
  .recommendation-header {
899
- color: #023047;
900
  padding: 10px 0;
901
  margin: 20px 0;
902
  border-bottom: 2px solid #219ebc;
@@ -932,14 +1002,6 @@ custom_css = """
932
  border: 1px solid #219ebc;
933
  }
934
 
935
- .loading-spinner {
936
- display: flex;
937
- justify-content: center;
938
- align-items: center;
939
- padding: 20px;
940
- color: #219ebc;
941
- }
942
-
943
  h1, h2, h3 {
944
  color: #023047 !important;
945
  }
@@ -959,6 +1021,40 @@ strong {
959
  0% { transform: rotate(0deg); }
960
  100% { transform: rotate(360deg); }
961
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
962
  """
963
 
964
  def main():
 
841
  color: #333333;
842
  }
843
 
844
+ /* Progress bar and loading animation */
845
+ .progress-bar > div {
846
+ background: #ffb703 !important;
847
+ }
848
+
849
+ .progress-bar {
850
+ background: #f9fafc !important;
851
+ }
852
+
853
+ .loading {
854
+ color: #219ebc !important;
855
+ }
856
+
857
+ /* Question section styling */
858
+ .questions-container {
859
+ margin-top: 20px;
860
+ }
861
+
862
  .question-card {
863
  background: #ffffff;
864
  padding: 20px;
 
873
  transform: translateY(-2px);
874
  }
875
 
876
+ .question-header {
877
+ border-bottom: 1px solid #8ecae6;
878
+ padding-bottom: 10px;
879
+ margin-bottom: 15px;
 
880
  }
881
 
882
+ .question-header h3 {
883
+ color: #023047 !important;
884
+ margin: 0;
885
+ font-size: 1.4em;
886
  }
887
 
888
+ .source-badge {
889
+ background: #f9fafc !important;
890
+ border: 1px solid #219ebc !important;
891
+ color: #219ebc !important;
892
  }
893
 
894
+ .interests-bar {
895
+ background: #f9fafc !important;
896
+ border: 1px solid #8ecae6 !important;
897
+ border-left: 3px solid #219ebc !important;
898
+ padding: 10px;
899
+ margin: 15px 0;
900
+ }
901
+
902
+ .interests-bar div {
903
+ color: #333333 !important;
904
  }
905
 
906
+ .question-meta {
907
+ color: #333333 !important;
908
  margin: 10px 0;
 
 
909
  }
910
 
911
+ .question-meta span {
912
+ color: #219ebc !important;
 
913
  }
914
 
915
+ .question-content {
916
+ color: #333333 !important;
917
  line-height: 1.6;
918
+ }
919
+
920
+ .question-content a {
921
+ color: #219ebc !important;
922
+ text-decoration: none;
923
+ }
924
+
925
+ .question-content code, .question-content pre {
926
+ background: #f9fafc !important;
927
+ border: 1px solid #8ecae6 !important;
928
+ color: #333333 !important;
929
+ padding: 0.2em 0.4em;
930
+ border-radius: 4px;
931
+ }
932
+
933
+ .answer-option {
934
+ background: #f9fafc !important;
935
+ border: 1px solid #8ecae6 !important;
936
+ margin: 8px 0;
937
+ padding: 10px;
938
+ border-radius: 6px;
939
+ }
940
+
941
+ .answer {
942
+ background: #f9fafc !important;
943
+ border: 1px solid #8ecae6 !important;
944
+ padding: 15px;
945
+ border-radius: 6px;
946
  margin-top: 15px;
947
+ }
948
+
949
+ .image-preview {
950
+ background: #f9fafc !important;
951
+ border: 1px solid #8ecae6 !important;
952
+ padding: 10px;
953
+ border-radius: 6px;
954
+ margin: 10px 0;
955
+ }
956
+
957
+ .relevance-score {
958
+ background: #f9fafc !important;
959
+ border: 1px solid #8ecae6 !important;
960
+ padding: 4px 8px;
961
+ border-radius: 4px;
962
+ }
963
+
964
+ .relevance-score span {
965
+ color: #219ebc !important;
966
  }
967
 
968
  .recommendation-header {
969
+ color: #023047 !important;
970
  padding: 10px 0;
971
  margin: 20px 0;
972
  border-bottom: 2px solid #219ebc;
 
1002
  border: 1px solid #219ebc;
1003
  }
1004
 
 
 
 
 
 
 
 
 
1005
  h1, h2, h3 {
1006
  color: #023047 !important;
1007
  }
 
1021
  0% { transform: rotate(0deg); }
1022
  100% { transform: rotate(360deg); }
1023
  }
1024
+
1025
+ /* Additional Gradio-specific overrides */
1026
+ .gr-button-primary {
1027
+ background: #ffb703 !important;
1028
+ color: #ffffff !important;
1029
+ }
1030
+
1031
+ .gr-button-secondary {
1032
+ background: #219ebc !important;
1033
+ color: #ffffff !important;
1034
+ }
1035
+
1036
+ .gr-form {
1037
+ background: #ffffff !important;
1038
+ border: 1px solid #219ebc !important;
1039
+ }
1040
+
1041
+ .gr-input {
1042
+ border-color: #219ebc !important;
1043
+ }
1044
+
1045
+ .gr-input:focus {
1046
+ border-color: #023047 !important;
1047
+ }
1048
+
1049
+ .gr-box {
1050
+ background: #ffffff !important;
1051
+ border: 1px solid #219ebc !important;
1052
+ }
1053
+
1054
+ .gr-panel {
1055
+ background: #ffffff !important;
1056
+ border: 1px solid #219ebc !important;
1057
+ }
1058
  """
1059
 
1060
  def main():