update

app.py

@@ -51,20 +51,17 @@ def recommendation_interface(channel, device_type, query_text):
     return form.get_recommendations(channel, device_type, query_text)
 
 
-with gr.Blocks() as interface:
-    gr.Markdown(
-        "<h1 style='color:#E76E00; text-align: center; font-weight: bold; font-size: 40px; margin: 60px; margin-bottom: 30px !important;'>E-Commerce Recommendation Engine Demo</h1>"
-    )
-    
-    with gr.Row():  # Use Row to place components side by side
+with gr.Blocks(theme= gr.themes.Origin(text_size="md", spacing_size="lg"), title="E-Commerce Recommendation Engine Demo") as interface:
+    gr.Markdown("# E-Commerce Recommendation Engine Demo", elem_id='title')
+    with gr.Row():
         with gr.Column():
             channel_dropdown = gr.Dropdown(choices=form.channel_options, label="Channel")
             device_dropdown = gr.Dropdown(choices=form.device_type_options, label="Device Type")
             query_input = gr.Textbox(value=form.default_query_text, label="Query Text")
-            submit_button = gr.Button("Submit", elem_id="submit-button")
+            submit_button = gr.Button("Submit", variant="primary")
         
         with gr.Column(scale=3):
-            gr.Markdown("<h2>Top Recommendations:</h2>")
+            gr.Markdown("## Top Recommendations:")
             recommendation_output = gr.Dataframe(
                 show_label=False,
                 headers = [
@@ -84,19 +81,10 @@ with gr.Blocks() as interface:
         outputs=recommendation_output,
     )
 
-# Add custom CSS for styling
 interface.css = """
-#submit-button {
-    background-color: #E76E00;
-    color: black;
-    border: none;
-    padding: 10px 20px;
-    font-size: 16px;
-    border-radius: 5px;
-    cursor: pointer;
-}
-#submit-button:hover {
-    background-color: #FF8C00;
+#title {
+    text-align: center;
+    margin: 20px;
 }
 """