Update app.py

app.py

@@ -128,21 +128,48 @@ def make_frontend(
 
     allow_flagging = "never"
 
-    # build a basic browser interface to a Python function
+        # Build a customized browser interface to a Python function
     frontend = gr.Interface(
-        fn=fn,  # which Python function are we interacting with?
+        fn=fn,
         outputs=gr.Gallery(label="Relevant Items", show_labels=True, label_position="below"),
-        # what input widgets does it need? we configure an image widget
-        inputs=gr.components.Textbox(label="Item Description", placeholder="Enter item description here"),
-        title="Fashion Aggregator",  # what should we display at the top of the page?
-        thumbnail="1001epochs.png",  # what should we display when the link is shared, e.g. on social media?
-        description="Discover your perfect apparel effortlessly. Simply describe what you're looking for!",  # what should we display just above the interface?
-        cache_examples=False,  # should we cache those inputs for faster inference? slows down start
-        allow_flagging=allow_flagging,  # should we show users the option to "flag" outputs?
-        flagging_options=["incorrect", "offensive", "other"],  # what options do users have for feedback?
+        inputs=gr.inputs.Textbox(label="Item Description", placeholder="Enter item description here"),
+        title="Fashion Aggregator",  # Title
+        thumbnail="./1001epochs.png",  # Company logo image
+        description="Discover your perfect apparel effortlessly. Simply describe what you're looking for!",
+        cache_examples=False,
+        allow_flagging=allow_flagging,
+        flagging_options=["incorrect", "offensive", "other"],
     )
+
+    # Apply custom CSS styles to enhance the design and layout
+    frontend.styles(
+        # Modify the styles according to your preferences
+        title="color: #333333; font-size: 28px; font-weight: bold; margin-bottom: 10px;",
+        description="color: #666666; font-size: 16px; margin-bottom: 20px;",
+        input="padding: 10px; border-radius: 5px; border: 1px solid #dddddd; font-size: 16px; width: 80%;",
+        output_gallery="margin-top: 20px;",
+        output_image="border-radius: 10px; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);",
+        flag_button="background-color: #ff5555;",
+        flag_options="color: #333333;",
+    )
+
     return frontend
 
+    # # build a basic browser interface to a Python function
+    # frontend = gr.Interface(
+    #     fn=fn,  # which Python function are we interacting with?
+    #     outputs=gr.Gallery(label="Relevant Items", show_labels=True, label_position="below"),
+    #     # what input widgets does it need? we configure an image widget
+    #     inputs=gr.components.Textbox(label="Item Description", placeholder="Enter item description here"),
+    #     title="Fashion Aggregator",  # what should we display at the top of the page?
+    #     thumbnail="1001epochs.png",  # what should we display when the link is shared, e.g. on social media?
+    #     description="Discover your perfect apparel effortlessly. Simply describe what you're looking for!",  # what should we display just above the interface?
+    #     cache_examples=False,  # should we cache those inputs for faster inference? slows down start
+    #     allow_flagging=allow_flagging,  # should we show users the option to "flag" outputs?
+    #     flagging_options=["incorrect", "offensive", "other"],  # what options do users have for feedback?
+    # )
+    # return frontend
+
 
 class PredictorBackend:
     """Interface to a backend that serves predictions.