Fixed Gradio Implementation

app.py

@@ -65,58 +65,126 @@ class HfModelWrapper:
         return streamer
 
 # Custom theme colors based on brand standards
-class ArtemisiaTheme(Base):
-    def __init__(self, **kwargs):
-        # Define color variables for easy maintenance
-        self.primary_color = "#4f008c"
-        self.text_color = "#ffffff"
-        self.error_color = "#ff5252"
-        self.input_bg = "#000000"
+class ArtemisiaTheme(gr.themes.Base):
+    def __init__(self):
+        super().__init__()
         
-        # Configure Gradio's theme system with our colors
-        super().__init__(
-            font=["Helvetica Neue", "Helvetica", "Arial", "system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
-            primary_hue=colors.indigo,
-            neutral_hue=colors.gray,
-            **kwargs
-        )
-        
-        # Background settings
-        self.body_background_fill = self.primary_color
-        self.background_fill_primary = self.neutral_800
-        self.block_background_fill = "transparent"
-        self.block_label_background_fill = self.neutral_700
+        # Define color variables
+        self.primary = "#4f008c"
+        self.primary_focus = "#3a0066"
+        self.secondary = "#6c757d"
+        self.accent = "#7c4dff"
+        self.neutral = "#2a2a2a"
+        self.success = "#28a745"
+        self.warning = "#ffc107"
+        self.error = "#dc3545"
+        self.info = "#17a2b8"
         
-        # Components
-        self.button_primary_background_fill = self.primary_900
-        self.button_primary_background_fill_hover = self.primary_700
-        self.button_primary_text_color = self.text_color
+        # Text colors
+        self.text = "#2d3748"
+        self.text_light = "#4a5568"
+        self.text_muted = "#718096"
         
-        # Input fields
-        self.input_background_fill = self.input_bg
-        self.input_border_color = "transparent"
-        self.input_text_color = self.text_color
+        # Background colors
+        self.background = "#ffffff"
+        self.surface = "#f8f9fa"
+        self.surface_highlight = "#e9ecef"
         
-        # Text colors
-        self.text_color = self.text_color
-        self.error_text_color = self.error_color
+        # Border colors
+        self.border = "#e2e8f0"
+        self.border_hover = "#cbd5e0"
         
-        # Add custom CSS variables for more flexible theming
+        # Set the theme colors using the new theming API
         self.set(
-            # Colors
-            *[
-                ("primary", self.primary_color),
-                ("text", self.text_color),
-                ("error", self.error_color),
-                # Add more theme variables as needed
-            ],
-            # Font sizes
-            *[
-                ("text-sm", "0.875rem"),
-                ("text-base", "1rem"),
-                ("text-lg", "1.125rem"),
-                # Add more size variables as needed
-            ]
+            # Base colors
+            color_background_primary=self.background,
+            color_background_secondary=self.surface,
+            color_background_tertiary=self.surface_highlight,
+            
+            # Text colors
+            body_text_color=self.text,
+            body_text_color_light=self.text_light,
+            body_text_color_muted=self.text_muted,
+            
+            # Primary colors
+            primary_color=self.primary,
+            primary_hover_color=self.primary_focus,
+            
+            # Secondary colors
+            secondary_color=self.secondary,
+            secondary_hover_color="#5a6268",
+            
+            # Status colors
+            success_color=self.success,
+            warning_color=self.warning,
+            error_color=self.error,
+            info_color=self.info,
+            
+            # Border colors
+            border_color_primary=self.border,
+            border_color_secondary=self.border_hover,
+            
+            # Button colors
+            button_primary_background=self.primary,
+            button_primary_hover_background=self.primary_focus,
+            button_primary_text_color="#ffffff",
+            
+            button_secondary_background=self.secondary,
+            button_secondary_hover_background="#5a6268",
+            button_secondary_text_color="#ffffff",
+            
+            # Input fields
+            input_background=self.background,
+            input_border_color=self.border,
+            input_border_hover_color=self.border_hover,
+            input_text_color=self.text,
+            input_placeholder_color=self.text_muted,
+            
+            # Chat components
+            chatbot_background=self.background,
+            chatbot_border_color=self.border,
+            chatbot_text_color=self.text,
+            chatbot_user_background="#f0f4ff",
+            chatbot_bot_background=self.surface,
+            
+            # Sliders
+            slider_color=self.primary,
+            slider_color_hover=self.primary_focus,
+            
+            # Checkboxes and radio buttons
+            checkbox_background=self.background,
+            checkbox_border_color=self.border,
+            checkbox_background_selected=self.primary,
+            checkbox_border_selected=self.primary,
+            
+            # Tabs
+            tab_background=self.surface,
+            tab_background_selected=self.background,
+            tab_text_color=self.text_light,
+            tab_text_selected_color=self.primary,
+            tab_border_color=self.border,
+            
+            # Dropdowns
+            dropdown_background=self.background,
+            dropdown_border_color=self.border,
+            dropdown_text_color=self.text,
+            dropdown_background_hover=self.surface_highlight,
+            
+            # Tooltips
+            tooltip_background=self.neutral,
+            tooltip_text_color="#ffffff",
+            
+            # Shadows
+            shadow_spread="0px 2px 8px rgba(0, 0, 0, 0.1)",
+            shadow_drop="0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+            
+            # Border radius
+            radius_lg="0.5rem",
+            radius_md="0.375rem",
+            radius_sm="0.25rem",
+            
+            # Transitions
+            transition_all="all 0.2s ease-in-out"
         )
 
 # Custom CSS for exact layout and styling
@@ -680,8 +748,88 @@ input, textarea {
 }
 """
 
-# SVG icons
-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>"""
+def create_ui():
+    # Initialize the model
+    model_wrapper = HfModelWrapper()
+    
+    # Create the Gradio interface with our custom theme and CSS
+    with gr.Blocks(
+        theme=ArtemisiaTheme(),
+        css=custom_css,
+        title="Compliance Assistant",
+    ) as demo:
+        # Header section
+        with gr.Row(elem_classes=["header"]):
+            with gr.Column(scale=1, elem_classes=["logo-container"]):
+                gr.HTML("""
+                <div class="stc-logo">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="66" height="32" viewBox="0 0 66 32" fill="#4f008c">
+                        <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>
+                    </svg>
+                </div>
+                """)
+                
+            with gr.Column(scale=1, elem_classes=["dashboard-title"]):
+                gr.Markdown("# Compliance Assistant", elem_classes=["dashboard-title"])
+        
+        # Main chat interface
+        chatbot = gr.Chatbot(
+            label="Chat",
+            elem_id="chatbot",
+            elem_classes=["chatbot"],
+            height=600,
+            show_label=False,
+        )
+        
+        with gr.Row(elem_classes=["input-container"]):
+            msg = gr.Textbox(
+                show_label=False,
+                placeholder="Ask me about compliance...",
+                container=False,
+                scale=10,
+                min_width=0,
+                elem_classes=["input-box"],
+            )
+            submit_btn = gr.Button("Send", variant="primary", scale=1, min_width=0)
+            clear_btn = gr.Button("Clear", variant="secondary", scale=1, min_width=0)
+        
+        # Handle form submission
+        def respond(message, chat_history):
+            if not message.strip():
+                return "", chat_history
+                
+            # Add user message to chat history
+            chat_history.append((message, None))
+            
+            # Get model response
+            response = ""
+            for chunk in model_wrapper.generate(message, chat_history):
+                if chunk is not None:
+                    response += chunk
+                    chat_history[-1] = (message, response)
+                    yield "", chat_history
+        
+        # Connect the UI elements
+        msg.submit(
+            respond, [msg, chatbot], [msg, chatbot], queue=False
+        )
+        submit_btn.click(
+            respond, [msg, chatbot], [msg, chatbot], queue=False
+        )
+        clear_btn.click(lambda: ([], []), None, [chatbot, msg], queue=False)
+    
+    return demo
+
+if __name__ == "__main__":
+    # Create and launch the UI
+    demo = create_ui()
+    demo.queue().launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False,
+        debug=True,
+        show_error=True,
+    )
 # SVG assets
 artemsia_logo_svg = """
 <?xml version="1.0" encoding="UTF-8"?>