Update app.py

app.py

@@ -166,6 +166,15 @@ caption.caption {
 div#component-16 {
     max-height: 63.39px;
 }
+
+.svelte-snayfm {
+    height: auto;
+}
+
+.icon.svelte-snayfm {
+    width: 48px;
+    height: 48px;
+}
 """
 
 js = """
@@ -207,8 +216,15 @@ head = """
 </script>
 """
 
-output = gr.Gallery(label="Found Images", columns=[4], object_fit="contain", height="auto")
-with gr.Blocks(css=custom_css, head=head) as demo:
+output = gr.Gallery(label="Found Images", columns=[4], object_fit="contain", height="auto", interactive=False)
+
+def init_ui():
+    return gr.update(visible=True), gr.update(visible=False)
+
+def search_ui():
+    return gr.update(visible=False), gr.update(visible=True)
+
+with gr.Blocks(css=custom_css, head=head, delete_cache=(3600, 3600)) as demo:
     gr.Markdown(
         """
     # Free Face Search Online
@@ -217,25 +233,31 @@ with gr.Blocks(css=custom_css, head=head) as demo:
     """
     )
     with gr.Row():
-        with gr.Column(scale=1):
+        with gr.Column(scale=1) as col1:
             image = gr.Image(type='filepath', height=480)
             token = gr.Textbox(placeholder="(Optional) Get Premium Token Below.", label="Premium Token")
-            gr.HTML("<a href='https://faceonlive.pocketsflow.com/checkout?productId=676c15b1971244a587ca07cb' target='_blank'>Get Premium Token: Deep Search Including Social Media & Full URL Reveal</a>")            
-            gr.HTML("<a href='https://faceonlive.pocketsflow.com/checkout?productId=676d7e7597f8b3b699f84820' target='_blank'>Protect Your Privacy – Start Your Takedown Now</a>")
+            gr.HTML("<a href='https://faceonlive.pocketsflow.com/checkout?productId=676c15b1971244a587ca07cb' target='_blank' style='font-size: 16px;'>Get Premium Token: Deep Search Including Social Media & Full URL Reveal</a>")
+            gr.HTML("<a href='https://faceonlive.pocketsflow.com/checkout?productId=676d7e7597f8b3b699f84820' target='_blank' style='font-size: 16px;'>Protect Your Privacy – Start Your Takedown Now</a>")
             search_face_button = gr.Button("Search Face")
             gr.Examples(['examples/1.jpg', 'examples/2.jpg'], inputs=image, cache_examples=True, cache_mode='lazy', fn=search_face, outputs=[output])
             
-        with gr.Column(scale=2):
+        with gr.Column(scale=2, visible=False) as col2:
             gr.Markdown("> ### **⚠️ Reminder:** Export images before refreshing the page by clicking the 'Export Images' button.")
             output.render()
             with gr.Row():
                 export_button = gr.Button("Export Images")
                 export_file = gr.File(label="Download")
+            gr.HTML("<a href='https://faceonlive.pocketsflow.com/checkout?productId=676c15b1971244a587ca07cb' target='_blank' style='font-size: 16px;'>Get Premium Token: Deep Search Including Social Media & Full URL Reveal</a>")            
+            gr.HTML("<a href='https://faceonlive.pocketsflow.com/checkout?productId=676d7e7597f8b3b699f84820' target='_blank' style='font-size: 16px;'>Protect Your Privacy – Start Your Takedown Now</a>")
+            new_search_button = gr.Button("🚀 Try New Search")
         
 
+    search_face_button.click(search_ui, inputs=[], outputs=[col1, col2], api_name=False)
     search_face_button.click(search_face, inputs=[image, token], outputs=[output], api_name=False)
     export_button.click(export_images, inputs=[output], outputs=export_file, api_name=False)
 
+    new_search_button.click(init_ui, inputs=[], outputs=[col1, col2], api_name=False)
+
     gr.HTML('<a href="https://visitorbadge.io/status?path=https%3A%2F%2Fhuggingface.co%2Fspaces%2FFaceOnLive%2FFace-Search-Online"><img src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Fhuggingface.co%2Fspaces%2FFaceOnLive%2FFace-Search-Online&labelColor=%23ff8a65&countColor=%2337d67a&style=flat&labelStyle=upper" /></a>')
     html = gr.HTML()
     demo.load(None, inputs=None, outputs=html, js=js)