Update app.py

app.py

@@ -453,30 +453,55 @@ 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_rep_str = doc_main_rep_str + "\n\n" + doc_info_str # Adjusted for consistency
-    full_output += full_rep_str
+    full_output += doc_main_rep_str + "\n\n" + doc_info_str # Added an extra newline for better spacing
 
     return full_output
 
 
 # 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_current_share_url():
-    """Returns the globally stored share URL."""
-    return global_share_url if global_share_url else "Share URL not available yet."
+# JavaScript to copy text to clipboard
+# This will be injected into the Gradio UI
+copy_to_clipboard_js = """
+async (url) => {
+    if (url) {
+        try {
+            await navigator.clipboard.writeText(url);
+            console.log('Share URL copied to clipboard:', url);
+            return 'Copied to clipboard!'; // Message to display to user
+        } catch (err) {
+            console.error('Failed to copy share URL:', err);
+            return 'Failed to copy!';
+        }
+    }
+    return 'URL not available.';
+}
+"""
+
+def get_share_url_for_button():
+    """
+    Function to provide the share URL to the Gradio Textbox.
+    This will be called when the custom button is clicked.
+    """
+    if global_share_url:
+        return global_share_url
+    else:
+        # In case the URL isn't set yet, provide a placeholder.
+        # This function runs server-side, so it won't have the client-side URL
+        # until the app has truly launched.
+        return "Generating share link..."
 
 # --- Gradio Interface Setup with Tabs ---
 with gr.Blocks(title="SPLADE Demos", css=css) as demo:
-    gr.Markdown("# 🌌 Sparse Encoder Playground") # Updated title
-    gr.Markdown("Explore different SPLADE models and their sparse representation types, and calculate similarity between query and document representations.") # Updated description
+    gr.Markdown("# 🌌 Sparse Encoder Playground")
+    gr.Markdown("Explore different SPLADE models and their sparse representation types, and calculate similarity between query and document representations.")
 
     with gr.Tabs():
         with gr.TabItem("Sparse Representation"):
             gr.Markdown("### Produce a Sparse Representation of an Input Text")
             with gr.Row():
-                with gr.Column(scale=1): # Left column for inputs and info
+                with gr.Column(scale=1):
                     model_radio = gr.Radio(
                         [
                             "MLM encoder (SPLADE-cocondenser-distil)",
@@ -495,35 +520,55 @@ with gr.Blocks(title="SPLADE Demos", css=css) as demo:
                     # Custom Share Button and URL display
                     with gr.Row(elem_classes="share-button-container"):
                         share_button = gr.Button(
-                            "🔗 Get Share Link",
+                            "🔗 Get & Copy Share Link",
                             elem_classes="custom-share-button",
                             size="sm"
                         )
 
-                    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..."
+                    share_output_textbox = gr.Textbox( # Renamed for clarity
+                        label="Share URL (Click button to copy)",
+                        interactive=True,
+                        visible=False,
+                        placeholder="Click 'Get & Copy Share Link' to generate and copy URL..."
                     )
 
+                    # A small text display to confirm copy
+                    copy_confirmation_text = gr.Markdown(value="", visible=False)
+
+
                     info_output_display = gr.Markdown(
                         value="",
                         label="Vector Information",
                         elem_id="info_output_display"
                     )
-                with gr.Column(scale=2): # Right column for the main representation output
+                with gr.Column(scale=2):
                     main_representation_output = gr.Markdown()
 
-            # 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.
+            # Connect share button:
+            # 1. Populate the textbox with the share URL (from backend)
+            # 2. Make the textbox visible
+            # 3. Use JS to copy its content to clipboard
             share_button.click(
-                fn=get_current_share_url,
-                outputs=share_output
+                fn=get_share_url_for_button, # This populates the textbox
+                outputs=share_output_textbox
+            ).then(
+                fn=lambda: gr.update(visible=True), # This makes the textbox visible
+                outputs=share_output_textbox
+            ).then(
+                fn=None, # This is a dummy function to allow JS to run
+                _js=f'(url) => {{ {copy_to_clipboard_js} (url); }}', # Pass the URL from the textbox to JS
+                inputs=[share_output_textbox], # The output of previous step (share_output_textbox) becomes input to this step
+                outputs=[copy_confirmation_text] # Output status of copy to confirmation text
             ).then(
-                fn=lambda: gr.update(visible=True),
-                outputs=share_output
+                fn=lambda msg: gr.update(value=msg, visible=True), # Show confirmation message
+                inputs=[copy_confirmation_text],
+                outputs=[copy_confirmation_text]
+            ).then(
+                fn=lambda: gr.update(value="", visible=False), # Hide confirmation message after a short delay
+                outputs=[copy_confirmation_text],
+                queue=False, # Don't block other events
+                api_name="hide_confirmation_message", # Optional: give it an API name
+                every=2 # Hide after 2 seconds
             )
 
 
@@ -586,36 +631,22 @@ with gr.Blocks(title="SPLADE Demos", css=css) as demo:
 # This block ensures the share URL is captured when the app launches
 if __name__ == "__main__":
     # Launch and capture the share URL
-    # 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.
+    # Gradio will print the share URL to the console automatically when share=True
+    # For more reliable programmatic access *within* the app (especially for older Gradio versions
+    # or more complex scenarios), you might need a custom endpoint or to rely on the
+    # client-side `Gradio.share_url` variable.
+    # For simple local demo, printing to console is often sufficient.
+    launched_info = demo.launch(share=True)
+
+    # In newer Gradio versions (e.g., 3.x and 4.x), the share_url is typically
+    # available via `launched_info.share_url` directly.
+    if hasattr(launched_info, 'share_url') and launched_info.share_url:
+        global_share_url = launched_info.share_url
+        print(f"\n--- Public Share URL (for your custom button): {global_share_url} ---\n")
+    else:
+        print("\n--- Public Share URL not available directly from launch info. "
+              "Please check your console for the Gradio-generated share link. ---\n")
+
+    print("\n--- Gradio App Running ---")
+    print("Open the link in your browser to interact with the app.")
+    print("---------------------------\n")