Andrew Gockenbach commited on
Commit
d536dee
·
1 Parent(s): b44d8f4

Fixed Gradio Implementation

Browse files
Files changed (1) hide show
  1. app.py +196 -48
app.py CHANGED
@@ -65,58 +65,126 @@ class HfModelWrapper:
65
  return streamer
66
 
67
  # Custom theme colors based on brand standards
68
- class ArtemisiaTheme(Base):
69
- def __init__(self, **kwargs):
70
- # Define color variables for easy maintenance
71
- self.primary_color = "#4f008c"
72
- self.text_color = "#ffffff"
73
- self.error_color = "#ff5252"
74
- self.input_bg = "#000000"
75
 
76
- # Configure Gradio's theme system with our colors
77
- super().__init__(
78
- font=["Helvetica Neue", "Helvetica", "Arial", "system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
79
- primary_hue=colors.indigo,
80
- neutral_hue=colors.gray,
81
- **kwargs
82
- )
83
-
84
- # Background settings
85
- self.body_background_fill = self.primary_color
86
- self.background_fill_primary = self.neutral_800
87
- self.block_background_fill = "transparent"
88
- self.block_label_background_fill = self.neutral_700
89
 
90
- # Components
91
- self.button_primary_background_fill = self.primary_900
92
- self.button_primary_background_fill_hover = self.primary_700
93
- self.button_primary_text_color = self.text_color
94
 
95
- # Input fields
96
- self.input_background_fill = self.input_bg
97
- self.input_border_color = "transparent"
98
- self.input_text_color = self.text_color
99
 
100
- # Text colors
101
- self.text_color = self.text_color
102
- self.error_text_color = self.error_color
103
 
104
- # Add custom CSS variables for more flexible theming
105
  self.set(
106
- # Colors
107
- *[
108
- ("primary", self.primary_color),
109
- ("text", self.text_color),
110
- ("error", self.error_color),
111
- # Add more theme variables as needed
112
- ],
113
- # Font sizes
114
- *[
115
- ("text-sm", "0.875rem"),
116
- ("text-base", "1rem"),
117
- ("text-lg", "1.125rem"),
118
- # Add more size variables as needed
119
- ]
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
120
  )
121
 
122
  # Custom CSS for exact layout and styling
@@ -680,8 +748,88 @@ input, textarea {
680
  }
681
  """
682
 
683
- # SVG icons
684
- stc_logo_svg = """<svg xmlns="http://www.w3.org/2000/svg" width="66" height="32" viewBox="0 0 66 32" fill="#4f008c" style="display: block; flex-shrink: 0;"><path fill-rule="evenodd" clip-rule="evenodd" d="M31.625 6.80851L31.6213 0.00567279L24.7511 0L24.75 6.79666L31.625 6.80851ZM5.88232 23.0513L0 24.2653C0.424529 29.3706 6.18066 32.1214 11.3441 31.9959C14.2329 31.9257 16.8607 30.9901 18.5472 29.6392C22.4356 26.5245 22.4103 20.0758 17.2744 17.3711C15.3452 16.3551 13.2453 15.9901 11.4475 15.6777C9.10574 15.2707 7.27666 14.9528 7.00534 13.4013C6.4686 10.332 12.5096 9.46738 14.5772 12.2286C14.8637 12.6112 14.954 12.903 15.0505 13.2152L15.0505 13.2152C15.114 13.4203 15.1801 13.6342 15.3064 13.8884L20.889 12.6335C20.9094 12.6247 20.9455 12.6077 20.9725 12.5925C20.6349 7.68784 14.5151 5.00625 9.32399 5.5062C-0.27525 6.43076 -2.55039 16.9042 5.58028 20.2095C6.79516 20.7033 8.15129 20.9902 9.48385 21.2722C10.7248 21.5347 11.9453 21.793 13.0123 22.21C15.9184 23.3457 15.0929 26.4741 11.6771 26.7789C8.56398 27.0567 6.23313 25.7203 5.88232 23.0513ZM66 23.5042L59.9776 21.5819C59.8074 21.8761 59.6967 22.1399 59.5911 22.3913C59.4397 22.7522 59.2989 23.0876 59.0079 23.451C58.5671 24.0016 58.1301 24.4609 57.4746 24.8733C56.2011 25.6745 54.3913 26.0052 52.5943 25.6296C49.5135 24.9858 47.5738 22.504 47.4893 18.9828C47.4011 15.3106 49.2053 12.6962 52.1919 11.9434C56.004 10.9825 58.8882 12.9476 59.6362 15.8925L65.8508 13.9081C65.2461 10.9173 62.8376 8.44026 60.8112 7.24677C52.9767 2.63234 40.5366 7.03787 40.5625 18.7666C40.5881 30.3289 53.233 34.8158 60.8587 30.2249C62.1039 29.4752 63.2247 28.4579 64.0145 27.4692C64.723 26.5823 65.7798 24.9372 66 23.5042ZM24.8097 12.9397L31.6484 12.9362C31.6463 13.2625 31.6421 13.7315 31.6371 14.2928L31.637 14.3022L31.637 14.3033L31.637 14.3036L31.637 14.304C31.6122 17.0787 31.5674 22.0894 31.6626 23.2768C31.7957 24.9371 32.571 25.7899 34.2386 26.0043C35.9984 26.2305 36.9321 25.8072 38.115 25.2708L38.1151 25.2708C38.2402 25.2141 38.3681 25.1561 38.5 25.0975L38.4566 30.5261C35.605 32.6136 28.5618 32.8937 25.8963 28.6417C24.7526 26.8176 24.7717 24.551 24.7916 22.1906L24.7916 22.19C24.7942 21.8817 24.7968 21.5719 24.7968 21.2612C24.7969 20.3989 24.7853 19.5126 24.7737 18.6184V18.6183V18.6183V18.6182V18.6182C24.7489 16.7095 24.7236 14.7647 24.8097 12.9397ZM38.5 12.9362L31.625 12.935L31.6257 6.12766L38.4997 6.13078L38.5 12.9362Z" fill="#ffffff"></path></svg>"""
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
685
  # SVG assets
686
  artemsia_logo_svg = """
687
  <?xml version="1.0" encoding="UTF-8"?>
 
65
  return streamer
66
 
67
  # Custom theme colors based on brand standards
68
+ class ArtemisiaTheme(gr.themes.Base):
69
+ def __init__(self):
70
+ super().__init__()
 
 
 
 
71
 
72
+ # Define color variables
73
+ self.primary = "#4f008c"
74
+ self.primary_focus = "#3a0066"
75
+ self.secondary = "#6c757d"
76
+ self.accent = "#7c4dff"
77
+ self.neutral = "#2a2a2a"
78
+ self.success = "#28a745"
79
+ self.warning = "#ffc107"
80
+ self.error = "#dc3545"
81
+ self.info = "#17a2b8"
 
 
 
82
 
83
+ # Text colors
84
+ self.text = "#2d3748"
85
+ self.text_light = "#4a5568"
86
+ self.text_muted = "#718096"
87
 
88
+ # Background colors
89
+ self.background = "#ffffff"
90
+ self.surface = "#f8f9fa"
91
+ self.surface_highlight = "#e9ecef"
92
 
93
+ # Border colors
94
+ self.border = "#e2e8f0"
95
+ self.border_hover = "#cbd5e0"
96
 
97
+ # Set the theme colors using the new theming API
98
  self.set(
99
+ # Base colors
100
+ color_background_primary=self.background,
101
+ color_background_secondary=self.surface,
102
+ color_background_tertiary=self.surface_highlight,
103
+
104
+ # Text colors
105
+ body_text_color=self.text,
106
+ body_text_color_light=self.text_light,
107
+ body_text_color_muted=self.text_muted,
108
+
109
+ # Primary colors
110
+ primary_color=self.primary,
111
+ primary_hover_color=self.primary_focus,
112
+
113
+ # Secondary colors
114
+ secondary_color=self.secondary,
115
+ secondary_hover_color="#5a6268",
116
+
117
+ # Status colors
118
+ success_color=self.success,
119
+ warning_color=self.warning,
120
+ error_color=self.error,
121
+ info_color=self.info,
122
+
123
+ # Border colors
124
+ border_color_primary=self.border,
125
+ border_color_secondary=self.border_hover,
126
+
127
+ # Button colors
128
+ button_primary_background=self.primary,
129
+ button_primary_hover_background=self.primary_focus,
130
+ button_primary_text_color="#ffffff",
131
+
132
+ button_secondary_background=self.secondary,
133
+ button_secondary_hover_background="#5a6268",
134
+ button_secondary_text_color="#ffffff",
135
+
136
+ # Input fields
137
+ input_background=self.background,
138
+ input_border_color=self.border,
139
+ input_border_hover_color=self.border_hover,
140
+ input_text_color=self.text,
141
+ input_placeholder_color=self.text_muted,
142
+
143
+ # Chat components
144
+ chatbot_background=self.background,
145
+ chatbot_border_color=self.border,
146
+ chatbot_text_color=self.text,
147
+ chatbot_user_background="#f0f4ff",
148
+ chatbot_bot_background=self.surface,
149
+
150
+ # Sliders
151
+ slider_color=self.primary,
152
+ slider_color_hover=self.primary_focus,
153
+
154
+ # Checkboxes and radio buttons
155
+ checkbox_background=self.background,
156
+ checkbox_border_color=self.border,
157
+ checkbox_background_selected=self.primary,
158
+ checkbox_border_selected=self.primary,
159
+
160
+ # Tabs
161
+ tab_background=self.surface,
162
+ tab_background_selected=self.background,
163
+ tab_text_color=self.text_light,
164
+ tab_text_selected_color=self.primary,
165
+ tab_border_color=self.border,
166
+
167
+ # Dropdowns
168
+ dropdown_background=self.background,
169
+ dropdown_border_color=self.border,
170
+ dropdown_text_color=self.text,
171
+ dropdown_background_hover=self.surface_highlight,
172
+
173
+ # Tooltips
174
+ tooltip_background=self.neutral,
175
+ tooltip_text_color="#ffffff",
176
+
177
+ # Shadows
178
+ shadow_spread="0px 2px 8px rgba(0, 0, 0, 0.1)",
179
+ shadow_drop="0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
180
+
181
+ # Border radius
182
+ radius_lg="0.5rem",
183
+ radius_md="0.375rem",
184
+ radius_sm="0.25rem",
185
+
186
+ # Transitions
187
+ transition_all="all 0.2s ease-in-out"
188
  )
189
 
190
  # Custom CSS for exact layout and styling
 
748
  }
