Update app.py

app.py

@@ -6,12 +6,34 @@ from tqdm.auto import tqdm
 import os
 
 
-# Remove or comment out any CSS related to .share-button if you want Gradio to handle its default placement.
-# If you *still* want it fixed to a specific corner globally, you can uncomment your original fixed CSS.
+# CSS to style the share button
 css = """
-/* No specific CSS for .share-button if we're letting Gradio place it dynamically
-   when demo.launch(share=True) is used.
-*/
+.share-button-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+    margin-bottom: 20px;
+}
+
+.custom-share-button {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border: none;
+    color: white;
+    padding: 8px 16px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 14px;
+    margin: 4px 2px;
+    cursor: pointer;
+    border-radius: 6px;
+    transition: all 0.3s ease;
+}
+
+.custom-share-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+}
 """
 
 
@@ -414,6 +436,10 @@ def calculate_dot_product_and_representations_independent(query_model_choice, do
     return full_output
 
 
+# Function to generate share link (simulated)
+def generate_share_link():
+    return "🔗 Share link functionality would be available when running with share=True"
+
 # --- Gradio Interface Setup with Tabs ---
 with gr.Blocks(title="SPLADE Demos", css=css) as demo:
     gr.Markdown("# 🌌 Sparse Encoder Playground") # Updated title
@@ -438,11 +464,25 @@ 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?"
                     )
-                    # Removed gr.ShareButton here as it caused an AttributeError
+                    
+                    # Add share button underneath the input field
+                    with gr.Row(elem_classes="share-button-container"):
+                        share_button = gr.Button(
+                            "📤 Generate Share Link", 
+                            elem_classes="custom-share-button",
+                            size="sm"
+                        )
+                    
+                    share_output = gr.Textbox(
+                        label="Share Link",
+                        interactive=False,
+                        visible=False
+                    )
+                    
                     info_output_display = gr.Markdown(
                         value="",
                         label="Vector Information",
-                        elem_id="info_output_display" # Add an ID for potential CSS if needed
+                        elem_id="info_output_display"
                     )
                 with gr.Column(scale=2): # Right column for the main representation output
                     main_representation_output = gr.Markdown()
@@ -458,10 +498,19 @@ 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(model_radio.value, input_text.value),
+                fn=lambda: predict_representation_explorer("MLM encoder (SPLADE-cocondenser-distil)", ""),
                 outputs=[main_representation_output, info_output_display]
             )