Update app.py

app.py

@@ -425,43 +425,41 @@ def calculate_dot_product_and_representations_independent(query_model_choice, do
     doc_vector_fn, doc_tokenizer, doc_is_binary, doc_model_name_display = get_model_assets(doc_model_choice)
 
     if query_vector_fn is None or doc_vector_fn is None:
-        return "Please select valid models for both query and document encoding.", "", ""
+        return "Please select valid models for both query and document encoding.", ""
 
     query_vector = query_vector_fn(query_text)
     doc_vector = doc_vector_fn(doc_text)
 
     if query_vector is None or doc_vector is None:
-        return "Failed to generate one or both vectors. Please check model loading and input text.", "", ""
+        return "Failed to generate one or both vectors. Please check model loading and input text.", ""
 
     # Calculate dot product
-    # Ensure both vectors are on CPU before dot product to avoid device mismatch issues
-    # and to ensure .item() works reliably for conversion to float.
     dot_product = float(torch.dot(query_vector.cpu(), doc_vector.cpu()).item())
 
     # Format representations - these functions now return two strings (main_output, info_output)
     query_main_rep_str, query_info_str = format_sparse_vector_output(query_vector, query_tokenizer, query_is_binary)
     doc_main_rep_str, doc_info_str = format_sparse_vector_output(doc_vector, doc_tokenizer, doc_is_binary)
 
-
     # Combine output into a single string for the Markdown component
+    # Using Markdown's blockquote for representations can help them stand out as code/data
     full_output = f"### Dot Product Score: {dot_product:.6f}\n\n"
     full_output += "---\n\n"
 
     # Query Representation
-    full_output += f"Query Representation ({query_model_name_display}):\n\n"
-    full_output += query_main_rep_str + "\n\n" + query_info_str # Added an extra newline for better spacing
-    full_output += "\n\n---\n\n" # Separator
+    full_output += f"#### Query Representation ({query_model_name_display}):\n" # Smaller heading for sub-section
+    full_output += f"> {query_main_rep_str}\n" # Using blockquote for the sparse list
+    full_output += f"> {query_info_str}\n" # Using blockquote for info as well
+    full_output += "\n---\n\n" # Separator
 
     # 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 += f"#### Document Representation ({doc_model_name_display}):\n" # Smaller heading for sub-section
+    full_output += f"> {doc_main_rep_str}\n" # Using blockquote
+    full_output += f"> {doc_info_str}" # Using blockquote
 
     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():
@@ -503,8 +501,8 @@ with gr.Blocks(title="SPLADE Demos", css=css) as demo:
 
                     share_output = gr.Textbox(
                         label="Share URL",
-                        interactive=True, # Make it interactive so user can copy
-                        visible=False,   # Start as hidden
+                        interactive=True,
+                        visible=False,
                         placeholder="Click 'Get Share Link' to generate URL..."
                     )
 
@@ -517,8 +515,6 @@ with gr.Blocks(title="SPLADE Demos", css=css) as demo:
                     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.
             share_button.click(
                 fn=get_current_share_url,
                 outputs=share_output
@@ -578,13 +574,14 @@ with gr.Blocks(title="SPLADE Demos", css=css) as demo:
                 placeholder="e.g., Padua's cuisine is as famous as its legendary University."
             )
 
-            # --- MODIFIED: Output component as a Textbox with scrollbar ---
+            # --- MODIFIED: Output component as a Textbox with scrollbar and Markdown rendering ---
             output_dot_product_text = gr.Textbox(
                 label="Dot Product Result and Representations",
-                lines=20,  # This controls the initial height
-                autoscroll=True, # Automatically scroll to bottom if new content is added
-                interactive=False, # Make it non-editable
-                max_lines=None # Allows infinite scrolling (no max height)
+                lines=20,
+                autoscroll=True,
+                interactive=False,
+                max_lines=None,
+                render_as_markdown=True # <--- THE KEY ADDITION HERE!
             )
 
             # Update the gr.Interface call to use the new Textbox output
@@ -596,7 +593,7 @@ with gr.Blocks(title="SPLADE Demos", css=css) as demo:
                     query_text_input,
                     doc_text_input
                 ],
-                outputs=output_dot_product_text, # Changed to the Textbox
+                outputs=output_dot_product_text,
                 allow_flagging="never"
             )
     
@@ -617,37 +614,8 @@ 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.
+    print("---------------------------\n")