749
  """
750
 
751
+ def create_ui():
752
+ # Initialize the model
753
+ model_wrapper = HfModelWrapper()
754
+
755
+ # Create the Gradio interface with our custom theme and CSS
756
+ with gr.Blocks(
757
+ theme=ArtemisiaTheme(),
758
+ css=custom_css,
759
+ title="Compliance Assistant",
760
+ ) as demo:
761
+ # Header section
762
+ with gr.Row(elem_classes=["header"]):
763
+ with gr.Column(scale=1, elem_classes=["logo-container"]):
764
+ gr.HTML("""
765
+ <div class="stc-logo">
766
+ <svg xmlns="http://www.w3.org/2000/svg" width="66" height="32" viewBox="0 0 66 32" fill="#4f008c">
767
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M31.625 6.80851L31.6213 0.00567279L24.7511 0L24.75 6.79666L31.625 6.80851ZM5.88232 23.0513L0 24.2653C0.424529 29.3706 6.18066 32.1214 11.3441 31.9959C14.2329 31.9257 16.8607 30.9901 18.5472 29.6392C22.4356 26.5245 22.4103 20.0758 17.2744 17.3711C15.3452 16.3551 13.2453 15.9901 11.4475 15.6777C9.10574 15.2707 7.27666 14.9528 7.00534 13.4013C6.4686 10.332 12.5096 9.46738 14.5772 12.2286C14.8637 12.6112 14.954 12.903 15.0505 13.2152L15.0505 13.2152C15.114 13.4203 15.1801 13.6342 15.3064 13.8884L20.889 12.6335C20.9094 12.6247 20.9455 12.6077 20.9725 12.5925C20.6349 7.68784 14.5151 5.00625 9.32399 5.5062C-0.27525 6.43076 -2.55039 16.9042 5.58028 20.2095C6.79516 20.7033 8.15129 20.9902 9.48385 21.2722C10.7248 21.5347 11.9453 21.793 13.0123 22.21C15.9184 23.3457 15.0929 26.4741 11.6771 26.7789C8.56398 27.0567 6.23313 25.7203 5.88232 23.0513ZM66 23.5042L59.9776 21.5819C59.8074 21.8761 59.6967 22.1399 59.5911 22.3913C59.4397 22.7522 59.2989 23.0876 59.0079 23.451C58.5671 24.0016 58.1301 24.4609 57.4746 24.8733C56.2011 25.6745 54.3913 26.0052 52.5943 25.6296C49.5135 24.9858 47.5738 22.504 47.4893 18.9828C47.4011 15.3106 49.2053 12.6962 52.1919 11.9434C56.004 10.9825 58.8882 12.9476 59.6362 15.8925L65.8508 13.9081C65.2461 10.9173 62.8376 8.44026 60.8112 7.24677C52.9767 2.63234 40.5366 7.03787 40.5625 18.7666C40.5881 30.3289 53.233 34.8158 60.8587 30.2249C62.1039 29.4752 63.2247 28.4579 64.0145 27.4692C64.723 26.5823 65.7798 24.9372 66 23.5042ZM24.8097 12.9397L31.6484 12.9362C31.6463 13.2625 31.6421 13.7315 31.6371 14.2928L31.637 14.3022L31.637 14.3033L31.637 14.3036L31.637 14.304C31.6122 17.0787 31.5674 22.0894 31.6626 23.2768C31.7957 24.9371 32.571 25.7899 34.2386 26.0043C35.9984 26.2305 36.9321 25.8072 38.115 25.2708L38.1151 25.2708C38.2402 25.2141 38.3681 25.1561 38.5 25.0975L38.4566 30.5261C35.605 32.6136 28.5618 32.8937 25.8963 28.6417C24.7526 26.8176 24.7717 24.551 24.7916 22.1906L24.7916 22.19C24.7942 21.8817 24.7968 21.5719 24.7968 21.2612C24.7969 20.3989 24.7853 19.5126 24.7737 18.6184V18.6183V18.6183V18.6182V18.6182C24.7489 16.7095 24.7236 14.7647 24.8097 12.9397ZM38.5 12.9362L31.625 12.935L31.6257 6.12766L38.4997 6.13078L38.5 12.9362Z" fill="currentColor"></path>
768
+ </svg>
769
+ </div>
770
+ """)
771
+
772
+ with gr.Column(scale=1, elem_classes=["dashboard-title"]):
773
+ gr.Markdown("# Compliance Assistant", elem_classes=["dashboard-title"])
774
+
775
+ # Main chat interface
776
+ chatbot = gr.Chatbot(
777
+ label="Chat",
778
+ elem_id="chatbot",
779
+ elem_classes=["chatbot"],
780
+ height=600,
781
+ show_label=False,
782
+ )
783
+
784
+ with gr.Row(elem_classes=["input-container"]):
785
+ msg = gr.Textbox(
786
+ show_label=False,
787
+ placeholder="Ask me about compliance...",
788
+ container=False,
789
+ scale=10,
790
+ min_width=0,
791
+ elem_classes=["input-box"],
792
+ )
793
+ submit_btn = gr.Button("Send", variant="primary", scale=1, min_width=0)
794
+ clear_btn = gr.Button("Clear", variant="secondary", scale=1, min_width=0)
795
+
796
+ # Handle form submission
797
+ def respond(message, chat_history):
798
+ if not message.strip():
799
+ return "", chat_history
800
+
801
+ # Add user message to chat history
802
+ chat_history.append((message, None))
803
+
804
+ # Get model response
805
+ response = ""
806
+ for chunk in model_wrapper.generate(message, chat_history):
807
+ if chunk is not None:
808
+ response += chunk
809
+ chat_history[-1] = (message, response)
810
+ yield "", chat_history
811
+
812
+ # Connect the UI elements
813
+ msg.submit(
814
+ respond, [msg, chatbot], [msg, chatbot], queue=False
815
+ )
816
+ submit_btn.click(
817
+ respond, [msg, chatbot], [msg, chatbot], queue=False
818
+ )
819
+ clear_btn.click(lambda: ([], []), None, [chatbot, msg], queue=False)
820
+
821
+ return demo
822
+
823
+ if __name__ == "__main__":
824
+ # Create and launch the UI
825
+ demo = create_ui()
826
+ demo.queue().launch(
827
+ server_name="0.0.0.0",
828
+ server_port=7860,
829
+ share=False,
830
+ debug=True,
831
+ show_error=True,
832
+ )
833
  # SVG assets
834
  artemsia_logo_svg = """
835
  <?xml version="1.0" encoding="UTF-8"?>