fixes

app.py

@@ -19,19 +19,14 @@ df = visit_bench.to_pandas()
 print(f"Got {len(df)} items in dataframe")
 df = df.sample(frac=1)
 
-# df['image'] = df['image_url'].apply(lambda x: '<a href= "' + str(x) + '" target="_blank"> <img src= "' + str(
-    # x) + '"/> </a>')
-# df['image'] = df['image_url'].apply(lambda x: '<a href= "' + str(x) + '" target="_blank"> <img src= "' + str(
-#     x) + '" width="400"/> </a>')
-# df['image'] = df['image'].apply(lambda x: '<a href= "' + str(x) + '" target="_blank"> <img src= "' + str(
-#     x) + '" width="400"/> </a>')
-df['image'] = df['image'].apply(lambda x: '<a href= "' + str(x['path']) + '" target="_blank"> <img src= "' + str(
-    x['path']) + '" width="400"/> </a>')
+df['image'] = df['image'].apply(lambda x: f'<a href="{x["path"]}" target="_blank"><img src="{x["path"]}" style="width:100%; max-width:800px; height:auto;"></a>')
+
 
 cols = list(df.columns)
 cols.insert(0, cols.pop(cols.index('image')))
 df = df.reindex(columns=cols)
 LINES_NUMBER = 20
+df.drop(columns=['visual'],inplace=True)
 
 def display_df():
     df_images = df.head(LINES_NUMBER)
@@ -54,6 +49,22 @@ initial_dataframe = display_df()
 
 # Gradio Blocks
 with gr.Blocks() as demo:
+    style = """
+    <style>
+    .gradio-container table tr td, .gradio-container table tr th {
+        padding: 10px 20px;  /* Increase padding, adjust as needed */
+        white-space: normal;  /* Ensure text wraps in both data cells and headers */
+        word-wrap: break-word;  /* Break the word to prevent overflow */
+        vertical-align: top;  /* Align text to the top of the cell */
+    }
+    .gradio-container table tr td:nth-child(1), .gradio-container table tr th:nth-child(1) {
+        white-space: nowrap;  /* Prevent wrapping in image column and its header */
+        vertical-align: middle;  /* Align images to the middle of the cell */
+        width: 600px;  /* Set a specific width for the image column and its header */
+    }
+    </style>
+    """
+    gr.HTML(style)  # This line embeds your CSS in the interface
     gr.Markdown("<h1><center>VisIT-Bench Dataset Viewer</center></h1>")
 
     with gr.Row():
@@ -62,16 +73,14 @@ with gr.Blocks() as demo:
         b2 = gr.Button("Next Rows")
 
     with gr.Row():
-        # out_dataframe = gr.Dataframe(initial_dataframe, wrap=True, max_rows=LINES_NUMBER, overflow_row_behaviour="paginate",
-        #                              interactive=False,
-        #                              datatype=["markdown", "str", "str", "str", "bool", 
-        #                                        "bool", "bool", "str", "str", "str"])
-        out_dataframe = gr.Dataframe(initial_dataframe, wrap=True, row_count=LINES_NUMBER,
-                             interactive=False,
-                             datatype=["markdown", "str", "str", "str", "bool",
-                                       "bool", "bool", "str", "str", "str"])
-
-
+        out_dataframe = gr.Dataframe(
+            value=initial_dataframe,
+            row_count=LINES_NUMBER,
+            interactive=False,
+            datatype=["markdown", "str", "str", "bool", "bool", "bool", "str", "str", "str"],
+            # min_width=100,
+            column_widths=[300, 120, 120, 120, 120, 120, 120, 120, 120, 120]
+        )
 
     b1.click(fn=display_df, outputs=out_dataframe, api_name="initial_dataframe")
     b2.click(fn=display_next, inputs=[out_dataframe, num_end], outputs=[out_dataframe, num_end],