Update app.py

app.py

@@ -122,73 +122,71 @@ def main(args):
     )
 
 
-def make_frontend(fn: Callable[[Image], str], flagging: bool = False, gantry: bool = False, app_name: str = "fashion-aggregator"):
+# def make_frontend(fn: Callable[[Image], str], flagging: bool = False, gantry: bool = False, app_name: str = "fashion-aggregator"):
+#     """Creates a gradio.Interface frontend for text to image search function."""
+
+#     output_section = gr.Gallery(label="Relevant Items", show_labels=True, label_position="below").style(columns=4, container=True))
+#     title = """<h1 align="center">Fashion Aggregator</h1><img src="temp.jpg" alt="Logo" width="150" align="center"/>"""
+#     description = """
+#         <div align="center">
+#             <h3>
+#                 Discover your perfect apparel effortlessly. Simply describe what you're looking for!
+#             </h3>
+#         </div>
+#     """
+
+#     disclaimer = disclaimer = """
+#     <div align="center">
+#         <p style="font-size: small; color: gray;">
+#             Disclaimer: The search results are based on embeddings and may not be always accurate.
+#         </p>
+#     </div>
+#     """
+
+    
+#     with gr.Blocks(css="""#col_container {width: 800px; margin-left: auto; margin-right: auto;}""") as frontend:
+        
+#         gr.HTML(title)
+#         with gr.Column():
+#             gr.HTML(description)
+
+#         with gr.Column():
+#             inputs = gr.Textbox(label="Item Description", placeholder="Enter item description here")
+
+#         with gr.Column():
+#             outputs = gr.Gallery(label="Relevant Items", show_labels=True, label_position="below")
+
+            
+
+            
+
+#     return frontend
+
+    
+
+
+def make_frontend(
+    fn: Callable[[Image], str], flagging: bool = False, gantry: bool = False, app_name: str = "fashion-aggregator"
+):
     """Creates a gradio.Interface frontend for text to image search function."""
 
-    input_section = gr.inputs.Textbox(lines=2, placeholder="Enter item description here")
-    output_section = gr.Gallery(label="Relevant Items", show_labels=True, label_position="below")
-
-    # Define Interface layout with Gradio's Row and Column
-    interface_layout = gr.ui.Row(
-        gr.ui.Column(
-            gr.ui.Textbox("Fashion Aggregator", label="Title"),
-            gr.ui.Image(LOGO, label="Logo"),
-            gr.ui.Textbox("Discover your perfect apparel effortlessly. Simply describe what you're looking for!", label="Description"),
-        ),
-        gr.ui.Column(
-            gr.ui.Section(
-                gr.ui.Center(
-                    input_section,
-                ),
-                gr.ui.Center(
-                    output_section,
-                ),
-            )
-        ),
-        gr.ui.Column(
-            gr.ui.Textbox("Disclaimer: The search results are based on embeddings and may not be always accurate.", label="Disclaimer"),
-        ),
-    )
+    allow_flagging = "never"
 
     # Build a customized browser interface to a Python function
     frontend = gr.Interface(
         fn=fn,
-        inputs=input_section,
-        outputs=output_section,
-        layout=interface_layout,
-        allow_flagging=False,
-        title=app_name,
+        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",  
         thumbnail=LOGO,
-        description="Enter the description of the item you're looking for and see the corresponding images!",
+        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"],
     )
 
     return frontend
 
-    
-
-
-# def make_frontend(
-#     fn: Callable[[Image], str], flagging: bool = False, gantry: bool = False, app_name: str = "fashion-aggregator"
-# ):
-#     """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",  
-#         thumbnail=LOGO,
-#         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"],
-#     )
-
-#     return frontend
-
 
 class PredictorBackend:
     """Interface to a backend that serves predictions.