Update app.py

app.py

@@ -71,14 +71,10 @@ caption.caption {
     cursor: text;
 }
 
-div#component-21 {
+div#export_file {
     max-height: 63.39px;
 }
 
-div#component-9 {
-    background-color: tomato;
-}
-
 .svelte-snayfm {
     height: auto;
 }
@@ -87,6 +83,51 @@ div#component-9 {
     width: 48px;
     height: 48px;
 }
+
+.button-gradient {
+  background: linear-gradient(45deg, #ff416c, #ff4b2b, #ff9b00, #ff416c);
+  background-size: 400% 400%;
+  border: none;
+  padding: 14px 28px;
+  font-size: 16px;
+  font-weight: bold;
+  color: white;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: 0.3s ease-in-out;
+  animation: gradientAnimation 2s infinite linear;
+  box-shadow: 0 4px 10px rgba(255, 65, 108, 0.6);
+}
+
+@keyframes gradientAnimation {
+  0% { background-position: 0% 50%; }
+  25% { background-position: 50% 100%; }
+  50% { background-position: 100% 50%; }
+  75% { background-position: 50% 0%; }
+  100% { background-position: 0% 50%; }
+}
+
+.button-gradient:hover {
+  transform: scale(1.05);
+  box-shadow: 0 6px 15px rgba(255, 75, 43, 0.8);
+}
+
+@keyframes labelGradientFlow {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+label.svelte-i3tvor.float {
+    background: linear-gradient(90deg, #555555, #333333, #555555); /* Dark gray gradient */
+    background-size: 200% 200%;
+    color: #f1f1f1;
+    font-weight: bold;
+    text-align: center;
+    animation: labelGradientFlow 4s infinite ease-in-out;
+    box-shadow: 0 0 6px rgba(50, 50, 50, 0.7); /* Subtle dark glow */
+    transition: all 0.3s ease-in-out;
+}
 """
 
 js = """
@@ -127,7 +168,7 @@ head = """
 </script>
 """
 
-output = gr.Gallery(label="Found Images (The search may take a couple of minutes.)", columns=[3], object_fit="contain", height="480px", interactive=False)
+output = gr.Gallery(label="Search may take a few minutes.)", columns=[3], object_fit="contain", height="480px", interactive=False)
 col2 = gr.Column(scale=2, visible=False)
 
 def init_ui():
@@ -139,15 +180,24 @@ def search_ui():
 def search_face_examples(image):
     return search_face(image), gr.update(visible=False), gr.update(visible=True)
 
+def set_url_token(request: gr.Request):
+    if request and request.query_params:
+        params = dict(request.query_params)
+        if "ptoken" in params:
+            return params["ptoken"]        
+    return ""
+
+def update_button(token):
+    if token:
+        return gr.update(visible=False), gr.update(value="🚀 Unlock Deep Search Now!", elem_classes="button-gradient")
+    else:
+        return gr.update(visible=True), gr.update(value="🔍 Free Face Search", elem_classes="")
+
 MARKDOWN0 = """
     # Free Face Search Online - ❤️Like above if this space helps
     #### [Learn more about our Reverse Face Search](https://faceonlive.com/face-search-online)
     #### [Check out our Face Search API integration and Affiliate Program here.](https://portfolio.faceonlive.com/#face_search)
 """
-MARKDOWN1 = """
-    ### [Get Premium Token - Deep Search & Social Media Access](https://faceonlive.pocketsflow.com/checkout?productId=676c15b1971244a587ca07cb)  
-    ### [Protect Your Privacy – Start Your Takedown Now](https://faceonlive.pocketsflow.com/checkout?productId=676d7e7597f8b3b699f84820)
-"""
 MARKDOWN2 = """
 ### [Why Get the Premium Token?](https://faceonlive.pocketsflow.com/checkout?productId=676c15b1971244a587ca07cb)  
 ✅ **Deep Search**  
@@ -156,8 +206,12 @@ MARKDOWN2 = """
 ✅ **No Subscription Needed**
 """
 MARKDOWN3 = """
+<div align="right"><a href="https://faceonlive.pocketsflow.com/checkout?productId=676d7e7597f8b3b699f84820" target='_blank' style='font-size: 16px;'>Opt-Out From Search</div><br/>
 <div align="right"><a href="https://faceonlive.com/reverse-image-search" target='_blank' style='font-size: 16px;'>Looking For Reverse Image Search</div>
 """
+
+PREMIUM_CHECKOUT = "https://faceonlive.pocketsflow.com/checkout?productId=676c15b1971244a587ca07cb"
+
 with gr.Blocks(css=custom_css, head=head, delete_cache=(3600, 3600)) as demo:
     gr.Markdown(MARKDOWN0)
     with gr.Row():
@@ -165,12 +219,14 @@ with gr.Blocks(css=custom_css, head=head, delete_cache=(3600, 3600)) as demo:
             image = gr.Image(type='filepath', height=360)
             with gr.Row():
               with gr.Column():
-                token = gr.Textbox(placeholder="(Optional) Get Premium Token Below.", label="Premium Token")
-                gr.Markdown(MARKDOWN1)
+                token = gr.Textbox(placeholder="(Optional) Input Premium Token here.", label="Premium Token")
               with gr.Column():
                 md_premium1 = gr.Markdown(MARKDOWN2)
             with gr.Row():
-                search_face_button = gr.Button("Reverse Face Search")
+                with gr.Column():
+                    premium_search_button = gr.Button("🚀 Unlock Deep Search Now!", elem_classes="button-gradient", link=PREMIUM_CHECKOUT)
+                with gr.Column():
+                    face_search_button = gr.Button("🔍 Free Face Search")
             gr.HTML(MARKDOWN3)
             gr.Examples(['examples/1.jpg', 'examples/2.jpg'], inputs=image, cache_examples=True, fn=search_face_examples, outputs=[output, col1, col2])
             
@@ -178,23 +234,32 @@ with gr.Blocks(css=custom_css, head=head, delete_cache=(3600, 3600)) as demo:
             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")
+                with gr.Column():
+                    md_premium2 = gr.Markdown(MARKDOWN2)
+                with gr.Column():
+                    export_button = gr.Button("Export Images")
+                    export_file = gr.File(label="Download", elem_id="export_file")
+
             with gr.Row():
                 with gr.Column():
-                    gr.Markdown(MARKDOWN1)
+                    premium_link_button = gr.Button("🚀 Unlock Deep Search Now!", elem_classes="button-gradient", link=PREMIUM_CHECKOUT)
                 with gr.Column():
-                    md_premium2 = gr.Markdown(MARKDOWN2)
-            new_search_button = gr.Button("🚀 Try New Search")
+                    new_search_button = gr.Button("🔍 New Search")
             gr.HTML(MARKDOWN3)
 
-    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)
+    face_search_button.click(search_ui, inputs=[], outputs=[col1, col2], api_name=False)
+    face_search_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)
+    token.change(update_button, inputs=[token], outputs=[premium_search_button, face_search_button])
+
+    with gr.Row():
+        with gr.Column(scale=1):
+            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>')
+        with gr.Column(scale=5):
+            html = gr.HTML()
 
-    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)
+    demo.load(set_url_token, inputs=None, outputs=[token])
 
 demo.queue(api_open=False, default_concurrency_limit=8).launch(show_api=False)