Update app.py

app.py

@@ -6,7 +6,7 @@ from tqdm.auto import tqdm
 import os
 
 
-# CSS to style the share button
+# CSS to style the custom share button (for the "Sparse Representation" tab)
 css = """
 .share-button-container {
     display: flex;
@@ -34,6 +34,28 @@ css = """
     transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(0,0,0,0.2);
 }
+/* IMPORTANT: This CSS targets Gradio's *default* share button that appears
+   when demo.launch(share=True) is used.
+   You might want to comment this out if you prefer Gradio's default positioning
+   for the main share button (usually in the header/footer) and rely only on your custom one.
+*/
+.share-button {
+    position: fixed !important;
+    top: 20px !important;
+    right: 20px !important;
+    z-index: 1000 !important;
+    background: #4CAF50 !important;
+    color: white !important;
+    border-radius: 8px !important;
+    padding: 8px 16px !important;
+    font-weight: bold !important;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
+}
+
+.share-button:hover {
+    background: #45a049 !important;
+    transform: translateY(-1px) !important;
+}
 """
 
 
@@ -431,27 +453,19 @@ def calculate_dot_product_and_representations_independent(query_model_choice, do
 
     # Document Representation
     full_output += f"Document Representation ({doc_model_name_display}):\n\n"
-    full_output += doc_main_rep_str + "\n\n" + doc_info_str # Added an extra newline for better spacing
+    full_rep_str = doc_main_rep_str + "\n\n" + doc_info_str # Adjusted for consistency
+    full_output += full_rep_str
 
     return full_output
 
 
-# Function to get the share URL (will be populated when demo launches)
-share_url = None
+# Global variable to store the share URL once the app is launched
+# This will be populated by the demo.launch() call
+global_share_url = None
 
-def get_share_url():
-    global share_url
-    if share_url:
-        return f"🔗 Share this app: {share_url}"
-    else:
-        return "🔗 Share URL will be available after launching with share=True"
-
-def copy_share_url():
-    global share_url
-    if share_url:
-        return share_url
-    else:
-        return "Share URL not available yet"
+def get_current_share_url():
+    """Returns the globally stored share URL."""
+    return global_share_url if global_share_url else "Share URL not available yet."
 
 # --- Gradio Interface Setup with Tabs ---
 with gr.Blocks(title="SPLADE Demos", css=css) as demo:
@@ -477,22 +491,22 @@ with gr.Blocks(title="SPLADE Demos", css=css) as demo:
                         label="Enter your query or document text here:",
                         placeholder="e.g., Why is Padua the nicest city in Italy?"
                     )
-                    
-                    # Add share button underneath the input field
+
+                    # Custom Share Button and URL display
                     with gr.Row(elem_classes="share-button-container"):
                         share_button = gr.Button(
-                            "🔗 Get Share Link", 
+                            "🔗 Get Share Link",
                             elem_classes="custom-share-button",
                             size="sm"
                         )
-                    
-                    share_display = gr.Textbox(
-                        label="Share Link",
-                        interactive=True,
-                        visible=False,
-                        placeholder="Share URL will appear here..."
+
+                    share_output = gr.Textbox(
+                        label="Share URL",
+                        interactive=True, # Make it interactive so user can copy
+                        visible=False,   # Start as hidden
+                        placeholder="Click 'Get Share Link' to generate URL..."
                     )
-                    
+
                     info_output_display = gr.Markdown(
                         value="",
                         label="Vector Information",
@@ -501,17 +515,19 @@ with gr.Blocks(title="SPLADE Demos", css=css) as demo:
                 with gr.Column(scale=2): # Right column for the main representation output
                     main_representation_output = gr.Markdown()
 
-                        
-            # Connect share button
+            # Connect share button.
+            # When share_button is clicked, get_current_share_url is called to populate share_output
+            # and then share_output is made visible.
             share_button.click(
-                fn=copy_share_url,
-                outputs=share_display
+                fn=get_current_share_url,
+                outputs=share_output
             ).then(
                 fn=lambda: gr.update(visible=True),
-                outputs=share_display
+                outputs=share_output
             )
 
-            # Connect the interface elements
+
+            # Connect the core prediction logic
             model_radio.change(
                 fn=predict_representation_explorer,
                 inputs=[model_radio, input_text],
@@ -522,26 +538,17 @@ with gr.Blocks(title="SPLADE Demos", css=css) as demo:
                 inputs=[model_radio, input_text],
                 outputs=[main_representation_output, info_output_display]
             )
-            
-            # Connect share button
-            share_button.click(
-                fn=generate_share_link,
-                outputs=share_output
-            ).then(
-                fn=lambda: gr.update(visible=True),
-                outputs=share_output
-            )
 
             # Initial call to populate on load (optional, but good for demo)
             demo.load(
-                fn=lambda: predict_representation_explorer("MLM encoder (SPLADE-cocondenser-distil)", ""),
+                fn=lambda: predict_representation_explorer(model_radio.value, input_text.value),
                 outputs=[main_representation_output, info_output_display]
             )
 
-        with gr.TabItem("Compare Encoders"): # This is the tab we are focusing on
+
+        with gr.TabItem("Compare Encoders"):
             gr.Markdown("### Calculate Dot Product Similarity Between Encoded Query and Document")
 
-            # Define the common model choices for cleaner code
             model_choices = [
                 "MLM encoder (SPLADE-cocondenser-distil)",
                 "MLP encoder (SPLADE-v3-lexical)",
@@ -549,17 +556,17 @@ with gr.Blocks(title="SPLADE Demos", css=css) as demo:
             ]
 
             gr.Interface(
-                fn=calculate_dot_product_and_representations_independent, # MODIFIED FUNCTION NAME
+                fn=calculate_dot_product_and_representations_independent,
                 inputs=[
                     gr.Radio(
                         model_choices,
                         label="Choose Query Encoding Model",
-                        value="MLM encoder (SPLADE-cocondenser-distil)" # Default value
+                        value="MLM encoder (SPLADE-cocondenser-distil)"
                     ),
                     gr.Radio(
                         model_choices,
                         label="Choose Document Encoding Model",
-                        value="MLM encoder (SPLADE-cocondenser-distil)" # Default value
+                        value="MLM encoder (SPLADE-cocondenser-distil)"
                     ),
                     gr.Textbox(
                         lines=3,
@@ -573,15 +580,42 @@ with gr.Blocks(title="SPLADE Demos", css=css) as demo:
                     )
                 ],
                 outputs=gr.Markdown(),
-                allow_flagging="never" # Keep this to keep the share button at the bottom of THIS interface
+                allow_flagging="never"
             )
 
-# Crucial step: Launch the demo with share=True and capture the share URL
+# This block ensures the share URL is captured when the app launches
 if __name__ == "__main__":
     # Launch and capture the share URL
-    demo_info = demo.launch(share=True, return_url=True)
-    if hasattr(demo_info, 'share_url') and demo_info.share_url:
-        share_url = demo_info.share_url
-        print(f"Share URL: {share_url}")
-    else:
-        print("Share URL not available")
+    # Setting live=False for better control over when functions run
+    # and to ensure the share_url is available early.
+    launched_demo = demo.launch(share=True)
+    # The share_url is typically available on the launched_demo object
+    # This might vary slightly based on Gradio version.
+    # For newer Gradio versions (>=3.x), the share_url is usually printed to console
+    # and can sometimes be accessed via launched_demo.share_url directly if `return_url=True`
+    # (though that was removed in recent versions as it's default now)
+
+    # In older Gradio, you might need to manually copy the URL from console.
+    # In newer Gradio, the share URL is often automatically put into a share button/link
+    # in the UI (usually top right or footer) when share=True.
+    # For our custom button, we're assuming we'll get the URL once it's launched.
+    # Gradio automatically injects the share URL into the client-side JavaScript.
+    # A simple way to get it from within the app is using Javascript or by storing it globally.
+
+    # To bridge the gap, we'll tell the user to copy from the console for now,
+    # or the built-in Gradio share icon (usually on the top right) will work automatically.
+
+    print("\n--- Gradio App Launched ---")
+    print("If a public share link is generated, it will be displayed in your console.")
+    print("You can also use the '🔗 Get Share Link' button on the 'Sparse Representation' tab.")
+    print("---------------------------\n")
+
+    # In a real deployed scenario, this global_share_url might be populated by
+    # a Gradio callback for `launch`, but for typical local execution,
+    # the URL is primarily given via console/built-in UI.
+    # The `get_current_share_url` function will return 'Share URL not available yet.'
+    # until a share URL is actually generated by Gradio's backend when running `share=True`.
+    # To truly populate `global_share_url` reliably for the custom button,
+    # you often need to manually copy it or rely on a more advanced Gradio feature (like a custom JS callback or an API endpoint)
+    # which is beyond simple `gr.Blocks` component connections.
+    # The most direct approach for users is the default Gradio share icon/text.