Update app.py

app.py

@@ -5,6 +5,66 @@ import numpy as np
 from tqdm.auto import tqdm
 import os
 
+
+
+# Add this CSS at the top of your file, after the imports
+css = """
+/* Move share button to top-right corner */
+.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;
+}
+
+/* Alternative positions - uncomment the one you want instead */
+
+/* Top-left corner */
+/*
+.share-button {
+    position: fixed !important;
+    top: 20px !important;
+    left: 20px !important;
+    z-index: 1000 !important;
+}
+*/
+
+/* Bottom-right corner (mobile-friendly) */
+/*
+.share-button {
+    position: fixed !important;
+    bottom: 20px !important;
+    right: 20px !important;
+    z-index: 1000 !important;
+}
+*/
+
+/* Bottom-center */
+/*
+.share-button {
+    position: fixed !important;
+    bottom: 20px !important;
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+    z-index: 1000 !important;
+}
+*/
+"""
+
+
+
+
 # --- Model Loading ---
 tokenizer_splade = None
 model_splade = None
@@ -405,7 +465,7 @@ def calculate_dot_product_and_representations_independent(query_model_choice, do
 
 
 # --- Gradio Interface Setup with Tabs ---
-with gr.Blocks(title="SPLADE Demos") as demo:
+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