Update app.py

app.py

@@ -19,9 +19,17 @@ def display_next10(dataframe, end):
   end = start + 9
   df_images = df.loc[start:end]
   return df_images, end
-  
+
+custom_css = """
+#image_dataframe td:first-child img {
+    width: 300px !important;
+    height: auto !important;
+    max-width: none !important;
+}
+"""
+
 #Gradio Blocks
-with gr.Blocks() as demo:
+with gr.Blocks(css=custom_css) as demo:
   gr.Markdown("<h1><center>Utility Gradio Space for viewing PlaygroundAI Images</center></h1>")
   gr.Markdown(
         """<div align="center">This Tool helps you to analyze and inspect the images and corresponding prompts from <a href = "https://playgroundai.com/">Playground AI</a> Images.<br><a href="https://twitter.com/Suhail">Suhail</a> has recently shared an open dataset of all the liked images and their prompts from PlaygroundAI on <a href="https://github.com/playgroundai/liked_images">Github here</a>. This is an attempt to explore this dataset beautifully using the power and flexibility of Gradio!<br><b>To use the tool:</b>First, click on the 'Initial' button, and then iteratively on the 'Next 10' button.<br><b>Bonus:</b>Click on images to get the original PlaygroundAI image displayed on next tab</div>""")
@@ -31,7 +39,12 @@ with gr.Blocks() as demo:
     b2 = gr.Button("Next 10 Rows")
     
   with gr.Row():
-    out_dataframe = gr.Dataframe(wrap=True, row_count=(10, 'fixed'), datatype = ["markdown", "markdown", "str", "str", "str", "str", "str", "str"], interactive=False)
+    out_dataframe = gr.Dataframe(wrap=True, 
+                                 row_count=(10, 'fixed'), 
+                                 datatype = ["markdown", "markdown", "str", "str", "str", "str", "str", "str"], 
+                                 interactive=False,
+                                 elem_id = 'image_dataframe'
+                                )
     
   b2.click(fn=display_next10, inputs= [out_dataframe, num_end ], outputs=[out_dataframe, num_end], api_name="next_10_rows")