Update app.py

app.py

@@ -574,17 +574,29 @@ 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 and Markdown rendering ---
-            output_dot_product_text = gr.Textbox(
-                label="Dot Product Result and Representations",
-                lines=20,
-                autoscroll=True,
-                interactive=False,
-                max_lines=None,
-                render_as_markdown=True # <--- THE KEY ADDITION HERE!
+            # --- MODIFIED: Output component as a gr.Markdown with scrolling ---
+            # Reverting to gr.Markdown, and adding height/scroll for it
+            output_dot_product_markdown = gr.Markdown(
+                # Use value="" to initialize, content will be set by the function
+                value="",
+                # Fixed height for the scrollable area
+                # You can adjust this value (e.g., "500px") to your preference
+                # Or set it as a percentage of available space, e.g., "80%"
+                height=500, # Example: 500 pixels height
+                # Enable vertical scrolling if content overflows
+                # "auto" is often good, "scroll" always shows scrollbar
+                # Gradio uses `css` for this, so these parameters might translate to inline styles
+                # or custom CSS classes automatically added by Gradio.
+                elem_classes=["scrollable-output"] # Add a custom class for CSS targeting if needed
             )
 
-            # Update the gr.Interface call to use the new Textbox output
+            # Add CSS specifically for this scrollable markdown output
+            # This needs to be added to the overall `css` string or handled directly here
+            # For simplicity, let's assume `height` itself will enable scroll in newer Gradio,
+            # or add a specific CSS class targeting the markdown.
+            # However, for pure markdown, `height` is the primary way.
+
+            # Update the gr.Interface call to use the new Markdown output
             gr.Interface(
                 fn=calculate_dot_product_and_representations_independent,
                 inputs=[
@@ -593,7 +605,7 @@ with gr.Blocks(title="SPLADE Demos", css=css) as demo:
                     query_text_input,
                     doc_text_input
                 ],
-                outputs=output_dot_product_text,
+                outputs=output_dot_product_markdown, # Changed back to Markdown
                 allow_flagging="never"
             )