Update app.py

app.py

@@ -127,13 +127,32 @@ def make_frontend(
     """Creates a gradio.Interface frontend for text to image search function."""
 
     allow_flagging = "never"
+
+        # Build a customized browser interface to a Python function
+    frontend = gr.Interface(
+        fn=fn,
+        outputs=gr.Gallery(label="Relevant Items", show_labels=True, label_position="below"),
+        inputs=gr.inputs.Textbox(label="Item Description", placeholder="Enter item description here"),
+        title="Fashion Aggregator",  # Update the title to a more descriptive name
+        thumbnail="path/to/company-logo.png",  # Replace with the path to your 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"],
+    )
+
+    # Customize the HTML template to enhance the design and layout
+    frontend.template = "gradio/custom.html"
+
+    return frontend
+    
     #     # Build a customized browser interface to a Python function
     # frontend = gr.Interface(
     #     fn=fn,
     #     outputs=gr.Gallery(label="Relevant Items", show_labels=True, label_position="below"),
     #     inputs=gr.inputs.Textbox(label="Item Description", placeholder="Enter item description here"),
-    #     title="Fashion Aggregator",  # Update the title to a more descriptive name
-    #     thumbnail="path/to/company-logo.png",  # Replace with the path to your company logo image
+    #     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,
@@ -143,41 +162,16 @@ def make_frontend(
     # # 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; text-align: center;",
-    #     description="color: #666666; font-size: 16px; margin-bottom: 20px; text-align: center;",
-    #     input="padding: 10px; border-radius: 5px; border: 1px solid #dddddd; font-size: 16px; width: 80%; margin: 0 auto;",
+    #     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;",
     # )
-    
-        # Build a customized browser interface to a Python function
-    frontend = gr.Interface(
-        fn=fn,
-        outputs=gr.Gallery(label="Relevant Items", show_labels=True, label_position="below"),
-        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
+    # return frontend
 
 
 class PredictorBackend: